impl(#409): SSO 4d/4: SSO config page + route (split from #355)

apps/admin/src/pages/organization/org-sso.tsx

@@ -0,0 +1,137 @@
+import { useEffect, useState } from 'react';
+import type { FormEvent } from 'react';
+import { usePermissions } from '../../hooks/use-permissions';
+import { useSsoConfig } from '../../hooks/use-sso-config';
+
+interface SsoFormValues {
+  issuerUrl: string;
+  clientId: string;
+  allowedDomains: string;
+  enforceSso: boolean;
+}
+
+const DEFAULT_FORM_VALUES: SsoFormValues = {
+  issuerUrl: '',
+  clientId: '',
+  allowedDomains: '',
+  enforceSso: false,
+};
+
+export default function OrgSsoPage() {
+  const { isSystemAdmin, orgRole, isLoading: isLoadingPermissions } = usePermissions();
+  const canManageSso = isSystemAdmin || orgRole === 'admin' || orgRole === 'owner';
+
+  // Hooks always run regardless of the early returns below, so the query
+  // itself (not just the rendered form) must stay disabled for a
+  // non-admin or while permissions are still resolving.
+  const { config, isLoading, error, updateConfig } = useSsoConfig({
+    enabled: canManageSso && !isLoadingPermissions,
+  });
+
+  const [formValues, setFormValues] = useState<SsoFormValues>(DEFAULT_FORM_VALUES);
+  const [clientSecretInput, setClientSecretInput] = useState('');
+
+  useEffect(() => {
+    if (!config) {
+      return;
+    }
+    setFormValues({
+      issuerUrl: config.issuerUrl ?? '',
+      clientId: config.clientId ?? '',
+      allowedDomains: (config.allowedDomains ?? []).join(', '),
+      enforceSso: config.enforceSso ?? false,
+    });
+  }, [config]);
+
+  if (isLoadingPermissions) {
+    return null;
+  }
+  if (!canManageSso) {
+    // Fails closed without an API round trip: orgRole/isSystemAdmin come
+    // from the already-resolved usePermissions() query, and useSsoConfig()
+    // above never fired for this user.
+    return null;
+  }
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    await updateConfig({
+      issuerUrl: formValues.issuerUrl,
+      clientId: formValues.clientId,
+      allowedDomains: formValues.allowedDomains
+        .split(',')
+        .map((domain) => domain.trim())
+        .filter(Boolean),
+      enforceSso: formValues.enforceSso,
+      // Omit clientSecret entirely when the user didn't type a new one -
+      // never coerce to an empty string, which would defeat the
+      // optional-field contract on the backend.
+      ...(clientSecretInput ? { clientSecret: clientSecretInput } : {}),
+    });
+    setClientSecretInput('');
+  }
+
+  return (
+    <div>
+      <h1>SSO Configuration</h1>
+      {isLoading && <p>Loading...</p>}
+      {error && <p role="alert">{error.message}</p>}
+      <form onSubmit={handleSubmit}>
+        <label htmlFor="sso-issuer-url">Issuer URL</label>
+        <input
+          id="sso-issuer-url"
+          type="text"
+          value={formValues.issuerUrl}
+          onChange={(event) =>
+            setFormValues((prev) => ({ ...prev, issuerUrl: event.target.value }))
+          }
+        />
+
+        <label htmlFor="sso-client-id">Client ID</label>
+        <input
+          id="sso-client-id"
+          type="text"
+          value={formValues.clientId}
+          onChange={(event) => setFormValues((prev) => ({ ...prev, clientId: event.target.value }))}
+        />
+
+        {/* Never populate value/defaultValue with a real secret - only the
+            boolean hasClientSecret drives the "currently set" indicator. */}
+        <label htmlFor="sso-client-secret">
+          Client Secret {config?.hasClientSecret ? '(currently set)' : '(not set)'}
+        </label>
+        <input
+          id="sso-client-secret"
+          type="password"
+          value={clientSecretInput}
+          placeholder={config?.hasClientSecret ? '••••••••' : ''}
+          onChange={(event) => setClientSecretInput(event.target.value)}
+        />
+
+        <label htmlFor="sso-allowed-domains">Allowed Domains (comma-separated)</label>
+        <input
+          id="sso-allowed-domains"
+          type="text"
+          value={formValues.allowedDomains}
+          onChange={(event) =>
+            setFormValues((prev) => ({ ...prev, allowedDomains: event.target.value }))
+          }
+        />
+
+        <label htmlFor="sso-enforce">
+          <input
+            id="sso-enforce"
+            type="checkbox"
+            checked={formValues.enforceSso}
+            onChange={(event) =>
+              setFormValues((prev) => ({ ...prev, enforceSso: event.target.checked }))
+            }
+          />
+          Enforce SSO
+        </label>
+
+        <button type="submit">Save</button>
+      </form>
+    </div>
+  );
+}

apps/admin/src/tests/pages/org-sso.test.tsx

@@ -0,0 +1,56 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import OrgSsoPage from '../../pages/organization/org-sso';
+import { usePermissions } from '../../hooks/use-permissions';
+import { useSsoConfig } from '../../hooks/use-sso-config';
+
+vi.mock('../../hooks/use-permissions', () => ({
+  usePermissions: vi.fn(),
+}));
+
+// useSsoConfig is a @tanstack/react-query hook; mocking the module
+// directly avoids needing a QueryClientProvider ancestor, same fix as
+// dedup-rules-back-nav.test.tsx uses for useDedupRules().
+vi.mock('../../hooks/use-sso-config', () => ({
+  useSsoConfig: vi.fn(),
+}));
+
+describe('OrgSsoPage', () => {
+  it('renders the SSO config form for an org admin and enables the query', () => {
+    vi.mocked(usePermissions).mockReturnValue({
+      isSystemAdmin: false,
+      orgRole: 'admin',
+      isLoading: false,
+    } as ReturnType<typeof usePermissions>);
+    vi.mocked(useSsoConfig).mockReturnValue({
+      config: undefined,
+      isLoading: true,
+      error: null,
+      updateConfig: vi.fn(),
+    } as ReturnType<typeof useSsoConfig>);
+
+    render(<OrgSsoPage />);
+
+    expect(useSsoConfig).toHaveBeenCalledWith({ enabled: true });
+    expect(screen.getByRole('heading', { name: /sso/i })).toBeInTheDocument();
+  });
+
+  it('does not render the SSO config form for a regular member, and does not enable the query', () => {
+    vi.mocked(usePermissions).mockReturnValue({
+      isSystemAdmin: false,
+      orgRole: 'member',
+      isLoading: false,
+    } as ReturnType<typeof usePermissions>);
+    vi.mocked(useSsoConfig).mockReturnValue({
+      config: undefined,
+      isLoading: false,
+      error: null,
+      updateConfig: vi.fn(),
+    } as ReturnType<typeof useSsoConfig>);
+
+    render(<OrgSsoPage />);
+
+    expect(useSsoConfig).toHaveBeenCalledWith({ enabled: false });
+    expect(screen.queryByRole('heading', { name: /sso/i })).not.toBeInTheDocument();
+  });
+});