only-export-components fro routes

packages/manager/.eslintrc.cjs

@@ -155,6 +155,7 @@ module.exports = {
     'xss',
     'perfectionist',
     '@linode/eslint-plugin-cloud-manager',
+    'react-refresh',
   ],
   rules: {
     '@linode/cloud-manager/deprecate-formik': 'warn',
@@ -275,6 +276,7 @@ module.exports = {
     'react/prop-types': 'off',
     'react-hooks/exhaustive-deps': 'warn',
     'react-hooks/rules-of-hooks': 'error',
+    'react-refresh/only-export-components': 'warn',
     'scanjs-rules/assign_to_hostname': 'warn',
     'scanjs-rules/assign_to_href': 'warn',
     'scanjs-rules/assign_to_location': 'warn',

packages/manager/package.json

@@ -190,6 +190,7 @@
     "eslint-plugin-ramda": "^2.5.1",
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^3.0.0",
+    "eslint-plugin-react-refresh": "^0.4.13",
     "eslint-plugin-scanjs-rules": "^0.2.1",
     "eslint-plugin-sonarjs": "^0.5.0",
     "eslint-plugin-testing-library": "^3.1.2",

packages/manager/src/routes/account.tsx → packages/manager/src/routes/account/AccountRoute.tsx

@@ -1,19 +1,7 @@
-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';
-
-export const AccountRoutes = () => {
-  return (
-    <React.Suspense fallback={<SuspenseLoader />}>
-      <ProductInformationBanner bannerLocation="Account" />
-      <Outlet />
-    </React.Suspense>
-  );
-};
+import { createRoute } from '@tanstack/react-router';
+
+import { rootRoute } from '../root';
+import { AccountRoutes } from './index';
 
 const accountRoute = createRoute({
   component: AccountRoutes,

packages/manager/src/routes/account/index.tsx

@@ -0,0 +1,14 @@
+import { Outlet } from '@tanstack/react-router';
+import React from 'react';
+
+import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+export const AccountRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <ProductInformationBanner bannerLocation="Account" />
+      <Outlet />
+    </React.Suspense>
+  );
+};

packages/manager/src/routes/betas/BetasRoute.tsx

@@ -0,0 +1,16 @@
+import { Outlet } from '@tanstack/react-router';
+import React from 'react';
+
+import { NotFound } from 'src/components/NotFound';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+import { useFlags } from 'src/hooks/useFlags';
+
+export const BetaRoutes = () => {
+  const flags = useFlags();
+  const { selfServeBetas } = flags;
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      {selfServeBetas ? <Outlet /> : <NotFound />}
+    </React.Suspense>
+  );
+};

packages/manager/src/routes/betas.tsx → packages/manager/src/routes/betas/index.ts

@@ -1,21 +1,7 @@
-import { Outlet, createRoute } from '@tanstack/react-router';
-import React from 'react';
+import { createRoute } from '@tanstack/react-router';
 
-import { NotFound } from 'src/components/NotFound';
-import { SuspenseLoader } from 'src/components/SuspenseLoader';
-import { useFlags } from 'src/hooks/useFlags';
-
-import { rootRoute } from './root';
-
-export const BetaRoutes = () => {
-  const flags = useFlags();
-  const { selfServeBetas } = flags;
-  return (
-    <React.Suspense fallback={<SuspenseLoader />}>
-      {selfServeBetas ? <Outlet /> : <NotFound />}
-    </React.Suspense>
-  );
-};
+import { rootRoute } from '../root';
+import { BetaRoutes } from './BetasRoute';
 
 const betaRoute = createRoute({
   component: BetaRoutes,

packages/manager/src/routes/cloudPulse/CloudPulseRoute.tsx

@@ -0,0 +1,14 @@
+import { Outlet } from '@tanstack/react-router';
+import React from 'react';
+
+import { DocumentTitleSegment } from 'src/components/DocumentTitle';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+export const CloudPulseRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <DocumentTitleSegment segment="Cloud Pulse" />
+      <Outlet />
+    </React.Suspense>
+  );
+};

packages/manager/src/routes/cloudPulse/index.ts

@@ -0,0 +1,23 @@
+import { createRoute } from '@tanstack/react-router';
+
+import { rootRoute } from '../root';
+import { CloudPulseRoutes } from './CloudPulseRoute';
+
+const cloudPulseRoute = createRoute({
+  component: CloudPulseRoutes,
+  getParentRoute: () => rootRoute,
+  path: 'monitor/cloudpulse',
+});
+
+const cloudPulseLandingRoute = createRoute({
+  getParentRoute: () => cloudPulseRoute,
+  path: '/',
+}).lazy(() =>
+  import('src/features/CloudPulse/CloudPulseLanding').then(
+    (m) => m.cloudPulseLandingLazyRoute
+  )
+);
+
+export const cloudPulseRouteTree = cloudPulseRoute.addChildren([
+  cloudPulseLandingRoute,
+]);

packages/manager/src/routes/databases/DatabasesRoute.tsx

@@ -0,0 +1,16 @@
+import { Outlet } from '@tanstack/react-router';
+import React from 'react';
+
+import { DocumentTitleSegment } from 'src/components/DocumentTitle';
+import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+export const DatabasesRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <DocumentTitleSegment segment="Databases" />
+      <ProductInformationBanner bannerLocation="Databases" />
+      <Outlet />
+    </React.Suspense>
+  );
+};

packages/manager/src/routes/databases.tsx → packages/manager/src/routes/databases/index.ts

@@ -1,21 +1,7 @@
-import { Outlet, createRoute } from '@tanstack/react-router';
-import React from 'react';
+import { createRoute } from '@tanstack/react-router';
 
-import { DocumentTitleSegment } from 'src/components/DocumentTitle';
-import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
-import { SuspenseLoader } from 'src/components/SuspenseLoader';
-
-import { rootRoute } from './root';
-
-export const DatabasesRoutes = () => {
-  return (
-    <React.Suspense fallback={<SuspenseLoader />}>
-      <DocumentTitleSegment segment="Databases" />
-      <ProductInformationBanner bannerLocation="Databases" />
-      <Outlet />
-    </React.Suspense>
-  );
-};
+import { rootRoute } from '../root';
+import { DatabasesRoutes } from './DatabasesRoute';
 
 const databasesRoute = createRoute({
   component: DatabasesRoutes,

packages/manager/src/routes/domains/DomainsRoute.tsx

@@ -0,0 +1,14 @@
+import { Outlet } from '@tanstack/react-router';
+import React from 'react';
+
+import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+export const DomainsRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <ProductInformationBanner bannerLocation="Domains" />
+      <Outlet />
+    </React.Suspense>
+  );
+};

packages/manager/src/routes/domains.tsx → packages/manager/src/routes/domains/index.ts

@@ -1,19 +1,7 @@
-import { Outlet, createRoute } from '@tanstack/react-router';
-import React from 'react';
+import { createRoute } from '@tanstack/react-router';
 
-import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
-import { SuspenseLoader } from 'src/components/SuspenseLoader';
-
-import { rootRoute } from './root';
-
-export const DomainsRoutes = () => {
-  return (
-    <React.Suspense fallback={<SuspenseLoader />}>
-      <ProductInformationBanner bannerLocation="Domains" />
-      <Outlet />
-    </React.Suspense>
-  );
-};
+import { rootRoute } from '../root';
+import { DomainsRoutes } from './DomainsRoute';
 
 const domainsRoute = createRoute({
   component: DomainsRoutes,

packages/manager/src/routes/events/EventsRoute.tsx

@@ -0,0 +1,12 @@
+import { Outlet } from '@tanstack/react-router';
+import React from 'react';
+
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+export const EventsRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <Outlet />
+    </React.Suspense>
+  );
+};

packages/manager/src/routes/events.tsx → packages/manager/src/routes/events/index.ts

@@ -1,17 +1,7 @@
-import { Outlet, createRoute } from '@tanstack/react-router';
-import React from 'react';
+import { createRoute } from '@tanstack/react-router';
 
-import { SuspenseLoader } from 'src/components/SuspenseLoader';
-
-import { rootRoute } from './root';
-
-export const EventsRoutes = () => {
-  return (
-    <React.Suspense fallback={<SuspenseLoader />}>
-      <Outlet />
-    </React.Suspense>
-  );
-};
+import { rootRoute } from '../root';
+import { EventsRoutes } from './EventsRoute';
 
 const eventsRoute = createRoute({
   component: EventsRoutes,

packages/manager/src/routes/firewalls/FirewallsRoute.tsx

@@ -0,0 +1,14 @@
+import { Outlet } from '@tanstack/react-router';
+import React from 'react';
+
+import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+export const FirewallsRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <ProductInformationBanner bannerLocation="Firewalls" />
+      <Outlet />
+    </React.Suspense>
+  );
+};

packages/manager/src/routes/firewalls.tsx → packages/manager/src/routes/firewalls/index.ts

@@ -1,19 +1,7 @@
-import { Outlet, createRoute } from '@tanstack/react-router';
-import React from 'react';
+import { createRoute } from '@tanstack/react-router';
 
-import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
-import { SuspenseLoader } from 'src/components/SuspenseLoader';
-
-import { rootRoute } from './root';
-
-export const FirewallsRoutes = () => {
-  return (
-    <React.Suspense fallback={<SuspenseLoader />}>
-      <ProductInformationBanner bannerLocation="Firewalls" />
-      <Outlet />
-    </React.Suspense>
-  );
-};
+import { rootRoute } from '../root';
+import { FirewallsRoutes } from './FirewallsRoute';
 
 const firewallsRoute = createRoute({
   component: FirewallsRoutes,

packages/manager/src/routes/images/ImagesRoute.tsx

@@ -0,0 +1,14 @@
+import { Outlet } from '@tanstack/react-router';
+import React from 'react';
+
+import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+export const ImagesRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <ProductInformationBanner bannerLocation="Images" />
+      <Outlet />
+    </React.Suspense>
+  );
+};

packages/manager/src/routes/images.tsx → packages/manager/src/routes/images/index.ts

@@ -1,19 +1,7 @@
-import { Outlet, createRoute } from '@tanstack/react-router';
-import React from 'react';
+import { createRoute } from '@tanstack/react-router';
 
-import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
-import { SuspenseLoader } from 'src/components/SuspenseLoader';
-
-import { rootRoute } from './root';
-
-export const ImagesRoutes = () => {
-  return (
-    <React.Suspense fallback={<SuspenseLoader />}>
-      <ProductInformationBanner bannerLocation="Images" />
-      <Outlet />
-    </React.Suspense>
-  );
-};
+import { rootRoute } from '../root';
+import { ImagesRoutes } from './ImagesRoute';
 
 const imagesRoute = createRoute({
   component: ImagesRoutes,

packages/manager/src/routes/index.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { NotFound } from 'src/components/NotFound';
 
-import { accountRouteTree } from './account';
+import { accountRouteTree } from './account/AccountRoute';
 import { betaRouteTree } from './betas';
 import { cloudPulseRouteTree } from './cloudPulse';
 import { databasesRouteTree } from './databases';
@@ -16,7 +16,7 @@ import { linodesRouteTree } from './linodes';
 import { longviewRouteTree } from './longview';
 import { managedRouteTree } from './managed';
 import { nodeBalancersRouteTree } from './nodeBalancers';
-import { objectStorageRouteTree } from './object-storage';
+import { objectStorageRouteTree } from './objectStorage';
 import { placementGroupsRouteTree } from './placementGroups';
 import { profileRouteTree } from './profile';
 import { migrationRootRoute, rootRoute } from './root';