@oneuptime/common 13.0.3 → 13.0.5

package/UI/Components/TelemetryViewer/components/LockedFilterChip.tsx

@@ -0,0 +1,496 @@
+import React, {
+  FunctionComponent,
+  ReactElement,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import Icon from "../../Icon/Icon";
+import Tooltip from "../../Tooltip/Tooltip";
+import IconProp from "../../../../Types/Icon/IconProp";
+import Clipboard from "../../../Utils/Clipboard";
+import {
+  LockedFilterDetail,
+  LockedFilterPredicate,
+} from "../../../../Types/Telemetry/LockedFilterDetail";
+import {
+  TELEMETRY_EXPLORER_LABELS,
+  TelemetrySignal,
+} from "../../../../Utils/Telemetry/LockedFilterSearch";
+
+/*
+ * The grey lock chip every telemetry explorer shows for a filter its host
+ * page pinned — "Cluster: production" on a Kubernetes cluster's Logs tab.
+ *
+ * The chip used to say nothing beyond "(applied filter)", so a reader could
+ * not tell whether the match was by resource attribute, by entity membership
+ * or by service id, nor how to reproduce it on the main explorer. When the
+ * builder attaches a LockedFilterDetail the chip carries a rich tooltip that
+ * spells all of that out and offers the search syntax to copy; without one it
+ * keeps the plain, non-focusable pill it always was — a chip with nothing to
+ * open must not be a tab stop.
+ *
+ * Keyboard path: the explanation lives in a Tippy popover that is appended
+ * after the chip row, so Tab from the chip lands on the next chip and never
+ * inside the popover. The chip with a detail is therefore a real button —
+ * focus opens the explanation (Tippy's focus trigger, read out through
+ * aria-describedby), and Enter / Space copies the search syntax right there,
+ * with the result announced through a live region.
+ *
+ * Shared by the logs chip list and the traces / metrics chip list so the two
+ * explain a locked filter the same way.
+ */
+
+export const COPIED_FEEDBACK_MS: number = 1500;
+
+export const LOCKED_FILTER_CHIP_CLASS_NAME: string =
+  "inline-flex items-center gap-1 rounded-md border border-gray-300 bg-gray-100 py-0.5 pl-2 pr-2 text-xs text-gray-700";
+
+export const COPIED_SEARCH_SYNTAX_ANNOUNCEMENT: string = "Copied search syntax";
+export const COPY_FAILED_ANNOUNCEMENT: string = "Copy failed";
+
+type GetLockedFilterChipAriaLabelFunction = (
+  displayKey: string,
+  displayValue: string,
+  hasSearchToken?: boolean | undefined,
+) => string;
+
+/**
+ * The accessible name of a chip that carries a detail. It names the filter,
+ * says it is locked, and — when there is syntax to copy — tells a keyboard
+ * user what Enter does, since the tooltip's own Copy button is out of reach.
+ */
+export const getLockedFilterChipAriaLabel: GetLockedFilterChipAriaLabelFunction =
+  (
+    displayKey: string,
+    displayValue: string,
+    hasSearchToken?: boolean | undefined,
+  ): string => {
+    const base: string = `${displayKey}: ${displayValue}, locked filter`;
+
+    if (!hasSearchToken) {
+      return base;
+    }
+
+    return `${base}. Press Enter to copy its search syntax.`;
+  };
+
+export interface CopiedFeedback {
+  /** True for COPIED_FEEDBACK_MS after a copy that reached the clipboard. */
+  copied: boolean;
+  /** True for COPIED_FEEDBACK_MS after a copy that did not. */
+  failed: boolean;
+  copy: (text: string) => Promise<boolean>;
+}
+
+/**
+ * A one-shot copy state: `copied` or `failed` for COPIED_FEEDBACK_MS after
+ * `copy()`, according to what the clipboard actually did — never both, and
+ * never flipped on an unmounted component.
+ */
+export function useCopiedFeedback(): CopiedFeedback {
+  const [copied, setCopied] = useState<boolean>(false);
+  const [failed, setFailed] = useState<boolean>(false);
+  const timerRef: React.MutableRefObject<ReturnType<typeof setTimeout> | null> =
+    useRef<ReturnType<typeof setTimeout> | null>(null);
+  const mountedRef: React.MutableRefObject<boolean> = useRef<boolean>(true);
+
+  useEffect(() => {
+    mountedRef.current = true;
+
+    return (): void => {
+      mountedRef.current = false;
+
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+
+  const copy: (text: string) => Promise<boolean> = async (
+    text: string,
+  ): Promise<boolean> => {
+    const succeeded: boolean = await Clipboard.copyToClipboard(text);
+
+    if (!mountedRef.current) {
+      return succeeded;
+    }
+
+    setCopied(succeeded);
+    setFailed(!succeeded);
+
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+
+    timerRef.current = setTimeout((): void => {
+      if (mountedRef.current) {
+        setCopied(false);
+        setFailed(false);
+      }
+    }, COPIED_FEEDBACK_MS);
+
+    return succeeded;
+  };
+
+  return { copied, failed, copy };
+}
+
+export interface LockedFilterTooltipContentProps {
+  displayKey: string;
+  displayValue: string;
+  lockedDetail: LockedFilterDetail;
+  signal?: TelemetrySignal | undefined;
+}
+
+interface SearchSyntaxRowProps {
+  searchToken: string;
+  signal?: TelemetrySignal | undefined;
+}
+
+type CopyButtonLabelFunction = (feedback: CopiedFeedback) => string;
+
+const copyButtonText: CopyButtonLabelFunction = (
+  feedback: CopiedFeedback,
+): string => {
+  if (feedback.copied) {
+    return "Copied!";
+  }
+
+  if (feedback.failed) {
+    return "Copy failed";
+  }
+
+  return "Copy";
+};
+
+const SearchSyntaxRow: FunctionComponent<SearchSyntaxRowProps> = (
+  props: SearchSyntaxRowProps,
+): ReactElement => {
+  const feedback: CopiedFeedback = useCopiedFeedback();
+
+  const explorerLabel: string | undefined = props.signal
+    ? TELEMETRY_EXPLORER_LABELS[props.signal]
+    : undefined;
+
+  const buttonClassName: string = feedback.copied
+    ? "border-emerald-200 bg-emerald-50 text-emerald-600"
+    : feedback.failed
+      ? "border-rose-200 bg-rose-50 text-rose-600"
+      : "border-gray-200 bg-white text-gray-500 hover:bg-gray-50 hover:text-gray-700";
+
+  return (
+    <div className="space-y-1">
+      <div className="flex items-start gap-1.5">
+        <code
+          className="min-w-0 flex-1 break-all rounded border border-gray-200 bg-gray-50 px-1.5 py-1 font-mono text-[11px] text-gray-800"
+          data-testid="locked-filter-search-token"
+        >
+          {props.searchToken}
+        </code>
+        <button
+          type="button"
+          aria-label={
+            feedback.copied
+              ? "Copied"
+              : feedback.failed
+                ? "Copy failed"
+                : "Copy search syntax"
+          }
+          className={`inline-flex h-6 shrink-0 items-center gap-1 rounded border px-1.5 text-[11px] font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 ${buttonClassName}`}
+          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+            /*
+             * The chip's own handlers (and any row the chip list sits in)
+             * must not see this click as theirs.
+             */
+            event.preventDefault();
+            event.stopPropagation();
+            void feedback.copy(props.searchToken);
+          }}
+        >
+          <Icon
+            icon={
+              feedback.copied
+                ? IconProp.Check
+                : feedback.failed
+                  ? IconProp.Close
+                  : IconProp.Copy
+            }
+            className="h-3 w-3"
+          />
+          <span>{copyButtonText(feedback)}</span>
+        </button>
+      </div>
+      <p className="text-[11px] text-gray-400">
+        {explorerLabel
+          ? `Paste into the ${explorerLabel} explorer search bar.`
+          : "Paste into the explorer search bar."}
+      </p>
+    </div>
+  );
+};
+
+/**
+ * The body of the locked chip's tooltip. Exported so tests can render it
+ * without going through Tippy's hover timers.
+ */
+export const LockedFilterTooltipContent: FunctionComponent<
+  LockedFilterTooltipContentProps
+> = (props: LockedFilterTooltipContentProps): ReactElement => {
+  const detail: LockedFilterDetail = props.lockedDetail;
+  const predicates: Array<LockedFilterPredicate> = detail.predicates || [];
+
+  const combinatorLabel: string | null =
+    predicates.length > 1
+      ? detail.combinator === "any"
+        ? "(any of)"
+        : "(all of)"
+      : null;
+
+  return (
+    <div
+      className="w-80 max-w-full space-y-2 p-1 text-left text-xs"
+      data-testid="locked-filter-tooltip"
+    >
+      <div className="flex items-center gap-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400">
+        <Icon icon={IconProp.Lock} className="h-3 w-3" />
+        <span>Locked filter</span>
+      </div>
+
+      <div className="font-medium text-gray-900">
+        <span className="text-gray-500">{props.displayKey}:</span>{" "}
+        <span className="break-all">{props.displayValue}</span>
+      </div>
+
+      <p className="text-gray-700">{detail.summary}</p>
+
+      <p className="text-[11px] text-gray-400">{detail.source}</p>
+
+      {predicates.length > 0 && (
+        <div className="space-y-1 border-t border-gray-100 pt-2">
+          <div className="text-[10px] font-semibold uppercase tracking-wider text-gray-400">
+            How rows are matched{combinatorLabel ? ` ${combinatorLabel}` : ""}
+          </div>
+          <ul className="space-y-1.5">
+            {predicates.map(
+              (predicate: LockedFilterPredicate, index: number) => {
+                return (
+                  <li
+                    key={`${predicate.label}-${index}`}
+                    className="space-y-0.5"
+                  >
+                    {/*
+                     * Label above the expression, not beside it: an
+                     * expression that wraps under a side label reads as a
+                     * hanging indent, and attribute predicates wrap often.
+                     */}
+                    <div className="text-[11px] text-gray-500">
+                      {predicate.label}
+                    </div>
+                    <code className="block break-all rounded bg-gray-50 px-1.5 py-0.5 font-mono text-[11px] text-gray-800">
+                      {predicate.expression}
+                    </code>
+                    {predicate.note && (
+                      <p className="text-[11px] text-gray-400">
+                        {predicate.note}
+                      </p>
+                    )}
+                  </li>
+                );
+              },
+            )}
+          </ul>
+        </div>
+      )}
+
+      {(detail.searchToken || detail.searchTokenUnavailableReason) && (
+        <div className="space-y-1 border-t border-gray-100 pt-2">
+          <div className="text-[10px] font-semibold uppercase tracking-wider text-gray-400">
+            Search syntax
+          </div>
+          {detail.searchToken ? (
+            <SearchSyntaxRow
+              searchToken={detail.searchToken}
+              signal={props.signal}
+            />
+          ) : (
+            <p className="text-[11px] text-gray-400">
+              {detail.searchTokenUnavailableReason}
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export interface LockedFilterChipProps {
+  displayKey: string;
+  displayValue: string;
+  lockedDetail?: LockedFilterDetail | undefined;
+  signal?: TelemetrySignal | undefined;
+  /*
+   * Rendered inside the pill after the value — the logs list passes its
+   * "open trace / span view" icon-link here. It is a sibling of the chip's
+   * own control, never nested inside it: a link inside a button is
+   * operable by neither.
+   */
+  trailing?: ReactNode;
+}
+
+interface LockedFilterChipBodyProps {
+  displayKey: string;
+  displayValue: string;
+  /** The lock, or the copy outcome for a moment after Enter. */
+  copied: boolean;
+  failed: boolean;
+}
+
+const LockedFilterChipBody: FunctionComponent<LockedFilterChipBodyProps> = (
+  props: LockedFilterChipBodyProps,
+): ReactElement => {
+  return (
+    <>
+      <Icon
+        icon={
+          props.copied
+            ? IconProp.Check
+            : props.failed
+              ? IconProp.Close
+              : IconProp.Lock
+        }
+        className={`h-2.5 w-2.5 ${
+          props.copied
+            ? "text-emerald-500"
+            : props.failed
+              ? "text-rose-500"
+              : "text-gray-400"
+        }`}
+      />
+      <span className="font-medium text-gray-500">{props.displayKey}:</span>
+      <span>{props.displayValue}</span>
+    </>
+  );
+};
+
+interface ExplainedLockedFilterChipProps {
+  displayKey: string;
+  displayValue: string;
+  lockedDetail: LockedFilterDetail;
+  signal?: TelemetrySignal | undefined;
+  trailing?: ReactNode;
+}
+
+/*
+ * The chip that has something to say. The control is a native button so it
+ * is focusable with a role that permits a name; Tippy attaches its
+ * explanation to it (focus and hover open it; aria-describedby reads it).
+ */
+const ExplainedLockedFilterChip: FunctionComponent<
+  ExplainedLockedFilterChipProps
+> = (props: ExplainedLockedFilterChipProps): ReactElement => {
+  const feedback: CopiedFeedback = useCopiedFeedback();
+  const searchToken: string | undefined = props.lockedDetail.searchToken;
+
+  const announcement: string = feedback.copied
+    ? COPIED_SEARCH_SYNTAX_ANNOUNCEMENT
+    : feedback.failed
+      ? COPY_FAILED_ANNOUNCEMENT
+      : "";
+
+  const control: ReactElement = (
+    <button
+      type="button"
+      className="inline-flex cursor-help items-center gap-1 rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400"
+      aria-label={getLockedFilterChipAriaLabel(
+        props.displayKey,
+        props.displayValue,
+        Boolean(searchToken),
+      )}
+      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+        /*
+         * Enter and Space arrive here as clicks on a native button. A chip
+         * without syntax has nothing to copy; its button exists so the
+         * explanation is reachable from the keyboard at all.
+         */
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (searchToken) {
+          void feedback.copy(searchToken);
+        }
+      }}
+    >
+      <LockedFilterChipBody
+        displayKey={props.displayKey}
+        displayValue={props.displayValue}
+        copied={feedback.copied}
+        failed={feedback.failed}
+      />
+    </button>
+  );
+
+  return (
+    <span
+      className={LOCKED_FILTER_CHIP_CLASS_NAME}
+      data-testid="locked-filter-chip"
+    >
+      <Tooltip
+        richContent={
+          <LockedFilterTooltipContent
+            displayKey={props.displayKey}
+            displayValue={props.displayValue}
+            lockedDetail={props.lockedDetail}
+            signal={props.signal}
+          />
+        }
+      >
+        {control}
+      </Tooltip>
+      {props.trailing}
+      <span className="sr-only" aria-live="polite" role="status">
+        {announcement}
+      </span>
+    </span>
+  );
+};
+
+const LockedFilterChip: FunctionComponent<LockedFilterChipProps> = (
+  props: LockedFilterChipProps,
+): ReactElement => {
+  if (!props.lockedDetail) {
+    /*
+     * Exactly the pill from before the explainer: not focusable, no name of
+     * its own, the plain title. Nothing would open on focus, so a tab stop
+     * here would be a dead one.
+     */
+    return (
+      <span
+        className={LOCKED_FILTER_CHIP_CLASS_NAME}
+        title={`${props.displayKey}: ${props.displayValue} (applied filter)`}
+        data-testid="locked-filter-chip"
+      >
+        <LockedFilterChipBody
+          displayKey={props.displayKey}
+          displayValue={props.displayValue}
+          copied={false}
+          failed={false}
+        />
+        {props.trailing}
+      </span>
+    );
+  }
+
+  return (
+    <ExplainedLockedFilterChip
+      displayKey={props.displayKey}
+      displayValue={props.displayValue}
+      lockedDetail={props.lockedDetail}
+      signal={props.signal}
+      trailing={props.trailing}
+    />
+  );
+};
+
+export default LockedFilterChip;

package/UI/Components/TelemetryViewer/components/TelemetryActiveFilterChips.tsx

@@ -2,11 +2,27 @@ import React, { FunctionComponent, ReactElement } from "react";
 import { ActiveFilter } from "../types";
 import Icon from "../../Icon/Icon";
 import IconProp from "../../../../Types/Icon/IconProp";
+import LockedFilterChip from "./LockedFilterChip";
+import LockedFilterActions, {
+  LockedFilterActionOptions,
+} from "./LockedFilterActions";
+import { TelemetrySignal } from "../../../../Utils/Telemetry/LockedFilterSearch";
 
 export interface TelemetryActiveFilterChipsProps {
   filters: Array<ActiveFilter>;
   onRemove: (facetKey: string, value: string) => void;
   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.
+   * Without it the chips explain themselves but name no explorer.
+   */
+  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;
 }
 
 const TelemetryActiveFilterChips: FunctionComponent<
@@ -32,19 +48,23 @@ const TelemetryActiveFilterChips: FunctionComponent<
       {readOnlyFilters.map((filter: ActiveFilter) => {
         const chipKey: string = `readonly:${filter.facetKey}:${filter.value}`;
         return (
-          <span
+          <LockedFilterChip
             key={chipKey}
-            className="inline-flex items-center gap-1 rounded-md border border-gray-300 bg-gray-100 py-0.5 pl-2 pr-2 text-xs text-gray-700"
-            title={`${filter.displayKey}: ${filter.displayValue} (applied filter)`}
-          >
-            <Icon icon={IconProp.Lock} className="h-2.5 w-2.5 text-gray-400" />
-            <span className="font-medium text-gray-500">
-              {filter.displayKey}:
-            </span>
-            <span>{filter.displayValue}</span>
-          </span>
+            displayKey={filter.displayKey}
+            displayValue={filter.displayValue}
+            lockedDetail={filter.lockedDetail}
+            signal={props.signal}
+          />
         );
       })}
+      {readOnlyFilters.length > 0 &&
+        props.signal &&
+        props.lockedFilterActions && (
+          <LockedFilterActions
+            signal={props.signal}
+            {...props.lockedFilterActions}
+          />
+        )}
       {removableFilters.map((filter: ActiveFilter) => {
         const chipKey: string = `${filter.facetKey}:${filter.value}`;
         return (