@manta-eu/react 0.1.0

package/dist/routes/plans/components/ActionPlansFilters.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { humanCount } from "@manta-eu/lib/humanize";
+import { isPresent } from "@manta-eu/lib/present";
+import { ChevronDown, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useDebounceValue } from "usehooks-ts";
+import { actionPlanColumnLabels, approvalFilterOptions, availabilityFilterOptions, defaultColumnOrder, statusFilterOptions, typeFilterOptions, } from "./actionPlansTableConfig.js";
+import { Button } from "#components/button/index";
+import { Dropdown, DropdownCheckboxItem, DropdownContent, DropdownGroup, DropdownItem, DropdownTrigger, } from "#components/dropdown/index";
+import { FilterChip, FilterSection, FilterSheet } from "#components/filter-sheet/index";
+import { InputDateRange, SearchInput } from "#components/input/index";
+import { TableColumnRearrangePopover } from "#components/table/index";
+import { cn } from "#lib/utils";
+function StatusFilterDropdown(props) {
+    const { selectedStatus, onChange, fullWidth = false } = props;
+    const allSelected = selectedStatus === "ALL";
+    const selectedOption = statusFilterOptions.find((option) => option.id === selectedStatus);
+    const triggerLabel = fullWidth ? selectedOption?.label : allSelected ? "Status" : selectedOption?.label;
+    return (_jsxs(Dropdown, { children: [_jsx(DropdownTrigger, { asChild: true, children: _jsxs(Button, { variant: "tertiary", size: "base", rounded: "lg", className: fullWidth ? "w-full justify-between" : undefined, children: [_jsxs("span", { className: "flex items-center gap-2", children: [!allSelected && selectedOption && (_jsx("span", { className: cn("size-2.5 rounded-full", selectedOption.dotClass) })), _jsx("span", { children: triggerLabel })] }), _jsx(ChevronDown, { className: "size-4" })] }) }), _jsx(DropdownContent, { align: "start", className: fullWidth ? "w-(--radix-dropdown-menu-trigger-width)" : "w-48", children: _jsx(DropdownGroup, { label: "Show statuses", children: statusFilterOptions.map((option) => (_jsx(DropdownItem, { selected: option.id === selectedStatus, onClick: () => onChange(option.id), icon: _jsx("span", { className: cn("size-2 rounded-full", option.id === "ALL" ? "opacity-0" : option.dotClass) }), children: option.label }, option.id))) }) })] }));
+}
+function AvailabilityFilterDropdown(props) {
+    const { selectedAvailability, onChange, fullWidth = false } = props;
+    const selectedOption = availabilityFilterOptions.find((option) => option.id === selectedAvailability);
+    return (_jsxs(Dropdown, { children: [_jsx(DropdownTrigger, { asChild: true, children: _jsxs(Button, { variant: "tertiary", size: "base", rounded: "lg", className: fullWidth ? "w-full justify-between" : undefined, children: [_jsx("span", { children: selectedOption?.label }), _jsx(ChevronDown, { className: "size-4" })] }) }), _jsx(DropdownContent, { align: "start", className: fullWidth ? "w-(--radix-dropdown-menu-trigger-width)" : "w-48", children: _jsx(DropdownGroup, { label: "Show plans", children: availabilityFilterOptions.map(({ id, label }) => (_jsx(DropdownItem, { selected: id === selectedAvailability, onClick: () => onChange(id), children: label }, id))) }) })] }));
+}
+function typeFilterLabel(selectedTypes) {
+    if (!isPresent(selectedTypes))
+        return "Type";
+    if (selectedTypes.length === 1) {
+        return typeFilterOptions.find((option) => option.id === selectedTypes[0])?.label ?? "Type";
+    }
+    return humanCount(selectedTypes.length, "type");
+}
+function TypeFilterDropdown(props) {
+    const { selectedTypes, onChange } = props;
+    function toggleType(type) {
+        onChange(selectedTypes.includes(type) ? selectedTypes.filter((t) => t !== type) : [...selectedTypes, type]);
+    }
+    const label = typeFilterLabel(selectedTypes);
+    return (_jsxs(Dropdown, { children: [_jsx(DropdownTrigger, { asChild: true, children: _jsxs(Button, { variant: "tertiary", size: "base", rounded: "lg", children: [_jsx("span", { children: label }), _jsx(ChevronDown, { className: "size-4" })] }) }), _jsx(DropdownContent, { align: "start", className: "w-48", children: _jsx(DropdownGroup, { label: "Show types", children: typeFilterOptions.map(({ id, label }) => (_jsx(DropdownCheckboxItem, { checked: selectedTypes.includes(id), onCheckedChange: () => toggleType(id), children: label }, id))) }) })] }));
+}
+function ApprovalFilterDropdown(props) {
+    const { selectedApproval, onChange, fullWidth = false } = props;
+    const allSelected = selectedApproval === "ALL";
+    const selectedOption = approvalFilterOptions.find((option) => option.id === selectedApproval);
+    const triggerLabel = fullWidth ? selectedOption?.label : allSelected ? "Approval" : selectedOption?.label;
+    return (_jsxs(Dropdown, { children: [_jsx(DropdownTrigger, { asChild: true, children: _jsxs(Button, { variant: "tertiary", size: "base", rounded: "lg", className: fullWidth ? "w-full justify-between" : undefined, children: [_jsx("span", { children: triggerLabel }), _jsx(ChevronDown, { className: "size-4" })] }) }), _jsx(DropdownContent, { align: "start", className: fullWidth ? "w-(--radix-dropdown-menu-trigger-width)" : "w-56", children: _jsx(DropdownGroup, { label: "Show approvals", children: approvalFilterOptions.map(({ id, label }) => (_jsx(DropdownItem, { selected: id === selectedApproval, onClick: () => onChange(id), children: label }, id))) }) })] }));
+}
+function PlanSearchInput(props) {
+    const { searchQuery, onChange } = props;
+    const [searchInput, setSearchInput] = useState(searchQuery);
+    const [debouncedSearchInput] = useDebounceValue(searchInput, 300);
+    const previousDebouncedRef = useRef(debouncedSearchInput);
+    const previousSearchQueryRef = useRef(searchQuery);
+    useEffect(() => {
+        if (previousDebouncedRef.current === debouncedSearchInput)
+            return;
+        previousDebouncedRef.current = debouncedSearchInput;
+        if (debouncedSearchInput !== searchQuery)
+            onChange(debouncedSearchInput);
+    }, [debouncedSearchInput, searchQuery, onChange]);
+    useEffect(() => {
+        if (previousSearchQueryRef.current === searchQuery)
+            return;
+        previousSearchQueryRef.current = searchQuery;
+        if (searchQuery !== debouncedSearchInput)
+            setSearchInput(searchQuery);
+    }, [searchQuery, debouncedSearchInput]);
+    return (_jsx("div", { className: "min-w-0 flex-1 sm:w-56 sm:flex-none", children: _jsx(SearchInput, { placeholder: "Search plans\u2026", value: searchInput, onChange: (event) => setSearchInput(event.target.value), clearValue: () => setSearchInput(""), autoComplete: "off" }) }));
+}
+export function ActionPlansFilters(props) {
+    const { searchQuery, onSearchQueryChange, statusFilter, onStatusFilterChange, availabilityFilter, onAvailabilityFilterChange, typeFilter, onTypeFilterChange, lastRunRange, onLastRunRangeChange, approvalFilter, onApprovalFilterChange, table, } = props;
+    const [searchResetNonce, setSearchResetNonce] = useState(0);
+    const allStatusesSelected = statusFilter === "ALL";
+    const currentAvailabilitySelected = availabilityFilter === "CURRENT";
+    const noTypesSelected = !isPresent(typeFilter);
+    const allApprovalsSelected = approvalFilter === "ALL";
+    const hasDateRange = isPresent(lastRunRange?.from) || isPresent(lastRunRange?.to);
+    const hasActiveFilters = isPresent(searchQuery) ||
+        !allStatusesSelected ||
+        !currentAvailabilitySelected ||
+        !noTypesSelected ||
+        !allApprovalsSelected ||
+        hasDateRange;
+    function handleClearFilters() {
+        onSearchQueryChange("");
+        onStatusFilterChange("ALL");
+        onAvailabilityFilterChange("CURRENT");
+        onTypeFilterChange([]);
+        onLastRunRangeChange(undefined);
+        onApprovalFilterChange("ALL");
+        setSearchResetNonce((nonce) => nonce + 1);
+    }
+    function toggleType(type) {
+        onTypeFilterChange(typeFilter.includes(type) ? typeFilter.filter((t) => t !== type) : [...typeFilter, type]);
+    }
+    const activeFilterCount = (isPresent(searchQuery) ? 1 : 0) +
+        (allStatusesSelected ? 0 : 1) +
+        (currentAvailabilitySelected ? 0 : 1) +
+        (noTypesSelected ? 0 : 1) +
+        (allApprovalsSelected ? 0 : 1) +
+        (hasDateRange ? 1 : 0);
+    function filterControls() {
+        return (_jsxs(_Fragment, { children: [_jsx(AvailabilityFilterDropdown, { selectedAvailability: availabilityFilter, onChange: onAvailabilityFilterChange }), _jsx(StatusFilterDropdown, { selectedStatus: statusFilter, onChange: onStatusFilterChange }), _jsx(TypeFilterDropdown, { selectedTypes: typeFilter, onChange: onTypeFilterChange }), _jsx(InputDateRange, { initialDateRange: lastRunRange, onChange: onLastRunRangeChange, showPresets: true }), _jsx(ApprovalFilterDropdown, { selectedApproval: approvalFilter, onChange: onApprovalFilterChange }), hasActiveFilters && (_jsx(Button, { variant: "ghost", size: "base", rounded: "lg", onClick: handleClearFilters, icon: X, children: "Clear filters" }))] }));
+    }
+    const filterSheetContent = (_jsxs(_Fragment, { children: [_jsx(FilterSection, { title: "Availability", children: _jsx(AvailabilityFilterDropdown, { fullWidth: true, selectedAvailability: availabilityFilter, onChange: onAvailabilityFilterChange }) }), _jsx(FilterSection, { title: "Status", children: _jsx(StatusFilterDropdown, { fullWidth: true, selectedStatus: statusFilter, onChange: onStatusFilterChange }) }), _jsx(FilterSection, { title: "Type", children: typeFilterOptions.map(({ id, label }) => (_jsx(FilterChip, { selected: typeFilter.includes(id), label: label, onClick: () => toggleType(id) }, id))) }), _jsx(FilterSection, { title: "Last run", children: _jsx(InputDateRange, { initialDateRange: lastRunRange, onChange: onLastRunRangeChange, showPresets: true }) }), _jsx(FilterSection, { title: "Approval", children: _jsx(ApprovalFilterDropdown, { fullWidth: true, selectedApproval: approvalFilter, onChange: onApprovalFilterChange }) })] }));
+    return (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx(PlanSearchInput, { searchQuery: searchQuery, onChange: onSearchQueryChange }, searchResetNonce), _jsx("div", { className: "sm:hidden", children: _jsx(FilterSheet, { activeCount: activeFilterCount, onReset: handleClearFilters, children: filterSheetContent }) }), _jsx("div", { className: "hidden sm:contents", children: filterControls() }), _jsx("div", { className: "ml-auto hidden shrink-0 sm:block", children: _jsx(TableColumnRearrangePopover, { enableReset: true, table: table, columnLabels: actionPlanColumnLabels, defaultOrder: defaultColumnOrder }) })] }));
+}

package/dist/routes/plans/components/ActionPlansPage.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+import { type ActionPlansFrameProps } from "./frame.js";
+export type ActionPlansPageProps = {
+    buildPlanHref?: (iri: string) => string;
+    renderLayout?: (props: ActionPlansFrameProps) => ReactNode;
+};
+export declare function ActionPlansPage(props: ActionPlansPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ActionPlansPage.d.ts.map

package/dist/routes/plans/components/ActionPlansPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionPlansPage.d.ts","sourceRoot":"","sources":["../../../../src/routes/plans/components/ActionPlansPage.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAsBvC,OAAO,EAAiC,KAAK,qBAAqB,EAAE,MAAM,SAAS,CAAC;AASpF,MAAM,MAAM,oBAAoB,GAAG;IACjC,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,SAAS,CAAC;CAC5D,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAsP1D"}

package/dist/routes/plans/components/ActionPlansPage.js

@@ -0,0 +1,154 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { GQLActionPlanState } from "@manta-eu/client";
+import { buildPlanHref as defaultBuildPlanHref } from "@manta-eu/client/shared/agent-mode";
+import { isPresent } from "@manta-eu/lib/present";
+import { useReactTable } from "@tanstack/react-table";
+import { endOfDay } from "date-fns";
+import { Zap } from "lucide-react";
+import { parseAsInteger, parseAsIsoDateTime, useQueryState } from "nuqs";
+import { useCallback, useEffect, useMemo } from "react";
+import { useNavigate } from "react-router";
+import { ActionPlansFilters } from "./ActionPlansFilters.js";
+import { ActionPlansTableBody } from "./ActionPlansTableBody.js";
+import { useActionPlansTableColumns } from "./ActionPlansTableColumns.js";
+import { actionPlanColumnIds, approvalForFilter, defaultColumnOrder, orderByForSorting, parseAsApprovalFilter, parseAsAvailabilityFilter, parseAsPlanSearch, parseAsStatusFilter, parseAsTypeFilter, planFiltersForSelection, tableKey, } from "./actionPlansTableConfig.js";
+import { renderDefaultActionPlansFrame } from "./frame.js";
+import { ExecutePlanDialog } from "#components/planning/ExecutePlanDialog";
+import { createTableConfig, useTableState } from "#components/table/index";
+import { useActionPlans } from "#hooks/useActionPlans";
+import { useFittedPagination } from "#hooks/useFittedPagination";
+import { useRerunPlan } from "#hooks/useRerunPlan";
+import { useManualActionsForPlans } from "#ldo-ui";
+import { useMantaClient } from "#providers/index";
+export function ActionPlansPage(props) {
+    const { buildPlanHref = defaultBuildPlanHref, renderLayout = renderDefaultActionPlansFrame } = props;
+    const { mantaClient } = useMantaClient();
+    const navigate = useNavigate();
+    const [statusFilter, setStatusFilterRaw] = useQueryState("status", parseAsStatusFilter);
+    const [availabilityFilter, setAvailabilityFilterRaw] = useQueryState("availability", parseAsAvailabilityFilter);
+    const [pageNumberRaw, setPageNumberRaw] = useQueryState("page", parseAsInteger.withDefault(1));
+    const [searchQuery, setSearchQueryRaw] = useQueryState("q", parseAsPlanSearch);
+    const [typeFilter, setTypeFilterRaw] = useQueryState("type", parseAsTypeFilter);
+    const [lastRunFrom, setLastRunFromRaw] = useQueryState("from", parseAsIsoDateTime);
+    const [lastRunTo, setLastRunToRaw] = useQueryState("to", parseAsIsoDateTime);
+    const [approvalFilter, setApprovalFilterRaw] = useQueryState("approval", parseAsApprovalFilter);
+    const pageIndex = Math.max(0, pageNumberRaw - 1);
+    const setPageIndex = useCallback((value) => {
+        const nextPageIndex = typeof value === "function" ? value(pageIndex) : value;
+        void setPageNumberRaw(Math.max(0, nextPageIndex) + 1);
+    }, [pageIndex, setPageNumberRaw]);
+    const { containerRef, isMeasured, pageSize } = useFittedPagination({
+        pageIndex,
+        onPageIndexChange: setPageIndex,
+    });
+    const { sorting, setSorting, columnFilters, setColumnFilters, columnVisibility, setColumnVisibility, columnOrder, setColumnOrder, rowSelection, setRowSelection, } = useTableState(tableKey, [{ id: actionPlanColumnIds.state, desc: true }], {
+        defaultPageSize: pageSize,
+        useLocalState: true,
+    });
+    useEffect(() => {
+        if (!isPresent(columnOrder)) {
+            setColumnOrder(defaultColumnOrder);
+        }
+    }, [columnOrder, setColumnOrder]);
+    function resetPageIndex() {
+        setPageIndex(0);
+    }
+    const handleSearchQueryChange = useCallback((value) => {
+        void setSearchQueryRaw(value || null);
+        void setPageNumberRaw(1);
+    }, [setSearchQueryRaw, setPageNumberRaw]);
+    function handleTypeFilterChange(types) {
+        void setTypeFilterRaw(isPresent(types) ? types : null);
+        resetPageIndex();
+    }
+    function handleLastRunRangeChange(range) {
+        void setLastRunFromRaw(range?.from ?? null);
+        void setLastRunToRaw(range?.to ? endOfDay(range.to) : null);
+        resetPageIndex();
+    }
+    function handleApprovalFilterChange(approval) {
+        void setApprovalFilterRaw(approval === "ALL" ? null : approval);
+        resetPageIndex();
+    }
+    function handleAvailabilityFilterChange(availability) {
+        void setAvailabilityFilterRaw(availability);
+        resetPageIndex();
+    }
+    const lastRunRange = useMemo(() => (lastRunFrom || lastRunTo ? { from: lastRunFrom ?? undefined, to: lastRunTo ?? undefined } : undefined), [lastRunFrom, lastRunTo]);
+    const selectedPlanFilters = useMemo(() => planFiltersForSelection(statusFilter, availabilityFilter), [statusFilter, availabilityFilter]);
+    const orderBy = useMemo(() => orderByForSorting(sorting), [sorting]);
+    const { plans, count, isLoading: isPlansQueryLoading, isPlaceholderData, error, } = useActionPlans(mantaClient, {
+        orderBy,
+        limit: pageSize,
+        offset: pageIndex * pageSize,
+        ...selectedPlanFilters,
+        search: searchQuery.trim() || undefined,
+        integrations: isPresent(typeFilter) ? typeFilter : undefined,
+        lastRunFrom: lastRunFrom?.toISOString(),
+        lastRunTo: lastRunTo?.toISOString(),
+        approval: approvalForFilter(approvalFilter),
+    }, { enabled: isMeasured });
+    const isLoading = !isMeasured || isPlansQueryLoading;
+    const totalPages = Math.ceil(count / pageSize) || 1;
+    useEffect(() => {
+        if (!isLoading && count > 0 && pageIndex >= totalPages) {
+            setPageIndex(totalPages - 1);
+        }
+    }, [count, isLoading, pageIndex, totalPages]);
+    const runningPlanIris = useMemo(() => plans.filter((plan) => plan.state === GQLActionPlanState.Running).map((plan) => plan.iri), [plans]);
+    const { data: manualActionsByPlan } = useManualActionsForPlans({
+        planGraphIris: runningPlanIris,
+        refetchIntervalMs: 10000,
+    });
+    function navigateToHref(href) {
+        if (/^https?:\/\//.test(href)) {
+            window.location.href = href;
+            return;
+        }
+        void navigate(href);
+    }
+    function handleSortingChange(updater) {
+        const nextSorting = typeof updater === "function" ? updater(sorting) : updater;
+        setSorting(nextSorting);
+        resetPageIndex();
+    }
+    const { planToRerun, handleRerunClick, handleConfirmRerun, handleCancelRerun } = useRerunPlan();
+    const columns = useActionPlansTableColumns({
+        buildPlanHref,
+        manualActionsByPlan,
+        onRerun: handleRerunClick,
+    });
+    const table = useReactTable(createTableConfig({
+        pagination: { pageIndex, pageSize },
+        setPagination: (updater) => {
+            const nextPagination = typeof updater === "function" ? updater({ pageIndex, pageSize }) : updater;
+            setPageIndex(nextPagination.pageIndex);
+        },
+        manualPagination: true,
+        manualSorting: true,
+        data: plans,
+        columnPinning: {
+            left: [actionPlanColumnIds.name],
+            right: [actionPlanColumnIds.actions],
+        },
+        columns,
+        sorting,
+        setSorting: handleSortingChange,
+        columnFilters,
+        setColumnFilters,
+        columnVisibility,
+        setColumnVisibility,
+        columnOrder,
+        setColumnOrder,
+        rowSelection,
+        setRowSelection,
+    }));
+    const header = (_jsx("div", { className: "flex justify-between items-center w-full", children: _jsxs("h1", { className: "typography-caption-medium inline-flex items-center gap-2", children: [_jsx(Zap, {}), "Action plans"] }) }));
+    const filters = (_jsx(ActionPlansFilters, { searchQuery: searchQuery, onSearchQueryChange: handleSearchQueryChange, statusFilter: statusFilter, onStatusFilterChange: (status) => {
+            void setStatusFilterRaw(status);
+            resetPageIndex();
+        }, availabilityFilter: availabilityFilter, onAvailabilityFilterChange: handleAvailabilityFilterChange, typeFilter: typeFilter, onTypeFilterChange: handleTypeFilterChange, lastRunRange: lastRunRange, onLastRunRangeChange: handleLastRunRangeChange, approvalFilter: approvalFilter, onApprovalFilterChange: handleApprovalFilterChange, table: table }));
+    const body = (_jsx("div", { ref: containerRef, className: "flex min-h-0 flex-1 flex-col", children: _jsx(ActionPlansTableBody, { table: table, plans: plans, count: count, pageIndex: pageIndex, pageSize: pageSize, isLoading: isLoading, isPlaceholderData: isPlaceholderData, error: error, buildPlanHref: buildPlanHref, onNavigateToHref: navigateToHref, onPageChange: setPageIndex }) }));
+    return (_jsxs(_Fragment, { children: [renderLayout({ header, filters, body }), planToRerun && (_jsx(ExecutePlanDialog, { action: "rerun", open: true, onOpenChange: (open) => !open && handleCancelRerun(), onConfirm: handleConfirmRerun, trigger: null }))] }));
+}

package/dist/routes/plans/components/ActionPlansTableBody.d.ts

@@ -0,0 +1,18 @@
+import type { Table } from "@tanstack/react-table";
+import type { ActionPlan } from "#hooks/useActionPlans";
+type ActionPlansTableBodyProps = {
+    table: Table<ActionPlan>;
+    plans: ActionPlan[];
+    count: number;
+    pageIndex: number;
+    pageSize: number;
+    isLoading: boolean;
+    isPlaceholderData: boolean;
+    error: string | null;
+    buildPlanHref: (iri: string) => string;
+    onNavigateToHref: (href: string) => void;
+    onPageChange: (pageIndex: number | ((currentPageIndex: number) => number)) => void;
+};
+export declare function ActionPlansTableBody(props: ActionPlansTableBodyProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ActionPlansTableBody.d.ts.map

package/dist/routes/plans/components/ActionPlansTableBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionPlansTableBody.d.ts","sourceRoot":"","sources":["../../../../src/routes/plans/components/ActionPlansTableBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AASnD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAIxD,KAAK,yBAAyB,GAAG;IAC/B,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IACzB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACvC,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,CAAC,CAAC,gBAAgB,EAAE,MAAM,KAAK,MAAM,CAAC,KAAK,IAAI,CAAC;CACpF,CAAC;AAUF,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,2CAwEpE"}

package/dist/routes/plans/components/ActionPlansTableBody.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Zap } from "lucide-react";
+import { match } from "ts-pattern";
+import { Banner } from "#components/banner/index";
+import { EmptyState } from "#components/empty-state/index";
+import { PaginationBlock } from "#components/pagination/index";
+import { Skeleton } from "#components/skeleton/index";
+import { DataTable } from "#components/table/index";
+import { TableSkeleton } from "#components/table-skeleton/index";
+const gridColsClassName = "grid-cols-[minmax(220px,1.4fr)_repeat(5,minmax(120px,1fr))_72px]";
+function getCountSummary(args) {
+    const { offset, pageSize: currentPageSize, totalCount } = args;
+    if (totalCount === 0)
+        return "0 plans";
+    const from = offset + 1;
+    const to = Math.min(offset + currentPageSize, totalCount);
+    return `${from}-${to} of ${totalCount}`;
+}
+export function ActionPlansTableBody(props) {
+    const { table, plans, count, pageIndex, pageSize, isLoading, isPlaceholderData, error, buildPlanHref, onNavigateToHref, onPageChange, } = props;
+    const totalPages = Math.ceil(count / pageSize) || 1;
+    return (_jsxs("div", { className: "w-full min-h-0 grid grid-cols-1 gap-6", children: [error && _jsx(Banner, { label: error }), match({ isLoading, plans })
+                .with({ isLoading: true }, () => (_jsx(TableSkeleton, { gridColsClassName: gridColsClassName, headerColumnCount: 7, rows: pageSize, renderRow: (rowIndex) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "size-5 rounded-full" }), _jsx(Skeleton, { className: "h-4 w-44 rounded-md" })] }), Array.from({ length: 6 }, (_, columnIndex) => (_jsx(Skeleton, { className: "h-4 w-20 rounded-md" }, `action-plan-table-cell-skeleton-${rowIndex}-${columnIndex}`)))] })) })))
+                .with({ isLoading: false, plans: [] }, () => (_jsx(EmptyState, { icon: Zap, title: "No action plans", description: "Action plans will appear here once they are created through the chat interface." })))
+                .otherwise(() => (_jsxs(_Fragment, { children: [_jsx("div", { className: "rounded-xl border border-muted-border bg-card overflow-x-auto overflow-y-hidden flex-1 min-h-0", children: _jsx(DataTable, { table: table, isLoading: isLoading, isRefetching: isPlaceholderData, isRowClickable: () => !isPlaceholderData, onRowClick: (row) => onNavigateToHref(buildPlanHref(row.original.iri)) }) }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "typography-small text-default-foreground", children: getCountSummary({ offset: pageIndex * pageSize, pageSize, totalCount: count }) }), totalPages > 1 && (_jsx(PaginationBlock, { currentPageIndex: pageIndex, totalPages: totalPages, onPageChange: onPageChange }))] })] })))] }));
+}

package/dist/routes/plans/components/ActionPlansTableColumns.d.ts

@@ -0,0 +1,11 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import type { ActionPlan } from "#hooks/useActionPlans";
+import { type ManualAction } from "#ldo-ui";
+type UseActionPlansTableColumnsArgs = {
+    buildPlanHref: (iri: string) => string;
+    manualActionsByPlan: Map<string, ManualAction[]> | undefined;
+    onRerun?: (planIri: string) => void;
+};
+export declare function useActionPlansTableColumns(args: UseActionPlansTableColumnsArgs): ColumnDef<ActionPlan>[];
+export {};
+//# sourceMappingURL=ActionPlansTableColumns.d.ts.map

package/dist/routes/plans/components/ActionPlansTableColumns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionPlansTableColumns.d.ts","sourceRoot":"","sources":["../../../../src/routes/plans/components/ActionPlansTableColumns.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAkBvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAC;AAG5C,KAAK,8BAA8B,GAAG;IACpC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACvC,mBAAmB,EAAE,GAAG,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,GAAG,SAAS,CAAC;IAC7D,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC;AAyDF,wBAAgB,0BAA0B,CAAC,IAAI,EAAE,8BAA8B,GAAG,SAAS,CAAC,UAAU,CAAC,EAAE,CAuHxG"}

package/dist/routes/plans/components/ActionPlansTableColumns.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GQLActionPlanState } from "@manta-eu/client";
+import { extractPlanName } from "@manta-eu/client/shared/agent-mode";
+import { formatDateTime } from "@manta-eu/lib/date";
+import { isPresent } from "@manta-eu/lib/present";
+import { EllipsisIcon, Eye, RotateCcw, Zap } from "lucide-react";
+import { useMemo } from "react";
+import { Link as RouterLink } from "react-router";
+import { match } from "ts-pattern";
+import { actionPlanColumnIds, actionPlanColumnLabels } from "./actionPlansTableConfig.js";
+import { Badge } from "#components/badge/index";
+import { Button } from "#components/button/index";
+import { Dropdown, DropdownContent, DropdownGroup, DropdownItem, DropdownTrigger } from "#components/dropdown/index";
+import { formatIntegration, IntegrationIcon, integrationToChannel, isTerminalActionPlanState, planStateVariant, statusLabel, } from "#components/planning/plan-detail-utils";
+import { Tooltip, TooltipContent, TooltipTrigger } from "#components/tooltip/index";
+import { getPendingManualActions } from "#lib/manual-actions";
+function getPlanName(plan) {
+    return extractPlanName(plan.iri);
+}
+function planStateLabel(plan, pendingApprovalCount) {
+    return match({
+        state: plan.state,
+        hasCurrentFacts: plan.hasCurrentFacts,
+        hasPendingApproval: pendingApprovalCount > 0,
+    })
+        .with({ state: GQLActionPlanState.Running, hasPendingApproval: true }, () => "Needs approval")
+        .with({ state: GQLActionPlanState.Draft, hasCurrentFacts: false }, () => "Not currently executable")
+        .with({ state: GQLActionPlanState.Draft }, () => "Ready to launch")
+        .otherwise(({ state: matchedState }) => statusLabel(matchedState));
+}
+function getPlanType(plan) {
+    return plan.actionCountByType[0]?.typeName ?? (formatIntegration(plan.primaryIntegration) || "—");
+}
+function ActionPlanActions(props) {
+    const { href, canRerun, onRerun } = props;
+    return (_jsx("div", { className: "text-right", onClick: (event) => {
+            event.stopPropagation();
+        }, children: _jsxs(Dropdown, { children: [_jsx(DropdownTrigger, { asChild: true, children: _jsx(Button, { variant: "tertiary", iconOnly: true, icon: EllipsisIcon, "aria-label": "Actions" }) }), _jsx(DropdownContent, { align: "end", className: "z-60", children: _jsxs(DropdownGroup, { children: [_jsx(DropdownItem, { asChild: true, children: _jsxs(RouterLink, { to: href, children: [_jsx(Eye, { size: 16 }), "View"] }) }), canRerun && onRerun && (_jsxs(DropdownItem, { onSelect: onRerun, children: [_jsx(RotateCcw, { size: 16 }), "Re-run"] }))] }) })] }) }));
+}
+export function useActionPlansTableColumns(args) {
+    const { buildPlanHref, manualActionsByPlan, onRerun } = args;
+    return useMemo(() => {
+        function getPendingApprovalCount(planIri) {
+            return getPendingManualActions(manualActionsByPlan?.get(planIri)).length;
+        }
+        return [
+            {
+                id: actionPlanColumnIds.name,
+                accessorFn: getPlanName,
+                enableHiding: false,
+                enableSorting: false,
+                header: actionPlanColumnLabels[actionPlanColumnIds.name],
+                cell: ({ row }) => {
+                    const plan = row.original;
+                    const href = buildPlanHref(plan.iri);
+                    const channel = plan.primaryIntegration ? integrationToChannel(plan.primaryIntegration) : null;
+                    const planName = getPlanName(plan);
+                    return (_jsxs("div", { className: "text-left justify-start inline-flex items-center gap-2 w-full h-full", children: [channel && plan.primaryIntegration ? (_jsx(IntegrationIcon, { integration: plan.primaryIntegration })) : (_jsx("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-accent text-accent-foreground", children: _jsx(Zap, { className: "size-3.5" }) })), _jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(RouterLink, { to: href, className: "min-w-0 truncate text-left", children: planName }) }), _jsx(TooltipContent, { children: _jsx("p", { className: "max-w-xs wrap-break-word", children: planName }) })] }), !plan.hasCurrentFacts && isPresent(plan.lastRunAt) && (_jsx(Badge, { variant: "copy", size: "sm", className: "shrink-0", children: "History only" }))] })] }));
+                },
+            },
+            {
+                accessorKey: actionPlanColumnIds.state,
+                enableHiding: false,
+                header: actionPlanColumnLabels[actionPlanColumnIds.state],
+                cell: ({ row }) => {
+                    const pendingApprovalCount = getPendingApprovalCount(row.original.iri);
+                    return (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Badge, { variant: planStateVariant(row.original.state, pendingApprovalCount), size: "sm", children: planStateLabel(row.original, pendingApprovalCount) }), row.original.dryRun && (_jsx(Badge, { variant: "info", size: "sm", children: "Dry run" }))] }));
+                },
+            },
+            {
+                accessorKey: actionPlanColumnIds.updatedAt,
+                header: actionPlanColumnLabels[actionPlanColumnIds.updatedAt],
+                enableSorting: false,
+                cell: ({ row }) => (_jsx("span", { className: "text-muted-foreground", children: row.original.updatedAt ? formatDateTime(row.original.updatedAt) : "-" })),
+            },
+            {
+                accessorKey: actionPlanColumnIds.lastRunAt,
+                header: actionPlanColumnLabels[actionPlanColumnIds.lastRunAt],
+                enableSorting: false,
+                cell: ({ row }) => (_jsx("span", { className: "text-muted-foreground", children: row.original.lastRunAt ? formatDateTime(row.original.lastRunAt) : "-" })),
+            },
+            {
+                id: actionPlanColumnIds.pendingApprovals,
+                accessorFn: (row) => getPendingApprovalCount(row.iri),
+                header: actionPlanColumnLabels[actionPlanColumnIds.pendingApprovals],
+                enableSorting: false,
+                cell: ({ row }) => _jsx("span", { className: "text-muted-foreground", children: getPendingApprovalCount(row.original.iri) }),
+            },
+            {
+                id: actionPlanColumnIds.type,
+                accessorFn: getPlanType,
+                header: actionPlanColumnLabels[actionPlanColumnIds.type],
+                enableSorting: false,
+                cell: ({ row }) => _jsx("span", { className: "text-muted-foreground", children: getPlanType(row.original) }),
+            },
+            {
+                id: actionPlanColumnIds.actions,
+                enableHiding: false,
+                enableSorting: false,
+                cell: ({ row }) => (_jsx(ActionPlanActions, { href: buildPlanHref(row.original.iri), canRerun: row.original.hasCurrentFacts && isTerminalActionPlanState(row.original.state), onRerun: onRerun ? () => onRerun(row.original.iri) : undefined })),
+            },
+        ];
+    }, [buildPlanHref, manualActionsByPlan, onRerun]);
+}

package/dist/routes/plans/components/PlanDetailRouteContent.d.ts

@@ -0,0 +1,7 @@
+export type PlanDetailRouteContentProps = {
+    planName: string;
+    datastoreId?: string;
+    userId?: string;
+};
+export declare function PlanDetailRouteContent(props: PlanDetailRouteContentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PlanDetailRouteContent.d.ts.map

package/dist/routes/plans/components/PlanDetailRouteContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlanDetailRouteContent.d.ts","sourceRoot":"","sources":["../../../../src/routes/plans/components/PlanDetailRouteContent.tsx"],"names":[],"mappings":"AA2BA,MAAM,MAAM,2BAA2B,GAAG;IACxC,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,2CAyLxE"}

package/dist/routes/plans/components/PlanDetailRouteContent.js

@@ -0,0 +1,122 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GQLActionPlanState, useCancelActionPlanMutation } from "@manta-eu/client";
+import { buildActivityHref, buildPlanIri } from "@manta-eu/client/shared/agent-mode";
+import { parseError } from "@manta-eu/client/shared/error-utils";
+import { isPresent } from "@manta-eu/lib/present";
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Link, useNavigate } from "react-router";
+import { toast } from "sonner";
+import { ActionPlanRulesSection } from "./ActionPlanRulesSection.js";
+import { Banner } from "#components/banner/index";
+import { SidebarMobileToggle } from "#components/layouts/SidebarMobileToggle";
+import { Loader } from "#components/loader/index";
+import { deriveIsDryRun, derivePlanStateFromExecution } from "#components/planning/actioning-view-utils";
+import { ActioningView } from "#components/planning/ActioningView";
+import { ConnectedPlanDetailView } from "#components/planning/ConnectedPlanDetailView";
+import { ExecutePlanDialog } from "#components/planning/ExecutePlanDialog";
+import { isTerminalActionPlanState } from "#components/planning/plan-detail-utils";
+import { useActionPlanDetail } from "#hooks/useActionPlanDetail";
+import { useActionPlanExecution } from "#hooks/useActionPlanExecution";
+import { ActionPlanChangesTable, useActionPlanExecutionProvenance, useManualActions } from "#ldo-ui";
+import { useMantaClient } from "#providers/MantaClientProvider";
+import { ActivityDetail } from "#routes/activity/detail/ActivityDetail";
+import { invalidateActionPlanQueries } from "#shared/query-keys";
+export function PlanDetailRouteContent(props) {
+    const { planName, datastoreId, userId } = props;
+    const { mantaClient, mantaBaseUrl } = useMantaClient();
+    const queryClient = useQueryClient();
+    const navigate = useNavigate();
+    const planGraphIri = useMemo(() => buildPlanIri(planName), [planName]);
+    const { plan, graphDocument, isLoading, error } = useActionPlanDetail(planGraphIri);
+    const [isExecuteDialogOpen, setIsExecuteDialogOpen] = useState(false);
+    const [isRerunDialogOpen, setIsRerunDialogOpen] = useState(false);
+    const [hasConfirmedExecution, setHasConfirmedExecution] = useState(false);
+    const [viewMode, setViewMode] = useState("overview");
+    const executionControl = useActionPlanExecution(planGraphIri);
+    const executionEvidenceRefetchInterval = hasConfirmedExecution ? 3000 : 10000;
+    const { data: executionProvenance } = useActionPlanExecutionProvenance({
+        planGraphIri,
+        enabled: !!planGraphIri,
+        refetchIntervalMs: executionEvidenceRefetchInterval,
+    });
+    const { data: manualActions = [] } = useManualActions({
+        planGraphIri,
+        enabled: !!planGraphIri,
+        refetchIntervalMs: executionEvidenceRefetchInterval,
+    });
+    // Latest plan-level run — previewed in the Overview when the plan has no recommended changes.
+    const latestRunIri = executionProvenance?.planActivityIri ?? null;
+    const { mutateAsync: cancelMutateAsync } = useCancelActionPlanMutation(mantaClient);
+    useEffect(() => {
+        setViewMode("overview");
+    }, [planGraphIri]);
+    const handleOpenExecution = useCallback(() => {
+        setIsExecuteDialogOpen(true);
+    }, []);
+    const handleConfirmExecution = useCallback((dryRun) => {
+        setHasConfirmedExecution(true);
+        setIsExecuteDialogOpen(false);
+        void invalidateActionPlanQueries(queryClient, planGraphIri);
+        void executionControl.execute(dryRun);
+    }, [executionControl, planGraphIri, queryClient]);
+    const handleOpenRerun = useCallback(() => {
+        setIsRerunDialogOpen(true);
+    }, []);
+    const handleConfirmRerun = useCallback(async (dryRun) => {
+        setHasConfirmedExecution(true);
+        setIsRerunDialogOpen(false);
+        const result = await executionControl.execute(dryRun);
+        if (result.success) {
+            toast.success(dryRun ? "Plan re-run preview triggered" : "Plan re-run triggered");
+        }
+        else {
+            toast.error(dryRun ? "Failed to preview plan re-run" : "Failed to re-run plan", {
+                description: result.error,
+            });
+        }
+    }, [executionControl]);
+    const handleCancel = useCallback(async (planIri) => {
+        try {
+            const result = await cancelMutateAsync({ planIri });
+            if (!result.cancelActionPlan.success) {
+                toast.error(result.cancelActionPlan.error ?? "Cancellation failed");
+                return;
+            }
+            toast.success("Action plan cancelled");
+        }
+        catch (err) {
+            const info = parseError(err, "Failed to cancel action plan");
+            toast.error(info.message, { description: info.description });
+        }
+    }, [cancelMutateAsync]);
+    if (isLoading) {
+        return (_jsx("div", { className: "flex min-h-96 items-center justify-center", children: _jsx(Loader, { className: "size-6" }) }));
+    }
+    if (error || !plan) {
+        return _jsx(Banner, { label: error ?? "Unable to load action plan details from the knowledge graph." });
+    }
+    const hasExecutionEvidence = !!executionProvenance?.planActivityIri ||
+        !!executionProvenance?.planStartedAtTime ||
+        !!executionProvenance?.planEndedAtTime ||
+        (executionProvenance?.activities.length ?? 0) > 0 ||
+        isPresent(manualActions);
+    const derivedPlanState = derivePlanStateFromExecution({
+        provenance: executionProvenance ?? null,
+        triggeredAtMs: executionControl.triggeredAtMs,
+        isRunningOverride: hasConfirmedExecution || hasExecutionEvidence,
+    });
+    const { triggeredAtMs, dryRun } = executionControl;
+    const isDryRun = deriveIsDryRun({ provenance: executionProvenance ?? null, triggeredAtMs, dryRun });
+    const shouldShowActioningSurface = hasConfirmedExecution ||
+        hasExecutionEvidence ||
+        (plan.state ?? GQLActionPlanState.Draft) !== GQLActionPlanState.Draft;
+    const effectivePlanState = derivedPlanState ?? plan.state ?? GQLActionPlanState.Draft;
+    const detailExecuteAction = plan.hasCurrentFacts && effectivePlanState === GQLActionPlanState.Draft ? handleOpenExecution : undefined;
+    const detailCancelAction = effectivePlanState === GQLActionPlanState.Running ? handleCancel : undefined;
+    const detailRerunAction = plan.hasCurrentFacts && isTerminalActionPlanState(effectivePlanState) ? handleOpenRerun : undefined;
+    const activeViewMode = viewMode === "visual" && !graphDocument?.size ? "overview" : viewMode;
+    const showExecutionSurface = shouldShowActioningSurface && activeViewMode === "overview";
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-hidden", children: [_jsx(ExecutePlanDialog, { onConfirm: handleConfirmExecution, open: isExecuteDialogOpen, onOpenChange: setIsExecuteDialogOpen, trigger: null }), _jsx(ExecutePlanDialog, { action: "rerun", onConfirm: handleConfirmRerun, open: isRerunDialogOpen, onOpenChange: setIsRerunDialogOpen, trigger: null }), _jsx(ConnectedPlanDetailView, { leadingAction: _jsx(SidebarMobileToggle, {}), plan: plan, graphDocument: graphDocument, isLoading: isLoading, error: error, hideChanges: true, fitContent: showExecutionSurface, viewMode: activeViewMode, stateOverride: derivedPlanState, isDryRun: isDryRun, onViewModeChange: setViewMode, onExecute: detailExecuteAction, onCancel: detailCancelAction, onRerun: detailRerunAction, rulesSlot: _jsx(ActionPlanRulesSection, { planGraphIri: planGraphIri, LinkComponent: Link }), onRunClick: (activityIri) => navigate(buildActivityHref(activityIri)) }), showExecutionSurface && (_jsx(ActioningView, { planGraphIri: planGraphIri, diff: null, isLoading: false, mantaChatBaseUrl: mantaBaseUrl, executionControl: executionControl, datastoreId: datastoreId, userId: userId, hideTopBar: true, completedChangesSlot: _jsx(ActionPlanChangesTable, { planGraphIri: planGraphIri, emptyFallback: isPresent(latestRunIri) ? (_jsx("div", { className: "h-[60vh]", children: _jsx(ActivityDetail, { activityIri: latestRunIri, variant: "embedded", caption: "No recommended changes \u2014 showing the latest run." }) })) : undefined }) }))] }));
+}