@oneuptime/common 12.0.31 → 12.0.32

package/UI/Components/Charts/ChartLibrary/AreaChart/AreaChart.tsx

@@ -40,6 +40,7 @@ import useChartAnnotations, {
   UseChartAnnotationsResult,
 } from "../Annotations/UseChartAnnotations";
 import { cx } from "../Utils/Cx";
+import { DOUBLE_CLICK_DISAMBIGUATION_MS } from "../Utils/DoubleClick";
 import { getYAxisDomain } from "../Utils/GetYAxisDomain";
 import { hasOnlyOneValueForKey } from "../Utils/HasOnlyOneValueForKey";
 import {
@@ -625,6 +626,15 @@ interface AreaChartProps extends React.HTMLAttributes<HTMLDivElement> {
   formattedExemplarPoints?: Array<FormattedExemplarPoint> | undefined;
   onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
   onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
+  /**
+   * Double-click on the plot surface: the counterpart to drag-to-select,
+   * for undoing the zoom it produced. Supplying it makes single clicks
+   * wait DOUBLE_CLICK_DISAMBIGUATION_MS before they act, so a double-click
+   * cannot also fire the bucket-click path twice on its way past — hosts
+   * that have nothing to reset should leave it undefined and keep clicks
+   * instant.
+   */
+  onTimeRangeReset?: (() => void) | undefined;
   /**
    * Plain click on a time bucket (the plot background — dot/legend clicks
    * and drag-selections never reach this). [bucketStart, bucketEnd) uses
@@ -693,6 +703,7 @@ const AreaChart: React.ForwardRefExoticComponent<
       formattedTimeReferenceLines,
       formattedReferenceRegions,
       onTimeRangeSelect,
+      onTimeRangeReset,
       onBucketClick,
       ghostCategories,
       ...other
@@ -723,9 +734,26 @@ const AreaChart: React.ForwardRefExoticComponent<
       React.useRef<number | null>(null);
     const suppressNextClickRef: React.MutableRefObject<boolean> =
       React.useRef<boolean>(false);
+    const hasOnTimeRangeReset: boolean = Boolean(onTimeRangeReset);
+    /*
+     * A pending single-click, held open long enough for a second click to
+     * cancel it. Only armed when onTimeRangeReset is supplied.
+     */
+    const pendingClickTimeoutRef: React.MutableRefObject<ReturnType<
+      typeof setTimeout
+    > | null> = React.useRef<ReturnType<typeof setTimeout> | null>(null);
     const categoryColors: Map<string, ChartColorValue> =
       constructCategoryColors(categories, colors);
 
+    React.useEffect(() => {
+      return () => {
+        if (pendingClickTimeoutRef.current !== null) {
+          clearTimeout(pendingClickTimeoutRef.current);
+          pendingClickTimeoutRef.current = null;
+        }
+      };
+    }, []);
+
     /*
      * Annotations are drawn onto the categorical axis, so the layer needs
      * the same x values recharts is drawing — not the source dates.
@@ -971,6 +999,51 @@ const AreaChart: React.ForwardRefExoticComponent<
       onTimeRangeSelect(startDate, endDate);
     }
 
+    /*
+     * The plain-click path, split out so it can either run inline (no
+     * reset handler) or be deferred behind the double-click window.
+     */
+    function handleChartClick(chartState: RangeSelectionChartState): void {
+      /*
+       * A click while a legend/dot selection is active keeps its
+       * long-standing meaning — clear the selection — and never
+       * also pins a bucket.
+       */
+      if (hasOnValueChange && (activeLegend || activeDot)) {
+        setActiveDot(undefined);
+        setActiveLegend(undefined);
+        onValueChange?.(null);
+        return;
+      }
+      if (!onBucketClick) {
+        return;
+      }
+      const rowIndex: number | null = getRowIndexFromChartState(chartState);
+      if (rowIndex === null) {
+        return;
+      }
+      const bucketStart: Date | null = getBucketDateAtIndex(rowIndex);
+      if (!bucketStart) {
+        return;
+      }
+      /*
+       * Cover the full bucket: width from adjacent row dates, the
+       * same derivation drag-to-select uses.
+       */
+      const adjacentBucketDate: Date | null =
+        rowIndex > 0
+          ? getBucketDateAtIndex(rowIndex - 1)
+          : getBucketDateAtIndex(rowIndex + 1);
+      const clickedBucketWidthInMs: number = adjacentBucketDate
+        ? Math.abs(bucketStart.getTime() - adjacentBucketDate.getTime())
+        : 0;
+      onBucketClick(
+        bucketStart,
+        new Date(bucketStart.getTime() + clickedBucketWidthInMs),
+        (data[rowIndex] || {}) as Record<string, number | string>,
+      );
+    }
+
     return (
       <div
         ref={ref}
@@ -1009,46 +1082,35 @@ const AreaChart: React.ForwardRefExoticComponent<
                 if (suppressNextClickRef.current) {
                   return;
                 }
-                /*
-                 * A click while a legend/dot selection is active keeps its
-                 * long-standing meaning — clear the selection — and never
-                 * also pins a bucket.
-                 */
-                if (hasOnValueChange && (activeLegend || activeDot)) {
-                  setActiveDot(undefined);
-                  setActiveLegend(undefined);
-                  onValueChange?.(null);
-                  return;
-                }
-                if (!onBucketClick) {
-                  return;
-                }
-                const rowIndex: number | null =
-                  getRowIndexFromChartState(chartState);
-                if (rowIndex === null) {
-                  return;
-                }
-                const bucketStart: Date | null = getBucketDateAtIndex(rowIndex);
-                if (!bucketStart) {
+                if (!hasOnTimeRangeReset) {
+                  handleChartClick(chartState);
                   return;
                 }
                 /*
-                 * Cover the full bucket: width from adjacent row dates, the
-                 * same derivation drag-to-select uses.
+                 * Reset is on, so hold the click open: both clicks of a
+                 * double-click arrive before dblclick does, and neither
+                 * may pin a bucket. The second click re-arms the timer,
+                 * dblclick clears it.
                  */
-                const adjacentDate: Date | null =
-                  rowIndex > 0
-                    ? getBucketDateAtIndex(rowIndex - 1)
-                    : getBucketDateAtIndex(rowIndex + 1);
-                const bucketWidthInMs: number = adjacentDate
-                  ? Math.abs(bucketStart.getTime() - adjacentDate.getTime())
-                  : 0;
-                onBucketClick(
-                  bucketStart,
-                  new Date(bucketStart.getTime() + bucketWidthInMs),
-                  (data[rowIndex] || {}) as Record<string, number | string>,
-                );
+                if (pendingClickTimeoutRef.current !== null) {
+                  clearTimeout(pendingClickTimeoutRef.current);
+                }
+                pendingClickTimeoutRef.current = setTimeout(() => {
+                  pendingClickTimeoutRef.current = null;
+                  handleChartClick(chartState);
+                }, DOUBLE_CLICK_DISAMBIGUATION_MS);
               }}
+              {...(hasOnTimeRangeReset
+                ? {
+                    onDoubleClick: () => {
+                      if (pendingClickTimeoutRef.current !== null) {
+                        clearTimeout(pendingClickTimeoutRef.current);
+                        pendingClickTimeoutRef.current = null;
+                      }
+                      onTimeRangeReset?.();
+                    },
+                  }
+                : {})}
               margin={{
                 bottom: (xAxisLabel
                   ? 40

package/UI/Components/Charts/ChartLibrary/BarChart/BarChart.tsx

@@ -692,6 +692,12 @@ interface BarChartProps extends React.HTMLAttributes<HTMLDivElement> {
   referenceLines?: Array<ChartReferenceLineProps> | undefined;
   formattedTimeReferenceLines?: Array<FormattedTimeReferenceLine> | undefined;
   formattedReferenceRegions?: Array<FormattedReferenceRegion> | undefined;
+  /**
+   * Double-click on the plot surface. Bar charts have no drag-to-select of
+   * their own, but they sit on the same dashboards as line/area panels and
+   * must offer the same way out of a board-wide zoom.
+   */
+  onTimeRangeReset?: (() => void) | undefined;
 }
 
 const BarChart: React.ForwardRefExoticComponent<
@@ -735,6 +741,7 @@ const BarChart: React.ForwardRefExoticComponent<
       customTooltip,
       formattedTimeReferenceLines,
       formattedReferenceRegions,
+      onTimeRangeReset,
       ...other
     } = props;
     const CustomTooltip: React.ComponentType<any> | undefined = customTooltip;
@@ -877,6 +884,13 @@ const BarChart: React.ForwardRefExoticComponent<
                     onClick: handleChartClick,
                   }
                 : {})}
+              {...(onTimeRangeReset
+                ? {
+                    onDoubleClick: () => {
+                      onTimeRangeReset();
+                    },
+                  }
+                : {})}
               margin={{
                 bottom: xAxisLabel ? 40 : showXAxis ? 24 : 8,
                 left: yAxisLabel ? 20 : 0,

package/UI/Components/Charts/ChartLibrary/LineChart/LineChart.tsx

@@ -41,6 +41,7 @@ import useChartAnnotations, {
   UseChartAnnotationsResult,
 } from "../Annotations/UseChartAnnotations";
 import { cx } from "../Utils/Cx";
+import { DOUBLE_CLICK_DISAMBIGUATION_MS } from "../Utils/DoubleClick";
 import { getYAxisDomain } from "../Utils/GetYAxisDomain";
 import { hasOnlyOneValueForKey } from "../Utils/HasOnlyOneValueForKey";
 import {
@@ -643,6 +644,15 @@ interface LineChartProps extends React.HTMLAttributes<HTMLDivElement> {
   formattedExemplarPoints?: Array<FormattedExemplarPoint> | undefined;
   onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
   onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
+  /**
+   * Double-click on the plot surface: the counterpart to drag-to-select,
+   * for undoing the zoom it produced. Supplying it makes single clicks
+   * wait DOUBLE_CLICK_DISAMBIGUATION_MS before they act, so a double-click
+   * cannot also fire the bucket-click path twice on its way past — hosts
+   * that have nothing to reset should leave it undefined and keep clicks
+   * instant.
+   */
+  onTimeRangeReset?: (() => void) | undefined;
   /**
    * Plain click on a time bucket (the plot background — dot/legend clicks
    * and drag-selections never reach this). [bucketStart, bucketEnd) uses
@@ -702,6 +712,7 @@ const LineChart: React.ForwardRefExoticComponent<
       formattedTimeReferenceLines,
       formattedReferenceRegions,
       onTimeRangeSelect,
+      onTimeRangeReset,
       onBucketClick,
       ghostCategories,
       ...other
@@ -732,9 +743,26 @@ const LineChart: React.ForwardRefExoticComponent<
       React.useRef<number | null>(null);
     const suppressNextClickRef: React.MutableRefObject<boolean> =
       React.useRef<boolean>(false);
+    const hasOnTimeRangeReset: boolean = Boolean(onTimeRangeReset);
+    /*
+     * A pending single-click, held open long enough for a second click to
+     * cancel it. Only armed when onTimeRangeReset is supplied.
+     */
+    const pendingClickTimeoutRef: React.MutableRefObject<ReturnType<
+      typeof setTimeout
+    > | null> = React.useRef<ReturnType<typeof setTimeout> | null>(null);
     const categoryColors: Map<string, ChartColorValue> =
       constructCategoryColors(categories, colors);
 
+    React.useEffect(() => {
+      return () => {
+        if (pendingClickTimeoutRef.current !== null) {
+          clearTimeout(pendingClickTimeoutRef.current);
+          pendingClickTimeoutRef.current = null;
+        }
+      };
+    }, []);
+
     /*
      * Annotations are drawn onto the categorical axis, so the layer needs
      * the same x values recharts is drawing — not the source dates.
@@ -978,6 +1006,51 @@ const LineChart: React.ForwardRefExoticComponent<
       onTimeRangeSelect(startDate, endDate);
     }
 
+    /*
+     * The plain-click path, split out so it can either run inline (no
+     * reset handler) or be deferred behind the double-click window.
+     */
+    function handleChartClick(chartState: RangeSelectionChartState): void {
+      /*
+       * A click while a legend/dot selection is active keeps its
+       * long-standing meaning — clear the selection — and never
+       * also pins a bucket.
+       */
+      if (hasOnValueChange && (activeLegend || activeDot)) {
+        setActiveDot(undefined);
+        setActiveLegend(undefined);
+        onValueChange?.(null);
+        return;
+      }
+      if (!onBucketClick) {
+        return;
+      }
+      const rowIndex: number | null = getRowIndexFromChartState(chartState);
+      if (rowIndex === null) {
+        return;
+      }
+      const bucketStart: Date | null = getBucketDateAtIndex(rowIndex);
+      if (!bucketStart) {
+        return;
+      }
+      /*
+       * Cover the full bucket: width from adjacent row dates, the
+       * same derivation drag-to-select uses.
+       */
+      const adjacentBucketDate: Date | null =
+        rowIndex > 0
+          ? getBucketDateAtIndex(rowIndex - 1)
+          : getBucketDateAtIndex(rowIndex + 1);
+      const clickedBucketWidthInMs: number = adjacentBucketDate
+        ? Math.abs(bucketStart.getTime() - adjacentBucketDate.getTime())
+        : 0;
+      onBucketClick(
+        bucketStart,
+        new Date(bucketStart.getTime() + clickedBucketWidthInMs),
+        (data[rowIndex] || {}) as Record<string, number | string>,
+      );
+    }
+
     return (
       <div
         ref={ref}
@@ -1016,46 +1089,35 @@ const LineChart: React.ForwardRefExoticComponent<
                 if (suppressNextClickRef.current) {
                   return;
                 }
-                /*
-                 * A click while a legend/dot selection is active keeps its
-                 * long-standing meaning — clear the selection — and never
-                 * also pins a bucket.
-                 */
-                if (hasOnValueChange && (activeLegend || activeDot)) {
-                  setActiveDot(undefined);
-                  setActiveLegend(undefined);
-                  onValueChange?.(null);
-                  return;
-                }
-                if (!onBucketClick) {
-                  return;
-                }
-                const rowIndex: number | null =
-                  getRowIndexFromChartState(chartState);
-                if (rowIndex === null) {
-                  return;
-                }
-                const bucketStart: Date | null = getBucketDateAtIndex(rowIndex);
-                if (!bucketStart) {
+                if (!hasOnTimeRangeReset) {
+                  handleChartClick(chartState);
                   return;
                 }
                 /*
-                 * Cover the full bucket: width from adjacent row dates, the
-                 * same derivation drag-to-select uses.
+                 * Reset is on, so hold the click open: both clicks of a
+                 * double-click arrive before dblclick does, and neither
+                 * may pin a bucket. The second click re-arms the timer,
+                 * dblclick clears it.
                  */
-                const adjacentDate: Date | null =
-                  rowIndex > 0
-                    ? getBucketDateAtIndex(rowIndex - 1)
-                    : getBucketDateAtIndex(rowIndex + 1);
-                const bucketWidthInMs: number = adjacentDate
-                  ? Math.abs(bucketStart.getTime() - adjacentDate.getTime())
-                  : 0;
-                onBucketClick(
-                  bucketStart,
-                  new Date(bucketStart.getTime() + bucketWidthInMs),
-                  (data[rowIndex] || {}) as Record<string, number | string>,
-                );
+                if (pendingClickTimeoutRef.current !== null) {
+                  clearTimeout(pendingClickTimeoutRef.current);
+                }
+                pendingClickTimeoutRef.current = setTimeout(() => {
+                  pendingClickTimeoutRef.current = null;
+                  handleChartClick(chartState);
+                }, DOUBLE_CLICK_DISAMBIGUATION_MS);
               }}
+              {...(hasOnTimeRangeReset
+                ? {
+                    onDoubleClick: () => {
+                      if (pendingClickTimeoutRef.current !== null) {
+                        clearTimeout(pendingClickTimeoutRef.current);
+                        pendingClickTimeoutRef.current = null;
+                      }
+                      onTimeRangeReset?.();
+                    },
+                  }
+                : {})}
               margin={{
                 /*
                  * Tick labels are 10px font with a translate(0, 6) — they

package/UI/Components/Charts/ChartLibrary/Utils/DoubleClick.ts

@@ -0,0 +1,13 @@
+/**
+ * How long a chart holds a single click open, waiting to see whether it is
+ * really the first half of a double-click.
+ *
+ * Charts that accept `onTimeRangeReset` have to tell a bucket click apart
+ * from a reset gesture, and the browser delivers BOTH clicks of a
+ * double-click before it delivers `dblclick` — so the only way a
+ * double-click can avoid also pinning a bucket twice is for the click path
+ * to wait. Kept just above the ~200ms most platforms use as their
+ * double-click threshold, and short enough that a real single click still
+ * feels immediate. Charts with no reset handler skip the wait entirely.
+ */
+export const DOUBLE_CLICK_DISAMBIGUATION_MS: number = 250;

package/UI/Components/Charts/Line/LineChart.tsx

@@ -62,6 +62,12 @@ export interface ComponentProps {
    * buckets calls back with the [start, end) of the selected time range.
    */
   onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
+  /*
+   * Double-click on the plot: undoes whatever drag-to-select produced.
+   * Supply it only when a reset is actually possible — see ChartLibrary
+   * onTimeRangeReset for why an idle handler costs click latency.
+   */
+  onTimeRangeReset?: (() => void) | undefined;
   // Plain click on a bucket — see ChartLibrary onBucketClick.
   onBucketClick?:
     | ((
@@ -221,6 +227,7 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
         }
         onExemplarClick={props.onExemplarClick}
         onTimeRangeSelect={props.onTimeRangeSelect}
+        onTimeRangeReset={props.onTimeRangeReset}
         onBucketClick={props.onBucketClick}
         ghostCategories={props.ghostSeriesNames}
       />

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -201,6 +201,13 @@ export enum ModalTableBulkDefaultActions {
 export interface BulkActionProps<T extends BaseModel | AnalyticsBaseModel> {
   buttons: Array<BulkActionButtonSchema<T> | ModalTableBulkDefaultActions>;
   matchBulkSelectedItemByField?: keyof T | undefined; // which field to use to match selected items. For exmaple this could be '_id'
+  /**
+   * Appended to the bulk Delete confirmation, for a surface where deleting the
+   * selected rows also removes records the user did not select, or where a
+   * reversible alternative exists. The default sentence only says the deletion
+   * cannot be undone - it cannot know what else goes with it.
+   */
+  deleteConfirmationWarning?: string | undefined;
 }
 
 export interface BaseTableProps<
@@ -2923,7 +2930,12 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
             items.length === 1
               ? props.singularName || model.singularName || "item"
               : props.pluralName || model.pluralName || "items";
-          return `Are you sure you want to delete ${items.length} ${itemLabel}? This action cannot be undone.`;
+
+          const warning: string = props.bulkActions?.deleteConfirmationWarning
+            ? ` ${props.bulkActions.deleteConfirmationWarning}`
+            : "";
+
+          return `Are you sure you want to delete ${items.length} ${itemLabel}? This action cannot be undone.${warning}`;
         },
         confirmTitle: (items: Array<TBaseModel>) => {
           const itemLabel: string =
@@ -2946,26 +2958,41 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
           const failedItems: Array<BulkActionFailed<TBaseModel>> = [];
 
           for (let i: number = 0; i < items.length; i++) {
-            try {
-              const item: TBaseModel = items[i]!;
-              // remove items from inProgressItems
-              inProgressItems.splice(inProgressItems.indexOf(item), 1);
+            const item: TBaseModel = items[i]!;
+
+            // remove items from inProgressItems
+            inProgressItems.splice(inProgressItems.indexOf(item), 1);
 
+            try {
               await props.callbacks.deleteItem(item);
               successItems.push(item);
-
-              onProgressInfo({
-                inProgressItems: inProgressItems,
-                successItems: successItems,
-                failed: failedItems,
-                totalItems: items,
-              });
             } catch (err) {
               failedItems.push({
-                item: items[i]!,
+                item: item,
                 failedMessage: API.getFriendlyMessage(err),
               });
             }
+
+            /*
+             * Reported after a failure as well as after a success. This used to
+             * sit inside the `try`, so a row that failed moved neither the
+             * progress bar nor the failure list until some later row succeeded
+             * - and a run whose trailing rows all failed (or one where every
+             * row failed, which is what a permission or constraint problem
+             * looks like) ended with the modal still showing the counts from
+             * before them. Deleting hundreds of rows at once is exactly where
+             * partial failure is expected, so it has to be visible.
+             *
+             * Copies, not the live arrays: the progress info goes into React
+             * state, and pushing into the same array reference leaves the
+             * previous render's snapshot mutated underneath it.
+             */
+            onProgressInfo({
+              inProgressItems: [...inProgressItems],
+              successItems: [...successItems],
+              failed: [...failedItems],
+              totalItems: items,
+            });
           }
 
           onBulkActionEnd();
@@ -3116,9 +3143,17 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
             },
           );
 
+          /*
+           * On a table that already offers bulk actions the gate decides on
+           * its own, because there is no selection column left to grow: the
+           * row checkboxes are already there. That covers the locked case, and
+           * it also covers a master admin - allowed everything by the gate, but
+           * holding no project permission for `userCanDelete` to find, so the
+           * Delete they are entitled to used to be missing from a menu whose
+           * every other action worked (issue #3559).
+           */
           const canAutoInjectDelete: boolean =
-            userCanDelete ||
-            (bulkDeleteGate.disabled && sourceButtons.length > 0);
+            userCanDelete || (bulkDeleteGate.show && sourceButtons.length > 0);
 
           if (canAutoInjectDelete && !alreadyHasDeleteAction) {
             sourceButtons.push(ModalTableBulkDefaultActions.Delete);

package/UI/Components/Navbar/NavBar.tsx

@@ -66,11 +66,11 @@ export interface ComponentProps {
     link: URL;
   };
   /*
-   * When true, the document-level Cmd/Ctrl+K shortcut that toggles the
-   * products menu is not registered — for apps where another surface (e.g. a
-   * command palette) owns that shortcut. The menu itself stays fully usable
-   * via its trigger button. Defaults to false: existing consumers keep the
-   * shortcut.
+   * When true, Cmd/Ctrl+K never opens or toggles the products menu — for apps
+   * where another surface (e.g. a command palette) owns that shortcut. The
+   * menu itself stays usable via its trigger button; if it is already open,
+   * the owner's chord dismisses it without consuming the event. Defaults to
+   * false so existing consumers keep the products shortcut.
    */
   disableCommandKShortcut?: boolean | undefined;
   className?: string;
@@ -85,6 +85,22 @@ export interface ComponentProps {
 const MOBILE_MENU_BOTTOM_GAP_IN_PX: number = 16;
 const MOBILE_MENU_MIN_HEIGHT_IN_PX: number = 160;
 
+/*
+ * Keep the products-menu shortcut and the dashboard command palette on the
+ * same definition of Cmd/Ctrl+K. In particular, modified chords such as
+ * Cmd+Shift+K must be left alone for the browser or another feature.
+ */
+const isCommandKShortcut: (event: KeyboardEvent) => boolean = (
+  event: KeyboardEvent,
+): boolean => {
+  return (
+    (event.metaKey || event.ctrlKey) &&
+    !event.shiftKey &&
+    !event.altKey &&
+    event.key.toLowerCase() === "k"
+  );
+};
+
 const Navbar: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
@@ -96,6 +112,9 @@ const Navbar: FunctionComponent<ComponentProps> = (
   const [mobileMenuMaxHeight, setMobileMenuMaxHeight] = useState<
     number | undefined
   >(undefined);
+  const hasMoreMenu: boolean = Boolean(
+    !props.children && props.moreMenuItems && props.moreMenuItems.length > 0,
+  );
 
   // Use the existing outside click hook for mobile menu
   const {
@@ -173,27 +192,56 @@ const Navbar: FunctionComponent<ComponentProps> = (
 
   // Open/close the products menu with Cmd/Ctrl + K from anywhere.
   useEffect(() => {
-    if (props.disableCommandKShortcut) {
-      // Another surface (e.g. a command palette) owns Cmd/Ctrl+K.
+    if (props.disableCommandKShortcut || !hasMoreMenu) {
+      // Another surface owns Cmd/Ctrl+K, or there is no products menu to open.
       return;
     }
 
     const handleGlobalKeyDown: (event: KeyboardEvent) => void = (
       event: KeyboardEvent,
     ): void => {
-      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
-        event.preventDefault();
-        setIsMoreMenuVisible((visible: boolean) => {
-          return !visible;
-        });
+      if (!isCommandKShortcut(event) || event.defaultPrevented) {
+        return;
       }
+
+      event.preventDefault();
+      setIsMoreMenuVisible((visible: boolean) => {
+        return !visible;
+      });
     };
 
     document.addEventListener("keydown", handleGlobalKeyDown);
     return () => {
       document.removeEventListener("keydown", handleGlobalKeyDown);
     };
-  }, [props.disableCommandKShortcut]);
+  }, [hasMoreMenu, props.disableCommandKShortcut]);
+
+  /*
+   * When the dashboard has surrendered Cmd/Ctrl+K to its command palette, an
+   * already-open products modal must get out of the way before the palette
+   * opens. This close-only listener deliberately does not prevent or stop the
+   * event: the real shortcut owner still needs to receive the same keydown.
+   * It also ignores defaultPrevented so the result is deterministic regardless
+   * of which document listener React registered first.
+   */
+  useEffect(() => {
+    if (!props.disableCommandKShortcut || !hasMoreMenu || !isMoreMenuVisible) {
+      return;
+    }
+
+    const closeProductsOnCommandK: (event: KeyboardEvent) => void = (
+      event: KeyboardEvent,
+    ): void => {
+      if (isCommandKShortcut(event)) {
+        setIsMoreMenuVisible(false);
+      }
+    };
+
+    document.addEventListener("keydown", closeProductsOnCommandK);
+    return () => {
+      document.removeEventListener("keydown", closeProductsOnCommandK);
+    };
+  }, [hasMoreMenu, isMoreMenuVisible, props.disableCommandKShortcut]);
 
   // More menu open/close.
   const openMoreMenu: () => void = (): void => {
@@ -488,6 +536,7 @@ const Navbar: FunctionComponent<ComponentProps> = (
             footer={props.moreMenuFooter}
             searchPlaceholder={props.moreMenuSearchPlaceholder}
             noResultsText={props.moreMenuNoResultsText}
+            showCommandKShortcutHint={!props.disableCommandKShortcut}
             keyboardHint={props.moreMenuKeyboardHint}
             recentLabel={props.moreMenuRecentLabel}
             onClose={closeMoreMenu}