@manta-eu/react 0.2.0 → 0.3.0

package/src/components/planning/ExecutionSectionItem.tsx

@@ -1,184 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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>
-  );
-}

package/src/components/planning/action-plan-icons.tsx

@@ -1,27 +0,0 @@
-import { BarChart2, Bell, CircleDot, DollarSign, Image, Settings, Target, UsersRound, Zap } from "lucide-react";
-import type { LucideIcon } from "lucide-react";
-import type { ReactNode } from "react";
-
-const stepIconKeywords: [string[], LucideIcon][] = [
-  [["campaign", "ad", "advertising", "promote", "advertise", "boost"], Target],
-  [["audience", "target", "people", "customer", "user", "segment"], UsersRound],
-  [["remind", "review", "check", "monitor", "follow"], Bell],
-  [["budget", "spend", "cost", "money", "bid"], DollarSign],
-  [["creative", "image", "video", "asset", "copy", "content"], Image],
-  [["launch", "publish", "start", "run", "enable", "activate"], Zap],
-  [["report", "analys", "track", "metric", "data", "insight"], BarChart2],
-  [["rule", "logic", "automat", "workflow"], Settings],
-];
-
-function matchStepIcon(name: string): LucideIcon {
-  const lower = name.toLowerCase();
-  for (const [keywords, icon] of stepIconKeywords) {
-    if (keywords.some((kw) => lower.includes(kw))) return icon;
-  }
-  return CircleDot;
-}
-
-export function resolveStepIcon(name: string, className: string): ReactNode {
-  const Icon = matchStepIcon(name);
-  return <Icon className={className} />;
-}

package/src/components/planning/execution-section-model.ts

@@ -1,190 +0,0 @@
-import { iriLocalName } from "@manta-eu/client/shared/rdf-namespaces";
-import { isPresent } from "@manta-eu/lib/present";
-import type { EntityTypeEntry } from "./ActionPlanDetailView";
-import type { ActionPlanExecutionProvenanceResult, ExecutionProvenanceActivity, ManualAction } from "#ldo-ui";
-
-export type SectionStatus = "pending" | "running" | "completed" | "failed";
-
-export type SectionData = {
-  key: string;
-  entry: EntityTypeEntry;
-  activities: ExecutionProvenanceActivity[];
-  status: SectionStatus;
-};
-
-export type ResolvedManualActionStatus = Extract<ManualAction["status"], "COMPLETED" | "REJECTED">;
-
-export type BuildSectionsArgs = {
-  entityTypes: EntityTypeEntry[];
-  activities: ExecutionProvenanceActivity[];
-  provenance: ActionPlanExecutionProvenanceResult | null;
-  planFailed: boolean;
-};
-
-export function parseTimestampMs(timestamp: string | null | undefined): number | null {
-  if (!timestamp) return null;
-  const value = new Date(timestamp).getTime();
-  return Number.isFinite(value) ? value : null;
-}
-
-export function deriveSectionStatus(
-  activities: ExecutionProvenanceActivity[],
-  provenance: ActionPlanExecutionProvenanceResult | null,
-  planFailed: boolean,
-): SectionStatus {
-  if (!isPresent(activities)) {
-    if (planFailed) return "failed";
-    if (provenance?.planEndedAtTime) return "completed";
-    return "pending";
-  }
-  if (activities.some((a) => a.errorMessage)) return "failed";
-  if (activities.every((a) => a.endedAtTime)) {
-    return planFailed ? "failed" : "completed";
-  }
-  if (activities.some((a) => a.startedAtTime)) return "running";
-  return "pending";
-}
-
-function isSectionLabelOrIriMatch(activity: ExecutionProvenanceActivity, typeName: string): boolean {
-  const entityLabel = activity.entityLabel.toLowerCase();
-  const activityIri = activity.iri.toLowerCase();
-  const typeSlug = typeName.replace(/\s+/g, "_");
-  return entityLabel.includes(typeName) || activityIri.includes(typeSlug) || activityIri.includes(typeName);
-}
-
-function isSectionPauseAliasMatch(activity: ExecutionProvenanceActivity, typeName: string): boolean {
-  if (!typeName.includes("pause")) return false;
-  const entityLabel = activity.entityLabel.toLowerCase();
-  const opType = (activity.operationType ?? "").toLowerCase();
-  return opType.includes("delete") || opType.includes("pause") || entityLabel.includes("pause");
-}
-
-function isSectionScaleAliasMatch(activity: ExecutionProvenanceActivity, typeName: string): boolean {
-  if (!typeName.includes("scale")) return false;
-  const entityLabel = activity.entityLabel.toLowerCase();
-  const opType = (activity.operationType ?? "").toLowerCase();
-  return (
-    opType.includes("addit") ||
-    opType.includes("scale") ||
-    opType.includes("budget") ||
-    entityLabel.includes("scale") ||
-    entityLabel.includes("budget")
-  );
-}
-
-function isSectionMonitorAliasMatch(activity: ExecutionProvenanceActivity, typeName: string): boolean {
-  if (!typeName.includes("monitor")) return false;
-  const entityLabel = activity.entityLabel.toLowerCase();
-  const opType = (activity.operationType ?? "").toLowerCase();
-  return opType.includes("monitor") || entityLabel.includes("monitor") || entityLabel.includes("verif");
-}
-
-function isSectionEntityTypeNameMatch(activity: ExecutionProvenanceActivity, typeName: string): boolean {
-  if (!activity.entityTypeName) return false;
-  return typeName.includes(activity.entityTypeName.toLowerCase());
-}
-
-function isSectionRelatedEntitiesMatch(activity: ExecutionProvenanceActivity, entry: EntityTypeEntry): boolean {
-  const typeName = entry.typeName.toLowerCase();
-  const entryTypeIri = entry.typeIri.toLowerCase();
-  for (const entity of activity.entities) {
-    if (!entity.typeName) continue;
-    const entityTypeLower = entity.typeName.toLowerCase();
-    if (typeName.includes(entityTypeLower)) return true;
-    if (entryTypeIri.includes(entityTypeLower)) return true;
-  }
-  return false;
-}
-
-export function matchesSection(activity: ExecutionProvenanceActivity, entry: EntityTypeEntry): boolean {
-  const typeName = entry.typeName.toLowerCase();
-  const predicates = [
-    () => isSectionLabelOrIriMatch(activity, typeName),
-    () => isSectionPauseAliasMatch(activity, typeName),
-    () => isSectionScaleAliasMatch(activity, typeName),
-    () => isSectionMonitorAliasMatch(activity, typeName),
-    () => isSectionEntityTypeNameMatch(activity, typeName),
-    () => isSectionRelatedEntitiesMatch(activity, entry),
-  ];
-  return predicates.some((p) => p());
-}
-
-export function matchesManualActionSection(
-  manualAction: ManualAction,
-  entry: EntityTypeEntry,
-  sectionCount: number,
-): boolean {
-  if (sectionCount === 1) return true;
-
-  const entryTypeIri = entry.typeIri.toLowerCase();
-  const entryTypeName = entry.typeName.toLowerCase();
-  const manualTypeIri = manualAction.typeIri.toLowerCase();
-  const manualTypeName = manualAction.typeName.toLowerCase();
-  const manualSubject = manualAction.subjectLabel?.toLowerCase() ?? manualAction.subjectIri.toLowerCase();
-
-  return (
-    manualTypeIri === entryTypeIri ||
-    manualTypeName === entryTypeName ||
-    entryTypeIri.includes(manualTypeName) ||
-    manualTypeIri.includes(entryTypeName) ||
-    manualSubject.includes(entryTypeName)
-  );
-}
-
-export function matchesManualActionActivity(
-  manualAction: ManualAction,
-  activity: ExecutionProvenanceActivity,
-): boolean {
-  if (activity.entityIri === manualAction.subjectIri) return true;
-  if (activity.entities.some((entity) => entity.iri === manualAction.subjectIri)) return true;
-
-  const subjectLabel = manualAction.subjectLabel?.toLowerCase();
-  if (subjectLabel && activity.entityLabel.toLowerCase().includes(subjectLabel)) return true;
-
-  return activity.iri.toLowerCase().includes(iriLocalName(manualAction.subjectIri).toLowerCase());
-}
-
-export function findResolvedManualActionStatus(
-  activity: ExecutionProvenanceActivity,
-  manualActions: ManualAction[],
-): ResolvedManualActionStatus | null {
-  const found = manualActions.find((manualAction) => matchesManualActionActivity(manualAction, activity));
-  return found?.status === "COMPLETED" || found?.status === "REJECTED" ? found.status : null;
-}
-
-export function buildSections(args: BuildSectionsArgs): SectionData[] {
-  const { entityTypes, activities, provenance, planFailed } = args;
-  const matched = new Set<string>();
-
-  const sections: SectionData[] = entityTypes.map((entry) => {
-    const sectionActivities = activities.filter((a) => {
-      if (matched.has(a.iri)) return false;
-      return matchesSection(a, entry);
-    });
-    for (const a of sectionActivities) matched.add(a.iri);
-
-    return {
-      key: entry.typeIri,
-      entry,
-      activities: sectionActivities,
-      status: deriveSectionStatus(sectionActivities, provenance, planFailed),
-    };
-  });
-
-  const unmatched = activities.filter((a) => !matched.has(a.iri));
-  if (isPresent(unmatched)) {
-    sections.push({
-      key: "__unmatched",
-      entry: {
-        typeIri: "__unmatched",
-        typeName: "Other actions",
-        addedCount: 0,
-        updatedCount: unmatched.length,
-      },
-      activities: unmatched,
-      status: deriveSectionStatus(unmatched, provenance, planFailed),
-    });
-  }
-
-  return sections;
-}

package/src/routes/data-explorer/components/TruncateTooltip.tsx

@@ -1,25 +0,0 @@
-import { useState } from "react";
-import { Tooltip, TooltipContent, TooltipTrigger } from "#components/tooltip/index";
-
-type TruncateTooltipProps = { text: string; className: string };
-
-export function TruncateTooltip(props: TruncateTooltipProps) {
-  const { text, className } = props;
-
-  const [isTruncated, setIsTruncated] = useState(false);
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <span
-          className={className}
-          onMouseEnter={(event) => setIsTruncated(event.currentTarget.scrollWidth > event.currentTarget.clientWidth)}
-        >
-          {text}
-        </span>
-      </TooltipTrigger>
-
-      {isTruncated && <TooltipContent>{text}</TooltipContent>}
-    </Tooltip>
-  );
-}