feat: Use Store API pagination for remodels table

steverydz · steverydz · commit bcb400b4b6ab · 2026-04-27T14:46:02.000+01:00
diff --git a/requirements.txt b/requirements.txt
@@ -6,7 +6,7 @@ canonicalwebteam.discourse==7.2.0
 canonicalwebteam.blog==6.8.4
 canonicalwebteam.search==2.1.2
 canonicalwebteam.image-template==1.9.0
-canonicalwebteam.store-api==7.8.1
+canonicalwebteam.store-api==7.8.2
 canonicalwebteam.launchpad==0.9.0
 django-openid-auth==0.17
 Flask-OpenID==1.3.1
diff --git a/static/js/publisher/hooks/__tests__/useRemodels.test.tsx b/static/js/publisher/hooks/__tests__/useRemodels.test.tsx
@@ -89,6 +89,74 @@ describe("useRemodels", () => {
     });
   });
 
+  test("returns remodels data with pageSize param", async () => {
+    server.use(
+      http.get(
+        "/api/store/test-brand-id/models/test-model/remodel",
+        ({ request }) => {
+          const url = new URL(request.url);
+
+          expect(url.searchParams.get("page-size")).toBe("10");
+          return HttpResponse.json({
+            data: remodelsResponse,
+            success: true,
+          });
+        },
+      ),
+    );
+  });
+
+  test("returns remodels data with page param", async () => {
+    server.use(
+      http.get(
+        "/api/store/test-brand-id/models/test-model/remodel",
+        ({ request }) => {
+          const url = new URL(request.url);
+
+          expect(url.searchParams.get("page")).toBe("next_cursor_value");
+          return HttpResponse.json({
+            data: remodelsResponse,
+            success: true,
+          });
+        },
+      ),
+    );
+  });
+
+  test("returns remodels data with fromModel param", async () => {
+    server.use(
+      http.get(
+        "/api/store/test-brand-id/models/test-model/remodel",
+        ({ request }) => {
+          const url = new URL(request.url);
+
+          expect(url.searchParams.get("from-model")).toBe("test-from-model");
+          return HttpResponse.json({
+            data: remodelsResponse,
+            success: true,
+          });
+        },
+      ),
+    );
+  });
+
+  test("returns remodels data with pageSize, page and fromModel param", async () => {
+    server.use(
+      http.get(
+        "/api/store/test-brand-id/models/test-model/remodel",
+        ({ request }) => {
+          const url = new URL(request.url);
+
+          expect(url.searchParams.get("from-model")).toBe("test-from-model");
+          return HttpResponse.json({
+            data: remodelsResponse,
+            success: true,
+          });
+        },
+      ),
+    );
+  });
+
   test("returns error if request fails", async () => {
     const { result } = renderHook(
       () => useRemodels("test-brand-id-fail", "test-to-model"),
diff --git a/static/js/publisher/hooks/useRemodels.ts b/static/js/publisher/hooks/useRemodels.ts
@@ -1,44 +1,41 @@
 import { useQuery, UseQueryResult } from "react-query";
-import type { Remodel, RemodelResponse, ApiResponse } from "../types/shared";
+import type { RemodelResponse, ApiResponse } from "../types/shared";
 
 const useRemodels = (
   brandId: string | undefined,
   modelId: string | undefined,
+  urlSearchParams?: {
+    page?: string | null;
+    pageSize?: number;
+    fromModel?: string;
+  },
 ): 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`,
-      );
-
-      const responseData = await response.json();
+  const url = new URL(
+    `/api/store/${brandId}/models/remodel-allowlist`,
+    window.location.origin,
+  );
 
-      if (responseData.data?.allowlist) {
-        const remodelsForCurrentModel = responseData.data.allowlist.filter(
-          (remodel: Remodel) => {
-            return (
-              remodel["from-model"] === modelId ||
-              remodel["to-model"] === modelId
-            );
-          },
-        );
+  if (urlSearchParams) {
+    const { page, pageSize, fromModel } = urlSearchParams;
 
-        responseData.data.allowlist = remodelsForCurrentModel.sort(
-          (a: Remodel, b: Remodel) => {
-            if (a["created-at"] > b["created-at"]) {
-              return -1;
-            }
+    if (page) {
+      url.searchParams.set("page", page);
+    }
 
-            if (a["created-at"] < b["created-at"]) {
-              return 1;
-            }
+    if (pageSize) {
+      url.searchParams.set("page-size", pageSize.toString());
+    }
 
-            return 0;
-          },
-        );
-      }
+    if (fromModel) {
+      url.searchParams.set("from-model", fromModel);
+    }
+  }
 
+  return useQuery<ApiResponse<RemodelResponse>, Error>({
+    queryKey: ["remodels", brandId, modelId, urlSearchParams],
+    queryFn: async () => {
+      const response = await fetch(url);
+      const responseData = await response.json();
       return responseData;
     },
     enabled: !!brandId,
diff --git a/static/js/publisher/pages/Remodel/Remodel.tsx b/static/js/publisher/pages/Remodel/Remodel.tsx
@@ -1,6 +1,12 @@
 import { useEffect, useState } from "react";
 import { useAtomValue, useSetAtom } from "jotai";
-import { useParams, Link, useNavigate, useLocation } from "react-router-dom";
+import {
+  useParams,
+  Link,
+  useNavigate,
+  useLocation,
+  useSearchParams,
+} from "react-router-dom";
 import { Notification, Icon, Row, Col } from "@canonical/react-components";
 
 import { useRemodels } from "../../hooks";
@@ -17,8 +23,16 @@ import type { Remodel, RemodelResponse, ApiResponse } from "../../types/shared";
 
 function Remodel(): React.JSX.Element {
   const { id, modelId } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
   const location = useLocation();
   const brandId = useAtomValue(brandIdState);
+  const [currentCursor, setCurrentCursor] = useState<string | null>(null);
+  const [nextCursor, setNextCursor] = useState<string | null>(null);
+  const [cursorHistory, setCursorHistory] = useState<Array<string | null>>([]);
+
+  const pageSizeParam = searchParams.get("page-size");
+  const pageSize = pageSizeParam ? parseInt(pageSizeParam) : 25;
+
   const {
     isLoading,
     isError,
@@ -28,6 +42,11 @@ function Remodel(): React.JSX.Element {
   }: UseQueryResult<ApiResponse<RemodelResponse>, Error> = useRemodels(
     brandId,
     modelId,
+    {
+      fromModel: modelId,
+      pageSize: pageSize,
+      page: currentCursor,
+    },
   );
   const setRemodels = useSetAtom(remodelsListState);
   const [showNotification, setShowNotification] = useState(false);
@@ -36,13 +55,33 @@ function Remodel(): React.JSX.Element {
   const brandStore = useAtomValue(brandStoreState(id));
   const navigate = useNavigate();
 
+  const handlePageForward = () => {
+    setCursorHistory((prev) => {
+      return [...prev, currentCursor];
+    });
+    setCurrentCursor(nextCursor);
+  };
+
+  const handlePageBack = () => {
+    const lastCursor = cursorHistory[cursorHistory.length - 1];
+    setCurrentCursor(lastCursor);
+    setCursorHistory((prev) => {
+      return prev.filter((c) => c !== lastCursor);
+    });
+  };
+
   brandStore
     ? setPageTitle(`Remodels in ${brandStore.name}`)
     : setPageTitle("Remodels");
 
   useEffect(() => {
-    if (!isLoading && !isError && data) {
+    if (isLoading || isError) {
+      return;
+    }
+
+    if (data) {
       setRemodels(data.data?.allowlist || []);
+      setNextCursor(data.data?.["next-cursor"] || null);
     }
   }, [isLoading, isError, data, brandId, id]);
 
@@ -76,7 +115,18 @@ function Remodel(): React.JSX.Element {
               </Col>
             </Row>
             <div className="u-flex-column u-flex-grow">
-              <RemodelTable />
+              {data && (
+                <RemodelTable
+                  handlePageForward={handlePageForward}
+                  handlePageBack={handlePageBack}
+                  forwardDisabled={!nextCursor}
+                  backDisabled={
+                    cursorHistory.length < 1 || currentCursor === null
+                  }
+                  pageSize={pageSize}
+                  setSearchParams={setSearchParams}
+                />
+              )}
             </div>
           </>
         )}
diff --git a/static/js/publisher/pages/Remodel/RemodelTable.tsx b/static/js/publisher/pages/Remodel/RemodelTable.tsx
@@ -1,30 +1,55 @@
 import { useAtomValue } from "jotai";
-import { MainTable, TablePagination } from "@canonical/react-components";
+import {
+  MainTable,
+  Pagination,
+  Row,
+  Col,
+  Select,
+} from "@canonical/react-components";
 import { format } from "date-fns";
 
 import { remodelsListState } from "../../state/remodelsState";
 
 import type { Remodel } from "../../types/shared";
+import { ChangeEvent } from "react";
 
-function RemodelTable(): React.JSX.Element {
+type Props = {
+  handlePageForward: () => void;
+  handlePageBack: () => void;
+  forwardDisabled: boolean;
+  backDisabled: boolean;
+  pageSize: number;
+  setSearchParams: (arg: Record<string, string>) => void;
+};
+
+function RemodelTable({
+  handlePageForward,
+  handlePageBack,
+  forwardDisabled,
+  backDisabled,
+  pageSize,
+  setSearchParams,
+}: Props): React.JSX.Element {
   const remodels = useAtomValue(remodelsListState);
 
   const headers = [
     {
       content: "Target model",
       style: { width: "250px" },
+      className: "u-truncate",
     },
     {
       content: "Original model",
       style: { width: "250px" },
+      className: "u-truncate",
     },
-    { content: "Serial" },
+    { content: "Serial", className: "u-truncate" },
     {
       content: "Created date",
-      className: "u-align--right",
+      className: "u-align--right u-truncate",
       style: { width: "130px" },
     },
-    { content: "Note" },
+    { content: "Note", className: "u-truncate" },
   ];
 
   const rows = remodels.map((remodel: Remodel) => {
@@ -46,17 +71,49 @@ function RemodelTable(): React.JSX.Element {
   });
 
   return (
-    <TablePagination
-      data={rows}
-      pageLimits={[25, 50, 100, 200]}
-      position="below"
-    >
+    <>
       <MainTable
         data-testid="remodel-table"
         emptyStateMsg="No remodels found"
         headers={headers}
+        rows={rows}
       />
-    </TablePagination>
+      <Row>
+        <Col size={6} medium={3}>
+          <Pagination
+            onForward={() => {
+              handlePageForward();
+            }}
+            onBack={() => {
+              handlePageBack();
+            }}
+            showLabels
+            forwardLabel="Next"
+            forwardDisabled={forwardDisabled}
+            backLabel="Prev"
+            backDisabled={backDisabled}
+          />
+        </Col>
+        <Col size={6} medium={3} className="u-align--right">
+          <Select
+            label="Number of remodels per page"
+            labelClassName="u-off-screen"
+            defaultValue={pageSize}
+            style={{ maxWidth: "150px" }}
+            onChange={(e: ChangeEvent<HTMLSelectElement>) => {
+              setSearchParams({ "page-size": e.target.value });
+            }}
+            options={[
+              { label: "10/page", value: 10 },
+              { label: "25/page", value: 25 },
+              { label: "50/page", value: 50 },
+              { label: "100/page", value: 100 },
+              { label: "200/page", value: 200 },
+            ]}
+          />
+        </Col>
+      </Row>
+    </>
   );
 }
 
diff --git a/tests/endpoints/tests_models.py b/tests/endpoints/tests_models.py
diff --git a/webapp/endpoints/models.py b/webapp/endpoints/models.py
