Skip to content

chore: move signing keys page to Publisher layout #5410

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 9, 2025
Merged

chore: move signing keys page to Publisher layout #5410

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0c3d556
chore: move signing keys page to Publisher layout
edisile Oct 9, 2025
754f347
fix: test
edisile Oct 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions static/js/publisher/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,11 @@ root.render(
<Route path="admin/:id/snaps" element={<Snaps />} />
<Route path="admin/:id/members" element={<Members />} />
<Route path="admin/:id/settings" element={<BrandStoreSettings />} />
<Route path="admin/:id/signing-keys" element={<SigningKeys />} />
<Route
path="admin/:id/signing-keys/create"
element={<SigningKeys />}
/>
</Route>
{/* END publisher routes */}

Expand All @@ -108,8 +113,6 @@ root.render(
path="models/:model_id/policies/create"
element={<Policies />}
/>
<Route path="signing-keys" element={<SigningKeys />} />
<Route path="signing-keys/create" element={<SigningKeys />} />
</Route>
</Route>
{/* END brand store routes */}
Expand Down
232 changes: 114 additions & 118 deletions static/js/publisher/pages/SigningKeys/SigningKeys.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,17 @@ import {
} from "../../state/signingKeysState";
import { policiesListState } from "../../state/policiesState";
import { brandIdState, brandStoreState } from "../../state/brandStoreState";

import Filter from "../../components/Filter";
import SigningKeysTable from "./SigningKeysTable";
import CreateSigningKeyForm from "./CreateSigningKeyForm";
import Navigation from "../../components/Navigation";

import {
isClosedPanel,
setPageTitle,
sortByDateDescending,
getPolicies,
} from "../../utils";

import type { SigningKey, Model } from "../../types/shared";
import { PortalEntry } from "../Portals/Portals";

function SigningKeys(): React.JSX.Element {
const { id } = useParams();
Expand Down Expand Up @@ -95,124 +92,123 @@ function SigningKeys(): React.JSX.Element {
}, [models]);

return (
<div className="l-application" role="presentation">
<Navigation />
<main className="l-main">
<div className="p-panel u-flex-column">
<div className="p-panel__content u-flex-column u-flex-grow">
<div className="u-fixed-width">
<h1 className="p-heading--4">Signing keys</h1>
</div>
{showNotification && (
<div className="u-fixed-width">
<Notification
severity="positive"
onDismiss={() => {
setShowNotification(false);
}}
>
New signing key created
</Notification>
</div>
)}
{errorMessage && (
<div className="u-fixed-width">
<Notification
severity="negative"
onDismiss={() => {
setErrorMessage("");
}}
>
{errorMessage}
</Notification>
</div>
)}
{showDisableSuccessNotification && (
<div className="u-fixed-width">
<Notification
severity="positive"
onDismiss={() => {
setShowDisableSuccessNotification(false);
}}
>
Signing key successfully deactivated
</Notification>
</div>
)}
<Row>
<Col size={6}>
<Filter
state={signingKeysListFilterState}
label="Signing keys"
placeholder="Search keys"
/>
</Col>
<Col size={6} className="u-align--right">
<Link
className="p-button--positive"
to={`/admin/${id}/signing-keys/create`}
>
Create new signing key
</Link>
</Col>
</Row>
<div className="u-fixed-width u-flex-column u-flex-grow">
{isError && error && (
<Notification severity="negative">
Error: {error.message}
</Notification>
)}
{isLoading ? (
<p>
<Icon name="spinner" className="u-animation--spin" />
&nbsp;Fetching signing keys...
</p>
) : (
<div className="u-flex-column u-flex-grow">
<SigningKeysTable
setShowDisableSuccessNotification={
setShowDisableSuccessNotification
}
enableTableActions={enableTableActions}
/>
</div>
)}
</div>
<>
<div className="u-fixed-width">
<h1 className="p-heading--4">Signing keys</h1>
</div>
<Row>
<Col size={6}>
<Filter
state={signingKeysListFilterState}
label="Signing keys"
placeholder="Search keys"
/>
</Col>
<Col size={6} className="u-align--right">
<Link
className="p-button--positive"
to={`/admin/${id}/signing-keys/create`}
>
Create new signing key
</Link>
</Col>
</Row>
<div className="u-fixed-width u-flex-column u-flex-grow">
{isError && error && (
<Notification severity="negative">
Error: {error.message}
</Notification>
)}
{isLoading ? (
<p>
<Icon name="spinner" className="u-animation--spin" />
&nbsp;Fetching signing keys...
</p>
) : (
<div className="u-flex-column u-flex-grow">
<SigningKeysTable
setShowDisableSuccessNotification={
setShowDisableSuccessNotification
}
enableTableActions={enableTableActions}
/>
</div>
)}
</div>

<PortalEntry name="notification">
{showNotification && (
<div className="u-fixed-width">
<Notification
severity="positive"
onDismiss={() => {
setShowNotification(false);
}}
>
New signing key created
</Notification>
</div>
)}
{errorMessage && (
<div className="u-fixed-width">
<Notification
severity="negative"
onDismiss={() => {
setErrorMessage("");
}}
>
{errorMessage}
</Notification>
</div>
</div>
</main>
<div
className={`l-aside__overlay ${
isClosedPanel(location.pathname, "create") ? "u-hide" : ""
}`}
onClick={() => {
navigate(`/admin/${id}/signing-keys`);
setNewSigningKey({ name: "" });
setErrorMessage("");
}}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
)}
{showDisableSuccessNotification && (
<div className="u-fixed-width">
<Notification
severity="positive"
onDismiss={() => {
setShowDisableSuccessNotification(false);
}}
>
Signing key successfully deactivated
</Notification>
</div>
)}
</PortalEntry>

<PortalEntry name="aside">
<div
className={`l-aside__overlay ${
isClosedPanel(location.pathname, "create") ? "u-hide" : ""
}`}
onClick={() => {
navigate(`/admin/${id}/signing-keys`);
setNewSigningKey({ name: "" });
setErrorMessage("");
}
}}
role="button"
tabIndex={0}
aria-label="Navigate to signing keys"
></div>
<aside
className={`l-aside ${
isClosedPanel(location.pathname, "create") ? "is-collapsed" : ""
}`}
>
<CreateSigningKeyForm
setShowNotification={setShowNotification}
setErrorMessage={setErrorMessage}
refetch={refetch}
/>
</aside>
</div>
}}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
navigate(`/admin/${id}/signing-keys`);
setNewSigningKey({ name: "" });
setErrorMessage("");
}
}}
role="button"
tabIndex={0}
aria-label="Navigate to signing keys"
></div>
<aside
className={`l-aside ${
isClosedPanel(location.pathname, "create") ? "is-collapsed" : ""
}`}
>
<CreateSigningKeyForm
setShowNotification={setShowNotification}
setErrorMessage={setErrorMessage}
refetch={refetch}
/>
</aside>
</PortalEntry>
</>
);
}

Expand Down
5 changes: 5 additions & 0 deletions static/js/publisher/pages/SigningKeys/__tests__/SigningKeys.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@ vi.mock("react-router-dom", async (importOriginal) => ({
useSearchParams: () => [new URLSearchParams({ filter: mockFilterQuery })],
}));

vi.mock("../../Portals/Portals", async (importOriginal) => ({
...(await importOriginal()),
PortalEntry: ({ children }: { children: React.ReactNode }) => <>{children}</>,
}));

const queryClient = new QueryClient({
defaultOptions: {
queries: {
Expand Down