From 22e8a82fa140a5c8efa0b7bb226287d92f9c8ab3 Mon Sep 17 00:00:00 2001 From: ConnorYoh <40631091+ConnorYoh@users.noreply.github.com> Date: Thu, 9 Jul 2026 15:47:37 +0100 Subject: [PATCH 1/5] Portal: add 'Open in browser' CTA to the welcome hero (#6944) ## Screenshots image --- .../editor/public/locales/en-US/translation.toml | 1 + .../editor/src/portal/components/WelcomeBanner.tsx | 13 ++++++++++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/frontend/editor/public/locales/en-US/translation.toml b/frontend/editor/public/locales/en-US/translation.toml index 2daef44903..100604ac01 100644 --- a/frontend/editor/public/locales/en-US/translation.toml +++ b/frontend/editor/public/locales/en-US/translation.toml @@ -7962,6 +7962,7 @@ ariaLabel = "Welcome to Stirling PDF" badge = "Open-source" installEditor = "Install the Editor" inviteTeammates = "Invite teammates" +openInBrowser = "Open in browser" perks = "Free forever · Self-hostable" subtitle = "The world's most secure PDF Editor is free for teams of all sizes. Includes 60+ PDF operations and SSO." title = "Welcome to" diff --git a/frontend/editor/src/portal/components/WelcomeBanner.tsx b/frontend/editor/src/portal/components/WelcomeBanner.tsx index 8e9f71af29..ee64be1011 100644 --- a/frontend/editor/src/portal/components/WelcomeBanner.tsx +++ b/frontend/editor/src/portal/components/WelcomeBanner.tsx @@ -2,10 +2,12 @@ import type { ReactNode } from "react"; import { useTranslation } from "react-i18next"; import { Button } from "@app/ui"; import { useView } from "@portal/contexts/ViewContext"; +import { EDITOR_URL } from "@portal/auth/editorUrl"; import { DownloadIcon, UsersIcon, EditorIcon, + ExternalLinkIcon, SearchIcon, SourcesIcon, PoliciesIcon, @@ -156,13 +158,22 @@ export function WelcomeBanner({ footer }: WelcomeBannerProps) {
+
- diff --git a/frontend/editor/src/portal/components/MocksToggle.css b/frontend/editor/src/portal/components/MocksToggle.css deleted file mode 100644 index 68e5262ede..0000000000 --- a/frontend/editor/src/portal/components/MocksToggle.css +++ /dev/null @@ -1,51 +0,0 @@ -.portal-mocks-toggle { - display: inline-flex; - align-items: center; - gap: var(--space-1_5); - padding: var(--space-1) var(--space-2); - font-family: var(--font-mono); - font-size: 0.6875rem; - font-weight: 600; - letter-spacing: 0.04em; - text-transform: uppercase; - border-radius: var(--radius-sm); - border: 1px dashed transparent; - transition: - background var(--motion-fast), - border-color var(--motion-fast), - color var(--motion-fast); -} - -.portal-mocks-toggle.is-on { - color: var(--color-amber-dark); - background: var(--color-amber-light); - border-color: var(--color-amber-border); -} - -.portal-mocks-toggle.is-off { - color: var(--color-text-4); - background: var(--color-bg-muted); - border-color: var(--color-border); -} - -.portal-mocks-toggle:hover { - filter: brightness(1.04); -} - -.portal-mocks-toggle.is-pending { - opacity: 0.6; - cursor: progress; -} - -.portal-mocks-toggle__dot { - width: 0.4375rem; - height: 0.4375rem; - border-radius: 50%; - background: currentColor; - box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 28%, transparent); -} - -.portal-mocks-toggle.is-off .portal-mocks-toggle__dot { - background: var(--color-text-5); - box-shadow: none; -} diff --git a/frontend/editor/src/portal/components/MocksToggle.tsx b/frontend/editor/src/portal/components/MocksToggle.tsx deleted file mode 100644 index a0a12d062e..0000000000 --- a/frontend/editor/src/portal/components/MocksToggle.tsx +++ /dev/null @@ -1,55 +0,0 @@ -/// -import { useState } from "react"; -import { useTranslation } from "react-i18next"; -import { - readMocksPreference, - writeMocksPreference, -} from "@portal/mocks/preference"; -import "@portal/components/MocksToggle.css"; -import { Button } from "@app/ui/Button"; - -/** - * Dev-only header chip that flips MSW interception on and off. Persists the - * preference to localStorage so it survives reloads. Hidden entirely in - * production builds — there's no MSW worker to toggle there. - * - * Toggling reloads the page. Without a reload, components that already - * fetched data via useAsync keep showing the cached result, which makes the - * toggle feel like it does nothing. A reload gives a clean view of what the - * app looks like with/without mocks. - */ -export function MocksToggle() { - const { t } = useTranslation(); - const [enabled] = useState(() => readMocksPreference()); - const [pending, setPending] = useState(false); - - if (!import.meta.env.DEV) return null; - - function toggle() { - if (pending) return; - setPending(true); - writeMocksPreference(!enabled); - window.location.reload(); - } - - return ( - - ); -} diff --git a/frontend/editor/src/portal/components/account-link/LinkedInstancesTable.stories.tsx b/frontend/editor/src/portal/components/account-link/LinkedInstancesTable.stories.tsx index d10d08bf27..eb3ffdef13 100644 --- a/frontend/editor/src/portal/components/account-link/LinkedInstancesTable.stories.tsx +++ b/frontend/editor/src/portal/components/account-link/LinkedInstancesTable.stories.tsx @@ -1,6 +1,7 @@ import { useState } from "react"; import type { Meta, StoryObj } from "@storybook/react-vite"; -import { listInstances, type LinkedInstanceRow } from "@portal/mocks/link"; +import type { LinkedInstanceRow } from "@portal/api/link"; +import { listInstances } from "@portal/mocks/link"; import { LinkedInstancesTable } from "@portal/components/account-link/LinkedInstancesTable"; import "@portal/views/AccountLink.css"; diff --git a/frontend/editor/src/portal/components/catalogue/ComponentCard.tsx b/frontend/editor/src/portal/components/catalogue/ComponentCard.tsx index 2e19223ce8..5357ffd52f 100644 --- a/frontend/editor/src/portal/components/catalogue/ComponentCard.tsx +++ b/frontend/editor/src/portal/components/catalogue/ComponentCard.tsx @@ -44,7 +44,7 @@ export function ComponentCard({

{component.name}

- {maturity.label} + {t(maturity.label)} {!unlocked && ( - {formatPrice(component.pricing)} + {formatPrice(component.pricing, t)} @stirling/{component.package} diff --git a/frontend/editor/src/portal/components/catalogue/ComponentDetailModal.tsx b/frontend/editor/src/portal/components/catalogue/ComponentDetailModal.tsx index b2d8a3f173..337cfc6119 100644 --- a/frontend/editor/src/portal/components/catalogue/ComponentDetailModal.tsx +++ b/frontend/editor/src/portal/components/catalogue/ComponentDetailModal.tsx @@ -75,7 +75,7 @@ export function ComponentDetailModal({ {component.name} - {maturity.label} + {t(maturity.label)} } @@ -84,7 +84,7 @@ export function ComponentDetailModal({ unlocked ? (
- {formatPrice(component.pricing)} + {formatPrice(component.pricing, t)}
@@ -90,7 +90,7 @@ export function DealJourney({ loading={advancing} onClick={() => onAdvance(currentStage)} > - {currentStep.gatingAction} + {t(currentStep.gatingAction)} )}
diff --git a/frontend/editor/src/portal/components/procurement/DocumentLedger.tsx b/frontend/editor/src/portal/components/procurement/DocumentLedger.tsx index 8189d006f8..72ab22a341 100644 --- a/frontend/editor/src/portal/components/procurement/DocumentLedger.tsx +++ b/frontend/editor/src/portal/components/procurement/DocumentLedger.tsx @@ -78,7 +78,9 @@ export function DocumentLedger({ {group.label} {blurb && ( - · {blurb} + + · {t(blurb)} + )} {cur && ( diff --git a/frontend/editor/src/portal/components/procurement/LockedState.stories.tsx b/frontend/editor/src/portal/components/procurement/LockedState.stories.tsx index e88c810801..eae9db4d99 100644 --- a/frontend/editor/src/portal/components/procurement/LockedState.stories.tsx +++ b/frontend/editor/src/portal/components/procurement/LockedState.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { LockedState } from "@portal/components/procurement/LockedState"; -import { JOURNEY } from "@portal/mocks/procurement"; +import { JOURNEY } from "@portal/api/procurement"; import "@portal/views/Procurement.css"; const meta: Meta = { diff --git a/frontend/editor/src/portal/components/procurement/StageStepper.stories.tsx b/frontend/editor/src/portal/components/procurement/StageStepper.stories.tsx index a27b0b90aa..7adb6951fb 100644 --- a/frontend/editor/src/portal/components/procurement/StageStepper.stories.tsx +++ b/frontend/editor/src/portal/components/procurement/StageStepper.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { StageStepper } from "@portal/components/procurement/StageStepper"; -import { JOURNEY } from "@portal/mocks/procurement"; +import { JOURNEY } from "@portal/api/procurement"; import "@portal/views/Procurement.css"; const meta: Meta = { diff --git a/frontend/editor/src/portal/components/procurement/StageStepper.tsx b/frontend/editor/src/portal/components/procurement/StageStepper.tsx index 1981078459..3b17f9a0d9 100644 --- a/frontend/editor/src/portal/components/procurement/StageStepper.tsx +++ b/frontend/editor/src/portal/components/procurement/StageStepper.tsx @@ -1,4 +1,5 @@ import { Fragment } from "react"; +import { useTranslation } from "react-i18next"; import type { DealStage, JourneyStep } from "@portal/api/procurement"; /** Status of a step relative to the deal's current stage. */ @@ -19,6 +20,7 @@ export function StageStepper({ currentStage: DealStage; locked?: boolean; }) { + const { t } = useTranslation(); const order = journey.map((s) => s.stage); const curIdx = locked ? -1 : order.indexOf(currentStage); @@ -40,7 +42,7 @@ export function StageStepper({ )}
- {step.label} + {t(step.label)}
); diff --git a/frontend/editor/src/portal/components/users/InviteMemberModal.tsx b/frontend/editor/src/portal/components/users/InviteMemberModal.tsx index 305bcc622d..515c95923e 100644 --- a/frontend/editor/src/portal/components/users/InviteMemberModal.tsx +++ b/frontend/editor/src/portal/components/users/InviteMemberModal.tsx @@ -41,9 +41,10 @@ interface InviteMemberModalProps { type InviteRole = "member" | "admin"; type Mode = "email" | "direct"; -const ROLE_SELECT_OPTIONS: { value: InviteRole; label: string }[] = [ - { value: "member", label: ROLE_LABEL.member }, - { value: "admin", label: ROLE_LABEL.admin }, +// Values hold i18n keys; resolved with t() where the select renders. +const ROLE_SELECT_OPTIONS: { value: InviteRole; labelKey: string }[] = [ + { value: "member", labelKey: ROLE_LABEL.member }, + { value: "admin", labelKey: ROLE_LABEL.admin }, ]; const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; @@ -117,9 +118,11 @@ export function InviteMemberModal({ }, [email, username, password]); // Drop the "admin" (Org Owner) option where it can't be assigned (SaaS). - const roleOptions = adminRole - ? ROLE_SELECT_OPTIONS - : ROLE_SELECT_OPTIONS.filter((o) => o.value !== "admin"); + const roleOptions = ( + adminRole + ? ROLE_SELECT_OPTIONS + : ROLE_SELECT_OPTIONS.filter((o) => o.value !== "admin") + ).map((o) => ({ value: o.value, label: t(o.labelKey) })); const authTypeOptions: { value: AuthType; label: string }[] = [ { value: "WEB", label: t("users.invite.authWeb", "Password") }, diff --git a/frontend/editor/src/portal/contexts/TierContext.tsx b/frontend/editor/src/portal/contexts/TierContext.tsx index 1b4742447b..cb8a730640 100644 --- a/frontend/editor/src/portal/contexts/TierContext.tsx +++ b/frontend/editor/src/portal/contexts/TierContext.tsx @@ -1,12 +1,10 @@ import { createContext, useContext, - useEffect, useMemo, useState, type ReactNode, } from "react"; -import { readMocksPreference } from "@portal/mocks/preference"; import { usePlanTier } from "@portal/contexts/usePlanTier"; export type Tier = "free" | "pro" | "enterprise"; @@ -26,9 +24,9 @@ export const TIER_INFO: Record = { interface TierContextValue { tier: Tier; - /** No-op when MSW mocks are off (tier is derived from real link state). */ + /** No-op when the tier is derived from the real plan (i.e. in the app). */ setTier: (tier: Tier) => void; - /** True when the tier value is derived from the real wallet/link, not the dropdown. */ + /** True when the tier value is derived from the real plan, not pinned. */ isDerived: boolean; } @@ -36,38 +34,33 @@ const TierContext = createContext(null); export function TierProvider({ children, - initialTier = "pro", + initialTier, }: { children: ReactNode; + /** + * Pins the tier to a fixed, locally settable value. Storybook and demo + * surfaces pass this to stage a specific tier; the app omits it, so the + * tier is always derived from the real plan (see usePlanTier — link state + * self-hosted, wallet on SaaS). + */ initialTier?: Tier; }) { - // Mocks toggling reloads the page (see MocksToggle), so a single read at mount - // is correct — the preference can't change without us remounting. - const mocksOn = useMemo(() => readMocksPreference(), []); - // Real derived tier. Its source is a per-flavor seam: self-hosted derives it - // from the link/subscription state, SaaS from the wallet (see usePlanTier). + const pinned = initialTier !== undefined; + const [pinnedTier, setPinnedTier] = useState(initialTier ?? "free"); const derivedTier = usePlanTier(); - const [mockTier, setMockTier] = useState(initialTier); - - // When mocks are off, mirror the derived tier so any component keyed on `tier` - // (sidebar plan badge, gated panels) stays consistent. When mocks are on, the - // dropdown wins. - useEffect(() => { - if (!mocksOn) { - setMockTier(derivedTier); - } - }, [mocksOn, derivedTier]); - + // Memo on the resolved tier (not its inputs) so plan transitions that map to + // the same tier don't re-render every consumer. + const tier = pinned ? pinnedTier : derivedTier; const value = useMemo( () => ({ - tier: mocksOn ? mockTier : derivedTier, - // Setter is a no-op when mocks are off — UI controls can disable themselves + tier, + // Setter is a no-op when derived — UI controls can disable themselves // via `isDerived`, but even if one slips through, it has no effect. - setTier: mocksOn ? setMockTier : () => {}, - isDerived: !mocksOn, + setTier: pinned ? setPinnedTier : () => {}, + isDerived: !pinned, }), - [mocksOn, mockTier, derivedTier], + [pinned, tier], ); return {children}; diff --git a/frontend/editor/src/portal/mocks/agents.ts b/frontend/editor/src/portal/mocks/agents.ts index e8523d11c7..6ff7b14910 100644 --- a/frontend/editor/src/portal/mocks/agents.ts +++ b/frontend/editor/src/portal/mocks/agents.ts @@ -1,125 +1,14 @@ /** - * Agent Builder fixtures and the types api/agents.ts shares with them. + * Agent Builder fixtures. Types live in api/agents.ts (the backend contract); + * this module only builds fake data for Storybook and tests. * * An "agent" here is an AI agent that classifies, extracts from, and routes * documents. The builder is its lifecycle surface: scenarios (named test * cases), tool-access governance, an eval / golden set, and version history. - * - * api/agents.ts imports the types; the MSW handlers serve this fixture data - * over the intercepted apiClient.local.json() calls. Components never reach into this - * module directly. Once a real backend exists the handlers stop being - * registered and these fixtures can be deleted (or kept as test seeds). */ import type { Tier } from "@portal/contexts/TierContext"; - -/* ──────────────────────────────────────────────────────────────────────── */ -/* Domain types */ -/* ──────────────────────────────────────────────────────────────────────── */ - -export type AgentStatus = "draft" | "published"; - -/** - * Tool-access posture. `broad` lets the agent call any tool it can reach; - * `restricted` is allow-by-default minus an explicit deny list (the governance - * mode enterprise tenants use to fence agents away from sensitive tools). - */ -export type ToolMode = "broad" | "restricted"; - -/** A named test case describing expected agent behaviour for a kind of input. */ -export interface Scenario { - id: string; - name: string; - /** What the agent is expected to do for this input. */ - expectation: string; - /** Whether this scenario is currently exercised by the eval run. */ - enabled: boolean; -} - -/** A single golden-set check with its last-run outcome. */ -export interface EvalCase { - id: string; - name: string; - /** Last observed pass/fail; null when the case has never been run. */ - passing: boolean | null; - /** Mean latency of the last run in milliseconds. */ - latencyMs: number; -} - -export interface AgentVersion { - /** Display label, e.g. "v3" or "v2-draft". */ - version: string; - status: AgentStatus; - /** ISO timestamp the version was created. */ - createdAt: string; - author: string; - /** One-line change summary. */ - note: string; -} - -export interface Agent { - id: string; - name: string; - /** One-line role description shown under the name in the selector. */ - role: string; - status: AgentStatus; - /** Current working version, e.g. "v3" or "v2-draft". */ - version: string; - model: string; - scenarios: Scenario[]; - toolMode: ToolMode; - /** Tools the agent may not call when `toolMode` is "restricted". */ - deniedTools: string[]; - /** Count of golden-set cases currently passing. */ - evalsPassing: number; - /** Total golden-set cases. */ - evalsTotal: number; - evalCases: EvalCase[]; - versions: AgentVersion[]; -} - -export interface AgentsSummary { - /** Agents in the "published" state. */ - activeAgents: number; - /** Total agents regardless of status. */ - totalAgents: number; - /** Mean eval pass-rate across all agents, 0..1. */ - avgPassRate: number; - /** Total scenarios across all agents. */ - totalScenarios: number; - /** Latest published version label across the fleet, e.g. "v3". */ - latestPublished: string; -} - -export interface AgentsResponse { - summary: AgentsSummary; - agents: Agent[]; -} - -/* ──────────────────────────────────────────────────────────────────────── */ -/* Presentation metadata (chip tone per status). Product copy, client-side. */ -/* ──────────────────────────────────────────────────────────────────────── */ - -export const AGENT_STATUS_TONE: Record = { - published: "success", - draft: "neutral", -}; - -/** - * Catalogue of tools an agent can be granted or denied. Surfaced as the chip - * palette in restricted mode so the deny list is picked from a known set - * rather than free-typed. - */ -export const TOOL_CATALOGUE = [ - "extract.fields", - "classify.document", - "route.pipeline", - "lookup.crm", - "send.email", - "write.audit", - "read.pii", - "invoke.webhook", -] as const; +import type { Agent, AgentsResponse, AgentsSummary } from "@portal/api/agents"; /* ──────────────────────────────────────────────────────────────────────── */ /* Fixture builders */ diff --git a/frontend/editor/src/portal/mocks/browser.ts b/frontend/editor/src/portal/mocks/browser.ts deleted file mode 100644 index 077b41b456..0000000000 --- a/frontend/editor/src/portal/mocks/browser.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { setupWorker } from "msw/browser"; -import { embeddedDataHandlers } from "@portal/mocks/handlers"; - -// Data handlers only (see embeddedDataHandlers) and no seeded auth token: the -// portal shares an origin and auth session with the host editor, so mocking auth -// or seeding a token would log the editor out. -export const worker = setupWorker(...embeddedDataHandlers); - -let workerStarted = false; - -/** - * Start the MSW worker. Idempotent — calling repeatedly is safe. - * - * The toggle flips MSW by writing the preference to localStorage and - * reloading the page, so there's no need for a `stopMockWorker` counterpart: - * the next boot just decides whether to call this or not. - */ -export async function startMockWorker(): Promise { - if (workerStarted) return; - await worker.start({ - onUnhandledRequest: "bypass", - serviceWorker: { url: "/mockServiceWorker.js" }, - quiet: true, - }); - workerStarted = true; -} diff --git a/frontend/editor/src/portal/mocks/docs.ts b/frontend/editor/src/portal/mocks/docs.ts index 2b54d0c17c..9c3c8c3473 100644 --- a/frontend/editor/src/portal/mocks/docs.ts +++ b/frontend/editor/src/portal/mocks/docs.ts @@ -1,8 +1,6 @@ /** - * Developer Docs fixtures and the types api/docs.ts shares with them. - * api/docs.ts imports the types; the MSW handlers in mocks/handlers/ serve the - * fixture data over the intercepted apiClient.local.json() calls. Components never reach - * into this module directly. + * Developer Docs fixtures. Types live in api/docs.ts (the backend contract); + * this module only builds fake data for Storybook and tests. * * Two payloads back the surface: * - the left-hand nav tree (`buildDocsNav`), and @@ -12,37 +10,25 @@ * * Rate limits scale with plan: free is throttled hard, pro lifts the ceiling, * enterprise is negotiated ("Custom"). The rest of the content is tier-neutral. - * - * Once a real backend exists the MSW handlers stop being registered and these - * fixtures can be deleted (or kept as test seeds). */ -import type { CardAccent } from "@app/ui"; import type { Tier } from "@portal/contexts/TierContext"; -import type { CodeLang } from "@app/ui"; +import type { + AgentSkill, + ApiErrorRow, + CodeSample, + DocsContent, + DocsNavSection, + EmbedComponent, + Playbook, + RateLimit, + Sdk, +} from "@portal/api/docs"; /* ──────────────────────────────────────────────────────────────────────── */ /* Navigation */ /* ──────────────────────────────────────────────────────────────────────── */ -/** A leaf entry in the docs nav — maps 1:1 to a content section. */ -export interface DocsNavItem { - /** Stable id used as the in-page section anchor. */ - id: string; - label: string; - /** Optional badge shown to the right of the label (e.g. "New", "Beta"). */ - badge?: string; -} - -/** A top-level grouping in the docs nav tree. */ -export interface DocsNavSection { - id: string; - label: string; - /** Single-glyph icon shown beside the section header. */ - icon: string; - items: DocsNavItem[]; -} - export function buildDocsNav(): DocsNavSection[] { return [ { @@ -96,79 +82,6 @@ export function buildDocsNav(): DocsNavSection[] { /* Reference content */ /* ──────────────────────────────────────────────────────────────────────── */ -/** One tab in a multi-language code snippet. */ -export interface CodeSample { - /** Stable key used as the snippet tab id. */ - key: string; - label: string; - lang: CodeLang; - code: string; -} - -/** Per-tier request ceilings rendered by the rate-limits section. */ -export interface RateLimit { - rpm: string; - burst: string; - concurrency: string; -} - -/** A single HTTP status row in the error table. */ -export interface ApiErrorRow { - code: string; - /** Severity colour — amber for recoverable, red for hard failures. */ - tone: "amber" | "red"; - meaning: string; -} - -export type SdkStatus = "ga" | "beta" | "deprecated"; - -/** An official client library in the SDK matrix. */ -export interface Sdk { - name: string; - /** Single-glyph icon shown beside the name. */ - icon: string; - install: string; - lang: CodeLang; - status: SdkStatus; -} - -/** An embeddable UI component in the drop-in viewer library. */ -export interface EmbedComponent { - name: string; - blurb: string; - /** Stack tag, e.g. "React" or "Web". */ - tag: string; -} - -/** A copy-paste, end-to-end pipeline recipe. */ -export interface Playbook { - title: string; - blurb: string; - /** Ordered stages rendered as a chip flow. */ - steps: string[]; - accent: CardAccent; -} - -/** A bundled, named agent capability — a deterministic op chain. */ -export interface AgentSkill { - name: string; - blurb: string; - /** Op chain shown as a mono string, e.g. "extract · validate". */ - ops: string; -} - -/** The complete data-driven docs payload for one tier. */ -export interface DocsContent { - quickstartSamples: CodeSample[]; - quickstartResponse: string; - rateLimit: RateLimit; - errors: ApiErrorRow[]; - sdks: Sdk[]; - components: EmbedComponent[]; - playbooks: Playbook[]; - skills: AgentSkill[]; -} - const QUICKSTART_SAMPLES: CodeSample[] = [ { key: "curl", diff --git a/frontend/editor/src/portal/mocks/documents.ts b/frontend/editor/src/portal/mocks/documents.ts index b4b7fe2325..02615280bf 100644 --- a/frontend/editor/src/portal/mocks/documents.ts +++ b/frontend/editor/src/portal/mocks/documents.ts @@ -11,136 +11,20 @@ */ import type { Tier } from "@portal/contexts/TierContext"; -import type { ChipAccent, StatusTone } from "@app/ui"; +import type { + DocAuditEvent, + DocAuditKind, + DocumentStatus, + DocumentsResponse, + DocumentsSummary, + ProductType, + ReviewDocument, +} from "@portal/api/documents"; /* ──────────────────────────────────────────────────────────────────────── */ /* Domain types */ /* ──────────────────────────────────────────────────────────────────────── */ -export type DocumentStatus = "processed" | "flagged" | "in-review" | "error"; - -/** Which Stirling product ran the operation. */ -export type ProductType = "API" | "Editor"; - -/** A single field pulled out of the document by extraction. */ -export interface Extraction { - field: string; - value: string; - confidence: number; -} - -export type DocAuditKind = - | "ingested" - | "extracted" - | "flagged" - | "reviewed" - | "approved" - | "archived" - | "elevation"; - -/** One event in a document's lifecycle, newest last. */ -export interface DocAuditEvent { - id: string; - kind: DocAuditKind; - time: string; - actor: string; - detail: string; -} - -export interface ReviewDocument { - id: string; - name: string; - /** File-type label, e.g. "PDF". */ - type: string; - /** Auto-classification label (e.g. "Contract"), or null when not classified. */ - classification: string | null; - /** True when the classification was assigned automatically. */ - auto: boolean; - /** Short descriptive sub-line (editor action or flag reason), or null. */ - note: string | null; - /** Where it was processed. */ - product: ProductType; - /** Pipeline/action, e.g. "contract". Null (or Editor product) renders "Editor". */ - action: string | null; - /** The user who ran it. */ - user: string; - status: DocumentStatus; - /** Reviewer name for in-review docs, e.g. "Sarah K.". */ - reviewer: string | null; - /** Originating source name. */ - source: string; - /** Overall confidence 0..1, or null (unsupported - never shown in the table). */ - confidence: number | null; - fieldsExtracted: number; - /** Relative-time string, e.g. "2 min ago". */ - time: string; - sensitive: boolean; - extractions: Extraction[]; - audit: DocAuditEvent[]; -} - -export interface DocumentsSummary { - totalInQueue: number; - processed: number; - errors: number; - processedToday: number; -} - -export interface DocumentsResponse { - summary: DocumentsSummary; - documents: ReviewDocument[]; -} - -/* ──────────────────────────────────────────────────────────────────────── */ -/* Presentation metadata (label + chip tone) */ -/* ──────────────────────────────────────────────────────────────────────── */ - -export const DOCUMENT_STATUS_LABEL: Record = { - processed: "Processed", - flagged: "Needs Review", - "in-review": "In Review", - error: "Error", -}; - -export const DOCUMENT_STATUS_TONE: Record = { - processed: "success", - flagged: "warning", - "in-review": "purple", - error: "danger", -}; - -export const PRODUCT_CHIP_TONE: Record = { - API: "brand", - Editor: "success", -}; - -/** Classification chip accent: danger when unclassified, warning when it needs a look. */ -export function classificationTone(doc: ReviewDocument): ChipAccent { - if (doc.classification === "Unclassified") return "danger"; - if (doc.status === "processed") return "success"; - return "warning"; -} - -export const DOC_AUDIT_LABEL: Record = { - ingested: "Ingested", - extracted: "Processed", - flagged: "Needs Review", - reviewed: "In Review", - approved: "Approved", - archived: "Archived", - elevation: "Elevation", -}; - -export const DOC_AUDIT_TONE: Record = { - ingested: "info", - extracted: "success", - flagged: "warning", - reviewed: "purple", - approved: "success", - archived: "neutral", - elevation: "purple", -}; - /* ──────────────────────────────────────────────────────────────────────── */ /* Fixture builder */ /* ──────────────────────────────────────────────────────────────────────── */ diff --git a/frontend/editor/src/portal/mocks/editorDeploy.ts b/frontend/editor/src/portal/mocks/editorDeploy.ts index 32d98432f2..04ba214f8e 100644 --- a/frontend/editor/src/portal/mocks/editorDeploy.ts +++ b/frontend/editor/src/portal/mocks/editorDeploy.ts @@ -13,143 +13,13 @@ */ import type { Tier } from "@portal/contexts/TierContext"; - -/* ──────────────────────────────────────────────────────────────────────── */ -/* Deployment targets */ -/* ──────────────────────────────────────────────────────────────────────── */ - -/** Where an Editor deployment can run. */ -export type TargetKind = "cloud" | "docker" | "kubernetes"; - -/** - * Whether a target is usable on the current tier and, if so, whether the org - * has actually stood it up. `locked` targets render an upgrade nudge instead of - * a runnable snippet. - */ -export type TargetState = "running" | "available" | "locked"; - -export interface DeploymentTarget { - kind: TargetKind; - label: string; - /** One-line positioning shown under the title. */ - tagline: string; - state: TargetState; - /** Minimum tier that unlocks this target — drives the upgrade nudge copy. */ - requiresTier: Tier; - /** Install / run snippet for the target's CodeBlock. */ - snippet: string; - /** Language hint for the CodeBlock chrome. */ - snippetLang: "bash" | "plain"; - /** Populated only when `state === "running"`. */ - runningVersion?: string; - /** Count of instances currently reporting in for this target. */ - instanceCount?: number; -} - -/* ──────────────────────────────────────────────────────────────────────── */ -/* Pairing */ -/* ──────────────────────────────────────────────────────────────────────── */ - -/** How a self-hosted editor connects itself to the org. */ -export type PairingMethod = "token" | "shortcode" | "iac"; - -export interface PairingOption { - method: PairingMethod; - label: string; - description: string; - /** Minimum tier that unlocks this method. */ - requiresTier: Tier; - /** - * The current secret/handle to display. A long-lived pairing token, a - * TV-style short code, or an IaC reference (e.g. a Terraform module input). - * Pre-masked for token display — never carries the real secret. - */ - value: string; - /** Short codes expire fast; tokens rotate on demand. Relative-time string. */ - expires?: string; - /** Whether this option is currently usable on the active tier. */ - locked: boolean; -} - -/* ──────────────────────────────────────────────────────────────────────── */ -/* Running instances (deployment health) */ -/* ──────────────────────────────────────────────────────────────────────── */ - -export type InstanceStatus = "healthy" | "degraded" | "offline" | "pairing"; - -export interface EditorInstance { - id: string; - /** Human host label, e.g. "edge-fra-01" or "Managed Cloud (us-east-1)". */ - host: string; - target: TargetKind; - version: string; - region: string; - status: InstanceStatus; - /** Relative-time string, e.g. "12s ago". */ - lastSeen: string; - activeUsers: number; -} - -/* ──────────────────────────────────────────────────────────────────────── */ -/* Summary metric strip */ -/* ──────────────────────────────────────────────────────────────────────── */ - -export interface DeploymentSummaryMetric { - label: string; - value: string | number; - delta?: number; - deltaDirection?: "up" | "down" | "flat"; - description?: string; -} - -export interface DeploymentSummary { - metrics: DeploymentSummaryMetric[]; - /** Masked service token + its rotation age, shown by the rotation card. */ - serviceToken: { masked: string; lastRotated: string }; - /** Air-gapped activation is enterprise-only; gate the card on this flag. */ - offlineActivationAvailable: boolean; - /** Where users launch the Editor — the org workspace URL (Open in browser). */ - workspaceUrl: string; -} - -export interface EditorDeploymentResponse { - summary: DeploymentSummary; - targets: DeploymentTarget[]; - pairings: PairingOption[]; - instances: EditorInstance[]; -} - -/* ──────────────────────────────────────────────────────────────────────── */ -/* Presentation metadata (lives client-side — product copy, not data) */ -/* ──────────────────────────────────────────────────────────────────────── */ - -export interface TargetMeta { - icon: string; - tone: "neutral" | "blue" | "purple"; -} - -export const TARGET_META: Record = { - cloud: { icon: "☁", tone: "blue" }, - docker: { icon: "▣", tone: "neutral" }, - kubernetes: { icon: "⎈", tone: "purple" }, -}; - -export const INSTANCE_STATUS_TONE: Record< - InstanceStatus, - "success" | "warning" | "danger" | "info" | "neutral" -> = { - healthy: "success", - degraded: "warning", - offline: "danger", - pairing: "info", -}; - -export const INSTANCE_STATUS_LABEL: Record = { - healthy: "Healthy", - degraded: "Degraded", - offline: "Offline", - pairing: "Pairing", -}; +import type { + DeploymentSummary, + DeploymentTarget, + EditorDeploymentResponse, + EditorInstance, + PairingOption, +} from "@portal/api/editorDeploy"; /* ──────────────────────────────────────────────────────────────────────── */ /* Snippet builders */ diff --git a/frontend/editor/src/portal/mocks/handlers/index.ts b/frontend/editor/src/portal/mocks/handlers/index.ts index 0ce3059ff6..8d2139a0b8 100644 --- a/frontend/editor/src/portal/mocks/handlers/index.ts +++ b/frontend/editor/src/portal/mocks/handlers/index.ts @@ -38,32 +38,5 @@ export const handlers = [ ...linkHandlers, ]; -/** - * The handlers safe to run when the portal shares an origin with the editor. - * Three groups are excluded because their routes overlap endpoints the editor - * itself calls, so mocking them breaks the host app: - * - authHandlers: /api/v1/auth/*, /api/v1/proprietary/ui-data/login (logs the - * editor out; the portal uses the editor's real session instead) - * - policiesHandlers + pipelinesHandlers: both /api/v1/policies* (the editor's - * own policies feature) - * Everything kept is portal-only. `handlers` above is still the full set. - */ -export const embeddedDataHandlers = [ - ...notificationsHandlers, - ...assistantHandlers, - ...searchHandlers, - ...sourcesHandlers, - ...infrastructureHandlers, - ...docsHandlers, - ...procurementHandlers, - ...settingsHandlers, - ...usersHandlers, - ...agentsHandlers, - ...documentsHandlers, - ...sdkComponentsHandlers, - ...editorDeployHandlers, - ...linkHandlers, -]; - export { resetNotificationsStore } from "@portal/mocks/handlers/notifications"; export { resetProcurementStore } from "@portal/mocks/handlers/procurement"; diff --git a/frontend/editor/src/portal/mocks/handlers/link.ts b/frontend/editor/src/portal/mocks/handlers/link.ts index 6ac6781f71..1724ce375f 100644 --- a/frontend/editor/src/portal/mocks/handlers/link.ts +++ b/frontend/editor/src/portal/mocks/handlers/link.ts @@ -1,4 +1,5 @@ import { http, HttpResponse, delay } from "msw"; +import type { LinkInstanceRequest } from "@portal/api/link"; import { getLocalStatus, getLocalUsage, @@ -6,7 +7,6 @@ import { listInstances, revokeInstance, unlinkLocal, - type LinkInstanceRequest, } from "@portal/mocks/link"; /** diff --git a/frontend/editor/src/portal/mocks/handlers/notifications.ts b/frontend/editor/src/portal/mocks/handlers/notifications.ts index e9c809ac52..e3977f543a 100644 --- a/frontend/editor/src/portal/mocks/handlers/notifications.ts +++ b/frontend/editor/src/portal/mocks/handlers/notifications.ts @@ -1,5 +1,6 @@ import { http, HttpResponse, delay } from "msw"; -import { NOTIFICATIONS, type Notification } from "@portal/mocks/notifications"; +import type { Notification } from "@portal/api/notifications"; +import { NOTIFICATIONS } from "@portal/mocks/notifications"; let store: Notification[] = [...NOTIFICATIONS]; diff --git a/frontend/editor/src/portal/mocks/handlers/policies.ts b/frontend/editor/src/portal/mocks/handlers/policies.ts index 8d35ae4535..16bc0933e6 100644 --- a/frontend/editor/src/portal/mocks/handlers/policies.ts +++ b/frontend/editor/src/portal/mocks/handlers/policies.ts @@ -1,10 +1,6 @@ import { http, HttpResponse, delay } from "msw"; -import { - seedPolicies, - seedPolicyRuns, - type WirePolicy, -} from "@portal/mocks/policies"; -import type { PolicyRunView } from "@app/policies/types"; +import { seedPolicies, seedPolicyRuns } from "@portal/mocks/policies"; +import type { PolicyRunView, WirePolicy } from "@app/policies/types"; /** * The portal exercises the REAL policy API base — `/api/v1/policies`, NOT the diff --git a/frontend/editor/src/portal/mocks/handlers/procurement.ts b/frontend/editor/src/portal/mocks/handlers/procurement.ts index e0e6f497c2..37dbc2f75a 100644 --- a/frontend/editor/src/portal/mocks/handlers/procurement.ts +++ b/frontend/editor/src/portal/mocks/handlers/procurement.ts @@ -2,10 +2,12 @@ import { http, HttpResponse, delay } from "msw"; import type { Tier } from "@portal/contexts/TierContext"; import { JOURNEY, - buildProcurement, - seedEnterpriseDeal, type DealStage, type ProcurementResponse, +} from "@portal/api/procurement"; +import { + buildProcurement, + seedEnterpriseDeal, } from "@portal/mocks/procurement"; import { advanceDeal, diff --git a/frontend/editor/src/portal/mocks/infrastructure.ts b/frontend/editor/src/portal/mocks/infrastructure.ts index 5b33e324fb..85aac3eeea 100644 --- a/frontend/editor/src/portal/mocks/infrastructure.ts +++ b/frontend/editor/src/portal/mocks/infrastructure.ts @@ -13,45 +13,29 @@ */ import type { Tier } from "@portal/contexts/TierContext"; +import type { + ApiKey, + AuditEvent, + AuditLogResponse, + AuditSummary, + ComplianceAttestation, + ComplianceCert, + DeploymentRegion, + IpAllowEntry, + KeyManagement, + ModelEntry, + ModelsResponse, + RecentDeployment, + RoutingRule, + SecurityConfig, + StorageConfig, + StorageProvider, +} from "@portal/api/infrastructure"; /* ──────────────────────────────────────────────────────────────────────── */ /* Deployments */ /* ──────────────────────────────────────────────────────────────────────── */ -export type RegionStatus = "healthy" | "degraded" | "down"; - -export interface DeploymentRegion { - name: string; - code: string; - /** Median request latency, ms. */ - latencyMs: number; - /** Current load as a fraction of provisioned capacity (0–1). */ - load: number; - status: RegionStatus; - /** Deployed Stirling engine version. */ - version: string; - /** 30-day uptime as a fraction (0–1). */ - uptime: number; - /** Running instance count. */ - instances: number; - /** Sustained throughput, docs/min. */ - throughput: number; - /** P99 latency, ms. */ - p99Ms: number; -} - -export type DeploymentStatus = "live" | "rolling" | "rolled-back" | "queued"; - -export interface RecentDeployment { - id: string; - version: string; - environment: "production" | "staging" | "canary"; - product: string; - status: DeploymentStatus; - deployedBy: string; - timestamp: string; -} - const REGION_US_EAST: DeploymentRegion = { name: "US East (N. Virginia)", code: "us-east-1", @@ -178,25 +162,6 @@ export function recentDeploymentsFor(tier: Tier): RecentDeployment[] { /* API Keys */ /* ──────────────────────────────────────────────────────────────────────── */ -export type ApiKeyStatus = "active" | "revoked" | "rotate-soon"; -export type ApiKeyPermission = "Read" | "Write" | "Admin"; - -export interface ApiKey { - id: string; - name: string; - /** Masked prefix shown in the list, e.g. "sk_live_a3f8…". */ - prefix: string; - created: string; - lastUsed: string; - status: ApiKeyStatus; - /** Requests/min ceiling. */ - rateLimit: number; - permissions: ApiKeyPermission[]; - allowedIps: string[]; - usageToday: number; - usageMonth: number; -} - const API_KEYS_ALL: ApiKey[] = [ { id: "key-1", @@ -262,77 +227,6 @@ export function apiKeysFor(tier: Tier): ApiKey[] { /* Security */ /* ──────────────────────────────────────────────────────────────────────── */ -export type AccessPolicy = "stirling" | "byok" | "hyok"; -export type DataResidency = "us" | "eu" | "apac"; -export type CertStatus = "certified" | "in-progress" | "not-started"; - -export interface ComplianceCert { - id: string; - name: string; - status: CertStatus; - detail: string; -} - -export interface IpAllowEntry { - id: string; - label: string; - cidr: string; - addedBy: string; - added: string; -} - -/** - * Where encryption keys live. Mirrors the {@link AccessPolicy} posture but is - * surfaced separately because the key *custody model* (who can decrypt) is the - * detail security teams scrutinise: - * - `managed` — Stirling-owned KMS keys; zero key ops on the customer side. - * - `byok` — customer key, but Stirling can use it to decrypt while processing. - * - `hyok` — key never leaves the customer KMS; Stirling holds only ciphertext. - */ -export type KeyMode = "managed" | "byok" | "hyok"; - -export interface KeyManagement { - mode: KeyMode; - /** Human-readable provider, e.g. "Stirling KMS" or "AWS KMS (customer)". */ - provider: string; - /** ARN-style identifier for the active key. */ - keyId: string; - /** Encryption algorithm in force. */ - algorithm: string; - /** Relative last-rotation time, e.g. "32 days ago". */ - lastRotated: string; - /** Rotation cadence summary, e.g. "Automatic · every 90 days". */ - rotationPolicy: string; - /** - * Whether the customer may switch key custody (BYOK/HYOK). Stirling-managed - * tiers see the posture but cannot change provider — only enterprise can. - */ - customerManaged: boolean; -} - -export type AttestationStatus = "attested" | "in-scope" | "not-applicable"; - -export interface ComplianceAttestation { - id: string; - name: string; - /** Framework family / short descriptor shown under the name. */ - framework: string; - status: AttestationStatus; - /** Coverage or audit detail, e.g. "Type II · audited Apr 2026". */ - detail: string; - /** Stub link to the downloadable report; null when none is available. */ - reportUrl: string | null; -} - -export interface SecurityConfig { - accessPolicy: AccessPolicy; - dataResidency: DataResidency; - certs: ComplianceCert[]; - ipAllowlist: IpAllowEntry[]; - keyManagement: KeyManagement; - attestations: ComplianceAttestation[]; -} - const CERTS_FULL: ComplianceCert[] = [ { id: "soc2", @@ -559,26 +453,6 @@ export function securityFor(tier: Tier): SecurityConfig { /* Storage */ /* ──────────────────────────────────────────────────────────────────────── */ -export type RetentionWindow = "30" | "60" | "90" | "180" | "never"; - -export interface StorageProvider { - id: string; - name: string; - kind: "stirling" | "s3" | "azure"; - connected: boolean; - detail: string; - usedGb: number; -} - -export interface StorageConfig { - /** Total used storage, GB. */ - usedGb: number; - /** Quota ceiling, GB. */ - quotaGb: number; - retention: RetentionWindow; - providers: StorageProvider[]; -} - const PROVIDERS_FULL: StorageProvider[] = [ { id: "stirling", @@ -635,26 +509,6 @@ export function storageFor(tier: Tier): StorageConfig { /* Audit Logs */ /* ──────────────────────────────────────────────────────────────────────── */ -export type AuditCategory = - | "auth" - | "config" - | "elevation" - | "processing" - | "security"; - -export type AuditStatus = "success" | "warning" | "danger" | "info"; - -export interface AuditEvent { - id: string; - timestamp: string; - category: AuditCategory; - action: string; - actor: string; - target: string; - status: AuditStatus; - latencyMs: number; -} - // Mirrors what the real backend (PortalInfraAuditService) returns: audit_events // mapped from real AuditEventType values to the tab's categories. Only real // types appear - there is no audited "elevation" event, so that category is @@ -842,77 +696,10 @@ const AUDIT_EVENTS_ALL: AuditEvent[] = [ }, ]; -export interface AuditSummary { - totalEvents: number; - processing: number; - elevation: number; - config: number; -} - -export interface AuditLogResponse { - summary: AuditSummary; - events: AuditEvent[]; - /** True for the whole-server (admin) view; gates the admin-only CSV export. */ - fullServer: boolean; -} - /* ──────────────────────────────────────────────────────────────────────── */ /* Models */ /* ──────────────────────────────────────────────────────────────────────── */ -export type ModelProvider = "stirling" | "openai" | "anthropic" | "on-prem"; -export type ModelType = "extraction" | "classification" | "ocr" | "llm"; -export type ModelStatus = "active" | "degraded" | "disabled"; - -/** Whether a model's cost is billed per 1k documents or per individual call. */ -export type ModelCostUnit = "per-1k-docs" | "per-call"; - -export interface ModelEntry { - id: string; - name: string; - provider: ModelProvider; - type: ModelType; - status: ModelStatus; - /** Median inference latency, ms. */ - latencyMs: number; - /** Cost in USD for the model's billing unit (see {@link costUnit}). */ - cost: number; - costUnit: ModelCostUnit; - version: string; - /** Share of capacity this model is currently absorbing (0–1). */ - load: number; - /** True for customer-registered bring-your-own / on-prem models. */ - managed: boolean; -} - -/** A binding from a processing operation (optionally a doc-type) to a model. */ -export interface RoutingRule { - id: string; - /** The operation or pipeline stage this rule governs. */ - operation: string; - /** Doc-type scope, or "All document types" for a catch-all. */ - docType: string; - /** id of the {@link ModelEntry} this operation routes to. */ - modelId: string; - modelName: string; - /** Marks the fallback rule applied when no narrower rule matches. */ - isDefault: boolean; -} - -export interface ModelsSummary { - activeModels: number; - /** Capacity-weighted average latency across active models, ms. */ - avgLatencyMs: number; - /** Projected monthly model spend, USD. */ - monthlySpend: number; -} - -export interface ModelsResponse { - summary: ModelsSummary; - models: ModelEntry[]; - routing: RoutingRule[]; -} - const MODELS_ALL: ModelEntry[] = [ { id: "m-extract-v3", diff --git a/frontend/editor/src/portal/mocks/link.ts b/frontend/editor/src/portal/mocks/link.ts index 0dd11e104c..92b4b90f2c 100644 --- a/frontend/editor/src/portal/mocks/link.ts +++ b/frontend/editor/src/portal/mocks/link.ts @@ -1,5 +1,6 @@ /** - * Account-link fixtures and the types api/link.ts shares with them. + * Account-link fixtures. Types live in api/link.ts (the backend contract); + * this module only builds fake data for Storybook and tests. * * "Mode A" combined billing: a self-hosted instance links the org's SaaS account * so its unattended calls bill against the org wallet. Two surfaces: @@ -11,61 +12,17 @@ * - TEAM-WIDE management: the SaaS backend (`GET /instances`, * `POST /instances/{id}/revoke`), called with the admin's JWT. * - * api/link.ts imports the types; the MSW handlers in mocks/handlers/link.ts serve - * this fixture data over the intercepted apiClient.local.json() calls. Components never reach - * into this module directly. Once the real backend is wired the handlers stop - * being registered and these fixtures can be deleted (or kept as test seeds). + * The MSW handlers in mocks/handlers/link.ts serve this fixture data over the + * intercepted apiClient.local.json() calls. Components never reach into this + * module directly. Once the real backend is wired the handlers stop being + * registered and these fixtures can be deleted (or kept as test seeds). */ -/* ──────────────────────────────────────────────────────────────────────── */ -/* Local backend — link / status / unlink (this instance) */ -/* ──────────────────────────────────────────────────────────────────────── */ - -/** Body for POST /api/v1/account-link/link — the SaaS JWT + optional name. */ -export interface LinkInstanceRequest { - /** Admin's SaaS session JWT, obtained via the hosted-login popup. */ - supabaseJwt: string; - /** Optional label for this instance. */ - name?: string; -} - -/** Link status for this instance (GET /api/v1/account-link/status). */ -export interface LinkStatus { - linked: boolean; - /** Display name the local backend stored at link time; null when unset. */ - name: string | null; -} - -/** - * Locally-accrued usage not yet reported to SaaS (GET /api/v1/account-link/usage). - * The portal adds this on top of the SaaS-synced spend so "current usage" - * includes work done since the last daily sync. Per-category unsynced units for - * the current period; all zero when metering is off or nothing is pending. - */ -export interface LocalUsage { - /** ISO timestamp of the current period start; null when unknown (not yet synced). */ - periodStart: string | null; - apiUnsyncedUnits: number; - aiUnsyncedUnits: number; - automationUnsyncedUnits: number; - totalUnsyncedUnits: number; -} - -/* ──────────────────────────────────────────────────────────────────────── */ -/* SaaS backend — team-wide instance management */ -/* ──────────────────────────────────────────────────────────────────────── */ - -/** A linked instance row (GET /api/v1/account-link/instances). */ -export interface LinkedInstanceRow { - instanceId: number; - deviceId: string; - name: string | null; - /** ISO timestamp the instance was registered. */ - createdAt: string | null; - /** ISO timestamp the instance last presented its credential; null if never. */ - lastSeenAt: string | null; - revoked: boolean; -} +import type { + LinkStatus, + LinkedInstanceRow, + LocalUsage, +} from "@portal/api/link"; /* ──────────────────────────────────────────────────────────────────────── */ /* Mock store — link/unlink/revoke mutate this so the surface feels live */ diff --git a/frontend/editor/src/portal/mocks/notifications.ts b/frontend/editor/src/portal/mocks/notifications.ts index b267bbe34c..12f32470f9 100644 --- a/frontend/editor/src/portal/mocks/notifications.ts +++ b/frontend/editor/src/portal/mocks/notifications.ts @@ -1,21 +1,10 @@ -/** Mock notifications for the header dropdown. */ +/** + * Notification fixtures for the header dropdown. Types live in + * api/notifications.ts (the backend contract); this module only builds fake + * data for Storybook and tests. + */ -export type NotificationCategory = - | "pipeline" - | "deploy" - | "billing" - | "audit" - | "agent" - | "doc"; - -export interface Notification { - id: string; - category: NotificationCategory; - title: string; - description: string; - /** Relative-time string. */ - time: string; -} +import type { Notification } from "@portal/api/notifications"; export const NOTIFICATIONS: Notification[] = [ { diff --git a/frontend/editor/src/portal/mocks/policies.ts b/frontend/editor/src/portal/mocks/policies.ts index b06effe1e1..27d5dfeadb 100644 --- a/frontend/editor/src/portal/mocks/policies.ts +++ b/frontend/editor/src/portal/mocks/policies.ts @@ -1,362 +1,11 @@ /** - * Policies fixtures and the canonical TS model the portal shares with them. - * - * Wire types (`WirePolicy`, `WirePipelineStep`) come from the shared codec - * layer and match the backend record exactly. Catalogue and UI types - * (`PolicyCategory`, `PolicyConfigDef`, `PolicyState`, …) are portal-only: - * the backend has no "category" concept — `categoryId` rides in - * `output.options`. The catalogue assembles client-side in `api/policies.ts` - * from the decoded wire records + these static definitions. - * - * api/policies.ts re-exports everything; components never reach in here. + * Policies fixtures. The canonical TS model and the static catalogue + * definitions live in api/policies.ts (the backend contract); this module + * only builds seed data for the MSW handlers and tests. */ -import type { WirePipelineStep, WirePolicy } from "@app/policies/types"; -import type { PolicyRunView } from "@app/policies/types"; - -export type { - PolicyActivityItem, - PolicyDecodedState, - PolicyRunStatus, - PolicyRunView, - PolicyStats, - WireOutputOptions, - WireOutputSpec, - WirePipelineStep, - WirePolicy, -} from "@app/policies/types"; - -/* ──────────────────────────────────────────────────────────────────────── */ -/* Catalogue model — portal-specific (lifted from editor types/policies.ts) */ -/* ──────────────────────────────────────────────────────────────────────── */ - -export type PolicyStatus = "active" | "paused"; - -export type PolicyRowStatus = "active" | "paused" | "setup"; - -export type PolicyFieldType = "toggle" | "select" | "chips" | "text"; - -export interface PolicyField { - label: string; - key: string; - type: PolicyFieldType; - value: boolean | string | string[]; - options?: string[]; -} - -export interface PolicyCategory { - id: string; - label: string; - icon: string; - tone: "neutral" | "blue" | "purple" | "green" | "amber" | "red"; - desc: string; - providesClassification?: boolean; - comingSoon?: boolean; -} - -export interface PolicyConfigDef { - summary: string; - rules: string[]; - scopeLabel: string; - fields: PolicyField[]; - defaultOperations: WirePipelineStep[]; -} - -export interface PolicyState { - configured: boolean; - status: PolicyStatus; - sources: string[]; - scopeTypes: string[]; - reviewerEmail: string; - fieldValues: Record; - outputMode?: "new_file" | "new_version"; - outputName?: string; - outputNamePosition?: "prefix" | "suffix" | "auto-number"; - runOn?: "upload" | "export"; - maxRetries?: number; - retryDelayMinutes?: number; - backendId?: string; - isDefault?: boolean; -} - -export interface PolicySetupResult { - fieldValues: Record; - sources: string[]; - scopeTypes: string[]; - reviewerEmail: string; - outputMode: "new_file" | "new_version"; - outputName: string; - outputNamePosition: "prefix" | "suffix" | "auto-number"; - runOn: "upload" | "export"; - maxRetries: number; - retryDelayMinutes: number; - steps: WirePipelineStep[]; -} - -export interface DecoratedPolicy { - category: PolicyCategory; - config: PolicyConfigDef; - state: PolicyState; - steps: WirePipelineStep[]; - stats: import("@app/policies/types").PolicyStats; - activity: import("@app/policies/types").PolicyActivityItem[]; -} - -export interface PoliciesSummary { - active: number; - paused: number; - categories: number; - docsEnforced: number; -} - -export interface PoliciesResponse { - summary: PoliciesSummary; - catalogue: CatalogueEntry[]; -} - -export interface CatalogueEntry { - category: PolicyCategory; - config: PolicyConfigDef; - policy: DecoratedPolicy | null; -} - -/* ──────────────────────────────────────────────────────────────────────── */ -/* Tool → endpoint registry */ -/* ──────────────────────────────────────────────────────────────────────── */ - -export const TOOL_ENDPOINTS: Record = { - redact: "/api/v1/security/auto-redact", - sanitize: "/api/v1/security/sanitize-pdf", - watermark: "/api/v1/security/add-watermark", - ocr: "/api/v1/misc/ocr-pdf", - flatten: "/api/v1/misc/flatten", - compress: "/api/v1/misc/compress-pdf", -}; - -export const ENDPOINT_LABELS: Record = { - "/api/v1/security/auto-redact": "Redact PII", - "/api/v1/security/sanitize-pdf": "Remove JavaScript", - "/api/v1/security/add-watermark": "Watermark", - "/api/v1/misc/ocr-pdf": "OCR", - "/api/v1/misc/flatten": "Flatten", - "/api/v1/misc/compress-pdf": "Compress", -}; - -export function humanizeEndpoint(path: string): string { - if (ENDPOINT_LABELS[path]) return ENDPOINT_LABELS[path]; - const last = path.split("/").filter(Boolean).pop() ?? path; - return last - .replace(/-/g, " ") - .replace(/\b\w/g, (c) => c.toUpperCase()) - .trim(); -} - -/* ──────────────────────────────────────────────────────────────────────── */ -/* Catalogue definitions */ -/* ──────────────────────────────────────────────────────────────────────── */ - -const DEFAULT_PII_PATTERNS: string[] = [ - "\\b(?!000|666|9\\d{2})\\d{3}([- ])(?!00)\\d{2}\\1(?!0000)\\d{4}\\b", - "\\b(?:4\\d{12}(?:\\d{3})?|5[1-5]\\d{14}|3[47]\\d{13}|6(?:011|5\\d{2})\\d{12})\\b", -]; - -export const POLICY_CATEGORIES: PolicyCategory[] = [ - { - id: "ingestion", - label: "Ingestion", - icon: "layers", - tone: "blue", - desc: "Classify documents, extract structured data, enforce naming conventions, and normalize pages.", - providesClassification: true, - comingSoon: true, - }, - { - id: "security", - label: "Security", - icon: "shield", - tone: "purple", - desc: "Detect PII, redact, strip active content, and watermark documents.", - }, - { - id: "compliance", - label: "Compliance", - icon: "check", - tone: "amber", - desc: "Enforce HIPAA, GDPR, SOC 2, or FedRAMP requirements on every document.", - comingSoon: true, - }, - { - id: "routing", - label: "Routing", - icon: "route", - tone: "green", - desc: "Auto-route documents to the right team, folder, or system.", - comingSoon: true, - }, - { - id: "retention", - label: "Retention", - icon: "clock", - tone: "neutral", - desc: "Set how long documents are kept, when to archive, and when to delete.", - comingSoon: true, - }, -]; - -export const POLICY_CONFIG: Record = { - ingestion: { - summary: - "Classifies documents, extracts structured data, enforces naming, and normalizes pages.", - rules: ["Classify", "Extract", "Name", "Normalize"], - scopeLabel: "All documents", - defaultOperations: [ - { operation: TOOL_ENDPOINTS.ocr, parameters: {} }, - { operation: TOOL_ENDPOINTS.flatten, parameters: {} }, - ], - fields: [ - { - label: "Min confidence", - key: "minConfidence", - type: "select", - value: "80%", - options: ["60%", "70%", "80%", "90%", "95%"], - }, - { - label: "Below threshold", - key: "belowThreshold", - type: "select", - value: "Flag for review", - options: ["Flag for review", "Route to bucket", "Hold"], - }, - ], - }, - security: { - summary: - "Detects and redacts PII, strips active content (JavaScript), and watermarks documents.", - rules: ["Redact PII", "Remove JavaScript", "Watermark"], - scopeLabel: "All documents", - defaultOperations: [ - { - operation: TOOL_ENDPOINTS.redact, - parameters: { - mode: "automatic", - useRegex: true, - convertPDFToImage: true, - wordsToRedact: DEFAULT_PII_PATTERNS, - }, - }, - { - operation: TOOL_ENDPOINTS.sanitize, - parameters: { - removeJavaScript: true, - removeEmbeddedFiles: false, - removeMetadata: false, - removeLinks: false, - removeFonts: false, - }, - }, - { - operation: TOOL_ENDPOINTS.watermark, - // convertPDFToImage bakes the watermark in so it can't be stripped - parameters: { - convertPDFToImage: true, - }, - }, - ], - fields: [], - }, - compliance: { - summary: - "Validates documents against regulatory frameworks before they leave the system.", - rules: ["Framework scan", "Enforce action", "Audit trail"], - scopeLabel: "All documents", - defaultOperations: [ - { operation: TOOL_ENDPOINTS.sanitize, parameters: {} }, - { operation: TOOL_ENDPOINTS.flatten, parameters: {} }, - ], - fields: [ - { - label: "Frameworks", - key: "frameworks", - type: "chips", - value: ["HIPAA"], - options: ["HIPAA", "GDPR", "SOC 2", "FedRAMP", "PCI DSS", "ISO 27001"], - }, - { - label: "When non-compliant", - key: "onViolation", - type: "select", - value: "Flag for review", - options: [ - "Flag for review", - "Block export", - "Auto-redact PHI", - "Quarantine document", - ], - }, - { label: "Audit trail", key: "auditTrail", type: "toggle", value: true }, - { label: "Access log", key: "accessLog", type: "toggle", value: true }, - ], - }, - routing: { - summary: - "Routes documents to the right destination based on type and classification.", - rules: ["Auto-classify", "Route to folder", "Webhook notify"], - scopeLabel: "All documents", - defaultOperations: [{ operation: TOOL_ENDPOINTS.compress, parameters: {} }], - fields: [ - { - label: "Destination", - key: "destination", - type: "select", - value: "Documents", - options: ["Documents", "S3 bucket", "SharePoint", "Webhook"], - }, - { label: "Webhook URL", key: "webhookUrl", type: "text", value: "" }, - { label: "Notify on route", key: "notify", type: "toggle", value: false }, - ], - }, - retention: { - summary: - "Enforces how long documents are kept, when to archive, and when to delete.", - rules: ["Retention hold", "Auto-archive", "Deletion block"], - scopeLabel: "All documents", - defaultOperations: [{ operation: TOOL_ENDPOINTS.compress, parameters: {} }], - fields: [ - { - label: "Keep for", - key: "keepFor", - type: "select", - value: "7 years", - options: ["30 days", "1 year", "3 years", "7 years", "Indefinite"], - }, - { - label: "Archive after", - key: "archiveAfter", - type: "select", - value: "Never", - options: ["30 days", "90 days", "1 year", "Never"], - }, - { - label: "Immutable hold", - key: "immutableHold", - type: "toggle", - value: false, - }, - ], - }, -}; - -export const POLICY_DOC_TYPES: string[] = [ - "Contracts", - "Invoices", - "Tax documents", - "HR records", - "Insurance", - "Medical / PHI", - "Legal filings", - "Financial reports", -]; +import type { PolicyRunView, WirePolicy } from "@app/policies/types"; +import { POLICY_CONFIG } from "@portal/api/policies"; /* ──────────────────────────────────────────────────────────────────────── */ /* Seed data — real backend wire format */ diff --git a/frontend/editor/src/portal/mocks/preference.ts b/frontend/editor/src/portal/mocks/preference.ts deleted file mode 100644 index ebd134c7e9..0000000000 --- a/frontend/editor/src/portal/mocks/preference.ts +++ /dev/null @@ -1,31 +0,0 @@ -/// - -/** - * Lightweight preference helpers — pulled out of mocks/browser.ts so they - * don't drag MSW + every handler + every fixture into any chunk that just - * needs to *read* the user's choice. Loading the actual worker stays a - * dynamic import. - */ - -const STORAGE_KEY = "stirling.portal.mocks-enabled"; - -export function readMocksPreference(): boolean { - if (typeof window === "undefined") return false; - // An explicit user toggle (persisted) always wins. - const stored = window.localStorage.getItem(STORAGE_KEY); - if (stored === "true") return true; - if (stored === "false") return false; - // Build-time default: VITE_PORTAL_MOCKS forces mocks on/off. The single-origin - // proxy sets it false so the portal hits the real backend (otherwise the dev - // mock worker would seed a fake token over the shared real one). Falls back to - // on-in-dev, off-in-production. - const envDefault = import.meta.env.VITE_PORTAL_MOCKS; - if (envDefault === "true") return true; - if (envDefault === "false") return false; - return import.meta.env.DEV; -} - -export function writeMocksPreference(enabled: boolean): void { - if (typeof window === "undefined") return; - window.localStorage.setItem(STORAGE_KEY, String(enabled)); -} diff --git a/frontend/editor/src/portal/mocks/procurement.ts b/frontend/editor/src/portal/mocks/procurement.ts index 4faeefa491..1f3f5a1934 100644 --- a/frontend/editor/src/portal/mocks/procurement.ts +++ b/frontend/editor/src/portal/mocks/procurement.ts @@ -1,194 +1,21 @@ /** - * Procurement fixtures and the types api/procurement.ts shares with them. - * api/procurement.ts imports the types; the MSW handlers in - * mocks/handlers/procurement.ts serve this fixture data over the intercepted - * httpJson() calls. Components never reach into this module directly. + * Procurement fixtures. Types and the journey definition live in + * api/procurement.ts (the backend contract); this module only builds the fake + * deal data the MSW handlers in mocks/handlers/procurement.ts serve over the + * intercepted httpJson() calls, for Storybook and tests. * - * Procurement models the enterprise commercial journey, trial → quote → - * agreement → payment → implementation, plus the paperwork ledger that rides - * alongside it. The journey is enterprise-only; free/pro tiers receive a - * minimal locked payload the view renders as an upgrade prompt. - * - * Once a real commercial backend exists the MSW handlers stop being registered - * and these fixtures can be deleted (or kept as test seeds). + * The handlers serve Storybook and tests, so these fixtures stay in sync with + * the api contract for as long as those need them. */ import type { Tier } from "@portal/contexts/TierContext"; - -/* ──────────────────────────────────────────────────────────────────────── */ -/* Journey stages */ -/* ──────────────────────────────────────────────────────────────────────── */ - -/** - * The five-stage enterprise journey. The id is the contract value the backend - * advances; the labels below are the buyer-facing stage names (Agreement and - * Payment read more plainly than the internal `security` / `procurement`). - */ -export type DealStage = - | "trial" - | "quote" - | "security" - | "procurement" - | "active"; - -export interface JourneyStep { - stage: DealStage; - /** Buyer-facing stage name. */ - label: string; - /** One-line description of what happens at this stage. */ - blurb: string; - /** - * Label for the single action that advances this stage. The current stage - * surfaces its gating action; `active` is terminal (provisioning). - */ - gatingAction: string; -} - -/** Ordered journey definition, the stepper renders this verbatim. */ -export const JOURNEY: JourneyStep[] = [ - { - stage: "trial", - label: "Trial", - blurb: "Evaluate Stirling against your documents and workflows.", - gatingAction: "Build your quote", - }, - { - stage: "quote", - label: "Quote", - blurb: "Review committed-volume pricing and contract term.", - gatingAction: "Accept your quote", - }, - { - stage: "security", - label: "Agreement", - blurb: "One signature covers MSA, order form, EULA and DPA.", - gatingAction: "Review and sign your agreement", - }, - { - stage: "procurement", - label: "Payment", - blurb: "Pay by card, bank transfer, or against a purchase order.", - gatingAction: "Confirm payment", - }, - { - stage: "active", - label: "Implementation", - blurb: "Provision your workspace and run the go-live playbook.", - gatingAction: "Provisioning your workspace", - }, -]; - -/* ──────────────────────────────────────────────────────────────────────── */ -/* Deal header */ -/* ──────────────────────────────────────────────────────────────────────── */ - -export interface SolutionsEngineer { - name: string; - title: string; - email: string; -} - -export interface TrialInfo { - /** License key seeded for the evaluation. */ - key: string; - /** ISO date the trial began. */ - startedOn: string; - /** ISO date the trial expires. */ - endsOn: string; - /** Whole days remaining (derived in the fixture for a stable demo number). */ - daysLeft: number; - extensionsUsed: number; - maxExtensions: number; -} - -export interface QuoteInfo { - number: string; - /** Annual contract value, in USD. */ - amount: number; - /** Contract term, e.g. "12 months". */ - term: string; - /** ISO date the quote expires. */ - validUntil: string; -} - -export interface Deal { - company: string; - currentStage: DealStage; - engineer: SolutionsEngineer; - trial: TrialInfo; - quote: QuoteInfo; -} - -/* ──────────────────────────────────────────────────────────────────────── */ -/* Document ledger + supporting pool */ -/* ──────────────────────────────────────────────────────────────────────── */ - -/** - * Lifecycle of a single document. - * available: ready to grab now (download/sign/pay/upload as the action says) - * action: waiting on the buyer to act (the gating paperwork of a stage) - * pending: issued, awaiting the other side / a system step - * request: not generated yet; the buyer asks for it (some carry a fee) - * complete: done, kept for the record - */ -export type DocStatus = - | "available" - | "action" - | "pending" - | "request" - | "complete"; - -/** What pressing the document's button does. */ -export type DocAction = "download" | "sign" | "pay" | "upload" | "request"; - -export interface LedgerDoc { - id: string; - name: string; - /** Sub-line describing what the document is / what it covers. */ - sub: string; - status: DocStatus; - action: DocAction; - /** Buyer-skippable paperwork (e.g. paid onboarding). */ - optional?: boolean; - /** One-off fee in USD when the document/service is a paid add-on. */ - fee?: number; -} - -/** Document ledger grouped by the journey stage the paperwork belongs to. */ -export interface LedgerGroup { - stage: DealStage; - /** Buyer-facing stage name (matches JourneyStep.label). */ - label: string; - docs: LedgerDoc[]; -} - -/** Categories the stage-agnostic supporting pool is grouped under. */ -export type SupportingCategory = - | "security" - | "legal" - | "corporate" - | "procurement"; - -export interface SupportingGroup { - category: SupportingCategory; - label: string; - docs: LedgerDoc[]; -} - -/* ──────────────────────────────────────────────────────────────────────── */ -/* Full procurement payload */ -/* ──────────────────────────────────────────────────────────────────────── */ - -export interface ProcurementResponse { - tier: Tier; - /** True only for enterprise, gates the whole journey + ledger. */ - unlocked: boolean; - /** Present only when unlocked. */ - deal: Deal | null; - journey: JourneyStep[]; - ledger: LedgerGroup[]; - supporting: SupportingGroup[]; -} +import type { + Deal, + LedgerGroup, + ProcurementResponse, + SupportingGroup, +} from "@portal/api/procurement"; +import { JOURNEY } from "@portal/api/procurement"; /* ──────────────────────────────────────────────────────────────────────── */ /* Fixtures */ diff --git a/frontend/editor/src/portal/mocks/procurementMachine.ts b/frontend/editor/src/portal/mocks/procurementMachine.ts index 275b511b51..d889691e2b 100644 --- a/frontend/editor/src/portal/mocks/procurementMachine.ts +++ b/frontend/editor/src/portal/mocks/procurementMachine.ts @@ -17,7 +17,7 @@ import { type LedgerDoc, type LedgerGroup, type SupportingGroup, -} from "@portal/mocks/procurement"; +} from "@portal/api/procurement"; export interface ProcurementStore { deal: Deal; diff --git a/frontend/editor/src/portal/mocks/sdkComponents.ts b/frontend/editor/src/portal/mocks/sdkComponents.ts index aed16d2028..f86797637c 100644 --- a/frontend/editor/src/portal/mocks/sdkComponents.ts +++ b/frontend/editor/src/portal/mocks/sdkComponents.ts @@ -1,126 +1,24 @@ /** - * Components surface fixtures and the types api/sdkComponents.ts shares with them. + * Components surface fixtures. Types and presentation metadata live in + * api/sdkComponents.ts (the backend contract); this module only builds fake + * data for Storybook and tests. * * "Components" are embeddable React/Vue/Vanilla SDK widgets a developer drops * into their own product — a PDF Viewer, an E-Sign flow, an AI Review panel — * each metered per action (per render, per review, per signature). Every * component carries its npm package, maturity, supported frameworks, per-action * price, an install/usage snippet, and its key props. - * - * api/sdkComponents.ts imports the types; the MSW handlers serve the fixture - * data over the intercepted apiClient.local.json() calls. Components never reach into this - * module directly. Once a real backend exists the handlers stop being - * registered and these fixtures can be deleted (or kept as test seeds). */ +import { isUnlocked } from "@portal/api/sdkComponents"; +import type { + ComponentPricing, + ComponentsResponse, + ComponentsSummary, + SdkComponent, +} from "@portal/api/sdkComponents"; import type { Tier } from "@portal/contexts/TierContext"; -/* ──────────────────────────────────────────────────────────────────────── */ -/* Types */ -/* ──────────────────────────────────────────────────────────────────────── */ - -export type ComponentMaturity = "ga" | "beta"; - -export type Framework = "React" | "Vue" | "Vanilla"; - -/** The action a component bills against — surfaces in the price unit label. */ -export type BillingUnit = - | "render" - | "review" - | "approval" - | "signature" - | "check" - | "event" - | "session"; - -export interface ComponentProp { - name: string; - /** TypeScript-ish type expression, shown verbatim in the API table. */ - type: string; - required: boolean; - description: string; -} - -export interface ComponentPricing { - /** Price per billed action in USD. */ - pricePerAction: number; - unit: BillingUnit; - /** Free-tier monthly allowance before metering kicks in; 0 = none. */ - freeQuota: number; -} - -export interface SdkComponent { - id: string; - name: string; - /** Package suffix — full name is `@stirling/`. */ - package: string; - description: string; - maturity: ComponentMaturity; - frameworks: Framework[]; - pricing: ComponentPricing; - /** Install command (npm). */ - install: string; - /** Minimal usage snippet shown under the Code tab. */ - usage: string; - props: ComponentProp[]; - /** - * Embeds attributed to this component over the trailing 30 days — drives the - * per-card usage line. Zero for never-embedded components. - */ - embeds30d: number; - /** - * Tier at which the component becomes available. Components above the active - * tier render locked with an upgrade nudge. `pro` is the default floor. - */ - minTier: Tier; -} - -export interface ComponentsSummary { - /** Count of GA (production-ready) components available to the tier. */ - gaCount: number; - /** Count of Beta components available to the tier. */ - betaCount: number; - /** Total embeds across all components this month. */ - embedsThisMonth: number; - /** Month-to-date spend attributed to component actions, in USD. */ - spendThisMonth: number; -} - -export interface ComponentsResponse { - summary: ComponentsSummary; - components: SdkComponent[]; -} - -/* ──────────────────────────────────────────────────────────────────────── */ -/* Presentation metadata (client-side product copy, not data) */ -/* ──────────────────────────────────────────────────────────────────────── */ - -export interface MaturityMeta { - label: string; - tone: "success" | "info"; -} - -export const MATURITY_META: Record = { - ga: { label: "GA", tone: "success" }, - beta: { label: "Beta", tone: "info" }, -}; - -/** Human label for a billing unit, e.g. "render" → "/render". */ -export const BILLING_UNIT_LABEL: Record = { - render: "render", - review: "review", - approval: "approval", - signature: "signature", - check: "check", - event: "event", - session: "session", -}; - -/** Format a price as the per-action string shown on cards, e.g. "$0.04 / review". */ -export function formatPrice(pricing: ComponentPricing): string { - return `$${pricing.pricePerAction.toFixed(2)} / ${BILLING_UNIT_LABEL[pricing.unit]}`; -} - /* ──────────────────────────────────────────────────────────────────────── */ /* Fixtures */ /* ──────────────────────────────────────────────────────────────────────── */ @@ -463,8 +361,6 @@ export function MergeButton({ files }: { files: File[] }) { /* Tier shaping */ /* ──────────────────────────────────────────────────────────────────────── */ -const TIER_RANK: Record = { free: 0, pro: 1, enterprise: 2 }; - /** * Enterprise negotiates volume pricing — renders and reviews come in cheaper. * Applied as a flat per-tier multiplier so the catalogue stays single-sourced. @@ -486,11 +382,6 @@ export function componentsFor(tier: Tier): SdkComponent[] { return CATALOGUE.map((c) => ({ ...c, pricing: priceFor(c, tier) })); } -/** Whether a component is usable at the given tier (vs locked/upgrade). */ -export function isUnlocked(component: SdkComponent, tier: Tier): boolean { - return TIER_RANK[tier] >= TIER_RANK[component.minTier]; -} - export function summaryFor(tier: Tier): ComponentsSummary { const components = componentsFor(tier); const unlocked = components.filter((c) => isUnlocked(c, tier)); diff --git a/frontend/editor/src/portal/mocks/search.ts b/frontend/editor/src/portal/mocks/search.ts index f8c5990c7f..86d332de70 100644 --- a/frontend/editor/src/portal/mocks/search.ts +++ b/frontend/editor/src/portal/mocks/search.ts @@ -1,11 +1,10 @@ -/** Mock quick-action catalogue for the ⌘K search palette. */ +/** + * Mock quick-action catalogue for the ⌘K search palette. The QuickAction type + * lives in api/search.ts (the backend contract); this module only builds fake + * data for Storybook and tests. + */ -export interface QuickAction { - group: "Jump to" | "Create" | "Theme"; - label: string; - /** Keyboard hint shown to the right. */ - hint: string; -} +import type { QuickAction } from "@portal/api/search"; export const QUICK_ACTIONS: QuickAction[] = [ { group: "Jump to", label: "Home", hint: "G H" }, diff --git a/frontend/editor/src/portal/mocks/settings.ts b/frontend/editor/src/portal/mocks/settings.ts index 99bcf313cb..59cceb17d8 100644 --- a/frontend/editor/src/portal/mocks/settings.ts +++ b/frontend/editor/src/portal/mocks/settings.ts @@ -1,88 +1,22 @@ /** - * Account-settings fixtures and the types api/settings.ts shares with them. - * api/settings.ts imports the types; the MSW handlers in mocks/handlers/ serve - * the fixture data over the intercepted apiClient.local.json() call. Components never reach - * into this module directly. + * Account-settings fixtures. Types live in api/settings.ts (the backend + * contract); this module only builds fake data for Storybook and tests. * * The shape is tier-aware: the workspace plan label, available regions, and * data-residency posture differ by tier, so the modal reflects what each plan * can actually configure. */ +import type { + ActiveSession, + BetaFeature, + NotificationDefault, + RegionOption, + SecuritySettings, + SettingsSnapshot, +} from "@portal/api/settings"; import type { Tier } from "@portal/contexts/TierContext"; -export interface RegionOption { - value: string; - label: string; - /** Enterprise-only residency regions are gated below higher tiers. */ - enterpriseOnly?: boolean; -} - -export interface NotificationDefault { - id: string; - enabled: boolean; -} - -/** A device/browser with an active session, shown under Admin → Security. */ -export interface ActiveSession { - id: string; - device: string; - location: string; - lastActive: string; - /** The session viewing this modal — can't be revoked from here. */ - current: boolean; -} - -/** - * Org-wide authentication posture. SSO/SCIM are enterprise capabilities; lower - * tiers see them as locked rows with an upgrade nudge. - */ -export interface SecuritySettings { - mfaEnforced: boolean; - ssoEnabled: boolean; - scimEnabled: boolean; - /** Idle timeout before re-auth, in minutes. */ - sessionTimeoutMins: number; - activeSessions: ActiveSession[]; -} - -/** An opt-in early-access feature flag. */ -export interface BetaFeature { - id: string; - label: string; - description: string; - enabled: boolean; - /** Gated to enterprise — rendered locked below it. */ - enterpriseOnly?: boolean; -} - -/** - * Server snapshot of the account + workspace the modal opens onto. Editable - * fields seed local form state; `planLabel` / `seats` are read-only context. - */ -export interface SettingsSnapshot { - profile: { - name: string; - email: string; - role: string; - /** Avatar image URL, or null to fall back to initials. */ - avatarUrl: string | null; - }; - workspace: { - name: string; - region: string; - planLabel: string; - seats: { used: number; total: number }; - }; - /** Per-category notification toggles, server-default on/off. */ - notifications: NotificationDefault[]; - regions: RegionOption[]; - /** Org-wide authentication + session posture (Admin scope). */ - security: SecuritySettings; - /** Opt-in early-access features (Admin scope). */ - betaFeatures: BetaFeature[]; -} - const REGIONS: RegionOption[] = [ { value: "us-east-1", label: "US East (N. Virginia)" }, { value: "us-west-2", label: "US West (Oregon)" }, diff --git a/frontend/editor/src/portal/mocks/startIfEnabled.ts b/frontend/editor/src/portal/mocks/startIfEnabled.ts deleted file mode 100644 index 74ffe5b386..0000000000 --- a/frontend/editor/src/portal/mocks/startIfEnabled.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { readMocksPreference } from "@portal/mocks/preference"; - -/** - * Start the portal's MSW worker if the mocks preference is on. Await this before - * rendering PortalApp so the worker is registered before the first data fetch. - * The dynamic import keeps MSW and its fixtures out of chunks that don't run it. - */ -export async function startPortalMocksIfEnabled(): Promise { - if (!readMocksPreference()) return; - const { startMockWorker } = await import("@portal/mocks/browser"); - await startMockWorker(); -} diff --git a/frontend/editor/src/portal/mocks/users.ts b/frontend/editor/src/portal/mocks/users.ts index 95b2e2f25c..030a9046a7 100644 --- a/frontend/editor/src/portal/mocks/users.ts +++ b/frontend/editor/src/portal/mocks/users.ts @@ -13,221 +13,18 @@ */ import type { Tier } from "@portal/contexts/TierContext"; +import type { + AccessControls, + Member, + UsersResponse, + UsersSummary, +} from "@portal/api/users"; +import { ROLES } from "@portal/api/users"; /* ──────────────────────────────────────────────────────────────────────── */ /* Roles & members */ /* ──────────────────────────────────────────────────────────────────────── */ -/** The four org roles, most → least privileged, mapped onto the backend's - * authorities + team leadership. Order drives the role select and grid. */ -export type RoleId = "admin" | "team_owner" | "member" | "guest"; - -export type MemberStatus = "active" | "invited" | "suspended"; - -/** - * Effective portal (processor) access for a member: - * admin — implicit, admins always have it - * role — implicit via team-owner leadership (default policy) - * team — inherited from a PORTAL grant on the member's whole team - * granted — explicit per-user PORTAL grant - * none — no access - */ -export type PortalAccessState = "admin" | "role" | "team" | "granted" | "none"; - -export const PORTAL_ACCESS_TONE: Record< - PortalAccessState, - "success" | "info" | "neutral" | "warning" -> = { - admin: "info", - role: "info", - team: "info", - granted: "success", - none: "neutral", -}; - -export interface Member { - id: string; - name: string; - email: string; - role: RoleId; - status: MemberStatus; - /** Effective portal access; set by the view from the grant list. */ - portalAccess?: PortalAccessState; - /** Authoritative server-side portal access (roster DTO); drives whether a chip shows at all. */ - canAccessPortal?: boolean; - /** The explicit PORTAL grant's id, for revoke (present when access = granted). */ - portalGrantId?: number; - /** Relative-time string, e.g. "4m ago". Invited members read "—". */ - lastActive: string; - /** Optional avatar image; falls back to initials when absent. */ - avatarUrl?: string; - /** Backend linkage for row actions (absent on pure fixtures). */ - username?: string; - teamId?: number; - teamName?: string; - /** Holds a LEADER membership on their team (independent of displayed role). */ - teamLead?: boolean; - /** The signed-in admin's own row; self-directed actions are disabled. */ - isSelf?: boolean; - /** Account locked after failed logins (admin can unlock). */ - locked?: boolean; - /** MFA enrolled (admin can reset it). */ - mfaEnabled?: boolean; - /** Auth provider: "web" (password), "oauth2", "saml2", etc. */ - authType?: string; - /** Raw stored authority (e.g. ROLE_USER, ROLE_WEB_ONLY_USER); preserved on team moves. */ - authority?: string; -} - -export interface Role { - id: RoleId; - label: string; - /** One-line summary of what the role can do. */ - summary: string; - /** Concrete permission bullets shown in the reference grid. */ - permissions: string[]; - tone: "purple" | "blue" | "green" | "amber" | "neutral"; -} - -/* ──────────────────────────────────────────────────────────────────────── */ -/* Access controls (tier-scoped) */ -/* ──────────────────────────────────────────────────────────────────────── */ - -/** - * Access posture for the org, shaped by tier. Free exposes only the seat limit - * and an upgrade nudge; pro adds session/MFA self-service; enterprise adds - * SSO/SAML, SCIM provisioning, enforced MFA and a session policy. Fields are - * optional so the panel renders whatever the tier returns. - */ -export interface AccessControls { - tier: Tier; - /** Seats consumed by active + invited members. */ - seatsUsed: number; - /** Total seats on the plan; null = unlimited (enterprise). */ - seatLimit: number | null; - /** Free only: copy for the upgrade nudge. */ - upgradeHint?: string; - /** Pro+: end-user MFA available (self-service, not enforced). */ - mfaAvailable?: boolean; - /** Enterprise: MFA enforced org-wide. */ - mfaEnforced?: boolean; - /** Pro+: idle session timeout, e.g. "30 days" / "12 hours". */ - sessionTimeout?: string; - /** Enterprise: SSO connection summary. */ - sso?: { - provider: string; - status: "connected" | "not_configured"; - /** Email domains that auto-route to SSO. */ - domains: string[]; - }; - /** Enterprise: SCIM directory provisioning. */ - scim?: { - enabled: boolean; - /** Where the directory syncs from, e.g. "Okta". */ - directory: string; - lastSync: string; - }; -} - -export interface UsersSummary { - totalMembers: number; - pendingInvites: number; - seatsUsed: number; - /** null = unlimited. */ - seatLimit: number | null; -} - -export interface UsersResponse { - summary: UsersSummary; - members: Member[]; - roles: Role[]; - access: AccessControls; - /** Whether SMTP is configured (gates emailing passwords/invites). */ - mailEnabled: boolean; - /** Whether email invites will work: SMTP on AND mail.enableInvites=true. Gates the - * "Invite by email" option on self-hosted. */ - emailInvitesEnabled: boolean; -} - -/* ──────────────────────────────────────────────────────────────────────── */ -/* Presentation metadata — product copy, lives client-side */ -/* ──────────────────────────────────────────────────────────────────────── */ - -export const MEMBER_STATUS_TONE: Record< - MemberStatus, - "success" | "warning" | "danger" | "neutral" | "info" -> = { - active: "success", - invited: "info", - suspended: "danger", -}; - -/* ──────────────────────────────────────────────────────────────────────── */ -/* Role catalogue */ -/* The same five roles exist on every tier — what varies is who can fill */ -/* them and how access is enforced, not the role definitions themselves. */ -/* ──────────────────────────────────────────────────────────────────────── */ - -export const ROLES: Role[] = [ - { - id: "admin", - label: "Admin (Org owner)", - summary: "Full governance over the workspace, settings and members.", - permissions: [ - "Manage users, teams and roles", - "Manage all integrations incl. S3 connections", - "Grant or revoke portal access", - "Everything Team Owner can do", - ], - tone: "purple", - }, - { - id: "team_owner", - label: "Team owner", - summary: "Owns a team — manages its members' resources and shared configs.", - permissions: [ - "Create & manage the team's S3 connections", - "Manage team-owned integration configs", - "Portal access via the default policy", - "Everything Member can do", - ], - tone: "blue", - }, - { - id: "member", - label: "Member", - summary: - "Regular user — works with shared resources and their own configs.", - permissions: [ - "Use the editor and shared integrations", - "Create personal API & MCP configs", - "See team configs shared with them", - "No S3 or workspace management", - ], - tone: "green", - }, - { - id: "guest", - label: "Guest", - summary: "Limited or web-only access; cannot hold personal configs.", - permissions: [ - "Web-only / demo usage", - "No API keys or integrations", - "No portal access", - "Read-only where shared", - ], - tone: "neutral", - }, -]; - -export const ROLE_LABEL: Record = Object.fromEntries( - ROLES.map((r) => [r.id, r.label]), -) as Record; - -export const ROLE_TONE: Record = Object.fromEntries( - ROLES.map((r) => [r.id, r.tone]), -) as Record; - /* ──────────────────────────────────────────────────────────────────────── */ /* Member fixtures */ /* ──────────────────────────────────────────────────────────────────────── */ diff --git a/frontend/editor/src/portal/vite-env.d.ts b/frontend/editor/src/portal/vite-env.d.ts index 91acc858f2..894d70ddb3 100644 --- a/frontend/editor/src/portal/vite-env.d.ts +++ b/frontend/editor/src/portal/vite-env.d.ts @@ -11,8 +11,6 @@ interface ImportMetaEnv { readonly VITE_STRIPE_PUBLISHABLE_KEY: string; /** URL of the editor app (app switcher + non-admin redirect). See editor/.env.proprietary. */ readonly VITE_EDITOR_URL: string; - /** Force MSW mocks on/off ("true"/"false"); empty falls back to dev default. */ - readonly VITE_PORTAL_MOCKS: string; } interface ImportMeta { diff --git a/frontend/editor/src/proprietary/components/policies/PolicySetupWizard.tsx b/frontend/editor/src/proprietary/components/policies/PolicySetupWizard.tsx index a2b361a86f..cffb02c28c 100644 --- a/frontend/editor/src/proprietary/components/policies/PolicySetupWizard.tsx +++ b/frontend/editor/src/proprietary/components/policies/PolicySetupWizard.tsx @@ -696,7 +696,7 @@ export function PolicySetupWizard({ : [...prev, dt], ) } - label={dt} + label={t(`policies.docType.${dt}`, dt)} /> ))}
diff --git a/frontend/editor/src/proprietary/routes/adminRouteExtensions.tsx b/frontend/editor/src/proprietary/routes/adminRouteExtensions.tsx index afb79c0a7f..7f60fbdd3b 100644 --- a/frontend/editor/src/proprietary/routes/adminRouteExtensions.tsx +++ b/frontend/editor/src/proprietary/routes/adminRouteExtensions.tsx @@ -9,16 +9,12 @@ import { PORTAL_BASENAME } from "@app/routes/portalBasename"; // GHA when the portal or AI layers change). Vite replaces the env with a literal at // build time, so when it's off the dynamic import below is tree-shaken out and the // portal chunk isn't emitted. PortalApp stays module-level so it isn't recreated on -// each render. Mocks start first so the worker is ready before the portal's first -// fetch. +// each render. const includePortal = import.meta.env.VITE_INCLUDE_PORTAL === "true" || import.meta.env.DEV; const PortalApp = includePortal ? lazy(async () => { - const { startPortalMocksIfEnabled } = - await import("@portal/mocks/startIfEnabled"); - await startPortalMocksIfEnabled(); const m = await import("@portal/PortalApp"); return { default: m.PortalApp }; }) From a5ee329c365397df7404ba3f01957f214c17ac16 Mon Sep 17 00:00:00 2001 From: James Brunton Date: Thu, 9 Jul 2026 16:43:38 +0100 Subject: [PATCH 3/5] Further improvements to policies file tracking (#6941) # Description of Changes Fixes requested in review of #6903 --- .../policy/ledger/ProcessedFileEntity.java | 11 +- .../saas/V32__policy_processed_files.sql | 6 + .../public/locales/en-US/translation.toml | 6 + .../components/policies/PolicyDetailPanel.tsx | 380 ++++++++++-------- 4 files changed, 233 insertions(+), 170 deletions(-) diff --git a/app/proprietary/src/main/java/stirling/software/proprietary/policy/ledger/ProcessedFileEntity.java b/app/proprietary/src/main/java/stirling/software/proprietary/policy/ledger/ProcessedFileEntity.java index b05c8b1eec..2e98025aff 100644 --- a/app/proprietary/src/main/java/stirling/software/proprietary/policy/ledger/ProcessedFileEntity.java +++ b/app/proprietary/src/main/java/stirling/software/proprietary/policy/ledger/ProcessedFileEntity.java @@ -10,6 +10,7 @@ import jakarta.persistence.EnumType; import jakarta.persistence.Enumerated; import jakarta.persistence.Id; import jakarta.persistence.IdClass; +import jakarta.persistence.Index; import jakarta.persistence.Table; import jakarta.persistence.Transient; @@ -25,7 +26,15 @@ import lombok.Setter; * violation rather than a silent merge. */ @Entity -@Table(name = "policy_processed_files") +@Table( + name = "policy_processed_files", + indexes = { + // presence cleanup: delete this policy's rows unseen since the sweep began + @Index(name = "idx_processed_files_policy_seen", columnList = "policy_id, last_seen"), + // cross-policy deletion consensus: existsByIdentityHashAndStatusNot filters + // identity_hash on its own, so it cannot ride the (policy_id, identity_hash) PK + @Index(name = "idx_processed_files_identity", columnList = "identity_hash") + }) @IdClass(ProcessedFileId.class) @NoArgsConstructor @Getter diff --git a/app/saas/src/main/resources/db/migration/saas/V32__policy_processed_files.sql b/app/saas/src/main/resources/db/migration/saas/V32__policy_processed_files.sql index f3a81de753..4be3fa07d8 100644 --- a/app/saas/src/main/resources/db/migration/saas/V32__policy_processed_files.sql +++ b/app/saas/src/main/resources/db/migration/saas/V32__policy_processed_files.sql @@ -28,3 +28,9 @@ CREATE TABLE IF NOT EXISTS policy_processed_files ( CREATE INDEX IF NOT EXISTS idx_processed_files_policy_seen ON policy_processed_files (policy_id, last_seen); + +-- The cross-policy deletion-consensus check (existsByIdentityHashAndStatusNot) filters identity_hash +-- alone, so it cannot use the (policy_id, identity_hash) primary key; it runs once per successfully +-- consumed file, so index it to avoid a full scan on the hot path. +CREATE INDEX IF NOT EXISTS idx_processed_files_identity + ON policy_processed_files (identity_hash); diff --git a/frontend/editor/public/locales/en-US/translation.toml b/frontend/editor/public/locales/en-US/translation.toml index 6228914b66..1cc2ad8ff1 100644 --- a/frontend/editor/public/locales/en-US/translation.toml +++ b/frontend/editor/public/locales/en-US/translation.toml @@ -7511,6 +7511,12 @@ pause = "Pause" resume = "Resume" runNow = "Run now" +[portal.policies.detail.clearHistory] +body = "This policy will forget every file it has already processed and reprocess everything currently in its sources on the next run. The files themselves are not changed. This cannot be undone." +cancel = "Cancel" +confirm = "Clear history" +title = "Clear processed history?" + [portal.policies.detail.emptyActivity] description = "Documents will appear here once this policy runs." title = "No activity yet" diff --git a/frontend/editor/src/portal/components/policies/PolicyDetailPanel.tsx b/frontend/editor/src/portal/components/policies/PolicyDetailPanel.tsx index f8da1226b0..e198fd92c8 100644 --- a/frontend/editor/src/portal/components/policies/PolicyDetailPanel.tsx +++ b/frontend/editor/src/portal/components/policies/PolicyDetailPanel.tsx @@ -111,6 +111,7 @@ export function PolicyDetailPanel({ onRetry, }: PolicyDetailPanelProps) { const { t } = useTranslation(); + const [confirmingClear, setConfirmingClear] = useState(false); if (!policy) return null; const { category, config, state, steps, stats, activity } = policy; const isPaused = state.status === "paused"; @@ -136,200 +137,241 @@ export function PolicyDetailPanel({ } return ( - - {canDelete && ( - - )} - {onRun && ( + <> + + {canDelete && ( + + )} + {onRun && ( + + )} + {canClearHistory && ( + + )} - )} - {canClearHistory && ( - - )} - +
+ } + > + {/* Status + trigger strip */} +
+ {isPaused - ? t("portal.policies.detail.actions.resume") - : t("portal.policies.detail.actions.pause")} - - + ? t("portal.policies.status.paused") + : t("portal.policies.status.active")} + + {hasEditorSource && ( + <> + + · + + {trigger} + + · + + + {outputLabel} + + + )}
- } - > - {/* Status + trigger strip */} -
- - {isPaused - ? t("portal.policies.status.paused") - : t("portal.policies.status.active")} - - {hasEditorSource && ( - <> - - · - - {trigger} - - · - - {outputLabel} - - )} -
- {/* Enforces — plain text, no pills */} -
- - {t("portal.policies.detail.enforces")} - - - {enforceItems - ? enforceItems.map((op, i) => ( - - {i > 0 && ( - - {" "} - →{" "} - - )} - {humanizeEndpoint(op, t)} - - )) - : config.rules.map((r) => t(r)).join(" · ")} - -
- - {/* Sources */} - {state.sources.length > 0 && ( + {/* Enforces — plain text, no pills */}
- {t("portal.policies.detail.sources")} + {t("portal.policies.detail.enforces")} - {state.sources.map(sourceLabel).join(" · ")} + {enforceItems + ? enforceItems.map((op, i) => ( + + {i > 0 && ( + + {" "} + →{" "} + + )} + {humanizeEndpoint(op, t)} + + )) + : config.rules.map((r) => t(r)).join(" · ")}
- )} -

- {t("portal.policies.detail.recentActivity")} -

+ {/* Sources */} + {state.sources.length > 0 && ( +
+ + {t("portal.policies.detail.sources")} + + + {state.sources.map(sourceLabel).join(" · ")} + +
+ )} - {activity.length > 0 ? ( - - {activity.map((item, i) => ( -
- + {t("portal.policies.detail.recentActivity")} + + + {activity.length > 0 ? ( + + {activity.map((item, i) => ( +
- {item.status === "flagged" ? ( - - ) : item.status === "processing" ? ( - - ) : ( - - )} - - - - {item.doc} - - + {item.status === "flagged" ? ( - + + ) : item.status === "processing" ? ( + ) : ( - item.action + )} - - - {item.time} - - {item.status === "flagged" && onRetry && ( - + + + {item.doc} + + + {item.status === "flagged" ? ( + + ) : ( + item.action + )} + + + + {item.time} + + {item.status === "flagged" && onRetry && ( + + )} +
+ ))} + + ) : ( + + - ))} - - ) : ( - - + + )} + + + + + - )} - - - - - - - + + setConfirmingClear(false)} + width="sm" + title={t("portal.policies.detail.clearHistory.title")} + footer={ +
+ + +
+ } + > + {t("portal.policies.detail.clearHistory.body")} + + ); } From ccfd22b2a926ddb7c62b700b8f9252c46c2aeb71 Mon Sep 17 00:00:00 2001 From: Reece Browne <74901996+reecebrowne@users.noreply.github.com> Date: Thu, 9 Jul 2026 17:35:30 +0100 Subject: [PATCH 4/5] port editor settings into portal (#6945) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The portal's `SettingsModal` was a parallel, mock-backed settings implementation. It's replaced by the editor's `AppConfigModal`, mounted via a new `PortalSettingsHost` that supplies the contexts the portal doesn't have (app config, flavor-resolved session, preferences, editor theme). Flavor resolution does the rest: the self-hosted portal gets the admin sections, the SaaS portal gets the saas shell. The self-hosted account-link panel rides in through the existing seam as an extra section. The shell gains three host props (`urlSync`, `initialSection`, `extraSections`); editor behaviour is unchanged. Net −1,300 lines. Manually verified on both flavors against live backends. --- .../public/locales/en-US/translation.toml | 111 --- frontend/editor/public/og-metadata.json | 8 +- .../core/components/shared/AppConfigModal.tsx | 59 +- .../components/shared/AppConfigModalLazy.tsx | 23 +- .../shared/config/configNavSections.tsx | 23 +- .../core/components/shared/config/types.ts | 22 + .../desktop/components/shared/config/types.ts | 19 + .../settings/accountLinkSettings.tsx | 6 +- frontend/editor/src/portal/api/settings.ts | 87 -- .../src/portal/components/PortalChrome.tsx | 16 +- .../portal/components/PortalSettingsHost.tsx | 84 ++ .../src/portal/components/SettingsModal.css | 255 ----- .../src/portal/components/SettingsModal.tsx | 902 ------------------ .../settings/accountLinkSettings.tsx | 20 +- .../editor/src/portal/mocks/handlers/index.ts | 2 - .../src/portal/mocks/handlers/settings.ts | 12 - frontend/editor/src/portal/mocks/settings.ts | 151 --- .../saas/components/shared/AppConfigModal.tsx | 45 +- .../saas/components/shared/config/types.ts | 19 + 19 files changed, 279 insertions(+), 1585 deletions(-) delete mode 100644 frontend/editor/src/portal/api/settings.ts create mode 100644 frontend/editor/src/portal/components/PortalSettingsHost.tsx delete mode 100644 frontend/editor/src/portal/components/SettingsModal.css delete mode 100644 frontend/editor/src/portal/components/SettingsModal.tsx delete mode 100644 frontend/editor/src/portal/mocks/handlers/settings.ts delete mode 100644 frontend/editor/src/portal/mocks/settings.ts diff --git a/frontend/editor/public/locales/en-US/translation.toml b/frontend/editor/public/locales/en-US/translation.toml index 1cc2ad8ff1..11193c3ed3 100644 --- a/frontend/editor/public/locales/en-US/translation.toml +++ b/frontend/editor/public/locales/en-US/translation.toml @@ -7913,122 +7913,11 @@ noActionsTitle = "No quick actions" noMatches = "No matches for \"{{query}}\"" noMatchesDescription = "Try a different keyword or browse the catalogue." -[portal.settings] -ariaLabel = "Settings" -cancel = "Cancel" -enterpriseBadge = "Enterprise" -footerNote = "Changes apply to this workspace." -saveChanges = "Save changes" - -[portal.settings.appearance] -themeSub = "Choose how the portal looks on this device." -themeTitle = "Theme" - -[portal.settings.appearance.dark] -hint = "Dim surfaces" -label = "Dark" - -[portal.settings.appearance.light] -hint = "Bright surfaces" -label = "Light" - -[portal.settings.authentication] -sessionTimeout = "Session timeout" -sessionTimeoutHelper = "Members re-authenticate after this idle period." -sub = "Organisation-wide authentication controls." -title = "Sign-in policy" - -[portal.settings.authentication.mfa] -description = "Require every member to complete MFA at sign-in." -label = "Enforce two-factor (MFA)" - -[portal.settings.authentication.scim] -description = "Sync members and roles from your directory." -label = "SCIM provisioning" - -[portal.settings.authentication.sso] -description = "Federate sign-in through your identity provider." -label = "Single sign-on (SAML)" - -[portal.settings.authentication.timeout] -1440 = "24 hours" -240 = "4 hours" -480 = "8 hours" -60 = "1 hour" -720 = "12 hours" - -[portal.settings.earlyAccess] -sub = "Opt into features still in preview." -title = "Preview features" - [portal.settings.groups] -account = "Account" admin = "Admin" -workspace = "Workspace" - -[portal.settings.notifications] -sub = "Pick which events reach your inbox." -title = "Email notifications" - -[portal.settings.notifications.pipeline-failures] -description = "A run errors out or a step times out." -label = "Pipeline failures" - -[portal.settings.notifications.pipeline-success] -description = "Every successful pipeline run finishes." -label = "Pipeline completions" - -[portal.settings.notifications.product-updates] -description = "New operations, sources, and release notes." -label = "Product updates" - -[portal.settings.notifications.security-alerts] -description = "New API keys, sign-ins, or permission changes." -label = "Security alerts" - -[portal.settings.notifications.usage-alerts] -description = "You approach a plan limit or rate cap." -label = "Usage & quota alerts" - -[portal.settings.notifications.weekly-digest] -description = "A Monday summary of volume and health." -label = "Weekly digest" - -[portal.settings.profile] -accountFallback = "Account" -changePhoto = "Change photo" -email = "Email" -emailHelper = "Used for sign-in and notification delivery." -emailPlaceholder = "you@company.com" -fullName = "Full name" -namePlaceholder = "Your name" [portal.settings.sections] account-link = "Account link" -appearance = "Appearance" -authentication = "Authentication" -early-access = "Early access" -general = "General" -notifications = "Notifications" -profile = "Profile" -sessions = "Active sessions" - -[portal.settings.sessions] -revoke = "Revoke" -sub = "Devices currently signed in to this account." -thisDevice = "This device" -title = "Active sessions" - -[portal.settings.workspace] -manageBilling = "Manage billing" -nameLabel = "Workspace name" -namePlaceholder = "Workspace name" -plan = "Plan" -regionEnterpriseSuffix = "{{region}} · Enterprise" -regionHelper = "Where documents are processed and stored at rest." -regionLabel = "Data residency region" -seats = "Seats" -seatsUsed = "{{used}} of {{total}} used" [portal.shell.header] accountFallback = "Account" diff --git a/frontend/editor/public/og-metadata.json b/frontend/editor/public/og-metadata.json index 65f1da789c..1fc552cd80 100644 --- a/frontend/editor/public/og-metadata.json +++ b/frontend/editor/public/og-metadata.json @@ -499,6 +499,11 @@ "image": "/og_images/home.png", "title": "Payg Settings - Stirling PDF", "description": "The Free Adobe Acrobat alternative (10M+ Downloads)" + }, + "/settings/account-link": { + "image": "/og_images/home.png", + "title": "Account Link Settings - Stirling PDF", + "description": "The Free Adobe Acrobat alternative (10M+ Downloads)" } }, "byPath": { @@ -653,6 +658,7 @@ "/settings/legal": "/settings/legal", "/settings/backendThirdPartyLicenses": "/settings/backendThirdPartyLicenses", "/settings/frontendThirdPartyLicenses": "/settings/frontendThirdPartyLicenses", - "/settings/payg": "/settings/payg" + "/settings/payg": "/settings/payg", + "/settings/account-link": "/settings/account-link" } } diff --git a/frontend/editor/src/core/components/shared/AppConfigModal.tsx b/frontend/editor/src/core/components/shared/AppConfigModal.tsx index 264db178ac..485403c512 100644 --- a/frontend/editor/src/core/components/shared/AppConfigModal.tsx +++ b/frontend/editor/src/core/components/shared/AppConfigModal.tsx @@ -11,7 +11,11 @@ import { useNavigate, useLocation } from "react-router-dom"; import { useTranslation } from "react-i18next"; import LocalIcon from "@app/components/shared/LocalIcon"; import { useConfigNavSections } from "@app/components/shared/config/configNavSections"; -import { NavKey, VALID_NAV_KEYS } from "@app/components/shared/config/types"; +import { + NavKey, + VALID_NAV_KEYS, + type ConfigNavSection, +} from "@app/components/shared/config/types"; import { useAppConfig } from "@app/contexts/AppConfigContext"; import { COOKIE_CONSENT_SCROLL_SHARD } from "@app/hooks/useCookieConsent"; import "@app/components/shared/AppConfigModal.css"; @@ -31,6 +35,18 @@ import { stripBasePath, withBasePath } from "@app/constants/app"; interface AppConfigModalProps { opened: boolean; onClose: () => void; + /** + * Mirror the active section to /settings/ URLs (deep links, history + * unwind on close). Hosts mounted away from the editor's /settings route — + * the admin portal — turn this off and the modal keeps its section purely in + * state. + */ + urlSync?: boolean; + /** Section to land on when opening. Only honoured when urlSync is off (URL + * deep links win otherwise). */ + initialSection?: NavKey | null; + /** Host-specific sections appended after the build's registry sections. */ + extraSections?: ConfigNavSection[]; } // Extract section from URL path (e.g., /settings/people -> people) @@ -46,12 +62,18 @@ const getSectionFromPath = (pathname: string): NavKey | null => { const AppConfigModalInner: React.FC = ({ opened, onClose, + urlSync = true, + initialSection, + extraSections, }) => { const { t } = useTranslation(); // Initialize from the URL so a deep link (`/settings/people`) lands on the // right tab without a one-frame "general" flicker. const [active, setActive] = useState( - () => getSectionFromPath(window.location.pathname) ?? "general", + () => + (urlSync ? getSectionFromPath(window.location.pathname) : null) ?? + initialSection ?? + "general", ); const isMobile = useIsMobile(); const navigate = useNavigate(); @@ -66,6 +88,7 @@ const AppConfigModalInner: React.FC = ({ // those update the URL via `history.replaceState` directly and never push // a new React Router location. useEffect(() => { + if (!urlSync) return; const section = getSectionFromPath(location.pathname); if (opened && section) { setActive(section); @@ -77,7 +100,14 @@ const AppConfigModalInner: React.FC = ({ // If at /settings without a section, redirect to general navigate("/settings/general", { replace: true }); } - }, [location.pathname, opened, navigate]); + }, [location.pathname, opened, navigate, urlSync]); + + // Non-URL hosts land the modal on the section they asked for. + useEffect(() => { + if (opened && !urlSync && initialSection) { + setActive(initialSection); + } + }, [opened, urlSync, initialSection]); useEffect(() => { if (opened) { @@ -99,6 +129,7 @@ const AppConfigModalInner: React.FC = ({ const switchSection = useCallback( (key: NavKey) => { setActive(key); + if (!urlSync) return; const alreadyInSettings = stripBasePath( window.location.pathname, ).startsWith("/settings"); @@ -112,7 +143,7 @@ const AppConfigModalInner: React.FC = ({ navigate(`/settings/${key}`); } }, - [navigate], + [navigate, urlSync], ); // Backwards-compat: external `appConfig:navigate` events route through the @@ -156,7 +187,7 @@ const AppConfigModalInner: React.FC = ({ // Only unwind history if settings was opened via the URL; opened via state // there's no /settings entry to pop and navigate(-1) would jump to /files. - if (location.pathname.startsWith("/settings")) { + if (urlSync && location.pathname.startsWith("/settings")) { // "default" key = first entry (deep link/refresh); nothing to pop to. if (location.key === "default") { navigate("/", { replace: true }); @@ -165,7 +196,14 @@ const AppConfigModalInner: React.FC = ({ } } onClose(); - }, [confirmIfDirty, location.key, location.pathname, navigate, onClose]); + }, [ + confirmIfDirty, + location.key, + location.pathname, + navigate, + onClose, + urlSync, + ]); // Synchronous wrapper for contexts (e.g. tour buttons) that need () => void const handleCloseSync = useCallback(() => { @@ -173,12 +211,19 @@ const AppConfigModalInner: React.FC = ({ }, [handleClose]); // Left navigation structure and icons - const configNavSections = useConfigNavSections( + const registrySections = useConfigNavSections( isAdmin, runningEE, loginEnabled, handleCloseSync, ); + const configNavSections = useMemo( + () => + extraSections?.length + ? [...registrySections, ...extraSections] + : registrySections, + [registrySections, extraSections], + ); const activeLabel = useMemo(() => { for (const section of configNavSections) { diff --git a/frontend/editor/src/core/components/shared/AppConfigModalLazy.tsx b/frontend/editor/src/core/components/shared/AppConfigModalLazy.tsx index d242db9a66..1ba57618f0 100644 --- a/frontend/editor/src/core/components/shared/AppConfigModalLazy.tsx +++ b/frontend/editor/src/core/components/shared/AppConfigModalLazy.tsx @@ -1,4 +1,8 @@ import { Suspense, lazy, useEffect, useState } from "react"; +import type { + ConfigNavSection, + NavKey, +} from "@app/components/shared/config/types"; // AppConfigModal pulls in the entire settings UI tree (admin sections, // account, supabase auth flows, etc.). We defer loading until the user first @@ -10,11 +14,20 @@ const AppConfigModal = lazy( interface AppConfigModalLazyProps { opened: boolean; onClose: () => void; + /** See AppConfigModal — off for hosts outside the /settings route. */ + urlSync?: boolean; + /** Section to land on when opening (non-URL hosts). */ + initialSection?: NavKey | null; + /** Host-specific sections appended after the build's registry sections. */ + extraSections?: ConfigNavSection[]; } export default function AppConfigModalLazy({ opened, onClose, + urlSync, + initialSection, + extraSections, }: AppConfigModalLazyProps) { const [shouldMount, setShouldMount] = useState(false); @@ -24,7 +37,15 @@ export default function AppConfigModalLazy({ return ( - {shouldMount && } + {shouldMount && ( + + )} ); } diff --git a/frontend/editor/src/core/components/shared/config/configNavSections.tsx b/frontend/editor/src/core/components/shared/config/configNavSections.tsx index db02ad8458..0c9515b68c 100644 --- a/frontend/editor/src/core/components/shared/config/configNavSections.tsx +++ b/frontend/editor/src/core/components/shared/config/configNavSections.tsx @@ -1,6 +1,5 @@ import React from "react"; import { useTranslation } from "react-i18next"; -import { NavKey } from "@app/components/shared/config/types"; import HotkeysSection from "@app/components/shared/config/configSections/HotkeysSection"; import GeneralSection from "@app/components/shared/config/configSections/GeneralSection"; import HelpSection from "@app/components/shared/config/configSections/HelpSection"; @@ -9,22 +8,14 @@ import { BackendThirdPartyLicensesSection, FrontendThirdPartyLicensesSection, } from "@app/components/shared/config/configSections/ThirdPartyLicensesSection"; +import type { + ConfigNavItem, + ConfigNavSection, +} from "@app/components/shared/config/types"; -export interface ConfigNavItem { - key: NavKey; - label: string; - icon: string; - component: React.ReactNode; - disabled?: boolean; - disabledTooltip?: string; - badge?: string; - badgeColor?: string; -} - -export interface ConfigNavSection { - title: string; - items: ConfigNavItem[]; -} +// Re-exported for the many existing importers; the definitions live in +// config/types so type-only consumers don't pull the section tree in. +export type { ConfigNavItem, ConfigNavSection }; export interface ConfigColors { navBg: string; diff --git a/frontend/editor/src/core/components/shared/config/types.ts b/frontend/editor/src/core/components/shared/config/types.ts index 9fa87fe915..5cbdd1b169 100644 --- a/frontend/editor/src/core/components/shared/config/types.ts +++ b/frontend/editor/src/core/components/shared/config/types.ts @@ -1,3 +1,5 @@ +import type React from "react"; + // Single source of truth for all valid nav keys export const VALID_NAV_KEYS = [ "preferences", @@ -35,9 +37,29 @@ export const VALID_NAV_KEYS = [ "backendThirdPartyLicenses", "frontendThirdPartyLicenses", "payg", + "account-link", ] as const; // Derive the type from the array export type NavKey = (typeof VALID_NAV_KEYS)[number]; // some of these are not used yet, but appear in figma designs + +// Nav structure of the settings modal. Lives here (not configNavSections) so +// consumers that only need the shape don't pull the whole section-component +// tree into their build's typecheck graph. +export interface ConfigNavItem { + key: NavKey; + label: string; + icon: string; + component: React.ReactNode; + disabled?: boolean; + disabledTooltip?: string; + badge?: string; + badgeColor?: string; +} + +export interface ConfigNavSection { + title: string; + items: ConfigNavItem[]; +} diff --git a/frontend/editor/src/desktop/components/shared/config/types.ts b/frontend/editor/src/desktop/components/shared/config/types.ts index a1ab108a1f..daae2b16bc 100644 --- a/frontend/editor/src/desktop/components/shared/config/types.ts +++ b/frontend/editor/src/desktop/components/shared/config/types.ts @@ -1,3 +1,4 @@ +import type React from "react"; import { VALID_NAV_KEYS as CORE_NAV_KEYS } from "@core/components/shared/config/types"; export const VALID_NAV_KEYS = [ @@ -7,3 +8,21 @@ export const VALID_NAV_KEYS = [ ] as const; export type NavKey = (typeof VALID_NAV_KEYS)[number]; + +// Mirrors the core shape over the widened desktop NavKey union — see the core +// module for why these live in types rather than configNavSections. +export interface ConfigNavItem { + key: NavKey; + label: string; + icon: string; + component: React.ReactNode; + disabled?: boolean; + disabledTooltip?: string; + badge?: string; + badgeColor?: string; +} + +export interface ConfigNavSection { + title: string; + items: ConfigNavItem[]; +} diff --git a/frontend/editor/src/portal-saas/components/settings/accountLinkSettings.tsx b/frontend/editor/src/portal-saas/components/settings/accountLinkSettings.tsx index 6fc0af735b..556cfe1863 100644 --- a/frontend/editor/src/portal-saas/components/settings/accountLinkSettings.tsx +++ b/frontend/editor/src/portal-saas/components/settings/accountLinkSettings.tsx @@ -2,8 +2,8 @@ import type { AccountLinkSettingsSeam } from "@portal-proprietary/components/set /** * SaaS has no account-link concept — the signed-in account IS the SaaS account. - * Null drops the "Account link" nav item and its panel from Settings (the shared - * SettingsModal treats the seam as optional), so the link-only AccountLinkPanel - * is never imported into the SaaS bundle. + * Null drops the "Account link" nav item and its panel from the shared settings + * modal (the portal host treats the seam as optional), so the link-only + * AccountLinkPanel is never imported into the SaaS bundle. */ export const accountLinkSettings: AccountLinkSettingsSeam | null = null; diff --git a/frontend/editor/src/portal/api/settings.ts b/frontend/editor/src/portal/api/settings.ts deleted file mode 100644 index 430ea6e14d..0000000000 --- a/frontend/editor/src/portal/api/settings.ts +++ /dev/null @@ -1,87 +0,0 @@ -import { apiClient } from "@portal/api/http"; -import type { Tier } from "@portal/contexts/TierContext"; - -/* - * The account + workspace settings surface. The shape is tier-aware: the - * workspace plan label, available regions, and data-residency posture differ - * by tier, so the modal reflects what each plan can actually configure. - */ - -export interface RegionOption { - value: string; - label: string; - /** Enterprise-only residency regions are gated below higher tiers. */ - enterpriseOnly?: boolean; -} - -export interface NotificationDefault { - id: string; - enabled: boolean; -} - -/** A device/browser with an active session, shown under Admin → Security. */ -export interface ActiveSession { - id: string; - device: string; - location: string; - lastActive: string; - /** The session viewing this modal — can't be revoked from here. */ - current: boolean; -} - -/** - * Org-wide authentication posture. SSO/SCIM are enterprise capabilities; lower - * tiers see them as locked rows with an upgrade nudge. - */ -export interface SecuritySettings { - mfaEnforced: boolean; - ssoEnabled: boolean; - scimEnabled: boolean; - /** Idle timeout before re-auth, in minutes. */ - sessionTimeoutMins: number; - activeSessions: ActiveSession[]; -} - -/** An opt-in early-access feature flag. */ -export interface BetaFeature { - id: string; - label: string; - description: string; - enabled: boolean; - /** Gated to enterprise — rendered locked below it. */ - enterpriseOnly?: boolean; -} - -/** - * Server snapshot of the account + workspace the modal opens onto. Editable - * fields seed local form state; `planLabel` / `seats` are read-only context. - */ -export interface SettingsSnapshot { - profile: { - name: string; - email: string; - role: string; - /** Avatar image URL, or null to fall back to initials. */ - avatarUrl: string | null; - }; - workspace: { - name: string; - region: string; - planLabel: string; - seats: { used: number; total: number }; - }; - /** Per-category notification toggles, server-default on/off. */ - notifications: NotificationDefault[]; - regions: RegionOption[]; - /** Org-wide authentication + session posture (Admin scope). */ - security: SecuritySettings; - /** Opt-in early-access features (Admin scope). */ - betaFeatures: BetaFeature[]; -} - -/** GET /v1/settings?tier=… — the account + workspace snapshot the modal edits. */ -export async function fetchSettings(tier: Tier): Promise { - return apiClient.local.json( - `/v1/settings?tier=${encodeURIComponent(tier)}`, - ); -} diff --git a/frontend/editor/src/portal/components/PortalChrome.tsx b/frontend/editor/src/portal/components/PortalChrome.tsx index f5b524145d..49172784fc 100644 --- a/frontend/editor/src/portal/components/PortalChrome.tsx +++ b/frontend/editor/src/portal/components/PortalChrome.tsx @@ -6,7 +6,7 @@ import { useUI } from "@portal/contexts/UIContext"; import { AppShell } from "@portal/components/AppShell"; import { AssistantMount } from "@portal/components/AssistantMount"; import { SearchModal } from "@portal/components/SearchModal"; -import { SettingsModal } from "@portal/components/SettingsModal"; +import { PortalSettingsHost } from "@portal/components/PortalSettingsHost"; import { ViewRouter } from "@portal/ViewRouter"; /** @@ -35,18 +35,6 @@ function GlobalShortcuts() { return null; } -/** Bridges the Settings modal's open/close props to UIContext state. */ -function SettingsHost() { - const { settingsOpen, settingsInitialSection, closeSettings } = useUI(); - return ( - - ); -} - /** * The routed view, wrapped in an error boundary so a single view crashing can't * white-screen the portal (the shell + nav stay alive). Keyed by route so @@ -80,7 +68,7 @@ export function PortalChrome() { - + ); } diff --git a/frontend/editor/src/portal/components/PortalSettingsHost.tsx b/frontend/editor/src/portal/components/PortalSettingsHost.tsx new file mode 100644 index 0000000000..d68ad92ba5 --- /dev/null +++ b/frontend/editor/src/portal/components/PortalSettingsHost.tsx @@ -0,0 +1,84 @@ +import { useEffect, useMemo, useState } from "react"; +import { useTranslation } from "react-i18next"; +import AppConfigModalLazy from "@app/components/shared/AppConfigModalLazy"; +import { AppConfigProvider } from "@app/contexts/AppConfigContext"; +import { PreferencesProvider } from "@app/contexts/PreferencesContext"; +import { ThemeProvider } from "@app/components/shared/ThemeProvider"; +import { AuthProvider } from "@app/auth/UseSession"; +import { + VALID_NAV_KEYS, + type ConfigNavSection, + type NavKey, +} from "@app/components/shared/config/types"; +import { accountLinkSettings } from "@portal/components/settings/accountLinkSettings"; +import { useUI } from "@portal/contexts/UIContext"; + +/** + * Mounts the editor's settings modal (the app-wide settings surface) inside the + * portal. The portal deliberately lives outside the editor's AppProviders, so + * this host supplies the contexts the settings tree needs: app config, user + * preferences, the session provider the account sections read (flavor-resolved: + * Spring on self-hosted, Supabase on SaaS — same underlying session the portal + * is already signed in with), and the editor ThemeProvider (which also carries + * the Mantine theme + toasts the sections expect). URL sync is off — the portal + * owns its own route subtree, so the modal keeps its section purely in state. + * + * Everything (providers included) mounts on first open and stays mounted, so + * the editor theme wiring never runs for portal sessions that never open + * settings. + */ +export function PortalSettingsHost() { + const { settingsOpen, settingsInitialSection, closeSettings } = useUI(); + const { t } = useTranslation(); + const [everOpened, setEverOpened] = useState(false); + + useEffect(() => { + if (settingsOpen) setEverOpened(true); + }, [settingsOpen]); + + // Portal-only sections, appended after the build's registry sections. The + // account-link seam is self-hosted-only (the saas overlay shadows it to null). + const extraSections = useMemo(() => { + if (!accountLinkSettings) return []; + const { navKey, labelKey, icon, Body } = accountLinkSettings; + return [ + { + title: t("portal.settings.groups.admin", "Admin"), + items: [ + { + key: navKey, + label: t(labelKey, "Account link"), + icon, + component: , + }, + ], + }, + ]; + }, [t]); + + const initialSection: NavKey | null = + settingsInitialSection && + (VALID_NAV_KEYS as readonly string[]).includes(settingsInitialSection) + ? (settingsInitialSection as NavKey) + : null; + + if (!everOpened) return null; + + return ( + + + + + + + + + + ); +} diff --git a/frontend/editor/src/portal/components/SettingsModal.css b/frontend/editor/src/portal/components/SettingsModal.css deleted file mode 100644 index 59fa1e0bc4..0000000000 --- a/frontend/editor/src/portal/components/SettingsModal.css +++ /dev/null @@ -1,255 +0,0 @@ -/* The settings overlay hosts a full-bleed two-pane SettingsShell, so the - modal frame contributes no padding of its own and lets the shell scroll. */ -.portal-settings .sui-modal__body { - padding: 0; - overflow: hidden; -} - -.portal-settings__section { - display: flex; - flex-direction: column; - gap: 1rem; -} - -/* Footer note pushes the action buttons to the right. */ -.portal-settings__footer-note { - margin-right: auto; - align-self: center; - font-size: 0.75rem; - color: var(--color-text-4); -} - -/* ── Profile identity row ─────────────────────────────────────────────── */ -.portal-settings__identity { - display: flex; - align-items: center; - gap: 0.875rem; - padding: 0.875rem; - background: var(--color-bg-subtle); - border: 1px solid var(--color-border-light); - border-radius: var(--radius-lg); -} - -.portal-settings__identity-meta { - display: flex; - flex-direction: column; - gap: 0.25rem; - min-width: 0; - flex: 1 1 auto; -} - -.portal-settings__identity-name { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 0.9375rem; - font-weight: 600; - color: var(--color-text-1); -} - -.portal-settings__identity-email { - font-size: 0.8125rem; - color: var(--color-text-4); -} - -/* ── Preference groups ────────────────────────────────────────────────── */ -.portal-settings__group { - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -.portal-settings__group + .portal-settings__group { - padding-top: 1rem; - border-top: 1px solid var(--color-border-light); -} - -.portal-settings__group-head { - display: flex; - flex-direction: column; - gap: 0.125rem; -} - -.portal-settings__group-title { - margin: 0; - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-1); -} - -.portal-settings__group-sub { - margin: 0; - font-size: 0.75rem; - color: var(--color-text-4); -} - -/* ── Theme picker ─────────────────────────────────────────────────────── */ -.portal-settings__theme { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 0.625rem; -} - -.portal-settings__theme-card { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.75rem; - text-align: left; - background: var(--color-surface); - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - transition: - border-color var(--motion-fast), - background var(--motion-fast), - box-shadow var(--motion-fast); -} - -.portal-settings__theme-card:hover { - border-color: var(--color-border-strong, var(--color-border)); - background: var(--color-bg-hover); -} - -.portal-settings__theme-card.is-active { - border-color: var(--color-blue); - box-shadow: 0 0 0 1px var(--color-blue); -} - -.portal-settings__theme-swatch { - display: inline-flex; - flex-direction: column; - gap: 2px; - width: 2.25rem; - height: 2.25rem; - padding: 4px; - border-radius: var(--radius-sm); - border: 1px solid var(--color-border); - flex: 0 0 auto; -} - -.portal-settings__theme-swatch span { - border-radius: 2px; -} - -.portal-settings__theme-swatch span:first-child { - flex: 0 0 35%; -} - -.portal-settings__theme-swatch span:last-child { - flex: 1 1 auto; -} - -.portal-settings__theme-swatch--light { - background: #ffffff; -} -.portal-settings__theme-swatch--light span:first-child { - background: #cbd5e1; -} -.portal-settings__theme-swatch--light span:last-child { - background: #eef2f7; -} - -.portal-settings__theme-swatch--dark { - background: #0f172a; -} -.portal-settings__theme-swatch--dark span:first-child { - background: #475569; -} -.portal-settings__theme-swatch--dark span:last-child { - background: #1e293b; -} - -.portal-settings__theme-text { - display: flex; - flex-direction: column; - min-width: 0; -} - -.portal-settings__theme-text strong { - font-size: 0.8125rem; - font-weight: 600; - color: var(--color-text-1); -} - -.portal-settings__theme-text span { - font-size: 0.75rem; - color: var(--color-text-4); -} - -/* ── Notification rows ────────────────────────────────────────────────── */ -.portal-settings__notifs { - display: flex; - flex-direction: column; -} - -.portal-settings__notif-row { - display: flex; - align-items: center; - justify-content: space-between; - gap: 1rem; - padding: 0.75rem 0; -} - -.portal-settings__notif-row + .portal-settings__notif-row { - border-top: 1px solid var(--color-border-light); -} - -.portal-settings__notif-text { - display: flex; - flex-direction: column; - gap: 0.125rem; - min-width: 0; -} - -.portal-settings__notif-text strong { - font-size: 0.8125rem; - font-weight: 500; - color: var(--color-text-1); -} - -.portal-settings__notif-text span { - font-size: 0.75rem; - color: var(--color-text-4); -} - -/* Label paired with a gating badge (e.g. "SCIM provisioning" + Enterprise). */ -.portal-settings__row-label { - display: inline-flex; - align-items: center; - gap: 0.4rem; -} - -/* ── Workspace plan card ──────────────────────────────────────────────── */ -.portal-settings__plan { - display: flex; - flex-direction: column; - gap: 0.625rem; - padding: 0.875rem; - background: var(--color-bg-subtle); - border: 1px solid var(--color-border-light); - border-radius: var(--radius-lg); -} - -.portal-settings__plan-row { - display: flex; - align-items: center; - justify-content: space-between; - gap: 0.75rem; -} - -.portal-settings__plan-label { - font-size: 0.8125rem; - color: var(--color-text-3); -} - -.portal-settings__plan-value { - font-size: 0.8125rem; - font-weight: 500; - color: var(--color-text-1); -} - -@media (max-width: 40rem) { - .portal-settings__theme { - grid-template-columns: 1fr; - } -} diff --git a/frontend/editor/src/portal/components/SettingsModal.tsx b/frontend/editor/src/portal/components/SettingsModal.tsx deleted file mode 100644 index eb2380a9a9..0000000000 --- a/frontend/editor/src/portal/components/SettingsModal.tsx +++ /dev/null @@ -1,902 +0,0 @@ -import { useEffect, useMemo, useState } from "react"; -import { useTranslation } from "react-i18next"; -import { - Avatar, - Button, - FormField, - Input, - Modal, - Select, - SettingsShell, - Skeleton, - StatusBadge, - ToggleSwitch, - type SelectOption, - type SettingsNavSection, -} from "@app/ui"; -import { useTier, type Tier } from "@portal/contexts/TierContext"; -import { useTheme, type Theme } from "@portal/contexts/ThemeContext"; -import { useAsync } from "@portal/hooks/useAsync"; -import { - fetchSettings, - type ActiveSession, - type BetaFeature, - type SettingsSnapshot, -} from "@portal/api/settings"; -import { - UsersIcon, - SunIcon, - BellIcon, - SettingsIcon, - PoliciesIcon, - InfrastructureIcon, - SparklesIcon, -} from "@portal/components/icons"; -import { accountLinkSettings } from "@portal/components/settings/accountLinkSettings"; -import "@portal/components/SettingsModal.css"; - -type SettingsSection = - | "profile" - | "appearance" - | "notifications" - | "general" - | "authentication" - | "sessions" - | "early-access" - | "account-link"; - -function isSettingsSection(value: string | null): value is SettingsSection { - return ( - value === "profile" || - value === "appearance" || - value === "notifications" || - value === "general" || - value === "authentication" || - value === "sessions" || - value === "early-access" || - value === "account-link" - ); -} - -/** Org-wide auth posture the Admin sections edit, mirrored into local state. */ -interface SecurityForm { - mfaEnforced: boolean; - ssoEnabled: boolean; - scimEnabled: boolean; - sessionTimeoutMins: number; -} - -interface SettingsModalProps { - open: boolean; - onClose: () => void; - /** - * Optional section to land on when opening. When `null`/unsupported the modal - * picks the default ("profile"). Set by callers like the sidebar's "Link - * account" affordance → "account-link". - */ - initialSection?: string | null; -} - -/** - * Notification categories with known display copy, in the order the snapshot - * exposes them. Labels and descriptions are resolved via i18n at render time, - * keyed by id; ids absent from this list are skipped. - */ -const NOTIFICATION_IDS = [ - "pipeline-failures", - "pipeline-success", - "usage-alerts", - "weekly-digest", - "security-alerts", - "product-updates", -] as const; - -const THEME_OPTIONS: { value: Theme }[] = [ - { value: "light" }, - { value: "dark" }, -]; - -const SESSION_TIMEOUT_VALUES = ["60", "240", "480", "720", "1440"] as const; - -/** - * Account settings as a portal-wide overlay. A grouped left-nav (Account / - * Workspace / Admin) over a tier-aware snapshot that seeds editable local form - * state. Save is a no-op for the demo — it closes — but the theme control - * writes straight through to ThemeProvider so the change is real and visible. - */ -export function SettingsModal({ - open, - onClose, - initialSection, -}: SettingsModalProps) { - const { t } = useTranslation(); - const { tier } = useTier(); - const { theme, setTheme } = useTheme(); - const [section, setSection] = useState("profile"); - - const navSections = useMemo( - () => [ - { - title: t("portal.settings.groups.account"), - items: [ - { - key: "profile", - label: t("portal.settings.sections.profile"), - icon: , - }, - { - key: "appearance", - label: t("portal.settings.sections.appearance"), - icon: , - }, - { - key: "notifications", - label: t("portal.settings.sections.notifications"), - icon: , - }, - ], - }, - { - title: t("portal.settings.groups.workspace"), - items: [ - { - key: "general", - label: t("portal.settings.sections.general"), - icon: , - }, - ], - }, - { - title: t("portal.settings.groups.admin"), - items: [ - // Account-link is a self-hosted-only section; the SaaS build shadows - // the seam to null, dropping the item entirely. - ...(accountLinkSettings - ? [ - { - key: accountLinkSettings.navKey, - label: t(accountLinkSettings.labelKey), - icon: accountLinkSettings.icon, - }, - ] - : []), - { - key: "authentication", - label: t("portal.settings.sections.authentication"), - icon: , - }, - { - key: "sessions", - label: t("portal.settings.sections.sessions"), - icon: , - }, - { - key: "early-access", - label: t("portal.settings.sections.early-access"), - icon: , - }, - ], - }, - ], - [t], - ); - - const { data: snapshot, loading } = useAsync( - () => fetchSettings(tier), - [tier], - ); - - // Editable copies seeded from the snapshot. Re-seed whenever a fresh snapshot - // arrives (tier switch) or the modal is re-opened, so edits never leak across - // sessions or stack on stale values. - const [name, setName] = useState(""); - const [email, setEmail] = useState(""); - const [workspaceName, setWorkspaceName] = useState(""); - const [region, setRegion] = useState(""); - const [notifications, setNotifications] = useState>( - {}, - ); - const [security, setSecurity] = useState({ - mfaEnforced: false, - ssoEnabled: false, - scimEnabled: false, - sessionTimeoutMins: 480, - }); - const [betaToggles, setBetaToggles] = useState>({}); - - useEffect(() => { - if (!snapshot) return; - setName(snapshot.profile.name); - setEmail(snapshot.profile.email); - setWorkspaceName(snapshot.workspace.name); - setRegion(snapshot.workspace.region); - setNotifications( - Object.fromEntries(snapshot.notifications.map((n) => [n.id, n.enabled])), - ); - setSecurity({ - mfaEnforced: snapshot.security.mfaEnforced, - ssoEnabled: snapshot.security.ssoEnabled, - scimEnabled: snapshot.security.scimEnabled, - sessionTimeoutMins: snapshot.security.sessionTimeoutMins, - }); - setBetaToggles( - Object.fromEntries(snapshot.betaFeatures.map((f) => [f.id, f.enabled])), - ); - }, [snapshot]); - - useEffect(() => { - if (!open) return; - const requested = initialSection ?? null; - setSection(isSettingsSection(requested) ? requested : "profile"); - }, [open, initialSection]); - - const regionOptions = useMemo(() => { - if (!snapshot) return []; - return snapshot.regions.map((r) => ({ - value: r.value, - label: - r.enterpriseOnly && tier !== "enterprise" - ? t("portal.settings.workspace.regionEnterpriseSuffix", { - region: r.label, - }) - : r.label, - disabled: r.enterpriseOnly && tier !== "enterprise", - })); - }, [snapshot, tier, t]); - - const isLoading = loading && !snapshot; - - return ( - - setSection(k as SettingsSection)} - title={t(`portal.settings.sections.${section}`)} - onClose={onClose} - footer={ - <> - - {t("portal.settings.footerNote")} - - - - - } - > - {section === "profile" && ( - - )} - - {section === "appearance" && ( - - )} - - {section === "notifications" && ( - n.id) ?? []} - onToggle={(id, value) => - setNotifications((prev) => ({ ...prev, [id]: value })) - } - /> - )} - - {section === "general" && ( - - )} - - {section === "authentication" && ( - setSecurity((s) => ({ ...s, ...patch }))} - /> - )} - - {section === "sessions" && ( - - )} - - {section === "early-access" && ( - - setBetaToggles((prev) => ({ ...prev, [id]: value })) - } - /> - )} - - {section === "account-link" && accountLinkSettings && ( - - )} - - - ); -} - -/* ──────────────────────────────────────────────────────────────────────── */ -/* Profile */ -/* ──────────────────────────────────────────────────────────────────────── */ - -function ProfilePanel({ - loading, - name, - email, - role, - avatarUrl, - onName, - onEmail, -}: { - loading: boolean; - name: string; - email: string; - role?: string; - avatarUrl?: string; - onName: (v: string) => void; - onEmail: (v: string) => void; -}) { - const { t } = useTranslation(); - if (loading) { - return ( -
-
- -
- - -
-
- - -
- ); - } - - return ( -
-
- -
-
- {name || t("portal.settings.profile.accountFallback")} - {role && ( - - {role} - - )} -
- {email} -
- -
- - - onName(e.target.value)} - placeholder={t("portal.settings.profile.namePlaceholder")} - /> - - - - onEmail(e.target.value)} - placeholder={t("portal.settings.profile.emailPlaceholder")} - /> - -
- ); -} - -/* ──────────────────────────────────────────────────────────────────────── */ -/* Appearance */ -/* ──────────────────────────────────────────────────────────────────────── */ - -function AppearancePanel({ - theme, - onTheme, -}: { - theme: Theme; - onTheme: (theme: Theme) => void; -}) { - const { t } = useTranslation(); - return ( -
-
-
-

- {t("portal.settings.appearance.themeTitle")} -

-

- {t("portal.settings.appearance.themeSub")} -

-
-
- {THEME_OPTIONS.map((opt) => ( - - ))} -
-
-
- ); -} - -/* ──────────────────────────────────────────────────────────────────────── */ -/* Notifications */ -/* ──────────────────────────────────────────────────────────────────────── */ - -function NotificationsPanel({ - loading, - notifications, - order, - onToggle, -}: { - loading: boolean; - notifications: Record; - order: string[]; - onToggle: (id: string, value: boolean) => void; -}) { - const { t } = useTranslation(); - return ( -
-
-
-

- {t("portal.settings.notifications.title")} -

-

- {t("portal.settings.notifications.sub")} -

-
- - {loading && ( -
- {Array.from({ length: 4 }).map((_, i) => ( -
-
- - -
- -
- ))} -
- )} - - {!loading && ( -
- {order.map((id) => { - if (!(NOTIFICATION_IDS as readonly string[]).includes(id)) { - return null; - } - return ( -
-
- - {t(`portal.settings.notifications.${id}.label`)} - - - {t(`portal.settings.notifications.${id}.description`)} - -
- onToggle(id, v)} - /> -
- ); - })} -
- )} -
-
- ); -} - -/* ──────────────────────────────────────────────────────────────────────── */ -/* Workspace */ -/* ──────────────────────────────────────────────────────────────────────── */ - -function WorkspacePanel({ - loading, - workspaceName, - onWorkspaceName, - region, - onRegion, - regionOptions, - planLabel, - seats, -}: { - loading: boolean; - workspaceName: string; - onWorkspaceName: (v: string) => void; - region: string; - onRegion: (v: string) => void; - regionOptions: SelectOption[]; - planLabel?: string; - seats?: { used: number; total: number }; -}) { - const { t } = useTranslation(); - if (loading) { - return ( -
- - - -
- ); - } - - return ( -
- - onWorkspaceName(e.target.value)} - placeholder={t("portal.settings.workspace.namePlaceholder")} - /> - - - - - onSecurity({ sessionTimeoutMins: Number(value ?? "0") }) - } - options={SESSION_TIMEOUT_VALUES.map((value) => ({ - value, - label: t(`portal.settings.authentication.timeout.${value}`), - }))} - /> - -
-
- ); -} - -/* ──────────────────────────────────────────────────────────────────────── */ -/* Admin · Active sessions */ -/* ──────────────────────────────────────────────────────────────────────── */ - -function SessionsPanel({ - loading, - sessions, -}: { - loading: boolean; - sessions: ActiveSession[]; -}) { - const { t } = useTranslation(); - if (loading) { - return ( -
- - -
- ); - } - - return ( -
-
-
-

- {t("portal.settings.sessions.title")} -

-

- {t("portal.settings.sessions.sub")} -

-
-
- {sessions.map((s) => ( -
-
- {s.device} - - {s.location} · {s.lastActive} - -
- {s.current ? ( - - {t("portal.settings.sessions.thisDevice")} - - ) : ( - // TODO(backend): DELETE /v1/settings/sessions/{id} - - )} -
- ))} -
-
-
- ); -} - -/* ──────────────────────────────────────────────────────────────────────── */ -/* Admin · Early access */ -/* ──────────────────────────────────────────────────────────────────────── */ - -function EarlyAccessPanel({ - loading, - tier, - betaFeatures, - betaToggles, - onBeta, -}: { - loading: boolean; - tier: Tier; - betaFeatures: BetaFeature[]; - betaToggles: Record; - onBeta: (id: string, value: boolean) => void; -}) { - const { t } = useTranslation(); - if (loading) { - return ( -
- - -
- ); - } - - const isEnterprise = tier === "enterprise"; - - return ( -
-
-
-

- {t("portal.settings.earlyAccess.title")} -

-

- {t("portal.settings.earlyAccess.sub")} -

-
-
- {betaFeatures.map((f) => { - const locked = Boolean(f.enterpriseOnly) && !isEnterprise; - return ( -
-
- - {f.label} - {locked && ( - - {t("portal.settings.enterpriseBadge")} - - )} - - {f.description} -
- onBeta(f.id, v)} - /> -
- ); - })} -
-
-
- ); -} diff --git a/frontend/editor/src/portal/components/settings/accountLinkSettings.tsx b/frontend/editor/src/portal/components/settings/accountLinkSettings.tsx index 8e769672d7..22c03ec682 100644 --- a/frontend/editor/src/portal/components/settings/accountLinkSettings.tsx +++ b/frontend/editor/src/portal/components/settings/accountLinkSettings.tsx @@ -1,26 +1,26 @@ -import type { ComponentType, ReactNode } from "react"; -import { LinkIcon } from "@portal/components/icons"; +import type { ComponentType } from "react"; import { AccountLinkPanel } from "@portal/components/account-link/AccountLinkPanel"; export interface AccountLinkSettingsSeam { - /** Section key in the Settings nav + body switch. */ - navKey: string; + /** Nav key in the shared settings modal (registered in config/types.ts). */ + navKey: "account-link"; /** i18n key for the nav label; resolved with `t()` at the call site. */ labelKey: string; - icon: ReactNode; + /** LocalIcon name for the nav item. */ + icon: string; /** The section body — the account-link panel. */ Body: ComponentType; } /** - * The admin "Account link" section of Settings (self-hosted only). The SaaS - * build shadows this file with `null`: the signed-in account IS the SaaS - * account, so there is no instance to link — the nav item and its panel both - * drop out, and nothing imports the link-only AccountLinkPanel. + * The admin "Account link" section of the shared settings modal (self-hosted + * only). The SaaS build shadows this file with `null`: the signed-in account IS + * the SaaS account, so there is no instance to link — the nav item and its + * panel both drop out, and nothing imports the link-only AccountLinkPanel. */ export const accountLinkSettings: AccountLinkSettingsSeam | null = { navKey: "account-link", labelKey: "portal.settings.sections.account-link", - icon: , + icon: "link-rounded", Body: AccountLinkPanel, }; diff --git a/frontend/editor/src/portal/mocks/handlers/index.ts b/frontend/editor/src/portal/mocks/handlers/index.ts index 8d2139a0b8..64e885d15f 100644 --- a/frontend/editor/src/portal/mocks/handlers/index.ts +++ b/frontend/editor/src/portal/mocks/handlers/index.ts @@ -8,7 +8,6 @@ import { infrastructureHandlers } from "@portal/mocks/handlers/infrastructure"; import { procurementHandlers } from "@portal/mocks/handlers/procurement"; import { procurementSaasHandlers } from "@portal/mocks/handlers/procurementSaas"; import { docsHandlers } from "@portal/mocks/handlers/docs"; -import { settingsHandlers } from "@portal/mocks/handlers/settings"; import { usersHandlers } from "@portal/mocks/handlers/users"; import { agentsHandlers } from "@portal/mocks/handlers/agents"; import { policiesHandlers } from "@portal/mocks/handlers/policies"; @@ -28,7 +27,6 @@ export const handlers = [ ...docsHandlers, ...procurementHandlers, ...procurementSaasHandlers, - ...settingsHandlers, ...usersHandlers, ...agentsHandlers, ...policiesHandlers, diff --git a/frontend/editor/src/portal/mocks/handlers/settings.ts b/frontend/editor/src/portal/mocks/handlers/settings.ts deleted file mode 100644 index 8fdd4c02fa..0000000000 --- a/frontend/editor/src/portal/mocks/handlers/settings.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { http, HttpResponse, delay } from "msw"; -import type { Tier } from "@portal/contexts/TierContext"; -import { buildSettingsSnapshot } from "@portal/mocks/settings"; - -export const settingsHandlers = [ - http.get("/v1/settings", async ({ request }) => { - await delay(120); - const url = new URL(request.url); - const tier = (url.searchParams.get("tier") ?? "pro") as Tier; - return HttpResponse.json(buildSettingsSnapshot(tier)); - }), -]; diff --git a/frontend/editor/src/portal/mocks/settings.ts b/frontend/editor/src/portal/mocks/settings.ts deleted file mode 100644 index 59cceb17d8..0000000000 --- a/frontend/editor/src/portal/mocks/settings.ts +++ /dev/null @@ -1,151 +0,0 @@ -/** - * Account-settings fixtures. Types live in api/settings.ts (the backend - * contract); this module only builds fake data for Storybook and tests. - * - * The shape is tier-aware: the workspace plan label, available regions, and - * data-residency posture differ by tier, so the modal reflects what each plan - * can actually configure. - */ - -import type { - ActiveSession, - BetaFeature, - NotificationDefault, - RegionOption, - SecuritySettings, - SettingsSnapshot, -} from "@portal/api/settings"; -import type { Tier } from "@portal/contexts/TierContext"; - -const REGIONS: RegionOption[] = [ - { value: "us-east-1", label: "US East (N. Virginia)" }, - { value: "us-west-2", label: "US West (Oregon)" }, - { value: "eu-west-1", label: "EU West (Ireland)" }, - { value: "eu-central-1", label: "EU Central (Frankfurt)" }, - { - value: "ap-southeast-2", - label: "Asia Pacific (Sydney)", - enterpriseOnly: true, - }, - { value: "ca-central-1", label: "Canada (Central)", enterpriseOnly: true }, -]; - -const PLAN_LABEL: Record = { - free: "Editor plan", - pro: "Processor plan", - enterprise: "Enterprise plan", -}; - -const SEATS: Record = { - free: { used: 1, total: 1 }, - pro: { used: 4, total: 5 }, - enterprise: { used: 38, total: 50 }, -}; - -const WORKSPACE_NAME: Record = { - free: "My Workspace", - pro: "Acme Document Ops", - enterprise: "Acme Corp — Global", -}; - -/** Notification categories shown in Preferences, with sensible per-tier defaults. */ -function notificationsFor(tier: Tier): NotificationDefault[] { - return [ - { id: "pipeline-failures", enabled: true }, - { id: "pipeline-success", enabled: tier !== "free" }, - { id: "usage-alerts", enabled: true }, - { id: "weekly-digest", enabled: tier === "free" }, - { id: "security-alerts", enabled: true }, - { id: "product-updates", enabled: false }, - ]; -} - -/** Session timeout shortens as the plan's security posture tightens. */ -const SESSION_TIMEOUT_MINS: Record = { - free: 1440, - pro: 720, - enterprise: 480, -}; - -function securityFor(tier: Tier): SecuritySettings { - const base: ActiveSession[] = [ - { - id: "sess-current", - device: "Chrome · macOS", - location: "London, UK", - lastActive: "Active now", - current: true, - }, - ]; - if (tier !== "free") { - base.push({ - id: "sess-cli", - device: "Stirling CLI · CI runner", - location: "eu-west-1", - lastActive: "12 min ago", - current: false, - }); - } - if (tier === "enterprise") { - base.push({ - id: "sess-mobile", - device: "Safari · iPhone", - location: "London, UK", - lastActive: "3 h ago", - current: false, - }); - } - return { - // Enterprise tenants enforce MFA + SSO/SCIM org-wide by default. - mfaEnforced: tier === "enterprise", - ssoEnabled: tier === "enterprise", - scimEnabled: tier === "enterprise", - sessionTimeoutMins: SESSION_TIMEOUT_MINS[tier], - activeSessions: base, - }; -} - -function betaFeaturesFor(tier: Tier): BetaFeature[] { - return [ - { - id: "pipeline-canary", - label: "Pipeline canary rollouts", - description: "Shadow-run a new pipeline version before promoting it.", - enabled: false, - }, - { - id: "component-sandboxes", - label: "Live component sandboxes", - description: "Interactive previews for embeddable components.", - enabled: tier !== "free", - }, - { - id: "agent-evals-v2", - label: "Agent evals v2", - description: "Richer golden-set scoring with regression diffs.", - enabled: tier === "enterprise", - enterpriseOnly: true, - }, - ]; -} - -export function buildSettingsSnapshot(tier: Tier): SettingsSnapshot { - return { - profile: { - name: "Reece Browne", - email: "reece@stirlingpdf.com", - role: tier === "enterprise" ? "Org Admin" : "Owner", - avatarUrl: null, - }, - workspace: { - name: WORKSPACE_NAME[tier], - region: tier === "free" ? "us-east-1" : "eu-west-1", - planLabel: PLAN_LABEL[tier], - seats: SEATS[tier], - }, - notifications: notificationsFor(tier), - regions: REGIONS, - security: securityFor(tier), - betaFeatures: betaFeaturesFor(tier), - }; -} diff --git a/frontend/editor/src/saas/components/shared/AppConfigModal.tsx b/frontend/editor/src/saas/components/shared/AppConfigModal.tsx index b691244e68..7d36b40ee4 100644 --- a/frontend/editor/src/saas/components/shared/AppConfigModal.tsx +++ b/frontend/editor/src/saas/components/shared/AppConfigModal.tsx @@ -9,7 +9,10 @@ import { useTranslation } from "react-i18next"; import LocalIcon from "@app/components/shared/LocalIcon"; import Overview from "@app/components/shared/config/configSections/Overview"; import { createSaasConfigNavSections } from "@app/components/shared/config/saasConfigNavSections"; -import { NavKey } from "@app/components/shared/config/types"; +import { + NavKey, + type ConfigNavSection, +} from "@app/components/shared/config/types"; import { stripBasePath, withBasePath } from "@app/constants/app"; import { COOKIE_CONSENT_SCROLL_SHARD } from "@app/hooks/useCookieConsent"; import "@app/components/shared/AppConfigModal.css"; @@ -21,9 +24,21 @@ import { interface AppConfigModalProps { opened: boolean; onClose: () => void; + /** Accepted for interface parity with the core shell; this shell never + * URL-syncs, so it has no effect. */ + urlSync?: boolean; + /** Section to land on when opening (used by non-URL hosts like the portal). */ + initialSection?: NavKey | null; + /** Host-specific sections appended after the saas registry sections. */ + extraSections?: ConfigNavSection[]; } -const AppConfigModal: React.FC = ({ opened, onClose }) => { +const AppConfigModal: React.FC = ({ + opened, + onClose, + initialSection, + extraSections, +}) => { const isMobile = useMediaQuery("(max-width: 1024px)"); const { signOut, user } = useAuth(); @@ -53,16 +68,21 @@ const AppConfigModal: React.FC = ({ opened, onClose }) => { // usage-limit modal CTAs, which need to land on the Plan section), select that section. The // opener (QuickAccessBar) opens the modal whenever the path is /settings/*, but doesn't carry // the section, and `active` defaults to "overview" — so without this a deep link would open on - // Overview rather than the linked section. + // Overview rather than the linked section. Non-URL hosts (the portal) pass the + // section directly instead. useEffect(() => { if (!opened) return; + if (initialSection) { + setActive(initialSection); + return; + } const match = stripBasePath(window.location.pathname).match( /^\/settings\/([^/?#]+)/, ); if (match) { setActive(match[1] as NavKey); } - }, [opened]); + }, [opened, initialSection]); // Listen for notice updates (e.g., "Not enough credits..." next to Plan title) useEffect(() => { @@ -116,15 +136,14 @@ const AppConfigModal: React.FC = ({ opened, onClose }) => { // Left navigation structure and icons. The Plan tab now internally branches // free vs subscribed × leader vs member via useWallet(), so the modal no // longer plumbs paygEnabled / isLeader through to the nav builder. - const configNavSections = useMemo( - () => - createSaasConfigNavSections(Overview, openLogoutConfirm, { - isDev, - isAnonymous, - t, - }), - [openLogoutConfirm, isDev, isAnonymous, t], - ); + const configNavSections = useMemo(() => { + const sections = createSaasConfigNavSections(Overview, openLogoutConfirm, { + isDev, + isAnonymous, + t, + }); + return extraSections?.length ? [...sections, ...extraSections] : sections; + }, [openLogoutConfirm, isDev, isAnonymous, t, extraSections]); const activeLabel = useMemo(() => { for (const section of configNavSections) { diff --git a/frontend/editor/src/saas/components/shared/config/types.ts b/frontend/editor/src/saas/components/shared/config/types.ts index f80bd1ac19..ebaff637d5 100644 --- a/frontend/editor/src/saas/components/shared/config/types.ts +++ b/frontend/editor/src/saas/components/shared/config/types.ts @@ -1,3 +1,4 @@ +import type React from "react"; import { VALID_NAV_KEYS as CORE_NAV_KEYS } from "@core/components/shared/config/types"; // SaaS adds an "overview" account section and an "mcp" integrations tab. All @@ -7,3 +8,21 @@ import { VALID_NAV_KEYS as CORE_NAV_KEYS } from "@core/components/shared/config/ export const VALID_NAV_KEYS = [...CORE_NAV_KEYS, "overview", "mcp"] as const; export type NavKey = (typeof VALID_NAV_KEYS)[number]; + +// Mirrors the core shape over the widened saas NavKey union — see the core +// module for why these live in types rather than configNavSections. +export interface ConfigNavItem { + key: NavKey; + label: string; + icon: string; + component: React.ReactNode; + disabled?: boolean; + disabledTooltip?: string; + badge?: string; + badgeColor?: string; +} + +export interface ConfigNavSection { + title: string; + items: ConfigNavItem[]; +} From 51d3d27fd34fcf2fd5169a8c93cbf517ba4b6f30 Mon Sep 17 00:00:00 2001 From: Reece Browne <74901996+reecebrowne@users.noreply.github.com> Date: Thu, 9 Jul 2026 20:13:10 +0100 Subject: [PATCH 5/5] Portal policies: SUI setup forms fixes and improvements (#6927) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## What this does Reworks the portal's policy setup screens so a policy reads as **its own settings** rather than a list of tools you wire together, and rebuilds the forms on the shared design system so they match the rest of the portal. ## Why Setup showed one card per underlying tool (tool name + a toggle), which exposed the "a policy is a pipeline of tools" plumbing. A policy should read in terms of what it does to a document, not which tools run under the hood. ## Changes - **Setup reads as policy settings.** The per-tool cards are now a plain-language list of what the policy does — "Redact sensitive information", "Strip active content", "Apply a watermark", and so on — each with a short description and a toggle, with its options appearing inline when turned on. - **Consistent design system.** The setup and edit forms use the shared components instead of one-off styling. - **Simpler setup.** Removed two sections that aren't part of what ships here: Document Types (scope-by-type) and Retries. - **Watermarks are text-only.** A policy watermark is a text stamp, so the image option and the type picker are hidden. - **The editor always shows as a source** (it used to disappear when no other sources were connected), and the source tiles now lay out correctly. - **Clearer upsell copy.** Locked policies read **"Upgrade to Enterprise"** instead of "Coming soon". ## Scope UI only — no backend changes. Keeping a policy's settings in sync between the portal and the editor is a known, separate issue and is **not** part of this PR. ## Testing Prettier, ESLint, typecheck (proprietary + saas), and the unused-translation guard all pass. Setup screens verified in Storybook. --- .../public/locales/en-US/translation.toml | 46 +-- .../AddWatermarkSingleStepSettings.tsx | 30 +- frontend/editor/src/portal/PortalApp.tsx | 11 +- .../policies/PolicySetupWizard.stories.tsx | 10 + .../components/policies/PolicySetupWizard.tsx | 290 ++++++++++-------- frontend/editor/src/portal/views/Policies.css | 71 +++-- .../components/policies/Policies.css | 18 +- .../components/policies/PolicyPiiField.tsx | 7 +- .../policies/PolicyWatermarkConfig.tsx | 17 +- .../components/policies/policyStatus.ts | 27 +- 10 files changed, 290 insertions(+), 237 deletions(-) diff --git a/frontend/editor/public/locales/en-US/translation.toml b/frontend/editor/public/locales/en-US/translation.toml index 11193c3ed3..af5ed16169 100644 --- a/frontend/editor/public/locales/en-US/translation.toml +++ b/frontend/editor/public/locales/en-US/translation.toml @@ -7404,7 +7404,7 @@ subtitle = "Standing automations that enforce a tool pipeline on every document. title = "Policies" [portal.policies.card] -comingSoon = "Coming soon" +comingSoon = "Upgrade to Enterprise" notSetUp = "Not set up" [portal.policies.categories.compliance] @@ -7566,14 +7566,29 @@ continue = "Continue" enablePolicy = "Enable policy" saveChanges = "Save changes" -[portal.policies.wizard.docTypes] -allDescription = "Set up an Ingestion (classification) policy to narrow this to specific document types." -allTitle = "All document types" -clear = "Clear" -heading = "Document types" -narrow = "Narrow" -selected_one = "{{count}} selected" -selected_other = "{{count}} selected" +[portal.policies.wizard.capability.compress] +desc = "Compresses the document to a smaller file size." +label = "Reduce file size" + +[portal.policies.wizard.capability.flatten] +desc = "Merges form fields and annotations into the page so they can't be edited." +label = "Flatten the document" + +[portal.policies.wizard.capability.ocr] +desc = "Runs OCR so scanned pages become selectable, searchable text." +label = "Make text searchable" + +[portal.policies.wizard.capability.redact] +desc = "Finds and blacks out sensitive details — like Social Security and card numbers — so they can't be read." +label = "Redact sensitive information" + +[portal.policies.wizard.capability.sanitize] +desc = "Removes hidden JavaScript so nothing can run automatically when the document is opened." +label = "Strip active content" + +[portal.policies.wizard.capability.watermark] +desc = "Stamps a visible mark (e.g. “Confidential”) across every page." +label = "Apply a watermark" [portal.policies.wizard.errors] noTools = "Enable at least one tool in the workflow first." @@ -7594,11 +7609,6 @@ label = "Output as" newFile = "New file" newVersion = "New version" -[portal.policies.wizard.output.retries] -delayLabel = "Retry delay (min)" -heading = "Retries" -maxLabel = "Max retries" - [portal.policies.wizard.output.runOn] export = "Export" helper = "When the policy fires: on upload, or before export." @@ -7609,22 +7619,20 @@ upload = "Upload" heading = "Settings" [portal.policies.wizard.sources] -emptyDescription = "Connect a source on the Sources page first, then attach it to a policy here." -emptyTitle = "No sources available" heading = "Sources" loading = "Loading sources…" [portal.policies.wizard.tabs] ariaLabel = "Setup steps" settings = "Settings" -workflow = "Workflow" +workflow = "Actions" [portal.policies.wizard.title] edit = "Edit {{category}} policy" setUp = "Set up {{category}} policy" [portal.policies.wizard.workflow] -description = "The sequence of tools this policy runs on each document. Each tool is a Stirling endpoint; toggle the ones this policy should enforce." +description = "Choose what this policy does to every document it processes." [portal.policySummary] activeSummary = "{{active}} / {{total}} active" @@ -7633,7 +7641,7 @@ subtitle = "Standing automations every document passes through, regardless of wh title = "What runs on your PDFs" [portal.policySummary.action] -comingSoon = "Coming soon" +comingSoon = "Upgrade to Enterprise" configure = "Configure" setUp = "Set up" diff --git a/frontend/editor/src/core/components/tools/addWatermark/AddWatermarkSingleStepSettings.tsx b/frontend/editor/src/core/components/tools/addWatermark/AddWatermarkSingleStepSettings.tsx index b78ab666ba..1d7859f7e4 100644 --- a/frontend/editor/src/core/components/tools/addWatermark/AddWatermarkSingleStepSettings.tsx +++ b/frontend/editor/src/core/components/tools/addWatermark/AddWatermarkSingleStepSettings.tsx @@ -23,6 +23,8 @@ interface AddWatermarkSingleStepSettingsProps { disabled?: boolean; /** When false, hide the "Flatten PDF pages to images" option (e.g. in policies). */ showFlatten?: boolean; + /** When true, lock to text watermarks: hide the type selector and image option (e.g. in policies). */ + textOnly?: boolean; } const AddWatermarkSingleStepSettings = ({ @@ -30,20 +32,24 @@ const AddWatermarkSingleStepSettings = ({ onParameterChange, disabled = false, showFlatten = true, + textOnly = false, }: AddWatermarkSingleStepSettingsProps) => { + const isText = textOnly || parameters.watermarkType === "text"; + const isImage = !textOnly && parameters.watermarkType === "image"; return ( - {/* Watermark Type Selection */} - - onParameterChange("watermarkType", type) - } - disabled={disabled} - /> + {/* Watermark type selection — hidden when locked to text. */} + {!textOnly && ( + + onParameterChange("watermarkType", type) + } + disabled={disabled} + /> + )} - {/* Conditional settings based on watermark type */} - {parameters.watermarkType === "text" && ( + {isText && ( <> )} - {parameters.watermarkType === "image" && ( + {isImage && ( {/* Scopes base.css to the portal so it doesn't restyle the host editor. */}
- - - + {/* Tool registry is read by portal views (e.g. the policy setup + wizard); mount it above the per-flavor provider split. */} + + + + +
diff --git a/frontend/editor/src/portal/components/policies/PolicySetupWizard.stories.tsx b/frontend/editor/src/portal/components/policies/PolicySetupWizard.stories.tsx index 275a8c9d15..01aaad2fc6 100644 --- a/frontend/editor/src/portal/components/policies/PolicySetupWizard.stories.tsx +++ b/frontend/editor/src/portal/components/policies/PolicySetupWizard.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; +import { ToolRegistryProvider } from "@app/contexts/ToolRegistryProvider"; import { POLICY_CATEGORIES, POLICY_CONFIG, @@ -12,6 +13,15 @@ const meta: Meta = { title: "Portal/Policies/PolicySetupWizard", component: PolicySetupWizard, parameters: { layout: "fullscreen" }, + // The wizard reads the tool registry (for capability fallback names/icons), + // so stories must supply the provider the app mounts in PortalApp. + decorators: [ + (Story) => ( + + + + ), + ], args: { onClose: () => {}, onSubmit: async () => {}, diff --git a/frontend/editor/src/portal/components/policies/PolicySetupWizard.tsx b/frontend/editor/src/portal/components/policies/PolicySetupWizard.tsx index 97be4925bc..e87d25dc9e 100644 --- a/frontend/editor/src/portal/components/policies/PolicySetupWizard.tsx +++ b/frontend/editor/src/portal/components/policies/PolicySetupWizard.tsx @@ -4,7 +4,6 @@ import { Banner, Button, Card, - Chip, FormField, Input, Modal, @@ -12,18 +11,23 @@ import { Tabs, ToggleSwitch, } from "@app/ui"; +import { SettingsRow } from "@app/ui/SettingsRow"; import { - POLICY_DOC_TYPES, + TOOL_ENDPOINTS, humanizeEndpoint, type CatalogueEntry, type PipelineStep, type PolicySetupResult, } from "@portal/api/policies"; +import type { ToolRegistryEntry } from "@app/data/toolsTaxonomy"; import { fetchSources } from "@portal/api/sources"; import { useAsync } from "@portal/hooks/useAsync"; import { PolicyFieldRow } from "@portal/components/policies/PolicyFieldRow"; import { policyIcon } from "@portal/components/policies/policyIcons"; import { sourceTypeMeta } from "@portal/components/sources/sourceTypes"; +import { useToolRegistry } from "@app/contexts/ToolRegistryContext"; +import { PolicyRedactConfig } from "@app/components/policies/PolicyRedactConfig"; +import { PolicyWatermarkConfig } from "@app/components/policies/PolicyWatermarkConfig"; import "@portal/views/Policies.css"; interface PolicySetupWizardProps { @@ -65,6 +69,58 @@ function resolveFieldValues( // the portal and can drive this via registry metadata or a defaultEnabled flag. const DISABLED_BY_DEFAULT = new Set(["/api/v1/security/add-watermark"]); +/** + * Policy-facing framing for each capability a policy can include. Labels and + * descriptions describe what the policy DOES to a document — deliberately not + * naming the underlying tool — so the setup reads as the policy's own settings + * rather than an assembled chain of tools. Endpoints with no entry fall back to + * the humanised endpoint name with no description. + */ +const CAPABILITY_META: Record< + string, + { labelKey: string; labelEn: string; descKey: string; descEn: string } +> = { + [TOOL_ENDPOINTS.redact]: { + labelKey: "portal.policies.wizard.capability.redact.label", + labelEn: "Redact sensitive information", + descKey: "portal.policies.wizard.capability.redact.desc", + descEn: + "Finds and blacks out sensitive details — like Social Security and card numbers — so they can't be read.", + }, + [TOOL_ENDPOINTS.sanitize]: { + labelKey: "portal.policies.wizard.capability.sanitize.label", + labelEn: "Strip active content", + descKey: "portal.policies.wizard.capability.sanitize.desc", + descEn: + "Removes hidden JavaScript so nothing can run automatically when the document is opened.", + }, + [TOOL_ENDPOINTS.watermark]: { + labelKey: "portal.policies.wizard.capability.watermark.label", + labelEn: "Apply a watermark", + descKey: "portal.policies.wizard.capability.watermark.desc", + descEn: "Stamps a visible mark (e.g. “Confidential”) across every page.", + }, + [TOOL_ENDPOINTS.ocr]: { + labelKey: "portal.policies.wizard.capability.ocr.label", + labelEn: "Make text searchable", + descKey: "portal.policies.wizard.capability.ocr.desc", + descEn: "Runs OCR so scanned pages become selectable, searchable text.", + }, + [TOOL_ENDPOINTS.flatten]: { + labelKey: "portal.policies.wizard.capability.flatten.label", + labelEn: "Flatten the document", + descKey: "portal.policies.wizard.capability.flatten.desc", + descEn: + "Merges form fields and annotations into the page so they can't be edited.", + }, + [TOOL_ENDPOINTS.compress]: { + labelKey: "portal.policies.wizard.capability.compress.label", + labelEn: "Reduce file size", + descKey: "portal.policies.wizard.capability.compress.desc", + descEn: "Compresses the document to a smaller file size.", + }, +}; + function seedTools(entry: CatalogueEntry): ToolState[] { const savedSteps = entry.policy?.steps ?? []; const savedByOp = new Map(savedSteps.map((s) => [s.operation, s])); @@ -117,6 +173,19 @@ function PolicySetupWizardBody({ onSubmit: (entry: CatalogueEntry, result: PolicySetupResult) => Promise; }) { const { t } = useTranslation(); + const { allTools: toolRegistry } = useToolRegistry(); + + // Portal tool operations are endpoint paths (/api/v1/…), not short registry IDs. + // Build a reverse map so we can look up icons and display names by endpoint. + const registryByEndpoint = useMemo(() => { + const map = new Map(); + for (const entry of Object.values(toolRegistry)) { + const ep = (entry as ToolRegistryEntry).operationConfig?.endpoint; + if (typeof ep === "string") map.set(ep, entry as ToolRegistryEntry); + } + return map; + }, [toolRegistry]); + const { category, config, policy } = entry; const isEdit = policy != null; @@ -146,12 +215,9 @@ function PolicySetupWizardBody({ }; return [editorSource, ...backendSources]; }, [sourcesAsync.data, t]); - const [scopeNarrow, setScopeNarrow] = useState( - (policy?.state.scopeTypes.length ?? 0) > 0, - ); - const [scopeTypes, setScopeTypes] = useState( - policy?.state.scopeTypes ?? [], - ); + // Document-type scoping has no UI; preserve any saved scope on edit and + // default new policies to all document types. + const [scopeTypes] = useState(policy?.state.scopeTypes ?? []); // TODO: replace with user-picker backed by GET /api/v1/user/users (UserSummary[]). // Store username (which is the email in Spring Security) as reviewerEmail. // See UserSelector.tsx in the editor for the grouping/display pattern. @@ -166,10 +232,10 @@ function PolicySetupWizardBody({ const [runOn, setRunOn] = useState<"upload" | "export">( policy?.state.runOn ?? "upload", ); - const [maxRetries, setMaxRetries] = useState(policy?.state.maxRetries ?? 3); - const [retryDelayMinutes, setRetryDelayMinutes] = useState( - policy?.state.retryDelayMinutes ?? 5, - ); + // Policies run once; retry config has no UI. Preserve any saved values on + // edit and default new policies to no retries (run once). + const [maxRetries] = useState(policy?.state.maxRetries ?? 0); + const [retryDelayMinutes] = useState(policy?.state.retryDelayMinutes ?? 0); const [submitting, setSubmitting] = useState(false); const [error, setError] = useState(null); @@ -188,12 +254,6 @@ function PolicySetupWizardBody({ ); } - function toggleScopeType(dt: string) { - setScopeTypes((prev) => - prev.includes(dt) ? prev.filter((d) => d !== dt) : [...prev, dt], - ); - } - async function submit() { if (submitting) return; if (enabledTools.length === 0) { @@ -211,7 +271,7 @@ function PolicySetupWizardBody({ await onSubmit(entry, { fieldValues, sources, - scopeTypes: scopeNarrow ? scopeTypes : [], + scopeTypes, reviewerEmail, outputMode, outputName: outputName.trim(), @@ -227,8 +287,6 @@ function PolicySetupWizardBody({ } } - const docTypesEnabled = category.providesClassification === true; - return (

- {t("portal.policies.wizard.workflow.description")} + {t( + "portal.policies.wizard.workflow.description", + "Choose what this policy does to every document it processes.", + )}

- {tools.map((tl) => ( - -
- - {humanizeEndpoint(tl.operation, t)} - - - - patchTool(tl.operation, { enabled: checked }) - } - label="" - /> -
- - ))} + +
+ {tools.map((tl) => { + const meta = CAPABILITY_META[tl.operation]; + const label = meta + ? t(meta.labelKey, meta.labelEn) + : (registryByEndpoint.get(tl.operation)?.name ?? + humanizeEndpoint(tl.operation, t)); + const description = meta + ? t(meta.descKey, meta.descEn) + : undefined; + const hasConfig = + tl.operation === TOOL_ENDPOINTS.redact || + tl.operation === TOOL_ENDPOINTS.watermark; + return ( +
+ + patchTool(tl.operation, { enabled: checked }) + } + label="" + /> + } + /> + {tl.enabled && hasConfig && ( +
+ {tl.operation === TOOL_ENDPOINTS.redact && ( + + patchTool(tl.operation, { parameters }) + } + /> + )} + {tl.operation === TOOL_ENDPOINTS.watermark && ( + + patchTool(tl.operation, { parameters }) + } + /> + )} +
+ )} +
+ ); + })} +
+ )} @@ -352,25 +454,23 @@ function PolicySetupWizardBody({

{t("portal.policies.wizard.sources.heading")}

-
- {sourcesAsync.loading && !sourcesAsync.data ? ( -

- {t("portal.policies.wizard.sources.loading")} -

- ) : availableSources.length === 1 ? ( - - ) : ( - availableSources.map((src) => ( + {sourcesAsync.loading && !sourcesAsync.data ? ( +

+ {t("portal.policies.wizard.sources.loading")} +

+ ) : ( + // The editor is always an available source (unconditionally prepended + // to availableSources), so the list is never empty — no "no sources" + // state exists. +
+ {availableSources.map((src) => ( + // A selectable multi-line tile (icon + name + type + check). + // Uses the shared Button (raw - )) - )} -
- -

- {t("portal.policies.wizard.docTypes.heading")} -

- {!docTypesEnabled ? ( - - ) : ( - -
- - {scopeTypes.length === 0 - ? t("portal.policies.wizard.docTypes.allTitle") - : t("portal.policies.wizard.docTypes.selected", { - count: scopeTypes.length, - })} - - -
- {scopeNarrow && ( -
- {POLICY_DOC_TYPES.map((dt) => ( - toggleScopeType(dt)} - > - {t(`policies.docType.${dt}`, dt)} - - ))} -
- )} - + ))} +
)}

@@ -560,33 +613,6 @@ function PolicySetupWizardBody({ )} {/* TODO: reviewer user-picker goes here */} -

- {t("portal.policies.wizard.output.retries.heading")} -

- - - setMaxRetries(Math.max(0, Number(e.target.value) || 0)) - } - /> - - - - setRetryDelayMinutes(Math.max(0, Number(e.target.value) || 0)) - } - /> - )} diff --git a/frontend/editor/src/portal/views/Policies.css b/frontend/editor/src/portal/views/Policies.css index 6bad9365c5..75adbc6a85 100644 --- a/frontend/editor/src/portal/views/Policies.css +++ b/frontend/editor/src/portal/views/Policies.css @@ -225,13 +225,6 @@ font-weight: 600; } -.portal-policies__wizard-subheading { - margin: 0.875rem 0 0; - font-size: 0.75rem; - font-weight: 600; - color: var(--color-text-3); -} - .portal-policies__fields { display: flex; flex-direction: column; @@ -248,17 +241,28 @@ gap: 0.375rem; } -/* Workflow step — tool rows */ -.portal-policies__tool-head { +/* Workflow step — policy capability settings list. + * Rows read as the policy's own settings (label + plain description + toggle), + * not a chain of distinct tools. Config reveals inline beneath an enabled row. */ +.portal-policies__capabilities { display: flex; - align-items: center; - gap: 0.625rem; + flex-direction: column; } -.portal-policies__tool-name { - font-size: 0.8125rem; - font-weight: 600; - color: var(--color-text-1); +.portal-policies__capability { + padding: 0.75rem 0.875rem; +} + +.portal-policies__capability + .portal-policies__capability { + border-top: 1px solid var(--color-border); +} + +/* An enabled row with config gets a faint tint so the revealed settings read as + * belonging to it. */ +.portal-policies__capability[data-on] .portal-policies__capability-config { + border-top: 1px dashed var(--color-border); + padding-top: 0.75rem; + margin-top: 0.75rem; } /* Sources picker */ @@ -284,11 +288,32 @@ border: 1.5px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; + /* Shared Button pins a fixed control height and natural width; this tile is a + full-width, two-line card, so fill the grid cell and grow to fit content. */ + width: 100%; + height: auto; + font-weight: inherit; transition: border-color var(--motion-fast), background var(--motion-fast); } +/* The shared Button wraps children in an inner/label node. Let the inner grow + (so the ::after check sits at the far right) and the label carry the + icon + two-line-text row. */ +.portal-policies__source .mantine-Button-inner { + flex: 1; + min-width: 0; +} + +.portal-policies__source .mantine-Button-label { + display: flex; + align-items: center; + gap: 0.5rem; + width: 100%; + white-space: normal; +} + .portal-policies__source::after { content: ""; display: flex; @@ -353,22 +378,6 @@ line-height: 1.4; } -/* Doc-type scope */ -.portal-policies__doctypes-head { - display: flex; - align-items: center; - justify-content: space-between; - font-size: 0.8125rem; - color: var(--color-text-2); -} - -.portal-policies__doctypes { - display: flex; - flex-wrap: wrap; - gap: 0.375rem; - margin-top: 0.625rem; -} - .portal-policies__link { border: none; background: none; diff --git a/frontend/editor/src/proprietary/components/policies/Policies.css b/frontend/editor/src/proprietary/components/policies/Policies.css index 9c4683f0ac..feb698a644 100644 --- a/frontend/editor/src/proprietary/components/policies/Policies.css +++ b/frontend/editor/src/proprietary/components/policies/Policies.css @@ -90,24 +90,8 @@ outline: 2px solid var(--color-blue); outline-offset: -2px; } -/* Policy icons are colourless at rest; hovering or focusing the row reveals the - category colour (blue/purple/green/amber/red — see ROW_ACCENT). The accent - class sets --ib-base; we neutralise --ib-accent here and restore it on hover. */ -.pol-row .sui-iconbadge { - --ib-accent: var(--color-text-3); - transition: - color var(--motion-fast), - background var(--motion-fast); -} -.pol-row:hover .sui-iconbadge, -.pol-row:focus-visible .sui-iconbadge { - --ib-accent: var(--ib-base); -} - /* Processing indicator: a spinning ring around the category icon while the - policy has runs in flight. The ring carries the category accent; the badge - also shows its colour (not the neutral rest tint) so an active policy reads - clearly even before hover. */ + policy has runs in flight. */ .pol-row-icon { position: relative; display: inline-flex; diff --git a/frontend/editor/src/proprietary/components/policies/PolicyPiiField.tsx b/frontend/editor/src/proprietary/components/policies/PolicyPiiField.tsx index d9fef2361d..59fe76c021 100644 --- a/frontend/editor/src/proprietary/components/policies/PolicyPiiField.tsx +++ b/frontend/editor/src/proprietary/components/policies/PolicyPiiField.tsx @@ -1,4 +1,4 @@ -import { MultiSelect } from "@mantine/core"; +import { MultiSelect } from "@app/ui/MultiSelect"; import { useTranslation } from "react-i18next"; import { PII_PRESETS } from "@app/data/policyDefinitions"; @@ -49,8 +49,8 @@ export function PolicyPiiField({ return ( ({ value: p.value, @@ -62,7 +62,6 @@ export function PolicyPiiField({ onChange={handleChange} disabled={disabled} clearable - checkIconPosition="right" /> ); } diff --git a/frontend/editor/src/proprietary/components/policies/PolicyWatermarkConfig.tsx b/frontend/editor/src/proprietary/components/policies/PolicyWatermarkConfig.tsx index 692508a92e..8697c9d030 100644 --- a/frontend/editor/src/proprietary/components/policies/PolicyWatermarkConfig.tsx +++ b/frontend/editor/src/proprietary/components/policies/PolicyWatermarkConfig.tsx @@ -9,10 +9,10 @@ interface PolicyWatermarkConfigProps { } /** - * Watermark configuration for a policy: the full watermark settings minus the - * "Flatten PDF pages to images" toggle (hidden), with flatten forced on so the - * watermark is baked into the page and can't be stripped out. Normalised once - * on mount. + * Watermark configuration for a policy: text watermarks only (the type selector + * and image option are hidden), minus the "Flatten PDF pages to images" toggle + * (hidden), with flatten forced on so the watermark is baked into the page and + * can't be stripped out. Normalised once on mount. */ export function PolicyWatermarkConfig({ parameters, @@ -20,9 +20,11 @@ export function PolicyWatermarkConfig({ disabled, }: PolicyWatermarkConfigProps) { useEffect(() => { - if (parameters.convertPDFToImage !== true) { - onChange({ ...parameters, convertPDFToImage: true }); - } + const patch: Record = {}; + if (parameters.convertPDFToImage !== true) patch.convertPDFToImage = true; + // Policies only support text watermarks. + if (parameters.watermarkType !== "text") patch.watermarkType = "text"; + if (Object.keys(patch).length > 0) onChange({ ...parameters, ...patch }); }, []); return ( @@ -33,6 +35,7 @@ export function PolicyWatermarkConfig({ } disabled={disabled} showFlatten={false} + textOnly /> ); } diff --git a/frontend/editor/src/proprietary/components/policies/policyStatus.ts b/frontend/editor/src/proprietary/components/policies/policyStatus.ts index 5fbd779725..ada31ad11b 100644 --- a/frontend/editor/src/proprietary/components/policies/policyStatus.ts +++ b/frontend/editor/src/proprietary/components/policies/policyStatus.ts @@ -17,10 +17,19 @@ export const STATUS_LABEL: Record = { setup: "Set up", }; -/** - * Per-category accent colour - */ +/** Per-category icon accent — neutral (no tint background) across all categories. */ export const ROW_ACCENT: Record = { + ingestion: "neutral", + security: "neutral", + compliance: "neutral", + routing: "neutral", + retention: "neutral", +}; + +/** Per-category colour for the file badges + enforcement overlay. Separate from + * ROW_ACCENT: the sidebar rows render neutral by design, but the badges keep + * their identity colours so files remain distinguishable at a glance. */ +const BADGE_ACCENT: Record = { ingestion: "blue", classification: "orange", security: "purple", @@ -30,15 +39,9 @@ export const ROW_ACCENT: Record = { }; /** - * CSS colour var for a policy category's accent (blue for unknown categories) — - * the tint used by the file badges and the enforcement overlay. - * - * Derived straight from the accent name (`--color-`), which is exactly - * the token {@link IconBadge} uses for the same accent. Deriving it (rather than - * keeping a second name→var map) means the badge tint can never drift from the - * sidebar's colour — previously `orange` was missing from that map, so the - * Classification badge/overlay rendered untinted while its sidebar row was orange. + * CSS colour var for a policy category's badge accent (blue for unknown + * categories) — the tint used by the file badges and the enforcement overlay. */ export function policyAccentVar(categoryId: string): string { - return `var(--color-${ROW_ACCENT[categoryId] ?? "blue"})`; + return `var(--color-${BADGE_ACCENT[categoryId] ?? "blue"})`; }