@stigmer/react 3.32.0 → 3.33.0

package/src/platform-client/__tests__/PlatformClientListPanel.test.tsx

@@ -0,0 +1,140 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import { timestampFromDate } from "@bufbuild/protobuf/wkt";
+import {
+  PlatformClientSchema,
+  type PlatformClient,
+} from "@stigmer/protos/ai/stigmer/iam/platformclient/v1/api_pb";
+import type { CheckMyPermissionInput } from "@stigmer/protos/ai/stigmer/iam/iampolicy/v1/io_pb";
+import { StigmerContext } from "../../context";
+import { PlatformClientListPanel } from "../PlatformClientListPanel";
+
+/**
+ * Pins what each row of the list says and offers:
+ *
+ *   - when the client last minted a token, "Used 5m" in the SDK's compact
+ *     vocabulary, or "Never used" (stigmer/stigmer#1255);
+ *   - Edit only with `can_edit` and Delete only with `can_delete` on the
+ *     client, checked through the real permission hook, so an organization
+ *     admin who may view a client they did not create is handed neither
+ *     (stigmer/stigmer#1302);
+ *   - an empty list says "No platform clients configured." unless the host
+ *     passes the empty state for a caller who may not manage clients.
+ *
+ * The data hook is stubbed; the delete hook is never exercised here.
+ */
+
+const stubs = vi.hoisted(() => ({
+  clients: [] as PlatformClient[],
+}));
+
+vi.mock("../usePlatformClientList.js", () => ({
+  usePlatformClientList: () => ({
+    platformClients: stubs.clients,
+    isLoading: false,
+    isRefetching: false,
+    error: null,
+    refetch: () => {},
+  }),
+}));
+
+const NOW = new Date("2026-09-28T12:00:00Z");
+
+function client(id: string, name: string, lastUsedAt?: Date): PlatformClient {
+  return create(PlatformClientSchema, {
+    metadata: { id, name, slug: id, org: "acme" },
+    spec: { clientId: `cid-${id}`, neverExpires: true },
+    ...(lastUsedAt !== undefined
+      ? { status: { lastUsedAt: timestampFromDate(lastUsedAt) } }
+      : {}),
+  });
+}
+
+function renderList(
+  checkMyPermission: (
+    input: CheckMyPermissionInput,
+  ) => Promise<{ isAuthorized: boolean }>,
+  props: { emptyState?: string } = {},
+) {
+  const stigmer = { iamPolicy: { checkMyPermission } } as never;
+  return render(
+    <StigmerContext.Provider value={stigmer}>
+      <PlatformClientListPanel
+        org="acme"
+        onEdit={() => {}}
+        now={NOW}
+        {...props}
+      />
+    </StigmerContext.Provider>,
+  );
+}
+
+afterEach(() => {
+  cleanup();
+  stubs.clients = [];
+});
+
+describe("PlatformClientListPanel rows", () => {
+  it("says when each client last minted a token, or that it never did", () => {
+    stubs.clients = [
+      client("pcl_used", "Dashboard", new Date(NOW.getTime() - 5 * 60_000)),
+      client("pcl_idle", "Mobile"),
+    ];
+    renderList(async () => ({ isAuthorized: true }));
+
+    expect(screen.getByText("Used 5m")).toBeTruthy();
+    expect(screen.getByText("Never used")).toBeTruthy();
+  });
+
+  it("offers Edit only with can_edit and Delete only with can_delete on the client", async () => {
+    stubs.clients = [client("pcl_dash", "Dashboard")];
+    const checkMyPermission = vi.fn(async (input: CheckMyPermissionInput) => ({
+      isAuthorized: input.relation === "can_delete",
+    }));
+    renderList(checkMyPermission);
+
+    await screen.findByRole("button", { name: "Delete Dashboard" });
+    expect(screen.queryByRole("button", { name: "Edit Dashboard" })).toBeNull();
+    const asked = checkMyPermission.mock.calls.map(
+      ([input]) =>
+        `${input.resource?.kind}:${input.resource?.id}:${input.relation}`,
+    );
+    expect(asked.sort()).toEqual([
+      "platform_client:pcl_dash:can_delete",
+      "platform_client:pcl_dash:can_edit",
+    ]);
+  });
+
+  it("an admin who did not create the client sees it with neither control", async () => {
+    stubs.clients = [client("pcl_dash", "Dashboard")];
+    const checkMyPermission = vi.fn(async (_input: CheckMyPermissionInput) => ({
+      isAuthorized: false,
+    }));
+    renderList(checkMyPermission);
+
+    await waitFor(() => expect(checkMyPermission).toHaveBeenCalledTimes(2));
+    expect(screen.getByText("Dashboard")).toBeTruthy();
+    await waitFor(() => {
+      expect(screen.queryByRole("button", { name: "Edit Dashboard" })).toBeNull();
+      expect(screen.queryByRole("button", { name: "Delete Dashboard" })).toBeNull();
+    });
+  });
+});
+
+describe("PlatformClientListPanel empty state", () => {
+  it("says none is configured by default", () => {
+    renderList(async () => ({ isAuthorized: true }));
+    expect(screen.getByText("No platform clients configured.")).toBeTruthy();
+  });
+
+  it("says what the host passes instead", () => {
+    renderList(async () => ({ isAuthorized: true }), {
+      emptyState: "Platform clients are managed by your organization's admins.",
+    });
+    expect(
+      screen.getByText("Platform clients are managed by your organization's admins."),
+    ).toBeTruthy();
+    expect(screen.queryByText("No platform clients configured.")).toBeNull();
+  });
+});

package/src/platform-client/copy.ts

@@ -0,0 +1,15 @@
+/**
+ * Platform-client copy shared by more than one surface, so the settings
+ * section and anything else that lists an organization's platform clients
+ * say the same thing.
+ *
+ * A platform client is a credential: its creator and the organization's
+ * admins see it, and other members may not see it at all. An empty list is
+ * therefore not evidence that none exists, so a caller who may not create
+ * platform clients is told who manages them instead of being told that
+ * nothing is configured (stigmer/stigmer#1302).
+ */
+
+/** Shown in place of the empty state to a caller who may not create platform clients. */
+export const PLATFORM_CLIENTS_MANAGED_BY_ADMINS =
+  "Platform clients are managed by your organization's admins.";

package/src/settings/PlatformClientsSection.tsx

@@ -7,8 +7,10 @@ import { PlatformClientListPanel } from "../platform-client/PlatformClientListPa
 import { CreatePlatformClientForm } from "../platform-client/CreatePlatformClientForm.js";
 import { PlatformClientDetailPanel } from "../platform-client/PlatformClientDetailPanel.js";
 import { PlatformClientSecretAlert } from "../platform-client/PlatformClientSecretAlert.js";
+import { PLATFORM_CLIENTS_MANAGED_BY_ADMINS } from "../platform-client/copy.js";
+import { useCheckPermission } from "../iam-policy/useCheckPermission.js";
 import { CloudFeatureNotice } from "../internal/CloudFeatureNotice.js";
-import { useActiveOrgSlug } from "../organization/OrgProvider.js";
+import { useActiveOrgId, useActiveOrgSlug } from "../organization/OrgProvider.js";
 import { useServerInfo } from "../server-info.js";
 
 type FlowState =
@@ -32,13 +34,30 @@ type FlowState =
  * A server too old to say either way is offered the button, and its own
  * answer to the create decides: the section never claims a limitation the
  * server did not report. Until the server has answered, it offers neither.
+ *
+ * The button also needs the caller to hold `can_create_platform_client` on
+ * the organization, which the model gives its admins. The list shows only
+ * the clients the caller may view (each client's creator and the
+ * organization's admins), so a caller who may not create them is told that
+ * the organization's admins manage them rather than that none is
+ * configured.
  */
 export function PlatformClientsSection() {
   const headingId = useId();
   const org = useActiveOrgSlug();
+  const orgId = useActiveOrgId();
   const { serverInfo } = useServerInfo();
   const trustsEveryRequest = serverInfo?.authenticationRequired === false;
   const canMint = serverInfo !== null && !trustsEveryRequest;
+  const createCheck = useCheckPermission(
+    orgId ? { kind: "organization", id: orgId } : null,
+    "can_create_platform_client",
+  );
+  const canCreate = !createCheck.isLoading && createCheck.allowed;
+  const deniedCreate = !createCheck.isLoading && !createCheck.allowed;
+  const emptyState = deniedCreate
+    ? PLATFORM_CLIENTS_MANAGED_BY_ADMINS
+    : undefined;
 
   const [flow, setFlow] = useState<FlowState>({ phase: "idle" });
   const listRefetchRef = useRef<(() => void) | null>(null);
@@ -93,7 +112,7 @@ export function PlatformClientsSection() {
           Platform Clients
         </h2>
 
-        {canMint && org && flow.phase === "idle" && (
+        {canMint && canCreate && org && flow.phase === "idle" && (
           <button
             type="button"
             onClick={() => setFlow({ phase: "creating" })}
@@ -140,6 +159,7 @@ export function PlatformClientsSection() {
               setFlow({ phase: "editing", platformClient: pc })
             }
             onRefetchRef={handleRefetchRef}
+            emptyState={emptyState}
           />
         </div>
       ) : flow.phase === "editing" ? (
@@ -159,6 +179,7 @@ export function PlatformClientsSection() {
             setFlow({ phase: "editing", platformClient: pc })
           }
           onRefetchRef={handleRefetchRef}
+          emptyState={emptyState}
         />
       )}
     </section>

package/src/settings/__tests__/PlatformClientsSection.test.tsx

@@ -7,8 +7,15 @@
  * old to report its posture it offers the button and no notice, because a
  * console that ships ahead of its server must not claim a limitation the
  * server never reported; while the server's answer is still loading it
- * offers neither, so no button flashes and disappears. The list panel is
- * proven by its own tests and stubbed here.
+ * offers neither, so no button flashes and disappears.
+ *
+ * And its caller gate (stigmer/stigmer#1302): the button also needs
+ * `can_create_platform_client` on the organization, checked on the
+ * organization's id and never offered while the check is in flight; a
+ * caller the server refuses is told the organization's admins manage
+ * platform clients, in place of the list's own empty state. The list panel
+ * is proven by its own tests and stubbed here; the permission check is
+ * stubbed.
  */
 import { describe, it, expect, vi, afterEach } from "vitest";
 import { cleanup, render, screen } from "@testing-library/react";
@@ -16,15 +23,46 @@ import type { UseServerInfoReturn } from "../../server-info";
 
 let serverInfo: UseServerInfoReturn;
 
+const permission = vi.hoisted(() => ({
+  allowed: true,
+  isLoading: false,
+  checked: [] as Array<[string, string, string]>,
+}));
+
 vi.mock("../../server-info.js", () => ({
   useServerInfo: () => serverInfo,
 }));
 vi.mock("../../organization/OrgProvider.js", () => ({
   useActiveOrgSlug: () => "acme",
+  useActiveOrgId: () => "org_acme",
+}));
+vi.mock("../../iam-policy/useCheckPermission.js", () => ({
+  useCheckPermission: (
+    resource: { kind: string; id: string } | null,
+    relation: string,
+  ) => {
+    if (resource !== null) {
+      permission.checked.push([resource.kind, resource.id, relation]);
+    }
+    return {
+      allowed: permission.allowed,
+      isLoading: permission.isLoading,
+      error: null,
+    };
+  },
 }));
 vi.mock("../../platform-client/PlatformClientListPanel.js", () => ({
-  PlatformClientListPanel: ({ org }: { org: string }) => (
-    <div data-testid="list-panel">clients of {org}</div>
+  PlatformClientListPanel: ({
+    org,
+    emptyState,
+  }: {
+    org: string;
+    emptyState?: string;
+  }) => (
+    <div data-testid="list-panel">
+      clients of {org}
+      {emptyState !== undefined && <p data-testid="empty-state">{emptyState}</p>}
+    </div>
   ),
 }));
 
@@ -52,7 +90,12 @@ const LOADING: UseServerInfoReturn = {
   error: null,
 };
 
-afterEach(cleanup);
+afterEach(() => {
+  cleanup();
+  permission.allowed = true;
+  permission.isLoading = false;
+  permission.checked = [];
+});
 
 describe("PlatformClientsSection's posture gate", () => {
   it("offers the create button and no notice on a server that authenticates its callers", () => {
@@ -97,3 +140,47 @@ describe("PlatformClientsSection's posture gate", () => {
     expect(screen.queryByText(/trusts every request/i)).toBeNull();
   });
 });
+
+describe("PlatformClientsSection's caller gate", () => {
+  it("checks can_create_platform_client on the active organization's id", () => {
+    serverInfo = answering(true);
+    render(<PlatformClientsSection />);
+    expect(permission.checked).toContainEqual([
+      "organization",
+      "org_acme",
+      "can_create_platform_client",
+    ]);
+  });
+
+  it("offers the create button to a caller who may create, and keeps the list's own empty state", () => {
+    serverInfo = answering(true);
+    render(<PlatformClientsSection />);
+    expect(
+      screen.getByRole("button", { name: /new platform client/i }),
+    ).toBeTruthy();
+    expect(screen.queryByTestId("empty-state")).toBeNull();
+  });
+
+  it("offers no create button to a caller the server refuses, and says who manages platform clients", () => {
+    serverInfo = answering(true);
+    permission.allowed = false;
+    render(<PlatformClientsSection />);
+    expect(
+      screen.queryByRole("button", { name: /new platform client/i }),
+    ).toBeNull();
+    expect(screen.getByTestId("empty-state").textContent).toBe(
+      "Platform clients are managed by your organization's admins.",
+    );
+  });
+
+  it("offers nothing and claims nothing while the check is in flight", () => {
+    serverInfo = answering(true);
+    permission.isLoading = true;
+    permission.allowed = false;
+    render(<PlatformClientsSection />);
+    expect(
+      screen.queryByRole("button", { name: /new platform client/i }),
+    ).toBeNull();
+    expect(screen.queryByTestId("empty-state")).toBeNull();
+  });
+});