Publisher pages lazy import, pt4 (#5471)

* feature: lazy import account snaps and name registration pages

* fix: use Link components for SPA navigation

Author: edisile

static/js/publisher/components/PublishedSnapSection/PublishedSnapSection.tsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
+import { Link } from "react-router-dom";
 import { Accordion } from "@canonical/react-components";
+
 import PublishedSnapList from "../PublishedSnapList";
 import PublisherMetrics from "../PublisherMetrics";
 import { ITEMS_PER_PAGE } from "../../constants";
-
 import type { ISnap } from "../../types";
 
 function PublishedSnapSection({
@@ -38,12 +39,12 @@ function PublishedSnapSection({
           />
           <div className="accordion-actions">
             <div className="accordion-actions__row u-align--right">
-              <a
-                href="/account/register-snap"
+              <Link
+                to="/register-snap"
                 className="p-button u-float-right p-snap-list__register u-no-margin--top is-dense"
               >
                 Register a snap name
-              </a>
+              </Link>
             </div>
           </div>
         </>

static/js/publisher/index.tsx

@@ -9,15 +9,11 @@ import BrandStoreRoute from "./components/BrandStoreRoute/BrandStoreRoute";
 import PublisherLayout from "./layouts/PublisherLayout";
 import SnapsManagementLayout from "./layouts/SnapsManagementLayout";
 
-import AccountSnaps from "./pages/AccountSnaps";
 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 RegisterNameDispute from "./pages/RegisterNameDispute";
-import RegisterSnap from "./pages/RegisterSnap";
-import RequestReservedName from "./pages/RequestReservedName";
 import SigningKeys from "./pages/SigningKeys";
 import Snaps from "./pages/Snaps";
 import ValidationSet from "./pages/ValidationSet";
@@ -34,6 +30,14 @@ const Listing = importComponent(() => import("./pages/Listing"));
 const Builds = importComponent(() => import("./pages/Builds"));
 const Build = importComponent(() => import("./pages/Build"));
 const Releases = importComponent(() => import("./pages/Releases"));
+const AccountSnaps = importComponent(() => import("./pages/AccountSnaps"));
+const RegisterNameDispute = importComponent(
+  () => import("./pages/RegisterNameDispute"),
+);
+const RegisterSnap = importComponent(() => import("./pages/RegisterSnap"));
+const RequestReservedName = importComponent(
+  () => import("./pages/RequestReservedName"),
+);
 
 Sentry.init({
   dsn: window.SENTRY_DSN,

static/js/publisher/pages/RegisterNameDispute/RegisterNameDisputeForm.tsx

@@ -7,6 +7,7 @@ import {
   Col,
   Button,
 } from "@canonical/react-components";
+import { Link } from "react-router-dom";
 
 type Props = {
   snapName: string | null;
@@ -85,9 +86,9 @@ function RegisterNameDisputeForm({
         </Row>
         <hr />
         <div className="u-align--right">
-          <a className="p-button" href="/register-snap">
+          <Link className="p-button" to="/register-snap">
             Register a new name
-          </a>
+          </Link>
           <Button
             type="submit"
             appearance="positive"

static/js/publisher/pages/RegisterSnap/RegistrationError.tsx

@@ -40,11 +40,11 @@ function RegistrationError({ snapName, errorCode, isPrivate, store }: Props) {
     return (
       <Notification severity="information">
         '<strong>{snapName}</strong>' is reserved. You can{" "}
-        <a
-          href={`/request-reserved-name?snap_name=${snapName}&store=${store}&is_isPrivate=${isPrivate}`}
+        <Link
+          to={`/request-reserved-name?snap_name=${snapName}&store=${store}&is_isPrivate=${isPrivate}`}
         >
           request a reserved name
-        </a>{" "}
+        </Link>{" "}
         or register a new name below.
       </Notification>
     );