fix: Only show remodels to users with permissions

Author: steverydz

static/js/publisher/hooks/__tests__/useRemodels.test.tsx

@@ -34,19 +34,18 @@ const remodelsResponse = {
       "to-model": "test-to-model",
     },
   ],
+  "next-cursor": null,
 };
 
 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,
     });
@@ -84,7 +83,10 @@ describe("useRemodels", () => {
       expect(result.current.isSuccess).toBe(true);
     });
 
-    expect(result.current.data).toEqual(remodelsResponse.allowlist);
+    expect(result.current.data).toEqual({
+      data: remodelsResponse,
+      success: true,
+    });
   });
 
   test("returns error if request fails", async () => {
@@ -96,10 +98,13 @@ describe("useRemodels", () => {
     );
 
     await waitFor(() => {
-      expect(result.current.isError).toBe(true);
+      expect(result.current.isSuccess).toBe(true);
     });
 
-    expect(result.current.data).toBeUndefined();
+    expect(result.current.data).toEqual({
+      message: "There was a problem fetching remodels",
+      success: false,
+    });
   });
 
   test("returns error if network error", async () => {

static/js/publisher/hooks/useRemodels.ts

@@ -1,46 +1,45 @@
 import { useQuery, UseQueryResult } from "react-query";
-import type { Remodel } from "../types/shared";
+import type { ApiResponse, Remodel, RemodelResponse } from "../types/shared";
 
 const useRemodels = (
   brandId: string | undefined,
   modelId: string | undefined,
-): UseQueryResult<Remodel[], Error> => {
-  return useQuery<Remodel[], Error>({
+): UseQueryResult<ApiResponse<RemodelResponse>, Error> => {
+  return useQuery<ApiResponse<RemodelResponse>, Error>({
     queryKey: ["remodels", brandId, modelId],
     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 responseData = await response.json();
+
+      if (responseData.data?.allowlist) {
+        const remodelsForCurrentModel = responseData.data.allowlist.filter(
+          (remodel: Remodel) => {
+            return (
+              remodel["from-model"] === modelId ||
+              remodel["to-model"] === modelId
+            );
+          },
+        );
+
+        responseData.data.allowlist = remodelsForCurrentModel.sort(
+          (a: Remodel, b: Remodel) => {
+            if (a["created-at"] > b["created-at"]) {
+              return -1;
+            }
+
+            if (a["created-at"] < b["created-at"]) {
+              return 1;
+            }
+
+            return 0;
+          },
+        );
       }
 
-      const data = await response.json();
-
-      if (!data.success) {
-        throw new Error(data.message);
-      }
-
-      const remodelsForCurrentModel = data.data.allowlist.filter(
-        (remodel: Remodel) => {
-          return (
-            remodel["from-model"] === modelId || remodel["to-model"] === modelId
-          );
-        },
-      );
-
-      return remodelsForCurrentModel.sort((a: Remodel, b: Remodel) => {
-        if (a["created-at"] > b["created-at"]) {
-          return -1;
-        }
-
-        if (a["created-at"] < b["created-at"]) {
-          return 1;
-        }
-
-        return 0;
-      });
+      return responseData;
     },
     enabled: !!brandId,
   });

static/js/publisher/layouts/ModelDetailsPageLayout/ModelNav.tsx

@@ -1,7 +1,11 @@
 import { Link, useParams } from "react-router-dom";
+import { useAtomValue } from "jotai";
+
+import { remodelPermissionsState } from "../../state/remodelsState";
 
 function ModelNav({ sectionName }: { sectionName: string }): React.JSX.Element {
   const { id, modelId } = useParams();
+  const hasRemodelPermissions = useAtomValue(remodelPermissionsState);
 
   return (
     <nav className="p-tabs">
@@ -26,6 +30,18 @@ function ModelNav({ sectionName }: { sectionName: string }): React.JSX.Element {
             Policies
           </Link>
         </li>
+        {hasRemodelPermissions && (
+          <li className="p-tabs__item">
+            <Link
+              to={`/admin/${id}/models/${modelId}/remodel`}
+              className="p-tabs__link"
+              aria-selected={sectionName === "remodel"}
+              role="tab"
+            >
+              Remodel
+            </Link>
+          </li>
+        )}
       </ul>
     </nav>
   );

static/js/publisher/pages/Model/Model.tsx

@@ -13,19 +13,27 @@ import {
 } from "@canonical/react-components";
 
 import { modelsListState } from "../../state/modelsState";
+import { remodelPermissionsState } from "../../state/remodelsState";
 import { brandIdState, brandStoreState } from "../../state/brandStoreState";
-import { useModels } from "../../hooks";
+import { useModels, useRemodels } from "../../hooks";
 import { setPageTitle } from "../../utils";
-import type { Model as ModelType } from "../../types/shared";
 import { PortalEntrance } from "../Portals/Portals";
 
+import type { UseQueryResult } from "react-query";
+import type {
+  Model as ModelType,
+  RemodelResponse,
+  ApiResponse,
+} from "../../types/shared";
+
 function Model() {
   const { id, modelId } = useParams();
   const brandId = useAtomValue(brandIdState);
   const [apiKey, setApiKey] = useState("");
   const [showSuccessNotification, setShowSuccessNotificaton] = useState(false);
   const [showErrorNotification, setShowErrorNotificaton] = useState(false);
   const setModelsList = useSetAtom(modelsListState);
+  const setRemodelPermissionState = useSetAtom(remodelPermissionsState);
   const brandStore = useAtomValue(brandStoreState(id));
 
   const mutation = useMutation({
@@ -72,6 +80,23 @@ function Model() {
     refetch: () => void;
   } = useModels(brandId);
 
+  const {
+    isLoading: remodelsIsLoading,
+    isError: remodelsIsError,
+    data: remodelsData,
+  }: UseQueryResult<ApiResponse<RemodelResponse>, Error> = useRemodels(
+    brandId,
+    modelId,
+  );
+
+  useEffect(() => {
+    if (!remodelsIsLoading && !remodelsIsError && remodelsData) {
+      if (remodelsData.success) {
+        setRemodelPermissionState(true);
+      }
+    }
+  }, [remodelsIsLoading, remodelsIsError, remodelsData, brandId, id]);
+
   const handleError = () => {
     setShowErrorNotificaton(true);
     setTimeout(() => {

static/js/publisher/pages/Remodel/Remodel.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useAtomValue, useSetAtom } from "jotai";
+import { useAtomValue, useSetAtom, useAtom } from "jotai";
 import {
   useParams,
   useSearchParams,
@@ -10,6 +10,7 @@ import { Notification, Icon, Row, Col } from "@canonical/react-components";
 
 import { useRemodels } from "../../hooks";
 import {
+  remodelPermissionsState,
   remodelsListFilterState,
   remodelsListState,
 } from "../../state/remodelsState";
@@ -22,7 +23,7 @@ import RemodelTable from "./RemodelTable";
 import ConfigureRemodelForm from "./ConfigureRemodelForm";
 
 import type { UseQueryResult } from "react-query";
-import type { Remodel } from "../../types/shared";
+import type { ApiResponse, Remodel, RemodelResponse } from "../../types/shared";
 
 function Remodel(): React.JSX.Element {
   const { id, modelId } = useParams();
@@ -33,14 +34,21 @@ function Remodel(): React.JSX.Element {
     error,
     data,
     refetch,
-  }: UseQueryResult<Remodel[], Error> = useRemodels(brandId, modelId);
+  }: UseQueryResult<ApiResponse<RemodelResponse>, Error> = useRemodels(
+    brandId,
+    modelId,
+  );
   const setRemodels = useSetAtom(remodelsListState);
   const setFilter = useSetAtom(remodelsListFilterState);
   const [showNotification, setShowNotification] = useState(false);
   const [showErrorNotification, setShowErrorNotification] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
   const brandStore = useAtomValue(brandStoreState(id));
   const [searchParams] = useSearchParams();
+  const [hasRemodelPermissions, setHasRemodelPermissions] = useAtom(
+    remodelPermissionsState,
+  );
+  const [permissionsMessage, setPermissionsMessage] = useState("");
   const navigate = useNavigate();
 
   brandStore
@@ -49,25 +57,33 @@ function Remodel(): React.JSX.Element {
 
   useEffect(() => {
     if (!isLoading && !isError && data) {
-      setRemodels(data);
+      if (data.success) {
+        setHasRemodelPermissions(true);
+      }
+
+      if (data.data?.allowlist) {
+        setRemodels(data.data?.allowlist);
+      }
+
+      if (!data.success) {
+        setPermissionsMessage(
+          data.message || "There was a problem fetching remodels",
+        );
+      }
+
       setFilter(searchParams.get("filter") || "");
     }
   }, [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>
-        ) : (
+        ) : hasRemodelPermissions ? (
           <>
             <Row>
               <Col size={6}>
@@ -90,6 +106,8 @@ function Remodel(): React.JSX.Element {
               <RemodelTable />
             </div>
           </>
+        ) : (
+          <Notification severity="caution">{permissionsMessage}</Notification>
         )}
       </div>
 

static/js/publisher/pages/Remodel/__tests__/Remodel.test.tsx

@@ -1,54 +1,48 @@
 import { BrowserRouter } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "react-query";
+import { JotaiTestProvider } from "../../../test-utils";
 import { render, screen } from "@testing-library/react";
 
+import { remodelPermissionsState } from "../../../state/remodelsState";
+
 import "@testing-library/jest-dom";
 
 import Remodel from "../Remodel";
 
-const mockFilterQuery = "test-model";
-
-vi.mock("react-router-dom", async (importOriginal) => ({
-  ...(await importOriginal()),
-  useSearchParams: () => [new URLSearchParams({ filter: mockFilterQuery })],
-}));
-
-vi.mock("../../Portals/Portals", async (importOriginal) => ({
-  ...(await importOriginal()),
-  PortalEntrance: ({ children }: { children: React.ReactNode }) => (
-    <>{children}</>
-  ),
-}));
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false,
-      refetchOnReconnect: false,
-    },
-  },
-});
+const queryClient = new QueryClient();
 
-function renderComponent() {
+function renderComponent(hasPermissions: boolean) {
   return render(
     <BrowserRouter>
       <QueryClientProvider client={queryClient}>
-        <Remodel />
+        <JotaiTestProvider
+          initialValues={[[remodelPermissionsState, hasPermissions]]}
+        >
+          <Remodel />
+        </JotaiTestProvider>
       </QueryClientProvider>
     </BrowserRouter>,
   );
 }
 
 describe("Remodel", () => {
-  it("displays a filter input", () => {
-    renderComponent();
+  it("renders filter if user has permissions", () => {
+    renderComponent(true);
     expect(screen.getByLabelText("Search remodels")).toBeInTheDocument();
   });
 
-  it("populates filter with the filter query parameter", () => {
-    renderComponent();
-    expect(screen.getByLabelText("Search remodels")).toHaveValue(
-      mockFilterQuery,
-    );
+  it("doesn't render filter if user doesn't have permissions", () => {
+    renderComponent(false);
+    expect(screen.queryByLabelText("Search remodels")).not.toBeInTheDocument();
+  });
+
+  it("renders table if user has permissions", () => {
+    renderComponent(true);
+    expect(screen.getByTestId("remodel-table")).toBeInTheDocument();
+  });
+
+  it("doesn't render table if user doesn't have permissions", () => {
+    renderComponent(false);
+    expect(screen.queryByTestId("remodel-table")).not.toBeInTheDocument();
   });
 });

static/js/publisher/state/remodelsState.ts

@@ -33,8 +33,11 @@ const filteredRemodelsListState = atom<Array<Remodel>>((get) => {
   return getFilteredRemodels(remodels, filter);
 });
 
+const remodelPermissionsState = atom(false);
+
 export {
   remodelsListState,
   remodelsListFilterState,
   filteredRemodelsListState,
+  remodelPermissionsState,
 };