fix: address review comments - align query params, make props optional, fix effect guard, remove extra fetch in ModelNav

Agent-Logs-Url: https://github.com/canonical/snapcraft.io/sessions/db108129-dfdc-4dc5-9474-7c53386f2475

Co-authored-by: steverydz <501889+steverydz@users.noreply.github.com>

Author: Copilot

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

@@ -176,7 +176,7 @@ describe("useSerialLogs", () => {
         ({ request }) => {
           const url = new URL(request.url);
 
-          expect(url.searchParams.get("next-page")).toBe("nextpagecursor");
+          expect(url.searchParams.get("page")).toBe("nextpagecursor");
           return HttpResponse.json({
             data: serialLogsResponse,
             success: true,
@@ -218,7 +218,7 @@ describe("useSerialLogs", () => {
             "2026-03-28T04:00:23.875000",
           );
           expect(url.searchParams.get("page-size")).toBe("10");
-          expect(url.searchParams.get("next-page")).toBe("nextpagecursor");
+          expect(url.searchParams.get("page")).toBe("nextpagecursor");
           return HttpResponse.json({
             data: serialLogsResponse,
             success: true,

static/js/publisher/hooks/useSerialLogs.ts

@@ -31,7 +31,7 @@ const useSerialLogs = (
     }
 
     if (page) {
-      url.searchParams.set("next-page", page);
+      url.searchParams.set("page", page);
     }
   }
 

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

@@ -1,14 +1,13 @@
 import { Link, useParams } from "react-router-dom";
 import { useAtomValue } from "jotai";
 
-import { useRemodels, useSerialLogs } from "../../hooks";
+import { useRemodels } from "../../hooks";
 import { brandIdState } from "../../state/brandStoreState";
 
 function ModelNav({ sectionName }: { sectionName: string }): React.JSX.Element {
   const { id, modelId } = useParams();
   const brandId = useAtomValue(brandIdState);
   const { data: remodelsData } = useRemodels(brandId);
-  const { data: serialLogsData } = useSerialLogs(brandId, modelId);
 
   return (
     <nav className="p-tabs">
@@ -45,18 +44,16 @@ function ModelNav({ sectionName }: { sectionName: string }): React.JSX.Element {
             </Link>
           </li>
         )}
-        {serialLogsData?.success && (
-          <li className="p-tabs__item">
-            <Link
-              to={`/admin/${id}/models/${modelId}/serial-log`}
-              className="p-tabs__link"
-              aria-selected={sectionName === "serial-log"}
-              role="tab"
-            >
-              Serial log
-            </Link>
-          </li>
-        )}
+        <li className="p-tabs__item">
+          <Link
+            to={`/admin/${id}/models/${modelId}/serial-log`}
+            className="p-tabs__link"
+            aria-selected={sectionName === "serial-log"}
+            role="tab"
+          >
+            Serial log
+          </Link>
+        </li>
       </ul>
     </nav>
   );

static/js/publisher/pages/SerialLog/SerialLog.tsx

@@ -71,7 +71,7 @@ function SerialLog(): React.JSX.Element {
     : setPageTitle("Serial logs");
 
   useEffect(() => {
-    if (isLoading && isError) {
+    if (isLoading || isError) {
       return;
     }
 

static/js/publisher/pages/SerialLog/SerialLogTable.tsx

@@ -12,21 +12,21 @@ import { serialLogsListState } from "../../state/serialLogsState";
 import type { SerialLog } from "../../types/shared";
 
 type Props = {
-  handlePageForward: () => void;
-  handlePageBack: () => void;
-  handlePageSizeChange: (arg: number) => void;
-  forwardDisabled: boolean;
-  backDisabled: boolean;
-  pageSize: number;
+  handlePageForward?: () => void;
+  handlePageBack?: () => void;
+  handlePageSizeChange?: (arg: number) => void;
+  forwardDisabled?: boolean;
+  backDisabled?: boolean;
+  pageSize?: number;
 };
 
 function SerialLogTable({
-  handlePageForward,
-  handlePageBack,
-  handlePageSizeChange,
-  forwardDisabled,
-  backDisabled,
-  pageSize,
+  handlePageForward = () => {},
+  handlePageBack = () => {},
+  handlePageSizeChange = () => {},
+  forwardDisabled = true,
+  backDisabled = true,
+  pageSize = 10,
 }: Props): React.JSX.Element {
   const { id } = useParams();
   const serialLogs = useAtomValue(serialLogsListState);