chore(deps) update dependencies (#1045)

## Done - update dependencies that are non-breaking or easy to fix.
canonical · Jan 9, 2025 · 79a2adc · 79a2adc
2 parents 00d8769 + 40e9726
commit 79a2adc
Show file tree

Hide file tree

Showing 60 changed files with 1,999 additions and 1,837 deletions.
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,70 @@
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import react from "eslint-plugin-react";
+import globals from "globals";
+import tsParser from "@typescript-eslint/parser";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+export default [{
+    ignores: ["src/lib/*", "node_modules/*"],
+}, ...compat.extends(
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:@typescript-eslint/strict",
+), {
+    plugins: {
+        "@typescript-eslint": typescriptEslint,
+        react,
+    },
+
+    languageOptions: {
+        globals: {
+            ...globals.node,
+            ...globals.browser,
+            ...globals.jest,
+        },
+
+        parser: tsParser,
+        ecmaVersion: 5,
+        sourceType: "module",
+
+        parserOptions: {
+            project: "tsconfig.json",
+
+            ecmaFeatures: {
+                jsx: true,
+            },
+        },
+    },
+
+    settings: {
+        react: {
+            version: "detect",
+        },
+    },
+
+    rules: {
+        "linebreak-style": ["error", "unix"],
+        semi: ["error", "always"],
+        "object-curly-spacing": ["error", "always"],
+
+        "@typescript-eslint/no-unused-vars": ["error", {
+            argsIgnorePattern: "^_",
+        }],
+
+        "react/react-in-jsx-scope": "off",
+    },
+}];
diff --git a/package.json b/package.json
@@ -32,10 +32,10 @@
   "dependencies": {
     "@canonical/react-components": "1.7.3",
     "@monaco-editor/react": "4.6.0",
-    "@tanstack/react-query": "5.51.23",
-    "axios": "1.7.4",
-    "cytoscape": "3.30.2",
-    "cytoscape-popper": "2.0.0",
+    "@tanstack/react-query": "5.62.15",
+    "axios": "1.7.9",
+    "cytoscape": "3.30.4",
+    "cytoscape-popper": "4.0.1",
     "formik": "2.4.6",
     "js-yaml": "4.1.0",
     "lodash.isequal": "4.5.0",
@@ -44,22 +44,20 @@
     "react": "18.3.1",
     "react-cytoscapejs": "2.0.0",
     "react-dom": "18.3.1",
-    "react-router-dom": "6.26.0",
+    "react-router-dom": "7.1.1",
     "react-useportal": "1.0.19",
-    "serve": "14.2.3",
-    "vanilla-framework": "4.18.4",
+    "serve": "14.2.4",
+    "vanilla-framework": "4.18.5",
     "xterm": "5.3.0",
     "xterm-addon-fit": "0.8.0",
-    "yup": "1.4.0"
+    "yup": "1.6.1"
   },
   "devDependencies": {
-    "@babel/core": "7.25.2",
-    "@babel/eslint-parser": "7.25.1",
-    "@babel/preset-env": "7.25.3",
-    "@babel/preset-react": "7.24.7",
-    "@babel/preset-typescript": "7.24.7",
-    "@canonical/typescript-config-react": "0.1.1-experimental.0",
-    "@playwright/test": "1.46.0",
+    "@babel/eslint-parser": "7.25.9",
+    "@babel/preset-react": "7.26.3",
+    "@babel/preset-typescript": "7.26.0",
+    "@canonical/typescript-config-react": "0.4.0-experimental.0",
+    "@playwright/test": "1.49.1",
     "@types/convert-source-map": "2.0.3",
     "@types/cytoscape-popper": "2.0.4",
     "@types/dotenv": "8.2.0",
@@ -69,38 +67,38 @@
     "@types/react-dom": "18.3.0",
     "@types/react-router-dom": "5.3.3",
     "@types/websocket": "1.0.10",
-    "@typescript-eslint/eslint-plugin": "8.16.0",
-    "@typescript-eslint/parser": "8.16.0",
-    "@vitejs/plugin-react": "4.3.2",
-    "@vitest/coverage-istanbul": "1.6.0",
+    "@typescript-eslint/eslint-plugin": "8.19.0",
+    "@typescript-eslint/parser": "8.19.0",
+    "@vitejs/plugin-react": "4.3.4",
+    "@vitest/coverage-istanbul": "2.1.8",
     "autoprefixer": "10.4.20",
-    "babel-plugin-istanbul": "6.1.1",
-    "concurrently": "8.2.2",
+    "babel-plugin-istanbul": "7.0.0",
+    "concurrently": "9.1.2",
     "convert-source-map": "2.0.0",
-    "eslint": "8.57.0",
-    "dotenv": "16.4.5",
+    "eslint": "9.17.0",
+    "dotenv": "16.4.7",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-react": "7.35.0",
-    "husky": "8.0.3",
-    "lint-staged": "15.2.9",
-    "monaco-editor": "0.50.0",
-    "nyc": "15.1.0",
-    "postcss": "8.4.41",
+    "eslint-plugin-react": "7.37.3",
+    "husky": "9.1.7",
+    "lint-staged": "15.3.0",
+    "monaco-editor": "0.52.2",
+    "nyc": "17.1.0",
+    "postcss": "8.4.49",
     "postcss-cli": "11.0.0",
-    "prettier": "3.3.3",
-    "sass": "1.79.4",
-    "stylelint": "16.8.1",
-    "stylelint-config-standard-scss": "13.1.0",
+    "prettier": "3.4.2",
+    "sass": "1.83.1",
+    "stylelint": "16.12.0",
+    "stylelint-config-standard-scss": "14.0.0",
     "stylelint-order": "6.0.4",
     "stylelint-prettier": "5.0.2",
-    "stylelint-scss": "6.5.0",
-    "typescript": "5.6.3",
+    "stylelint-scss": "6.10.0",
+    "typescript": "5.7.2",
     "v8-to-istanbul": "9.3.0",
-    "vite": "5.4.8",
-    "vite-plugin-istanbul": "5.0.0",
-    "vite-tsconfig-paths": "5.1.3",
-    "vitest": "1.6.0"
+    "vite": "6.0.7",
+    "vite-plugin-istanbul": "6.0.2",
+    "vite-tsconfig-paths": "5.1.4",
+    "vitest": "2.1.8"
   },
   "lint-staged": {
     "src/**/*.{json,jsx,ts,tsx}": [

diff --git a/src/components/ConfigurationRow.tsx b/src/components/ConfigurationRow.tsx
@@ -41,7 +41,7 @@ interface Props {
   disabledReason?: string;
   help?: string;
   inputHelp?: string;
-  readOnlyRenderer?: (value: unknown) => string | ReactNode;
+  readOnlyRenderer?: (value: ReactNode) => string | ReactNode;
 }
 
 export const getConfigurationRow = ({
@@ -54,7 +54,7 @@ export const getConfigurationRow = ({
   disabledReason,
   help,
   inputHelp,
-  readOnlyRenderer = (value) => <>{value}</>,
+  readOnlyRenderer = (value: ReactNode) => <>{value}</>,
 }: Props): MainTableRow => {
   const values = formik.values as unknown as Record<string, string | undefined>;
   const value = values[name];

diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
@@ -26,7 +26,6 @@ export default class ErrorBoundary extends Component<Props, State> {
 
   render() {
     const { error, hasError } = this.state;
-    // eslint-disable-next-line react/prop-types
     const { children, fallback: ErrorComponent } = this.props;
 
     return hasError ? <ErrorComponent error={error} /> : <>{children}</>;

diff --git a/src/components/TabLinks.tsx b/src/components/TabLinks.tsx
@@ -32,7 +32,7 @@ const TabLinks: FC<Props> = ({ tabs, activeTab, tabUrl }) => {
           onClick: (e) => {
             e.preventDefault();
             notify.clear();
-            navigate(href);
+            void navigate(href);
           },
           href,
         };

diff --git a/src/pages/cluster/ClusterGroupForm.tsx b/src/pages/cluster/ClusterGroupForm.tsx
@@ -85,7 +85,7 @@ const ClusterGroupForm: FC<Props> = ({ group }) => {
       })
         .then(() => {
           const verb = group ? "saved" : "created";
-          navigate(`/ui/cluster/group/${values.name}`);
+          void navigate(`/ui/cluster/group/${values.name}`);
           toastNotify.success(
             <>
               Cluster group{" "}

diff --git a/src/pages/cluster/actions/DeleteClusterGroupBtn.tsx b/src/pages/cluster/actions/DeleteClusterGroupBtn.tsx
@@ -23,7 +23,7 @@ const DeleteClusterGroupBtn: FC<Props> = ({ group }) => {
     setLoading(true);
     deleteClusterGroup(group)
       .then(() => {
-        navigate(`/ui/cluster`);
+        void navigate(`/ui/cluster`);
         toastNotify.success(
           <>
             Cluster group{" "}

diff --git a/src/pages/images/actions/CreateInstanceFromImageBtn.tsx b/src/pages/images/actions/CreateInstanceFromImageBtn.tsx
@@ -12,7 +12,7 @@ const CreateInstanceFromImageBtn: FC<Props> = ({ image, project }) => {
   const navigate = useNavigate();
 
   const openLaunchFlow = () => {
-    navigate(`/ui/project/${project}/instances/create`, {
+    void navigate(`/ui/project/${project}/instances/create`, {
       state: {
         selectedImage: image,
         cancelLocation: window.location.pathname,

diff --git a/src/pages/instances/CreateInstance.tsx b/src/pages/instances/CreateInstance.tsx
@@ -207,7 +207,7 @@ const CreateInstance: FC = () => {
       {
         label: "Check configuration",
         onClick: () =>
-          navigate(formUrl, {
+          void navigate(formUrl, {
             state: { retryFormValues: values, retryFormSection },
           }),
       },
@@ -295,7 +295,7 @@ const CreateInstance: FC = () => {
     }
 
     const formUrl = location.pathname + location.search;
-    navigate(`/ui/project/${project}/instances`);
+    void navigate(`/ui/project/${project}/instances`);
 
     // NOTE: for lxd version that has the instance_create_start api extension
     // we can create and start the instance in one go by setting the 'start' property to true
@@ -524,7 +524,7 @@ const CreateInstance: FC = () => {
         <Button
           appearance="base"
           onClick={() =>
-            navigate(
+            void navigate(
               location.state?.cancelLocation ??
                 `/ui/project/${project}/instances`,
             )

diff --git a/src/pages/instances/EditInstance.tsx b/src/pages/instances/EditInstance.tsx
@@ -164,9 +164,9 @@ const EditInstance: FC<Props> = ({ instance }) => {
 
     const baseUrl = `/ui/project/${project}/instance/${instance.name}/configuration`;
     if (newSection === MAIN_CONFIGURATION) {
-      navigate(baseUrl);
+      void navigate(baseUrl);
     } else {
-      navigate(`${baseUrl}/${slugify(newSection)}`);
+      void navigate(`${baseUrl}/${slugify(newSection)}`);
     }
   };
 

diff --git a/src/pages/instances/InstanceDetailHeader.tsx b/src/pages/instances/InstanceDetailHeader.tsx
@@ -66,7 +66,7 @@ const InstanceDetailHeader: FC<Props> = ({
           eventQueue.set(
             operation.metadata.id,
             () => {
-              navigate(`/ui/project/${project}/instance/${values.name}`);
+              void navigate(`/ui/project/${project}/instance/${values.name}`);
               toastNotify.success(
                 <>
                   Instance{" "}

diff --git a/src/pages/instances/InstanceGraphicConsole.tsx b/src/pages/instances/InstanceGraphicConsole.tsx
@@ -10,7 +10,6 @@ import { LxdInstance } from "types/instance";
 import { useNotify } from "@canonical/react-components";
 
 declare global {
-  // eslint-disable-next-line no-unused-vars
   interface Window {
     spice_connection?: SpiceHtml5.SpiceMainConn;
   }

diff --git a/src/pages/instances/InstanceList.tsx b/src/pages/instances/InstanceList.tsx
@@ -568,7 +568,7 @@ const InstanceList: FC = () => {
                   appearance="positive"
                   className="u-float-right u-no-margin--bottom"
                   onClick={() =>
-                    navigate(`/ui/project/${project}/instances/create`)
+                    void navigate(`/ui/project/${project}/instances/create`)
                   }
                   hasIcon={!isSmallScreen}
                 >
@@ -692,7 +692,7 @@ const InstanceList: FC = () => {
                   className="empty-state-button"
                   appearance="positive"
                   onClick={() =>
-                    navigate(`/ui/project/${project}/instances/create`)
+                    void navigate(`/ui/project/${project}/instances/create`)
                   }
                 >
                   Create instance

diff --git a/src/pages/instances/actions/DeleteInstanceBtn.tsx b/src/pages/instances/actions/DeleteInstanceBtn.tsx
@@ -40,7 +40,7 @@ const DeleteInstanceBtn: FC<Props> = ({ instance, classname, onClose }) => {
             void queryClient.invalidateQueries({
               queryKey: [queryKeys.projects, instance.project],
             });
-            navigate(`/ui/project/${instance.project}/instances`);
+            void navigate(`/ui/project/${instance.project}/instances`);
             toastNotify.success(
               <>
                 Instance{" "}

diff --git a/src/pages/instances/actions/OpenConsoleBtn.tsx b/src/pages/instances/actions/OpenConsoleBtn.tsx
@@ -11,7 +11,7 @@ const OpenConsoleBtn: FC<Props> = ({ instance }) => {
   const navigate = useNavigate();
 
   const handleOpen = () => {
-    navigate(
+    void navigate(
       `/ui/project/${instance.project}/instance/${instance.name}/console`,
     );
   };

diff --git a/src/pages/instances/actions/OpenTerminalBtn.tsx b/src/pages/instances/actions/OpenTerminalBtn.tsx
@@ -11,7 +11,7 @@ const OpenTerminalBtn: FC<Props> = ({ instance }) => {
   const navigate = useNavigate();
 
   const handleOpen = () => {
-    navigate(
+    void navigate(
       `/ui/project/${instance.project}/instance/${instance.name}/terminal`,
     );
   };

diff --git a/src/pages/instances/forms/UploadExternalFormatFileForm.tsx b/src/pages/instances/forms/UploadExternalFormatFileForm.tsx
@@ -84,7 +84,7 @@ const UploadExternalFormatFileForm: FC<Props> = ({
           <ResourceLabel bold type="instance" value={instanceName} />.
         </>,
       );
-      navigate(`/ui/project/${project?.name}/instances`);
+      void navigate(`/ui/project/${project?.name}/instances`);
     }
   };
-Original file line number
+Diff line change
@@ Expand Up / @@ -84,7 +84,7 @@ const UploadExternalFormatFileForm: FC<Props> = ({ @@
               <ResourceLabel bold type="instance" value={instanceName} />.
             </>,
           );
-          navigate(`/ui/project/${project?.name}/instances`);
+          void navigate(`/ui/project/${project?.name}/instances`);
         }
       };
@@ Expand Down @@