@manta-eu/react 0.1.0 → 0.1.2

package/dist/routes/datastores/components/RenameDatastoreGroupDialog.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button } from "#components/button/index";
+import { Input } from "#components/input/index";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "#components/modal/index";
+export function RenameDatastoreGroupDialog(props) {
+    const { target, onSubmit, onCancel } = props;
+    const [name, setName] = useState(target.name);
+    const canSubmit = !!name.trim() && name.trim() !== target.name;
+    function submit() {
+        if (!canSubmit)
+            return;
+        onSubmit(name.trim());
+    }
+    return (_jsx(Dialog, { open: true, onOpenChange: (nextOpen) => !nextOpen && onCancel(), children: _jsxs(DialogContent, { className: "flex flex-col overflow-hidden", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { text: target.isOrganization ? "Rename organization" : "Rename datastore" }), _jsx(DialogDescription, { children: "Only changes the display name - the datastore id stays the same, so nothing else needs updating." })] }), _jsx(Input, { autoFocus: true, label: target.isOrganization ? "Organization name" : "Name", value: name, onChange: (event) => setName(event.target.value), onKeyDown: (event) => {
+                        if (event.key === "Enter")
+                            submit();
+                        if (event.key === "Escape")
+                            onCancel();
+                    } }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "tertiary", onClick: onCancel, children: "Cancel" }), _jsx(Button, { onClick: submit, disabled: !canSubmit, children: "Rename" })] })] }) }));
+}

package/dist/routes/datastores/components/StatusBadge.d.ts

@@ -0,0 +1,21 @@
+import { type DatastoreStatus, type DatastoreStatusCategory } from "#components/datastore-management/tree";
+export type DatastoreStatusFilterValue = "noDatastore" | "checking" | DatastoreStatusCategory;
+export declare function datastoreStatusFilterValue(node: {
+    datastoreId?: string;
+    removed: boolean;
+    isUnlinked?: boolean;
+}, status?: DatastoreStatus): DatastoreStatusFilterValue;
+export declare const datastoreStatusFilterOptions: {
+    id: "ALL" | DatastoreStatusFilterValue;
+    label: string;
+}[];
+export type DatastoreStatusBadgeProps = {
+    node: {
+        datastoreId?: string;
+        removed: boolean;
+        isUnlinked?: boolean;
+    };
+    status?: DatastoreStatus;
+};
+export declare function DatastoreStatusBadge(props: DatastoreStatusBadgeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StatusBadge.d.ts.map

package/dist/routes/datastores/components/StatusBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.d.ts","sourceRoot":"","sources":["../../../../src/routes/datastores/components/StatusBadge.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,uBAAuB,EAC7B,MAAM,uCAAuC,CAAC;AAE/C,MAAM,MAAM,0BAA0B,GAAG,aAAa,GAAG,UAAU,GAAG,uBAAuB,CAAC;AAE9F,wBAAgB,0BAA0B,CACxC,IAAI,EAAE;IAAE,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,EACtE,MAAM,CAAC,EAAE,eAAe,GACvB,0BAA0B,CAG5B;AAkCD,eAAO,MAAM,4BAA4B,EAAE;IAAE,EAAE,EAAE,KAAK,GAAG,0BAA0B,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAGnG,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE;QAAE,WAAW,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAC;QAAC,UAAU,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACvE,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,2CAapE"}

package/dist/routes/datastores/components/StatusBadge.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { LoaderCircle } from "lucide-react";
+import { Badge } from "#components/badge/index";
+import { datastoreStatusCategory, } from "#components/datastore-management/tree";
+export function datastoreStatusFilterValue(node, status) {
+    if (!isPresent(node.datastoreId))
+        return "noDatastore";
+    return datastoreStatusCategory(node, status) ?? "checking";
+}
+// The only place these strings live: the badge and the filter dropdown both read from here.
+const badgeConfigByFilterValue = {
+    ready: { label: "Ready", variant: "success" },
+    materializing: {
+        label: "Materializing",
+        variant: "warning",
+        spinning: true,
+        title: "KGC is creating its knowledge graph. This can take a few minutes.",
+    },
+    notRegistered: {
+        label: "Not registered",
+        variant: "destructive",
+        title: "This id never reached the datastore registry, so nothing will build it. Provision it again.",
+    },
+    offline: { label: "Offline", variant: "destructive" },
+    unavailable: { label: "Status unavailable", variant: "copy" },
+    checking: { label: "Checking…", variant: "copy", spinning: true },
+    removed: { label: "Removed", variant: "copy" },
+    noDatastore: { label: "No datastore", variant: "copy" },
+};
+const filterOptionOrder = [
+    "ready",
+    "materializing",
+    "notRegistered",
+    "offline",
+    "unavailable",
+    "removed",
+];
+export const datastoreStatusFilterOptions = [
+    { id: "ALL", label: "All statuses" },
+    ...filterOptionOrder.map((id) => ({ id, label: badgeConfigByFilterValue[id].label })),
+];
+export function DatastoreStatusBadge(props) {
+    const { node, status } = props;
+    if (!isPresent(node.datastoreId))
+        return _jsx("span", { className: "typography-tiny text-muted-foreground", children: "\u2014" });
+    const config = badgeConfigByFilterValue[datastoreStatusFilterValue(node, status)];
+    return (_jsxs(Badge, { size: "sm", variant: config.variant, className: "cursor-default", title: config.title, children: [config.spinning && _jsx(LoaderCircle, { className: "size-3 animate-spin" }), config.label] }));
+}

package/dist/routes/datastores/components/UnlinkedDatastoresPanel.d.ts

@@ -0,0 +1,20 @@
+import type { Table } from "@tanstack/react-table";
+import type { ReactNode } from "react";
+import type { DatastoreRow } from "../flatten.js";
+import type { StatusFilter } from "../hooks/useDatastoreTable.js";
+type UnlinkedDatastoresPanelProps = {
+    tabs: ReactNode;
+    table: Table<DatastoreRow>;
+    rows: DatastoreRow[];
+    searchQuery: string;
+    onSearchQueryChange: (query: string) => void;
+    statusFilter: StatusFilter;
+    onStatusFilterChange: (status: StatusFilter) => void;
+    columnLabels: Record<string, string>;
+    columnDefaultOrder: string[];
+    isLoading: boolean;
+    errorMessage: string | null;
+};
+export declare function UnlinkedDatastoresPanel(props: UnlinkedDatastoresPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=UnlinkedDatastoresPanel.d.ts.map

package/dist/routes/datastores/components/UnlinkedDatastoresPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnlinkedDatastoresPanel.d.ts","sourceRoot":"","sources":["../../../../src/routes/datastores/components/UnlinkedDatastoresPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAEnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAQ/D,KAAK,4BAA4B,GAAG;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAC3B,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,YAAY,EAAE,YAAY,CAAC;IAC3B,oBAAoB,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IACrD,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,kBAAkB,EAAE,MAAM,EAAE,CAAC;IAC7B,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,CAAC;AAEF,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,2CAmD1E"}

package/dist/routes/datastores/components/UnlinkedDatastoresPanel.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { Unlink } from "lucide-react";
+import { DatastoresToolbar } from "./DatastoresToolbar.js";
+import { DatastoreTableSkeleton } from "./DatastoreTableSkeleton.js";
+import { Banner } from "#components/banner/index";
+import { EmptyState } from "#components/empty-state/index";
+import { DataTable } from "#components/table/index";
+import { TablePagination } from "#components/table-pagination/index";
+export function UnlinkedDatastoresPanel(props) {
+    const { tabs, table, rows, searchQuery, onSearchQueryChange, statusFilter, onStatusFilterChange, columnLabels, columnDefaultOrder, isLoading, errorMessage, } = props;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "border-b border-muted-border px-5 py-3 shrink-0", children: _jsx(DatastoresToolbar, { tabs: tabs, searchQuery: searchQuery, onSearchQueryChange: onSearchQueryChange, searchPlaceholder: "Search by datastore ID...", statusFilter: statusFilter, onStatusFilterChange: onStatusFilterChange, table: table, columnLabels: columnLabels, columnDefaultOrder: columnDefaultOrder }) }), _jsxs("div", { className: "flex-1 overflow-auto p-4", children: [isLoading && _jsx(DatastoreTableSkeleton, {}), errorMessage && _jsx(Banner, { label: errorMessage }), !isLoading && !isPresent(rows) && (_jsx(EmptyState, { icon: Unlink, title: "No unlinked datastores", description: "Datastores that exist without an organization or group pointing at them show up here, ready to be linked." })), !isLoading && isPresent(rows) && (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("div", { className: "rounded-xl border border-muted-border bg-card overflow-hidden", children: _jsx(DataTable, { table: table, noResultsMessage: "No unlinked datastores match your filters." }) }), _jsx(TablePagination, { table: table, total: rows.length })] }))] })] }));
+}

package/dist/routes/datastores/flatten.d.ts

@@ -0,0 +1,33 @@
+import type { GQLDatastoreTreeNode } from "@manta-eu/client";
+import { type Realm } from "@manta-eu/ldo/realm";
+import type { DatastoreStatusFilterValue } from "./components/StatusBadge.js";
+export type DatastoreRow = {
+    id: string;
+    name: string;
+    depth: number;
+    organizationId: string;
+    organizationName: string;
+    organizationAlias: string;
+    path: string;
+    datastoreId?: string;
+    removed: boolean;
+    provisionedAt?: string;
+    provisionedBy?: string;
+    isOrganization: boolean;
+    isRealmDefault?: boolean;
+    isUnlinked?: boolean;
+};
+export declare function realmDefaultRow(datastoreId: Realm): DatastoreRow;
+export type DatastoreRowVisibility = {
+    showArchived: boolean;
+    showUnprovisioned: boolean;
+};
+export declare function visibleDatastoreRows(rows: DatastoreRow[], visibility: DatastoreRowVisibility): DatastoreRow[];
+export declare function hiddenRowCount(rows: DatastoreRow[], visibility: DatastoreRowVisibility, key: keyof DatastoreRowVisibility, shownCount: number): number;
+export declare function organizationNameKey(name: string): string;
+export declare function existingOrganizationNameKeys(rows: DatastoreRow[]): Set<string>;
+export declare function organizationNames(rows: DatastoreRow[]): string[];
+export declare function visibilityForStatusFilter(visibility: DatastoreRowVisibility, status: DatastoreStatusFilterValue | "ALL"): DatastoreRowVisibility;
+export declare function unlinkedDatastoreRow(datastoreId: string): DatastoreRow;
+export declare function toDatastoreRows(nodes: GQLDatastoreTreeNode[]): DatastoreRow[];
+//# sourceMappingURL=flatten.d.ts.map

package/dist/routes/datastores/flatten.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flatten.d.ts","sourceRoot":"","sources":["../../../src/routes/datastores/flatten.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAmB,KAAK,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAGlE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAG3E,MAAM,MAAM,YAAY,GAAG;IAEzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,iBAAiB,EAAE,MAAM,CAAC;IAE1B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,cAAc,EAAE,OAAO,CAAC;IAExB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,wBAAgB,eAAe,CAAC,WAAW,EAAE,KAAK,GAAG,YAAY,CAchE;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,EAAE,OAAO,CAAC;CAC5B,CAAC;AAcF,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,YAAY,EAAE,EAAE,UAAU,EAAE,sBAAsB,GAAG,YAAY,EAAE,CAG7G;AAED,wBAAgB,cAAc,CAC5B,IAAI,EAAE,YAAY,EAAE,EACpB,UAAU,EAAE,sBAAsB,EAClC,GAAG,EAAE,MAAM,sBAAsB,EACjC,UAAU,EAAE,MAAM,GACjB,MAAM,CAIR;AAGD,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAExD;AAED,wBAAgB,4BAA4B,CAAC,IAAI,EAAE,YAAY,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,CAE9E;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,YAAY,EAAE,GAAG,MAAM,EAAE,CAEhE;AAED,wBAAgB,yBAAyB,CACvC,UAAU,EAAE,sBAAsB,EAClC,MAAM,EAAE,0BAA0B,GAAG,KAAK,GACzC,sBAAsB,CAMxB;AAED,wBAAgB,oBAAoB,CAAC,WAAW,EAAE,MAAM,GAAG,YAAY,CActE;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,EAAE,GAAG,YAAY,EAAE,CAe7E"}

package/dist/routes/datastores/flatten.js

@@ -0,0 +1,86 @@
+import { realmVocabLabel } from "@manta-eu/ldo/realm";
+import { isPresent } from "@manta-eu/lib/present";
+import { match } from "ts-pattern";
+export function realmDefaultRow(datastoreId) {
+    return {
+        id: datastoreId,
+        name: realmVocabLabel(datastoreId),
+        depth: 0,
+        organizationId: "",
+        organizationName: "",
+        organizationAlias: "",
+        path: "",
+        datastoreId,
+        removed: false,
+        isOrganization: false,
+        isRealmDefault: true,
+    };
+}
+function matchesVisibility(row, visibility) {
+    return (visibility.showArchived || !row.removed) && (visibility.showUnprovisioned || isPresent(row.datastoreId));
+}
+function hasVisibleDescendant(rows, shown, index) {
+    const depth = rows[index]?.depth ?? 0;
+    for (let i = index + 1; i < rows.length && (rows[i]?.depth ?? 0) > depth; i++) {
+        if (shown[i])
+            return true;
+    }
+    return false;
+}
+export function visibleDatastoreRows(rows, visibility) {
+    const shown = rows.map((row) => matchesVisibility(row, visibility));
+    return rows.filter((_row, index) => shown[index] || hasVisibleDescendant(rows, shown, index));
+}
+export function hiddenRowCount(rows, visibility, key, shownCount) {
+    if (visibility[key])
+        return 0;
+    return visibleDatastoreRows(rows, { ...visibility, [key]: true }).length - shownCount;
+}
+// Matches Keycloak's own org lookup (ensureOrganization), which is case-insensitive and trims too.
+export function organizationNameKey(name) {
+    return name.trim().toLowerCase();
+}
+export function existingOrganizationNameKeys(rows) {
+    return new Set(rows.filter((row) => row.isOrganization).map((row) => organizationNameKey(row.organizationName)));
+}
+export function organizationNames(rows) {
+    return [...new Set(rows.filter((row) => row.isOrganization).map((row) => row.organizationName))].sort();
+}
+export function visibilityForStatusFilter(visibility, status) {
+    return match(status)
+        .with("removed", () => ({ ...visibility, showArchived: true }))
+        .with("noDatastore", () => ({ ...visibility, showUnprovisioned: true }))
+        .with("ALL", "ready", "materializing", "notRegistered", "offline", "unavailable", "checking", () => visibility)
+        .exhaustive();
+}
+export function unlinkedDatastoreRow(datastoreId) {
+    return {
+        id: `unlinked:${datastoreId}`,
+        name: datastoreId,
+        depth: 0,
+        organizationId: "",
+        organizationName: "",
+        organizationAlias: "",
+        path: "",
+        datastoreId,
+        removed: false,
+        isOrganization: false,
+        isUnlinked: true,
+    };
+}
+export function toDatastoreRows(nodes) {
+    return nodes.map((node) => ({
+        id: node.id,
+        name: node.name,
+        depth: node.depth,
+        organizationId: node.organizationId,
+        organizationName: node.organizationName,
+        organizationAlias: node.organizationAlias,
+        path: node.path,
+        datastoreId: node.datastoreId ?? undefined,
+        removed: node.removed,
+        provisionedAt: node.provisionedAt ?? undefined,
+        provisionedBy: node.provisionedBy ?? undefined,
+        isOrganization: node.isOrganization,
+    }));
+}

package/dist/routes/datastores/hooks/useDatastoreColumns.d.ts

@@ -0,0 +1,47 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import type { DatastoreRow } from "../flatten.js";
+import { type DatastoreStatus } from "#components/datastore-management/tree";
+export declare const datastoreColumnIds: {
+    readonly name: "name";
+    readonly organizationName: "organizationName";
+    readonly datastoreId: "datastoreId";
+    readonly suggestedMatch: "suggestedMatch";
+    readonly status: "status";
+    readonly provisionedBy: "provisionedBy";
+    readonly provisionedAt: "provisionedAt";
+    readonly actions: "actions";
+};
+export declare const datastoreColumnLabels: {
+    name: string;
+    organizationName: string;
+    datastoreId: string;
+    status: string;
+    provisionedBy: string;
+    provisionedAt: string;
+};
+export declare const defaultColumnOrder: ("name" | "status" | "actions" | "datastoreId" | "organizationName" | "suggestedMatch" | "provisionedBy" | "provisionedAt")[];
+export declare const unlinkedColumnLabels: Record<string, string>;
+export declare const unlinkedColumnOrder: ("status" | "actions" | "datastoreId" | "suggestedMatch")[];
+type UseDatastoreColumnsArgs = {
+    statusByDatastoreId: Record<string, DatastoreStatus>;
+    currentDatastoreId?: string;
+    isSwitching?: boolean;
+    indented: boolean;
+    matchableRowIds: Set<string>;
+    suggestedMatchByDatastoreId?: Record<string, DatastoreRow>;
+    onSelect: (row: DatastoreRow) => void;
+    onAddChild: (row: DatastoreRow) => void;
+    onLink: (row: DatastoreRow) => void;
+    onProvision: (row: DatastoreRow) => void;
+    onLinkExisting: (row: DatastoreRow) => void;
+    onRemove: (row: DatastoreRow) => void;
+    onRestore: (row: DatastoreRow) => void;
+    onRename: (row: DatastoreRow) => void;
+    onRegister: (row: DatastoreRow) => void;
+    onManageUsers: (row: DatastoreRow) => void;
+    onBringOnline: (row: DatastoreRow) => void;
+    isBringingOnline?: boolean;
+};
+export declare function useDatastoreColumns(args: UseDatastoreColumnsArgs): ColumnDef<DatastoreRow>[];
+export {};
+//# sourceMappingURL=useDatastoreColumns.d.ts.map

package/dist/routes/datastores/hooks/useDatastoreColumns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDatastoreColumns.d.ts","sourceRoot":"","sources":["../../../../src/routes/datastores/hooks/useDatastoreColumns.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAuBvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,OAAO,EAA4C,KAAK,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAYvH,eAAO,MAAM,kBAAkB;;;;;;;;;CASrB,CAAC;AASX,eAAO,MAAM,qBAAqB;;;;;;;CAOkB,CAAC;AAErD,eAAO,MAAM,kBAAkB,+HAAoC,CAAC;AAEpE,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAGvD,CAAC;AAEF,eAAO,MAAM,mBAAmB,6DAK/B,CAAC;AAcF,KAAK,uBAAuB,GAAG;IAC7B,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IACrD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,QAAQ,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,2BAA2B,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IAC3D,QAAQ,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACtC,UAAU,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACxC,MAAM,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACpC,WAAW,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACzC,cAAc,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACtC,SAAS,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACtC,UAAU,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,aAAa,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,uBAAuB,GAAG,SAAS,CAAC,YAAY,CAAC,EAAE,CA0U5F"}

package/dist/routes/datastores/hooks/useDatastoreColumns.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { enableDatastoreRemoval } from "@manta-eu/client/shared/constants";
+import { isPresent } from "@manta-eu/lib/present";
+import { formatDistanceToNow } from "date-fns";
+import { Check, DatabaseZap, Link2, MoreHorizontal, Pencil, Plus, Power, RefreshCw, RotateCcw, Trash2, TriangleAlert, Users, } from "lucide-react";
+import { useMemo } from "react";
+import { match } from "ts-pattern";
+import { DatastoreStatusBadge, datastoreStatusFilterValue, } from "../components/StatusBadge.js";
+import { Badge } from "#components/badge/index";
+import { Button } from "#components/button/index";
+import { datastoreStatusCategory, isMaterializing } from "#components/datastore-management/tree";
+import { Dropdown, DropdownContent, DropdownItem, DropdownSeparator, DropdownTrigger, } from "#components/dropdown/index";
+import { Tooltip, TooltipContent, TooltipTrigger } from "#components/tooltip/index";
+import { NestedMarker, nestedIndent } from "#ldo-ui";
+import { cn } from "#lib/utils";
+export const datastoreColumnIds = {
+    name: "name",
+    organizationName: "organizationName",
+    datastoreId: "datastoreId",
+    suggestedMatch: "suggestedMatch",
+    status: "status",
+    provisionedBy: "provisionedBy",
+    provisionedAt: "provisionedAt",
+    actions: "actions",
+};
+export const datastoreColumnLabels = {
+    [datastoreColumnIds.name]: "Name",
+    [datastoreColumnIds.organizationName]: "Organization",
+    [datastoreColumnIds.datastoreId]: "Datastore ID",
+    [datastoreColumnIds.status]: "Status",
+    [datastoreColumnIds.provisionedBy]: "Provisioned by",
+    [datastoreColumnIds.provisionedAt]: "Provisioned",
+};
+export const defaultColumnOrder = Object.values(datastoreColumnIds);
+export const unlinkedColumnLabels = {
+    ...datastoreColumnLabels,
+    [datastoreColumnIds.suggestedMatch]: "Suggested match",
+};
+export const unlinkedColumnOrder = [
+    datastoreColumnIds.datastoreId,
+    datastoreColumnIds.suggestedMatch,
+    datastoreColumnIds.status,
+    datastoreColumnIds.actions,
+];
+// Floor width per column, so a narrow viewport scrolls instead of squeezing every column thin.
+const columnMinWidths = {
+    [datastoreColumnIds.name]: "min-w-[180px]",
+    [datastoreColumnIds.organizationName]: "min-w-[140px]",
+    [datastoreColumnIds.datastoreId]: "min-w-[160px]",
+    [datastoreColumnIds.suggestedMatch]: "min-w-[200px]",
+    [datastoreColumnIds.status]: "min-w-[120px]",
+    [datastoreColumnIds.provisionedBy]: "min-w-[140px]",
+    [datastoreColumnIds.provisionedAt]: "min-w-[110px]",
+    [datastoreColumnIds.actions]: "min-w-[140px]",
+};
+export function useDatastoreColumns(args) {
+    const { statusByDatastoreId, currentDatastoreId, isSwitching, indented, matchableRowIds, suggestedMatchByDatastoreId, onSelect, onAddChild, onLink, onProvision, onLinkExisting, onRemove, onRestore, onRename, onRegister, onManageUsers, onBringOnline, isBringingOnline, } = args;
+    return useMemo(() => [
+        {
+            id: datastoreColumnIds.name,
+            accessorKey: "name",
+            header: datastoreColumnLabels[datastoreColumnIds.name],
+            cell: ({ row }) => {
+                const { name, depth, datastoreId, isOrganization, isRealmDefault } = row.original;
+                const current = isPresent(datastoreId) && datastoreId === currentDatastoreId;
+                return (_jsx("div", { className: columnMinWidths[datastoreColumnIds.name], children: _jsxs("div", { className: "flex min-w-0 items-center gap-2", style: indented ? nestedIndent(depth + 1) : undefined, children: [indented && depth > 0 && _jsx(NestedMarker, {}), _jsx("span", { className: cn("truncate", isOrganization || isRealmDefault ? "typography-caption-medium" : "typography-caption"), children: name }), !isPresent(datastoreId) && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(TriangleAlert, { className: "size-3.5 shrink-0 text-warning-foreground", "aria-label": "No datastore provisioned" }) }), _jsx(TooltipContent, { children: "No datastore provisioned for this group yet." })] })), isRealmDefault && (_jsx(Badge, { variant: "copy", size: "sm", className: "shrink-0", children: "Default" })), current && (_jsxs(Badge, { "data-testid": `datastore-selected-badge-${row.original.id}`, variant: "copy", size: "sm", className: "shrink-0", children: [_jsx(Check, { className: "size-3" }), "Selected"] }))] }) }));
+            },
+        },
+        {
+            id: datastoreColumnIds.organizationName,
+            accessorKey: "organizationName",
+            header: datastoreColumnLabels[datastoreColumnIds.organizationName],
+            cell: ({ row }) => (_jsx("div", { className: cn(columnMinWidths[datastoreColumnIds.organizationName], "truncate typography-caption"), children: row.original.organizationName || "—" })),
+        },
+        {
+            id: datastoreColumnIds.datastoreId,
+            accessorKey: "datastoreId",
+            header: datastoreColumnLabels[datastoreColumnIds.datastoreId],
+            cell: ({ row }) => (_jsx("div", { className: cn(columnMinWidths[datastoreColumnIds.datastoreId], "truncate typography-small text-muted-foreground"), children: row.original.datastoreId ?? "—" })),
+        },
+        {
+            id: datastoreColumnIds.suggestedMatch,
+            accessorKey: "datastoreId",
+            header: unlinkedColumnLabels[datastoreColumnIds.suggestedMatch],
+            enableSorting: false,
+            cell: ({ row }) => {
+                const match = suggestedMatchByDatastoreId?.[row.original.datastoreId ?? ""];
+                const minWidthClassName = columnMinWidths[datastoreColumnIds.suggestedMatch];
+                if (!match)
+                    return _jsx("div", { className: cn(minWidthClassName, "typography-small text-muted-foreground"), children: "\u2014" });
+                return (_jsxs("div", { className: cn(minWidthClassName, "truncate typography-small"), title: `${match.organizationName}${match.isOrganization ? "" : match.path}`, children: [_jsx("span", { className: "text-muted-foreground", children: match.organizationName }), !match.isOrganization && _jsx("span", { className: "text-default-foreground", children: match.path })] }));
+            },
+        },
+        {
+            id: datastoreColumnIds.status,
+            accessorKey: "datastoreId",
+            header: datastoreColumnLabels[datastoreColumnIds.status],
+            enableSorting: false,
+            filterFn: (row, _columnId, filterValue) => datastoreStatusFilterValue(row.original, statusByDatastoreId[row.original.datastoreId ?? ""]) === filterValue,
+            cell: ({ row }) => (_jsx("div", { className: columnMinWidths[datastoreColumnIds.status], children: _jsx(DatastoreStatusBadge, { node: row.original, status: statusByDatastoreId[row.original.datastoreId ?? ""] }) })),
+        },
+        {
+            id: datastoreColumnIds.provisionedBy,
+            accessorKey: "provisionedBy",
+            header: datastoreColumnLabels[datastoreColumnIds.provisionedBy],
+            cell: ({ row }) => (_jsx("div", { className: cn(columnMinWidths[datastoreColumnIds.provisionedBy], "truncate typography-small text-muted-foreground"), children: row.original.provisionedBy ?? "—" })),
+        },
+        {
+            id: datastoreColumnIds.provisionedAt,
+            accessorKey: "provisionedAt",
+            header: datastoreColumnLabels[datastoreColumnIds.provisionedAt],
+            cell: ({ row }) => {
+                const { provisionedAt } = row.original;
+                const minWidthClassName = columnMinWidths[datastoreColumnIds.provisionedAt];
+                const at = isPresent(provisionedAt) ? new Date(provisionedAt) : undefined;
+                if (!isPresent(at) || Number.isNaN(at.getTime())) {
+                    return _jsx("div", { className: cn(minWidthClassName, "typography-small text-muted-foreground"), children: "\u2014" });
+                }
+                return (_jsx("div", { className: cn(minWidthClassName, "truncate typography-small text-muted-foreground"), title: at.toLocaleString(), children: formatDistanceToNow(at, { addSuffix: true }) }));
+            },
+        },
+        {
+            id: datastoreColumnIds.actions,
+            header: "",
+            enableSorting: false,
+            cell: ({ row }) => {
+                const datastoreRow = row.original;
+                const { datastoreId, removed, name, isRealmDefault, isUnlinked } = datastoreRow;
+                const hasDatastore = isPresent(datastoreId);
+                const current = hasDatastore && datastoreId === currentDatastoreId;
+                const status = hasDatastore ? statusByDatastoreId[datastoreId] : undefined;
+                const category = datastoreStatusCategory(datastoreRow, status);
+                const notRegistered = category === "notRegistered";
+                const reason = match({ notRegistered, materializing: isMaterializing(status) && !isRealmDefault })
+                    .with({ notRegistered: true }, () => "Not registered - use Register to fix, then try selecting again.")
+                    .with({ materializing: true }, () => "Still materializing - this can take a few minutes.")
+                    .otherwise(() => undefined);
+                const canSelect = hasDatastore && !reason && !current && !isSwitching;
+                return (_jsxs("div", { className: cn(columnMinWidths[datastoreColumnIds.actions], "flex items-center justify-end gap-1.5"), children: [isUnlinked && (_jsx(Button, { "data-testid": `datastore-link-${datastoreRow.id}`, size: "sm", variant: "secondary", icon: Link2, onClick: () => onLink(datastoreRow), children: "Link" })), hasDatastore && !removed && category === "offline" && (_jsx(Button, { "data-testid": `datastore-bring-online-${datastoreRow.id}`, size: "sm", variant: "secondary", icon: Power, disabled: isBringingOnline, onClick: () => onBringOnline(datastoreRow), children: "Bring online" })), !isUnlinked && hasDatastore && !removed && notRegistered && (_jsx(Button, { "data-testid": `datastore-register-${datastoreRow.id}`, size: "sm", variant: "secondary", icon: RefreshCw, onClick: () => onRegister(datastoreRow), children: "Register" })), !isUnlinked && hasDatastore && current && (_jsx(Button, { "data-testid": `datastore-select-${datastoreRow.id}`, size: "sm", variant: "secondary", disabled: true, children: "Selected" })), !isUnlinked && hasDatastore && !current && !removed && (_jsx(Button, { "data-testid": `datastore-select-${datastoreRow.id}`, size: "sm", variant: "secondary", disabled: !canSelect, title: reason, onClick: () => onSelect(datastoreRow), children: "Select" })), isRealmDefault || isUnlinked ? (
+                        // Same-sized spacer keeps Select/Selected aligned with rows that have the ellipsis.
+                        _jsx("div", { className: "size-6", "aria-hidden": "true" })) : (_jsxs(Dropdown, { children: [_jsx(DropdownTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": `Actions for ${name}`, className: "shrink-0 rounded-sm-v4 p-1 text-muted-foreground hover:bg-faint hover:text-default-foreground", children: _jsx(MoreHorizontal, { className: "size-4" }) }) }), _jsxs(DropdownContent, { align: "end", className: "min-w-52", children: [_jsx(DropdownItem, { icon: _jsx(Pencil, { className: "size-4" }), onSelect: () => onRename(datastoreRow), children: "Rename" }), isPresent(datastoreRow.organizationAlias) && (_jsx(DropdownItem, { icon: _jsx(Users, { className: "size-4" }), onSelect: () => onManageUsers(datastoreRow), children: "Manage users" })), !hasDatastore &&
+                                            (matchableRowIds.has(datastoreRow.id) ? (_jsx(DropdownItem, { icon: _jsx(Link2, { className: "size-4" }), onSelect: () => onLinkExisting(datastoreRow), children: "Link existing datastore" })) : (_jsx(DropdownItem, { icon: _jsx(DatabaseZap, { className: "size-4" }), onSelect: () => onProvision(datastoreRow), children: "Provision datastore" }))), _jsx(DropdownItem, { icon: _jsx(Plus, { className: "size-4" }), onSelect: () => onAddChild(datastoreRow), children: "Add datastore" }), enableDatastoreRemoval && hasDatastore && !removed && (_jsxs(_Fragment, { children: [_jsx(DropdownSeparator, {}), _jsx(DropdownItem, { className: "text-error-foreground", icon: _jsx(Trash2, { className: "size-4" }), onSelect: () => onRemove(datastoreRow), children: "Remove datastore" })] })), enableDatastoreRemoval && hasDatastore && removed && (_jsxs(_Fragment, { children: [_jsx(DropdownSeparator, {}), _jsx(DropdownItem, { icon: _jsx(RotateCcw, { className: "size-4" }), onSelect: () => onRestore(datastoreRow), children: "Restore datastore" })] }))] })] }))] }));
+            },
+        },
+    ], [
+        statusByDatastoreId,
+        currentDatastoreId,
+        isSwitching,
+        indented,
+        matchableRowIds,
+        suggestedMatchByDatastoreId,
+        onSelect,
+        onAddChild,
+        onLink,
+        onProvision,
+        onLinkExisting,
+        onRemove,
+        onRestore,
+        onRegister,
+        onRename,
+        onManageUsers,
+        onBringOnline,
+        isBringingOnline,
+    ]);
+}

package/dist/routes/datastores/hooks/useDatastoreTable.d.ts

@@ -0,0 +1,14 @@
+import type { ColumnDef, OnChangeFn, SortingState, Table } from "@tanstack/react-table";
+import type { DatastoreStatusFilterValue } from "../components/StatusBadge.js";
+import type { DatastoreRow } from "../flatten.js";
+export type StatusFilter = "ALL" | DatastoreStatusFilterValue;
+type UseDatastoreTableResult = {
+    table: Table<DatastoreRow>;
+    searchQuery: string;
+    onSearchQueryChange: (query: string) => void;
+    statusFilter: StatusFilter;
+    onStatusFilterChange: (status: StatusFilter) => void;
+};
+export declare function useDatastoreTable(tableKey: string, rows: DatastoreRow[], columns: ColumnDef<DatastoreRow>[], sorting: SortingState, setSorting: OnChangeFn<SortingState>): UseDatastoreTableResult;
+export {};
+//# sourceMappingURL=useDatastoreTable.d.ts.map

package/dist/routes/datastores/hooks/useDatastoreTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDatastoreTable.d.ts","sourceRoot":"","sources":["../../../../src/routes/datastores/hooks/useDatastoreTable.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAGxF,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAC5E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAI/C,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,0BAA0B,CAAC;AAE9D,KAAK,uBAAuB,GAAG;IAC7B,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,YAAY,EAAE,YAAY,CAAC;IAC3B,oBAAoB,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;CACtD,CAAC;AAGF,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,YAAY,EAAE,EACpB,OAAO,EAAE,SAAS,CAAC,YAAY,CAAC,EAAE,EAClC,OAAO,EAAE,YAAY,EACrB,UAAU,EAAE,UAAU,CAAC,YAAY,CAAC,GACnC,uBAAuB,CAiEzB"}

package/dist/routes/datastores/hooks/useDatastoreTable.js

@@ -0,0 +1,45 @@
+import { useReactTable } from "@tanstack/react-table";
+import { useCallback, useMemo } from "react";
+import { datastoreColumnIds } from "./useDatastoreColumns.js";
+import { createTableConfig, useTableState } from "#components/table/index";
+// Sorting is owned by the caller so the columns can drop the hierarchy indent once a sort makes it a lie.
+export function useDatastoreTable(tableKey, rows, columns, sorting, setSorting) {
+    const { pagination, setPagination, columnFilters, setColumnFilters, columnVisibility, setColumnVisibility, columnOrder, setColumnOrder, searchQuery, setSearchQuery, debouncedSearchQuery, } = useTableState(tableKey, [], { useLocalState: true });
+    const filteredRows = useMemo(() => {
+        const term = debouncedSearchQuery.trim().toLowerCase();
+        if (!term)
+            return rows;
+        return rows.filter((row) => row.name.toLowerCase().includes(term) ||
+            row.organizationName.toLowerCase().includes(term) ||
+            (row.datastoreId ?? "").toLowerCase().includes(term));
+    }, [rows, debouncedSearchQuery]);
+    const table = useReactTable(createTableConfig({
+        data: filteredRows,
+        columns,
+        columnPinning: { left: [datastoreColumnIds.name], right: [datastoreColumnIds.actions] },
+        sorting,
+        setSorting,
+        columnFilters,
+        setColumnFilters,
+        columnVisibility,
+        setColumnVisibility,
+        columnOrder,
+        setColumnOrder,
+        pagination,
+        setPagination,
+    }));
+    const statusFilter = columnFilters.find((f) => f.id === datastoreColumnIds.status)?.value ?? "ALL";
+    const handleStatusFilterChange = useCallback((status) => {
+        setColumnFilters((prev) => [
+            ...prev.filter((f) => f.id !== datastoreColumnIds.status),
+            ...(status !== "ALL" ? [{ id: datastoreColumnIds.status, value: status }] : []),
+        ]);
+    }, [setColumnFilters]);
+    return {
+        table,
+        searchQuery,
+        onSearchQueryChange: setSearchQuery,
+        statusFilter,
+        onStatusFilterChange: handleStatusFilterChange,
+    };
+}

package/dist/routes/datastores/index.d.ts

@@ -0,0 +1,2 @@
+export declare function DatastoresRoute(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/routes/datastores/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/routes/datastores/index.tsx"],"names":[],"mappings":"AAqFA,wBAAgB,eAAe,4CAypB9B"}