= {
commentAnnotation: "ui.commentAnnotation.register",
commentContextMenuItem: "ui.action.register",
settingsPage: "instance.settings.register",
+ companySettingsPage: "instance.settings.register",
routeSidebar: "ui.sidebar.register",
};
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 0da91b9a183..fa320fe4639 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -30,6 +30,7 @@ import { Activity } from "./pages/Activity";
import { Inbox } from "./pages/Inbox";
import { CompanySettings } from "./pages/CompanySettings";
import { CompanyEnvironments } from "./pages/CompanyEnvironments";
+import { CompanySettingsPluginPage } from "./pages/CompanySettingsPluginPage";
import { CompanyAccess } from "./pages/CompanyAccess";
import { CompanyInvites } from "./pages/CompanyInvites";
import { CompanySkills } from "./pages/CompanySkills";
@@ -74,6 +75,7 @@ function boardRoutes() {
} />
} />
} />
+ } />
} />
} />
} />
diff --git a/ui/src/components/CompanySettingsSidebar.test.tsx b/ui/src/components/CompanySettingsSidebar.test.tsx
index 429d0812237..adc9fec554e 100644
--- a/ui/src/components/CompanySettingsSidebar.test.tsx
+++ b/ui/src/components/CompanySettingsSidebar.test.tsx
@@ -10,6 +10,7 @@ const sidebarNavItemMock = vi.hoisted(() => vi.fn());
const mockSidebarBadgesApi = vi.hoisted(() => ({
get: vi.fn(),
}));
+const mockUsePluginSlots = vi.hoisted(() => vi.fn());
vi.mock("@/lib/router", () => ({
Link: ({
@@ -61,6 +62,10 @@ vi.mock("@/api/sidebarBadges", () => ({
sidebarBadgesApi: mockSidebarBadgesApi,
}));
+vi.mock("@/plugins/slots", () => ({
+ usePluginSlots: mockUsePluginSlots,
+}));
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
@@ -83,6 +88,11 @@ describe("CompanySettingsSidebar", () => {
failedRuns: 0,
joinRequests: 2,
});
+ mockUsePluginSlots.mockReturnValue({
+ slots: [],
+ isLoading: false,
+ errorMessage: null,
+ });
});
afterEach(() => {
@@ -154,4 +164,50 @@ describe("CompanySettingsSidebar", () => {
root.unmount();
});
});
+
+ it("renders company settings pages contributed by ready plugins", async () => {
+ mockUsePluginSlots.mockReturnValue({
+ slots: [
+ {
+ type: "companySettingsPage",
+ id: "permissions",
+ displayName: "Permissions",
+ exportName: "PermissionsPage",
+ routePath: "permissions",
+ pluginId: "plugin-1",
+ pluginKey: "paperclip-ee",
+ pluginDisplayName: "Paperclip EE",
+ pluginVersion: "0.1.0",
+ },
+ ],
+ isLoading: false,
+ errorMessage: null,
+ });
+ const root = createRoot(container);
+ const queryClient = new QueryClient({
+ defaultOptions: { queries: { retry: false } },
+ });
+
+ await act(async () => {
+ root.render(
+
+
+ ,
+ );
+ });
+ await flushReact();
+
+ expect(container.textContent).toContain("Permissions");
+ expect(sidebarNavItemMock).toHaveBeenCalledWith(
+ expect.objectContaining({
+ to: "/company/settings/permissions",
+ label: "Permissions",
+ end: true,
+ }),
+ );
+
+ await act(async () => {
+ root.unmount();
+ });
+ });
});
diff --git a/ui/src/components/CompanySettingsSidebar.tsx b/ui/src/components/CompanySettingsSidebar.tsx
index fb8870c999c..522f2f5bb28 100644
--- a/ui/src/components/CompanySettingsSidebar.tsx
+++ b/ui/src/components/CompanySettingsSidebar.tsx
@@ -1,16 +1,22 @@
import { useQuery } from "@tanstack/react-query";
-import { ChevronLeft, KeyRound, MailPlus, MonitorCog, Settings, Shield, SlidersHorizontal } from "lucide-react";
+import { ChevronLeft, KeyRound, MailPlus, MonitorCog, Puzzle, Settings, Shield, SlidersHorizontal } from "lucide-react";
import { sidebarBadgesApi } from "@/api/sidebarBadges";
import { ApiError } from "@/api/client";
import { Link } from "@/lib/router";
import { queryKeys } from "@/lib/queryKeys";
import { useCompany } from "@/context/CompanyContext";
import { useSidebar } from "@/context/SidebarContext";
+import { usePluginSlots } from "@/plugins/slots";
import { SidebarNavItem } from "./SidebarNavItem";
export function CompanySettingsSidebar() {
const { selectedCompany, selectedCompanyId } = useCompany();
const { isMobile, setSidebarOpen } = useSidebar();
+ const { slots: companySettingsPluginSlots } = usePluginSlots({
+ slotTypes: ["companySettingsPage"],
+ companyId: selectedCompanyId,
+ enabled: !!selectedCompanyId,
+ });
const { data: badges } = useQuery({
queryKey: selectedCompanyId
? queryKeys.sidebarBadges(selectedCompanyId)
@@ -67,6 +73,17 @@ export function CompanySettingsSidebar() {
badge={badges?.joinRequests ?? 0}
end
/>
+ {companySettingsPluginSlots
+ .filter((slot) => slot.routePath)
+ .map((slot) => (
+
+ ))}
diff --git a/ui/src/pages/CompanySettingsPluginPage.test.tsx b/ui/src/pages/CompanySettingsPluginPage.test.tsx
new file mode 100644
index 00000000000..5c22a35057e
--- /dev/null
+++ b/ui/src/pages/CompanySettingsPluginPage.test.tsx
@@ -0,0 +1,140 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { CompanySettingsPluginPage } from "./CompanySettingsPluginPage";
+
+const mockSetBreadcrumbs = vi.hoisted(() => vi.fn());
+const mockUsePluginSlots = vi.hoisted(() => vi.fn());
+const mockParams = vi.hoisted(() => ({
+ companyPrefix: "PAP" as string | undefined,
+ settingsRoutePath: "permissions" as string | undefined,
+}));
+
+vi.mock("@/context/BreadcrumbContext", () => ({
+ useBreadcrumbs: () => ({
+ setBreadcrumbs: mockSetBreadcrumbs,
+ }),
+}));
+
+vi.mock("@/context/CompanyContext", () => ({
+ useCompany: () => ({
+ companies: [{ id: "company-1", name: "Paperclip", issuePrefix: "PAP" }],
+ selectedCompanyId: "company-1",
+ }),
+}));
+
+vi.mock("@/lib/router", () => ({
+ Link: ({ to, children }: { to: string; children: React.ReactNode }) => {children},
+ useLocation: () => ({ pathname: "/PAP/company/settings/permissions", search: "", hash: "" }),
+ useParams: () => mockParams,
+}));
+
+vi.mock("@/plugins/slots", () => ({
+ usePluginSlots: mockUsePluginSlots,
+ PluginSlotMount: ({
+ slot,
+ context,
+ }: {
+ slot: { displayName: string };
+ context: { companyId: string | null; companyPrefix: string | null };
+ }) => (
+
+ {slot.displayName}:{context.companyId}:{context.companyPrefix}
+
+ ),
+}));
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+async function flushReact() {
+ await act(async () => {
+ await Promise.resolve();
+ await new Promise((resolve) => window.setTimeout(resolve, 0));
+ });
+}
+
+async function renderPage(container: HTMLDivElement) {
+ const root = createRoot(container);
+ const queryClient = new QueryClient({
+ defaultOptions: { queries: { retry: false } },
+ });
+
+ await act(async () => {
+ root.render(
+
+
+ ,
+ );
+ });
+ await flushReact();
+ return root;
+}
+
+describe("CompanySettingsPluginPage", () => {
+ let container: HTMLDivElement;
+
+ beforeEach(() => {
+ container = document.createElement("div");
+ document.body.appendChild(container);
+ mockParams.companyPrefix = "PAP";
+ mockParams.settingsRoutePath = "permissions";
+ mockUsePluginSlots.mockReturnValue({
+ slots: [
+ {
+ type: "companySettingsPage",
+ id: "permissions",
+ displayName: "Permissions",
+ exportName: "PermissionsPage",
+ routePath: "permissions",
+ pluginId: "plugin-1",
+ pluginKey: "paperclip-ee",
+ pluginDisplayName: "Paperclip EE",
+ pluginVersion: "0.1.0",
+ },
+ ],
+ isLoading: false,
+ errorMessage: null,
+ });
+ });
+
+ afterEach(() => {
+ container.remove();
+ document.body.innerHTML = "";
+ vi.clearAllMocks();
+ });
+
+ it("mounts the matching company settings slot with company context", async () => {
+ const root = await renderPage(container);
+
+ expect(container.querySelector('[data-testid="plugin-slot-mount"]')?.textContent).toBe(
+ "Permissions:company-1:PAP",
+ );
+ expect(mockSetBreadcrumbs).toHaveBeenCalledWith([
+ { label: "Settings", href: "/company/settings" },
+ { label: "Permissions" },
+ ]);
+
+ await act(async () => {
+ root.unmount();
+ });
+ });
+
+ it("fails closed when no ready plugin declares the route", async () => {
+ mockUsePluginSlots.mockReturnValue({
+ slots: [],
+ isLoading: false,
+ errorMessage: null,
+ });
+ const root = await renderPage(container);
+
+ expect(container.textContent).toContain("Page not found");
+
+ await act(async () => {
+ root.unmount();
+ });
+ });
+});
diff --git a/ui/src/pages/CompanySettingsPluginPage.tsx b/ui/src/pages/CompanySettingsPluginPage.tsx
new file mode 100644
index 00000000000..e4961a369c3
--- /dev/null
+++ b/ui/src/pages/CompanySettingsPluginPage.tsx
@@ -0,0 +1,88 @@
+import { useEffect, useMemo } from "react";
+import { useParams } from "@/lib/router";
+import { useBreadcrumbs } from "@/context/BreadcrumbContext";
+import { useCompany } from "@/context/CompanyContext";
+import { PluginSlotMount, usePluginSlots } from "@/plugins/slots";
+import { NotFoundPage } from "./NotFound";
+
+export function CompanySettingsPluginPage() {
+ const params = useParams<{
+ companyPrefix?: string;
+ settingsRoutePath?: string;
+ }>();
+ const { companyPrefix: routeCompanyPrefix, settingsRoutePath } = params;
+ const { companies, selectedCompanyId } = useCompany();
+ const { setBreadcrumbs } = useBreadcrumbs();
+
+ const routeCompany = useMemo(() => {
+ if (!routeCompanyPrefix) return null;
+ const requested = routeCompanyPrefix.toUpperCase();
+ return companies.find((company) => company.issuePrefix.toUpperCase() === requested) ?? null;
+ }, [companies, routeCompanyPrefix]);
+ const hasInvalidCompanyPrefix = Boolean(routeCompanyPrefix) && !routeCompany;
+ const resolvedCompanyId = routeCompany?.id ?? (routeCompanyPrefix ? null : selectedCompanyId ?? null);
+ const companyPrefix = resolvedCompanyId
+ ? companies.find((company) => company.id === resolvedCompanyId)?.issuePrefix ?? null
+ : null;
+
+ const { slots, isLoading, errorMessage } = usePluginSlots({
+ slotTypes: ["companySettingsPage"],
+ companyId: resolvedCompanyId,
+ enabled: Boolean(resolvedCompanyId && settingsRoutePath),
+ });
+
+ const pageSlots = useMemo(() => {
+ if (!settingsRoutePath) return [];
+ return slots.filter((slot) => slot.routePath === settingsRoutePath);
+ }, [settingsRoutePath, slots]);
+
+ const pageSlot = pageSlots.length === 1 ? pageSlots[0] : null;
+
+ useEffect(() => {
+ if (!pageSlot) return;
+ setBreadcrumbs([
+ { label: "Settings", href: "/company/settings" },
+ { label: pageSlot.displayName },
+ ]);
+ }, [pageSlot, setBreadcrumbs]);
+
+ if (!resolvedCompanyId) {
+ if (hasInvalidCompanyPrefix) {
+ return ;
+ }
+ return Select a company to view this page.
;
+ }
+
+ if (!settingsRoutePath || isLoading) {
+ return Loading...
;
+ }
+
+ if (errorMessage) {
+ return (
+
+ Plugin extensions unavailable: {errorMessage}
+
+ );
+ }
+
+ if (pageSlots.length > 1) {
+ return (
+
+ Multiple plugins declare the company settings route {settingsRoutePath}. Disable one plugin or change its route.
+
+ );
+ }
+
+ if (!pageSlot) {
+ return ;
+ }
+
+ return (
+
+ );
+}