@oneuptime/common 13.0.5 → 13.0.6

package/UI/Components/AlertBanner/AlertBanner.tsx

@@ -1,3 +1,5 @@
+import Icon from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
 import useTranslateValue from "../../Utils/Translation";
 import React, { FunctionComponent, ReactElement } from "react";
 
@@ -14,31 +16,68 @@ export interface ComponentProps {
   children?: ReactElement | undefined;
   rightElement?: ReactElement | undefined;
   className?: string | undefined;
+  /** Replaces the type's default icon when a more specific one fits. */
+  icon?: IconProp | undefined;
+  dataTestId?: string | undefined;
 }
 
-const bannerStyles: Record<
-  AlertBannerType,
-  { container: string; dot: string; title: string }
-> = {
+type BannerRole = "alert" | "status";
+
+interface BannerStyle {
+  container: string;
+  icon: string;
+  title: string;
+  defaultIcon: IconProp;
+  role: BannerRole;
+}
+
+/*
+ * A banner sits above a page's real content, so it has to read as context
+ * for that content rather than as the page itself. It used to be a
+ * full-bleed tinted block with a text-lg title - as loud as the card title
+ * beneath it - so a purely informational note looked like an outage.
+ *
+ * Info and Success are therefore neutral surfaces that carry their meaning
+ * in a coloured icon. Only Warning and Danger, which ask the user to act,
+ * keep a soft tint and a tinted title.
+ *
+ * The dashboard's dark theme is a hand-written remap of specific classes in
+ * Common/UI/Styles/Theme.css, so every class below is one it already maps
+ * (bg-white, border-gray-200, bg-amber-50, border-red-200, text-*-600 and
+ * so on). A class outside that list would stay light on a dark page.
+ *
+ * Role follows urgency: role="alert" is announced assertively and
+ * interrupts whatever a screen reader is saying, which is right for a
+ * problem and wrong for a page that simply opens with a note.
+ */
+const bannerStyles: Record<AlertBannerType, BannerStyle> = {
+  [AlertBannerType.Info]: {
+    container: "border-gray-200 bg-white",
+    icon: "text-blue-600",
+    title: "text-gray-900",
+    defaultIcon: IconProp.Info,
+    role: "status",
+  },
   [AlertBannerType.Success]: {
-    container: "bg-emerald-50 border-emerald-200",
-    dot: "bg-emerald-500",
-    title: "text-emerald-800",
+    container: "border-gray-200 bg-white",
+    icon: "text-emerald-600",
+    title: "text-gray-900",
+    defaultIcon: IconProp.CheckCircle,
+    role: "status",
   },
   [AlertBannerType.Warning]: {
-    container: "bg-amber-50 border-amber-200",
-    dot: "bg-amber-500",
+    container: "border-amber-200 bg-amber-50",
+    icon: "text-amber-600",
     title: "text-amber-800",
+    defaultIcon: IconProp.Alert,
+    role: "alert",
   },
   [AlertBannerType.Danger]: {
-    container: "bg-red-50 border-red-200",
-    dot: "bg-red-500",
+    container: "border-red-200 bg-red-50",
+    icon: "text-red-600",
     title: "text-red-800",
-  },
-  [AlertBannerType.Info]: {
-    container: "bg-blue-50 border-blue-200",
-    dot: "bg-blue-500",
-    title: "text-blue-800",
+    defaultIcon: IconProp.ExclaimationCircle,
+    role: "alert",
   },
 };
 
@@ -47,24 +86,43 @@ const AlertBanner: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
   const { translateString } = useTranslateValue();
   const translatedTitle: string = translateString(props.title) ?? props.title;
-  const styles: { container: string; dot: string; title: string } =
-    bannerStyles[props.type];
+  const styles: BannerStyle = bannerStyles[props.type];
 
   return (
     <div
-      className={`rounded-lg border p-4 ${styles.container} ${props.className || ""}`}
-      role="alert"
+      className={`flex items-start gap-3 rounded-lg border px-4 py-3 shadow-sm ${styles.container} ${props.className || ""}`}
+      role={styles.role}
+      data-testid={props.dataTestId}
     >
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <span className={`inline-flex h-3 w-3 rounded-full ${styles.dot}`} />
-          <span className={`text-lg font-semibold ${styles.title}`}>
+      {/*
+       * Decorative: the title beside it already says what kind of banner
+       * this is, so the icon stays hidden from assistive technology.
+       */}
+      <Icon
+        icon={props.icon || styles.defaultIcon}
+        className={`mt-0.5 h-5 w-5 flex-shrink-0 ${styles.icon}`}
+      />
+      <div className="min-w-0 flex-1">
+        <div className="flex flex-wrap items-start justify-between gap-x-4 gap-y-1">
+          {/*
+           * The title stays a text node of its own, so callers and their
+           * tests can find the banner by its exact wording.
+           */}
+          <p className={`text-sm font-semibold leading-6 ${styles.title}`}>
             {translatedTitle}
-          </span>
+          </p>
+          {props.rightElement && (
+            <div className="flex flex-shrink-0 items-center">
+              {props.rightElement}
+            </div>
+          )}
         </div>
-        {props.rightElement && <div>{props.rightElement}</div>}
+        {props.children && (
+          <div className="mt-1 text-sm leading-relaxed text-gray-600">
+            {props.children}
+          </div>
+        )}
       </div>
-      {props.children && <div className="mt-2">{props.children}</div>}
     </div>
   );
 };

package/UI/Components/BulkUpdate/BulkArchiveActions.tsx

@@ -23,6 +23,15 @@ export interface BulkArchiveActionsConfig<T extends BaseModel> {
    */
   singularName?: string | undefined;
   pluralName?: string | undefined;
+  /*
+   * Confirmation bodies that replace the defaults outright. The defaults
+   * describe a telemetry resource, which keeps ingesting while archived; a
+   * model whose archive does more (an archived SLO stops being evaluated)
+   * must be able to say so. Written to read correctly for one item or many -
+   * the title above them already carries the count.
+   */
+  archiveConfirmMessage?: string | undefined;
+  unarchiveConfirmMessage?: string | undefined;
 }
 
 export interface BulkArchiveActionsResult<T extends BaseModel> {
@@ -34,8 +43,10 @@ type ArchiveMode = "archive" | "unarchive";
 
 /**
  * Reusable hook that provides "Archive" and "Unarchive" bulk actions for any
- * ModelTable whose model has an `isArchived` boolean column. Archiving is a
- * pure visibility flag — telemetry keeps being ingested for archived resources.
+ * ModelTable whose model has an `isArchived` boolean column. For telemetry
+ * resources archiving is a pure visibility flag — telemetry keeps being
+ * ingested — and the default confirmation copy says so; models whose archive
+ * does more pass `archiveConfirmMessage` / `unarchiveConfirmMessage`.
  *
  * The client only ever sends `{ isArchived: true | false }`; the server stamps
  * `archivedAt` / `archivedByUserId` (see DatabaseService.sanitizeCreateOrUpdate).
@@ -146,6 +157,10 @@ function useBulkArchiveActions<T extends BaseModel>(
       }?`;
     },
     confirmMessage: (items: Array<T>): string => {
+      if (config.archiveConfirmMessage) {
+        return config.archiveConfirmMessage;
+      }
+
       return `Are you sure you want to archive the selected ${
         items.length === 1 ? singularName : pluralName
       }? They will be hidden from the list but will keep collecting telemetry. You can unarchive them anytime from the Archived tab.`;
@@ -165,6 +180,10 @@ function useBulkArchiveActions<T extends BaseModel>(
       }?`;
     },
     confirmMessage: (items: Array<T>): string => {
+      if (config.unarchiveConfirmMessage) {
+        return config.unarchiveConfirmMessage;
+      }
+
       return `Are you sure you want to unarchive the selected ${
         items.length === 1 ? singularName : pluralName
       }? They will reappear in the main list.`;

package/UI/Components/Detail/Detail.tsx

@@ -466,7 +466,6 @@ const Detail: DetailFunction = <T extends GenericObject>(
           isSingleColumn ? " first:pt-0 last:pb-0" : ""
         }`}
         key={index}
-        id={props.id}
       >
         <div className="space-y-1">
           {translatedTitle && (
@@ -936,7 +935,6 @@ const Detail: DetailFunction = <T extends GenericObject>(
       <div
         className={`${className} ${containerClasses}`}
         key={index}
-        id={props.id}
         style={
           props.showDetailsInNumberOfColumns
             ? {
@@ -985,7 +983,16 @@ const Detail: DetailFunction = <T extends GenericObject>(
   }
 
   return (
+    /*
+     * The id names this detail, so it belongs to the element that holds all of
+     * it. It used to be stamped on every row instead, which put the same id on
+     * as many elements as the detail had fields: invalid HTML, an anchor or
+     * getElementById that reaches only the first row, and a Playwright locator
+     * that resolves to several elements and fails strict mode - which is how
+     * the SLO settings E2E found it.
+     */
     <div
+      id={props.id}
       className={`grid grid-cols-1 ${gapClasses} sm:grid-cols-${
         props.showDetailsInNumberOfColumns || 1
       } w-full`}

package/UI/Components/Dropdown/Dropdown.tsx

@@ -6,16 +6,19 @@ import React, {
   ReactElement,
   useId,
   useLayoutEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
 import Color from "../../../Types/Color";
 import Label from "../../../Models/DatabaseModels/Label";
 import Select, {
+  components as ReactSelectComponents,
   ControlProps,
   CSSObjectWithLabel,
   FormatOptionLabelMeta,
   GroupBase,
+  MultiValueRemoveProps,
   OptionProps,
 } from "react-select";
 
@@ -64,6 +67,11 @@ export interface ComponentProps {
   ariaLabel?: string | undefined;
   ariaLabelledby?: string | undefined;
   disabled?: boolean | undefined;
+  /*
+   * Show the clear (×) control. Defaults to true; turn it off for a choice
+   * that must always have a value, where clearing would only be undone.
+   */
+  isClearable?: boolean | undefined;
 }
 
 const Dropdown: FunctionComponent<ComponentProps> = (
@@ -501,6 +509,60 @@ const Dropdown: FunctionComponent<ComponentProps> = (
     );
   };
 
+  /*
+   * react-select names a chip's remove button after whatever formatOptionLabel
+   * returned for it: `aria-label={"Remove " + children}` in its MultiValue.
+   * Ours returns an element - the option's text sits next to a colour dot and
+   * its labels - and concatenating that gives "Remove [object Object]", which
+   * is what a screen reader read out for every chip in every multi-select.
+   * Name the button after the option's own text instead, translated the same
+   * way the chip is.
+   *
+   * The identity has to hold still across renders: react-select rebuilds its
+   * component table whenever the components prop stops being shallow-equal, and
+   * a rebuilt table is a new element type, so React would throw the remove
+   * button away and mount a fresh one on every render - taking the focus with
+   * it if someone were tabbing through the chips. useTranslateValue hands back a
+   * new translateString each render, so keep the latest one in a ref and depend
+   * on nothing.
+   */
+  const translateStringRef: React.MutableRefObject<
+    (value: string | undefined) => string | undefined
+  > = useRef(translateString);
+  translateStringRef.current = translateString;
+
+  const MultiValueRemoveWithOptionName: FunctionComponent<
+    MultiValueRemoveProps<DropdownOption, boolean, GroupBase<DropdownOption>>
+  > = useMemo(() => {
+    const MultiValueRemove: FunctionComponent<
+      MultiValueRemoveProps<DropdownOption, boolean, GroupBase<DropdownOption>>
+    > = (
+      removeProps: MultiValueRemoveProps<
+        DropdownOption,
+        boolean,
+        GroupBase<DropdownOption>
+      >,
+    ): ReactElement => {
+      const optionLabel: string =
+        translateStringRef.current(removeProps.data.label) ??
+        removeProps.data.label;
+
+      return (
+        <ReactSelectComponents.MultiValueRemove
+          {...removeProps}
+          innerProps={{
+            ...removeProps.innerProps,
+            "aria-label": `Remove ${optionLabel}`,
+          }}
+        />
+      );
+    };
+
+    MultiValueRemove.displayName = "DropdownMultiValueRemove";
+
+    return MultiValueRemove;
+  }, []);
+
   useLayoutEffect(() => {
     if (firstUpdate.current && props.initialValue) {
       firstUpdate.current = false;
@@ -534,6 +596,7 @@ const Dropdown: FunctionComponent<ComponentProps> = (
         classNamePrefix="ou-select"
         unstyled={false}
         formatOptionLabel={formatDropdownOptionLabel}
+        components={{ MultiValueRemove: MultiValueRemoveWithOptionName }}
         onBlur={() => {
           props.onBlur?.();
         }}
@@ -729,7 +792,7 @@ const Dropdown: FunctionComponent<ComponentProps> = (
         }}
         menuPortalTarget={menuPortalTarget}
         menuPosition="fixed"
-        isClearable={true}
+        isClearable={props.isClearable ?? true}
         isSearchable={true}
         placeholder={tx(props.placeholder) ?? props.placeholder}
         options={props.options as any}

package/UI/Components/EmptyState/EmptyState.tsx

@@ -32,7 +32,12 @@ const EmptyState: FunctionComponent<ComponentProps> = (
           props.showSolidBackground ? "bg-white rounded shadow" : ""
         }`}
       >
-        <div className="m-auto text-center">
+        {/*
+         * Full width so the footer can lay out a wide block (a grid of
+         * guides) without being squeezed to its content; everything inside
+         * is centred on its own.
+         */}
+        <div className="m-auto w-full text-center">
           {props.icon && (
             <Icon
               icon={props.icon}
@@ -45,10 +50,29 @@ const EmptyState: FunctionComponent<ComponentProps> = (
           <h3 className="mt-2 text-sm font-medium text-gray-900">
             {translateValue(props.title)}
           </h3>
-          <p className="mt-1 text-sm text-gray-500">
+          {/*
+           * Capped at a readable measure. Uncapped, a long description in a
+           * wide table ran edge to edge as a single line.
+           */}
+          <p
+            className="mx-auto mt-1 max-w-xl text-sm leading-6 text-gray-500"
+            data-testid={`${props.id}-description`}
+          >
             {translateValue(props.description)}
           </p>
-          {props.footer && <div className="mt-6">{props.footer}</div>}
+          {/*
+           * A flex row, so a footer that is itself a block-level flex box
+           * (an OUTLINE Button is one) is centred instead of stretching
+           * across the row with its label pinned to the left edge.
+           */}
+          {props.footer && (
+            <div
+              className="mt-6 flex justify-center"
+              data-testid={`${props.id}-footer`}
+            >
+              {props.footer}
+            </div>
+          )}
         </div>
       </div>
     </React.Fragment>

package/UI/Components/EmptyState/EmptyStateGuideLinks.tsx

@@ -0,0 +1,124 @@
+import Icon from "../Icon/Icon";
+import Link from "../Link/Link";
+import Route from "../../../Types/API/Route";
+import URL from "../../../Types/API/URL";
+import IconProp from "../../../Types/Icon/IconProp";
+import useTranslateValue from "../../Utils/Translation";
+import React, { FunctionComponent, ReactElement } from "react";
+
+export interface EmptyStateGuideLink {
+  // Stable React key, and the suffix of the link's element id.
+  id: string;
+  title: string;
+  // A short qualifier under the title, e.g. a product category.
+  subtitle?: string | undefined;
+  icon?: IconProp | undefined;
+  to: URL | Route;
+  // Defaults to true: a guide is read beside the page, not instead of it.
+  openInNewTab?: boolean | undefined;
+}
+
+export interface ComponentProps {
+  id: string;
+  heading?: string | undefined;
+  links: Array<EmptyStateGuideLink>;
+}
+
+/*
+ * Columns come from the width the grid actually has, not the viewport's:
+ * an empty state sits in tables beside a side menu, in modals and in full
+ * pages, and a viewport breakpoint would squeeze four columns into a
+ * table that is only half the screen wide.
+ */
+export const GUIDE_GRID_CLASS_NAME: string =
+  "grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-3";
+
+/*
+ * A grid of setup-guide links for an EmptyState footer, for when there is
+ * more than one place to start (one guide per supported product, say).
+ *
+ * A bulleted list of links under a centred empty state put its bullets at
+ * the far edge of the table and its links in the middle; a grid of cards
+ * keeps each guide one obvious, generously sized target, and reads the same
+ * at any width.
+ */
+const EmptyStateGuideLinks: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement | null => {
+  const { translateString } = useTranslateValue();
+
+  if (props.links.length === 0) {
+    return null;
+  }
+
+  const headingId: string = `${props.id}-heading`;
+
+  return (
+    <div id={props.id} className="w-full max-w-5xl text-left">
+      {props.heading && (
+        <h4
+          id={headingId}
+          className="text-xs font-semibold uppercase tracking-wide text-gray-500"
+        >
+          {translateString(props.heading)}
+        </h4>
+      )}
+      <ul
+        role="list"
+        aria-labelledby={props.heading ? headingId : undefined}
+        className={`${props.heading ? "mt-3 " : ""}${GUIDE_GRID_CLASS_NAME}`}
+      >
+        {props.links.map((link: EmptyStateGuideLink): ReactElement => {
+          const openInNewTab: boolean = link.openInNewTab !== false;
+
+          return (
+            <li key={link.id} className="flex">
+              <Link
+                id={`${props.id}-${link.id}`}
+                to={link.to}
+                openInNewTab={openInNewTab}
+                className="group flex w-full items-center gap-3 rounded-lg border border-gray-200 bg-white p-3 shadow-sm transition-colors duration-150 ease-out hover:border-indigo-300 hover:bg-indigo-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
+              >
+                {link.icon && (
+                  <div
+                    aria-hidden="true"
+                    className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-gray-50 text-gray-500 ring-1 ring-inset ring-gray-200 group-hover:bg-white group-hover:text-indigo-600"
+                  >
+                    <Icon icon={link.icon} className="h-5 w-5" />
+                  </div>
+                )}
+                <div className="min-w-0 flex-1">
+                  <div className="break-words text-sm font-medium text-gray-900 group-hover:text-indigo-700">
+                    {translateString(link.title)}
+                  </div>
+                  {link.subtitle && (
+                    <div className="break-words text-xs text-gray-500">
+                      {translateString(link.subtitle)}
+                    </div>
+                  )}
+                </div>
+                <div aria-hidden="true" className="shrink-0">
+                  <Icon
+                    icon={
+                      openInNewTab
+                        ? IconProp.ExternalLink
+                        : IconProp.ChevronRight
+                    }
+                    className="h-4 w-4 text-gray-400 group-hover:text-indigo-500"
+                  />
+                </div>
+                {openInNewTab && (
+                  <span className="sr-only">
+                    {translateString("(opens in a new tab)")}
+                  </span>
+                )}
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+export default EmptyStateGuideLinks;

package/UI/Components/Forms/ModelForm.tsx

@@ -972,11 +972,12 @@ const ModelForm: <TBaseModel extends BaseModel>(
        * auto-remediation command allowlist.
        *
        * Both halves of the condition are load-bearing. Not every JSON editor
-       * is backed by a JSON column: GoogleSecOpsConnection.serviceAccountJson
-       * is VeryLongText, edited as JSON because that is what the customer
-       * pastes, and STORED as the text they pasted - parsing that one would
-       * hand the server an object where it expects the string it decrypts and
-       * parses itself. And not every JSON column is edited as text.
+       * is backed by a JSON column: a VeryLongText column can hold JSON as
+       * the text it was given (SecurityEventConnection.secrets does, as the
+       * retired Google SecOps connection's pasted service account key did),
+       * and parsing that would hand the server an object where it expects
+       * the string it parses and encrypts itself. And not every JSON column
+       * is edited as text.
        *
        * Only a string is converted, and only when it parses. An untouched
        * field still holds whatever the fetch loaded (already parsed), and

package/UI/Components/LabelRule/LabelRuleTable.tsx

@@ -15,7 +15,7 @@ import ProjectUtil from "../../Utils/Project";
 import Alert, { AlertType } from "../Alerts/Alert";
 import { ButtonStyleType } from "../Button/Button";
 import { CardButtonSchema } from "../Card/Card";
-import ModelTable, { ComponentProps } from "../ModelTable/ModelTable";
+import RuleTable, { ComponentProps } from "../RuleRun/RuleTable";
 import ImportLabelRulesModal from "./ImportLabelRulesModal";
 import React, { ReactElement, useRef, useState } from "react";
 
@@ -30,6 +30,12 @@ const LabelRuleTable: <TBaseModel extends BaseModel>(
   const [isExporting, setIsExporting] = useState<boolean>(false);
   const exportInProgress: React.MutableRefObject<boolean> = useRef(false);
   const [error, setError] = useState<string>("");
+
+  // A rule's own page has no table to import into or export from.
+  if (props.viewRuleId) {
+    return <RuleTable<TBaseModel> {...props} />;
+  }
+
   const buttons: Array<CardButtonSchema | ReactElement> = [
     ...(props.cardProps?.buttons || []),
   ];
@@ -111,7 +117,7 @@ const LabelRuleTable: <TBaseModel extends BaseModel>(
   return (
     <>
       {error && <Alert type={AlertType.DANGER} title={error} />}
-      <ModelTable<TBaseModel>
+      <RuleTable<TBaseModel>
         {...props}
         enableJsonImportExport={false}
         cardProps={{ ...props.cardProps, buttons }}

package/UI/Components/LogsViewer/LogsViewer.tsx

@@ -42,7 +42,6 @@ import LogDetailsPanel from "./components/LogDetailsPanel";
 import LogsHistogram from "./components/LogsHistogram";
 import LogsFacetSidebar from "./components/LogsFacetSidebar";
 import ActiveFilterChips from "./components/ActiveFilterChips";
-import { LockedFilterActionOptions } from "../TelemetryViewer/components/LockedFilterActions";
 import { TelemetrySignal } from "../../../Utils/Telemetry/LockedFilterSearch";
 import {
   LiveLogsOptions,
@@ -163,12 +162,10 @@ export interface ComponentProps {
   analyticsAppliedFacetFilters?: Map<string, Set<string>> | undefined;
   signalPivotActions?: Array<LogsSignalPivotAction> | undefined;
   /*
-   * Which explorer this is (names the explorer in the locked chips' tooltips
-   * and actions) and how the host reproduces its locked scope on that
-   * explorer — see LockedFilterActions. Both forwarded to the chip list.
+   * Which explorer this is — names the explorer in the locked chips'
+   * tooltips. Forwarded to the chip list.
    */
   lockedFilterSignal?: TelemetrySignal | undefined;
-  lockedFilterActions?: LockedFilterActionOptions | undefined;
 }
 
 export type LogsSortField = LogsTableSortField;
@@ -1215,7 +1212,6 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
           onRemove={props.onRemoveFilter || (() => {})}
           onClearAll={props.onClearAllFilters || (() => {})}
           signal={props.lockedFilterSignal}
-          lockedFilterActions={props.lockedFilterActions}
         />
       )}
 

package/UI/Components/LogsViewer/components/ActiveFilterChips.tsx

@@ -5,9 +5,6 @@ import IconProp from "../../../../Types/Icon/IconProp";
 import Link from "../../Link/Link";
 import { formatDictionaryValueForDisplay } from "../../Dictionary/DictionaryFilterOperator";
 import LockedFilterChip from "../../TelemetryViewer/components/LockedFilterChip";
-import LockedFilterActions, {
-  LockedFilterActionOptions,
-} from "../../TelemetryViewer/components/LockedFilterActions";
 import { TelemetrySignal } from "../../../../Utils/Telemetry/LockedFilterSearch";
 
 export interface ActiveFilterChipsProps {
@@ -16,15 +13,10 @@ export interface ActiveFilterChipsProps {
   onClearAll: () => void;
   /*
    * Which explorer the read-only chips belong to — names the explorer in the
-   * locked chips' tooltips and in the "Copy filter" / "Open in …" actions.
-   * Defaults to logs, the only signal this list renders.
+   * locked chips' tooltips. Defaults to logs, the only signal this list
+   * renders.
    */
   signal?: TelemetrySignal | undefined;
-  /*
-   * How the host reproduces its locked scope elsewhere. Rendered after the
-   * read-only chips; nothing is rendered when neither field is set.
-   */
-  lockedFilterActions?: LockedFilterActionOptions | undefined;
 }
 
 /*
@@ -107,9 +99,6 @@ const ActiveFilterChips: FunctionComponent<ActiveFilterChipsProps> = (
           />
         );
       })}
-      {readOnlyFilters.length > 0 && props.lockedFilterActions && (
-        <LockedFilterActions signal={signal} {...props.lockedFilterActions} />
-      )}
       {removableFilters.map((filter: ActiveFilter) => {
         const chipKey: string = `${filter.facetKey}:${chipText(filter.value)}`;
         return (

package/UI/Components/LogsViewer/types.ts

@@ -37,8 +37,8 @@ export interface ActiveFilter {
    */
   openRoute?: Route | URL | undefined;
   /*
-   * For a read-only chip: what it matches and why it is locked, rendered as
-   * the chip's tooltip and folded into "Copy filter". Display only.
+   * For a read-only chip: its search syntax (or why there is none), shown in
+   * the chip's tooltip. Display only.
    */
   lockedDetail?: LockedFilterDetail | undefined;
 }

package/UI/Components/MoreMenu/MoreMenu.tsx

@@ -32,6 +32,15 @@ export interface ComponentProps {
   ariaLabel?: string | undefined;
   dataTestId?: string | undefined;
   isDisabled?: boolean | undefined;
+  /*
+   * Open the menu upwards, for a trigger that sits at the bottom of its
+   * surface. The menu is absolutely positioned and has no flipping logic,
+   * so a downward menu under a trigger a dozen pixels from the bottom of a
+   * clipped container (the session replay transport inside a fullscreen
+   * player) is drawn outside it and cannot be reached at all. Callers that
+   * know they are at the bottom say so; everything else keeps opening down.
+   */
+  isOpeningUpwards?: boolean | undefined;
 }
 
 const isMenuItemDisabled: (item: HTMLElement) => boolean = (
@@ -463,9 +472,11 @@ const MoreMenu: React.ForwardRefExoticComponent<
              * lingering scale would make it the containing block for any
              * position:fixed descendant (the Modal invariant).
              */
-            className={`absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-lg bg-white shadow-xl ring-1 ring-gray-200 focus:outline-none py-1 transition duration-150 ease-out motion-reduce:transition-none ${
-              hasMenuEntered ? "opacity-100" : "opacity-0 scale-95"
-            }`}
+            className={`absolute right-0 z-50 w-56 rounded-lg bg-white shadow-xl ring-1 ring-gray-200 focus:outline-none py-1 transition duration-150 ease-out motion-reduce:transition-none ${
+              props.isOpeningUpwards
+                ? "bottom-full mb-2 origin-bottom-right"
+                : "mt-2 origin-top-right"
+            } ${hasMenuEntered ? "opacity-100" : "opacity-0 scale-95"}`}
             role="menu"
             aria-orientation="vertical"
             aria-labelledby={buttonId}