@oneuptime/common 10.2.4 → 10.2.7

package/build/dist/UI/Components/ModelTable/BaseModelTable.js

@@ -8,7 +8,9 @@ import Navigation from "../../Utils/Navigation";
 import PermissionUtil from "../../Utils/Permission";
 import ProjectUtil from "../../Utils/Project";
 import User from "../../Utils/User";
-import { ButtonSize, ButtonStyleType } from "../Button/Button";
+import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
+import MoreMenu from "../MoreMenu/MoreMenu";
+import MoreMenuItem from "../MoreMenu/MoreMenuItem";
 import Card from "../Card/Card";
 import { getRefreshButton } from "../Card/CardButtons/Refresh";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
@@ -16,6 +18,7 @@ import List from "../List/List";
 import ConfirmModal from "../Modal/ConfirmModal";
 import Modal, { ModalWidth } from "../Modal/Modal";
 import MarkdownViewer from "../Markdown.tsx/MarkdownViewer";
+import Icon from "../Icon/Icon";
 import OrderedStatesList from "../OrderedStatesList/OrderedStatesList";
 import Pill from "../Pill/Pill";
 import Table from "../Table/Table";
@@ -26,6 +29,7 @@ import Route from "../../../Types/API/Route";
 import URL from "../../../Types/API/URL";
 import InBetween from "../../../Types/BaseDatabase/InBetween";
 import Search from "../../../Types/BaseDatabase/Search";
+import MultiSearch from "../../../Types/BaseDatabase/MultiSearch";
 import SortOrder from "../../../Types/BaseDatabase/SortOrder";
 import SubscriptionPlan from "../../../Types/Billing/SubscriptionPlan";
 import { Yellow } from "../../../Types/BrandColors";
@@ -36,7 +40,7 @@ import IconProp from "../../../Types/Icon/IconProp";
 import ObjectID from "../../../Types/ObjectID";
 import Permission, { PermissionHelper, } from "../../../Types/Permission";
 import Typeof from "../../../Types/Typeof";
-import React, { useEffect, useState, } from "react";
+import React, { useEffect, useMemo, useState, } from "react";
 import TableViewElement from "./TableView";
 import UserPreferences, { UserPreferenceType, } from "../../../Utils/UserPreferences";
 export var ShowAs;
@@ -105,6 +109,152 @@ const BaseModelTable = (props) => {
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState("");
     const [tableFilterError, setTableFilterError] = useState("");
+    const [searchText, setSearchText] = useState("");
+    const [debouncedSearchText, setDebouncedSearchText] = useState("");
+    const [isSearchFocused, setIsSearchFocused] = useState(false);
+    const [isSearchExpanded, setIsSearchExpanded] = useState(false);
+    const searchInputRef = React.useRef(null);
+    const [availableLabels, setAvailableLabels] = useState([]);
+    const [selectedLabels, setSelectedLabels] = useState([]);
+    const [isLabelsLoading, setIsLabelsLoading] = useState(false);
+    const [labelsFetched, setLabelsFetched] = useState(false);
+    const [labelDropdownIndex, setLabelDropdownIndex] = useState(0);
+    useEffect(() => {
+        const handle = setTimeout(() => {
+            setDebouncedSearchText(searchText);
+        }, 300);
+        return () => {
+            clearTimeout(handle);
+        };
+    }, [searchText]);
+    /*
+     * "/" focuses the search input — same affordance as GitHub / Linear.
+     * Skip while the user is typing in another input/textarea or has a modal open.
+     */
+    useEffect(() => {
+        if (!props.searchableFields || props.searchableFields.length === 0) {
+            return undefined;
+        }
+        const handleKey = (e) => {
+            if (e.key !== "/" || e.metaKey || e.ctrlKey || e.altKey) {
+                return;
+            }
+            const target = e.target;
+            if (target &&
+                (target.tagName === "INPUT" ||
+                    target.tagName === "TEXTAREA" ||
+                    target.isContentEditable)) {
+                return;
+            }
+            e.preventDefault();
+            setIsSearchExpanded(true);
+            // Wait one frame so the input mounts/becomes visible before focusing.
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        };
+        document.addEventListener("keydown", handleKey);
+        return () => {
+            document.removeEventListener("keydown", handleKey);
+        };
+    }, [props.searchableFields]);
+    /*
+     * Keep the search expanded whenever there is an active search term — so
+     * results stay visible alongside the box. Collapsing only happens when the
+     * user blurs an empty input.
+     */
+    useEffect(() => {
+        if ((debouncedSearchText.trim().length > 0 || selectedLabels.length > 0) &&
+            !isSearchExpanded) {
+            setIsSearchExpanded(true);
+        }
+    }, [debouncedSearchText, selectedLabels]);
+    useEffect(() => {
+        // reset to first page whenever the active search term or labels change
+        setCurrentPageNumber(1);
+    }, [debouncedSearchText, selectedLabels]);
+    const labelFilterConfig = useMemo(() => {
+        const filter = props.filters.find((f) => {
+            return (f.filterEntityType &&
+                f.filterEntityType.name === "Label" &&
+                f.field &&
+                f.filterDropdownField);
+        });
+        if (!filter || !filter.field || !filter.filterDropdownField) {
+            return null;
+        }
+        const fieldKey = Object.keys(filter.field)[0];
+        if (!fieldKey) {
+            return null;
+        }
+        return {
+            fieldKey,
+            entityType: filter.filterEntityType,
+            fetchQuery: filter.filterQuery || {},
+            labelField: filter.filterDropdownField.label,
+        };
+    }, [props.filters]);
+    // Fetch labels on first search expansion if this resource supports them.
+    useEffect(() => {
+        if (!isSearchExpanded || !labelFilterConfig || labelsFetched) {
+            return;
+        }
+        let cancelled = false;
+        setIsLabelsLoading(true);
+        (async () => {
+            try {
+                const result = await props.callbacks.getList({
+                    modelType: labelFilterConfig.entityType,
+                    query: labelFilterConfig.fetchQuery,
+                    limit: 200,
+                    skip: 0,
+                    select: {
+                        _id: true,
+                        [labelFilterConfig.labelField]: true,
+                        color: true,
+                    },
+                    sort: { [labelFilterConfig.labelField]: SortOrder.Ascending },
+                });
+                if (cancelled) {
+                    return;
+                }
+                const mapped = (result.data || [])
+                    .map((item) => {
+                    var _a;
+                    const raw = item;
+                    const colorAny = raw["color"];
+                    const colorHex = (colorAny &&
+                        (typeof colorAny === "string"
+                            ? colorAny
+                            : colorAny.value ||
+                                (colorAny.toString && colorAny.toString()))) ||
+                        "#94a3b8";
+                    return {
+                        id: ((_a = raw["_id"]) === null || _a === void 0 ? void 0 : _a.toString()) || "",
+                        name: raw[labelFilterConfig.labelField] || "",
+                        color: colorHex,
+                    };
+                })
+                    .filter((l) => {
+                    return l.id && l.name;
+                });
+                setAvailableLabels(mapped);
+                setLabelsFetched(true);
+            }
+            catch (_a) {
+                // Silently fail — search still works without label suggestions.
+            }
+            finally {
+                if (!cancelled) {
+                    setIsLabelsLoading(false);
+                }
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [isSearchExpanded, labelFilterConfig, labelsFetched]);
     const [showModel, setShowModal] = useState(false);
     const [showFilterModal, setShowFilterModal] = useState(false);
     const [modalType, setModalType] = useState(ModalType.Create);
@@ -439,13 +589,57 @@ const BaseModelTable = (props) => {
         }
         setIsFilterFetchLoading(false);
     };
+    const buildSearchQueryFragment = () => {
+        const fragment = {};
+        /*
+         * Strip the trailing @<prefix> mention before searching — that token
+         * is a label-autocomplete trigger, not part of the user's free-text
+         * query.
+         */
+        const stripTrailingMention = (v) => {
+            const atIndex = v.lastIndexOf("@");
+            if (atIndex < 0) {
+                return v;
+            }
+            if (atIndex > 0) {
+                const prev = v[atIndex - 1] || "";
+                if (prev !== " " && prev !== "\t") {
+                    return v;
+                }
+            }
+            const after = v.substring(atIndex + 1);
+            if (after.includes(" ") ||
+                after.includes("\t") ||
+                after.includes("\n")) {
+                return v;
+            }
+            return v.substring(0, atIndex).trimEnd();
+        };
+        const effectiveSearch = stripTrailingMention(debouncedSearchText).trim();
+        if (effectiveSearch.length > 0 &&
+            props.searchableFields &&
+            props.searchableFields.length > 0) {
+            fragment._multiFieldSearch = new MultiSearch({
+                fields: props.searchableFields.map((f) => {
+                    return f;
+                }),
+                value: effectiveSearch,
+            });
+        }
+        if (labelFilterConfig && selectedLabels.length > 0) {
+            fragment[labelFilterConfig.fieldKey] = new Includes(selectedLabels.map((l) => {
+                return l.id;
+            }));
+        }
+        return fragment;
+    };
     const fetchAllBulkItems = async () => {
         setError("");
         setIsLoading(true);
         try {
             const listResult = await props.callbacks.getList({
                 modelType: props.modelType,
-                query: Object.assign(Object.assign({}, props.query), query),
+                query: Object.assign(Object.assign(Object.assign({}, props.query), query), buildSearchQueryFragment()),
                 limit: LIMIT_PER_PROJECT,
                 skip: 0,
                 select: {
@@ -474,7 +668,7 @@ const BaseModelTable = (props) => {
         try {
             const listResult = await props.callbacks.getList({
                 modelType: props.modelType,
-                query: Object.assign(Object.assign({}, props.query), query),
+                query: Object.assign(Object.assign(Object.assign({}, props.query), query), buildSearchQueryFragment()),
                 groupBy: Object.assign({}, props.groupBy),
                 limit: itemsOnPage,
                 skip: (currentPageNumber - 1) * itemsOnPage,
@@ -672,9 +866,6 @@ const BaseModelTable = (props) => {
                 icon: IconProp.Filter,
             });
         }
-        if (props.saveFilterProps) {
-            headerbuttons.push(getSaveFilterDropdown());
-        }
         setCardButtons(headerbuttons);
     };
     useEffect(() => {
@@ -687,6 +878,8 @@ const BaseModelTable = (props) => {
         sortOrder,
         itemsOnPage,
         query,
+        debouncedSearchText,
+        selectedLabels,
         props.refreshToggle,
     ]);
     const shouldDisableSort = (columnName) => {
@@ -961,6 +1154,12 @@ const BaseModelTable = (props) => {
             },
         };
     };
+    const isSearchActive = () => {
+        return debouncedSearchText.trim().length > 0 || selectedLabels.length > 0;
+    };
+    const getTableLoadingState = () => {
+        return isSearchActive() ? false : isLoading;
+    };
     const getTable = () => {
         var _a;
         return (React.createElement(Table, { onFilterChanged: (filterData) => {
@@ -1035,7 +1234,7 @@ const BaseModelTable = (props) => {
                 setSortBy(sortBy);
                 setSortOrder(sortOrder);
                 setTableView(null);
-            }, singularLabel: props.singularName || model.singularName || "Item", pluralLabel: props.pluralName || model.pluralName || "Items", error: error, currentPageNumber: currentPageNumber, isLoading: isLoading, enableDragAndDrop: props.enableDragAndDrop, dragDropIdField: "_id", dragDropIndexField: props.dragDropIndexField, totalItemsCount: totalItemsCount, data: data, id: props.id, columns: tableColumns, itemsOnPage: itemsOnPage, onDragDrop: async (id, newOrder) => {
+            }, singularLabel: props.singularName || model.singularName || "Item", pluralLabel: props.pluralName || model.pluralName || "Items", error: error, currentPageNumber: currentPageNumber, isLoading: getTableLoadingState(), enableDragAndDrop: props.enableDragAndDrop, dragDropIdField: "_id", dragDropIndexField: props.dragDropIndexField, totalItemsCount: totalItemsCount, data: data, id: props.id, columns: tableColumns, itemsOnPage: itemsOnPage, onDragDrop: async (id, newOrder) => {
                 if (!props.dragDropIndexField) {
                     return;
                 }
@@ -1104,7 +1303,7 @@ const BaseModelTable = (props) => {
                     },
                 });
                 await fetchItems();
-            }, dragDropIdField: "_id", dragDropIndexField: props.dragDropIndexField, isLoading: isLoading, totalItemsCount: totalItemsCount, data: data, id: props.id, fields: fields, itemsOnPage: itemsOnPage, disablePagination: props.disablePagination || false, onNavigateToPage: async (pageNumber, itemsOnPage) => {
+            }, dragDropIdField: "_id", dragDropIndexField: props.dragDropIndexField, isLoading: getTableLoadingState(), totalItemsCount: totalItemsCount, data: data, id: props.id, fields: fields, itemsOnPage: itemsOnPage, disablePagination: props.disablePagination || false, onNavigateToPage: async (pageNumber, itemsOnPage) => {
                 setCurrentPageNumber(pageNumber);
                 setItemsOnPage(itemsOnPage);
             }, noItemsMessage: props.noItemsMessage || "", onRefreshClick: async () => {
@@ -1137,20 +1336,427 @@ const BaseModelTable = (props) => {
                 } },
                 React.createElement(Pill, { text: `${planName} Plan`, color: Yellow })))));
     };
+    const collapseSearch = () => {
+        setSearchText("");
+        setSelectedLabels([]);
+        setIsSearchExpanded(false);
+    };
+    const parseLabelMention = (value) => {
+        const atIndex = value.lastIndexOf("@");
+        if (atIndex < 0) {
+            return { hasMention: false, prefix: "", atIndex: -1 };
+        }
+        if (atIndex > 0) {
+            const prev = value[atIndex - 1] || "";
+            if (prev !== " " && prev !== "\t") {
+                return { hasMention: false, prefix: "", atIndex: -1 };
+            }
+        }
+        const after = value.substring(atIndex + 1);
+        if (after.includes(" ") || after.includes("\t") || after.includes("\n")) {
+            return { hasMention: false, prefix: "", atIndex: -1 };
+        }
+        return { hasMention: true, prefix: after, atIndex };
+    };
+    const addLabel = (label) => {
+        setSelectedLabels((prev) => {
+            if (prev.find((l) => {
+                return l.id === label.id;
+            })) {
+                return prev;
+            }
+            return [...prev, label];
+        });
+        // Strip the `@<prefix>` token from the input.
+        const mention = parseLabelMention(searchText);
+        if (mention.hasMention) {
+            const before = searchText.substring(0, mention.atIndex);
+            setSearchText(before.replace(/\s+$/, ""));
+        }
+        setLabelDropdownIndex(0);
+    };
+    const removeLabel = (labelId) => {
+        setSelectedLabels((prev) => {
+            return prev.filter((l) => {
+                return l.id !== labelId;
+            });
+        });
+    };
+    const getSearchControl = () => {
+        if (!props.searchableFields || props.searchableFields.length === 0) {
+            return React.createElement(React.Fragment, null);
+        }
+        const pluralLabel = (props.pluralName ||
+            model.pluralName ||
+            "items").toLowerCase();
+        const hasLabelSupport = Boolean(labelFilterConfig);
+        const defaultPlaceholder = hasLabelSupport
+            ? `Search ${pluralLabel}… (try @ for labels)`
+            : `Search ${pluralLabel} by name, description…`;
+        const placeholder = props.searchPlaceholder || defaultPlaceholder;
+        /*
+         * Effective search = input minus the trailing @<prefix> mention. The pill
+         * + result-count UI should reflect this so typing "@bug" doesn't claim
+         * "0 matches" before the user has actually committed the label.
+         */
+        const stripTrailingMentionForUi = (v) => {
+            const m = parseLabelMention(v);
+            return m.hasMention ? v.substring(0, m.atIndex).trimEnd() : v;
+        };
+        const trimmedSearch = stripTrailingMentionForUi(searchText).trim();
+        const trimmedActive = stripTrailingMentionForUi(debouncedSearchText).trim();
+        const hasActiveSearch = trimmedActive.length > 0;
+        const hasSelectedLabels = selectedLabels.length > 0;
+        /*
+         * "isSearching" covers both phases — typing-in-flight (before the
+         * debounce fires) AND the actual API request that follows. The table
+         * loader is suppressed during the latter, so this spinner is the only
+         * loading indicator the user sees during a search-driven fetch.
+         */
+        const isTypingInFlight = trimmedSearch.length > 0 && trimmedSearch !== trimmedActive;
+        const isSearching = isTypingInFlight || (isLoading && (hasActiveSearch || hasSelectedLabels));
+        const showMatchPill = !isSearching && (hasActiveSearch || hasSelectedLabels);
+        const expanded = isSearchExpanded || hasActiveSearch || hasSelectedLabels;
+        const mention = parseLabelMention(searchText);
+        const showLabelDropdown = hasLabelSupport && isSearchFocused && mention.hasMention;
+        const lowerPrefix = mention.prefix.toLowerCase();
+        const dropdownLabels = availableLabels
+            .filter((l) => {
+            return !selectedLabels.find((s) => {
+                return s.id === l.id;
+            });
+        })
+            .filter((l) => {
+            return (lowerPrefix.length === 0 || l.name.toLowerCase().includes(lowerPrefix));
+        })
+            .slice(0, 8);
+        const borderClass = isSearchFocused
+            ? "border-gray-400 ring-4 ring-gray-100 shadow-sm"
+            : hasActiveSearch || hasSelectedLabels
+                ? "border-gray-300 shadow-sm"
+                : "border-gray-200 shadow-sm";
+        const iconColorClass = isSearchFocused || hasActiveSearch || hasSelectedLabels
+            ? "text-gray-700"
+            : "text-gray-400";
+        const selectDropdownItemAt = (idx) => {
+            const item = dropdownLabels[idx];
+            if (item) {
+                addLabel(item);
+            }
+        };
+        return (React.createElement("div", { className: "relative flex w-full items-center" },
+            React.createElement("div", { className: "relative flex w-full flex-col gap-1" },
+                React.createElement("div", { className: `flex w-full items-center gap-2 rounded-lg border bg-white pl-3 pr-2 py-1.5 transition-all duration-200 ${borderClass}`, onClick: () => {
+                        var _a;
+                        (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    }, role: "presentation" },
+                    React.createElement(Icon, { icon: IconProp.Search, className: `h-4 w-4 flex-none transition-colors duration-200 ${iconColorClass}` }),
+                    React.createElement("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1.5" },
+                        selectedLabels.map((label) => {
+                            return (React.createElement("span", { key: label.id, className: "inline-flex items-center gap-1 rounded-full bg-gray-50 py-0.5 pl-2 pr-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-200 transition-all hover:bg-gray-100", title: `Label: ${label.name}` },
+                                React.createElement("span", { className: "h-2 w-2 flex-none rounded-full", style: { backgroundColor: label.color }, "aria-hidden": "true" }),
+                                React.createElement("span", { className: "max-w-[8rem] truncate" }, label.name),
+                                React.createElement("button", { type: "button", onMouseDown: (e) => {
+                                        e.preventDefault();
+                                    }, onClick: () => {
+                                        removeLabel(label.id);
+                                    }, title: "Remove label", "aria-label": `Remove ${label.name}`, className: "ml-0.5 flex-none rounded-full p-0.5 text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700" },
+                                    React.createElement(Icon, { icon: IconProp.Close, className: "h-3 w-3" }))));
+                        }),
+                        React.createElement("input", { ref: searchInputRef, type: "text", value: searchText, onChange: (e) => {
+                                setSearchText(e.target.value);
+                                setLabelDropdownIndex(0);
+                            }, onFocus: () => {
+                                setIsSearchFocused(true);
+                            }, onBlur: () => {
+                                setIsSearchFocused(false);
+                                /*
+                                 * Collapse only when the user blurs with nothing active —
+                                 * no text and no selected labels.
+                                 */
+                                if (searchText.trim().length === 0 &&
+                                    selectedLabels.length === 0) {
+                                    setIsSearchExpanded(false);
+                                }
+                            }, onKeyDown: (e) => {
+                                var _a;
+                                if (showLabelDropdown && dropdownLabels.length > 0) {
+                                    if (e.key === "ArrowDown") {
+                                        e.preventDefault();
+                                        setLabelDropdownIndex((i) => {
+                                            return Math.min(i + 1, dropdownLabels.length - 1);
+                                        });
+                                        return;
+                                    }
+                                    if (e.key === "ArrowUp") {
+                                        e.preventDefault();
+                                        setLabelDropdownIndex((i) => {
+                                            return Math.max(i - 1, 0);
+                                        });
+                                        return;
+                                    }
+                                    if (e.key === "Enter" || e.key === "Tab") {
+                                        e.preventDefault();
+                                        selectDropdownItemAt(labelDropdownIndex);
+                                        return;
+                                    }
+                                }
+                                if (e.key === "Backspace" && searchText.length === 0) {
+                                    // Pop last label when backspacing on empty input.
+                                    if (selectedLabels.length > 0) {
+                                        const last = selectedLabels[selectedLabels.length - 1];
+                                        if (last) {
+                                            removeLabel(last.id);
+                                        }
+                                    }
+                                    return;
+                                }
+                                if (e.key === "Escape") {
+                                    if (showLabelDropdown) {
+                                        // Just cancel the @ mention parse — clear @ prefix.
+                                        const m = parseLabelMention(searchText);
+                                        if (m.hasMention) {
+                                            setSearchText(searchText
+                                                .substring(0, m.atIndex)
+                                                .replace(/\s+$/, ""));
+                                        }
+                                        return;
+                                    }
+                                    if (searchText) {
+                                        setSearchText("");
+                                    }
+                                    else if (selectedLabels.length > 0) {
+                                        setSelectedLabels([]);
+                                    }
+                                    else {
+                                        collapseSearch();
+                                        (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+                                    }
+                                }
+                            }, placeholder: selectedLabels.length === 0 ? placeholder : "Refine search…", spellCheck: false, autoComplete: "off", tabIndex: expanded ? 0 : -1, className: "min-w-[6rem] flex-1 bg-transparent py-1 text-sm text-gray-900 placeholder-gray-400 outline-none" })),
+                    isSearching && (React.createElement("div", { className: "flex-none text-gray-400", title: "Searching\u2026" },
+                        React.createElement(Icon, { icon: IconProp.Spinner, className: "h-4 w-4 animate-spin" }))),
+                    showMatchPill && totalItemsCount >= 0 && (React.createElement("span", { className: "flex-none whitespace-nowrap rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700", title: `${totalItemsCount} ${totalItemsCount === 1 ? "result" : "results"}` },
+                        totalItemsCount,
+                        " ",
+                        totalItemsCount === 1 ? "match" : "matches")),
+                    searchText.length > 0 || selectedLabels.length > 0 ? (React.createElement("button", { type: "button", onMouseDown: (e) => {
+                            e.preventDefault();
+                        }, onClick: () => {
+                            collapseSearch();
+                        }, title: "Clear search (Esc Esc)", "aria-label": "Clear search", className: "flex-none rounded-full p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600" },
+                        React.createElement(Icon, { icon: IconProp.Close, className: "h-3.5 w-3.5" }))) : (React.createElement("kbd", { className: "hidden flex-none select-none items-center rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 font-mono text-[10px] font-medium text-gray-500 sm:inline-flex", title: "Press / to focus search" }, "/"))),
+                showLabelDropdown && (React.createElement("div", { className: "absolute left-0 right-0 top-full z-20 mt-1.5 origin-top overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg ring-1 ring-black/5 transition-all duration-150 animate-in fade-in slide-in-from-top-1", onMouseDown: (e) => {
+                        // Prevent input blur on dropdown clicks.
+                        e.preventDefault();
+                    } },
+                    React.createElement("div", { className: "flex items-center justify-between border-b border-gray-100 px-3 py-2" },
+                        React.createElement("span", { className: "text-[11px] font-semibold uppercase tracking-wide text-gray-500" }, isLabelsLoading ? "Loading labels…" : "Filter by label"),
+                        React.createElement("span", { className: "text-[10px] text-gray-400" },
+                            React.createElement("kbd", { className: "font-mono" }, "\u2191"),
+                            React.createElement("kbd", { className: "ml-0.5 font-mono" }, "\u2193"),
+                            React.createElement("span", { className: "ml-1" }, "to navigate"),
+                            React.createElement("span", { className: "mx-1.5" }, "\u00B7"),
+                            React.createElement("kbd", { className: "font-mono" }, "\u21B5"),
+                            React.createElement("span", { className: "ml-1" }, "to select"))),
+                    React.createElement("div", { className: "max-h-64 overflow-y-auto py-1" },
+                        !isLabelsLoading && dropdownLabels.length === 0 && (React.createElement("div", { className: "px-3 py-3 text-sm text-gray-500" }, availableLabels.length === 0
+                            ? "No labels available for this resource."
+                            : `No labels matching "${mention.prefix}"`)),
+                        dropdownLabels.map((label, idx) => {
+                            const isActive = idx === labelDropdownIndex;
+                            return (React.createElement("button", { key: label.id, type: "button", onMouseEnter: () => {
+                                    setLabelDropdownIndex(idx);
+                                }, onMouseDown: (e) => {
+                                    e.preventDefault();
+                                }, onClick: () => {
+                                    var _a;
+                                    addLabel(label);
+                                    (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                                }, className: `flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm transition-colors ${isActive
+                                    ? "bg-gray-100 text-gray-900"
+                                    : "text-gray-700 hover:bg-gray-50"}` },
+                                React.createElement("span", { className: "h-2.5 w-2.5 flex-none rounded-full ring-1 ring-inset ring-black/5", style: { backgroundColor: label.color }, "aria-hidden": "true" }),
+                                React.createElement("span", { className: "flex-1 truncate" }, label.name),
+                                isActive && (React.createElement("span", { className: "text-[10px] font-medium uppercase tracking-wide text-gray-500" }, "\u21B5"))));
+                        })))))));
+    };
+    const splitButtonsForHeader = (buttons) => {
+        let mainIndex = -1;
+        for (let i = 0; i < buttons.length; i++) {
+            const b = buttons[i];
+            if (React.isValidElement(b)) {
+                continue;
+            }
+            const c = b;
+            if (c.buttonStyle === ButtonStyleType.NORMAL && c.icon === IconProp.Add) {
+                mainIndex = i;
+                break;
+            }
+        }
+        if (mainIndex < 0) {
+            for (let i = 0; i < buttons.length; i++) {
+                const b = buttons[i];
+                if (React.isValidElement(b)) {
+                    continue;
+                }
+                if (b.buttonStyle === ButtonStyleType.NORMAL) {
+                    mainIndex = i;
+                    break;
+                }
+            }
+        }
+        if (mainIndex < 0) {
+            return { main: null, rest: buttons };
+        }
+        const main = buttons[mainIndex];
+        const rest = [
+            ...buttons.slice(0, mainIndex),
+            ...buttons.slice(mainIndex + 1),
+        ];
+        return { main, rest };
+    };
+    const renderMainButton = (b) => {
+        return (React.createElement(Button, { key: "model-table-main-action", title: b.title, buttonStyle: b.buttonStyle, buttonSize: b.buttonSize, className: b.className, onClick: () => {
+                var _a;
+                (_a = b.onClick) === null || _a === void 0 ? void 0 : _a.call(b);
+            }, disabled: b.disabled, icon: b.icon, shortcutKey: b.shortcutKey, dataTestId: "card-button", isLoading: b.isLoading }));
+    };
+    /*
+     * Icon-only card buttons (Refresh, Filter, …) have empty titles, so derive
+     * a label from the icon for the More menu.
+     */
+    // Fallback labels for icon-only buttons (Refresh, Filter, ...) in the More menu.
+    const labelForIconButton = (icon) => {
+        switch (icon) {
+            case IconProp.Refresh:
+                return "Refresh";
+            case IconProp.Filter:
+                return "Filter";
+            case IconProp.Add:
+                return "Add";
+            case IconProp.Help:
+                return "Help";
+            case IconProp.Book:
+                return "Documentation";
+            case IconProp.Play:
+                return "Watch Demo";
+            case IconProp.Search:
+                return "Search";
+            default:
+                return "Action";
+        }
+    };
+    const renderMoreMenu = (items) => {
+        if (items.length === 0) {
+            return null;
+        }
+        const children = items.map((item, idx) => {
+            if (React.isValidElement(item)) {
+                return (React.createElement("div", { key: `more-${idx}`, className: "px-2 py-1" }, item));
+            }
+            const b = item;
+            const label = b.title || labelForIconButton(b.icon);
+            return (React.createElement(MoreMenuItem, { key: `more-${idx}`, text: label, icon: b.icon, onClick: () => {
+                    var _a;
+                    if (!b.disabled) {
+                        (_a = b.onClick) === null || _a === void 0 ? void 0 : _a.call(b);
+                    }
+                }, className: b.disabled ? "opacity-40 pointer-events-none" : "" }));
+        });
+        return (React.createElement(MoreMenu, { key: "model-table-more-menu", menuIcon: IconProp.EllipsisHorizontal, text: "" }, children));
+    };
+    /*
+     * Builds the right-hand side of the card header. All slots — search
+     * trigger/bar, saved views, main button, more menu — stay mounted at all
+     * times. State transitions are purely CSS so the inputs keep their focus,
+     * the dropdown keeps its open state, and there's no mount/unmount flicker.
+     *
+     * Layout when collapsed:  [🔍 trigger] [Saved Views] [main] [⋯]
+     * Layout when expanded:   [🔍 ━━━ wide search bar ━━━]
+     * Saved views + main button + more menu fade and collapse-to-zero-width
+     * when the search expands, freeing horizontal space for the bar.
+     */
+    const getHeaderButtonsWithSearch = () => {
+        const hasSearch = Boolean(props.searchableFields && props.searchableFields.length > 0);
+        /*
+         * Saved views get their own first-class slot in the header — never
+         * collapsed into the overflow ⋯ menu. Render fresh on every call so the
+         * inner TableViewElement always sees the current query / sort / itemsOnPage.
+         */
+        const savedViewsElement = props.saveFilterProps
+            ? getSaveFilterDropdown()
+            : null;
+        if (cardButtons.length === 0 && !hasSearch) {
+            return savedViewsElement ? [savedViewsElement] : cardButtons;
+        }
+        if (!hasSearch) {
+            // Without search, just split into [Saved Views] [main] [⋯]; no special wrapping.
+            const { main, rest } = splitButtonsForHeader(cardButtons);
+            const composed = [];
+            if (savedViewsElement) {
+                composed.push(savedViewsElement);
+            }
+            if (main) {
+                composed.push(renderMainButton(main));
+            }
+            const moreMenu = renderMoreMenu(rest);
+            if (moreMenu) {
+                composed.push(moreMenu);
+            }
+            return composed;
+        }
+        const trimmedActive = debouncedSearchText.trim();
+        const isExpanded = isSearchExpanded || trimmedActive.length > 0 || selectedLabels.length > 0;
+        const { main, rest } = splitButtonsForHeader(cardButtons);
+        const moreMenu = renderMoreMenu(rest);
+        const wrapped = (React.createElement("div", { key: "model-table-header-actions", className: "flex items-center gap-1.5" },
+            React.createElement("div", { className: `relative shrink-0 transition-[width] duration-300 ease-out ${isExpanded ? "w-[22rem] sm:w-[26rem] lg:w-[32rem]" : "w-44 sm:w-56"}` },
+                React.createElement("button", { type: "button", onClick: () => {
+                        setIsSearchExpanded(true);
+                        requestAnimationFrame(() => {
+                            var _a;
+                            (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                        });
+                    }, title: "Search (/)", "aria-label": "Open search", tabIndex: isExpanded ? -1 : 0, className: `absolute inset-0 inline-flex items-center gap-2 rounded-lg border bg-white pl-3 pr-2 text-sm shadow-sm transition-all duration-200 ease-out ${isExpanded
+                        ? "pointer-events-none border-gray-200 opacity-0"
+                        : "border-gray-200 opacity-100 hover:border-gray-300 hover:bg-gray-50"}` },
+                    React.createElement(Icon, { icon: IconProp.Search, className: "h-4 w-4 flex-none text-gray-400" }),
+                    React.createElement("span", { className: "flex-1 truncate text-left text-gray-400" }, "Search\u2026"),
+                    React.createElement("kbd", { className: "hidden flex-none select-none items-center rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 font-mono text-[10px] font-medium text-gray-500 sm:inline-flex" }, "/")),
+                React.createElement("div", { className: `transition-opacity duration-200 ease-out ${isExpanded
+                        ? "opacity-100 delay-150"
+                        : "pointer-events-none opacity-0"}` }, getSearchControl())),
+            React.createElement("div", { className: `flex items-center transition-all duration-300 ease-out ${isExpanded
+                    ? "max-w-0 -ml-1.5 gap-0 opacity-0 pointer-events-none"
+                    : "max-w-[600px] gap-1.5 opacity-100"}`, "aria-hidden": isExpanded },
+                savedViewsElement,
+                main && renderMainButton(main),
+                moreMenu)));
+        return [wrapped];
+    };
+    const getCardHeaderTitle = (originalTitle) => {
+        return originalTitle;
+    };
     const getCardComponent = () => {
+        const headerButtons = getHeaderButtonsWithSearch();
         if (showAs === ShowAs.Table || showAs === ShowAs.List) {
             return (React.createElement("div", null,
-                props.cardProps && (React.createElement(Card, Object.assign({}, props.cardProps, { buttons: cardButtons, bodyClassName: showAs === ShowAs.List
+                props.cardProps && (React.createElement(Card, Object.assign({}, props.cardProps, { buttons: headerButtons, bodyClassName: showAs === ShowAs.List
                         ? "-ml-6 -mr-6 bg-gray-50 border-top"
-                        : "", title: getCardTitle(props.cardProps.title || "") }),
+                        : "", title: getCardHeaderTitle(getCardTitle(props.cardProps.title || "")) }),
                     tableColumns.length === 0 && props.columns.length > 0 ? (React.createElement(ErrorMessage, { message: `You are not authorized to view this table. You need any one of these permissions: ${PermissionHelper.getPermissionTitles(model.getReadPermissions()).join(", ")}` })) : (React.createElement(React.Fragment, null)),
                     tableColumns.length > 0 && showAs === ShowAs.Table ? (getTable()) : (React.createElement(React.Fragment, null)),
                     tableColumns.length > 0 && showAs === ShowAs.List ? (getList()) : (React.createElement(React.Fragment, null)))),
+                !props.cardProps &&
+                    (showAs === ShowAs.Table || showAs === ShowAs.List) &&
+                    props.searchableFields &&
+                    props.searchableFields.length > 0 ? (React.createElement("div", { className: "mb-3 flex justify-end" }, getSearchControl())) : (React.createElement(React.Fragment, null)),
                 !props.cardProps && showAs === ShowAs.Table ? getTable() : React.createElement(React.Fragment, null),
                 !props.cardProps && showAs === ShowAs.List ? getList() : React.createElement(React.Fragment, null)));
         }
         return (React.createElement("div", null,
-            props.cardProps && (React.createElement(Card, Object.assign({}, props.cardProps, { buttons: cardButtons, title: getCardTitle(props.cardProps.title || "") }), getOrderedStatesList())),
+            props.cardProps && (React.createElement(Card, Object.assign({}, props.cardProps, { buttons: headerButtons, title: getCardTitle(props.cardProps.title || "") }), getOrderedStatesList())),
             !props.cardProps && getOrderedStatesList()));
     };
     return (React.createElement(React.Fragment, null,