@manta-eu/react 0.1.9 → 0.2.0

package/src/components/planning/ConnectedPlanDetailView.tsx

@@ -0,0 +1,76 @@
+import { GQLActionPlanState } from "@manta-eu/client";
+import { type ReactNode, type Ref, useImperativeHandle, useMemo } from "react";
+import { AgentsGraph } from "../graph/AgentsGraph";
+import { ActionPlanDetailView } from "./ActionPlanDetailView";
+import type { ActionPlan } from "./plan-detail-utils";
+import type { PlanViewMode } from "./TopBar";
+import { useValidateActionPlan } from "#hooks/useValidateActionPlan";
+import { ActionPlanChangesTable, type RdfGraph } from "#ldo-ui";
+import { useMantaClient } from "#providers/MantaClientProvider";
+
+export type ConnectedPlanDetailViewHandle = {
+  execute: () => void;
+  cancel: () => void;
+};
+
+export type ConnectedPlanDetailViewProps = {
+  plan: ActionPlan;
+  graphDocument?: RdfGraph | null;
+  isLoading: boolean;
+  error: string | null;
+  hideTopBar?: boolean;
+  hideChanges?: boolean;
+  fitContent?: boolean;
+  viewMode?: PlanViewMode;
+  stateOverride?: GQLActionPlanState;
+  isDryRun?: boolean;
+  ref?: Ref<ConnectedPlanDetailViewHandle>;
+  onViewModeChange?: (viewMode: PlanViewMode) => void;
+  onExecute?: (planIri: string) => void;
+  onCancel?: (planIri: string) => void;
+  onRerun?: (planIri: string) => void;
+  onModify?: (planIri: string) => void;
+  topBarActions?: ReactNode;
+  leadingAction?: ReactNode;
+  rulesSlot?: ReactNode;
+  changesSlot?: ReactNode;
+  onRunClick?: (activityIri: string) => void;
+};
+
+export function ConnectedPlanDetailView(props: ConnectedPlanDetailViewProps) {
+  const { plan, graphDocument, stateOverride, ref, onExecute, onCancel, changesSlot, ...rest } = props;
+
+  const { mantaClient } = useMantaClient();
+
+  const serverIsDraft = (plan.state ?? GQLActionPlanState.Draft) === GQLActionPlanState.Draft;
+
+  const { report, isLoading: isValidating } = useValidateActionPlan(mantaClient, serverIsDraft ? plan.iri : undefined);
+  const issueCount = report?.resultCount ?? 0;
+
+  const effectiveStatus = stateOverride ?? plan.state ?? GQLActionPlanState.Draft;
+  const planWithStatus = useMemo(() => ({ ...plan, state: effectiveStatus }), [plan, effectiveStatus]);
+
+  const graphSlot =
+    graphDocument && graphDocument.size > 0 ? (
+      <AgentsGraph graph={graphDocument} planGraphIri={plan.iri} defaultViewMode="graph" fullHeight />
+    ) : null;
+
+  useImperativeHandle(ref, () => ({
+    execute: () => onExecute?.(plan.iri),
+    cancel: () => onCancel?.(plan.iri),
+  }));
+
+  return (
+    <ActionPlanDetailView
+      {...rest}
+      plan={planWithStatus}
+      execution={null}
+      graphSlot={graphSlot}
+      issueCount={issueCount}
+      isValidating={isValidating}
+      changesSlot={changesSlot ?? <ActionPlanChangesTable planGraphIri={plan.iri} />}
+      onCancel={onCancel}
+      onExecute={onExecute ? (planIri) => onExecute(planIri) : undefined}
+    />
+  );
+}

package/src/components/planning/DryRunCompleteBanner.tsx

@@ -0,0 +1,18 @@
+import { Info } from "lucide-react";
+
+export function DryRunCompleteBanner() {
+  return (
+    <div
+      role="status"
+      className="flex shrink-0 items-start gap-2 border-b border-default-border bg-info px-3 py-3 text-info-foreground sm:px-6"
+    >
+      <Info aria-hidden="true" className="mt-0.5 size-4 shrink-0" />
+      <div className="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-1">
+        <p className="typography-small-medium">Dry run complete — no changes were applied</p>
+        <p className="typography-small text-info-foreground/80">
+          Re-run with dry run off to apply these changes to your integrations.
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/components/planning/ExecutePlanDialog.tsx

@@ -0,0 +1,123 @@
+import { Play, RefreshCw, type LucideIcon } from "lucide-react";
+import { useCallback, useState, type ReactNode } from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "#components/alert-dialog/index";
+import { Button } from "#components/button/index";
+import { Checkbox } from "#components/checkbox/index";
+
+export type ExecutePlanDialogAction = "execute" | "rerun";
+
+export type ExecutePlanDialogProps = {
+  onConfirm: (dryRun: boolean) => void;
+  trigger?: ReactNode | null;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  action?: ExecutePlanDialogAction;
+};
+
+type ExecutePlanDialogContent = {
+  title: string;
+  description: string;
+  dryRunDescription: string;
+  actionLabel: string;
+  dryRunActionLabel: string;
+  triggerIcon: LucideIcon;
+  triggerLabel: string;
+};
+
+const contentByAction = {
+  execute: {
+    title: "Are you sure you want to execute this plan?",
+    description: "This will apply all planned changes to your integrations.",
+    dryRunDescription:
+      "This will preview the planned changes without applying them — nothing will be sent to your integrations.",
+    actionLabel: "Execute",
+    dryRunActionLabel: "Preview",
+    triggerIcon: Play,
+    triggerLabel: "Execute Plan",
+  },
+  rerun: {
+    title: "Re-run this plan?",
+    description: "This will re-apply all planned changes to your integrations.",
+    dryRunDescription:
+      "This will preview the re-applied changes without applying them — nothing will be sent to your integrations.",
+    actionLabel: "Re-run",
+    dryRunActionLabel: "Preview",
+    triggerIcon: RefreshCw,
+    triggerLabel: "Re-run Plan",
+  },
+} as const satisfies Record<ExecutePlanDialogAction, ExecutePlanDialogContent>;
+
+type SizePinnedSwapProps = {
+  value: string;
+  toggledValue: string;
+  isToggled: boolean;
+};
+
+function SizePinnedSwap(props: SizePinnedSwapProps) {
+  const { value, toggledValue, isToggled } = props;
+  return (
+    <span className="grid min-w-0">
+      <span className="col-start-1 row-start-1 min-w-0">{isToggled ? toggledValue : value}</span>
+      <span aria-hidden className="invisible col-start-1 row-start-1 min-w-0">
+        {isToggled ? value : toggledValue}
+      </span>
+    </span>
+  );
+}
+
+export function ExecutePlanDialog(props: ExecutePlanDialogProps) {
+  const { onConfirm, trigger, open, onOpenChange, action = "execute" } = props;
+  const content = contentByAction[action];
+  const [dryRun, setDryRun] = useState(false);
+
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      // Reset on close, as the dialog is opened by setting `open` directly, which does not trigger `onOpenChange`,
+      // while closing only happens via buttons in the dialog, so that always triggers `onOpenChange`
+      if (!nextOpen) setDryRun(false);
+      onOpenChange?.(nextOpen);
+    },
+    [onOpenChange],
+  );
+
+  return (
+    <AlertDialog open={open} onOpenChange={handleOpenChange}>
+      {trigger !== null && (
+        <AlertDialogTrigger asChild>
+          {trigger ?? (
+            <Button size="lg" className="cursor-pointer" icon={content.triggerIcon} label={content.triggerLabel} />
+          )}
+        </AlertDialogTrigger>
+      )}
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{content.title}</AlertDialogTitle>
+          <AlertDialogDescription>
+            <SizePinnedSwap value={content.description} toggledValue={content.dryRunDescription} isToggled={dryRun} />
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <Checkbox
+          checked={dryRun}
+          onCheckedChange={(checked) => setDryRun(checked === true)}
+          label="Dry run (preview changes)"
+        />
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={() => onConfirm(dryRun)}>
+            <SizePinnedSwap value={content.actionLabel} toggledValue={content.dryRunActionLabel} isToggled={dryRun} />
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/src/components/planning/ExecutionActivityRow.tsx

@@ -0,0 +1,89 @@
+import { humanDuration } from "@manta-eu/lib/humanize";
+import { AlertCircle, Check, ClockFading, Loader2, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { match } from "ts-pattern";
+import { parseTimestampMs, type ResolvedManualActionStatus } from "./execution-section-model";
+import type { ExecutionProvenanceActivity } from "#ldo-ui";
+import { cn } from "#lib/utils";
+
+type ExecutionActivityRowProps = {
+  activity: ExecutionProvenanceActivity;
+  manualActionStatus?: ResolvedManualActionStatus | null;
+};
+
+type ActivityIconState = "error" | "rejected" | "completed" | "running" | "pending";
+
+function resolveIconState(
+  activity: ExecutionProvenanceActivity,
+  manualActionStatus: ResolvedManualActionStatus | null,
+): ActivityIconState {
+  if (activity.errorMessage) return "error";
+  if (manualActionStatus === "REJECTED") return "rejected";
+  if (manualActionStatus === "COMPLETED" || !!activity.endedAtTime) return "completed";
+  if (activity.startedAtTime) return "running";
+  return "pending";
+}
+
+export function ExecutionActivityRow(props: ExecutionActivityRowProps) {
+  const { activity, manualActionStatus = null } = props;
+  const iconState = resolveIconState(activity, manualActionStatus);
+  const hasError = iconState === "error";
+  const isPending = iconState === "pending";
+
+  return (
+    <div className={cn("flex items-center justify-between pl-5 pr-3 py-2", hasError && "bg-error/10")}>
+      <div className="flex items-center gap-3 min-w-0">
+        {match(iconState)
+          .with("error", () => <AlertCircle className="size-4 shrink-0 text-error-foreground" />)
+          .with("rejected", () => <X className="size-4 shrink-0 text-error-foreground" />)
+          .with("completed", () => <Check className="size-4 shrink-0 text-success-foreground" />)
+          .with("running", () => <Loader2 className="size-4 shrink-0 text-muted-foreground animate-spin" />)
+          .with("pending", () => <ClockFading className="size-4 shrink-0 text-muted-foreground/40" />)
+          .exhaustive()}
+        <span
+          className={cn(
+            "text-[12px] font-mono leading-[18px] truncate",
+            hasError ? "text-error-foreground" : isPending ? "text-muted-foreground" : "text-default-foreground",
+          )}
+        >
+          {activity.errorMessage ?? activity.entityLabel}
+        </span>
+      </div>
+      <ActivityElapsed activity={activity} hasError={hasError} isPending={isPending} />
+    </div>
+  );
+}
+
+function ActivityElapsed(props: { activity: ExecutionProvenanceActivity; hasError: boolean; isPending: boolean }) {
+  const { activity, hasError, isPending } = props;
+  const isRunning = !!activity.startedAtTime && !activity.endedAtTime;
+  const [now, setNow] = useState(() => Date.now());
+
+  useEffect(() => {
+    if (!isRunning) return;
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, [isRunning]);
+
+  if (!activity.startedAtTime) {
+    return <span className="text-[12px] font-mono leading-[18px] shrink-0 ml-3 text-muted-foreground">-</span>;
+  }
+
+  const start = parseTimestampMs(activity.startedAtTime);
+  if (start === null) {
+    return <span className="text-[12px] font-mono leading-[18px] shrink-0 ml-3 text-muted-foreground">-</span>;
+  }
+  const end = parseTimestampMs(activity.endedAtTime) ?? now;
+  const label = humanDuration({ start, end, largest: 2 }) || "0 seconds";
+
+  return (
+    <span
+      className={cn(
+        "text-[12px] font-mono leading-[18px] shrink-0 ml-3",
+        hasError ? "text-error-foreground" : isPending ? "text-muted-foreground" : "text-default-foreground",
+      )}
+    >
+      {label}
+    </span>
+  );
+}

package/src/components/planning/ExecutionProgressBar.tsx

@@ -0,0 +1,29 @@
+import type { ExecutionProgress } from "./plan-detail-utils";
+import { cn } from "#lib/utils";
+
+export function ExecutionProgressBar(props: { execution: ExecutionProgress }) {
+  const { execution } = props;
+  const completedCount = execution.activities.filter((a) => a.status === "completed").length;
+
+  return (
+    <div className="mt-6 space-y-2">
+      <div className="flex items-center justify-between">
+        <span className="typography-caption-medium text-muted-foreground">
+          {execution.isComplete ? "Execution Complete" : execution.isFailed ? "Execution Failed" : "Executing..."}
+        </span>
+        <span className="typography-small text-muted-foreground">
+          {completedCount} / {execution.activities.length} tasks
+        </span>
+      </div>
+      <div className="h-1.5 overflow-hidden rounded-full bg-muted">
+        <div
+          className={cn(
+            "h-full transition-all duration-300",
+            execution.isFailed ? "bg-error-foreground" : "bg-accent-foreground",
+          )}
+          style={{ width: `${execution.progress}%` }}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/planning/ExecutionSectionItem.tsx

@@ -0,0 +1,184 @@
+import { humanDuration } from "@manta-eu/lib/humanize";
+import { isPresent } from "@manta-eu/lib/present";
+import { AlertCircle, Check, ChevronDown, ClockFading, Loader2 } from "lucide-react";
+import { isNotNil } from "ramda";
+import { useEffect, useState } from "react";
+import { match } from "ts-pattern";
+import { resolveStepIcon } from "./action-plan-icons";
+import type { EntityTypeEntry } from "./ActionPlanDetailView";
+import { findResolvedManualActionStatus, parseTimestampMs, type SectionStatus } from "./execution-section-model";
+import { ExecutionActivityRow } from "./ExecutionActivityRow";
+import { ManualActionCard, type ManualActionTarget } from "./ManualActionCard";
+import type { ExecutionProvenanceActivity, ManualAction, ManualActionResolution, ManualActionResolving } from "#ldo-ui";
+import { getPendingManualActions, getResolvedManualActions } from "#lib/manual-actions";
+import { cn } from "#lib/utils";
+
+export type ExecutionSectionItemProps = {
+  entry: EntityTypeEntry;
+  activities: ExecutionProvenanceActivity[];
+  status: SectionStatus;
+  fallbackStartedAtMs?: number | null;
+  isExpanded: boolean;
+  onToggle: () => void;
+  manualActions?: ManualAction[];
+  manualActionEntities?: Map<string, ManualActionTarget[]>;
+  onManualActionResolve?: (subjectIri: string, resolution: ManualActionResolution) => void;
+  resolvingManualAction?: ManualActionResolving;
+  canResolveManualAction?: boolean;
+  manualActionDisabledReason?: string;
+};
+
+export function ExecutionSectionItem(props: ExecutionSectionItemProps) {
+  const {
+    entry,
+    activities,
+    status,
+    fallbackStartedAtMs = null,
+    isExpanded,
+    onToggle,
+    manualActions = [],
+    manualActionEntities,
+    onManualActionResolve,
+    resolvingManualAction,
+    canResolveManualAction,
+    manualActionDisabledReason,
+  } = props;
+
+  const pendingManualActions = getPendingManualActions(manualActions);
+  const resolvedManualActions = getResolvedManualActions(manualActions);
+  const hasContent = isPresent(activities) || isPresent(pendingManualActions);
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={onToggle}
+        className="flex w-full items-center gap-3 pl-2 pr-3 py-3 text-left transition-colors hover:bg-muted/30"
+      >
+        <div className="flex shrink-0 items-center p-1.5 rounded-lg">
+          <ChevronDown
+            className={cn("size-5 shrink-0 text-muted-foreground transition-transform", !isExpanded && "-rotate-90")}
+          />
+        </div>
+
+        <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-faint">
+          {resolveStepIcon(entry.typeName, "size-5 text-muted-foreground")}
+        </div>
+
+        <div className="flex-1 min-w-0 flex flex-col gap-0.5">
+          <span
+            className={cn(
+              "typography-small-medium block truncate",
+              status === "pending" ? "text-muted-foreground" : "text-default-foreground",
+            )}
+          >
+            {entry.typeName}
+          </span>
+          {entry.description && (
+            <span className="typography-tiny text-muted-foreground block truncate">{entry.description}</span>
+          )}
+        </div>
+
+        <div className="flex items-center gap-3 shrink-0">
+          <SectionElapsed
+            activities={activities}
+            status={status}
+            estimatedTime={entry.estimatedTime ?? null}
+            fallbackStartedAtMs={fallbackStartedAtMs}
+          />
+          <SectionStatusIcon status={status} />
+        </div>
+      </button>
+
+      {isExpanded && hasContent && (
+        <div className="bg-faint border-t border-default-border py-1.5">
+          {activities.map((activity) => (
+            <ExecutionActivityRow
+              key={activity.iri}
+              activity={activity}
+              manualActionStatus={findResolvedManualActionStatus(activity, resolvedManualActions)}
+            />
+          ))}
+
+          {pendingManualActions.map((ma) => (
+            <ManualActionCard
+              key={ma.subjectIri}
+              manualAction={ma}
+              entities={manualActionEntities?.get(ma.subjectIri) ?? []}
+              description={ma.description ?? entry.description ?? undefined}
+              resolving={resolvingManualAction}
+              onResolve={(resolution) => onManualActionResolve?.(ma.subjectIri, resolution)}
+              canResolve={canResolveManualAction}
+              disabledReason={manualActionDisabledReason}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function SectionStatusIcon(props: { status: SectionStatus }) {
+  return match(props.status)
+    .with("completed", () => (
+      <div className="size-5 flex items-center justify-center rounded-full bg-success">
+        <Check className="size-3 text-success-foreground" />
+      </div>
+    ))
+    .with("running", () => <Loader2 className="size-5 text-muted-foreground animate-spin" />)
+    .with("failed", () => (
+      <div className="size-5 flex items-center justify-center rounded-full bg-error">
+        <AlertCircle className="size-3 text-error-foreground" />
+      </div>
+    ))
+    .with("pending", () => <ClockFading className="size-5 text-muted-foreground/40" />)
+    .exhaustive();
+}
+
+function SectionElapsed(props: {
+  activities: ExecutionProvenanceActivity[];
+  status: SectionStatus;
+  estimatedTime: string | null;
+  fallbackStartedAtMs?: number | null;
+}) {
+  const { activities, status, estimatedTime, fallbackStartedAtMs = null } = props;
+  const isRunning = status === "running";
+  const [now, setNow] = useState(() => Date.now());
+
+  useEffect(() => {
+    if (!isRunning) return;
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, [isRunning]);
+
+  const started = activities
+    .map((a) => a.startedAtTime)
+    .filter(isNotNil)
+    .sort();
+  if (!isPresent(started)) {
+    if (fallbackStartedAtMs !== null) {
+      return (
+        <span className="typography-tiny text-muted-foreground whitespace-nowrap">
+          {humanDuration({ start: fallbackStartedAtMs, end: now, largest: 2 }) || "0 seconds"}
+        </span>
+      );
+    }
+    if (estimatedTime) {
+      return <span className="typography-tiny text-muted-foreground/60 whitespace-nowrap">{estimatedTime}</span>;
+    }
+    return null;
+  }
+
+  const ended = activities
+    .map((a) => a.endedAtTime)
+    .filter(isNotNil)
+    .sort()
+    .reverse();
+  const start = parseTimestampMs(started[0]);
+  if (start === null) return null;
+  const end = isPresent(ended) && !isRunning ? parseTimestampMs(ended[0]) : now;
+  if (end === null) return null;
+  const label = humanDuration({ start, end, largest: 2 }) || "0 seconds";
+
+  return <span className="typography-tiny text-muted-foreground whitespace-nowrap">{label}</span>;
+}

package/src/components/planning/ExecutionSections.tsx

@@ -0,0 +1,97 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { useEffect, useState } from "react";
+import type { EntityTypeEntry } from "./ActionPlanDetailView";
+import { buildSections, matchesManualActionSection } from "./execution-section-model";
+import { ExecutionActivityRow } from "./ExecutionActivityRow";
+import { ExecutionSectionItem } from "./ExecutionSectionItem";
+import type { ManualActionTarget } from "./ManualActionCard";
+import type {
+  ActionPlanExecutionProvenanceResult,
+  ManualAction,
+  ManualActionResolution,
+  ManualActionResolving,
+} from "#ldo-ui";
+
+export type ExecutionSectionsProps = {
+  entityTypes: EntityTypeEntry[];
+  provenance: ActionPlanExecutionProvenanceResult | null;
+  manualActions?: ManualAction[];
+  manualActionEntities?: Map<string, ManualActionTarget[]>;
+  activeStartedAtMs?: number | null;
+  onManualActionResolve?: (subjectIri: string, resolution: ManualActionResolution) => void;
+  resolvingManualAction?: ManualActionResolving;
+  canResolveManualAction?: boolean;
+  manualActionDisabledReason?: string;
+};
+
+export function ExecutionSections(props: ExecutionSectionsProps) {
+  const {
+    entityTypes,
+    provenance,
+    manualActions = [],
+    manualActionEntities,
+    activeStartedAtMs = null,
+    onManualActionResolve,
+    resolvingManualAction,
+    canResolveManualAction,
+    manualActionDisabledReason,
+  } = props;
+  const [expandedIndex, setExpandedIndex] = useState<number | null>(0);
+  const [lastAutoExpandedRunning, setLastAutoExpandedRunning] = useState(-1);
+  const activities = provenance?.activities ?? [];
+  const planFailed = !!provenance?.planErrorMessage;
+
+  const sections = buildSections({ entityTypes, activities, provenance, planFailed });
+
+  const runningSectionIndex = sections.findIndex((s) => s.status === "running");
+
+  useEffect(() => {
+    if (runningSectionIndex >= 0 && runningSectionIndex !== lastAutoExpandedRunning) {
+      setLastAutoExpandedRunning(runningSectionIndex);
+      setExpandedIndex(runningSectionIndex);
+    }
+  }, [lastAutoExpandedRunning, runningSectionIndex]);
+
+  if (!isPresent(sections) && isPresent(activities)) {
+    return (
+      <div className="overflow-hidden rounded-xl border border-default-border bg-card">
+        <div className="bg-faint py-1.5">
+          {activities.map((activity) => (
+            <ExecutionActivityRow key={activity.iri} activity={activity} />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="overflow-hidden rounded-xl border border-default-border bg-card divide-y divide-default-border">
+      {sections.map((section, index) => {
+        const activeFallbackApplies = index === 0 && section.status === "pending" && activeStartedAtMs !== null;
+        const effectiveStatus = activeFallbackApplies ? "running" : section.status;
+        const fallbackStartedAtMs = activeFallbackApplies ? activeStartedAtMs : null;
+        const sectionManualActions = manualActions.filter((manualAction) =>
+          matchesManualActionSection(manualAction, section.entry, sections.length),
+        );
+
+        return (
+          <ExecutionSectionItem
+            key={section.key}
+            entry={section.entry}
+            activities={section.activities}
+            status={effectiveStatus}
+            fallbackStartedAtMs={fallbackStartedAtMs}
+            isExpanded={expandedIndex === index}
+            onToggle={() => setExpandedIndex((prev) => (prev === index ? null : index))}
+            manualActions={sectionManualActions}
+            manualActionEntities={manualActionEntities}
+            onManualActionResolve={onManualActionResolve}
+            resolvingManualAction={resolvingManualAction}
+            canResolveManualAction={canResolveManualAction}
+            manualActionDisabledReason={manualActionDisabledReason}
+          />
+        );
+      })}
+    </div>
+  );
+}