testing + utils

linode · Sep 25, 2024 · 24b00f1 · 24b00f1
1 parent f265b92
commit 24b00f1
Show file tree

Hide file tree

Showing 10 changed files with 341 additions and 147 deletions.
diff --git a/packages/manager/src/MainContentV2.tsx b/packages/manager/src/MainContentV2.tsx
@@ -11,7 +11,6 @@ import { useAccountSettings } from './queries/account/settings';
 import { router } from './routes';
 import { rootRoute } from './routes/root';
 
-const Images = React.lazy(() => import('src/features/Images'));
 const Kubernetes = React.lazy(() =>
   import('src/features/Kubernetes').then((module) => ({
     default: module.Kubernetes,
@@ -77,12 +76,6 @@ const longviewRoute = createRoute({
   path: 'longview',
 });
 
-const imagesRoute = createRoute({
-  component: Images,
-  getParentRoute: () => rootRoute,
-  path: 'images',
-});
-
 const stackScriptsRoute = createRoute({
   component: StackScripts,
   getParentRoute: () => rootRoute,
@@ -186,7 +179,6 @@ const notFoundRoute = createRoute({
 const routeTree = rootRoute.addChildren([
   managedRoute,
   longviewRoute,
-  imagesRoute,
   stackScriptsRoute,
   objectStorageRoute,
   kubernetesRoute,

diff --git a/packages/manager/src/routes/account.tsx b/packages/manager/src/routes/account.tsx
@@ -1,14 +1,11 @@
-import {
-  Outlet,
-  createRoute,
-  lazyRouteComponent,
-} from '@tanstack/react-router';
+import { Outlet, createRoute } from '@tanstack/react-router';
 import React from 'react';
 
 import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
+import { strictLazyRouteComponent } from './utils';
 
 export const AccountRoutes = () => {
   return (
@@ -26,46 +23,42 @@ const accountRoute = createRoute({
 });
 
 const accountIndexRoute = createRoute({
-  component: lazyRouteComponent(
+  component: strictLazyRouteComponent(
     () => import('src/features/Account/AccountLanding')
   ),
   getParentRoute: () => accountRoute,
   path: '/',
 });
 
 const accountUsersUsernameRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import('src/features/Users/UserDetail').then((module) => ({
-      default: module.UserDetail,
-    }))
+  component: strictLazyRouteComponent(
+    () => import('src/features/Users/UserDetail'),
+    'UserDetail'
   ),
   getParentRoute: () => accountRoute,
   path: 'users/$username',
 });
 
 const accountBillingRoute = createRoute({
-  component: lazyRouteComponent(
+  component: strictLazyRouteComponent(
     () => import('src/features/Account/AccountLanding')
   ),
   getParentRoute: () => accountRoute,
   path: 'billing',
 });
 
 const accountBillingEditRoute = createRoute({
-  component: lazyRouteComponent(
+  component: strictLazyRouteComponent(
     () => import('src/features/Account/AccountLanding')
   ),
   getParentRoute: () => accountRoute,
   path: 'billing/edit',
 });
 
 const accountInvoicesInvoiceIdRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import('src/features/Billing/InvoiceDetail/InvoiceDetail').then(
-      (module) => ({
-        default: module.InvoiceDetail,
-      })
-    )
+  component: strictLazyRouteComponent(
+    () => import('src/features/Billing/InvoiceDetail/InvoiceDetail'),
+    'InvoiceDetail'
   ),
   getParentRoute: () => accountRoute,
   parseParams: (params) => ({
@@ -75,12 +68,12 @@ const accountInvoicesInvoiceIdRoute = createRoute({
 });
 
 const accountEntityTransfersCreateRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import(
-      'src/features/EntityTransfers/EntityTransfersCreate/EntityTransfersCreate'
-    ).then((module) => ({
-      default: module.EntityTransfersCreate,
-    }))
+  component: strictLazyRouteComponent(
+    () =>
+      import(
+        'src/features/EntityTransfers/EntityTransfersCreate/EntityTransfersCreate'
+      ),
+    'EntityTransfersCreate'
   ),
   getParentRoute: () => accountRoute,
   path: 'service-transfers/create',

diff --git a/packages/manager/src/routes/domains.tsx b/packages/manager/src/routes/domains.tsx
@@ -1,14 +1,11 @@
-import {
-  Outlet,
-  createRoute,
-  lazyRouteComponent,
-} from '@tanstack/react-router';
+import { Outlet, createRoute } from '@tanstack/react-router';
 import React from 'react';
 
 import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
+import { strictLazyRouteComponent } from './utils';
 
 export const DomainsRoutes = () => {
   return (
@@ -26,30 +23,27 @@ const domainsRoute = createRoute({
 });
 
 const domainsIndexRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import('src/features/Domains/DomainsLanding').then((module) => ({
-      default: module.DomainsLanding,
-    }))
+  component: strictLazyRouteComponent(
+    () => import('src/features/Domains/DomainsLanding'),
+    'DomainsLanding'
   ),
   getParentRoute: () => domainsRoute,
   path: '/',
 });
 
 const domainCreateRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import('src/features/Domains/CreateDomain/CreateDomain').then((module) => ({
-      default: module.CreateDomain,
-    }))
+  component: strictLazyRouteComponent(
+    () => import('src/features/Domains/CreateDomain/CreateDomain'),
+    'CreateDomain'
   ),
   getParentRoute: () => domainsRoute,
   path: 'create',
 });
 
 const domainDetailRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import('src/features/Domains/DomainDetail').then((module) => ({
-      default: module.DomainDetailRouting,
-    }))
+  component: strictLazyRouteComponent(
+    () => import('src/features/Domains/DomainDetail'),
+    'DomainDetailRouting'
   ),
   getParentRoute: () => domainsRoute,
   parseParams: (params) => ({
@@ -59,10 +53,9 @@ const domainDetailRoute = createRoute({
 });
 
 const domainDetailRecordsRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import('src/features/Domains/DomainDetail').then((module) => ({
-      default: module.DomainDetailRouting,
-    }))
+  component: strictLazyRouteComponent(
+    () => import('src/features/Domains/DomainDetail'),
+    'DomainDetailRouting'
   ),
   getParentRoute: () => domainDetailRoute,
   path: 'records',

diff --git a/packages/manager/src/routes/images.tsx b/packages/manager/src/routes/images.tsx
@@ -0,0 +1,41 @@
+import { Outlet, createRoute } from '@tanstack/react-router';
+import React from 'react';
+
+import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+import { rootRoute } from './root';
+import { strictLazyRouteComponent } from './utils';
+
+export const ImagesRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <ProductInformationBanner bannerLocation="Images" />
+      <Outlet />
+    </React.Suspense>
+  );
+};
+
+export const imagesRoute = createRoute({
+  component: ImagesRoutes,
+  getParentRoute: () => rootRoute,
+  path: 'images',
+});
+
+export const imagesIndexRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Images/ImagesLanding/ImagesLanding'),
+    'ImagesLanding'
+  ),
+  getParentRoute: () => imagesRoute,
+  path: '/',
+});
+
+export const imagesCreateRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Images/ImagesCreate/ImageCreate'),
+    'ImageCreate'
+  ),
+  getParentRoute: () => imagesRoute,
+  path: 'create',
+});
diff --git a/packages/manager/src/routes/linodes.tsx b/packages/manager/src/routes/linodes.tsx
@@ -1,13 +1,10 @@
-import {
-  Outlet,
-  createRoute,
-  lazyRouteComponent,
-} from '@tanstack/react-router';
+import { Outlet, createRoute } from '@tanstack/react-router';
 import React from 'react';
 
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
+import { strictLazyRouteComponent } from './utils';
 
 export const LinodesRoutes = () => {
   return (
@@ -24,32 +21,27 @@ export const linodesRoute = createRoute({
 });
 
 const linodesIndexRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import('src/features/Linodes').then((module) => ({
-      default: module.LinodesLandingWrapper,
-    }))
+  component: strictLazyRouteComponent(
+    () => import('src/features/Linodes'),
+    'LinodesLandingWrapper'
   ),
   getParentRoute: () => linodesRoute,
   path: '/',
 });
 
 const linodesCreateRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import('src/features/Linodes/LinodeCreatev2').then((module) => ({
-      default: module.LinodeCreatev2,
-    }))
+  component: strictLazyRouteComponent(
+    () => import('src/features/Linodes/LinodeCreatev2'),
+    'LinodeCreatev2'
   ),
   getParentRoute: () => linodesRoute,
   path: 'create',
 });
 
 const linodesDetailRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import('src/features/Linodes/LinodesDetail/LinodesDetail').then(
-      (module) => ({
-        default: module.LinodeDetail,
-      })
-    )
+  component: strictLazyRouteComponent(
+    () => import('src/features/Linodes/LinodesDetail/LinodesDetail'),
+    'LinodeDetail'
   ),
   getParentRoute: () => linodesRoute,
   parseParams: (params) => ({

diff --git a/packages/manager/src/routes/nodeBalancers.tsx b/packages/manager/src/routes/nodeBalancers.tsx
@@ -1,14 +1,11 @@
-import {
-  Outlet,
-  createRoute,
-  lazyRouteComponent,
-} from '@tanstack/react-router';
+import { Outlet, createRoute } from '@tanstack/react-router';
 import React from 'react';
 
 import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
+import { strictLazyRouteComponent } from './utils';
 
 export const NodeBalancersRoutes = () => {
   return (
@@ -26,7 +23,7 @@ const nodeBalancersRoute = createRoute({
 });
 
 const nodeBalancersIndexRoute = createRoute({
-  component: lazyRouteComponent(
+  component: strictLazyRouteComponent(
     () =>
       import(
         'src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding'
@@ -37,20 +34,20 @@ const nodeBalancersIndexRoute = createRoute({
 });
 
 const nodeBalancersCreateRoute = createRoute({
-  component: lazyRouteComponent(
-    () => import('src/features/NodeBalancers/NodeBalancerCreate')
+  component: strictLazyRouteComponent(
+    () => import('src/features/NodeBalancers/NodeBalancerCreate'),
   ),
   getParentRoute: () => nodeBalancersRoute,
   path: 'create',
 });
 
 const nodeBalancerDetailRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import(
-      'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail'
-    ).then((module) => ({
-      default: module.NodeBalancerDetail,
-    }))
+  component: strictLazyRouteComponent(
+    () =>
+      import(
+        'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail'
+      ),
+    'NodeBalancerDetail'
   ),
   getParentRoute: () => nodeBalancersRoute,
   parseParams: (params) => ({
@@ -60,19 +57,19 @@ const nodeBalancerDetailRoute = createRoute({
 });
 
 const nodeBalancerDetailSummaryRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import(
-      'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerSummary'
-    ).then((module) => ({
-      default: module.NodeBalancerSummary,
-    }))
+  component: strictLazyRouteComponent(
+    () =>
+      import(
+        'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerSummary'
+      ),
+    'NodeBalancerSummary'
   ),
   getParentRoute: () => nodeBalancerDetailRoute,
   path: 'summary',
 });
 
 const nodeBalancerDetailConfigurationsRoute = createRoute({
-  component: lazyRouteComponent(
+  component: strictLazyRouteComponent(
     () =>
       import(
         'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations'
@@ -83,12 +80,12 @@ const nodeBalancerDetailConfigurationsRoute = createRoute({
 });
 
 const nodeBalancerDetailSettingsRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import(
-      'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings'
-    ).then((module) => ({
-      default: module.NodeBalancerSettings,
-    }))
+  component: strictLazyRouteComponent(
+    () =>
+      import(
+        'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings'
+      ),
+    'NodeBalancerSettings'
   ),
   getParentRoute: () => nodeBalancerDetailRoute,
   path: 'settings',