chore(deps): downgrade react and eslint update svg imports in tests

canonical · Feb 14, 2025 · f6f938b · f6f938b
1 parent 795416d
commit f6f938b
Show file tree

Hide file tree

Showing 10 changed files with 225 additions and 290 deletions.
diff --git a/package.json b/package.json
@@ -68,8 +68,8 @@
     "loglevel": "1.9.2",
     "prism-react-renderer": "2.4.1",
     "prismjs": "1.29.0",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-ga": "3.3.1",
     "react-hot-toast": "2.5.1",
     "react-json-tree": "0.19.0",
@@ -94,8 +94,8 @@
     "@types/lodash.mergewith": "4.6.9",
     "@types/node": "18.19.76",
     "@types/prismjs": "1.26.5",
-    "@types/react": "19.0.8",
-    "@types/react-dom": "19.0.3",
+    "@types/react": "18.3.18",
+    "@types/react-dom": "18.3.5",
     "@types/react-table": "7.7.20",
     "@types/redux-mock-store": "1.5.0",
     "@typescript-eslint/eslint-plugin": "8.24.0",
@@ -104,8 +104,8 @@
     "@vitejs/plugin-react": "4.3.4",
     "@vitest/coverage-v8": "3.0.5",
     "axios-mock-adapter": "2.1.0",
-    "eslint": "9.20.1",
-    "eslint-config-prettier": "10.0.1",
+    "eslint": "8.57.1",
+    "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-prettier": "5.2.3",

diff --git a/src/components/Logo/Logo.test.tsx b/src/components/Logo/Logo.test.tsx
@@ -4,46 +4,35 @@ import type { HTMLProps } from "react";
 import { renderComponent } from "testing/utils";
 
 import Logo from "./Logo";
+import { TEXT } from "./text";
 
 describe("Logo", () => {
   it("displays the Juju logo in Juju", () => {
     renderComponent(<Logo isJuju />);
-    expect(
-      screen
-        .getAllByAltText("Juju")[1]
-        .getAttribute("src")
-        ?.endsWith("juju-text.svg"),
-    ).toBe(true);
+    expect(screen.getAllByAltText("Juju")[1].getAttribute("src")).toBe(
+      TEXT.light.juju,
+    );
   });
 
   it("displays the JAAS logo in JAAS", () => {
     renderComponent(<Logo />);
-    expect(
-      screen
-        .getAllByAltText("JAAS")[1]
-        .getAttribute("src")
-        ?.endsWith("jaas-text.svg"),
-    ).toBe(true);
+    expect(screen.getAllByAltText("JAAS")[1].getAttribute("src")).toBe(
+      TEXT.light.jaas,
+    );
   });
 
   it("displays the dark text in Juju", () => {
     renderComponent(<Logo dark isJuju />);
-    expect(
-      screen
-        .getAllByAltText("Juju")[1]
-        .getAttribute("src")
-        ?.endsWith("juju-text-dark.svg"),
-    ).toBe(true);
+    expect(screen.getAllByAltText("Juju")[1].getAttribute("src")).toBe(
+      TEXT.dark.juju,
+    );
   });
 
   it("displays the dark text in JAAS", () => {
     renderComponent(<Logo dark />);
-    expect(
-      screen
-        .getAllByAltText("JAAS")[1]
-        .getAttribute("src")
-        ?.endsWith("jaas-text-dark.svg"),
-    ).toBe(true);
+    expect(screen.getAllByAltText("JAAS")[1].getAttribute("src")).toBe(
+      TEXT.dark.jaas,
+    );
   });
 
   it("can display using a custom component", () => {

diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
@@ -2,13 +2,10 @@ import type { PropsWithSpread } from "@canonical/react-components";
 import classNames from "classnames";
 import type { ComponentType, ElementType } from "react";
 
-import jaasDarkText from "static/images/logo/jaas-text-dark.svg";
-import jaasLightText from "static/images/logo/jaas-text.svg";
-import jujuDarkText from "static/images/logo/juju-text-dark.svg";
-import jujuLightText from "static/images/logo/juju-text.svg";
 import logoMark from "static/images/logo/logo-mark.svg";
 
 import "./_logo.scss";
+import { TEXT } from "./text";
 
 type Props<C> = PropsWithSpread<
   {
@@ -20,17 +17,6 @@ type Props<C> = PropsWithSpread<
   C
 >;
 
-const TEXT = {
-  dark: {
-    juju: jujuDarkText,
-    jaas: jaasDarkText,
-  },
-  light: {
-    juju: jujuLightText,
-    jaas: jaasLightText,
-  },
-};
-
 const Logo = <C,>({
   className,
   component: Component = "div",

diff --git a/src/components/Logo/text.ts b/src/components/Logo/text.ts
@@ -0,0 +1,9 @@
+import jaasDarkText from "static/images/logo/jaas-text-dark.svg";
+import jaasLightText from "static/images/logo/jaas-text.svg";
+import jujuDarkText from "static/images/logo/juju-text-dark.svg";
+import jujuLightText from "static/images/logo/juju-text.svg";
+
+export const TEXT = {
+  dark: { juju: jujuDarkText, jaas: jaasDarkText },
+  light: { juju: jujuLightText, jaas: jaasLightText },
+};
diff --git a/src/components/ModelTableList/StatusGroup/StatusGroup.test.tsx b/src/components/ModelTableList/StatusGroup/StatusGroup.test.tsx
@@ -1,5 +1,6 @@
 import { screen, within } from "@testing-library/react";
 
+import gceLogo from "static/images/logo/cloud/gce.svg";
 import type { RootState } from "store/store";
 import { rootStateFactory } from "testing/factories";
 import { configFactory, generalStateFactory } from "testing/factories/general";
@@ -29,38 +30,28 @@ describe("StatusGroup", () => {
           abc123: modelDataFactory.build({
             applications: {
               easyrsa: modelDataApplicationFactory.build({
-                status: detailedStatusFactory.build({
-                  status: "blocked",
-                }),
+                status: detailedStatusFactory.build({ status: "blocked" }),
               }),
             },
             info: modelDataInfoFactory.build({
               "controller-uuid": "controller123",
               uuid: "abc123",
             }),
-            model: modelStatusInfoFactory.build({
-              "cloud-tag": "cloud-aws",
-            }),
+            model: modelStatusInfoFactory.build({ "cloud-tag": "cloud-aws" }),
             uuid: "abc123",
           }),
           def456: modelDataFactory.build({
             applications: {
               cockroachdb: modelDataApplicationFactory.build({
-                status: detailedStatusFactory.build({
-                  status: "blocked",
-                }),
+                status: detailedStatusFactory.build({ status: "blocked" }),
               }),
             },
-            model: modelStatusInfoFactory.build({
-              "cloud-tag": "cloud-aws",
-            }),
+            model: modelStatusInfoFactory.build({ "cloud-tag": "cloud-aws" }),
           }),
           ghi789: modelDataFactory.build({
             applications: {
               elasticsearch: modelDataApplicationFactory.build({
-                status: detailedStatusFactory.build({
-                  status: "unknown",
-                }),
+                status: detailedStatusFactory.build({ status: "unknown" }),
               }),
             },
             model: modelStatusInfoFactory.build({
@@ -70,9 +61,7 @@ describe("StatusGroup", () => {
           jkl101112: modelDataFactory.build({
             applications: {
               kibana: modelDataApplicationFactory.build({
-                status: detailedStatusFactory.build({
-                  status: "running",
-                }),
+                status: detailedStatusFactory.build({ status: "running" }),
               }),
             },
             model: modelStatusInfoFactory.build({
@@ -106,21 +95,16 @@ describe("StatusGroup", () => {
   });
 
   it("fetches filtered data if filters supplied", () => {
-    const filters = {
-      cloud: ["aws"],
-    };
+    const filters = { cloud: ["aws"] };
     renderComponent(<StatusGroup filters={filters} />, { state });
     expect(screen.getAllByRole("row").length).toBe(3);
   });
 
   it("displays the provider type icon", () => {
     renderComponent(<StatusGroup filters={{}} />, { state });
-    expect(
-      screen
-        .getAllByTestId("provider-logo")[0]
-        .getAttribute("src")
-        ?.endsWith("/gce.svg"),
-    ).toBe(true);
+    expect(screen.getAllByTestId("provider-logo")[0].getAttribute("src")).toBe(
+      gceLogo,
+    );
   });
 
   it("model access button is present in status group", () => {
@@ -149,15 +133,11 @@ describe("StatusGroup", () => {
         }),
       ],
     });
-    const filters = {
-      cloud: ["aws"],
-    };
+    const filters = { cloud: ["aws"] };
     renderComponent(<StatusGroup filters={filters} />, { state });
     const firstContentRow = screen.getAllByRole("row")[1];
     expect(
-      within(firstContentRow).getByRole("button", {
-        name: "Access",
-      }),
+      within(firstContentRow).getByRole("button", { name: "Access" }),
     ).toBeInTheDocument();
     expect(within(firstContentRow).getAllByRole("gridcell")[6]).toHaveClass(
       "lrg-screen-access-cell",

diff --git a/src/juju/jimm/listeners.test.ts b/src/juju/jimm/listeners.test.ts
@@ -33,20 +33,12 @@ vi.mock("consts", () => {
 
 vi.mock("store/general", async () => {
   const actual = await vi.importActual("store/general");
-  return {
-    ...actual,
-    actions: {
-      storeLoginError: vi.fn(),
-    },
-  };
+  return { ...actual, actions: { storeLoginError: vi.fn() } };
 });
 
 vi.mock("store/app/thunks", async () => {
   const actual = await vi.importActual("store/app/thunks");
-  return {
-    ...actual,
-    logOut: vi.fn(),
-  };
+  return { ...actual, logOut: vi.fn() };
 });
 
 describe("listeners", () => {
@@ -58,17 +50,11 @@ describe("listeners", () => {
   let store: EnhancedStore<
     RootState,
     UnknownAction,
-    Tuple<
-      [
-        StoreEnhancer<{
-          dispatch: AppDispatch;
-        }>,
-        StoreEnhancer,
-      ]
-    >
+    Tuple<[StoreEnhancer<{ dispatch: AppDispatch }>, StoreEnhancer]>
   >;
 
   beforeEach(() => {
+    vi.clearAllMocks();
     fetchMock.resetMocks();
     window.jujuDashboardConfig = {
       controllerAPIEndpoint: "wss://controller.example.com",

diff --git a/src/panels/ConfigPanel/__snapshots__/ConfigPanel.test.tsx.snap b/src/panels/ConfigPanel/__snapshots__/ConfigPanel.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`ConfigPanel > displays a message if the app has no config 1`] = `
 >
   <img
     alt=""
-    src="/src/static/images/no-config-params.svg"
+    src="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='154'%20height='160'%3e%3cg%20fill='none'%20fill-rule='evenodd'%3e%3cpath%20fill='%23666'%20fill-rule='nonzero'%20d='M68.513%203.582l21.105%2012.15-1.572.911-19.913-11.46-31.936%2018.375%2031.943%2018.37%2013.864-7.974L82%2035.758l-12.275%207.084%2032.303%2018.625c.243.141.393.4.395.682v37.204l31.127-17.906-6.74-3.894%201.545-.93%207.187%204.14c.244.14.394.4.396.68v38.59c-.002.282-.152.541-.396.682l-33.514%2019.295-33.436%2019.295c-.14.094-.308.134-.475.11-.134.003-.267-.035-.38-.11L34.224%20140.01l-33.5-19.295c-.248-.136-.4-.398-.396-.681v-77.18c.001-.278.153-.533.396-.666l33.499-19.31L67.738%203.581c.239-.142.536-.142.775%200zm32.327%2098.584l-31.933%2018.367v36.716l31.934-18.427v-36.656zm-65.432-.063l.001%2036.719%2031.917%2018.426v-36.77l-31.918-18.375zM134.34%2082.82l-31.917%2018.36v36.785l31.918-18.328V82.82zM1.91%2082.808l.001%2036.766%2031.917%2018.329v-36.711L1.91%2082.808zm98.931-19.315L68.877%2081.84v36.838l31.964-18.399V63.493zm-65.463-.044v36.83l31.95%2018.38V81.904L35.378%2063.45zM1.91%2044.219l.001%2036.765%2031.885%2018.31v-36.71L1.91%2044.22zm66.208-.447L36.172%2062.151l31.914%2018.326%2031.943-18.336-31.912-18.369zm-33.42-19.231L2.711%2042.854l31.9%2018.372%2031.98-18.38-31.894-18.305z'/%3e%3cg%20stroke='%23DD4814'%20stroke-dasharray='0%203'%20stroke-linecap='round'%3e%3cpath%20d='M83.248%2048.885l-.243-27.299c-.003-.362.19-.697.504-.877l33.995-19.425c.307-.176.685-.176.992%200l34%2019.428c.312.178.504.51.504.868v38.84c0%20.359-.192.69-.504.868l-34.004%2019.43c-.305.175-.68.176-.986.004L102%2072h0'/%3e%3cpath%20d='M85%2023l32.508%2017.732c.306.166.676.162.978-.012L151%2022h0m-33%2020v37'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e"
   />
   <h4>
     This application doesn't have any configuration parameters

diff --git a/src/store/juju/utils/models.test.ts b/src/store/juju/utils/models.test.ts
@@ -1,3 +1,4 @@
+import defaultCharmIcon from "static/images/icons/default-charm-icon.svg";
 import {
   detailedStatusFactory,
   modelStatusInfoFactory,
@@ -101,7 +102,7 @@ describe("generateIconPath", () => {
   it("should return default charm icon if the charm is local", () => {
     const charmId = "local:my-charm";
     const iconPath = generateIconPath(charmId);
-    expect(iconPath.endsWith("default-charm-icon.svg")).toBe(true);
+    expect(iconPath).toBe(defaultCharmIcon);
   });
 
   it("should return a icon URI for a charmhub charm path", () => {
@@ -116,14 +117,10 @@ describe("getModelStatusGroupData", () => {
     const modelData = modelDataFactory.build({
       applications: {
         easyrsa: modelDataApplicationFactory.build({
-          status: detailedStatusFactory.build({
-            status: "running",
-          }),
+          status: detailedStatusFactory.build({ status: "running" }),
         }),
       },
-      model: modelStatusInfoFactory.build({
-        "cloud-tag": "cloud-aws",
-      }),
+      model: modelStatusInfoFactory.build({ "cloud-tag": "cloud-aws" }),
     });
     const status = getModelStatusGroupData(modelData);
     expect(status.highestStatus).toBe("running");
@@ -133,14 +130,10 @@ describe("getModelStatusGroupData", () => {
     const modelData = modelDataFactory.build({
       applications: {
         easyrsa: modelDataApplicationFactory.build({
-          status: detailedStatusFactory.build({
-            status: "running",
-          }),
+          status: detailedStatusFactory.build({ status: "running" }),
         }),
         etcd: modelDataApplicationFactory.build({
-          status: detailedStatusFactory.build({
-            status: "unknown",
-          }),
+          status: detailedStatusFactory.build({ status: "unknown" }),
         }),
       },
     });
@@ -152,19 +145,13 @@ describe("getModelStatusGroupData", () => {
     const modelData = modelDataFactory.build({
       applications: {
         easyrsa: modelDataApplicationFactory.build({
-          status: detailedStatusFactory.build({
-            status: "running",
-          }),
+          status: detailedStatusFactory.build({ status: "running" }),
         }),
         etcd: modelDataApplicationFactory.build({
-          status: detailedStatusFactory.build({
-            status: "unknown",
-          }),
+          status: detailedStatusFactory.build({ status: "unknown" }),
         }),
         calico: modelDataApplicationFactory.build({
-          status: detailedStatusFactory.build({
-            status: "blocked",
-          }),
+          status: detailedStatusFactory.build({ status: "blocked" }),
         }),
       },
     });

diff --git a/vite.config.ts b/vite.config.ts
@@ -60,6 +60,7 @@ export default defineConfig(({ mode }) => {
       },
     ],
     server: {
+      allowedHosts: true,
       host: "0.0.0.0",
       port: Number(env.PORT),
     },
-Original file line number
+Diff line change
@@ Expand Up @@
     >
       <img
         alt=""
-        src="/src/static/images/no-config-params.svg"
+        src="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='154'%20height='160'%3e%3cg%20fill='none'%20fill-rule='evenodd'%3e%3cpath%20fill='%23666'%20fill-rule='nonzero'%20d='M68.513%203.582l21.105%2012.15-1.572.911-19.913-11.46-31.936%2018.375%2031.943%2018.37%2013.864-7.974L82%2035.758l-12.275%207.084%2032.303%2018.625c.243.141.393.4.395.682v37.204l31.127-17.906-6.74-3.894%201.545-.93%207.187%204.14c.244.14.394.4.396.68v38.59c-.002.282-.152.541-.396.682l-33.514%2019.295-33.436%2019.295c-.14.094-.308.134-.475.11-.134.003-.267-.035-.38-.11L34.224%20140.01l-33.5-19.295c-.248-.136-.4-.398-.396-.681v-77.18c.001-.278.153-.533.396-.666l33.499-19.31L67.738%203.581c.239-.142.536-.142.775%200zm32.327%2098.584l-31.933%2018.367v36.716l31.934-18.427v-36.656zm-65.432-.063l.001%2036.719%2031.917%2018.426v-36.77l-31.918-18.375zM134.34%2082.82l-31.917%2018.36v36.785l31.918-18.328V82.82zM1.91%2082.808l.001%2036.766%2031.917%2018.329v-36.711L1.91%2082.808zm98.931-19.315L68.877%2081.84v36.838l31.964-18.399V63.493zm-65.463-.044v36.83l31.95%2018.38V81.904L35.378%2063.45zM1.91%2044.219l.001%2036.765%2031.885%2018.31v-36.71L1.91%2044.22zm66.208-.447L36.172%2062.151l31.914%2018.326%2031.943-18.336-31.912-18.369zm-33.42-19.231L2.711%2042.854l31.9%2018.372%2031.98-18.38-31.894-18.305z'/%3e%3cg%20stroke='%23DD4814'%20stroke-dasharray='0%203'%20stroke-linecap='round'%3e%3cpath%20d='M83.248%2048.885l-.243-27.299c-.003-.362.19-.697.504-.877l33.995-19.425c.307-.176.685-.176.992%200l34%2019.428c.312.178.504.51.504.868v38.84c0%20.359-.192.69-.504.868l-34.004%2019.43c-.305.175-.68.176-.986.004L102%2072h0'/%3e%3cpath%20d='M85%2023l32.508%2017.732c.306.166.676.162.978-.012L151%2022h0m-33%2020v37'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e"
       />
       <h4>
         This application doesn't have any configuration parameters
@@ Expand Down @@