feat: Add remodels table

steverydz · steverydz · commit 66fe5fb548d6 · 2026-02-11T17:04:11.000Z
diff --git a/static/js/publisher/hooks/__tests__/useRemodels.test.tsx b/static/js/publisher/hooks/__tests__/useRemodels.test.tsx
@@ -0,0 +1,110 @@
+import { QueryClient, QueryClientProvider } from "react-query";
+import { renderHook, waitFor } from "@testing-library/react";
+import { http, HttpResponse } from "msw";
+import { setupServer } from "msw/node";
+
+import useRemodels from "../useRemodels";
+
+import type { ReactNode } from "react";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+const createWrapper = () => {
+  return ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+const remodelsResponse = {
+  allowlist: [
+    {
+      "created-at": "2023-09-05T11:55:53.732366",
+      "created-by": "John Doe",
+      description: "Test description",
+      "from-model": "test-from-model",
+      "from-serial": "test-from-serial",
+      "modified-at": null,
+      "modified-by": null,
+      "to-model": "test-to-model",
+    },
+  ],
+};
+
+const handlers = [
+  http.get("/api/store/test-brand-id/models/remodel-allowlist", () => {
+    return HttpResponse.json({
+      data: remodelsResponse,
+      message: "",
+      success: true,
+    });
+  }),
+  http.get("/api/store/test-brand-id-fail/models/remodel-allowlist", () => {
+    return HttpResponse.json({
+      data: [],
+      message: "There was a problem fetching remodels",
+      success: false,
+    });
+  }),
+  http.get("/api/store/test-brand-id-error/models/remodel-allowlist", () => {
+    return HttpResponse.error();
+  }),
+];
+
+const server = setupServer(...handlers);
+
+beforeAll(() => {
+  server.listen();
+});
+
+afterEach(() => {
+  server.resetHandlers();
+  queryClient.clear();
+});
+
+afterAll(() => {
+  server.close();
+});
+
+describe("useRemodels", () => {
+  test("returns remodels data", async () => {
+    const { result } = renderHook(() => useRemodels("test-brand-id"), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+    });
+
+    expect(result.current.data).toEqual(remodelsResponse.allowlist);
+  });
+
+  test("returns error if request fails", async () => {
+    const { result } = renderHook(() => useRemodels("test-brand-id-fail"), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => {
+      expect(result.current.isError).toBe(true);
+    });
+
+    expect(result.current.data).toBeUndefined();
+  });
+
+  test("returns error if network error", async () => {
+    const { result } = renderHook(() => useRemodels("test-brand-id-error"), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => {
+      expect(result.current.isError).toBe(true);
+    });
+
+    expect(result.current.data).toBeUndefined();
+  });
+});
diff --git a/static/js/publisher/hooks/index.ts b/static/js/publisher/hooks/index.ts
@@ -15,6 +15,7 @@ import useFetchAccountSnaps from "./useFetchAccountSnaps";
 import useFetchPublishedSnapMetrics from "./useFetchPublishedSnapMetrics";
 import useSortTableData from "./useSortTableData";
 import useAccountKeys from "./useAccountKeys";
+import useRemodels from "./useRemodels";
 
 export {
   useValidationSets,
@@ -34,4 +35,5 @@ export {
   useFetchPublishedSnapMetrics,
   useSortTableData,
   useAccountKeys,
+  useRemodels,
 };
diff --git a/static/js/publisher/hooks/useRemodels.ts b/static/js/publisher/hooks/useRemodels.ts
@@ -0,0 +1,30 @@
+import { useQuery, UseQueryResult } from "react-query";
+import type { Remodel as RemodelType } from "../types/shared";
+
+const useRemodels = (
+  brandId: string | undefined,
+): UseQueryResult<RemodelType[], Error> => {
+  return useQuery<RemodelType[], Error>({
+    queryKey: ["remodels", brandId],
+    queryFn: async () => {
+      const response = await fetch(
+        `/api/store/${brandId}/models/remodel-allowlist`,
+      );
+
+      if (!response.ok) {
+        throw new Error("There was a problem fetching remodels");
+      }
+
+      const remodelsData = await response.json();
+
+      if (!remodelsData.success) {
+        throw new Error(remodelsData.message);
+      }
+
+      return remodelsData.data.allowlist;
+    },
+    enabled: !!brandId,
+  });
+};
+
+export default useRemodels;
diff --git a/static/js/publisher/index.tsx b/static/js/publisher/index.tsx
@@ -40,6 +40,7 @@ const Snaps = importComponent(() => import("./pages/Snaps"));
 const ValidationSet = importComponent(() => import("./pages/ValidationSet"));
 const ValidationSets = importComponent(() => import("./pages/ValidationSets"));
 const AccountKeys = importComponent(() => import("./pages/AccountKeys"));
+const Remodel = importComponent(() => import("./pages/Remodel"));
 
 Sentry.init({
   dsn: window.SENTRY_DSN,
@@ -124,6 +125,7 @@ root.render(
                     <Route index element={<Model />} />
                     <Route path="policies" element={<Policies />} />
                     <Route path="policies/create" element={<Policies />} />
+                    <Route path="remodel" element={<Remodel />} />
                   </Route>
                 </Route>
               </Route>
diff --git a/static/js/publisher/layouts/ModelDetailsPageLayout/ModelNav.tsx b/static/js/publisher/layouts/ModelDetailsPageLayout/ModelNav.tsx
@@ -26,6 +26,16 @@ function ModelNav({ sectionName }: { sectionName: string }): React.JSX.Element {
             Policies
           </Link>
         </li>
+        <li className="p-tabs__item">
+          <Link
+            to={`/admin/${id}/models/${model_id}/remodel`}
+            className="p-tabs__link"
+            aria-selected={sectionName === "remodel"}
+            role="tab"
+          >
+            Remodel
+          </Link>
+        </li>
       </ul>
     </nav>
   );
diff --git a/static/js/publisher/layouts/ModelDetailsPageLayout/ModelPageLayout.tsx b/static/js/publisher/layouts/ModelDetailsPageLayout/ModelPageLayout.tsx
@@ -5,11 +5,24 @@ import ModelNav from "./ModelNav";
 function ModelDetailsPageLayout() {
   const { pathname } = useLocation();
   const isPolicies = pathname.endsWith("policies");
+  const isRemodel = pathname.endsWith("remodel");
+
+  const getSectionName = () => {
+    if (isPolicies) {
+      return "policies";
+    }
+
+    if (isRemodel) {
+      return "remodel";
+    }
+
+    return "overview";
+  };
 
   return (
     <>
       <ModelBreadcrumb />
-      <ModelNav sectionName={isPolicies ? "policies" : "overview"} />
+      <ModelNav sectionName={getSectionName()} />
       <Outlet />
     </>
   );
diff --git a/static/js/publisher/pages/Models/Models.tsx b/static/js/publisher/pages/Models/Models.tsx
@@ -60,9 +60,10 @@ function Models(): React.JSX.Element {
     const signal = controller.signal;
 
     if (!modelsIsLoading && !modelsError && models) {
+      const modelIds = [...new Set(models.map((m) => m.name))];
       setModelsList(models);
       setFilter(searchParams.get("filter") || "");
-      getPolicies({ models, id, setPolicies, signal });
+      getPolicies({ modelIds, id, setPolicies, signal });
     }
 
     return () => {
diff --git a/static/js/publisher/pages/Remodel/Remodel.tsx b/static/js/publisher/pages/Remodel/Remodel.tsx
@@ -0,0 +1,86 @@
+import { useEffect } from "react";
+import { useAtomValue, useSetAtom } from "jotai";
+import { useParams, useSearchParams } from "react-router-dom";
+import { Notification, Icon, Row, Col } from "@canonical/react-components";
+
+import { useRemodels } from "../../hooks";
+import {
+  remodelsListFilterState,
+  remodelsListState,
+} from "../../state/remodelsState";
+import { policiesListState } from "../../state/policiesState";
+import { brandIdState, brandStoreState } from "../../state/brandStoreState";
+import { setPageTitle, getPolicies } from "../../utils";
+
+import Filter from "../../components/Filter";
+import RemodelTable from "./RemodelTable";
+
+import type { UseQueryResult } from "react-query";
+import type { Remodel } from "../../types/shared";
+
+function Remodel(): React.JSX.Element {
+  const { id } = useParams();
+  const brandId = useAtomValue(brandIdState);
+  const { isLoading, isError, error, data }: UseQueryResult<Remodel[], Error> =
+    useRemodels(brandId);
+  const setRemodels = useSetAtom(remodelsListState);
+  const setPolicies = useSetAtom(policiesListState);
+  const setFilter = useSetAtom(remodelsListFilterState);
+  const brandStore = useAtomValue(brandStoreState(id));
+  const [searchParams] = useSearchParams();
+
+  brandStore
+    ? setPageTitle(`Remodels in ${brandStore.name}`)
+    : setPageTitle("Remodels");
+
+  useEffect(() => {
+    const controller = new AbortController();
+    const signal = controller.signal;
+
+    if (!isLoading && !isError && data) {
+      const modelIds = [...new Set(data.map((r) => r["to-model"]))];
+      setRemodels(data);
+      setFilter(searchParams.get("filter") || "");
+      getPolicies({ modelIds, id, setPolicies, signal });
+    }
+
+    return () => {
+      controller.abort();
+    };
+  }, [isLoading, error, data, brandId, id]);
+
+  return (
+    <>
+      <div className="u-fixed-width u-flex-column u-flex-grow">
+        {isError && error && (
+          <Notification severity="negative">
+            Error: {error.message}
+          </Notification>
+        )}
+        {isLoading ? (
+          <p>
+            <Icon name="spinner" className="u-animation--spin" />
+            &nbsp;Fetching remodels...
+          </p>
+        ) : (
+          <>
+            <Row>
+              <Col size={6}>
+                <Filter
+                  state={remodelsListFilterState}
+                  label="Search remodels"
+                  placeholder="Search remodels"
+                />
+              </Col>
+            </Row>
+            <div className="u-flex-column u-flex-grow">
+              <RemodelTable />
+            </div>
+          </>
+        )}
+      </div>
+    </>
+  );
+}
+
+export default Remodel;
diff --git a/static/js/publisher/pages/Remodel/RemodelTable.tsx b/static/js/publisher/pages/Remodel/RemodelTable.tsx
@@ -0,0 +1,55 @@
+import { useAtomValue } from "jotai";
+import { MainTable } from "@canonical/react-components";
+import { format } from "date-fns";
+
+import { filteredRemodelsListState } from "../../state/remodelsState";
+
+import type { Remodel } from "../../types/shared";
+
+function RemodelTable(): React.JSX.Element {
+  const remodels = useAtomValue(filteredRemodelsListState);
+
+  const headers = [
+    { content: "Target model", sortKey: "to-model" },
+    { content: "Original model", sortKey: "from-model" },
+    { content: "Allowed devices", className: "u-align--right" },
+    {
+      content: "Created date",
+      className: "u-align--right",
+      sortKey: "created-at",
+    },
+    { content: "Note" },
+  ];
+
+  const rows = remodels.map((remodel: Remodel) => {
+    return {
+      columns: [
+        { content: remodel["to-model"] },
+        { content: remodel["from-model"] },
+        { content: remodel["serials"], className: "u-align--right" },
+        {
+          content: format(new Date(remodel["created-at"]), "dd/MM/yyyy"),
+          className: "u-align--right",
+        },
+        { content: remodel["description"] },
+      ],
+      sortData: {
+        "to-model": remodel["to-model"],
+        "from-model": remodel["from-model"],
+        "created-at": remodel["created-at"],
+      },
+    };
+  });
+
+  return (
+    <MainTable
+      data-testid="remodels-table"
+      sortable
+      emptyStateMsg="No remodels match this filter"
+      headers={headers}
+      rows={rows}
+    />
+  );
+}
+
+export default RemodelTable;
diff --git a/static/js/publisher/pages/Remodel/index.ts b/static/js/publisher/pages/Remodel/index.ts
@@ -0,0 +1 @@
+export { default } from "./Remodel";
diff --git a/static/js/publisher/pages/SigningKeys/SigningKeys.tsx b/static/js/publisher/pages/SigningKeys/SigningKeys.tsx
@@ -77,8 +77,9 @@ function SigningKeys(): React.JSX.Element {
     const signal = controller.signal;
 
     if (!modelsIsLoading && !modelsIsError && models) {
+      const modelIds = [...new Set(models.map((m) => m["name"]))];
       getPolicies({
-        models,
+        modelIds,
         id,
         setPolicies,
         signal,
diff --git a/static/js/publisher/state/remodelsState.ts b/static/js/publisher/state/remodelsState.ts
diff --git a/static/js/publisher/types/shared.ts b/static/js/publisher/types/shared.ts
diff --git a/static/js/publisher/utils/getPolicies.ts b/static/js/publisher/utils/getPolicies.ts
