@oneuptime/common 14.0.10 → 14.0.12

package/build/dist/UI/Components/Workflow/ComponentsModal.js

@@ -1,149 +1,183 @@
-// Show a large modal full of components.
-import ErrorMessage from "../ErrorMessage/ErrorMessage";
+/*
+ * The Add Component and Add Trigger picker.
+ *
+ * About two thousand steps can be added to a workflow, and all but some
+ * twenty of them are the eight actions and three triggers generated for each
+ * database model. This panel used to list every one of them, a card each,
+ * grouped by model in registration order, and re-rendered the lot on every
+ * keystroke; it took seconds to open on a slow machine, froze while typing,
+ * and drew a search's results model by model in that same order, so
+ * "incident" showed Incident State above Incident.
+ *
+ * Now it leads with what people use and asks one small question at a time:
+ *
+ *   - Popular: the handful of steps most workflows are built from.
+ *   - More: the rest of the hand-written steps.
+ *   - OneUptime resources: pick Incident, then what to do with it. The
+ *     common resources are shown; every other one is behind "Browse all".
+ *
+ * Search covers everything (ComponentPicker/ComponentSearch.ts): every word
+ * counts, the resource named comes first, plurals and typos are forgiven,
+ * and only the best results are drawn. It runs on a deferred copy of what
+ * was typed, so typing never waits for the list.
+ *
+ * Picking is one click (or Enter): the panel exists to choose a step, so
+ * there is no second "Add to Workflow" button to find at the bottom.
+ */
+import KeyboardShortcut, { KeyboardKey, KeyboardShortcutSize, } from "../KeyboardShortcut/KeyboardShortcut";
 import Icon from "../Icon/Icon";
 import SideOver from "../SideOver/SideOver";
 import IconProp from "../../../Types/Icon/IconProp";
-import React, { useEffect, useMemo, useRef, useState, } from "react";
-const escapeRegExp = (value) => {
-    return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+import { ComponentType, } from "../../../Types/Workflow/Component";
+import { getComponentSearchIndex, getHighlightSegments, getSearchTokens, searchComponents, } from "./ComponentPicker/ComponentSearch";
+import { getPickerCatalog, } from "./ComponentPicker/PickerCatalog";
+import { ALL_RESOURCES_ITEM_KEY, BackButton, ComponentTile, HighlightedText, IconBox, PICKER_ITEM_ATTRIBUTE, ResourceRow, ResourceTile, SectionHeading, getPickerItemProps, resourceItemKey, } from "./ComponentPicker/PickerItems";
+import React, { useDeferredValue, useEffect, useMemo, useRef, useState, } from "react";
+// How many search results are drawn at first, and added by "Show more".
+export const SEARCH_RESULTS_PAGE_SIZE = 50;
+export const SEARCH_INPUT_ID = "workflow-component-search";
+export const SEARCH_RESULTS_ID = "workflow-component-results";
+export const getSearchOptionId = (index) => {
+    return `workflow-component-option-${index}`;
 };
-export const getSearchTokens = (search) => {
-    return search
-        .trim()
-        .toLowerCase()
-        .split(/\s+/)
-        .filter((token) => {
-        return token.length > 0;
-    });
+export var PickerViewKind;
+(function (PickerViewKind) {
+    PickerViewKind["Home"] = "Home";
+    PickerViewKind["AllResources"] = "AllResources";
+    PickerViewKind["Resource"] = "Resource";
+})(PickerViewKind || (PickerViewKind = {}));
+const EMPTY_OUTCOME = {
+    tokens: [],
+    typoTokens: [],
+    results: [],
 };
-export const matchesSearch = (componentMetadata, tokens) => {
-    if (tokens.length === 0) {
-        return true;
-    }
-    const haystack = `${componentMetadata.title} ${componentMetadata.description} ${componentMetadata.category}`.toLowerCase();
-    return tokens.every((token) => {
-        return haystack.includes(token);
-    });
+const HOME_ENTRY = {
+    view: { kind: PickerViewKind.Home },
+    returnFocusKey: null,
+    scrollTop: 0,
 };
-const getSearchScoreForToken = (componentMetadata, searchTerm) => {
-    const title = componentMetadata.title.toLowerCase();
-    const description = componentMetadata.description.toLowerCase();
-    const category = componentMetadata.category.toLowerCase();
-    let score = 0;
-    if (title.startsWith(searchTerm)) {
-        score += 140;
-    }
-    else if (title.includes(searchTerm)) {
-        score += 100;
-    }
-    if (category.startsWith(searchTerm)) {
-        score += 75;
-    }
-    else if (category.includes(searchTerm)) {
-        score += 55;
-    }
-    if (description.includes(searchTerm)) {
-        score += 35;
+const isTypingTarget = (target) => {
+    var _a;
+    const element = target;
+    return Boolean(element &&
+        (element.tagName === "INPUT" ||
+            element.tagName === "TEXTAREA" ||
+            element.isContentEditable ||
+            ((_a = element.getAttribute) === null || _a === void 0 ? void 0 : _a.call(element, "contenteditable")) === "true"));
+};
+/*
+ * On a phone, focusing the search box on open throws the keyboard over half
+ * of what the panel offers. There the panel opens for browsing; a tap on the
+ * box searches.
+ */
+const prefersTouch = () => {
+    try {
+        return Boolean(typeof window !== "undefined" &&
+            window.matchMedia &&
+            window.matchMedia("(pointer: coarse)").matches);
     }
-    if (title.split(" ").some((word) => {
-        return word.trim().startsWith(searchTerm);
-    })) {
-        score += 15;
+    catch (_a) {
+        return false;
     }
-    return score;
-};
-export const getSearchScore = (componentMetadata, tokens) => {
-    return tokens.reduce((total, token) => {
-        return total + getSearchScoreForToken(componentMetadata, token);
-    }, 0);
 };
 const ComponentsModal = (props) => {
-    const [search, setSearch] = useState("");
-    const searchInputRef = useRef(null);
-    const [selectedComponentId, setSelectedComponentId] = useState(null);
-    const categories = props.categories;
-    const searchTokens = useMemo(() => {
-        return getSearchTokens(search);
-    }, [search]);
-    const components = useMemo(() => {
-        return props.components.filter((componentMetadata) => {
-            return componentMetadata.componentType === props.componentsType;
-        });
-    }, [props.components, props.componentsType]);
-    const componentsToShow = useMemo(() => {
-        return components
-            .filter((componentMetadata) => {
-            return matchesSearch(componentMetadata, searchTokens);
-        })
-            .sort((componentA, componentB) => {
-            if (searchTokens.length === 0) {
-                return componentA.title.localeCompare(componentB.title);
-            }
-            const scoreDifference = getSearchScore(componentB, searchTokens) -
-                getSearchScore(componentA, searchTokens);
-            if (scoreDifference !== 0) {
-                return scoreDifference;
-            }
-            return componentA.title.localeCompare(componentB.title);
+    const typeLabel = props.componentsType === ComponentType.Trigger ? "trigger" : "component";
+    const typePlural = `${typeLabel}s`;
+    const catalog = useMemo(() => {
+        return getPickerCatalog({
+            components: props.components,
+            categories: props.categories,
+            componentsType: props.componentsType,
         });
-    }, [components, searchTokens]);
-    const selectedComponentMetadata = componentsToShow.find((componentMetadata) => {
-        return componentMetadata.id === selectedComponentId;
+    }, [props.components, props.categories, props.componentsType]);
+    const [query, setQuery] = useState("");
+    // What was typed, a render behind while the list catches up.
+    const deferredQuery = useDeferredValue(query);
+    const outcome = useMemo(() => {
+        if (getSearchTokens(deferredQuery).length === 0) {
+            return EMPTY_OUTCOME;
+        }
+        return searchComponents(getComponentSearchIndex(catalog), deferredQuery);
+    }, [catalog, deferredQuery]);
+    const isSearching = outcome.tokens.length > 0;
+    // The list is a render behind what was typed, for a moment.
+    const isCatchingUp = query !== deferredQuery;
+    // How many results are drawn, and which one Enter adds, for this search.
+    const [shown, setShown] = useState({
+        query: "",
+        count: SEARCH_RESULTS_PAGE_SIZE,
+    });
+    const shownCount = shown.query === deferredQuery ? shown.count : SEARCH_RESULTS_PAGE_SIZE;
+    const visibleResults = outcome.results.slice(0, shownCount);
+    const [active, setActive] = useState({
+        query: "",
+        index: 0,
     });
+    const activeIndex = active.query === deferredQuery
+        ? Math.min(active.index, Math.max(visibleResults.length - 1, 0))
+        : 0;
+    // Only keyboard moves scroll the list; a pointer resting on it must not.
+    const scrollActiveIntoViewRef = useRef(false);
+    const [viewStack, setViewStack] = useState([HOME_ENTRY]);
+    const currentEntry = viewStack[viewStack.length - 1] || HOME_ENTRY;
+    const pendingFocusRef = useRef(null);
+    const rootRef = useRef(null);
+    const searchInputRef = useRef(null);
+    // The SideOver's scrolling body, which the sticky search box sits in.
+    const getScrollContainer = () => {
+        var _a;
+        return (((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.closest("[data-testid='side-over-content']")) || null);
+    };
+    const openedResource = currentEntry.view.kind === PickerViewKind.Resource &&
+        currentEntry.view.resourceKey
+        ? catalog.resourcesByKey.get(currentEntry.view.resourceKey)
+        : undefined;
+    // A resource that is no longer in the catalog cannot stay open.
+    const view = currentEntry.view.kind === PickerViewKind.Resource && !openedResource
+        ? PickerViewKind.Home
+        : currentEntry.view.kind;
     useEffect(() => {
-        // A hidden selection must not be submitted or reappear when search clears.
-        if (!selectedComponentMetadata) {
-            setSelectedComponentId(null);
-        }
-    }, [selectedComponentMetadata]);
-    const searchHighlightPattern = useMemo(() => {
-        if (searchTokens.length === 0) {
-            return null;
+        var _a;
+        if (!prefersTouch()) {
+            (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
-        const alternatives = [...new Set(searchTokens)]
-            .sort((tokenA, tokenB) => {
-            return tokenB.length - tokenA.length;
-        })
-            .map(escapeRegExp)
-            .join("|");
-        return new RegExp(`(${alternatives})`, "ig");
-    }, [searchTokens]);
+    }, []);
     /*
-     * Grouped once per search rather than re-filtered inside the render loop.
-     * That loop ran once per category — around four hundred of them, each
-     * scanning every component still on screen — on every keystroke, with no
-     * debounce and no windowing.
+     * Index the catalog while the panel sits idle, so the first key typed does
+     * not wait for it. It is kept per catalog, so this happens once a page.
      */
-    const componentsByCategory = useMemo(() => {
-        const grouped = {};
-        for (const componentMetadata of componentsToShow) {
-            const bucket = grouped[componentMetadata.category];
-            if (bucket) {
-                bucket.push(componentMetadata);
-            }
-            else {
-                grouped[componentMetadata.category] = [componentMetadata];
+    useEffect(() => {
+        let isCancelled = false;
+        const build = () => {
+            if (!isCancelled) {
+                getComponentSearchIndex(catalog);
             }
+        };
+        if (typeof window.requestIdleCallback === "function") {
+            const handle = window.requestIdleCallback(build, {
+                timeout: 1500,
+            });
+            return () => {
+                var _a;
+                isCancelled = true;
+                (_a = window.cancelIdleCallback) === null || _a === void 0 ? void 0 : _a.call(window, handle);
+            };
         }
-        return grouped;
-    }, [componentsToShow]);
-    useEffect(() => {
-        var _a;
-        (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, []);
+        const timer = setTimeout(build, 300);
+        return () => {
+            isCancelled = true;
+            clearTimeout(timer);
+        };
+    }, [catalog]);
+    // "/" jumps to the search box from anywhere in the panel.
     useEffect(() => {
         const handleKeyDown = (event) => {
             var _a;
-            const target = event.target;
-            const isTypingContext = Boolean(target &&
-                (target.tagName === "INPUT" ||
-                    target.tagName === "TEXTAREA" ||
-                    target.getAttribute("contenteditable") === "true"));
             if (event.key === "/" &&
                 !event.metaKey &&
                 !event.ctrlKey &&
                 !event.altKey &&
-                !isTypingContext) {
+                !isTypingTarget(event.target)) {
                 event.preventDefault();
                 (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             }
@@ -153,218 +187,378 @@ const ComponentsModal = (props) => {
             window.removeEventListener("keydown", handleKeyDown);
         };
     }, []);
-    const hasSearchTerm = search.trim().length > 0;
-    const normalizedSearch = search.trim().toLowerCase();
-    const totalComponentCount = components.length;
-    const componentTypeLabel = `${props.componentsType.toLowerCase()}${totalComponentCount === 1 ? "" : "s"}`;
-    const suggestedCategories = categories
-        .filter((category) => {
-        return components.some((componentMetadata) => {
-            return componentMetadata.category === category.name;
+    // A new search starts at the top of the panel.
+    useEffect(() => {
+        if (isSearching) {
+            const container = getScrollContainer();
+            if (container) {
+                container.scrollTop = 0;
+            }
+        }
+    }, [deferredQuery]);
+    // Keep the option Enter would add in sight while the arrows move it.
+    useEffect(() => {
+        var _a;
+        if (!scrollActiveIntoViewRef.current) {
+            return;
+        }
+        scrollActiveIntoViewRef.current = false;
+        const option = document.getElementById(getSearchOptionId(activeIndex));
+        (_a = option === null || option === void 0 ? void 0 : option.scrollIntoView) === null || _a === void 0 ? void 0 : _a.call(option, { block: "nearest" });
+    }, [activeIndex]);
+    // Focus and scroll for a view that was just opened or returned to.
+    useEffect(() => {
+        var _a, _b, _c, _d, _e;
+        const pending = pendingFocusRef.current;
+        pendingFocusRef.current = null;
+        if (!pending) {
+            return;
+        }
+        const container = getScrollContainer();
+        if (pending.kind === "search") {
+            (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            return;
+        }
+        if (pending.kind === "first-item") {
+            if (container) {
+                container.scrollTop = 0;
+            }
+            (_c = (_b = rootRef.current) === null || _b === void 0 ? void 0 : _b.querySelector(`[${PICKER_ITEM_ATTRIBUTE}]`)) === null || _c === void 0 ? void 0 : _c.focus({ preventScroll: true });
+            return;
+        }
+        if (container) {
+            container.scrollTop = pending.scrollTop;
+        }
+        const returnTo = pending.key
+            ? Array.from(((_d = rootRef.current) === null || _d === void 0 ? void 0 : _d.querySelectorAll(`[${PICKER_ITEM_ATTRIBUTE}]`)) || []).find((element) => {
+                return element.getAttribute(PICKER_ITEM_ATTRIBUTE) === pending.key;
+            })
+            : undefined;
+        (_e = (returnTo || searchInputRef.current)) === null || _e === void 0 ? void 0 : _e.focus({ preventScroll: true });
+    }, [viewStack]);
+    const openView = (nextView, fromKey) => {
+        var _a;
+        const scrollTop = ((_a = getScrollContainer()) === null || _a === void 0 ? void 0 : _a.scrollTop) || 0;
+        pendingFocusRef.current = { kind: "first-item" };
+        setViewStack((stack) => {
+            const top = stack[stack.length - 1] || HOME_ENTRY;
+            return [
+                ...stack.slice(0, -1),
+                Object.assign(Object.assign({}, top), { returnFocusKey: fromKey, scrollTop: scrollTop }),
+                { view: nextView, returnFocusKey: null, scrollTop: 0 },
+            ];
+        });
+    };
+    const goBack = (focusSearch) => {
+        if (viewStack.length <= 1) {
+            return;
+        }
+        const previous = viewStack[viewStack.length - 2] || HOME_ENTRY;
+        pendingFocusRef.current = focusSearch
+            ? { kind: "search" }
+            : {
+                kind: "restore",
+                key: previous.returnFocusKey,
+                scrollTop: previous.scrollTop,
+            };
+        setViewStack((stack) => {
+            return stack.length > 1 ? stack.slice(0, -1) : stack;
+        });
+    };
+    const openResource = (resource) => {
+        openView({ kind: PickerViewKind.Resource, resourceKey: resource.key }, resourceItemKey(resource));
+    };
+    const pick = (componentMetadata) => {
+        props.onComponentClick(componentMetadata);
+    };
+    const clearSearch = () => {
+        var _a;
+        setQuery("");
+        (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const moveActive = (delta) => {
+        if (visibleResults.length === 0) {
+            return;
+        }
+        scrollActiveIntoViewRef.current = true;
+        setActive({
+            query: deferredQuery,
+            index: Math.min(Math.max(activeIndex + delta, 0), visibleResults.length - 1),
         });
-    })
-        .slice(0, 4);
-    const renderHighlightedText = (text, markClassName) => {
-        if (!searchHighlightPattern) {
-            return text;
+    };
+    const onSearchKeyDown = (event) => {
+        var _a, _b;
+        if (event.key === "Escape") {
+            if (query.length > 0) {
+                event.preventDefault();
+                event.stopPropagation();
+                setQuery("");
+            }
+            else if (viewStack.length > 1) {
+                event.preventDefault();
+                event.stopPropagation();
+                goBack(true);
+            }
+            return;
+        }
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            if (isSearching) {
+                moveActive(1);
+            }
+            else {
+                (_b = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`[${PICKER_ITEM_ATTRIBUTE}]`)) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+            return;
+        }
+        if (event.key === "ArrowUp") {
+            if (isSearching) {
+                event.preventDefault();
+                moveActive(-1);
+            }
+            return;
+        }
+        if (event.key === "Enter") {
+            if (getSearchTokens(query).length === 0) {
+                return;
+            }
+            event.preventDefault();
+            /*
+             * Typed and entered faster than the list caught up: add the best match
+             * for what is in the box, not for what the list still shows.
+             */
+            const result = query === deferredQuery
+                ? visibleResults[activeIndex]
+                : searchComponents(getComponentSearchIndex(catalog), query)
+                    .results[0];
+            if (result) {
+                pick(result.component);
+            }
+        }
+    };
+    /*
+     * Arrow keys move between the entries of a browse view, the first one up
+     * goes back to the search box, Escape goes back a view, and typing a
+     * letter on an entry starts a search with it.
+     */
+    const onBrowseKeyDown = (event) => {
+        var _a, _b, _c, _d;
+        if (event.defaultPrevented) {
+            return;
+        }
+        const items = Array.from(event.currentTarget.querySelectorAll(`[${PICKER_ITEM_ATTRIBUTE}]`));
+        const position = items.indexOf(event.target);
+        if (event.key === "Escape" && viewStack.length > 1) {
+            event.preventDefault();
+            event.stopPropagation();
+            goBack(false);
+            return;
         }
-        const highlightedParts = text.split(searchHighlightPattern);
-        return (React.createElement(React.Fragment, null, highlightedParts.map((part, index) => {
-            if (searchTokens.includes(part.toLowerCase())) {
-                return (React.createElement("mark", { key: `${part}-${index}`, className: markClassName || "rounded bg-amber-100 px-0.5 text-current" }, part));
+        if (position === -1) {
+            return;
+        }
+        if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+            event.preventDefault();
+            (_a = items[Math.min(position + 1, items.length - 1)]) === null || _a === void 0 ? void 0 : _a.focus();
+            return;
+        }
+        if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+            event.preventDefault();
+            if (position === 0) {
+                (_b = searchInputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+            else {
+                (_c = items[position - 1]) === null || _c === void 0 ? void 0 : _c.focus();
             }
-            return (React.createElement(React.Fragment, { key: `${part}-${index}` }, part));
-        })));
+            return;
+        }
+        if (event.key.length === 1 &&
+            event.key !== " " &&
+            event.key !== "/" &&
+            !event.metaKey &&
+            !event.ctrlKey &&
+            !event.altKey) {
+            event.preventDefault();
+            setQuery((current) => {
+                return current + event.key;
+            });
+            (_d = searchInputRef.current) === null || _d === void 0 ? void 0 : _d.focus();
+        }
+    };
+    const searchHasMore = outcome.results.length > visibleResults.length;
+    let statusText = "";
+    if (isSearching) {
+        if (outcome.results.length === 0) {
+            statusText = `No ${typePlural} match.`;
+        }
+        else if (searchHasMore) {
+            statusText = `Best ${visibleResults.length} of ${outcome.results.length} matches.`;
+        }
+        else {
+            statusText = `${outcome.results.length} ${outcome.results.length === 1 ? "match" : "matches"}.`;
+        }
+    }
+    const renderSearchResults = () => {
+        if (outcome.results.length === 0) {
+            return (React.createElement("div", { className: "px-4 py-12 text-center" },
+                React.createElement("div", { className: "mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-gray-100" },
+                    React.createElement(Icon, { icon: IconProp.Search, className: "h-5 w-5 text-gray-400" })),
+                React.createElement("p", { className: "mt-3 text-sm font-medium text-gray-900" },
+                    "No ",
+                    typePlural,
+                    " match \u201C",
+                    deferredQuery.trim(),
+                    "\u201D"),
+                React.createElement("p", { className: "mx-auto mt-1 max-w-md text-sm text-gray-500" }, props.componentsType === ComponentType.Trigger
+                    ? "Check the spelling, or try fewer or different words. To start this workflow from another tool, use the Webhook trigger."
+                    : "Check the spelling, or try fewer or different words. For anything that is not here, the API components and Run Custom JavaScript can work with any service."),
+                React.createElement("button", { type: "button", onClick: clearSearch, className: "mt-4 inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors duration-150 hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500" },
+                    React.createElement(Icon, { icon: IconProp.Close, className: "h-3.5 w-3.5" }),
+                    "Clear search")));
+        }
+        return (React.createElement(React.Fragment, null,
+            React.createElement("ul", { id: SEARCH_RESULTS_ID, role: "listbox", "aria-label": `Matching ${typePlural}`, className: "space-y-0.5" }, visibleResults.map((result, index) => {
+                const componentMetadata = result.component;
+                const isActive = index === activeIndex;
+                const resource = componentMetadata.tableName
+                    ? catalog.resourcesByKey.get(componentMetadata.tableName)
+                    : undefined;
+                const optionId = getSearchOptionId(index);
+                const label = resource
+                    ? resource.disambiguation || resource.name
+                    : componentMetadata.category;
+                return (React.createElement("li", { key: componentMetadata.id, id: optionId, role: "option", "aria-selected": isActive, "aria-label": componentMetadata.title, "aria-describedby": `${optionId}-description`, "data-component-id": componentMetadata.id, onMouseMove: () => {
+                        if (!isActive) {
+                            setActive({ query: deferredQuery, index: index });
+                        }
+                    }, onClick: () => {
+                        pick(componentMetadata);
+                    }, className: `flex scroll-mt-28 cursor-pointer items-center gap-3 rounded-lg px-2.5 py-2 transition-colors duration-100 ${isActive ? "bg-indigo-50" : ""}` },
+                    React.createElement(IconBox, { icon: componentMetadata.iconProp, size: "small" }),
+                    React.createElement("div", { className: "min-w-0 flex-1" },
+                        React.createElement("div", { className: "truncate text-sm text-gray-900" },
+                            React.createElement(HighlightedText, { segments: getHighlightSegments(componentMetadata.title, outcome.tokens, outcome.typoTokens) })),
+                        React.createElement("div", { id: `${optionId}-description`, className: "truncate text-xs text-gray-500" }, componentMetadata.description)),
+                    React.createElement("span", { className: "max-sm:hidden max-w-[40%] flex-shrink-0 truncate rounded-md bg-gray-100 px-2 py-0.5 text-xs text-gray-600 sm:inline-block" }, label)));
+            })),
+            searchHasMore && (React.createElement("button", { type: "button", onClick: () => {
+                    setShown({
+                        query: deferredQuery,
+                        count: shownCount + SEARCH_RESULTS_PAGE_SIZE,
+                    });
+                }, className: "mt-3 w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 transition-colors duration-150 hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500" },
+                "Show",
+                " ",
+                Math.min(SEARCH_RESULTS_PAGE_SIZE, outcome.results.length - visibleResults.length),
+                " ",
+                "more"))));
+    };
+    const renderHome = () => {
+        const otherBuiltIns = catalog.otherBuiltInGroups.flatMap((group) => {
+            return group.components;
+        });
+        if (catalog.components.length === 0) {
+            return (React.createElement("p", { className: "px-1 py-12 text-center text-sm text-gray-500" },
+                "No ",
+                typePlural,
+                " to show."));
+        }
+        return (React.createElement("div", { className: "space-y-6" },
+            catalog.popular.length > 0 && (React.createElement("section", { "aria-labelledby": "workflow-picker-popular" },
+                React.createElement(SectionHeading, { id: "workflow-picker-popular", title: "Popular" }),
+                React.createElement("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2" }, catalog.popular.map((componentMetadata) => {
+                    return (React.createElement(ComponentTile, { key: componentMetadata.id, componentMetadata: componentMetadata, onSelect: pick }));
+                })))),
+            otherBuiltIns.length > 0 && (React.createElement("section", { "aria-labelledby": "workflow-picker-more" },
+                React.createElement(SectionHeading, { id: "workflow-picker-more", title: catalog.popular.length > 0
+                        ? `More ${typePlural}`
+                        : `${typeLabel.charAt(0).toUpperCase()}${typeLabel.slice(1)}s` }),
+                React.createElement("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2" }, otherBuiltIns.map((componentMetadata) => {
+                    return (React.createElement(ComponentTile, { key: componentMetadata.id, componentMetadata: componentMetadata, onSelect: pick }));
+                })))),
+            catalog.resources.length > 0 && (React.createElement("section", { "aria-labelledby": "workflow-picker-resources" },
+                React.createElement(SectionHeading, { id: "workflow-picker-resources", title: "OneUptime resources", description: props.componentsType === ComponentType.Trigger
+                        ? "Start this workflow when an incident, alert, monitor or any other record in this project is created, updated or deleted."
+                        : "Create, find, update or delete incidents, alerts, monitors and every other record in this project." }),
+                catalog.commonResources.length > 0 && (React.createElement("div", { className: "mb-2 grid grid-cols-1 gap-2 sm:grid-cols-2" }, catalog.commonResources.map((resource) => {
+                    return (React.createElement(ResourceTile, { key: resource.key, resource: resource, componentsType: props.componentsType, onOpen: openResource }));
+                }))),
+                React.createElement("button", Object.assign({ type: "button" }, getPickerItemProps(ALL_RESOURCES_ITEM_KEY), { "aria-label": `Browse all resources, ${catalog.resources.length}`, onClick: () => {
+                        openView({ kind: PickerViewKind.AllResources }, ALL_RESOURCES_ITEM_KEY);
+                    }, className: "flex w-full items-center gap-3 rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-left text-sm font-medium text-gray-700 transition-colors duration-150 hover:border-indigo-300 hover:bg-indigo-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500" }),
+                    React.createElement("span", { className: "min-w-0 flex-1" }, "Browse all resources"),
+                    React.createElement("span", { className: "flex-shrink-0 rounded-md bg-gray-100 px-2 py-0.5 text-xs font-normal text-gray-600" }, catalog.resources.length),
+                    React.createElement(Icon, { icon: IconProp.ChevronRight, className: "h-4 w-4 flex-shrink-0 text-gray-400" }))))));
     };
-    return (React.createElement(SideOver, { submitButtonText: "Add to Workflow", title: `Add ${props.componentsType}`, description: `Choose a ${props.componentsType.toLowerCase()} to add to your workflow.`, onClose: props.onCloseModal, submitButtonDisabled: !selectedComponentMetadata, onSubmit: () => {
-            return (selectedComponentMetadata &&
-                props.onComponentClick(selectedComponentMetadata));
-        } },
-        React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "flex flex-col h-full" },
-                React.createElement("div", { className: "mt-4 mb-5" },
-                    React.createElement("div", { className: "rounded-3xl border border-slate-200 bg-gradient-to-br from-white via-indigo-50 to-slate-50 p-3 shadow-sm" },
-                        React.createElement("div", { className: "mb-3 flex items-start justify-between gap-3" },
-                            React.createElement("div", { className: "min-w-0" },
-                                React.createElement("label", { htmlFor: "workflow-component-search", className: "block text-xs font-semibold uppercase tracking-wide text-slate-500" },
-                                    "Search ",
-                                    componentTypeLabel),
-                                React.createElement("p", { className: "mt-1 text-sm text-slate-600" }, hasSearchTerm
-                                    ? "Showing the closest matches first across title, description, and category."
-                                    : `Find the right ${props.componentsType.toLowerCase()} by name, category, or the job you need it to do.`)),
-                            React.createElement("div", { className: "inline-flex flex-shrink-0 items-center rounded-full bg-white/90 px-3 py-1 text-xs font-semibold text-slate-500 ring-1 ring-slate-200" }, hasSearchTerm
-                                ? `${componentsToShow.length} match${componentsToShow.length === 1 ? "" : "es"}`
-                                : `${totalComponentCount} available`)),
-                        React.createElement("div", { className: "relative flex items-center gap-3 rounded-2xl border border-slate-200 bg-white/90 px-3 py-3 shadow-sm transition-all duration-200 hover:border-slate-300 focus-within:border-indigo-500 focus-within:ring-4 focus-within:ring-indigo-100" },
-                            React.createElement("div", { className: "flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br from-white via-indigo-50 to-sky-100 text-indigo-600 ring-1 ring-indigo-100 shadow-sm" },
-                                React.createElement(Icon, { icon: IconProp.Search, className: "h-4 w-4" })),
-                            React.createElement("div", { className: "min-w-0 flex-1" },
-                                React.createElement("input", { id: "workflow-component-search", ref: searchInputRef, type: "text", value: search, placeholder: `Search ${componentTypeLabel} by name, description, or category`, autoComplete: "off", className: "block w-full border-0 bg-transparent p-0 text-base font-semibold text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-0", onChange: (event) => {
-                                        setSearch(event.target.value);
-                                    }, onKeyDown: (event) => {
-                                        var _a;
-                                        if (event.key === "Escape" && hasSearchTerm) {
-                                            setSearch("");
-                                            (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                                        }
-                                    } }),
-                                React.createElement("div", { className: "mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-500" },
-                                    React.createElement("span", null, hasSearchTerm
-                                        ? `Showing ${componentsToShow.length} of ${totalComponentCount} ${componentTypeLabel}.`
-                                        : "Searches title, description, and category."),
-                                    !hasSearchTerm && (React.createElement("span", { className: "max-sm:hidden items-center gap-1 rounded-full bg-slate-100 px-2 py-1 font-medium text-slate-500 sm:inline-flex" },
-                                        React.createElement("kbd", { className: "rounded bg-white px-1.5 py-0.5 text-[10px] font-semibold text-slate-500 ring-1 ring-slate-200" }, "/"),
-                                        "Quick focus")),
-                                    hasSearchTerm && (React.createElement("span", { className: "max-sm:hidden items-center gap-1 rounded-full bg-indigo-50 px-2 py-1 font-medium text-indigo-600 sm:inline-flex" },
-                                        React.createElement("kbd", { className: "rounded bg-white px-1.5 py-0.5 text-[10px] font-semibold text-indigo-600 ring-1 ring-indigo-100" }, "Esc"),
-                                        "Clear search")))),
-                            hasSearchTerm && (React.createElement("div", { className: "flex flex-shrink-0 items-center gap-2" },
-                                React.createElement("button", { type: "button", className: "inline-flex items-center gap-1 rounded-full bg-slate-900 px-3 py-1.5 text-xs font-medium text-white shadow-sm transition-colors duration-150 hover:bg-slate-700", onClick: () => {
-                                        var _a;
-                                        setSearch("");
-                                        (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                                    } },
-                                    React.createElement(Icon, { icon: IconProp.Close, className: "h-3 w-3" }),
-                                    "Clear")))),
-                        suggestedCategories.length > 0 && (React.createElement("div", { className: "mt-3 flex flex-wrap items-center gap-2" },
-                            React.createElement("span", { className: "text-xs font-medium text-slate-500" }, "Quick filters:"),
-                            suggestedCategories.map((category) => {
-                                const isActive = normalizedSearch === category.name.toLowerCase();
-                                return (React.createElement("button", { key: category.name, type: "button", "aria-pressed": isActive, onClick: () => {
-                                        var _a;
-                                        setSearch(category.name);
-                                        (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                                    }, className: `inline-flex items-center gap-1 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors duration-150 ${isActive
-                                        ? "border-indigo-200 bg-indigo-50 text-indigo-700"
-                                        : "border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:bg-slate-50"}` },
-                                    React.createElement(Icon, { icon: category.icon, className: "h-3 w-3" }),
-                                    category.name));
-                            }))))),
-                React.createElement("div", { className: "overflow-y-auto overflow-x-hidden flex-1" },
-                    !componentsToShow ||
-                        (componentsToShow.length === 0 && (React.createElement("div", { className: "mt-20 flex w-full flex-col items-center justify-center gap-4 px-4" },
-                            React.createElement("div", { className: "max-w-2xl" },
-                                React.createElement(ErrorMessage, { message: hasSearchTerm
-                                        ? "No components match every word you typed. Try fewer words. If what you need really does not exist, the Custom Code and API components can build anything you like."
-                                        : "No components to show." })),
-                            hasSearchTerm && (React.createElement("button", { type: "button", className: "inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-600 shadow-sm transition-colors duration-150 hover:bg-slate-50 hover:text-slate-800", onClick: () => {
-                                    var _a;
-                                    setSearch("");
-                                    (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                                } },
-                                React.createElement(Icon, { icon: IconProp.Close, className: "h-3.5 w-3.5" }),
-                                "Reset search"))))),
-                    categories &&
-                        categories.length > 0 &&
-                        categories.map((category, i) => {
-                            const categoryComponents = componentsByCategory[category.name] || [];
-                            if (categoryComponents.length === 0) {
-                                return React.createElement("div", { key: i });
-                            }
-                            return (React.createElement("div", { key: i, className: "mb-6" },
-                                React.createElement("div", { className: "flex items-center gap-2 mb-3 px-1" },
-                                    React.createElement("div", { className: "flex items-center justify-center rounded-md", style: {
-                                            width: "28px",
-                                            height: "28px",
-                                            backgroundColor: "var(--ou-surface-tertiary, #f1f5f9)",
-                                        } },
-                                        React.createElement(Icon, { icon: category.icon, className: "h-4 w-4 text-gray-500" })),
-                                    React.createElement("div", null,
-                                        React.createElement("h4", { className: "text-sm font-semibold text-gray-700 leading-tight" }, category.name),
-                                        React.createElement("p", { className: "text-xs text-gray-400 leading-tight" }, category.description))),
-                                React.createElement("div", { className: "grid grid-cols-1 gap-2" }, categoryComponents.map((componentMetadata) => {
-                                    const isSelected = selectedComponentMetadata !== undefined &&
-                                        selectedComponentMetadata.id ===
-                                            componentMetadata.id;
-                                    return (React.createElement("button", { key: componentMetadata.id, type: "button", "aria-label": componentMetadata.title, "aria-describedby": `workflow-component-description-${componentMetadata.id}`, "aria-pressed": isSelected, onClick: () => {
-                                            setSelectedComponentId(componentMetadata.id);
-                                        }, className: "w-full cursor-pointer text-left transition-all duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600", style: {
-                                            padding: "0.75rem",
-                                            borderRadius: "10px",
-                                            border: isSelected
-                                                ? "2px solid #6366f1"
-                                                : "1px solid var(--ou-border-default, #e2e8f0)",
-                                            backgroundColor: isSelected
-                                                ? "var(--ou-accent-soft, #eef2ff)"
-                                                : "var(--ou-surface-primary, #ffffff)",
-                                            display: "flex",
-                                            alignItems: "flex-start",
-                                            gap: "0.75rem",
-                                            boxShadow: isSelected
-                                                ? "0 0 0 3px rgba(99, 102, 241, 0.1)"
-                                                : "var(--ou-card-shadow, 0 1px 2px 0 rgba(0, 0, 0, 0.03))",
-                                        } },
-                                        React.createElement("div", { style: {
-                                                width: "36px",
-                                                height: "36px",
-                                                borderRadius: "8px",
-                                                backgroundColor: isSelected
-                                                    ? "#6366f1"
-                                                    : "var(--ou-surface-tertiary, #f1f5f9)",
-                                                display: "flex",
-                                                alignItems: "center",
-                                                justifyContent: "center",
-                                                flexShrink: 0,
-                                                transition: "all 0.15s ease",
-                                            } },
-                                            React.createElement(Icon, { icon: componentMetadata.iconProp, style: {
-                                                    color: isSelected
-                                                        ? "#ffffff"
-                                                        : "var(--ou-text-muted, #64748b)",
-                                                    width: "1rem",
-                                                    height: "1rem",
-                                                } })),
-                                        React.createElement("div", { style: { minWidth: 0, flex: 1 } },
-                                            React.createElement("div", { className: "flex items-start justify-between gap-2" },
-                                                React.createElement("p", { style: {
-                                                        fontSize: "0.8125rem",
-                                                        fontWeight: 600,
-                                                        color: isSelected
-                                                            ? "var(--ou-accent-text, #4338ca)"
-                                                            : "var(--ou-text-primary, #1e293b)",
-                                                        margin: 0,
-                                                        lineHeight: "1.25rem",
-                                                    } }, renderHighlightedText(componentMetadata.title, isSelected
-                                                    ? "rounded bg-white/80 px-0.5 text-current"
-                                                    : "rounded bg-amber-100 px-0.5 text-current")),
-                                                hasSearchTerm && (React.createElement("span", { className: `mt-0.5 inline-flex flex-shrink-0 rounded-full px-2 py-0.5 text-[11px] font-medium ${isSelected
-                                                        ? "bg-white/80 text-indigo-700"
-                                                        : "bg-slate-100 text-slate-500"}` }, renderHighlightedText(componentMetadata.category, isSelected
-                                                    ? "rounded bg-indigo-100 px-0.5 text-current"
-                                                    : "rounded bg-white px-0.5 text-current")))),
-                                            React.createElement("p", { id: `workflow-component-description-${componentMetadata.id}`, style: {
-                                                    fontSize: "0.75rem",
-                                                    color: isSelected
-                                                        ? "var(--ou-link, #6366f1)"
-                                                        : "var(--ou-text-subtle, #94a3b8)",
-                                                    margin: 0,
-                                                    marginTop: "2px",
-                                                    lineHeight: "1rem",
-                                                    display: "-webkit-box",
-                                                    WebkitLineClamp: 2,
-                                                    WebkitBoxOrient: "vertical",
-                                                    overflow: "hidden",
-                                                } }, renderHighlightedText(componentMetadata.description, isSelected
-                                                ? "rounded bg-white/80 px-0.5 text-current"
-                                                : "rounded bg-amber-100 px-0.5 text-current"))),
-                                        isSelected && (React.createElement("div", { style: {
-                                                width: "20px",
-                                                height: "20px",
-                                                borderRadius: "50%",
-                                                backgroundColor: "#6366f1",
-                                                display: "flex",
-                                                alignItems: "center",
-                                                justifyContent: "center",
-                                                flexShrink: 0,
-                                                marginTop: "2px",
-                                            } },
-                                            React.createElement(Icon, { icon: IconProp.Check, style: {
-                                                    color: "#ffffff",
-                                                    width: "0.625rem",
-                                                    height: "0.625rem",
-                                                } })))));
-                                }))));
-                        }))))));
+    const renderResource = (resource) => {
+        return (React.createElement("div", null,
+            React.createElement(BackButton, { label: "Back", onBack: () => {
+                    goBack(false);
+                } }),
+            React.createElement("div", { className: "mt-3 flex items-start gap-3" },
+                React.createElement(IconBox, { icon: resource.icon, size: "large" }),
+                React.createElement("div", { className: "min-w-0" },
+                    React.createElement("h3", { className: "text-base font-semibold text-gray-900" }, resource.name),
+                    resource.disambiguation && (React.createElement("p", { className: "text-xs text-gray-500" }, resource.disambiguation)),
+                    resource.description && (React.createElement("p", { className: "mt-0.5 text-sm text-gray-500" }, resource.description)))),
+            React.createElement("div", { role: "group", "aria-label": `${resource.name} ${typePlural}`, className: "mt-4 grid grid-cols-1 gap-2" }, resource.components.map((componentMetadata) => {
+                return (React.createElement(ComponentTile, { key: componentMetadata.id, componentMetadata: componentMetadata, onSelect: pick }));
+            }))));
+    };
+    const renderAllResources = () => {
+        return (React.createElement("div", null,
+            React.createElement(BackButton, { label: "Back", onBack: () => {
+                    goBack(false);
+                } }),
+            React.createElement("h3", { className: "mt-3 text-base font-semibold text-gray-900" }, "All resources"),
+            React.createElement("p", { className: "mt-0.5 text-sm text-gray-500" },
+                catalog.resources.length,
+                " resources, A to Z. Search above to find one by name."),
+            React.createElement("div", { role: "group", "aria-label": "All resources", className: "mt-3 divide-y divide-gray-100 overflow-hidden rounded-lg border border-gray-200" }, catalog.resources.map((resource) => {
+                return (React.createElement(ResourceRow, { key: resource.key, resource: resource, componentsType: props.componentsType, onOpen: openResource }));
+            }))));
+    };
+    let body;
+    if (isSearching) {
+        body = renderSearchResults();
+    }
+    else if (view === PickerViewKind.Resource && openedResource) {
+        body = renderResource(openedResource);
+    }
+    else if (view === PickerViewKind.AllResources) {
+        body = renderAllResources();
+    }
+    else {
+        body = renderHome();
+    }
+    return (React.createElement(SideOver, { title: `Add ${typeLabel.charAt(0).toUpperCase()}${typeLabel.slice(1)}`, description: `Click a ${typeLabel} to add it to your workflow.`, onClose: props.onCloseModal, leftFooterElement: React.createElement("div", { className: "max-md:hidden items-center gap-4 text-xs text-gray-500 md:flex" },
+            React.createElement("span", { className: "inline-flex items-center gap-1.5" },
+                React.createElement(KeyboardShortcut, { keys: [KeyboardKey.ArrowUp], size: KeyboardShortcutSize.ExtraSmall }),
+                React.createElement(KeyboardShortcut, { keys: [KeyboardKey.ArrowDown], size: KeyboardShortcutSize.ExtraSmall }),
+                "to move"),
+            React.createElement("span", { className: "inline-flex items-center gap-1.5" },
+                React.createElement(KeyboardShortcut, { keys: [KeyboardKey.Enter], size: KeyboardShortcutSize.ExtraSmall }),
+                "to add"),
+            React.createElement("span", { className: "inline-flex items-center gap-1.5" },
+                React.createElement(KeyboardShortcut, { keys: ["/"], size: KeyboardShortcutSize.ExtraSmall }),
+                "to search")) },
+        React.createElement("div", { ref: rootRef, "data-testid": "workflow-component-picker" },
+            React.createElement("div", { className: "sticky top-0 z-10 -mx-5 border-b border-gray-100 bg-white px-5 pb-3 pt-1 sm:pt-5" },
+                React.createElement("div", { className: "relative" },
+                    React.createElement("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3" },
+                        React.createElement(Icon, { icon: IconProp.Search, className: "h-4 w-4 text-gray-400" })),
+                    React.createElement("input", { ref: searchInputRef, id: SEARCH_INPUT_ID, type: "text", role: "combobox", "aria-label": `Search ${typePlural}`, "aria-autocomplete": "list", "aria-expanded": isSearching && visibleResults.length > 0, "aria-controls": isSearching ? SEARCH_RESULTS_ID : undefined, "aria-activedescendant": isSearching && visibleResults.length > 0
+                            ? getSearchOptionId(activeIndex)
+                            : undefined, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, value: query, placeholder: props.componentsType === ComponentType.Trigger
+                            ? "Search triggers, e.g. incident created"
+                            : "Search components, e.g. create incident", onChange: (event) => {
+                            setQuery(event.target.value);
+                        }, onKeyDown: onSearchKeyDown, className: "block w-full rounded-lg border border-gray-300 bg-white py-2.5 pl-9 pr-10 text-sm text-gray-900 placeholder-gray-400 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500" }),
+                    query.length > 0 && (React.createElement("div", { className: "absolute inset-y-0 right-0 flex items-center pr-1.5" },
+                        React.createElement("button", { type: "button", "aria-label": "Clear search", onClick: clearSearch, className: "flex h-7 w-7 items-center justify-center rounded-md text-gray-400 transition-colors duration-150 hover:bg-gray-100 hover:text-gray-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500" },
+                            React.createElement(Icon, { icon: IconProp.Close, className: "h-4 w-4" }))))),
+                React.createElement("p", { role: "status", "aria-live": "polite", className: `text-xs text-gray-500 ${statusText ? "mt-2" : ""}` }, statusText)),
+            React.createElement("div", { "data-testid": "workflow-component-picker-body", "aria-busy": isCatchingUp, className: `pt-4 transition-opacity duration-150 ${isCatchingUp ? "opacity-60" : ""}`, onKeyDown: onBrowseKeyDown }, body))));
 };
 export default ComponentsModal;
 //# sourceMappingURL=ComponentsModal.js.map