@echothink-ui/identity 0.1.0

package/src/components/OrganizationSwitcher.test.tsx

@@ -0,0 +1,59 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { OrganizationSwitcher } from "./OrganizationSwitcher";
+
+const organizations = [
+  {
+    id: "echo",
+    label: "EchoThink, Inc.",
+    description: "Production tenant",
+    status: "active" as const
+  },
+  {
+    id: "acme",
+    label: "Acme Corp",
+    description: "Sandbox workspace",
+    status: "inactive" as const
+  }
+];
+
+describe("@echothink-ui/identity OrganizationSwitcher", () => {
+  it("renders a menu trigger with active organization context", () => {
+    render(<OrganizationSwitcher activeId="echo" defaultOpen organizations={organizations} />);
+
+    const trigger = screen.getByRole("button", {
+      name: "Switch organization, current organization EchoThink, Inc."
+    });
+    expect(trigger.getAttribute("aria-haspopup")).toBe("menu");
+    expect(trigger.getAttribute("aria-expanded")).toBe("true");
+    expect(screen.getAllByText("Production tenant").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("Active").length).toBeGreaterThan(0);
+
+    const activeOption = screen.getByRole("menuitemradio", { name: /EchoThink, Inc./ });
+    expect(activeOption.getAttribute("aria-checked")).toBe("true");
+    expect(activeOption.getAttribute("aria-current")).toBe("true");
+  });
+
+  it("switches to the selected organization and closes the menu", () => {
+    const onSwitch = vi.fn();
+    render(
+      <OrganizationSwitcher
+        activeId="echo"
+        defaultOpen
+        onSwitch={onSwitch}
+        organizations={organizations}
+      />
+    );
+
+    fireEvent.click(screen.getByRole("menuitemradio", { name: /Acme Corp/ }));
+
+    expect(onSwitch).toHaveBeenCalledWith("acme");
+    expect(
+      screen
+        .getByRole("button", {
+          name: "Switch organization, current organization EchoThink, Inc."
+        })
+        .getAttribute("aria-expanded")
+    ).toBe("false");
+  });
+});

package/src/components/OrganizationSwitcher.tsx

@@ -0,0 +1,161 @@
+import * as React from "react";
+import { StatusDot, type SurfaceComponentProps } from "@echothink-ui/core";
+import type { OrganizationRef } from "./types";
+
+export interface OrganizationSwitcherProps extends Omit<SurfaceComponentProps, "children"> {
+  organizations: OrganizationRef[];
+  activeId?: string;
+  defaultOpen?: boolean;
+  onSwitch?: (id: string) => void;
+}
+
+export function OrganizationSwitcher({
+  organizations,
+  activeId,
+  defaultOpen = false,
+  onSwitch,
+  className
+}: OrganizationSwitcherProps) {
+  const [open, setOpen] = React.useState(defaultOpen);
+  const [selectedId, setSelectedId] = React.useState(activeId ?? organizations[0]?.id);
+  const detailsRef = React.useRef<HTMLDetailsElement>(null);
+  const listRef = React.useRef<HTMLDivElement>(null);
+  const active =
+    organizations.find((organization) => organization.id === (activeId ?? selectedId)) ??
+    organizations[0];
+  const triggerLabel = active
+    ? `Switch organization, current organization ${active.label}`
+    : "Switch organization";
+
+  React.useEffect(() => {
+    if (activeId !== undefined) setSelectedId(activeId);
+  }, [activeId]);
+
+  React.useEffect(() => {
+    if (!organizations.some((organization) => organization.id === selectedId)) {
+      setSelectedId(organizations[0]?.id);
+    }
+  }, [organizations, selectedId]);
+
+  const closeMenu = React.useCallback(() => {
+    setOpen(false);
+    detailsRef.current?.querySelector("summary")?.focus();
+  }, []);
+
+  const selectOrganization = (organization: OrganizationRef) => {
+    if (activeId === undefined) setSelectedId(organization.id);
+    onSwitch?.(organization.id);
+    closeMenu();
+  };
+
+  return (
+    <div
+      className={["eth-identity-organization-switcher", className].filter(Boolean).join(" ")}
+      data-eth-component="OrganizationSwitcher"
+    >
+      <details
+        ref={detailsRef}
+        className="eth-popover"
+        open={open}
+        onToggle={(event) => {
+          const nextOpen = event.currentTarget.open;
+          setOpen(nextOpen);
+          if (nextOpen) window.setTimeout(() => listRef.current?.focus(), 0);
+        }}
+      >
+        <summary aria-haspopup="menu" aria-expanded={open} aria-label={triggerLabel}>
+          <span className="eth-identity-organization-switcher__trigger">
+            <span className="eth-identity-organization-switcher__avatar" aria-hidden="true">
+              {active ? initials(active.label) : "ORG"}
+            </span>
+            <span className="eth-identity-organization-switcher__copy">
+              <span className="eth-identity-organization-switcher__label">
+                {active?.label ?? "Select organization"}
+              </span>
+              <span className="eth-identity-organization-switcher__meta">
+                {active?.description ?? `${organizations.length} organizations`}
+              </span>
+            </span>
+            {active?.status ? (
+              <StatusDot status={active.status} label={formatStatus(active.status)} />
+            ) : null}
+            <span className="eth-identity-organization-switcher__chevron" aria-hidden="true" />
+          </span>
+        </summary>
+        <div
+          ref={listRef}
+          tabIndex={-1}
+          className="eth-identity-organization-switcher__list"
+          role="menu"
+          aria-label="Organizations"
+          onKeyDown={(event) => {
+            if (event.key === "Escape") closeMenu();
+          }}
+        >
+          {organizations.length ? (
+            organizations.map((organization) => {
+              const selected = organization.id === active?.id;
+
+              return (
+                <button
+                  key={organization.id}
+                  type="button"
+                  className="eth-identity-organization-switcher__option"
+                  role="menuitemradio"
+                  aria-checked={selected}
+                  aria-current={selected ? "true" : undefined}
+                  onClick={() => selectOrganization(organization)}
+                >
+                  <span className="eth-identity-organization-switcher__option-main">
+                    <span className="eth-identity-organization-switcher__option-label">
+                      {organization.label}
+                    </span>
+                    {organization.description ? (
+                      <span className="eth-identity-organization-switcher__option-meta">
+                        {organization.description}
+                      </span>
+                    ) : null}
+                  </span>
+                  <span className="eth-identity-organization-switcher__option-state">
+                    {organization.status ? (
+                      <StatusDot
+                        status={organization.status}
+                        label={formatStatus(organization.status)}
+                      />
+                    ) : null}
+                    <span
+                      className="eth-identity-organization-switcher__option-check"
+                      aria-hidden="true"
+                    />
+                  </span>
+                </button>
+              );
+            })
+          ) : (
+            <div className="eth-identity-organization-switcher__empty" role="none">
+              No organizations available
+            </div>
+          )}
+        </div>
+      </details>
+    </div>
+  );
+}
+
+function initials(label: string) {
+  const value = label
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase())
+    .join("");
+
+  return value || "ORG";
+}
+
+function formatStatus(status: string) {
+  return status
+    .split("-")
+    .map((part) => `${part.slice(0, 1).toUpperCase()}${part.slice(1)}`)
+    .join(" ");
+}

package/src/components/PermissionMatrix.test.tsx

@@ -0,0 +1,96 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { PermissionMatrix } from "./PermissionMatrix";
+import type { PermissionAction } from "./types";
+
+const subjects = [
+  { id: "workspace-admin", label: "Workspace admin", kind: "role" },
+  { id: "qa-reviewer", label: "QA reviewer", kind: "role" }
+];
+
+const actions = [
+  {
+    id: "dataset.read",
+    label: "Read",
+    group: "Datasets",
+    resource: "Dataset",
+    scope: "workspace"
+  },
+  {
+    id: "dataset.write",
+    label: "Write",
+    group: "Datasets",
+    resource: "Dataset",
+    scope: "project"
+  },
+  {
+    id: "review.approve",
+    label: "Approve",
+    group: "Reviews",
+    resource: "Review queue",
+    scope: "tenant"
+  }
+] satisfies PermissionAction[];
+
+describe("PermissionMatrix", () => {
+  it("renders a matrix summary with grouped actions and resource context", () => {
+    render(
+      <PermissionMatrix
+        title="Workspace permissions"
+        description="Review the effective grants before applying the policy bundle."
+        subjects={subjects}
+        actions={actions}
+        assignments={{
+          "workspace-admin": {
+            "dataset.read": "allow",
+            "dataset.write": "allow",
+            "review.approve": "allow"
+          },
+          "qa-reviewer": {
+            "dataset.read": "allow",
+            "dataset.write": "inherit",
+            "review.approve": "deny"
+          }
+        }}
+      />
+    );
+
+    expect(screen.getByText("Workspace permissions")).toBeTruthy();
+    expect(screen.getByText("2 subjects")).toBeTruthy();
+    expect(screen.getByText("3 actions")).toBeTruthy();
+    expect(screen.getByText("2 resources")).toBeTruthy();
+    expect(screen.getByRole("table", { name: "Workspace permissions matrix" })).toBeTruthy();
+    expect(screen.getByText("Datasets")).toBeTruthy();
+    expect(screen.getByText("Reviews")).toBeTruthy();
+    expect(screen.getAllByText("Dataset").length).toBeGreaterThan(0);
+    expect(screen.getByText("Review queue")).toBeTruthy();
+    expect(screen.getByText("workspace")).toBeTruthy();
+    expect(screen.getByText("tenant")).toBeTruthy();
+    expect(screen.getAllByText("Allow").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("Deny").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("Inherit").length).toBeGreaterThan(0);
+  });
+
+  it("marks editable cells with permission values and compact controls", () => {
+    const { container } = render(
+      <PermissionMatrix
+        subjects={[
+          { id: "jd", label: "Jane Doe", kind: "user" },
+          { id: "svc", label: "Import service", kind: "service-account" }
+        ]}
+        actions={[
+          { id: "read", label: "Read", group: "Resource" },
+          { id: "approve", label: "Approve", group: "Workflow" }
+        ]}
+        assignments={{ jd: { read: "allow" } }}
+        mode="edit"
+        onChange={() => undefined}
+      />
+    );
+
+    expect(screen.getByRole("table", { name: "Permission matrix" })).toBeTruthy();
+    expect(screen.getByLabelText("Jane Doe Read permission")).toBeTruthy();
+    expect(container.querySelector('[data-permission-value="inherit"]')).toBeTruthy();
+    expect(container.querySelector(".eth-identity-permission-matrix__select")).toBeTruthy();
+  });
+});

package/src/components/PermissionMatrix.tsx

@@ -0,0 +1,271 @@
+import {
+  Badge,
+  EmptyState,
+  Select,
+  Surface,
+  type EthSeverity,
+  type SurfaceComponentProps
+} from "@echothink-ui/core";
+import type * as React from "react";
+import type { IdentitySubject, PermissionAction, PermissionValue } from "./types";
+
+export interface PermissionMatrixProps
+  extends Omit<SurfaceComponentProps, "children" | "onChange"> {
+  subjects: IdentitySubject[];
+  actions: PermissionAction[];
+  assignments: Record<string, Record<string, PermissionValue>>;
+  onChange?: (subjectId: string, actionId: string, value: PermissionValue) => void;
+  mode?: "read" | "edit";
+}
+
+export function PermissionMatrix({
+  subjects,
+  actions,
+  assignments,
+  onChange,
+  mode = "read",
+  title,
+  description,
+  metadata,
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}: PermissionMatrixProps) {
+  const groups = groupActions(actions);
+  const permissionCounts = countPermissionValues(subjects, actions, assignments);
+  const resourceCount = countResources(actions);
+  const tableLabel = ariaLabel ?? matrixLabelForTitle(title);
+  const matrixMetadata = [
+    { label: "Subjects", value: countLabel(subjects.length, "subject") },
+    { label: "Actions", value: countLabel(actions.length, "action") },
+    { label: "Resources", value: countLabel(resourceCount, "resource") },
+    ...(metadata ?? [])
+  ];
+
+  return (
+    <Surface
+      {...props}
+      title={title}
+      description={description}
+      metadata={matrixMetadata}
+      className={["eth-identity-permission-matrix", className].filter(Boolean).join(" ")}
+      data-eth-component="PermissionMatrix"
+    >
+      {subjects.length > 0 && actions.length > 0 ? (
+        <>
+          <div className="eth-identity-permission-matrix__summary" aria-label="Permission summary">
+            <SummaryItem value={permissionCounts.allow} label="Allowed" tone="allow" />
+            <SummaryItem value={permissionCounts.deny} label="Denied" tone="deny" />
+            <SummaryItem value={permissionCounts.inherit} label="Inherited" tone="inherit" />
+            <span className="eth-identity-permission-matrix__mode">
+              {mode === "edit" ? "Editable" : "Read only"}
+            </span>
+          </div>
+          <div className="eth-identity-permission-matrix__table-wrap">
+            <table aria-label={tableLabel} className="eth-identity-permission-matrix__table">
+              <caption className="eth-identity-permission-matrix__caption">
+                Permission assignments across subjects, resources, scopes, and actions.
+              </caption>
+              <thead>
+                <tr>
+                  <th
+                    scope="col"
+                    rowSpan={2}
+                    className={[
+                      "eth-identity-permission-matrix__subject-col",
+                      "eth-identity-permission-matrix__subject-heading"
+                    ].join(" ")}
+                  >
+                    Subject
+                  </th>
+                  {groups.map((group) => (
+                    <th key={group.label} scope="colgroup" colSpan={group.actions.length}>
+                      {group.label}
+                    </th>
+                  ))}
+                </tr>
+                <tr>
+                  {groups.flatMap((group) =>
+                    group.actions.map((action) => (
+                      <th key={action.id} scope="col">
+                        <span className="eth-identity-permission-matrix__action-label">
+                          {action.label}
+                        </span>
+                        {action.resource || action.scope ? (
+                          <span className="eth-identity-permission-matrix__action-meta">
+                            {action.resource ? <span>{action.resource}</span> : null}
+                            {action.scope ? <span>{action.scope}</span> : null}
+                          </span>
+                        ) : null}
+                      </th>
+                    ))
+                  )}
+                </tr>
+              </thead>
+              <tbody>
+                {subjects.map((subject) => {
+                  const subjectMeta = formatSubjectMeta(subject);
+
+                  return (
+                    <tr key={subject.id}>
+                      <th scope="row" className="eth-identity-permission-matrix__subject">
+                        <span className="eth-identity-permission-matrix__subject-label">
+                          {subject.label}
+                        </span>
+                        {subjectMeta ? <small>{subjectMeta}</small> : null}
+                      </th>
+                      {actions.map((action) => {
+                        const value = assignments[subject.id]?.[action.id] ?? "inherit";
+                        const valueLabel = labelForPermission(value);
+
+                        return (
+                          <td
+                            key={action.id}
+                            className="eth-identity-permission-matrix__cell"
+                            data-permission={value}
+                            data-permission-value={value}
+                            title={`${subject.label} / ${action.label}: ${valueLabel}`}
+                          >
+                            {mode === "edit" ? (
+                              <Select
+                                aria-label={`${subject.label} ${action.label} permission`}
+                                className={[
+                                  "eth-identity-permission-matrix__select",
+                                  `eth-identity-permission-matrix__select--${value}`
+                                ].join(" ")}
+                                density="compact"
+                                disabled={!onChange}
+                                value={value}
+                                options={permissionOptions}
+                                onChange={(event) =>
+                                  onChange?.(
+                                    subject.id,
+                                    action.id,
+                                    event.currentTarget.value as PermissionValue
+                                  )
+                                }
+                              />
+                            ) : (
+                              <Badge
+                                severity={severityForPermission(value)}
+                                aria-label={`${subject.label} ${action.label}: ${valueLabel}`}
+                                className={[
+                                  "eth-identity-permission-matrix__badge",
+                                  `eth-identity-permission-matrix__badge--${value}`
+                                ].join(" ")}
+                              >
+                                <span
+                                  className="eth-identity-permission-matrix__status-mark"
+                                  aria-hidden="true"
+                                />
+                                {valueLabel}
+                              </Badge>
+                            )}
+                          </td>
+                        );
+                      })}
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </>
+      ) : (
+        <EmptyState
+          title="No permissions configured"
+          description="Add at least one subject and one action to render the permission matrix."
+        />
+      )}
+    </Surface>
+  );
+}
+
+function SummaryItem({
+  value,
+  label,
+  tone
+}: {
+  value: number;
+  label: string;
+  tone: PermissionValue;
+}) {
+  return (
+    <span
+      className={`eth-identity-permission-matrix__summary-item eth-identity-permission-matrix__summary-item--${tone}`}
+    >
+      <strong>{value}</strong>
+      {label}
+    </span>
+  );
+}
+
+const permissionOptions: Array<{ value: PermissionValue; label: string }> = [
+  { value: "inherit", label: "Inherit" },
+  { value: "allow", label: "Allow" },
+  { value: "deny", label: "Deny" }
+];
+
+function groupActions(actions: PermissionAction[]) {
+  const labels = Array.from(new Set(actions.map((action) => action.group ?? "Permissions")));
+  return labels.map((label) => ({
+    label,
+    actions: actions.filter((action) => (action.group ?? "Permissions") === label)
+  }));
+}
+
+function severityForPermission(value: PermissionValue): EthSeverity {
+  if (value === "allow") return "success";
+  if (value === "deny") return "danger";
+  return "neutral";
+}
+
+function labelForPermission(value: PermissionValue) {
+  return permissionOptions.find((option) => option.value === value)?.label ?? value;
+}
+
+function countPermissionValues(
+  subjects: IdentitySubject[],
+  actions: PermissionAction[],
+  assignments: Record<string, Record<string, PermissionValue>>
+) {
+  return subjects.reduce(
+    (counts, subject) => {
+      actions.forEach((action) => {
+        const value = assignments[subject.id]?.[action.id] ?? "inherit";
+        counts[value] += 1;
+      });
+      return counts;
+    },
+    { allow: 0, deny: 0, inherit: 0 } satisfies Record<PermissionValue, number>
+  );
+}
+
+function countResources(actions: PermissionAction[]) {
+  return new Set(actions.map((action) => action.resource ?? action.group ?? action.label)).size;
+}
+
+function countLabel(value: number, noun: string) {
+  return `${value} ${value === 1 ? noun : `${noun}s`}`;
+}
+
+function formatSubjectKind(kind: string) {
+  return kind.replace(/-/g, " ");
+}
+
+function formatSubjectMeta(subject: IdentitySubject) {
+  return [formatSubjectKind(subject.kind), subject.role, subject.description]
+    .filter(Boolean)
+    .join(" / ");
+}
+
+function nodeToText(node: React.ReactNode, fallback: string) {
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return String(node);
+  return fallback;
+}
+
+function matrixLabelForTitle(title: React.ReactNode) {
+  const label = nodeToText(title, "Permission");
+  return label.toLowerCase().includes("matrix") ? label : `${label} matrix`;
+}

package/src/components/PolicyRuleViewer.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { PolicyRuleViewer } from "./PolicyRuleViewer";
+
+const rule = {
+  id: "p1",
+  effect: "allow" as const,
+  subjects: ["group:marketing"],
+  actions: ["read", "comment"],
+  resources: ["resource:campaign/*"],
+  conditions: "context.environment == 'prod'"
+};
+
+describe("@echothink-ui/identity PolicyRuleViewer", () => {
+  it("renders the rule effect and facets as a readable read-only summary", () => {
+    const { container } = render(<PolicyRuleViewer rule={rule} />);
+
+    expect(screen.getByText("Policy rule p1")).toBeTruthy();
+    expect(screen.getByLabelText("Rule effect: Allow").textContent).toContain("Allow");
+    expect(
+      container.querySelector(".eth-identity-policy-rule-viewer__facet-list")
+    ).toBeTruthy();
+    expect(screen.getByText("group:marketing")).toBeTruthy();
+    expect(screen.getByText("read")).toBeTruthy();
+    expect(screen.getByText("comment")).toBeTruthy();
+    expect(screen.getByText("resource:campaign/*")).toBeTruthy();
+    expect(screen.getByText("context.environment == 'prod'")).toBeTruthy();
+  });
+});