@tidecloak/ui-framework 0.0.1

package/src/components/pages/connected/RolesPage.tsx

@@ -0,0 +1,525 @@
+/**
+ * RolesPage - Create and manage roles with policy support
+ *
+ * @example
+ * ```tsx
+ * <RolesPage
+ *   adminAPI={AdminAPI}
+ *   policyAPI={policyAPI}
+ *   tideContext={tideContext}
+ *   currentUsername={username}
+ * />
+ * ```
+ */
+
+import { useEffect, useState } from "react";
+import { AdminAPI as DefaultAdminAPI } from "@tidecloak/js";
+import { RolesPageBase, type RolesPageBaseProps, type RoleItem, type RoleTypeConfig } from "../base";
+import { type TemplateAPI } from "./TemplatesPage";
+import { type PolicyApprovalData } from "./ApprovalsPage";
+import { type PolicyLogsAPI } from "./LogsPage";
+import {
+  loadTideLibs,
+  areTideLibsAvailable,
+  createTidePolicyHandler,
+  type TideContextMethods,
+} from "../../../tide";
+
+// Type for the AdminAPI instance
+type AdminAPIInstance = {
+  setRealm?: (realm: string) => void;
+  // Realm roles
+  getRoles: () => Promise<any>;
+  createRole: (role: any) => Promise<any>;
+  updateRole: (roleName: string, role: any) => Promise<any>;
+  deleteRole: (roleName: string) => Promise<any>;
+  // Client roles
+  getClientRoles?: (clientId?: string) => Promise<any>;
+  createClientRole?: (role: any, clientId?: string) => Promise<any>;
+  updateClientRole?: (roleName: string, role: any, clientId?: string) => Promise<any>;
+  deleteClientRole?: (roleName: string, clientId?: string) => Promise<any>;
+  // Other
+  getTemplates?: () => Promise<any>;
+  getUsers?: () => Promise<any>;
+  getPendingChangeSets?: () => Promise<any>;
+};
+
+export interface RolePolicy {
+  roleName: string;
+  enabled: boolean;
+  contractType: string;
+  approvalType: "implicit" | "explicit";
+  executionType: "public" | "private";
+  threshold: number;
+  templateId?: string;
+  templateParams?: Record<string, any>;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+/** Implement this to store role policies (or use createLocalStoragePolicyAPI for dev) */
+export interface PolicyAPI {
+  getPolicy: (roleName: string) => Promise<RolePolicy | null>;
+  upsertPolicy: (policy: RolePolicy) => Promise<RolePolicy | void>;
+  deletePolicy?: (roleName: string) => Promise<void>;
+  _isLocalStorage?: boolean;
+}
+
+const POLICY_STORAGE_KEY = "tidecloak_role_policies";
+
+/** localStorage adapter for development */
+export function createLocalStoragePolicyAPI(storageKey = POLICY_STORAGE_KEY): PolicyAPI {
+  const getAll = (): Record<string, RolePolicy> => {
+    try {
+      const data = localStorage.getItem(storageKey);
+      return data ? JSON.parse(data) : {};
+    } catch {
+      return {};
+    }
+  };
+
+  const saveAll = (policies: Record<string, RolePolicy>) => {
+    localStorage.setItem(storageKey, JSON.stringify(policies));
+  };
+
+  return {
+    _isLocalStorage: true as const,
+
+    getPolicy: async (roleName: string) => {
+      const policies = getAll();
+      return policies[roleName] || null;
+    },
+
+    upsertPolicy: async (policy: RolePolicy) => {
+      const policies = getAll();
+      const now = new Date().toISOString();
+      const existing = policies[policy.roleName];
+
+      policies[policy.roleName] = {
+        ...policy,
+        createdAt: existing?.createdAt || now,
+        updatedAt: now,
+      };
+
+      saveAll(policies);
+      return policies[policy.roleName];
+    },
+
+    deletePolicy: async (roleName: string) => {
+      const policies = getAll();
+      delete policies[roleName];
+      saveAll(policies);
+    },
+  };
+}
+
+export interface RolesPageProps<T extends RoleItem = RoleItem>
+  extends Omit<
+    RolesPageBaseProps<T>,
+    | "fetchRoles"
+    | "fetchTemplates"
+    | "fetchUsers"
+    | "fetchPendingApprovals"
+    | "fetchRolePolicy"
+    | "onCreate"
+    | "onUpdate"
+    | "onDelete"
+    | "onCreatePolicy"
+    | "toast"
+    | "invalidateQueries"
+    | "components"
+    | "roleType"
+  > {
+  /** AdminAPI instance */
+  adminAPI?: AdminAPIInstance;
+  /** Template adapter for policy templates */
+  templateAPI?: TemplateAPI;
+  /** Policy storage adapter */
+  policyAPI?: PolicyAPI;
+  /** Policy logs adapter for activity tracking */
+  policyLogsAPI?: PolicyLogsAPI;
+  /** Tide context for enclave workflow (from useTideCloak hook) */
+  tideContext?: TideContextMethods;
+  /** Callback when Tide policy request is created */
+  onTideRequestCreated?: (request: any, roleName: string) => Promise<void>;
+  /** Realm name */
+  realm?: string;
+  /** Role type: 'realm', 'client', or 'all' (default: 'realm') */
+  roleType?: RoleTypeConfig;
+  /** Override fetch roles */
+  fetchRoles?: RolesPageBaseProps<T>["fetchRoles"];
+  /** Override create */
+  onCreate?: RolesPageBaseProps<T>["onCreate"];
+  /** Override update */
+  onUpdate?: RolesPageBaseProps<T>["onUpdate"];
+  /** Override delete */
+  onDelete?: RolesPageBaseProps<T>["onDelete"];
+  /** Override policy creation */
+  onCreatePolicy?: RolesPageBaseProps<T>["onCreatePolicy"];
+  /** Toast handler */
+  toast?: RolesPageBaseProps<T>["toast"];
+  /** Query invalidation */
+  invalidateQueries?: RolesPageBaseProps<T>["invalidateQueries"];
+  /** Custom components */
+  components?: RolesPageBaseProps<T>["components"];
+  /** Help text below description */
+  helpText?: RolesPageBaseProps<T>["helpText"];
+  /** Current username for logging */
+  currentUsername?: string;
+}
+
+// Warning banner for localStorage
+function LocalStorageWarning({ type }: { type: "policy" | "template" | "both" }) {
+  const typeText = type === "both" ? "Policies and templates" : type === "policy" ? "Policies" : "Templates";
+  const apiText = type === "both" ? "PolicyAPI and TemplateAPI" : type === "policy" ? "PolicyAPI" : "TemplateAPI";
+
+  return (
+    <div
+      style={{
+        backgroundColor: "#fef3c7",
+        border: "1px solid #f59e0b",
+        borderRadius: "0.375rem",
+        padding: "0.75rem 1rem",
+        marginBottom: "1rem",
+        display: "flex",
+        alignItems: "flex-start",
+        gap: "0.5rem",
+      }}
+    >
+      <span style={{ fontSize: "1rem" }}>⚠️</span>
+      <div style={{ fontSize: "0.875rem", color: "#92400e" }}>
+        <strong>Development Mode:</strong> {typeText} are stored in browser localStorage and will not persist across
+        devices or browsers. For production, implement your own{" "}
+        <code style={{ backgroundColor: "#fde68a", padding: "0 0.25rem", borderRadius: "0.25rem" }}>{apiText}</code>{" "}
+        with a backend database.
+      </div>
+    </div>
+  );
+}
+
+export function RolesPage<T extends RoleItem = RoleItem>({
+  adminAPI: adminAPIProp,
+  templateAPI,
+  policyAPI,
+  policyLogsAPI,
+  tideContext,
+  onTideRequestCreated,
+  realm,
+  roleType = "realm",
+  fetchRoles: fetchRolesProp,
+  onCreate: onCreateProp,
+  onUpdate: onUpdateProp,
+  onDelete: onDeleteProp,
+  onCreatePolicy: onCreatePolicyProp,
+  helpText: helpTextProp,
+  currentUsername,
+  ...props
+}: RolesPageProps<T>) {
+  // Track if Tide libraries are available
+  const [tideLibsReady, setTideLibsReady] = useState(false);
+
+  // Load Tide libraries on mount
+  useEffect(() => {
+    loadTideLibs().then((available) => {
+      setTideLibsReady(available);
+    });
+  }, []);
+
+  // Check if using localStorage APIs
+  const isPolicyLocalStorage = policyAPI?._isLocalStorage === true;
+  const isTemplateLocalStorage = templateAPI?._isLocalStorage === true;
+  // Use provided AdminAPI instance or fall back to default singleton
+  const api = (adminAPIProp || DefaultAdminAPI) as AdminAPIInstance;
+
+  // Set realm if provided
+  if (realm && api.setRealm) {
+    api.setRealm(realm);
+  }
+
+  const fetchRoles =
+    fetchRolesProp ||
+    (async () => {
+      let roles: T[] = [];
+
+      if (roleType === "realm" || roleType === "all") {
+        const realmRoles = (await api.getRoles()) as T[];
+        // Mark as realm roles
+        roles = realmRoles.map((r) => ({ ...r, roleType: "realm" as const, clientRole: false }));
+      }
+
+      if ((roleType === "client" || roleType === "all") && api.getClientRoles) {
+        const clientRoles = (await api.getClientRoles()) as T[];
+        // Mark as client roles
+        const markedClientRoles = clientRoles.map((r) => ({ ...r, roleType: "client" as const, clientRole: true }));
+        roles = [...roles, ...markedClientRoles];
+      }
+
+      return { roles };
+    });
+
+  const fetchTemplates = async () => {
+    // Use templateAPI if provided, otherwise fall back to AdminAPI.getTemplates
+    if (templateAPI) {
+      const templates = await templateAPI.getTemplates();
+      return { templates: templates || [] };
+    }
+    const templates = api.getTemplates ? await api.getTemplates() : [];
+    return { templates: templates || [] };
+  };
+
+  const fetchUsers = async () => {
+    const users = api.getUsers ? await api.getUsers() : [];
+    return users || [];
+  };
+
+  const fetchPendingApprovals = async () => {
+    const approvals = api.getPendingChangeSets ? await api.getPendingChangeSets() : [];
+    return approvals || [];
+  };
+
+  // Fetch policy using PolicyAPI if provided
+  const fetchRolePolicy = policyAPI
+    ? async (roleName: string) => {
+        const policy = await policyAPI.getPolicy(roleName);
+        return { policy };
+      }
+    : async () => ({ policy: null });
+
+  const onCreate =
+    onCreateProp ||
+    (async (data: { name: string; description?: string; roleType?: "realm" | "client" }) => {
+      const targetType = data.roleType || (roleType === "client" ? "client" : "realm");
+
+      if (targetType === "client" && api.createClientRole) {
+        await api.createClientRole({ name: data.name, description: data.description });
+      } else {
+        await api.createRole({ name: data.name, description: data.description });
+      }
+    });
+
+  const onUpdate =
+    onUpdateProp ||
+    (async (data: { name: string; description?: string; clientRole?: boolean }) => {
+      // Check if it's a client role
+      if (data.clientRole && api.updateClientRole) {
+        await api.updateClientRole(data.name, { name: data.name, description: data.description });
+      } else {
+        await api.updateRole(data.name, { name: data.name, description: data.description });
+      }
+    });
+
+  const onDelete =
+    onDeleteProp ||
+    (async (roleName: string) => {
+      // For delete, we need to determine if it's a client role
+      // If roleType is 'client', use client API; if 'realm', use realm API
+      // If 'all', we try client first if available, then realm
+      if (roleType === "client" && api.deleteClientRole) {
+        await api.deleteClientRole(roleName);
+      } else if (roleType === "realm") {
+        await api.deleteRole(roleName);
+      } else if (roleType === "all") {
+        // Try to delete from all - one will succeed
+        // This is a limitation - ideally we'd know which type
+        try {
+          await api.deleteRole(roleName);
+        } catch {
+          if (api.deleteClientRole) {
+            await api.deleteClientRole(roleName);
+          }
+        }
+      } else {
+        await api.deleteRole(roleName);
+      }
+
+      // Also delete the policy if policyAPI is provided
+      if (policyAPI?.deletePolicy) {
+        try {
+          await policyAPI.deletePolicy(roleName);
+        } catch {
+          // Ignore policy deletion errors - role is already deleted
+        }
+      }
+
+      return { approvalCreated: false };
+    });
+
+  // Determine which policy creation handler to use
+  // Priority: 1. User-provided onCreatePolicy, 2. Tide workflow (if available), 3. PolicyAPI localStorage
+  const useTideWorkflow = tideContext && tideLibsReady && areTideLibsAvailable() && !onCreatePolicyProp;
+
+  // Helper to add a pending approval to PolicyApprovalsAPI
+  const addPendingApproval = async (
+    params: {
+      roleName: string;
+      policyConfig: any;
+      templateId?: string;
+      templateParams?: Record<string, any>;
+      threshold: number;
+    },
+    policyRequestData: string,
+    contractCode?: string,
+    requestedByEmail?: string
+  ) => {
+    const policyId = `policy-${params.roleName}-${Date.now()}`;
+    const approval: PolicyApprovalData = {
+      id: policyId,
+      roleId: params.roleName,
+      requestedBy: currentUsername || "unknown",
+      requestedByEmail,
+      threshold: params.threshold,
+      approvalCount: 0,
+      rejectionCount: 0,
+      commitReady: false,
+      approvedBy: [],
+      deniedBy: [],
+      status: "pending",
+      timestamp: Date.now(),
+      policyRequestData,
+      contractCode,
+    };
+
+    // Add to localStorage approvals (or custom API)
+    const storageKey = "tidecloak_policy_approvals";
+    try {
+      const existing = localStorage.getItem(storageKey);
+      const approvals: PolicyApprovalData[] = existing ? JSON.parse(existing) : [];
+      approvals.push(approval);
+      localStorage.setItem(storageKey, JSON.stringify(approvals));
+    } catch {
+      // Ignore localStorage errors
+    }
+
+    // Log the policy creation
+    if (policyLogsAPI) {
+      await policyLogsAPI.addLog({
+        policyId,
+        roleId: params.roleName,
+        action: "created",
+        performedBy: currentUsername || "unknown",
+        performedByEmail: requestedByEmail,
+        policyStatus: "pending",
+        policyThreshold: params.threshold,
+        approvalCount: 0,
+        rejectionCount: 0,
+      });
+    }
+  };
+
+  // Policy creation handler
+  const onCreatePolicy = (() => {
+    // 1. User provided custom handler - use it
+    if (onCreatePolicyProp) {
+      return onCreatePolicyProp;
+    }
+
+    // 2. Tide workflow available - use it as default
+    if (useTideWorkflow && tideContext) {
+      const tideHandler = createTidePolicyHandler(tideContext, onTideRequestCreated);
+
+      return async (params: {
+        roleName: string;
+        policyConfig: any;
+        templateId?: string;
+        templateParams?: Record<string, any>;
+        threshold: number;
+      }) => {
+        // Create Tide request (this creates and signs the PolicySignRequest)
+        // Returns the signed PolicySignRequest object
+        const signedRequest = await tideHandler(params);
+
+        // Encode the PolicySignRequest to bytes and convert to base64
+        // This is what the approval enclave needs to process the request
+        const requestBytes = signedRequest.encode();
+        const policyRequestData = btoa(String.fromCharCode(...requestBytes));
+
+        await addPendingApproval(params, policyRequestData);
+
+        // Also save to PolicyAPI for local tracking if provided
+        if (policyAPI) {
+          await policyAPI.upsertPolicy({
+            roleName: params.roleName,
+            enabled: params.policyConfig?.enabled ?? true,
+            contractType: params.policyConfig?.contractType || "tide",
+            approvalType: params.policyConfig?.approvalType || "explicit",
+            executionType: params.policyConfig?.executionType || "private",
+            threshold: params.threshold,
+            templateId: params.templateId,
+            templateParams: params.templateParams,
+          });
+        }
+      };
+    }
+
+    // 3. PolicyAPI only (localStorage or custom backend without Tide)
+    // Still add pending approval so it shows up in approvals page
+    return async (params: {
+      roleName: string;
+      policyConfig: any;
+      templateId?: string;
+      templateParams?: Record<string, any>;
+      threshold: number;
+    }) => {
+      // Add pending approval
+      const policyRequestData = JSON.stringify({
+        roleName: params.roleName,
+        templateId: params.templateId,
+        templateParams: params.templateParams,
+        threshold: params.threshold,
+        approvalType: params.policyConfig?.approvalType || "explicit",
+        executionType: params.policyConfig?.executionType || "private",
+      });
+      await addPendingApproval(params, policyRequestData);
+
+      // Save to PolicyAPI if provided
+      if (policyAPI) {
+        await policyAPI.upsertPolicy({
+          roleName: params.roleName,
+          enabled: params.policyConfig?.enabled ?? true,
+          contractType: params.policyConfig?.contractType || "default",
+          approvalType: params.policyConfig?.approvalType || "explicit",
+          executionType: params.policyConfig?.executionType || "private",
+          threshold: params.threshold,
+          templateId: params.templateId,
+          templateParams: params.templateParams,
+        });
+      }
+    };
+  })();
+
+  // Determine localStorage warning type
+  const localStorageWarningType = isPolicyLocalStorage && isTemplateLocalStorage
+    ? "both"
+    : isPolicyLocalStorage
+    ? "policy"
+    : isTemplateLocalStorage
+    ? "template"
+    : null;
+
+  // Show localStorage warning if using localStorage APIs
+  const helpText = localStorageWarningType ? (
+    <>
+      <LocalStorageWarning type={localStorageWarningType} />
+      {helpTextProp}
+    </>
+  ) : (
+    helpTextProp
+  );
+
+  return (
+    <RolesPageBase<T>
+      fetchRoles={fetchRoles}
+      fetchTemplates={fetchTemplates}
+      fetchUsers={fetchUsers}
+      fetchPendingApprovals={fetchPendingApprovals}
+      fetchRolePolicy={fetchRolePolicy}
+      onCreate={onCreate}
+      onUpdate={onUpdate}
+      onDelete={onDelete}
+      onCreatePolicy={onCreatePolicy}
+      roleType={roleType}
+      helpText={helpText}
+      {...props}
+    />
+  );
+}

package/src/components/pages/connected/TemplatesPage.tsx

@@ -0,0 +1,181 @@
+/**
+ * TemplatesPage - Manage policy templates
+ *
+ * @example
+ * ```tsx
+ * <TemplatesPage api={createLocalStorageTemplateAPI()} />
+ * ```
+ */
+
+import { TemplatesPageBase, type TemplatesPageBaseProps, type PolicyTemplateItem, type TemplateFormData } from "../base";
+
+/** Implement this to store templates (or use createLocalStorageTemplateAPI for dev) */
+export interface TemplateAPI {
+  getTemplates: () => Promise<PolicyTemplateItem[]>;
+  getTemplate?: (id: string) => Promise<PolicyTemplateItem>;
+  createTemplate: (data: TemplateFormData) => Promise<PolicyTemplateItem | void>;
+  updateTemplate: (id: string, data: Partial<TemplateFormData>) => Promise<PolicyTemplateItem | void>;
+  deleteTemplate: (id: string) => Promise<void>;
+  _isLocalStorage?: boolean;
+}
+
+const STORAGE_KEY = "tidecloak_policy_templates";
+
+/** localStorage adapter for development */
+export function createLocalStorageTemplateAPI(storageKey = STORAGE_KEY): TemplateAPI {
+  const getAll = (): PolicyTemplateItem[] => {
+    try {
+      const data = localStorage.getItem(storageKey);
+      return data ? JSON.parse(data) : [];
+    } catch {
+      return [];
+    }
+  };
+
+  const saveAll = (templates: PolicyTemplateItem[]) => {
+    localStorage.setItem(storageKey, JSON.stringify(templates));
+  };
+
+  return {
+    _isLocalStorage: true,
+
+    getTemplates: async () => {
+      return getAll();
+    },
+
+    getTemplate: async (id: string) => {
+      const templates = getAll();
+      const template = templates.find((t) => t.id === id);
+      if (!template) throw new Error(`Template not found: ${id}`);
+      return template;
+    },
+
+    createTemplate: async (data: TemplateFormData) => {
+      const templates = getAll();
+      const newTemplate: PolicyTemplateItem = {
+        id: crypto.randomUUID(),
+        ...data,
+        createdBy: "user",
+      };
+      templates.push(newTemplate);
+      saveAll(templates);
+      return newTemplate;
+    },
+
+    updateTemplate: async (id: string, data: Partial<TemplateFormData>) => {
+      const templates = getAll();
+      const index = templates.findIndex((t) => t.id === id);
+      if (index === -1) throw new Error(`Template not found: ${id}`);
+      templates[index] = { ...templates[index], ...data };
+      saveAll(templates);
+      return templates[index];
+    },
+
+    deleteTemplate: async (id: string) => {
+      const templates = getAll();
+      const filtered = templates.filter((t) => t.id !== id);
+      if (filtered.length === templates.length) {
+        throw new Error(`Template not found: ${id}`);
+      }
+      saveAll(filtered);
+    },
+  };
+}
+
+export interface TemplatesPageProps<T extends PolicyTemplateItem = PolicyTemplateItem>
+  extends Omit<TemplatesPageBaseProps<T>, "fetchData" | "onCreate" | "onUpdate" | "onDelete"> {
+  /** Template storage adapter */
+  api: TemplateAPI;
+  /** Override fetch templates */
+  fetchData?: TemplatesPageBaseProps<T>["fetchData"];
+  /** Override create */
+  onCreate?: TemplatesPageBaseProps<T>["onCreate"];
+  /** Override update */
+  onUpdate?: TemplatesPageBaseProps<T>["onUpdate"];
+  /** Override delete */
+  onDelete?: TemplatesPageBaseProps<T>["onDelete"];
+}
+
+// Warning banner for localStorage
+function LocalStorageWarning() {
+  return (
+    <div
+      style={{
+        backgroundColor: "#fef3c7",
+        border: "1px solid #f59e0b",
+        borderRadius: "0.375rem",
+        padding: "0.75rem 1rem",
+        marginBottom: "1rem",
+        display: "flex",
+        alignItems: "flex-start",
+        gap: "0.5rem",
+      }}
+    >
+      <span style={{ fontSize: "1rem" }}>⚠️</span>
+      <div style={{ fontSize: "0.875rem", color: "#92400e" }}>
+        <strong>Development Mode:</strong> Templates are stored in browser localStorage and will not persist across
+        devices or browsers. For production, implement your own{" "}
+        <code style={{ backgroundColor: "#fde68a", padding: "0 0.25rem", borderRadius: "0.25rem" }}>TemplateAPI</code>{" "}
+        with a backend database.
+      </div>
+    </div>
+  );
+}
+
+export function TemplatesPage<T extends PolicyTemplateItem = PolicyTemplateItem>({
+  api,
+  fetchData: fetchDataProp,
+  onCreate: onCreateProp,
+  onUpdate: onUpdateProp,
+  onDelete: onDeleteProp,
+  helpText: helpTextProp,
+  ...props
+}: TemplatesPageProps<T>) {
+  const isLocalStorage = api._isLocalStorage === true;
+
+  const fetchData =
+    fetchDataProp ||
+    (async () => {
+      const templates = (await api.getTemplates()) as T[];
+      return { templates: templates || [] };
+    });
+
+  const onCreate =
+    onCreateProp ||
+    (async (data) => {
+      await api.createTemplate(data);
+    });
+
+  const onUpdate =
+    onUpdateProp ||
+    (async (id, data) => {
+      await api.updateTemplate(id, data);
+    });
+
+  const onDelete =
+    onDeleteProp ||
+    (async (id) => {
+      await api.deleteTemplate(id);
+    });
+
+  // Show localStorage warning if using localStorage API
+  const helpText = isLocalStorage ? (
+    <>
+      <LocalStorageWarning />
+      {helpTextProp}
+    </>
+  ) : (
+    helpTextProp
+  );
+
+  return (
+    <TemplatesPageBase<T>
+      fetchData={fetchData}
+      onCreate={onCreate}
+      onUpdate={onUpdate}
+      onDelete={onDelete}
+      helpText={helpText}
+      {...props}
+    />
+  );
+}