ownerlens 0.1.0

package/src/components/azure/ServicePrincipalFieldRenderers.tsx

@@ -0,0 +1,140 @@
+import type {
+  EntraPrincipalPermissionSummary,
+  EntraPrincipalRbacSummary
+} from "../../core/azure/entra/servicePrincipal";
+import type { PermissionRiskLevel } from "../../core/risk/types";
+import type { ZtaRemediationSummary } from "../../core/azure/ztaReport";
+import type { ReportColumnRenderers } from "../../report/buildCollectionColumns";
+import { Badge, type BadgeProps } from "../../report/components/ui/badge";
+import { ZtaRemediationBadge } from "./ZtaRemediationBadge";
+
+type EntraPrincipalSummaryRow = EntraPrincipalPermissionSummary & EntraPrincipalRbacSummary & ZtaRemediationSummary & {
+  azureRbac: string;
+  displayName: string;
+  id: string;
+};
+
+export type AzureRbacPrincipalSelection = {
+  displayName: string;
+  objectId: string;
+};
+
+export type EntraPermissionsPrincipalSelection = AzureRbacPrincipalSelection;
+
+export function buildServicePrincipalFieldRenderers<TRow extends EntraPrincipalSummaryRow>({
+  onAzureRbacClick,
+  onEntraPermissionsClick,
+  onZtaRemediationsClick
+}: {
+  onAzureRbacClick?: (principal: AzureRbacPrincipalSelection) => void;
+  onEntraPermissionsClick?: (principal: EntraPermissionsPrincipalSelection) => void;
+  onZtaRemediationsClick?: (objectId: string) => void;
+} = {}): ReportColumnRenderers<TRow> {
+  return {
+    azureRbac: (sp) => (
+      <RbacSummaryBadge
+        rbacRoleAssignmentCount={sp.rbacRoleAssignmentCount}
+        rbacRoleLevel={sp.rbacRoleLevel}
+        rbacSubscriptionCount={sp.rbacSubscriptionCount}
+        title={sp.azureRbac}
+        onClick={onAzureRbacClick ? () => onAzureRbacClick({ displayName: sp.displayName, objectId: sp.id }) : undefined}
+      />
+    ),
+    oauthPemrissionsCount: (sp) => (
+      <PermissionCountBadge
+        appRolePermissionsCount={sp.appRolesPermissionCount}
+        entraPermissionRisk={sp.entraPermissionRisk}
+        oauthPermissionsCount={sp.oauthPemrissionsCount}
+        onClick={
+          onEntraPermissionsClick ? () => onEntraPermissionsClick({ displayName: sp.displayName, objectId: sp.id }) : undefined
+        }
+      />
+    ),
+    ztaRemediationCountAll: (sp) => (
+      <ZtaRemediationBadge
+        ztaMaxRisk={sp.ztaMaxRisk}
+        ztaRemediationCountAll={sp.ztaRemediationCountAll}
+        ztaRemediationFailedCount={sp.ztaRemediationFailedCount}
+        onClick={onZtaRemediationsClick ? () => onZtaRemediationsClick(sp.id) : undefined}
+      />
+    )
+  };
+}
+
+export const servicePrincipalFieldRenderers = buildServicePrincipalFieldRenderers();
+
+const permissionRiskBadgeVariants: Record<PermissionRiskLevel, BadgeProps["variant"]> = {
+  high: "riskHigh",
+  medium: "riskMedium",
+  low: "riskLow",
+  none: "riskNone"
+};
+
+function RbacSummaryBadge({
+  onClick,
+  rbacRoleAssignmentCount,
+  rbacRoleLevel,
+  rbacSubscriptionCount,
+  title
+}: EntraPrincipalRbacSummary & { title: string; onClick?: () => void }) {
+  const badge = (
+    <Badge
+      className="min-w-12 justify-center tabular-nums"
+      title={title}
+      variant={permissionRiskBadgeVariants[rbacRoleLevel]}
+    >
+      {rbacRoleAssignmentCount}/{rbacSubscriptionCount}
+    </Badge>
+  );
+
+  if (!onClick) {
+    return badge;
+  }
+
+  return (
+    <button
+      aria-label={`Open Azure RBAC assignments ${rbacRoleAssignmentCount}/${rbacSubscriptionCount}`}
+      className="rounded-full transition-opacity hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      title={title}
+      type="button"
+      onClick={onClick}
+    >
+      {badge}
+    </button>
+  );
+}
+
+function PermissionCountBadge({
+  appRolePermissionsCount,
+  entraPermissionRisk,
+  onClick,
+  oauthPermissionsCount
+}: {
+  appRolePermissionsCount: number;
+  entraPermissionRisk: PermissionRiskLevel;
+  onClick?: () => void;
+  oauthPermissionsCount: number;
+}) {
+  const label = `${oauthPermissionsCount}/${appRolePermissionsCount}`;
+  const badge = (
+    <Badge className="min-w-8 justify-center tabular-nums" variant={permissionRiskBadgeVariants[entraPermissionRisk]}>
+      {label}
+    </Badge>
+  );
+
+  if (!onClick) {
+    return badge;
+  }
+
+  return (
+    <button
+      aria-label={`Open Entra permissions ${label}`}
+      className="rounded-full transition-opacity hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      title={`Open Entra permissions ${label}`}
+      type="button"
+      onClick={onClick}
+    >
+      {badge}
+    </button>
+  );
+}

package/src/components/azure/ZtaComponent.test.tsx

@@ -0,0 +1,267 @@
+/**
+ * @jest-environment jsdom
+ */
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+
+import type { ZtaReport } from "../../core/azure/ztaReport";
+import { ZtaComponent } from "./ZtaComponent";
+
+declare global {
+  var IS_REACT_ACT_ENVIRONMENT: boolean | undefined;
+}
+
+beforeAll(() => {
+  globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+});
+
+afterEach(() => {
+  delete (globalThis as Partial<typeof globalThis>).fetch;
+  document.body.innerHTML = "";
+});
+
+test("loads Zero Trust Assessment report metadata and tests", async () => {
+  const fetchMock = jest.fn<Promise<Response>, Parameters<typeof fetch>>(async () =>
+    jsonResponse({
+      Meta: {
+        Account: "admin@example.test",
+        CurrentVersion: "1.0.0",
+        Domain: "example.test",
+        ExecutedAt: "2026-06-02T16:06:31.3057648+02:00",
+        LatestVersion: "1.1.0",
+        TenantId: "tenant-1",
+        TenantName: "Example Tenant",
+        TestResultSummary: {
+          Failed: 1,
+          Passed: 1
+        }
+      },
+      Tests: [
+        {
+          TestCategory: "Identity",
+          TestId: "21791",
+          TestImpact: "High security impact",
+          TestImplementationCost: "Low",
+          TestMinimumLicense: ["Free"],
+          TestPillar: "Identity",
+          TestResult: "Failed",
+          TestRisk: "High",
+          RelatedObjects: [
+            {
+              id: "related-object-1"
+            },
+            {
+              object_id: "related-object-2"
+            }
+          ],
+          TestStatus: "Completed",
+          TestTags: ["mfa", "identity"],
+          TestTitle: "Require MFA for administrators"
+        },
+        {
+          SkippedReason: "Feature disabled",
+          TestCategory: "Devices",
+          TestId: 21823,
+          TestPillar: "Endpoint",
+          TestResult: "Skipped",
+          TestRisk: "Medium",
+          TestStatus: "Skipped",
+          TestTitle: "Require compliant devices"
+        }
+      ]
+    })
+  );
+  globalThis.fetch = fetchMock;
+
+  const { container, root } = renderComponent(<ZtaComponent />);
+
+  expect(container.textContent).toContain("Loading Zero Trust Assessment report...");
+
+  await waitForText(container, "Require MFA for administrators");
+
+  expect(fetchMock.mock.calls[0]?.[0]).toBe("/api/data/zeroTrustAssessment/report?page=1&count=20");
+  expect(getButton("Sort by Test ID").textContent).toContain("Test ID");
+  expect(getButton("Sort by Related objects").textContent).toContain("Related objects");
+  expect(getButton("Sort by Risk").textContent).toContain("Risk");
+  expect(queryButton("Sort by Result")).toBeNull();
+  expect(container.textContent).toContain("Example Tenant");
+  expect(container.textContent).toContain("21791");
+  expect(container.textContent).toContain("Completed");
+  expect(container.textContent).toContain("related-object-1");
+  expect(container.textContent).toContain("related-object-2");
+  expect(container.textContent).toContain("High security impact");
+  expect(container.textContent).toContain("Free");
+  expect(container.textContent).toContain("mfa");
+  expect(container.textContent).toContain("Feature disabled");
+
+  act(() => root.unmount());
+});
+
+test("filters related objects by non-rendered related object fields", async () => {
+  const tests: ZtaReport["Tests"] = [
+    {
+      TestId: "21791",
+      RelatedObjects: [
+        {
+          id: "related-object-1",
+          displayName: "Privileged automation app",
+          servicePrincipalType: "Application"
+        }
+      ],
+      TestStatus: "Completed",
+      TestTitle: "Require MFA for administrators"
+    },
+    {
+      TestId: "21823",
+      RelatedObjects: [
+        {
+          id: "related-object-2",
+          displayName: "Break glass account",
+          userPrincipalName: "breakglass@example.test"
+        }
+      ],
+      TestStatus: "Completed",
+      TestTitle: "Require compliant devices"
+    }
+  ];
+  const fetchMock = jest.fn<Promise<Response>, Parameters<typeof fetch>>(async (input) => {
+    const url = new URL(String(input), window.location.origin);
+    const filterValue = url.searchParams.get("filter[0][value][0]");
+    const filteredTests = filterValue ? tests.filter((test) => JSON.stringify(test).includes(filterValue)) : tests;
+
+    return jsonResponse({
+      Meta: {
+        TenantName: "Example Tenant"
+      },
+      Tests: filteredTests
+    });
+  });
+  globalThis.fetch = fetchMock;
+
+  const { container, root } = renderComponent(<ZtaComponent />);
+
+  await waitForText(container, "Require MFA for administrators");
+  expect(container.textContent).not.toContain("Privileged automation app");
+
+  act(() => {
+    changeInputValue(getInput("Filter Related objects"), "Privileged automation");
+  });
+
+  await waitFor(() => {
+    const filteredRequest = fetchMock.mock.calls
+      .map(([input]) => String(input))
+      .find((requestUrl) => {
+        const url = new URL(requestUrl, window.location.origin);
+        return url.searchParams.get("filter[0][column]") === "RelatedObjects";
+      });
+    expect(filteredRequest).toBeDefined();
+    expect(container.textContent).toContain("Require MFA for administrators");
+    expect(container.textContent).not.toContain("Require compliant devices");
+    expect(container.textContent).toContain("related-object-1");
+    expect(container.textContent).not.toContain("Privileged automation app");
+  });
+
+  act(() => root.unmount());
+});
+
+test("renders HTTP errors", async () => {
+  const fetchMock = jest.fn<Promise<Response>, Parameters<typeof fetch>>(async () =>
+    ({
+      ok: false,
+      status: 500
+    }) as Response
+  );
+  globalThis.fetch = fetchMock;
+
+  const { container, root } = renderComponent(<ZtaComponent />);
+
+  await waitForText(container, "Zero Trust Assessment report read failed: 500");
+
+  act(() => root.unmount());
+});
+
+function jsonResponse(body: ZtaReport): Response {
+  return {
+    json: async () => ({
+      collectionId: "zeroTrustAssessment.report",
+      rows: body.Tests,
+      columns: [],
+      page: 1,
+      pageSize: 20,
+      count: body.Tests.length,
+      ...body
+    }),
+    ok: true,
+    status: 200
+  } as Response;
+}
+
+function renderComponent(component: React.ReactNode): { container: HTMLElement; root: Root } {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+
+  act(() => {
+    root.render(component);
+  });
+
+  return { container, root };
+}
+
+function getButton(label: string): HTMLButtonElement {
+  const button = queryButton(label);
+  if (!button) {
+    throw new Error(`Expected button ${label}.`);
+  }
+
+  return button;
+}
+
+function queryButton(label: string): HTMLButtonElement | null {
+  const button = [...document.querySelectorAll("button")].find((candidate) => candidate.getAttribute("aria-label") === label);
+  if (!(button instanceof HTMLButtonElement)) {
+    return null;
+  }
+
+  return button;
+}
+
+function getInput(label: string): HTMLInputElement {
+  const input = [...document.querySelectorAll("input")].find((candidate) => candidate.getAttribute("aria-label") === label);
+  if (!(input instanceof HTMLInputElement)) {
+    throw new Error(`Expected input ${label}.`);
+  }
+
+  return input;
+}
+
+function changeInputValue(input: HTMLInputElement, value: string): void {
+  const valueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+  valueSetter?.call(input, value);
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+async function waitForText(container: HTMLElement, text: string) {
+  await waitFor(() => {
+    expect(container.textContent).toContain(text);
+  });
+}
+
+async function waitFor(assertion: () => void): Promise<void> {
+  const startedAt = Date.now();
+  let lastError: unknown;
+
+  while (Date.now() - startedAt < 1000) {
+    try {
+      assertion();
+      return;
+    } catch (error) {
+      lastError = error;
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 10));
+      });
+    }
+  }
+
+  throw lastError;
+}

package/src/components/azure/ZtaComponent.tsx

@@ -0,0 +1,276 @@
+import { useCallback, useMemo, useState } from "react";
+
+import type { ZtaRelatedObject, ZtaReportMeta, ZtaReportTest } from "../../core/azure/ztaReport";
+import { formatDate, formatValue } from "../../lib/utils";
+import type { ReportColumnRenderers } from "../../report/buildCollectionColumns";
+import { GenericTable } from "../../report/components/GenericTable";
+import type { ColumnFilters } from "../../report/components/reportTableControls";
+import { Badge } from "../../report/components/ui/badge";
+import { Card } from "../../report/components/ui/card";
+import type { ReportFieldDescriptor } from "../../report/reportTypes";
+import { readZeroTrustAssessmentReport } from "./api";
+
+type ZtaTestRow = ZtaReportTest & {
+  rowIndex: number;
+};
+
+type ZtaComponentProps = {
+  initialFilters?: ColumnFilters;
+  onRelatedObjectClick?: (relatedObject: ZtaRelatedObject) => void;
+};
+
+const ztaStatusOptions = ["Completed", "Skipped", "Passed", "Failed"];
+const ztaRiskOptions = ["High", "Medium", "Low", "None"];
+
+const ztaTestFields: ReportFieldDescriptor<ZtaTestRow>[] = [
+  {
+    id: "TestId",
+    label: "Test ID",
+    valueType: "text",
+    getValue: (test) => test.TestId,
+    filter: { kind: "text" }
+  },
+  {
+    id: "TestTitle",
+    label: "Title",
+    valueType: "text",
+    getValue: (test) => test.TestTitle,
+    filter: { kind: "text" }
+  },
+  {
+    id: "TestStatus",
+    label: "Status",
+    valueType: "text",
+    getValue: (test) => test.TestStatus,
+    filter: { kind: "multiSelect", options: ztaStatusOptions }
+  },
+  {
+    id: "RelatedObjects",
+    label: "Related objects",
+    valueType: "list",
+    getValue: getRelatedObjectSearchValues,
+    filter: { kind: "text" }
+  },
+  {
+    id: "TestRisk",
+    label: "Risk",
+    valueType: "riskLevel",
+    getValue: (test) => test.TestRisk,
+    filter: { kind: "multiSelect", options: ztaRiskOptions }
+  },
+  {
+    id: "TestPillar",
+    label: "Pillar",
+    valueType: "text",
+    getValue: (test) => test.TestPillar,
+    filter: { kind: "text" }
+  },
+  {
+    id: "TestCategory",
+    label: "Category",
+    valueType: "text",
+    getValue: (test) => test.TestCategory,
+    filter: { kind: "text" }
+  },
+  {
+    id: "TestImpact",
+    label: "Impact",
+    valueType: "riskLevel",
+    getValue: (test) => test.TestImpact,
+    filter: { kind: "text" }
+  },
+  {
+    id: "TestImplementationCost",
+    label: "Implementation cost",
+    valueType: "text",
+    getValue: (test) => test.TestImplementationCost,
+    filter: { kind: "text" }
+  },
+  {
+    id: "TestMinimumLicense",
+    label: "Minimum license",
+    valueType: "list",
+    getValue: (test) => test.TestMinimumLicense,
+    filter: { kind: "text" }
+  },
+  {
+    id: "TestTags",
+    label: "Tags",
+    valueType: "list",
+    getValue: (test) => test.TestTags,
+    filter: { kind: "text" }
+  },
+  {
+    id: "SkippedReason",
+    label: "Skipped reason",
+    valueType: "text",
+    getValue: (test) => test.SkippedReason,
+    filter: { kind: "text" }
+  }
+];
+
+export function ZtaComponent({ initialFilters, onRelatedObjectClick }: ZtaComponentProps = {}) {
+  const [meta, setMeta] = useState<ZtaReportMeta | null>(null);
+  const [testCount, setTestCount] = useState(0);
+  const fieldRenderers = useMemo<ReportColumnRenderers<ZtaTestRow>>(
+    () => ({
+      RelatedObjects: (test) => (
+        <RelatedObjectBadges objects={getRelatedObjectsWithIds(test)} onRelatedObjectClick={onRelatedObjectClick} />
+      )
+    }),
+    [onRelatedObjectClick]
+  );
+  const loadPage = useCallback(
+    async ({ filters, page, signal }: { filters: ColumnFilters; page: number; signal: AbortSignal }) => {
+      const report = await readZeroTrustAssessmentReport({ filters, page, signal });
+      const responsePage = report.page;
+      const responsePageSize = report.pageSize;
+      const rows = (report.Tests ?? report.rows ?? []).map((test, rowIndex) => ({
+        ...test,
+        rowIndex: (responsePage - 1) * responsePageSize + rowIndex
+      }));
+
+      setMeta(report.Meta);
+      setTestCount(report.count);
+
+      return {
+        rows,
+        page: responsePage,
+        pageSize: responsePageSize,
+        count: report.count
+      };
+    },
+    []
+  );
+
+  return (
+    <section className="flex flex-col gap-4">
+      {meta ? <ZtaMetaPanel meta={meta} testCount={testCount} /> : null}
+      <GenericTable
+        emptyMessage="No Zero Trust Assessment tests found."
+        fields={ztaTestFields}
+        fieldRenderers={fieldRenderers}
+        getRowKey={(row) => `${formatValue(row.TestId)}:${row.rowIndex}`}
+        initialFilters={initialFilters}
+        loadPage={loadPage}
+        loadingMessage="Loading Zero Trust Assessment report..."
+        minWidthClassName="min-w-[2200px]"
+      />
+    </section>
+  );
+}
+
+function ZtaMetaPanel({ meta, testCount }: { meta: ZtaReportMeta; testCount: number }) {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+      <SummaryCard label="Tenant" value={meta.TenantName ?? meta.TenantId} />
+      <SummaryCard label="Executed" value={formatDate(meta.ExecutedAt)} />
+      <SummaryCard label="Tests" value={testCount} />
+    </div>
+  );
+}
+
+function SummaryCard({ label, value }: { label: string; value: unknown }) {
+  return (
+    <Card className="flex min-h-24 flex-col gap-2 p-4">
+      <span className="text-sm text-muted-foreground">{label}</span>
+      <strong className="[overflow-wrap:anywhere] text-xl leading-tight">{formatValue(value)}</strong>
+    </Card>
+  );
+}
+
+function RelatedObjectBadges({
+  objects,
+  onRelatedObjectClick
+}: {
+  objects: ZtaRelatedObject[];
+  onRelatedObjectClick?: (relatedObject: ZtaRelatedObject) => void;
+}) {
+  if (objects.length === 0) {
+    return formatValue(null);
+  }
+
+  return (
+    <div className="flex max-w-96 flex-wrap gap-1">
+      {objects.map((object) => {
+        const id = getRelatedObjectId(object);
+        const title = getRelatedObjectTooltipTitle(object);
+
+        if (!onRelatedObjectClick) {
+          return (
+            <Badge key={id} className="max-w-full font-mono font-medium" title={title} variant="outline">
+              <span className="truncate">{id}</span>
+            </Badge>
+          );
+        }
+
+        return (
+          <button
+            key={id}
+            aria-label={`Open related object ${id}`}
+            className="inline-flex max-w-full items-center rounded-full border px-2.5 py-0.5 font-mono text-xs font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            title={title}
+            type="button"
+            onClick={() => onRelatedObjectClick(object)}
+          >
+            <span className="truncate">{id}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+function getRelatedObjectSearchValues(test: ZtaReportTest): string[] {
+  return getRelatedObjectsWithIds(test).flatMap(getRelatedObjectSearchValuesForObject);
+}
+
+function getRelatedObjectSearchValuesForObject(object: ZtaRelatedObject): string[] {
+  return [
+    object.id,
+    object.object_id,
+    object.servicePrincipalId,
+    object.applicationId,
+    object.displayName,
+    object.servicePrincipalType,
+    object.userPrincipalName,
+    ...(object.tags ?? [])
+  ].filter(isNonEmptyString);
+}
+
+function getRelatedObjectsWithIds(test: ZtaReportTest): ZtaRelatedObject[] {
+  return (test.RelatedObjects ?? []).filter((object): object is ZtaRelatedObject & ({ id: string } | { object_id: string }) =>
+    isNonEmptyString(getRelatedObjectId(object))
+  );
+}
+
+function getRelatedObjectId(object: ZtaRelatedObject): string {
+  return object.id ?? object.object_id ?? "";
+}
+
+function getRelatedObjectTooltipTitle(object: ZtaRelatedObject): string {
+  return [
+    ["id", object.id],
+    ["object_id", object.object_id],
+    ["servicePrincipalId", object.servicePrincipalId],
+    ["tags", object.tags],
+    ["applicationId", object.applicationId],
+    ["displayName", object.displayName],
+    ["servicePrincipalType", object.servicePrincipalType],
+    ["userPrincipalName", object.userPrincipalName]
+  ]
+    .map(([label, value]) => `${label}: ${formatTooltipValue(value)}`)
+    .join("\n");
+}
+
+function formatTooltipValue(value: string | string[] | null | undefined): string {
+  if (Array.isArray(value)) {
+    return value.length > 0 ? value.join(", ") : "-";
+  }
+
+  return isNonEmptyString(value) ? value : "-";
+}
+
+function isNonEmptyString(value: string | null | undefined): value is string {
+  return typeof value === "string" && value.trim().length > 0;
+}