chore: [M3-8524] - Attempt to get dependencies in a more healthy state

package.json

@@ -37,27 +37,15 @@
     "generate-changelogs": "node scripts/changelog/generate-changelogs.mjs",
     "coverage": "yarn workspace linode-manager coverage",
     "coverage:summary": "yarn workspace linode-manager coverage:summary",
-    "junit:summary": "ts-node scripts/junit-summary/index.ts",
-    "generate-tod": "ts-node scripts/tod-payload/index.ts",
+    "junit:summary": "tsx scripts/junit-summary/index.ts",
+    "generate-tod": "tsx scripts/tod-payload/index.ts",
     "docs": "bunx [email protected] dev docs",
     "prepare": "husky"
   },
   "resolutions": {
-    "braces": "^3.0.3",
-    "@babel/traverse": "^7.23.3",
-    "minimist": "^1.2.3",
-    "yargs-parser": "^21.1.1",
-    "kind-of": "^6.0.3",
     "node-fetch": "^2.6.7",
-    "ua-parser-js": "^0.7.33",
-    "immer": "^9.0.6",
-    "glob-parent": "^5.1.2",
-    "hosted-git-info": "^5.0.0",
     "yaml": "^2.3.0",
-    "word-wrap": "^1.2.4",
-    "semver": "^7.5.2",
-    "tough-cookie": "^4.1.3",
-    "jackspeak": "2.1.1"
+    "semver": "^7.5.2"
   },
   "workspaces": {
     "packages": [

packages/api-v4/package.json

@@ -60,9 +60,8 @@
     "@types/node": "^12.7.1",
     "@types/yup": "^0.29.13",
     "axios-mock-adapter": "^1.22.0",
-    "concurrently": "^4.1.1",
+    "concurrently": "^9.0.1",
     "eslint": "^6.8.0",
-    "eslint-plugin-ramda": "^2.5.1",
     "eslint-plugin-sonarjs": "^0.5.0",
     "lint-staged": "^15.2.9",
     "prettier": "~2.2.1",

packages/manager/.changeset/pr-11005-tech-stories-1727294313614.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Get dependencies in a more healthy state ([#11005](https://github.com/linode/manager/pull/11005))

packages/manager/cypress/vite.config.ts

@@ -1,13 +1,16 @@
 import react from '@vitejs/plugin-react-swc';
-import svgr from 'vite-plugin-svgr';
-import { defineConfig } from 'vite';
 import { URL } from 'url';
+import { defineConfig } from 'vite';
+import svgr from 'vite-plugin-svgr';
+
+import type { UserConfig } from 'vite';
 
 // ESM-friendly alternative to `__dirname`.
 const DIRNAME = new URL('.', import.meta.url).pathname;
 
 export default defineConfig({
-  plugins: [react(), svgr({ exportAsDefault: true })],
+  // @todo Remove this `as` when we upgrade our package manager. Yarn v1's hoisting behavior is causing a type error
+  plugins: [react(), svgr({ exportAsDefault: true })] as UserConfig['plugins'],
   build: {
     rollupOptions: {
       // Suppress "SOURCEMAP_ERROR" warnings.

packages/manager/package.json

@@ -140,7 +140,6 @@
     "@types/dompurify": "^3.0.5",
     "@types/he": "^1.1.0",
     "@types/highlight.js": "~10.1.0",
-    "@types/jsdom": "^21.1.4",
     "@types/jspdf": "^1.3.3",
     "@types/luxon": "3.4.2",
     "@types/markdown-it": "^10.0.2",
@@ -182,15 +181,13 @@
     "eslint-config-prettier": "~8.1.0",
     "eslint-plugin-cypress": "^2.11.3",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-node": "^11.0.0",
     "eslint-plugin-perfectionist": "^1.4.0",
     "eslint-plugin-prettier": "~3.3.1",
     "eslint-plugin-ramda": "^2.5.1",
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^3.0.0",
     "eslint-plugin-scanjs-rules": "^0.2.1",
     "eslint-plugin-sonarjs": "^0.5.0",
-    "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-testing-library": "^3.1.2",
     "eslint-plugin-xss": "^0.1.10",
     "factory.ts": "^0.5.1",
@@ -201,14 +198,12 @@
     "mocha-junit-reporter": "^2.2.1",
     "msw": "^2.2.3",
     "prettier": "~2.2.1",
-    "react-test-renderer": "16.14.0",
     "redux-mock-store": "^1.5.3",
-    "reselect-tools": "^0.0.7",
     "serve": "^14.0.1",
     "simple-git": "^3.19.0",
     "storybook": "^8.3.0",
     "storybook-dark-mode": "^4.0.1",
-    "ts-node": "^10.9.2",
+    "tsx": "^4.19.1",
     "vite": "^5.4.6",
     "vite-plugin-svgr": "^3.2.0",
     "vitest": "^2.1.1"

packages/manager/src/components/PrimaryNav/PrimaryNav.tsx

@@ -294,7 +294,6 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
               const props = {
                 closeMenu,
                 isCollapsed,
-                key: thisLink.display,
                 locationPathname: location.pathname,
                 locationSearch: location.search,
                 ...thisLink,
@@ -307,11 +306,12 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
                 thisLink.prefetchRequestCondition !== undefined ? (
                 <PrefetchPrimaryLink
                   {...props}
+                  key={thisLink.display}
                   prefetchRequestCondition={thisLink.prefetchRequestCondition}
                   prefetchRequestFn={thisLink.prefetchRequestFn}
                 />
               ) : (
-                <PrimaryLink {...props} />
+                <PrimaryLink {...props} key={thisLink.display} />
               );
             })}
           </div>

packages/manager/src/features/Linodes/LinodeCreatev2/Firewall.test.tsx

@@ -1,3 +1,4 @@
+import { waitFor } from '@testing-library/react';
 import React from 'react';
 
 import { firewallFactory } from 'src/factories';
@@ -53,12 +54,19 @@ describe('Linode Create v2 Firewall', () => {
     );
 
     const {
-      findByDisplayValue,
+      getByLabelText,
     } = renderWithThemeAndHookFormContext<CreateLinodeRequest>({
       component: <Firewall />,
       useFormOptions: { defaultValues: { firewall_id: firewall.id } },
     });
 
-    await findByDisplayValue(firewall.label);
+    await waitFor(
+      () => {
+        expect(getByLabelText('Assign Firewall')).toHaveDisplayValue(
+          firewall.label
+        );
+      },
+      { timeout: 5_000 }
+    );
   });
 });

packages/manager/src/features/Linodes/LinodeCreatev2/Security.test.tsx

@@ -17,8 +17,7 @@ import { Security } from './Security';
 import type { LinodeCreateFormValues } from './utilities';
 
 describe('Security', () => {
-  // TODO: Unskip once M3-8559 is addressed.
-  it.skip(
+  it(
     'should render a root password input',
     async () => {
       const { findByLabelText } = renderWithThemeAndHookFormContext({
@@ -55,31 +54,35 @@ describe('Security', () => {
     expect(addSSHKeyButton).toBeEnabled();
   });
 
-  it('should disable the password input if the user does not have permission to create linodes', async () => {
-    server.use(
-      http.get('*/v4/profile', () => {
-        return HttpResponse.json(profileFactory.build({ restricted: true }));
-      }),
-      http.get('*/v4/profile/sshkeys', () => {
-        return HttpResponse.json(makeResourcePage([]));
-      }),
-      http.get('*/v4/profile/grants', () => {
-        return HttpResponse.json(
-          grantsFactory.build({ global: { add_linodes: false } })
-        );
-      })
-    );
+  it(
+    'should disable the password input if the user does not have permission to create linodes',
+    async () => {
+      server.use(
+        http.get('*/v4/profile', () => {
+          return HttpResponse.json(profileFactory.build({ restricted: true }));
+        }),
+        http.get('*/v4/profile/sshkeys', () => {
+          return HttpResponse.json(makeResourcePage([]));
+        }),
+        http.get('*/v4/profile/grants', () => {
+          return HttpResponse.json(
+            grantsFactory.build({ global: { add_linodes: false } })
+          );
+        })
+      );
 
-    const { findByLabelText } = renderWithThemeAndHookFormContext({
-      component: <Security />,
-    });
+      const { findByLabelText } = renderWithThemeAndHookFormContext({
+        component: <Security />,
+      });
 
-    const rootPasswordInput = await findByLabelText('Root Password');
+      const rootPasswordInput = await findByLabelText('Root Password');
 
-    await waitFor(() => {
-      expect(rootPasswordInput).toBeDisabled();
-    });
-  });
+      await waitFor(() => {
+        expect(rootPasswordInput).toBeDisabled();
+      });
+    },
+    { timeout: 5_000 }
+  );
 
   it('should disable ssh key selection if the user does not have permission to create linodes', async () => {
     const sshKeys = sshKeyFactory.buildList(3);

packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResizeUnifiedMigrationPanel.tsx

@@ -83,7 +83,7 @@ export const UnifiedMigrationPanel = (props: Props) => {
               }
               status="help"
               tooltipPosition="right"
-              width={[theme.breakpoints.up('sm')] ? 375 : 300}
+              width={375}
             />
           </Box>
           <Box width="100%">
@@ -112,7 +112,7 @@ export const UnifiedMigrationPanel = (props: Props) => {
               }
               status="help"
               tooltipPosition="right"
-              width={[theme.breakpoints.up('sm')] ? 450 : 300}
+              width={450}
             />
           </Box>
         </RadioGroup>

packages/manager/src/features/PlacementGroups/PlacementGroupsUnassignModal.tsx

@@ -41,10 +41,10 @@ export const PlacementGroupsUnassignModal = (props: Props) => {
     error,
     isPending,
     mutateAsync: unassignLinodes,
-  } = useUnassignLinodesFromPlacementGroup(+placementGroupId ?? -1);
+  } = useUnassignLinodesFromPlacementGroup(+placementGroupId);
 
   const { data: linodeFromQuery, isFetching } = useLinodeQuery(
-    +linodeId ?? -1,
+    +linodeId,
     open && selectedLinode === undefined
   );
 

packages/manager/src/features/Volumes/VolumeCreate.tsx

@@ -439,7 +439,7 @@ export const VolumeCreate = () => {
                 onBlur={handleBlur}
                 onChange={(id: number) => setFieldValue('config_id', id)}
                 value={config_id}
-                width={[theme.breakpoints.down('sm')] ? 320 : 400}
+                width={320}
               />
             </Box>
             <Box alignItems="flex-end" display="flex" position="relative">

packages/manager/src/foundations/themes/light.ts

@@ -336,7 +336,6 @@ export const lightTheme: ThemeOptions = {
           svg: {
             color: Color.Neutrals[40],
           },
-          top: 'unset',
         },
         groupLabel: {
           fontFamily: latoWeb.bold,

packages/manager/src/mocks/utilities/response.ts

@@ -2,7 +2,7 @@ import { HttpResponse } from 'msw';
 
 import { getPaginatedSlice } from '../utilities/pagination';
 
-import type { APIError } from '@linode/api-v4';
+import type { APIError, ResourcePage } from '@linode/api-v4';
 import type { JsonBodyType } from 'msw';
 
 export interface APIPaginatedResponse<T> {
@@ -30,7 +30,7 @@ export const makeResponse = <T extends JsonBodyType>(
   status: number = 200,
   headers: {} = {}
 ) => {
-  return HttpResponse.json(body, {
+  return HttpResponse.json<T>(body, {
     headers,
     status,
   });
@@ -52,7 +52,7 @@ export const makeErrorResponse = (
 ) => {
   const reasonsArray = Array.isArray(reason) ? reason : [reason];
 
-  return HttpResponse.json(
+  return HttpResponse.json<APIErrorResponse>(
     {
       errors: reasonsArray.map((reasonString) => ({
         reason: reasonString,
@@ -144,7 +144,7 @@ export const makePaginatedResponse = <T extends JsonBodyType>({
   const pageCount = Math.ceil(filteredData.length / pageSize);
   const pageSlice = getPaginatedSlice(filteredData, requestedPage, pageSize);
 
-  return HttpResponse.json({
+  return HttpResponse.json<ResourcePage<T>>({
     data: pageSlice,
     page: requestedPage,
     pages: pageCount,

packages/manager/vite.config.ts

@@ -1,6 +1,7 @@
 import react from '@vitejs/plugin-react-swc';
 import svgr from 'vite-plugin-svgr';
 import { defineConfig } from 'vitest/config';
+import type { UserConfig } from 'vitest/config';
 import { URL } from 'url';
 
 // ESM-friendly alternative to `__dirname`.
@@ -11,7 +12,8 @@ export default defineConfig({
     outDir: 'build',
   },
   envPrefix: 'REACT_APP_',
-  plugins: [react(), svgr({ exportAsDefault: true })],
+  // @todo Remove this `as` when we upgrade our package manager. Yarn v1's hoisting behavior is causing a type error
+  plugins: [react(), svgr({ exportAsDefault: true })] as UserConfig['plugins'],
   resolve: {
     alias: {
       src: `${DIRNAME}/src`,

packages/validation/package.json

@@ -44,9 +44,8 @@
   },
   "devDependencies": {
     "@types/node": "^12.7.1",
-    "concurrently": "^4.1.1",
+    "concurrently": "^9.0.1",
     "eslint": "^6.8.0",
-    "eslint-plugin-ramda": "^2.5.1",
     "eslint-plugin-sonarjs": "^0.5.0",
     "lint-staged": "^15.2.9",
     "prettier": "~2.2.1",

packages/validation/src/vpcs.schema.ts

@@ -125,7 +125,7 @@ export const createSubnetSchema = object().shape(
   {
     label: labelValidation.required(LABEL_REQUIRED),
     ipv4: string().when('ipv6', {
-      is: '' || null || undefined,
+      is: (value: unknown) => value === '' || value === null || value === undefined,
       then: string()
         .required(IP_EITHER_BOTH_NOT_NEITHER)
         .test({
@@ -163,7 +163,7 @@ export const createSubnetSchema = object().shape(
       }),
     }),
     ipv6: string().when('ipv4', {
-      is: '' || null || undefined,
+      is: (value: unknown) => value === '' || value === null || value === undefined,
       then: string()
         .required(IP_EITHER_BOTH_NOT_NEITHER)
         .test({