Merge branch 'develop' into M3-9785-M3-9788-add-nodebalancer-table-and-replace-linodes-with-resources

Author: hasyed-akamai

package.json

@@ -19,6 +19,7 @@
     "eslint-plugin-prettier": "~5.2.6",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "0.4.20",
     "eslint-plugin-sonarjs": "^3.0.2",
     "eslint-plugin-testing-library": "^7.1.1",
     "eslint-plugin-xss": "^0.1.12",

packages/api-v4/.changeset/pr-12272-fixed-1748009649223.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Fixed
+---
+
+Make quota_id a string ([#12272](https://github.com/linode/manager/pull/12272))

packages/api-v4/package.json

@@ -56,6 +56,7 @@
     "lib"
   ],
   "devDependencies": {
+    "@linode/tsconfig": "workspace:*",
     "axios-mock-adapter": "^1.22.0",
     "concurrently": "^9.0.1",
     "tsup": "^8.4.0"

packages/api-v4/src/quotas/quotas.ts

@@ -45,9 +45,9 @@ export const getQuotas = (
  * Returns the usage for a single quota within a particular service specified by `type`.
  *
  * @param type { QuotaType } retrieve a quota within this service type.
- * @param id { number } the quota ID to look up.
+ * @param id { string } the quota ID to look up.
  */
-export const getQuotaUsage = (type: QuotaType, id: number) =>
+export const getQuotaUsage = (type: QuotaType, id: string) =>
   Request<QuotaUsage>(
     setURL(`${BETA_API_ROOT}/${type}/quotas/${id}/usage`),
     setMethod('GET'),

packages/api-v4/src/quotas/types.ts

@@ -20,7 +20,7 @@ export interface Quota {
   /**
    * A unique identifier for the quota.
    */
-  quota_id: number;
+  quota_id: string;
 
   /**
    * The account-wide limit for this service, measured in units

packages/api-v4/tsconfig.json

@@ -1,18 +1,8 @@
 {
+  "extends": ["@linode/tsconfig/package", "@linode/tsconfig/emit-types"],
   "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "emitDeclarationOnly": true,
-    "declaration": true,
     "outDir": "./lib",
-    "esModuleInterop": true,
-    "moduleResolution": "bundler",
-    "skipLibCheck": true,
-    "strict": true,
     "baseUrl": ".",
-    "noUnusedLocals": true,
-    "declarationMap": true,
-    "incremental": true
   },
   "include": [
     "src"

packages/manager/.changeset/pr-12235-upcoming-features-1747394318662.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+DataStream: add Streams empty state and Create Stream views ([#12235](https://github.com/linode/manager/pull/12235))

packages/manager/.changeset/pr-12242-tech-stories-1747759885067.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Reroute Support & Help features ([#12242](https://github.com/linode/manager/pull/12242))

packages/manager/.changeset/pr-12267-tech-stories-1747942707347.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Re-add `eslint-plugin-react-refresh` eslint plugin ([#12267](https://github.com/linode/manager/pull/12267))

packages/manager/.changeset/pr-12272-fixed-1748009662401.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Make quota_id a string ([#12272](https://github.com/linode/manager/pull/12272))

packages/manager/cypress/e2e/core/account/account-linode-managed.spec.ts

@@ -173,7 +173,7 @@ describe('Account Linode Managed', () => {
 
     // Navigate to the 'Open a Support Ticket' page.
     cy.findByText('Support Ticket').should('be.visible').click();
-    cy.url().should('endWith', '/support/tickets');
+    cy.url().should('endWith', '/support/tickets/open?dialogOpen=true');
 
     // Confirm that title and category are related to cancelling Linode Managed.
     cy.findByLabelText('Title (required)').should(

packages/manager/cypress/support/ui/constants.ts

@@ -11,8 +11,8 @@ export const routes = {
   profile: '/profile',
   support: '/support',
   supportTickets: '/support/tickets',
-  supportTicketsClosed: '/support/tickets?type=closed',
-  supportTicketsOpen: '/support/tickets?type=open',
+  supportTicketsClosed: '/support/tickets/closed',
+  supportTicketsOpen: '/support/tickets/open',
 };
 /**
  * due 2 rerender of the page that i could not deterministically check i added this wait

packages/manager/eslint.config.js

@@ -9,6 +9,7 @@ import perfectionist from 'eslint-plugin-perfectionist';
 import prettier from 'eslint-plugin-prettier';
 import react from 'eslint-plugin-react';
 import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
 import sonarjs from 'eslint-plugin-sonarjs';
 import testingLibrary from 'eslint-plugin-testing-library';
 import xss from 'eslint-plugin-xss';
@@ -18,7 +19,6 @@ import tseslint from 'typescript-eslint';
 
 // Shared import restrictions between different rule contexts
 const restrictedImportPaths = [
-  'rxjs',
   '@mui/core',
   '@mui/system',
   '@mui/icons-material',
@@ -136,11 +136,12 @@ export const baseConfig = [
     },
   },
 
-  // 5. React and React Hooks
+  // 5. React, React Hooks, and React Refresh
   {
     files: ['**/*.{ts,tsx}'],
     plugins: {
       react,
+      'react-refresh': reactRefresh,
     },
     rules: {
       'react-hooks/exhaustive-deps': 'warn',
@@ -152,6 +153,7 @@ export const baseConfig = [
       'react/no-unescaped-entities': 'warn',
       'react/prop-types': 'off',
       'react/self-closing-comp': 'warn',
+      'react-refresh/only-export-components': 'warn', // @todo make this error once we fix all occurrences
     },
   },
 
@@ -405,6 +407,7 @@ export const baseConfig = [
       'src/features/Domains/**/*',
       'src/features/DataStream/**/*',
       'src/features/Firewalls/**/*',
+      'src/features/Help/**/*',
       'src/features/Images/**/*',
       'src/features/Longview/**/*',
       'src/features/Managed/**/*',
@@ -415,6 +418,7 @@ export const baseConfig = [
       'src/features/TopMenu/SearchBar/**/*',
       'src/components/Tag/**/*',
       'src/features/StackScripts/**/*',
+      'src/features/Support/**/*',
       'src/features/Volumes/**/*',
       'src/features/VPCs/**/*',
     ],

packages/manager/package.json

@@ -112,7 +112,7 @@
     "cy:component": "cypress open --component",
     "cy:component:run": "cypress run --component --headless -b chrome",
     "cy:rec-snap": "cypress run --headless -b chrome --env visualRegMode=record --spec ./cypress/integration/**/*visual*.spec.ts",
-    "typecheck": "tsc --noEmit && tsc -p cypress --noEmit",
+    "typecheck": "tsc && tsc -p cypress",
     "coverage": "vitest run --coverage && open coverage/index.html",
     "coverage:summary": "vitest run --coverage.enabled --reporter=junit --coverage.reporter=json-summary"
   },

packages/manager/src/MainContent.tsx

@@ -13,7 +13,6 @@ import * as React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { makeStyles } from 'tss-react/mui';
 
-import Logo from 'src/assets/logo/akamai-logo.svg';
 import { MainContentBanner } from 'src/components/MainContentBanner';
 import { MaintenanceScreen } from 'src/components/MaintenanceScreen';
 import {
@@ -129,29 +128,11 @@ const Profile = React.lazy(() =>
     default: module.Profile,
   }))
 );
-const SupportTickets = React.lazy(
-  () => import('src/features/Support/SupportTickets')
-);
-const SupportTicketDetail = React.lazy(() =>
-  import('src/features/Support/SupportTicketDetail/SupportTicketDetail').then(
-    (module) => ({
-      default: module.SupportTicketDetail,
-    })
-  )
-);
-const Help = React.lazy(() =>
-  import('./features/Help/index').then((module) => ({
-    default: module.HelpAndSupport,
-  }))
-);
 const EventsLanding = React.lazy(() =>
   import('src/features/Events/EventsLanding').then((module) => ({
     default: module.EventsLanding,
   }))
 );
-const AccountActivationLanding = React.lazy(
-  () => import('src/components/AccountActivation/AccountActivationLanding')
-);
 const Databases = React.lazy(() => import('src/features/Databases'));
 
 const CloudPulseMetrics = React.lazy(() =>
@@ -223,6 +204,13 @@ export const MainContent = () => {
 
   const { isPageScrollable } = useIsPageScrollable(contentRef);
 
+  migrationRouter.update({
+    context: {
+      globalErrors,
+      queryClient,
+    },
+  });
+
   /**
    * this is the case where the user has successfully completed signup
    * but needs a manual review from Customer Support. In this case,
@@ -232,34 +220,13 @@ export const MainContent = () => {
    */
   if (globalErrors.account_unactivated) {
     return (
-      <div className={classes.bgStyling}>
-        <div className={classes.activationWrapper}>
-          <Box
-            style={{
-              display: 'flex',
-              justifyContent: 'center',
-            }}
-          >
-            <Logo className={classes.logo} width={215} />
-          </Box>
-          <Switch>
-            <Route
-              component={SupportTickets}
-              exact
-              path="/support/tickets"
-              strict
-            />
-            <Route
-              component={SupportTicketDetail}
-              exact
-              path="/support/tickets/:ticketId"
-              strict
-            />
-            <Route component={Help} exact path="/support" />
-            <Route component={AccountActivationLanding} />
-          </Switch>
-        </div>
-      </div>
+      <>
+        <Redirect to="/account-activation" />
+        <RouterProvider
+          context={{ queryClient }}
+          router={migrationRouter as AnyRouter}
+        />
+      </>
     );
   }
 
@@ -371,7 +338,6 @@ export const MainContent = () => {
                                 )}
                                 <Route component={Account} path="/account" />
                                 <Route component={Profile} path="/profile" />
-                                <Route component={Help} path="/support" />
                                 <Route
                                   component={EventsLanding}
                                   path="/events"

packages/manager/src/components/AccountActivation/AccountActivationLanding.test.tsx

@@ -3,10 +3,26 @@ import * as React from 'react';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
-import AccountActivationLanding from './AccountActivationLanding';
+import { AccountActivationLanding } from './AccountActivationLanding';
 
 const openSupportTicket = 'Open a Support Ticket';
 
+const queryMocks = vi.hoisted(() => ({
+  useLocation: vi.fn().mockReturnValue({
+    state: {
+      supportTicketFormFields: {},
+    },
+  }),
+}));
+
+vi.mock('@tanstack/react-router', async () => {
+  const actual = await vi.importActual('@tanstack/react-router');
+  return {
+    ...actual,
+    useLocation: queryMocks.useLocation,
+  };
+});
+
 describe('AccountActivationLanding', () => {
   it('renders the AccountActivationLanding component', () => {
     const { getByText, queryByText } = renderWithTheme(