chore(deps): update all dependencies

.github/workflows/actions.yml

@@ -90,7 +90,7 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: "yarn"
       - name: Validate Renovate Configuration with renovate-config-validator
-        uses: suzuki-shunsuke/[email protected].0
+        uses: suzuki-shunsuke/[email protected].1
   types:
     name: Check types
     runs-on: ubuntu-latest

package.json

@@ -53,76 +53,76 @@
     "@canonical/macaroon-bakery": "1.3.2",
     "@canonical/react-components": "0.47.1",
     "@reduxjs/toolkit": "2.0.1",
-    "@sentry/browser": "7.55.0",
+    "@sentry/browser": "7.93.0",
     "async-limiter": "2.0.0",
-    "classnames": "2.3.2",
+    "classnames": "2.5.1",
     "clone-deep": "4.0.1",
     "d3": "7.8.5",
     "date-fns": "3.2.0",
-    "dompurify": "3.0.5",
-    "formik": "2.4.1",
-    "framer-motion": "10.16.4",
+    "dompurify": "3.0.8",
+    "formik": "2.4.5",
+    "framer-motion": "10.18.0",
     "fuse.js": "7.0.0",
     "lodash.isequal": "4.5.0",
     "lodash.mergewith": "4.6.2",
-    "prism-react-renderer": "2.0.6",
+    "prism-react-renderer": "2.3.1",
     "prismjs": "1.29.0",
     "process": "0.11.10",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-ga": "3.3.1",
     "react-hot-toast": "2.4.1",
     "react-json-tree": "0.18.0",
-    "react-redux": "9.0.4",
-    "react-router-dom": "6.12.1",
+    "react-redux": "9.1.0",
+    "react-router-dom": "6.21.2",
     "react-scripts": "5.0.1",
-    "react-useportal": "1.0.18",
+    "react-useportal": "1.0.19",
     "redux": "5.0.1",
     "vanilla-framework": "4.5.1"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",
     "@testing-library/jest-dom": "6.2.0",
-    "@testing-library/react": "14.0.0",
-    "@testing-library/user-event": "14.4.3",
+    "@testing-library/react": "14.1.2",
+    "@testing-library/user-event": "14.5.2",
     "@types/classnames": "2.3.1",
-    "@types/clone-deep": "4.0.1",
-    "@types/d3": "7.4.0",
-    "@types/dompurify": "3.0.2",
-    "@types/jest": "29.5.2",
-    "@types/lodash.isequal": "4.5.6",
-    "@types/lodash.mergewith": "4.6.7",
-    "@types/node": "18.16.18",
-    "@types/prismjs": "1.26.0",
-    "@types/react": "18.2.0",
-    "@types/react-dom": "18.2.0",
-    "@types/react-table": "7.7.14",
-    "@types/redux-mock-store": "1.0.3",
+    "@types/clone-deep": "4.0.4",
+    "@types/d3": "7.4.3",
+    "@types/dompurify": "3.0.5",
+    "@types/jest": "29.5.11",
+    "@types/lodash.isequal": "4.5.8",
+    "@types/lodash.mergewith": "4.6.9",
+    "@types/node": "18.19.6",
+    "@types/prismjs": "1.26.3",
+    "@types/react": "18.2.47",
+    "@types/react-dom": "18.2.18",
+    "@types/react-table": "7.7.19",
+    "@types/redux-mock-store": "1.0.6",
     "@typescript-eslint/eslint-plugin": "6.18.1",
     "@typescript-eslint/parser": "6.18.1",
-    "eslint": "8.42.0",
+    "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-jest": "27.2.1",
-    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-jest": "27.6.3",
+    "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react": "7.33.2",
     "fishery": "2.2.2",
-    "jest-websocket-mock": "2.4.0",
+    "jest-websocket-mock": "2.5.0",
     "npm-package-json-lint": "7.1.0",
-    "postcss": "8.4.31",
-    "prettier": "3.1.1",
+    "postcss": "8.4.33",
+    "prettier": "3.2.2",
     "react-anchorme": "4.0.1",
     "redux-devtools": "3.7.0",
     "redux-devtools-extension": "2.13.9",
     "redux-mock-store": "1.5.4",
-    "sass": "1.63.3",
+    "sass": "1.69.7",
     "stylelint": "16.1.0",
     "stylelint-config-standard-scss": "13.0.0",
-    "stylelint-order": "6.0.3",
-    "ts-jest": "29.1.0",
-    "typescript": "5.1.3"
+    "stylelint-order": "6.0.4",
+    "ts-jest": "29.1.1",
+    "typescript": "5.3.3"
   },
   "npmpackagejsonlint": {
     "rules": {

src/components/RadioInputBox/OptionInputs.test.tsx

@@ -90,8 +90,8 @@ describe("OptionInputs", () => {
     expect(onValuesChange).toHaveBeenCalledTimes(1);
     await userEvent.type(screen.getByRole("textbox", { name: "fruit" }), "foo");
     // On change gets called for each letter that is typed into the textbox.
-    expect(onValuesChange).toHaveBeenCalledTimes(5);
-    expect(onValuesChange.mock.calls[4]).toEqual([
+    expect(onValuesChange).toHaveBeenCalledTimes(4);
+    expect(onValuesChange.mock.calls[3]).toEqual([
       "MyAction",
       { "MyAction-fruit": "foo", "MyAction-veg": "" },
     ]);

src/index.tsx

@@ -2,8 +2,8 @@ import process from "process";
 
 import { Notification, Strip } from "@canonical/react-components";
 import * as Sentry from "@sentry/browser";
-import type { ReactNode } from "react";
 import { StrictMode } from "react";
+import type { Root } from "react-dom/client";
 import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 
@@ -64,11 +64,11 @@ export const getControllerAPIEndpointErrors = (
   return null;
 };
 
-const renderRoot = (content: ReactNode) => {
+const getRoot = (): Root | undefined => {
   const rootElement = document.getElementById(ROOT_ID);
   if (rootElement) {
     const root = createRoot(rootElement);
-    root.render(content);
+    return root;
   }
 };
 
@@ -109,7 +109,7 @@ function bootstrap() {
   );
   error = error ?? controllerEndpointError;
   if (error || !config) {
-    renderRoot(
+    getRoot()?.render(
       <Strip>
         <Notification severity="negative" title="Error">
           The dashboard is not configured correctly. {error}
@@ -149,7 +149,7 @@ function bootstrap() {
       .catch((error) => console.error(Label.POLLING_ERROR, error));
   }
 
-  renderRoot(
+  getRoot()?.render(
     <Provider store={reduxStore}>
       <StrictMode>
         <App />

src/juju/api.ts

@@ -347,8 +347,10 @@ export async function fetchAllModelStatuses(
   modelUUIDList.forEach((modelUUID) => {
     queue.push(async (done) => {
       if (isLoggedIn(getState(), wsControllerURL)) {
-        const modelWsControllerURL = getModelByUUID(getState(), modelUUID)
-          ?.wsControllerURL;
+        const modelWsControllerURL = getModelByUUID(
+          getState(),
+          modelUUID,
+        )?.wsControllerURL;
         if (modelWsControllerURL) {
           await fetchAndStoreModelStatus(
             modelUUID,

src/juju/watchers.ts

@@ -64,7 +64,8 @@ function _processDelta<M extends WatcherModelData, E extends keyof M>(
     };
     mergeWith(modelData[entityType], formatted);
   } else if (actionType === DeltaChangeTypes.REMOVE && entityType !== "model") {
-    if (entityId in modelData[entityType]) {
+    const data = modelData[entityType];
+    if (data && typeof data === "object" && entityId in data) {
       delete modelData[entityType][entityId as keyof M[E]];
     }
   }

src/pages/EntityDetails/Model/Logs/ActionLogs/ActionLogs.tsx

@@ -200,8 +200,8 @@ export default function ActionLogs() {
     () => (modelName ? getModelUUID(modelName) : null),
     [modelName],
   );
-  const modelUUID = useSelector(
-    (state: RootState) => getModelUUIDMemo?.(state),
+  const modelUUID = useSelector((state: RootState) =>
+    getModelUUIDMemo?.(state),
   );
   const modelStatusData = useSelector(getModelStatus(modelUUID));
 
@@ -220,9 +220,8 @@ export default function ActionLogs() {
         if (operationList?.results) {
           setOperations(operationList.results);
           const actionsTags = operationList.results
-            .flatMap(
-              (operation: OperationResult) =>
-                operation.actions?.map((action) => action.action.tag),
+            .flatMap((operation: OperationResult) =>
+              operation.actions?.map((action) => action.action.tag),
             )
             .filter((actionTag?: string): actionTag is string => !!actionTag)
             .map((actionTag: string) => ({ tag: actionTag }));

src/panels/ActionsPanel/ActionsPanel.tsx

@@ -90,8 +90,8 @@ export default function ActionsPanel(): JSX.Element {
     () => (modelName ? getModelUUID(modelName) : null),
     [modelName],
   );
-  const modelUUID = useSelector(
-    (state: RootState) => getModelUUIDMemo?.(state),
+  const modelUUID = useSelector((state: RootState) =>
+    getModelUUIDMemo?.(state),
   );
   const [disableSubmit, setDisableSubmit] = useState<boolean>(true);
   const [actionData, setActionData] = useState<ActionData>({});