Skip to content

Commit 8ce632f

Browse files
edisileedisile
authored
Publisher pages lazy import, grand finale (#5480)
* Publisher pages lazy imports, pt1 (#5460) * feature: lazy Suspense wrapper component * feature: lazy import AccountDetails * fix: linting * feature: importComponent test * feature: lazy import snap management pages (#5461) * Publisher pages lazy import, pt3 (#5465) * chore: restructure snaps management pages layout * feature: test SnapsManagementLayout * chore: cleanup * fix: old broken tests * feature: better coverage for tabs and breadcrumbs * fix: comments to explain TODO items * Publisher pages lazy import, pt4 (#5471) * feature: lazy import account snaps and name registration pages * fix: use Link components for SPA navigation * 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 * Publisher pages lazy import, pt6 (#5477) * feature: lazy load more brand store pages * fix: ignore AbortError when using AbourController.abort() * feature: lazy load validations sets and keys pages (#5478) * fix: /admin page redirect
1 parent 036ca22 commit 8ce632f

45 files changed

Lines changed: 655 additions & 374 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Spinner } from "@canonical/react-components";
21
import { useSetAtom } from "jotai";
32
import { useEffect } from "react";
43
import { Outlet, useLocation, useNavigate, useParams } from "react-router-dom";
@@ -7,6 +6,7 @@ import { useBrandStores } from "../../hooks";
76
import StoreNotFound from "../../pages/StoreNotFound";
87
import { brandStoresState } from "../../state/brandStoreState";
98
import { Store } from "../../types/shared";
9+
import Loader from "../Loader";
1010

1111
function BrandStoreRoute() {
1212
const location = useLocation();
@@ -47,7 +47,7 @@ function BrandStoreRoute() {
4747
<StoreNotFound />
4848
)
4949
) : (
50-
<Spinner text="Loading..." />
50+
<Loader />
5151
);
5252
}
5353

‎static/js/publisher/components/Loader/Loader.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Spinner, Strip } from "@canonical/react-components";
2+
3+
function Loader({ text: text }: { text?: string }): React.JSX.Element {
4+
return (
5+
<Strip shallow>
6+
<Spinner text={text ?? "Loading..."} />
7+
</Strip>
8+
);
9+
}
10+
11+
export default Loader;

‎static/js/publisher/components/Loader/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./Loader";

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { useState } from "react";
2+
import { Link } from "react-router-dom";
23
import { Accordion } from "@canonical/react-components";
4+
35
import PublishedSnapList from "../PublishedSnapList";
46
import PublisherMetrics from "../PublisherMetrics";
57
import { ITEMS_PER_PAGE } from "../../constants";
6-
78
import type { ISnap } from "../../types";
89

910
function PublishedSnapSection({
@@ -38,12 +39,12 @@ function PublishedSnapSection({
3839
/>
3940
<div className="accordion-actions">
4041
<div className="accordion-actions__row u-align--right">
41-
<a
42-
href="/account/register-snap"
42+
<Link
43+
to="/register-snap"
4344
className="p-button u-float-right p-snap-list__register u-no-margin--top is-dense"
4445
>
4546
Register a snap name
46-
</a>
47+
</Link>
4748
</div>
4849
</div>
4950
</>

‎static/js/publisher/components/SectionNav/SectionNav.tsx‎

Lines changed: 0 additions & 57 deletions
This file was deleted.

‎static/js/publisher/components/SectionNav/SectionNavTest.tsx‎

Lines changed: 0 additions & 60 deletions
This file was deleted.

‎static/js/publisher/components/SectionNav/index.ts‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎static/js/publisher/hooks/usePolicies.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ function usePolicies(
77
modelId: string | undefined,
88
): UsePoliciesResponse {
99
return useQuery<Policy[], ApiError>({
10-
queryKey: ["policies", storeId],
10+
queryKey: ["policies", storeId, modelId],
1111
queryFn: async () => {
1212
const response = await fetch(
1313
`/api/store/${storeId}/models/${modelId}/policies`,

‎static/js/publisher/index.tsx‎

Lines changed: 56 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,42 @@ import { createRoot } from "react-dom/client";
44
import { QueryClient, QueryClientProvider } from "react-query";
55
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
66

7+
import { importComponent } from "./utils/importComponent";
78
import BrandStoreRoute from "./components/BrandStoreRoute/BrandStoreRoute";
89
import PublisherLayout from "./layouts/PublisherLayout";
9-
import AccountDetails from "./pages/AccountDetails";
10-
import AccountSnaps from "./pages/AccountSnaps";
11-
import BrandStoreSettings from "./pages/BrandStoreSettings";
12-
import Build from "./pages/Build";
13-
import Builds from "./pages/Builds";
14-
import Listing from "./pages/Listing";
15-
import Members from "./pages/Members";
16-
import Metrics from "./pages/Metrics";
17-
import Model from "./pages/Model";
18-
import Policies from "./pages/Model/Policies";
19-
import Models from "./pages/Models";
20-
import Publicise from "./pages/Publicise";
21-
import PublisherSettings from "./pages/PublisherSettings";
22-
import RegisterNameDispute from "./pages/RegisterNameDispute";
23-
import RegisterSnap from "./pages/RegisterSnap";
24-
import Releases from "./pages/Releases";
25-
import RequestReservedName from "./pages/RequestReservedName";
26-
import SigningKeys from "./pages/SigningKeys";
27-
import Snaps from "./pages/Snaps";
28-
import ValidationSet from "./pages/ValidationSet";
29-
import ValidationSets from "./pages/ValidationSets";
30-
import AccountKeys from "./pages/AccountKeys";
10+
import SnapsManagementLayout from "./layouts/SnapsManagementLayout";
11+
import ModelDetailsPageLayout from "./layouts/ModelDetailsPageLayout/ModelPageLayout";
12+
13+
const AccountDetails = importComponent(() => import("./pages/AccountDetails"));
14+
const Publicise = importComponent(() => import("./pages/Publicise"));
15+
const PublisherSettings = importComponent(
16+
() => import("./pages/PublisherSettings"),
17+
);
18+
const Metrics = importComponent(() => import("./pages/Metrics"));
19+
const Listing = importComponent(() => import("./pages/Listing"));
20+
const Builds = importComponent(() => import("./pages/Builds"));
21+
const Build = importComponent(() => import("./pages/Build"));
22+
const Releases = importComponent(() => import("./pages/Releases"));
23+
const AccountSnaps = importComponent(() => import("./pages/AccountSnaps"));
24+
const RegisterNameDispute = importComponent(
25+
() => import("./pages/RegisterNameDispute"),
26+
);
27+
const RegisterSnap = importComponent(() => import("./pages/RegisterSnap"));
28+
const RequestReservedName = importComponent(
29+
() => import("./pages/RequestReservedName"),
30+
);
31+
const Models = importComponent(() => import("./pages/Models"));
32+
const Model = importComponent(() => import("./pages/Model"));
33+
const Policies = importComponent(() => import("./pages/Model/Policies"));
34+
const BrandStoreSettings = importComponent(
35+
() => import("./pages/BrandStoreSettings"),
36+
);
37+
const Members = importComponent(() => import("./pages/Members"));
38+
const SigningKeys = importComponent(() => import("./pages/SigningKeys"));
39+
const Snaps = importComponent(() => import("./pages/Snaps"));
40+
const ValidationSet = importComponent(() => import("./pages/ValidationSet"));
41+
const ValidationSets = importComponent(() => import("./pages/ValidationSets"));
42+
const AccountKeys = importComponent(() => import("./pages/AccountKeys"));
3143

3244
Sentry.init({
3345
dsn: window.SENTRY_DSN,
@@ -54,7 +66,12 @@ root.render(
5466
<BrowserRouter>
5567
<Routes>
5668
<Route element={<PublisherLayout />}>
57-
<Route path=":snapId">
69+
<Route path=":snapId" element={<SnapsManagementLayout />}>
70+
{/*
71+
if any of the children routes changes, make sure to update
72+
static/js/publisher/layouts/SnapsManagementLayout/routes.ts
73+
*/}
74+
{/* TODO: move to data routing with RouterProvider */}
5875
<Route path="publicise" element={<Publicise />} />
5976
<Route
6077
path="publicise/badges"
@@ -92,20 +109,22 @@ root.render(
92109
<Route path="admin/account" element={<AccountDetails />} />
93110
<Route path="admin/account-keys" element={<AccountKeys />} />
94111

95-
<Route path="admin/:id" element={<BrandStoreRoute />}>
96-
<Route index element={<Navigate to="snaps" />} />
97-
<Route path="snaps" element={<Snaps />} />
98-
<Route path="members" element={<Members />} />
99-
<Route path="settings" element={<BrandStoreSettings />} />
100-
<Route path="signing-keys" element={<SigningKeys />} />
101-
<Route path="signing-keys/create" element={<SigningKeys />} />
102-
<Route path="models">
103-
<Route index element={<Models />} />
104-
<Route path="create" element={<Models />} />
105-
<Route path=":model_id">
106-
<Route index element={<Model />} />
107-
<Route path="policies" element={<Policies />} />
108-
<Route path="policies/create" element={<Policies />} />
112+
<Route path="admin" element={<BrandStoreRoute />}>
113+
<Route path=":id">
114+
<Route index element={<Navigate to="snaps" />} />
115+
<Route path="snaps" element={<Snaps />} />
116+
<Route path="members" element={<Members />} />
117+
<Route path="settings" element={<BrandStoreSettings />} />
118+
<Route path="signing-keys" element={<SigningKeys />} />
119+
<Route path="signing-keys/create" element={<SigningKeys />} />
120+
<Route path="models">
121+
<Route index element={<Models />} />
122+
<Route path="create" element={<Models />} />
123+
<Route path=":model_id" element={<ModelDetailsPageLayout />}>
124+
<Route index element={<Model />} />
125+
<Route path="policies" element={<Policies />} />
126+
<Route path="policies/create" element={<Policies />} />
127+
</Route>
109128
</Route>
110129
</Route>
111130
</Route>

static/js/publisher/pages/Model/ModelBreadcrumb.tsx renamed to static/js/publisher/layouts/ModelDetailsPageLayout/ModelBreadcrumb.tsx

File renamed without changes.

0 commit comments

Comments
 (0)
⚡