@oneuptime/common 14.0.13 → 14.0.14

package/build/dist/Types/Telemetry/ScrubRule.js

@@ -0,0 +1,180 @@
+import LogScrubAction from "../Log/LogScrubAction";
+import LogScrubField from "../Log/LogScrubField";
+import LogScrubPatternType from "../Log/LogScrubPatternType";
+import TraceScrubAction from "../Trace/TraceScrubAction";
+import TraceScrubField from "../Trace/TraceScrubField";
+import TraceScrubPatternType from "../Trace/TraceScrubPatternType";
+/*
+ * WHAT A LOG OR TRACE SCRUB RULE STARTS WITH, AND WHAT MAKES ONE SCRUB
+ * NOTHING.
+ *
+ * Shared by the models (their column defaults), the server's save-time check
+ * (Server/Utils/ScrubRuleValidation.ts), the ingest engines
+ * (App/FeatureSet/Telemetry/Services/LogScrubRuleService.ts and
+ * TraceScrubRuleService.ts) and the dashboard's create forms, so the four can
+ * never disagree on what a rule does.
+ *
+ * The bug this file is the fix for: a "Custom Regex" rule could be saved with
+ * an empty pattern, or one that does not compile. Ingest skips such a rule
+ * (it has nothing to match with), so the rule looked active in the rules
+ * table while the personal data it was made for was stored in the clear. A
+ * rule is now refused unless ingest can actually use it, and the rules table
+ * flags the ones saved before that.
+ */
+// The pattern type whose matches are found with the rule's own regex.
+export const SCRUB_RULE_CUSTOM_PATTERN_TYPE = LogScrubPatternType.Custom;
+/*
+ * The pattern type that scrubs the whole value of an attribute whose key
+ * looks sensitive (password, token, ...). It reads attribute keys, so a
+ * rule's fields-to-scrub choice does not apply to it: logs scrub attributes,
+ * spans their attributes and event attributes.
+ */
+export const SCRUB_RULE_SENSITIVE_KEYS_PATTERN_TYPE = LogScrubPatternType.SensitiveKeys;
+/*
+ * The flags ingest compiles a custom pattern with: every match in the text,
+ * case-sensitive.
+ */
+export const SCRUB_RULE_REGEX_FLAGS = "g";
+export const LOG_SCRUB_PATTERN_TYPES = Object.values(LogScrubPatternType);
+export const TRACE_SCRUB_PATTERN_TYPES = Object.values(TraceScrubPatternType);
+export const LOG_SCRUB_FIELDS = Object.values(LogScrubField);
+export const TRACE_SCRUB_FIELDS = Object.values(TraceScrubField);
+/*
+ * What a new rule does when its creator leaves these alone: replace every
+ * match with [REDACTED], wherever in the record it is, from the moment it is
+ * saved. The models' column defaults (TableColumn and the database's own),
+ * the API schema and the dashboard form all read them from here.
+ */
+export const LOG_SCRUB_RULE_DEFAULTS = {
+    scrubAction: LogScrubAction.Redact,
+    fieldsToScrub: LogScrubField.Both,
+    isEnabled: true,
+};
+export const TRACE_SCRUB_RULE_DEFAULTS = {
+    scrubAction: TraceScrubAction.Redact,
+    fieldsToScrub: TraceScrubField.All,
+    isEnabled: true,
+};
+export var ScrubRuleCustomRegexProblem;
+(function (ScrubRuleCustomRegexProblem) {
+    // No pattern at all, or only spaces.
+    ScrubRuleCustomRegexProblem["Missing"] = "Missing";
+    // Not a regular expression the engine can compile.
+    ScrubRuleCustomRegexProblem["Invalid"] = "Invalid";
+    /*
+     * Compiles, but matches empty text - "\d*", "(secret)?" - so a global
+     * replace puts the rule's replacement between every character of every
+     * record it reads.
+     */
+    ScrubRuleCustomRegexProblem["MatchesEmptyText"] = "MatchesEmptyText";
+})(ScrubRuleCustomRegexProblem || (ScrubRuleCustomRegexProblem = {}));
+// "Invalid regular expression: /(/g: Unterminated group" -> its last part.
+const REGEX_SYNTAX_ERROR_PREFIX = /^Invalid regular expression: \/[\s\S]*\/[a-z]*: /;
+/**
+ * What the regular expression engine says is wrong with a pattern, without
+ * the pattern repeated in front of it: "Unterminated group".
+ */
+export function getRegexSyntaxErrorReason(error) {
+    const message = error instanceof Error ? error.message : String(error || "");
+    return message.replace(REGEX_SYNTAX_ERROR_PREFIX, "").trim() || message;
+}
+/**
+ * A custom pattern compiled the way ingest compiles it - ingest calls this -
+ * or null when it cannot be: empty, or not a regular expression. A rule
+ * whose pattern compiles to null scrubs nothing.
+ */
+export function compileScrubRuleCustomRegex(customRegex) {
+    if (typeof customRegex !== "string" || customRegex.length === 0) {
+        return null;
+    }
+    try {
+        return new RegExp(customRegex, SCRUB_RULE_REGEX_FLAGS);
+    }
+    catch (_a) {
+        return null;
+    }
+}
+/**
+ * What stops a custom pattern from being saved, or null when it is one
+ * ingest can scrub with. Stricter than compileScrubRuleCustomRegex, which
+ * says what ingest does with a stored pattern: only spaces count as no
+ * pattern, and one that matches empty text is a mistake to refuse.
+ */
+export function checkScrubRuleCustomRegex(customRegex) {
+    if (typeof customRegex !== "string" || customRegex.trim().length === 0) {
+        return { problem: ScrubRuleCustomRegexProblem.Missing };
+    }
+    let regex;
+    try {
+        regex = new RegExp(customRegex, SCRUB_RULE_REGEX_FLAGS);
+    }
+    catch (error) {
+        return {
+            problem: ScrubRuleCustomRegexProblem.Invalid,
+            reason: getRegexSyntaxErrorReason(error),
+        };
+    }
+    if (matchesEmptyText(regex)) {
+        return { problem: ScrubRuleCustomRegexProblem.MatchesEmptyText };
+    }
+    return null;
+}
+/*
+ * Text that holds the characters scrubbed values sit among - letters,
+ * digits, spaces, separators, an address, a key and its value - so a
+ * pattern that matches nothing but a position somewhere in a record ("\b",
+ * "(?=@)", "(?<=:)\s*", "x*(?=y)") is caught as surely as one that matches
+ * empty text on its own ("\d*").
+ */
+const EMPTY_MATCH_PROBES = [
+    "",
+    "a",
+    "token=abc123; user@example.com",
+    "key: value, x y z",
+    "Aa1 -_.,:;=/\\@#$%&*+?!()[]{}<>'\"`|^~\t\n",
+];
+// Whether a compiled pattern ever matches no text at all.
+function matchesEmptyText(regex) {
+    // matchAll takes a global pattern only.
+    const global = regex.global
+        ? regex
+        : new RegExp(regex.source, `${regex.flags}g`);
+    for (const probe of EMPTY_MATCH_PROBES) {
+        // matchAll steps past an empty match, so this always ends.
+        for (const match of probe.matchAll(global)) {
+            if (match[0] === "") {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+/**
+ * Whether a stored rule scrubs nothing at all: ingest skips a rule of a
+ * pattern type it does not know and a custom rule whose pattern is empty or
+ * does not compile, and a rule whose fields-to-scrub it does not know
+ * matches but scrubs none of the record's fields (a sensitive-keys rule
+ * aside: it always scrubs attributes). The rules tables flag such rules,
+ * saved before the server refused them, so nobody takes them for protection.
+ */
+export function doesScrubRuleScrubNothing(data) {
+    if (typeof data.patternType !== "string" ||
+        !data.knownPatternTypes.includes(data.patternType)) {
+        return true;
+    }
+    /*
+     * Left empty, ingest scrubs every field; a value it does not know, none of
+     * them.
+     */
+    if (data.patternType !== SCRUB_RULE_SENSITIVE_KEYS_PATTERN_TYPE &&
+        typeof data.fieldsToScrub === "string" &&
+        data.fieldsToScrub.length > 0 &&
+        !data.knownFieldsToScrub.includes(data.fieldsToScrub)) {
+        return true;
+    }
+    if (data.patternType !== SCRUB_RULE_CUSTOM_PATTERN_TYPE) {
+        return false;
+    }
+    return compileScrubRuleCustomRegex(data.customRegex) === null;
+}
+//# sourceMappingURL=ScrubRule.js.map

package/build/dist/Types/Telemetry/ScrubRule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrubRule.js","sourceRoot":"","sources":["../../../../Types/Telemetry/ScrubRule.ts"],"names":[],"mappings":"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"}

package/build/dist/UI/Components/AdvancedPageSection/AdvancedPageSection.js

@@ -1,14 +1,16 @@
-import CollapsibleSection from "../CollapsibleSection/CollapsibleSection";
-import { ADVANCED_FORM_SECTION_TITLE } from "../Forms/Utils/AdvancedFormSection";
-import useTranslator from "../../Utils/UseTranslator";
+import FoldedSection from "../FoldedSection/FoldedSection";
+import { MORE_SECTION_ICON, MORE_SETTINGS_SECTION_TITLE, } from "../FoldedSection/FoldedSectionTitles";
+import { translationKey } from "../../Utils/TranslateTemplate";
 import React from "react";
 export const ADVANCED_PAGE_SECTION_TEST_ID = "advanced-page-section";
+const CONFIGURED = translationKey("Configured");
 const AdvancedPageSection = (props) => {
-    const translator = useTranslator();
+    const items = props.items || [];
+    const hasSetItem = items.some((item) => {
+        return item.isSet;
+    });
     return (React.createElement("div", { className: "mb-5", "data-testid": props.dataTestId || ADVANCED_PAGE_SECTION_TEST_ID },
-        React.createElement(CollapsibleSection, { title: ADVANCED_FORM_SECTION_TITLE, description: props.description, collapsedDescription: props.description, variant: "card", defaultCollapsed: true, badge: props.isConfigured
-                ? translator.translateText("Configured")
-                : undefined },
+        React.createElement(FoldedSection, { title: MORE_SETTINGS_SECTION_TITLE, icon: MORE_SECTION_ICON, description: props.description, items: items, summary: props.summary || (items.length === 0 ? props.description : undefined), badge: props.isConfigured && !hasSetItem ? CONFIGURED : undefined, defaultCollapsed: true, isElevated: true },
             React.createElement("div", { className: "space-y-5 [&_[data-testid=card]]:mb-0" }, props.children))));
 };
 export default AdvancedPageSection;

package/build/dist/UI/Components/AdvancedPageSection/AdvancedPageSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdvancedPageSection.js","sourceRoot":"","sources":["../../../../../UI/Components/AdvancedPageSection/AdvancedPageSection.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,MAAM,0CAA0C,CAAC;AAC1E,OAAO,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAC;AAEjF,OAAO,aAAa,MAAM,2BAA2B,CAAC;AACtD,OAAO,KAA0C,MAAM,OAAO,CAAC;AAwC/D,MAAM,CAAC,MAAM,6BAA6B,GAAW,uBAAuB,CAAC;AAE7E,MAAM,mBAAmB,GAAsC,CAC7D,KAAqB,EACP,EAAE;IAChB,MAAM,UAAU,GAAe,aAAa,EAAE,CAAC;IAE/C,OAAO,CACL,6BACE,SAAS,EAAC,MAAM,iBACH,KAAK,CAAC,UAAU,IAAI,6BAA6B;QAE9D,oBAAC,kBAAkB,IACjB,KAAK,EAAE,2BAA2B,EAClC,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,oBAAoB,EAAE,KAAK,CAAC,WAAW,EACvC,OAAO,EAAC,MAAM,EACd,gBAAgB,EAAE,IAAI,EACtB,KAAK,EACH,KAAK,CAAC,YAAY;gBAChB,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAC;gBACxC,CAAC,CAAC,SAAS;YAQf,6BAAK,SAAS,EAAC,uCAAuC,IACnD,KAAK,CAAC,QAAQ,CACX,CACa,CACjB,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"AdvancedPageSection.js","sourceRoot":"","sources":["../../../../../UI/Components/AdvancedPageSection/AdvancedPageSection.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,gCAAgC,CAAC;AAE3D,OAAO,EACL,iBAAiB,EACjB,2BAA2B,GAC5B,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,KAA0C,MAAM,OAAO,CAAC;AA6D/D,MAAM,CAAC,MAAM,6BAA6B,GAAW,uBAAuB,CAAC;AAE7E,MAAM,UAAU,GAAW,cAAc,CAAC,YAAY,CAAC,CAAC;AAExD,MAAM,mBAAmB,GAAsC,CAC7D,KAAqB,EACP,EAAE;IAChB,MAAM,KAAK,GAA6B,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;IAE1D,MAAM,UAAU,GAAY,KAAK,CAAC,IAAI,CAAC,CAAC,IAAuB,EAAE,EAAE;QACjE,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,6BACE,SAAS,EAAC,MAAM,iBACH,KAAK,CAAC,UAAU,IAAI,6BAA6B;QAE9D,oBAAC,aAAa,IACZ,KAAK,EAAE,2BAA2B,EAClC,IAAI,EAAE,iBAAiB,EACvB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,KAAK,EAAE,KAAK,EACZ,OAAO,EACL,KAAK,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,EAEvE,KAAK,EAAE,KAAK,CAAC,YAAY,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EACjE,gBAAgB,EAAE,IAAI,EACtB,UAAU,EAAE,IAAI;YAOhB,6BAAK,SAAS,EAAC,uCAAuC,IACnD,KAAK,CAAC,QAAQ,CACX,CACQ,CACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/build/dist/UI/Components/Card/Card.js

@@ -1,16 +1,67 @@
 import Button from "../Button/Button";
 import useTranslateValue from "../../Utils/Translation";
 import React from "react";
+/*
+ * Every layout, for the tests that hold each of them to the rule above: a
+ * Record, so a layout added to the type cannot be left out of the list.
+ */
+const CARD_HEADER_LAYOUT_SET = {
+    default: true,
+    stacked: true,
+};
+export const CARD_HEADER_LAYOUTS = Object.keys(CARD_HEADER_LAYOUT_SET);
+/*
+ * The header's class names, exported so the layout tests and the guard
+ * (Common/Tests/UI/Components/CardHeaderActionsGuard.test.tsx) read the same
+ * strings Card draws with.
+ */
+/*
+ * The actions: one row that wraps, at the right edge of the header. ml-auto
+ * keeps the row at the right edge when it has a line to itself, and
+ * justify-end keeps each of its own lines there when it wraps.
+ */
+export const CARD_HEADER_ACTIONS_CLASS_NAME = "ml-auto flex max-w-full flex-wrap items-center justify-end gap-x-3 gap-y-2";
+/*
+ * The title's share of the line it shares with the actions.
+ *
+ * On a phone the title keeps its whole width: the actions stay beside it
+ * while the two fit, and move to the next line, at the right edge, when they
+ * do not - the title is never broken to make room for them.
+ *
+ * In the stacked header from md up - the one-third column of an overview
+ * page, about 230px of header at 1280px - the title grows into whatever the
+ * actions leave, and keeps the line with them as long as they leave it at
+ * least half of it: "Affected Resources" breaks over two lines beside Edit
+ * rather than dropping Edit onto a line of its own. Actions wider than that
+ * - a probe picker and Test Monitor, or Assign and Refresh in that narrow
+ * column - move to the next line instead, so a title is never squeezed
+ * beside a row of controls.
+ *
+ * In the default header from md up the title and the description fill what
+ * the actions leave, on one line that does not wrap.
+ */
+export const CARD_HEADER_TITLE_BLOCK_CLASS_NAME = "min-w-0 md:flex-1";
+export const CARD_HEADER_STACKED_TITLE_BLOCK_CLASS_NAME = "min-w-0 md:grow md:basis-1/2";
+/*
+ * Each action's own box. Button carries a left margin meant for a dialog's
+ * footer (md:ml-3 on a normal button, ml-1 on an outline one), which made
+ * the gaps between a card's buttons uneven - 18px between two normal
+ * buttons, 10px before the ⋯. The row's gap spaces them, so that margin is
+ * cleared on the action itself (a <button>, or the one element a button
+ * sits in: a disabled button's tooltip span, the ⋯ menu's wrapper) and never
+ * on the buttons inside a control, such as a picker or a dialog it opens.
+ */
+export const CARD_HEADER_ACTION_CLASS_NAME = "flex items-center [&>button]:ml-0 [&>button]:md:ml-0 [&>*>button]:ml-0 [&>*>button]:md:ml-0";
 const Card = (props) => {
     const { translateValue } = useTranslateValue();
     const hasButtons = Boolean(props.buttons && props.buttons.length > 0);
-    const noRightElementsOrButtons = !props.rightElement && !hasButtons;
+    const hasActions = Boolean(props.rightElement) || hasButtons;
     const isStacked = props.headerLayout === "stacked";
     const translatedTitle = translateValue(props.title);
     const translatedDescription = translateValue(props.description);
     const renderButtons = () => {
         return (props.buttons || []).map((button, i) => {
-            return (React.createElement("div", { key: i, className: "flex items-center" },
+            return (React.createElement("div", { key: i, className: CARD_HEADER_ACTION_CLASS_NAME },
                 React.isValidElement(button) ? button : null,
                 React.isValidElement(button) ? null : (React.createElement(Button, { key: i, title: button.title, buttonStyle: button.buttonStyle, buttonSize: button.buttonSize, className: button.className, onClick: () => {
                         if (button.onClick) {
@@ -19,50 +70,45 @@ const Card = (props) => {
                     }, disabled: button.disabled, tooltip: button.tooltip, icon: button.icon, shortcutKey: button.shortcutKey, dataTestId: "card-button", isLoading: button.isLoading }))));
         });
     };
-    const titleElement = translatedTitle && (React.createElement("h2", { "data-testid": "card-details-heading", id: "card-details-heading", className: "text-lg font-semibold leading-6 text-gray-900" }, translatedTitle));
+    const titleElement = translatedTitle && (React.createElement("h2", { "data-testid": "card-details-heading", id: "card-details-heading", className: "text-lg font-semibold leading-6 text-gray-900 text-balance break-words" }, translatedTitle));
     const descriptionElement = translatedDescription && (React.createElement("p", { "data-testid": "card-description", className: "mt-1.5 text-sm text-gray-500 w-full max-md:hidden md:block leading-relaxed" }, translatedDescription));
-    const titleAndDescription = (React.createElement(React.Fragment, null,
-        titleElement,
-        descriptionElement));
+    const actionsElement = hasActions ? (React.createElement("div", { "data-testid": "card-header-actions", className: `${CARD_HEADER_ACTIONS_CLASS_NAME}${isStacked ? "" : " md:flex-shrink-0"}` },
+        props.rightElement && (React.createElement("div", { className: "flex items-center" }, props.rightElement)),
+        hasButtons && renderButtons())) : null;
     /*
-     * Button carries a left margin for the side-by-side header (ml-1 or
-     * md:ml-3, depending on its style). On a row of its own that margin only
-     * pushes the first button off the title's left edge, and the gap already
-     * spaces the rest, so it is cleared here.
+     * The title and the actions share one line that wraps: side by side while
+     * the actions leave the title its share, the actions on the next line - at
+     * the right edge - when they do not (see the title block's class above).
+     * On a phone the two are centred on each other; from md up their tops are
+     * level, as in the default header. The description is not on that line,
+     * so its length cannot push the actions off it: it runs under both, across
+     * the card's whole width.
      */
     const stackedHeader = (React.createElement("div", { "data-testid": "card-header", "data-header-layout": "stacked" },
-        React.createElement("div", { className: "w-full min-w-0" }, titleAndDescription),
-        (props.rightElement || hasButtons) && (React.createElement("div", { "data-testid": "card-header-actions", className: "mt-3 flex flex-wrap items-center gap-2 [&_button]:ml-0 [&_button]:md:ml-0" },
-            props.rightElement && (React.createElement("div", { className: "flex items-center" }, props.rightElement)),
-            hasButtons && renderButtons()))));
+        (titleElement || actionsElement) && (React.createElement("div", { "data-testid": "card-header-title-row", className: "flex flex-wrap items-center gap-x-4 gap-y-2 md:items-start" },
+            titleElement && (React.createElement("div", { "data-testid": "card-header-title-block", className: actionsElement
+                    ? CARD_HEADER_STACKED_TITLE_BLOCK_CLASS_NAME
+                    : "w-full min-w-0" }, titleElement)),
+            actionsElement)),
+        descriptionElement));
     /*
-     * The title and what is on the right share one row that wraps: beside
-     * each other while both fit, and the right element under the title, at
-     * its left edge, when they do not (a long badge on a phone). The title is
-     * never squeezed into two lines to make room. The description is not part
-     * of that row, so its length cannot push the right element off it.
+     * From md up the title and the description are one block on the left, and
+     * the actions sit beside it at the right edge, their top level with the
+     * title's. Below md the description is hidden, so the title and the
+     * actions share a line the way the stacked header's do: centred on each
+     * other while they fit, the actions on the next line, at the right edge,
+     * when they do not.
      */
-    const inlineHeader = (React.createElement("div", { "data-testid": "card-header", "data-header-layout": "inline" },
-        React.createElement("div", { className: "flex flex-wrap items-start justify-between gap-x-4 gap-y-2" },
+    const defaultHeader = (React.createElement("div", { "data-testid": "card-header", "data-header-layout": "default", className: "flex flex-wrap items-center gap-x-4 gap-y-2 md:flex-nowrap md:items-start" },
+        React.createElement("div", { "data-testid": "card-header-title-block", className: hasActions ? CARD_HEADER_TITLE_BLOCK_CLASS_NAME : "w-full min-w-0" },
             titleElement,
-            (props.rightElement || hasButtons) && (React.createElement("div", { "data-testid": "card-header-actions", className: "flex flex-wrap items-center gap-2 [&_button]:ml-0 [&_button]:md:ml-0" },
-                props.rightElement && (React.createElement("div", { className: "flex items-center" }, props.rightElement)),
-                hasButtons && renderButtons()))),
-        descriptionElement));
-    const defaultHeader = (React.createElement("div", { className: "flex flex-col md:flex-row md:justify-between md:items-start" },
-        React.createElement("div", { className: `${noRightElementsOrButtons ? "w-full" : "flex-1 min-w-0"}` }, titleAndDescription),
-        (props.rightElement || hasButtons) && (React.createElement("div", { className: "flex flex-col md:flex-row md:items-center md:w-fit mt-4 md:mt-0 md:ml-4 gap-2 md:gap-0 flex-shrink-0 items-center" },
-            props.rightElement && (React.createElement("div", { className: "mb-2 md:mb-0 md:mr-3" }, props.rightElement)),
-            hasButtons && (React.createElement("div", { className: "flex flex-wrap items-center gap-1.5" }, renderButtons()))))));
+            descriptionElement),
+        actionsElement));
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { "data-testid": "card", className: `mb-5 ${props.className || ""}` },
             React.createElement("div", { className: "bg-white border border-gray-200 rounded-xl shadow-sm overflow-visible" },
                 React.createElement("div", { className: "py-6 px-5 md:px-6" },
-                    isStacked
-                        ? stackedHeader
-                        : props.headerLayout === "inline"
-                            ? inlineHeader
-                            : defaultHeader,
+                    isStacked ? stackedHeader : defaultHeader,
                     props.children && (React.createElement("div", { className: props.bodyClassName || "mt-4" }, props.children)))))));
 };
 export default Card;

package/build/dist/UI/Components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../../UI/Components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAuC,MAAM,kBAAkB,CAAC;AAGvE,OAAO,iBAAiB,MAAM,yBAAyB,CAAC;AACxD,OAAO,KAA0C,MAAM,OAAO,CAAC;AAkD/D,MAAM,IAAI,GAAsC,CAC9C,KAAqB,EACP,EAAE;IAChB,MAAM,EAAE,cAAc,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAC/C,MAAM,UAAU,GAAY,OAAO,CACjC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAC1C,CAAC;IACF,MAAM,wBAAwB,GAAY,CAAC,KAAK,CAAC,YAAY,IAAI,CAAC,UAAU,CAAC;IAC7E,MAAM,SAAS,GAAY,KAAK,CAAC,YAAY,KAAK,SAAS,CAAC;IAC5D,MAAM,eAAe,GAAsC,cAAc,CACvE,KAAK,CAAC,KAAK,CACZ,CAAC;IACF,MAAM,qBAAqB,GACzB,cAAc,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IAEpC,MAAM,aAAa,GAA8B,GAAwB,EAAE;QACzE,OAAO,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,GAAG,CAC9B,CAAC,MAAuC,EAAE,CAAS,EAAE,EAAE;YACrD,OAAO,CACL,6BAAK,GAAG,EAAE,CAAC,EAAE,SAAS,EAAC,mBAAmB;gBACvC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;gBAC5C,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACrC,oBAAC,MAAM,IACL,GAAG,EAAE,CAAC,EACN,KAAK,EAAG,MAA2B,CAAC,KAAK,EACzC,WAAW,EAAG,MAA2B,CAAC,WAAW,EACrD,UAAU,EAAG,MAA2B,CAAC,UAAU,EACnD,SAAS,EAAG,MAA2B,CAAC,SAAS,EACjD,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAK,MAA2B,CAAC,OAAO,EAAE,CAAC;4BACxC,MAA2B,CAAC,OAAO,EAAE,CAAC;wBACzC,CAAC;oBACH,CAAC,EACD,QAAQ,EAAG,MAA2B,CAAC,QAAQ,EAC/C,OAAO,EAAG,MAA2B,CAAC,OAAO,EAC7C,IAAI,EAAG,MAA2B,CAAC,IAAI,EACvC,WAAW,EAAG,MAA2B,CAAC,WAAW,EACrD,UAAU,EAAC,aAAa,EACxB,SAAS,EAAG,MAA2B,CAAC,SAAS,GACjD,CACH,CACG,CACP,CAAC;QACJ,CAAC,CACF,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,YAAY,GAChB,eAAe,IAAI,CACjB,2CACc,sBAAsB,EAClC,EAAE,EAAC,sBAAsB,EACzB,SAAS,EAAC,+CAA+C,IAExD,eAAe,CACb,CACN,CAAC;IAEJ,MAAM,kBAAkB,GACtB,qBAAqB,IAAI,CACvB,0CACc,kBAAkB,EAC9B,SAAS,EAAC,4EAA4E,IAErF,qBAAqB,CACpB,CACL,CAAC;IAEJ,MAAM,mBAAmB,GAAiB,CACxC,oBAAC,KAAK,CAAC,QAAQ;QACZ,YAAY;QACZ,kBAAkB,CACJ,CAClB,CAAC;IAEF;;;;;OAKG;IACH,MAAM,aAAa,GAAiB,CAClC,4CAAiB,aAAa,wBAAoB,SAAS;QACzD,6BAAK,SAAS,EAAC,gBAAgB,IAAE,mBAAmB,CAAO;QAC1D,CAAC,KAAK,CAAC,YAAY,IAAI,UAAU,CAAC,IAAI,CACrC,4CACc,qBAAqB,EACjC,SAAS,EAAC,2EAA2E;YAEpF,KAAK,CAAC,YAAY,IAAI,CACrB,6BAAK,SAAS,EAAC,mBAAmB,IAAE,KAAK,CAAC,YAAY,CAAO,CAC9D;YACA,UAAU,IAAI,aAAa,EAAE,CAC1B,CACP,CACG,CACP,CAAC;IAEF;;;;;;OAMG;IACH,MAAM,YAAY,GAAiB,CACjC,4CAAiB,aAAa,wBAAoB,QAAQ;QACxD,6BAAK,SAAS,EAAC,4DAA4D;YACxE,YAAY;YACZ,CAAC,KAAK,CAAC,YAAY,IAAI,UAAU,CAAC,IAAI,CACrC,4CACc,qBAAqB,EACjC,SAAS,EAAC,sEAAsE;gBAE/E,KAAK,CAAC,YAAY,IAAI,CACrB,6BAAK,SAAS,EAAC,mBAAmB,IAAE,KAAK,CAAC,YAAY,CAAO,CAC9D;gBACA,UAAU,IAAI,aAAa,EAAE,CAC1B,CACP,CACG;QACL,kBAAkB,CACf,CACP,CAAC;IAEF,MAAM,aAAa,GAAiB,CAClC,6BAAK,SAAS,EAAC,6DAA6D;QAC1E,6BACE,SAAS,EAAE,GAAG,wBAAwB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,EAAE,IAErE,mBAAmB,CAChB;QACL,CAAC,KAAK,CAAC,YAAY,IAAI,UAAU,CAAC,IAAI,CACrC,6BAAK,SAAS,EAAC,mHAAmH;YAC/H,KAAK,CAAC,YAAY,IAAI,CACrB,6BAAK,SAAS,EAAC,sBAAsB,IAAE,KAAK,CAAC,YAAY,CAAO,CACjE;YACA,UAAU,IAAI,CACb,6BAAK,SAAS,EAAC,qCAAqC,IACjD,aAAa,EAAE,CACZ,CACP,CACG,CACP,CACG,CACP,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,CAAC,QAAQ;QACb,4CAAiB,MAAM,EAAC,SAAS,EAAE,QAAQ,KAAK,CAAC,SAAS,IAAI,EAAE,EAAE;YAChE,6BAAK,SAAS,EAAC,uEAAuE;gBACpF,6BAAK,SAAS,EAAC,mBAAmB;oBAC/B,SAAS;wBACR,CAAC,CAAC,aAAa;wBACf,CAAC,CAAC,KAAK,CAAC,YAAY,KAAK,QAAQ;4BAC/B,CAAC,CAAC,YAAY;4BACd,CAAC,CAAC,aAAa;oBAElB,KAAK,CAAC,QAAQ,IAAI,CACjB,6BAAK,SAAS,EAAE,KAAK,CAAC,aAAa,IAAI,MAAM,IAC1C,KAAK,CAAC,QAAQ,CACX,CACP,CACG,CACF,CACF,CACS,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../../UI/Components/Card/Card.tsx"],"names":[],"mappings":"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"}

package/build/dist/UI/Components/ChoiceRows/ChoiceRows.js

@@ -0,0 +1,54 @@
+import { Yellow } from "../../../Types/BrandColors";
+import useTranslator from "../../Utils/UseTranslator";
+import Pill from "../Pill/Pill";
+import React, { useId } from "react";
+export const getChoiceRowPlanPillText = (translator, plan) => {
+    return translator.translateTemplate("{{planName}} Plan", {
+        planName: plan,
+    });
+};
+const ChoiceRows = (props) => {
+    const translator = useTranslator();
+    const groupId = `choice-rows-${useId()}`;
+    const isEveryChoiceLocked = Boolean(props.isLocked || props.lockedReason);
+    const renderOption = (option, index) => {
+        const inputId = `${groupId}-${index}`;
+        const descriptionId = `${inputId}-description`;
+        const planId = `${inputId}-plan`;
+        const isChecked = props.value === option.value;
+        const isDisabled = isEveryChoiceLocked || Boolean(option.planNeeded);
+        // The sentence, and the plan a locked choice needs, read with the radio.
+        const describedBy = [
+            option.description ? descriptionId : "",
+            option.planNeeded ? planId : "",
+        ]
+            .filter((id) => {
+            return id.length > 0;
+        })
+            .join(" ");
+        return (React.createElement("div", { key: option.value, className: "px-5 py-4 md:px-6", "data-testid": option.dataTestId ? `${option.dataTestId}-row` : undefined, "data-checked": isChecked ? "true" : "false" },
+            React.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start sm:justify-between" },
+                React.createElement("div", { className: "flex min-w-0 flex-1 items-start gap-3" },
+                    React.createElement("input", { id: inputId, type: "radio", name: groupId, value: option.value, checked: isChecked, disabled: isDisabled, "aria-describedby": describedBy || undefined, className: `mt-1 h-4 w-4 flex-shrink-0 accent-indigo-600 ${isDisabled ? "cursor-not-allowed" : "cursor-pointer"}`, "data-testid": option.dataTestId, onChange: () => {
+                            if (isDisabled || isChecked) {
+                                return;
+                            }
+                            props.onPick(option.value);
+                        } }),
+                    React.createElement("div", { className: "min-w-0 flex-1" },
+                        React.createElement("label", { htmlFor: inputId, className: `block text-sm font-medium leading-6 text-gray-900 ${isDisabled ? "cursor-not-allowed" : "cursor-pointer"}` }, translator.translateText(option.title)),
+                        option.description ? (React.createElement("p", { id: descriptionId, className: "text-sm text-gray-500" }, translator.translateText(option.description))) : (React.createElement(React.Fragment, null)),
+                        option.details ? (React.createElement("div", { className: "mt-2 text-sm text-gray-500" }, option.details)) : (React.createElement(React.Fragment, null)))),
+                React.createElement("div", { className: `flex flex-shrink-0 flex-wrap items-center gap-x-3 pl-7 text-sm sm:pl-0 sm:pt-0.5 ${(isChecked && props.status) || option.planNeeded ? "sm:ml-4" : ""}` },
+                    React.createElement("span", { role: "status", className: isChecked && props.status ? "mt-2 inline-flex sm:mt-0" : "", "data-testid": option.dataTestId ? `${option.dataTestId}-status` : undefined }, isChecked ? props.status : null),
+                    option.planNeeded ? (React.createElement("span", { id: planId, className: "mt-2 inline-flex sm:mt-0" },
+                        React.createElement(Pill, { text: getChoiceRowPlanPillText(translator, option.planNeeded), color: Yellow }))) : (React.createElement(React.Fragment, null))))));
+    };
+    return (React.createElement("div", { "data-testid": props.dataTestId },
+        React.createElement("div", { role: "radiogroup", "aria-label": translator.translateText(props.ariaLabel), className: "divide-y divide-gray-200" }, props.options.map((option, index) => {
+            return renderOption(option, index);
+        })),
+        props.lockedReason ? (React.createElement("p", { className: "border-t border-gray-200 px-5 py-3 text-sm text-gray-500 md:px-6", "data-testid": props.dataTestId ? `${props.dataTestId}-locked-reason` : undefined }, translator.translateText(props.lockedReason))) : (React.createElement(React.Fragment, null))));
+};
+export default ChoiceRows;
+//# sourceMappingURL=ChoiceRows.js.map

package/build/dist/UI/Components/ChoiceRows/ChoiceRows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChoiceRows.js","sourceRoot":"","sources":["../../../../../UI/Components/ChoiceRows/ChoiceRows.tsx"],"names":[],"mappings":"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"}

package/build/dist/UI/Components/CommandPalette/CommandPalette.js

@@ -4,13 +4,19 @@ import KeyboardKey from "../KeyboardShortcut/KeyboardKey";
 import IconProp from "../../../Types/Icon/IconProp";
 import useTranslateValue from "../../Utils/Translation";
 import { usePageScrollLock } from "../../Utils/PageScrollLock";
-import { filterPaletteCommands, getPaletteSectionId, normalizePaletteQuery, } from "./PaletteFilter";
+import { filterPaletteCommands, getPaletteSectionId, } from "./PaletteFilter";
 import { readRecentCommandIds, RECENT_COMMANDS_LIMIT, writeRecentCommandId, } from "./RecentCommands";
 import useProviderSearch from "./UseProviderSearch";
 import PaletteRow from "./PaletteRow";
 import React, { useEffect, useMemo, useRef, useState, } from "react";
 import { createPortal } from "react-dom";
 const EMPTY_PROVIDERS = [];
+/*
+ * The most commands a search lists, best first. A letter or two can match
+ * hundreds of pages; the best fifty are plenty to choose from, and typing on
+ * narrows them.
+ */
+export const PALETTE_SEARCH_RESULT_LIMIT = 50;
 const hasPendingSection = (sections) => {
     return sections.some((section) => {
         return section.isPending;
@@ -23,6 +29,7 @@ const commandToEntry = (command, idPrefix) => {
         description: command.description,
         icon: command.icon,
         iconColor: command.iconColor,
+        breadcrumb: command.breadcrumb,
         shortcut: command.shortcut,
         recentCommandId: command.id,
         onSelect: command.onSelect,
@@ -123,7 +130,11 @@ const CommandPalettePanel = (props) => {
         };
     }, []);
     const providerSections = useProviderSearch(props.searchProviders, query);
-    const normalizedQuery = normalizePaletteQuery(query);
+    /*
+     * Browsing while the box is empty, searching once anything is typed: a
+     * query of only punctuation ("?") is a search that finds nothing.
+     */
+    const trimmedQuery = query.trim();
     const sections = useMemo(() => {
         const built = [];
         const pushSection = (id, title, isPending, entries) => {
@@ -151,7 +162,7 @@ const CommandPalettePanel = (props) => {
                 return { category, commands: byCategory.get(category) };
             });
         };
-        if (!normalizedQuery) {
+        if (!trimmedQuery) {
             // Browsing: "Recent" first (when we have any), then the full catalog.
             if (recentCommandIds.length > 0) {
                 const commandById = new Map();
@@ -178,7 +189,13 @@ const CommandPalettePanel = (props) => {
                     }));
                 }
             }
-            groupByCategory(props.commands).forEach((group) => {
+            /*
+             * Pages and the actions on them are offered while searching only:
+             * listed here they would be hundreds of rows to scroll past.
+             */
+            groupByCategory(props.commands.filter((command) => {
+                return !command.isSearchOnly;
+            })).forEach((group) => {
                 pushSection(getPaletteSectionId(group.category), group.category, false, group.commands.map((command) => {
                     return commandToEntry(command, "");
                 }));
@@ -190,7 +207,7 @@ const CommandPalettePanel = (props) => {
              * order decides both row order within a section and which category
              * surfaces first — then one section per async provider.
              */
-            const matches = filterPaletteCommands(props.commands, query);
+            const matches = filterPaletteCommands(props.commands, query).slice(0, PALETTE_SEARCH_RESULT_LIMIT);
             groupByCategory(matches.map((match) => {
                 return match.command;
             })).forEach((group) => {
@@ -211,6 +228,7 @@ const CommandPalettePanel = (props) => {
                         description: result.description,
                         icon: result.icon,
                         iconColor: result.iconColor,
+                        breadcrumb: undefined,
                         shortcut: undefined,
                         recentCommandId: null,
                         onSelect: result.onSelect,
@@ -227,13 +245,7 @@ const CommandPalettePanel = (props) => {
             });
         });
         return built;
-    }, [
-        normalizedQuery,
-        query,
-        props.commands,
-        recentCommandIds,
-        providerSections,
-    ]);
+    }, [trimmedQuery, query, props.commands, recentCommandIds, providerSections]);
     // Flattened list in render order — the keyboard walks this.
     const flatEntries = useMemo(() => {
         return sections.reduce((accumulator, section) => {
@@ -391,6 +403,7 @@ const CommandPalettePanel = (props) => {
                                         description: entry.description,
                                         icon: entry.icon,
                                         iconColor: entry.iconColor,
+                                        breadcrumb: entry.breadcrumb,
                                         shortcut: entry.shortcut,
                                     }, query: query, isActive: entry.flatIndex === activeIndex, onActivate: () => {
                                         setActiveIndex(entry.flatIndex);