@oneuptime/common 12.0.13 → 12.0.14

package/UI/Components/CommandPalette/PaletteFilter.ts

@@ -0,0 +1,196 @@
+import { PaletteCommand } from "./Types";
+
+/*
+ * Pure, React-free filtering and ranking for the command palette. Kept out of
+ * the component so the ranking contract can be unit-tested directly and reused
+ * by anything that needs "which commands match this text, best first".
+ */
+
+/**
+ * How a command matched the query, best match first. The palette sorts by
+ * this tier and keeps the caller's original order within a tier, so two
+ * commands whose titles both start with the query stay in catalog order.
+ */
+export enum PaletteMatchRank {
+  TitlePrefix = 0,
+  TitleSubstring = 1,
+  Keyword = 2,
+  Category = 3,
+  /** Query characters appear in order in the title, but not adjacently. */
+  TitleSubsequence = 4,
+}
+
+export interface PaletteCommandMatch {
+  command: PaletteCommand;
+  rank: PaletteMatchRank;
+}
+
+/** One run of text in a title/description, flagged when it matched the query. */
+export interface PaletteHighlightSegment {
+  text: string;
+  isMatch: boolean;
+}
+
+export const normalizePaletteQuery: (query: string) => string = (
+  query: string,
+): string => {
+  return query.trim().toLowerCase();
+};
+
+/**
+ * True when every character of `needle` appears in `haystack` in order (not
+ * necessarily adjacent) — the "mntr" finds "Monitors" fallback. Both inputs
+ * are expected to be lowercased already.
+ */
+export const isSubsequenceMatch: (
+  needle: string,
+  haystack: string,
+) => boolean = (needle: string, haystack: string): boolean => {
+  if (needle.length === 0) {
+    return true;
+  }
+  let needleIndex: number = 0;
+  for (
+    let haystackIndex: number = 0;
+    haystackIndex < haystack.length && needleIndex < needle.length;
+    haystackIndex++
+  ) {
+    if (haystack[haystackIndex] === needle[needleIndex]) {
+      needleIndex++;
+    }
+  }
+  return needleIndex === needle.length;
+};
+
+/**
+ * Rank one command against an already-normalized query, or null when it does
+ * not match at all.
+ */
+export const rankPaletteCommand: (
+  command: PaletteCommand,
+  normalizedQuery: string,
+) => PaletteMatchRank | null = (
+  command: PaletteCommand,
+  normalizedQuery: string,
+): PaletteMatchRank | null => {
+  const title: string = command.title.toLowerCase();
+
+  if (title.startsWith(normalizedQuery)) {
+    return PaletteMatchRank.TitlePrefix;
+  }
+  if (title.includes(normalizedQuery)) {
+    return PaletteMatchRank.TitleSubstring;
+  }
+  const keywordMatches: boolean = (command.keywords || []).some(
+    (keyword: string) => {
+      return keyword.toLowerCase().includes(normalizedQuery);
+    },
+  );
+  if (keywordMatches) {
+    return PaletteMatchRank.Keyword;
+  }
+  if (command.category.toLowerCase().includes(normalizedQuery)) {
+    return PaletteMatchRank.Category;
+  }
+  if (isSubsequenceMatch(normalizedQuery, title)) {
+    return PaletteMatchRank.TitleSubsequence;
+  }
+  return null;
+};
+
+/**
+ * Filter commands against free text and return them best-match-first:
+ * title-prefix > title-substring > keyword > category > title-subsequence.
+ * The sort is stable — within a tier the caller's order is preserved. An
+ * empty/whitespace query matches everything in the original order.
+ */
+export const filterPaletteCommands: (
+  commands: Array<PaletteCommand>,
+  query: string,
+) => Array<PaletteCommandMatch> = (
+  commands: Array<PaletteCommand>,
+  query: string,
+): Array<PaletteCommandMatch> => {
+  const normalizedQuery: string = normalizePaletteQuery(query);
+
+  if (!normalizedQuery) {
+    return commands.map((command: PaletteCommand) => {
+      return { command, rank: PaletteMatchRank.TitlePrefix };
+    });
+  }
+
+  const matches: Array<PaletteCommandMatch> = [];
+  commands.forEach((command: PaletteCommand) => {
+    const rank: PaletteMatchRank | null = rankPaletteCommand(
+      command,
+      normalizedQuery,
+    );
+    if (rank !== null) {
+      matches.push({ command, rank });
+    }
+  });
+
+  // Array.prototype.sort is stable, so equal ranks keep catalog order.
+  return matches.sort((a: PaletteCommandMatch, b: PaletteCommandMatch) => {
+    return a.rank - b.rank;
+  });
+};
+
+/**
+ * Split text into segments for <mark> highlighting: every case-insensitive
+ * occurrence of the query becomes a match segment. Subsequence-only matches
+ * produce no highlight (per-character marks read as noise).
+ */
+export const getHighlightSegments: (
+  text: string,
+  query: string,
+) => Array<PaletteHighlightSegment> = (
+  text: string,
+  query: string,
+): Array<PaletteHighlightSegment> => {
+  const needle: string = normalizePaletteQuery(query);
+  if (!needle) {
+    return [{ text, isMatch: false }];
+  }
+
+  const haystack: string = text.toLowerCase();
+  const segments: Array<PaletteHighlightSegment> = [];
+  let cursor: number = 0;
+  let matchAt: number = haystack.indexOf(needle);
+
+  while (matchAt !== -1) {
+    if (matchAt > cursor) {
+      segments.push({ text: text.slice(cursor, matchAt), isMatch: false });
+    }
+    segments.push({
+      text: text.slice(matchAt, matchAt + needle.length),
+      isMatch: true,
+    });
+    cursor = matchAt + needle.length;
+    matchAt = haystack.indexOf(needle, cursor);
+  }
+
+  if (cursor < text.length) {
+    segments.push({ text: text.slice(cursor), isMatch: false });
+  }
+
+  if (segments.length === 0) {
+    return [{ text, isMatch: false }];
+  }
+
+  return segments;
+};
+
+/**
+ * Stable slug for section test ids: "Analytics & Automation" →
+ * "analytics-automation". Search-provider sections use the provider's own id
+ * instead of this.
+ */
+export const getPaletteSectionId: (title: string) => string = (
+  title: string,
+): string => {
+  return title
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+};

package/UI/Components/CommandPalette/PaletteRow.tsx

@@ -0,0 +1,173 @@
+import Icon from "../Icon/Icon";
+import KeyboardShortcut, {
+  KeyboardShortcutSize,
+  KeyboardShortcutVariant,
+} from "../KeyboardShortcut/KeyboardShortcut";
+import { KeyboardShortcutKey } from "../KeyboardShortcut/KeyboardKey";
+import IconProp from "../../../Types/Icon/IconProp";
+import { getHighlightSegments, PaletteHighlightSegment } from "./PaletteFilter";
+import React, { FunctionComponent, ReactElement, ReactNode } from "react";
+
+interface IconColorClasses {
+  bg: string;
+  ring: string;
+  text: string;
+}
+
+/*
+ * Same Tailwind color-name convention (and palette) as the NavBar items /
+ * NavBarMenuModal: a soft tinted square with a ring and a colored glyph.
+ * Unknown colors fall back to indigo. Every class here already has an
+ * html.dark remap in Theme.css (the navbar menu ships the identical set).
+ */
+const ICON_COLOR_CLASSES: Record<string, IconColorClasses> = {
+  purple: {
+    bg: "bg-purple-50",
+    ring: "ring-purple-200",
+    text: "text-purple-600",
+  },
+  blue: { bg: "bg-blue-50", ring: "ring-blue-200", text: "text-blue-600" },
+  gray: { bg: "bg-gray-100", ring: "ring-gray-300", text: "text-gray-600" },
+  amber: { bg: "bg-amber-50", ring: "ring-amber-200", text: "text-amber-600" },
+  green: { bg: "bg-green-50", ring: "ring-green-200", text: "text-green-600" },
+  cyan: { bg: "bg-cyan-50", ring: "ring-cyan-200", text: "text-cyan-600" },
+  slate: { bg: "bg-slate-100", ring: "ring-slate-300", text: "text-slate-600" },
+  indigo: {
+    bg: "bg-indigo-50",
+    ring: "ring-indigo-200",
+    text: "text-indigo-600",
+  },
+  rose: { bg: "bg-rose-50", ring: "ring-rose-200", text: "text-rose-600" },
+  violet: {
+    bg: "bg-violet-50",
+    ring: "ring-violet-200",
+    text: "text-violet-600",
+  },
+  orange: {
+    bg: "bg-orange-50",
+    ring: "ring-orange-200",
+    text: "text-orange-600",
+  },
+  stone: { bg: "bg-stone-100", ring: "ring-stone-300", text: "text-stone-600" },
+  sky: { bg: "bg-sky-50", ring: "ring-sky-200", text: "text-sky-600" },
+  emerald: {
+    bg: "bg-emerald-50",
+    ring: "ring-emerald-200",
+    text: "text-emerald-600",
+  },
+  yellow: {
+    bg: "bg-yellow-50",
+    ring: "ring-yellow-200",
+    text: "text-yellow-600",
+  },
+  red: { bg: "bg-red-50", ring: "ring-red-200", text: "text-red-600" },
+  teal: { bg: "bg-teal-50", ring: "ring-teal-200", text: "text-teal-600" },
+};
+
+/** What a palette row needs to paint itself — command and provider results both reduce to this. */
+export interface PaletteRowItem {
+  /**
+   * Unique across everything visible in the palette (recents are prefixed,
+   * provider results are namespaced by provider id). Used for the option's
+   * DOM id and data-testid.
+   */
+  id: string;
+  title: string;
+  description?: string | undefined;
+  icon?: IconProp | undefined;
+  iconColor?: string | undefined;
+  shortcut?: Array<KeyboardShortcutKey> | undefined;
+}
+
+export interface ComponentProps {
+  item: PaletteRowItem;
+  /** Current search text — matching runs of title/description get a <mark>. */
+  query: string;
+  isActive: boolean;
+  /** Selection follows the mouse: fired on mousemove over the row. */
+  onActivate: () => void;
+  onSelect: () => void;
+  setRowElement: (element: HTMLDivElement | null) => void;
+}
+
+// Wrap the portions of text that match the query in a highlight.
+const highlightMatch: (text: string, query: string) => ReactNode = (
+  text: string,
+  query: string,
+): ReactNode => {
+  const segments: Array<PaletteHighlightSegment> = getHighlightSegments(
+    text,
+    query,
+  );
+  return segments.map((segment: PaletteHighlightSegment, index: number) => {
+    if (!segment.isMatch) {
+      return <React.Fragment key={index}>{segment.text}</React.Fragment>;
+    }
+    return (
+      <mark
+        key={index}
+        className="rounded-sm bg-yellow-100 px-0.5 text-inherit"
+      >
+        {segment.text}
+      </mark>
+    );
+  });
+};
+
+const PaletteRow: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const item: PaletteRowItem = props.item;
+  const colors: IconColorClasses =
+    ICON_COLOR_CLASSES[item.iconColor || "indigo"] ||
+    ICON_COLOR_CLASSES["indigo"]!;
+
+  return (
+    <div
+      id={`command-palette-option-${item.id}`}
+      data-testid={`command-palette-option-${item.id}`}
+      role="option"
+      aria-selected={props.isActive}
+      ref={(element: HTMLDivElement | null) => {
+        props.setRowElement(element);
+      }}
+      onMouseMove={() => {
+        props.onActivate();
+      }}
+      onClick={() => {
+        props.onSelect();
+      }}
+      className={`flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 transition-colors duration-100 ${
+        props.isActive ? "bg-indigo-50" : ""
+      }`}
+    >
+      {item.icon && (
+        <div
+          className={`flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg ring-1 ${colors.bg} ${colors.ring}`}
+        >
+          <Icon icon={item.icon} className={`h-4 w-4 ${colors.text}`} />
+        </div>
+      )}
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-sm font-medium text-gray-900">
+          {highlightMatch(item.title, props.query)}
+        </p>
+        {item.description && (
+          <p className="truncate text-xs text-gray-500">
+            {highlightMatch(item.description, props.query)}
+          </p>
+        )}
+      </div>
+      {item.shortcut && item.shortcut.length > 0 && (
+        <KeyboardShortcut
+          keys={item.shortcut}
+          size={KeyboardShortcutSize.ExtraSmall}
+          variant={KeyboardShortcutVariant.Ghost}
+          className="flex-shrink-0"
+        />
+      )}
+    </div>
+  );
+};
+
+export default PaletteRow;

package/UI/Components/CommandPalette/RecentCommands.ts

@@ -0,0 +1,57 @@
+/*
+ * Recently-run palette commands, persisted as an array of command ids in
+ * localStorage. Same guarded read/write shape as the navbar's recent products
+ * (NavBarMenuModal): storage can be absent (SSR), locked (private mode), or
+ * hold garbage — every failure mode degrades to "no recents", never a throw.
+ */
+
+export const RECENT_COMMANDS_LIMIT: number = 7;
+
+export const readRecentCommandIds: (storageKey: string) => Array<string> = (
+  storageKey: string,
+): Array<string> => {
+  try {
+    if (typeof window === "undefined" || !window.localStorage) {
+      return [];
+    }
+    const raw: string | null = window.localStorage.getItem(storageKey);
+    if (!raw) {
+      return [];
+    }
+    const parsed: unknown = JSON.parse(raw);
+    if (!Array.isArray(parsed)) {
+      return [];
+    }
+    return parsed
+      .filter((value: unknown): value is string => {
+        return typeof value === "string";
+      })
+      .slice(0, RECENT_COMMANDS_LIMIT);
+  } catch {
+    // Ignore storage access / parse errors (e.g. private mode, bad JSON).
+    return [];
+  }
+};
+
+export const writeRecentCommandId: (
+  storageKey: string,
+  commandId: string,
+) => void = (storageKey: string, commandId: string): void => {
+  try {
+    if (typeof window === "undefined" || !window.localStorage) {
+      return;
+    }
+    const existing: Array<string> = readRecentCommandIds(storageKey).filter(
+      (id: string) => {
+        return id !== commandId;
+      },
+    );
+    const next: Array<string> = [commandId, ...existing].slice(
+      0,
+      RECENT_COMMANDS_LIMIT,
+    );
+    window.localStorage.setItem(storageKey, JSON.stringify(next));
+  } catch {
+    // Ignore storage write errors (e.g. private mode, quota exceeded).
+  }
+};

package/UI/Components/CommandPalette/Types.ts

@@ -0,0 +1,49 @@
+import IconProp from "../../../Types/Icon/IconProp";
+import { KeyboardShortcutKey } from "../KeyboardShortcut/KeyboardKey";
+
+/**
+ * One executable entry in the command palette: a page to jump to, or an
+ * action to run. Commands are static (known before the user types) — async
+ * results from the backend go through PaletteSearchProvider instead.
+ */
+export interface PaletteCommand {
+  /** Stable unique id — recents are persisted as a list of these ids. */
+  id: string;
+  title: string;
+  description?: string | undefined;
+  icon?: IconProp | undefined;
+  /** Tailwind color name like "blue" | "purple" — same convention as NavBar items. */
+  iconColor?: string | undefined;
+  /** Section the command is grouped under when browsing (e.g. "Essentials"). */
+  category: string;
+  /** Extra match terms the user might type that are not in the title. */
+  keywords?: Array<string> | undefined;
+  /** Optional shortcut hint rendered as keycaps on the row. */
+  shortcut?: Array<KeyboardShortcutKey> | undefined;
+  onSelect: () => void;
+}
+
+/** One row returned by an async search provider. */
+export interface PaletteSearchResult {
+  /** Unique within the provider's result set. */
+  id: string;
+  title: string;
+  description?: string | undefined;
+  icon?: IconProp | undefined;
+  /** Tailwind color name like "blue" | "purple" — same convention as NavBar items. */
+  iconColor?: string | undefined;
+  onSelect: () => void;
+}
+
+/**
+ * Async source of palette rows (e.g. "search monitors by name"). Providers
+ * run in parallel once the query is long enough; a provider that rejects
+ * shows nothing — it must never take the palette down with it.
+ */
+export interface PaletteSearchProvider {
+  /** Stable unique id, also used in section test ids. */
+  id: string;
+  /** Section heading shown above this provider's results. */
+  title: string;
+  search: (searchText: string) => Promise<Array<PaletteSearchResult>>;
+}

package/UI/Components/CommandPalette/UseProviderSearch.ts

@@ -0,0 +1,129 @@
+import { PaletteSearchProvider, PaletteSearchResult } from "./Types";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+
+/*
+ * Async search-provider plumbing for the command palette, isolated from the
+ * rendering so the timing contract (debounce, stale discard, per-provider
+ * error isolation) is directly unit-testable with fake timers.
+ */
+
+export const PROVIDER_SEARCH_DEBOUNCE_MS: number = 200;
+export const PROVIDER_SEARCH_MIN_QUERY_LENGTH: number = 2;
+
+export interface ProviderSearchSection {
+  provider: PaletteSearchProvider;
+  results: Array<PaletteSearchResult>;
+  /** True from the moment the debounced search fires until this provider settles. */
+  isPending: boolean;
+}
+
+/**
+ * Runs every provider in parallel against the query, 200ms after the user
+ * stops typing and only once the query is at least 2 characters.
+ *
+ * - Stale responses are discarded: each debounced dispatch bumps a sequence
+ *   token, and a response only lands if its token is still current.
+ * - Providers are isolated: one rejecting shows an empty section for that
+ *   provider and never disturbs the others (and never throws).
+ *
+ * NOTE for callers: memoize the `providers` array (useMemo) — a fresh array
+ * identity on every render restarts the debounce timer each keystroke's
+ * re-render, effectively working but wastefully re-arming.
+ */
+const useProviderSearch: (
+  providers: Array<PaletteSearchProvider>,
+  query: string,
+) => Array<ProviderSearchSection> = (
+  providers: Array<PaletteSearchProvider>,
+  query: string,
+): Array<ProviderSearchSection> => {
+  const [resultsByProviderId, setResultsByProviderId] = useState<
+    Record<string, Array<PaletteSearchResult>>
+  >({});
+  const [pendingByProviderId, setPendingByProviderId] = useState<
+    Record<string, boolean>
+  >({});
+  const sequenceRef: React.MutableRefObject<number> = useRef<number>(0);
+
+  const trimmedQuery: string = query.trim();
+
+  useEffect(() => {
+    if (providers.length === 0) {
+      return undefined;
+    }
+
+    if (trimmedQuery.length < PROVIDER_SEARCH_MIN_QUERY_LENGTH) {
+      // Invalidate anything still in flight and clear old results.
+      sequenceRef.current++;
+      setResultsByProviderId({});
+      setPendingByProviderId({});
+      return undefined;
+    }
+
+    const debounceTimer: ReturnType<typeof setTimeout> = setTimeout(() => {
+      const sequence: number = ++sequenceRef.current;
+
+      const allPending: Record<string, boolean> = {};
+      providers.forEach((provider: PaletteSearchProvider) => {
+        allPending[provider.id] = true;
+      });
+      setPendingByProviderId(allPending);
+
+      providers.forEach((provider: PaletteSearchProvider) => {
+        provider
+          .search(trimmedQuery)
+          .then((results: Array<PaletteSearchResult>) => {
+            if (sequence !== sequenceRef.current) {
+              return; // A newer query has been dispatched since.
+            }
+            setResultsByProviderId(
+              (
+                previous: Record<string, Array<PaletteSearchResult>>,
+              ): Record<string, Array<PaletteSearchResult>> => {
+                return { ...previous, [provider.id]: results };
+              },
+            );
+            setPendingByProviderId(
+              (previous: Record<string, boolean>): Record<string, boolean> => {
+                return { ...previous, [provider.id]: false };
+              },
+            );
+          })
+          .catch(() => {
+            // A failed provider simply shows nothing — never an error state.
+            if (sequence !== sequenceRef.current) {
+              return;
+            }
+            setResultsByProviderId(
+              (
+                previous: Record<string, Array<PaletteSearchResult>>,
+              ): Record<string, Array<PaletteSearchResult>> => {
+                return { ...previous, [provider.id]: [] };
+              },
+            );
+            setPendingByProviderId(
+              (previous: Record<string, boolean>): Record<string, boolean> => {
+                return { ...previous, [provider.id]: false };
+              },
+            );
+          });
+      });
+    }, PROVIDER_SEARCH_DEBOUNCE_MS);
+
+    return () => {
+      clearTimeout(debounceTimer);
+    };
+  }, [trimmedQuery, providers]);
+
+  return useMemo(() => {
+    return providers.map((provider: PaletteSearchProvider) => {
+      return {
+        provider,
+        results: resultsByProviderId[provider.id] || [],
+        isPending: Boolean(pendingByProviderId[provider.id]),
+      };
+    });
+  }, [providers, resultsByProviderId, pendingByProviderId]);
+};
+
+export default useProviderSearch;

package/UI/Components/Dropdown/Dropdown.tsx

@@ -589,7 +589,12 @@ const Dropdown: FunctionComponent<ComponentProps> = (
             return "text-gray-400 transition-colors duration-150 hover:text-red-500";
           },
           menu: () => {
-            return "!mt-2 !rounded-xl !border !border-gray-100 !bg-white !shadow-xl";
+            /*
+             * ou-animate-pop-in (Theme.css) is a CSS animation, not a
+             * transition: react-select mounts the portalled menu already open,
+             * so there is no closed state to transition from.
+             */
+            return "!mt-2 !rounded-xl !border !border-gray-100 !bg-white !shadow-xl ou-animate-pop-in";
           },
           menuList: () => {
             return "!py-2";

package/UI/Components/Feed/FeedItem.tsx

@@ -8,7 +8,7 @@ import UserUtil from "../../Utils/User";
 import ObjectID from "../../../Types/ObjectID";
 import OneUptimeDate from "../../../Types/Date";
 import Tooltip from "../Tooltip/Tooltip";
-import MarkdownViewer from "../Markdown.tsx/MarkdownViewer";
+import MarkdownViewer from "../Markdown.tsx/LazyMarkdownViewer";
 import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
 import ConfirmModal from "../Modal/ConfirmModal";
 import Icon from "../Icon/Icon";