Publisher pages lazy import, pt5 (#5476)

* fix: use Link components for SPA navigation

* feature: lazy import models, model details and policies pages

* chore: refactor model page layout to fix ugly rerender

* fix: use default loader

* fix: bad useQuery key (fix #5452)

* fix: test that now fails

Author: edisile

static/js/publisher/components/BrandStoreRoute/BrandStoreRoute.tsx

@@ -1,4 +1,3 @@
-import { Spinner } from "@canonical/react-components";
 import { useSetAtom } from "jotai";
 import { useEffect } from "react";
 import { Outlet, useLocation, useNavigate, useParams } from "react-router-dom";
@@ -7,6 +6,7 @@ import { useBrandStores } from "../../hooks";
 import StoreNotFound from "../../pages/StoreNotFound";
 import { brandStoresState } from "../../state/brandStoreState";
 import { Store } from "../../types/shared";
+import Loader from "../Loader";
 
 function BrandStoreRoute() {
   const location = useLocation();
@@ -47,7 +47,7 @@ function BrandStoreRoute() {
       <StoreNotFound />
     )
   ) : (
-    <Spinner text="Loading..." />
+    <Loader />
   );
 }
 

static/js/publisher/hooks/usePolicies.ts

@@ -7,7 +7,7 @@ function usePolicies(
   modelId: string | undefined,
 ): UsePoliciesResponse {
   return useQuery<Policy[], ApiError>({
-    queryKey: ["policies", storeId],
+    queryKey: ["policies", storeId, modelId],
     queryFn: async () => {
       const response = await fetch(
         `/api/store/${storeId}/models/${modelId}/policies`,

static/js/publisher/index.tsx

@@ -8,12 +8,10 @@ import { importComponent } from "./utils/importComponent";
 import BrandStoreRoute from "./components/BrandStoreRoute/BrandStoreRoute";
 import PublisherLayout from "./layouts/PublisherLayout";
 import SnapsManagementLayout from "./layouts/SnapsManagementLayout";
+import ModelDetailsPageLayout from "./layouts/ModelDetailsPageLayout/ModelPageLayout";
 
 import BrandStoreSettings from "./pages/BrandStoreSettings";
 import Members from "./pages/Members";
-import Model from "./pages/Model";
-import Policies from "./pages/Model/Policies";
-import Models from "./pages/Models";
 import SigningKeys from "./pages/SigningKeys";
 import Snaps from "./pages/Snaps";
 import ValidationSet from "./pages/ValidationSet";
@@ -38,6 +36,9 @@ const RegisterSnap = importComponent(() => import("./pages/RegisterSnap"));
 const RequestReservedName = importComponent(
   () => import("./pages/RequestReservedName"),
 );
+const Models = importComponent(() => import("./pages/Models"));
+const Model = importComponent(() => import("./pages/Model"));
+const Policies = importComponent(() => import("./pages/Model/Policies"));
 
 Sentry.init({
   dsn: window.SENTRY_DSN,
@@ -117,7 +118,7 @@ root.render(
               <Route path="models">
                 <Route index element={<Models />} />
                 <Route path="create" element={<Models />} />
-                <Route path=":model_id">
+                <Route path=":model_id" element={<ModelDetailsPageLayout />}>
                   <Route index element={<Model />} />
                   <Route path="policies" element={<Policies />} />
                   <Route path="policies/create" element={<Policies />} />

…ublisher/pages/Model/ModelBreadcrumb.tsx …delDetailsPageLayout/ModelBreadcrumb.tsxstatic/js/publisher/pages/Model/ModelBreadcrumb.tsx renamed to static/js/publisher/layouts/ModelDetailsPageLayout/ModelBreadcrumb.tsx static/js/publisher/pages/Model/ModelBreadcrumb.tsx renamed to static/js/publisher/layouts/ModelDetailsPageLayout/ModelBreadcrumb.tsx

@@ -0,0 +1,18 @@
+import { Outlet, useLocation } from "react-router-dom";
+import ModelBreadcrumb from "./ModelBreadcrumb";
+import ModelNav from "./ModelNav";
+
+function ModelDetailsPageLayout() {
+  const { pathname } = useLocation();
+  const isPolicies = pathname.endsWith("policies");
+
+  return (
+    <>
+      <ModelBreadcrumb />
+      <ModelNav sectionName={isPolicies ? "policies" : "overview"} />
+      <Outlet />
+    </>
+  );
+}
+
+export default ModelDetailsPageLayout;

…ic/js/publisher/pages/Model/ModelNav.tsx …outs/ModelDetailsPageLayout/ModelNav.tsxstatic/js/publisher/pages/Model/ModelNav.tsx renamed to static/js/publisher/layouts/ModelDetailsPageLayout/ModelNav.tsx static/js/publisher/pages/Model/ModelNav.tsx renamed to static/js/publisher/layouts/ModelDetailsPageLayout/ModelNav.tsx

@@ -14,8 +14,6 @@ import {
 
 import { modelsListState, currentModelState } from "../../state/modelsState";
 import { brandIdState, brandStoreState } from "../../state/brandStoreState";
-import ModelNav from "./ModelNav";
-import ModelBreadcrumb from "./ModelBreadcrumb";
 import { useModels } from "../../hooks";
 import { setPageTitle } from "../../utils";
 import type { Model as ModelType } from "../../types/shared";
@@ -96,12 +94,6 @@ function Model() {
 
   return (
     <>
-      <div className="u-fixed-width">
-        <ModelBreadcrumb />
-      </div>
-      <div className="u-fixed-width">
-        <ModelNav sectionName="overview" />
-      </div>
       <div className="u-fixed-width u-align--right">
         <Button
           type="button"

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

@@ -9,8 +9,6 @@ import {
 import { useAtomValue, useSetAtom } from "jotai";
 import { Row, Col, Notification, Icon } from "@canonical/react-components";
 
-import ModelNav from "./ModelNav";
-import ModelBreadcrumb from "./ModelBreadcrumb";
 import Filter from "../../components/Filter";
 import PoliciesTable from "./PoliciesTable";
 import CreatePolicyForm from "./CreatePolicyForm";
@@ -78,13 +76,6 @@ function Policies(): React.JSX.Element {
 
   return (
     <>
-      <div className="u-fixed-width">
-        <ModelBreadcrumb />
-        <h1 className="u-off-screen">{model_id}</h1>
-      </div>
-      <div className="u-fixed-width">
-        <ModelNav sectionName="policies" />
-      </div>
       <Row>
         <Col size={6}>
           <Filter

…/pages/Model/__tests__/ModelNav.test.tsx …lsPageLayout/__tests__/ModelNav.test.tsxstatic/js/publisher/pages/Model/__tests__/ModelNav.test.tsx renamed to static/js/publisher/layouts/ModelDetailsPageLayout/__tests__/ModelNav.test.tsx static/js/publisher/pages/Model/__tests__/ModelNav.test.tsx renamed to static/js/publisher/layouts/ModelDetailsPageLayout/__tests__/ModelNav.test.tsx

@@ -1,10 +1,12 @@
+import { Link } from "react-router-dom";
+
 function Publisher(): React.JSX.Element {
   return (
     <div className="u-fixed-width">
       <h1>Publisher</h1>
       <p>
         As a publisher you can{" "}
-        <a href="/snaps">register a snap name on the Snap store</a> and{" "}
+        <Link to="/snaps">register a snap name on the Snap store</Link> and{" "}
         <a href={`${window.API_URL}stores/snaps/`}>
           manage your snaps on the dashboard
         </a>