refactor: [M3-8762] - only-export-components for Tanstack routes

packages/manager/.changeset/pr-11142-tech-stories-1729715589096.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+`only-export-components` for Tanstack routes ([#11142](https://github.com/linode/manager/pull/11142))

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/AccountRoute.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 AccountRoute = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <ProductInformationBanner bannerLocation="Account" />
+      <Outlet />
+    </React.Suspense>
+  );
+};

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

@@ -1,22 +1,10 @@
-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 AccountRoutes = () => {
-  return (
-    <React.Suspense fallback={<SuspenseLoader />}>
-      <ProductInformationBanner bannerLocation="Account" />
-      <Outlet />
-    </React.Suspense>
-  );
-};
+import { rootRoute } from '../root';
+import { AccountRoute } from './AccountRoute';
 
 const accountRoute = createRoute({
-  component: AccountRoutes,
+  component: AccountRoute,
   getParentRoute: () => rootRoute,
   path: 'account',
 });

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 BetasRoute = () => {
+  const flags = useFlags();
+  const { selfServeBetas } = flags;
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      {selfServeBetas ? <Outlet /> : <NotFound />}
+    </React.Suspense>
+  );
+};

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

@@ -0,0 +1,29 @@
+import { createRoute } from '@tanstack/react-router';
+
+import { rootRoute } from '../root';
+import { BetasRoute } from './BetasRoute';
+
+const betasRoute = createRoute({
+  component: BetasRoute,
+  getParentRoute: () => rootRoute,
+  path: 'betas',
+});
+
+const betaLandingRoute = createRoute({
+  getParentRoute: () => betasRoute,
+  path: '/',
+}).lazy(() =>
+  import('src/features/Betas/BetasLanding').then((m) => m.betasLandingLazyRoute)
+);
+
+const betaSignupRoute = createRoute({
+  getParentRoute: () => betasRoute,
+  path: 'signup/$betaId',
+}).lazy(() =>
+  import('src/features/Betas/BetaSignup').then((m) => m.betaSignupLazyRoute)
+);
+
+export const betaRouteTree = betasRoute.addChildren([
+  betaLandingRoute,
+  betaSignupRoute,
+]);

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 CloudPulseRoute = () => {
+  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 { CloudPulseRoute } from './CloudPulseRoute';
+
+const cloudPulseRoute = createRoute({
+  component: CloudPulseRoute,
+  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 DatabasesRoute = () => {
+  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,24 +1,10 @@
-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 { DatabasesRoute } from './DatabasesRoute';
 
 const databasesRoute = createRoute({
-  component: DatabasesRoutes,
+  component: DatabasesRoute,
   getParentRoute: () => rootRoute,
   path: 'databases',
 });

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 DomainsRoute = () => {
+  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,22 +1,10 @@
-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 { DomainsRoute } from './DomainsRoute';
 
 const domainsRoute = createRoute({
-  component: DomainsRoutes,
+  component: DomainsRoute,
   getParentRoute: () => rootRoute,
   path: 'domains',
 });

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 EventsRoute = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <Outlet />
+    </React.Suspense>
+  );
+};

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

@@ -1,20 +1,10 @@
-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 { EventsRoute } from './EventsRoute';
 
 const eventsRoute = createRoute({
-  component: EventsRoutes,
+  component: EventsRoute,
   getParentRoute: () => rootRoute,
   path: 'events',
 });

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 FirewallsRoute = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <ProductInformationBanner bannerLocation="Firewalls" />
+      <Outlet />
+    </React.Suspense>
+  );
+};