@oneuptime/common 13.0.5 → 13.0.6

package/Tests/UI/Components/LockedFilterChip.test.tsx

@@ -13,6 +13,7 @@ import {
   fireEvent,
   render,
   screen,
+  within,
 } from "@testing-library/react";
 import React from "react";
 import LockedFilterChip, {
@@ -20,17 +21,20 @@ import LockedFilterChip, {
   COPIED_SEARCH_SYNTAX_ANNOUNCEMENT,
   COPY_FAILED_ANNOUNCEMENT,
   LockedFilterTooltipContent,
+  NO_SEARCH_SYNTAX_REASON,
   getLockedFilterChipAriaLabel,
 } from "../../../UI/Components/TelemetryViewer/components/LockedFilterChip";
 import { LockedFilterDetail } from "../../../Types/Telemetry/LockedFilterDetail";
 
 /*
- * The grey lock chip on a resource page's telemetry tab. It used to say only
- * "(applied filter)"; with a LockedFilterDetail it explains what the filter
- * matches, why it is locked, and hands over the search syntax — from the
- * keyboard too, since the tooltip's own Copy button sits in a popover Tab
- * never reaches. Without a detail it must look and behave exactly as before:
- * a plain pill that is not a tab stop.
+ * The grey lock chip on a resource page's telemetry tab. A LockedFilterDetail
+ * carries only the search syntax that reproduces the filter on the explorer,
+ * or the reason there is none, and the chip's tooltip shows exactly that
+ * under a "Search syntax" heading — the token with a Copy button and where to
+ * paste it, or the reason. The chip hands the token over from the keyboard
+ * too, since the tooltip's own Copy button sits in a popover Tab never
+ * reaches. Without a detail it must look and behave exactly as before: a
+ * plain pill that is not a tab stop.
  */
 
 type WriteTextMock = ReturnType<
@@ -43,6 +47,11 @@ const originalExecCommand: unknown = (
   document as unknown as Record<string, unknown>
 )["execCommand"];
 
+const CLUSTER_SEARCH_TOKEN: string = "@resource.k8s.cluster.name:prod-eks-01";
+const TRACE_SEARCH_TOKEN: string = "trace:abc";
+const SESSION_REASON: string = "Session filters have no syntax.";
+const OPERATOR_REASON: string = "Operator filters have no search syntax yet.";
+
 function installClipboard(mock: WriteTextMock | undefined): void {
   Object.defineProperty(navigator, "clipboard", {
     value: mock ? { writeText: mock } : undefined,
@@ -79,29 +88,36 @@ afterEach(() => {
   });
 });
 
+// A locked detail for a cluster chip: its search token, plus any overrides.
 function clusterDetail(
   overrides: Partial<LockedFilterDetail> = {},
 ): LockedFilterDetail {
   return {
-    source: "Pinned by this page",
-    summary: "Only logs from this Kubernetes cluster are shown.",
-    predicates: [
-      {
-        label: "Attribute",
-        expression: 'resource.k8s.cluster.name = "prod-eks-01"',
-        note: "Rows ingested before entity keys existed match on this attribute.",
-      },
-      {
-        label: "Entity key",
-        expression: "entityKeys has 3f9a1b2c4d5e6f70",
-      },
-    ],
-    combinator: "any",
-    searchToken: "@resource.k8s.cluster.name:prod-eks-01",
+    searchToken: CLUSTER_SEARCH_TOKEN,
     ...overrides,
   };
 }
 
+/*
+ * Everything a tooltip with syntax says, in document order: its heading, the
+ * token, the Copy button's label and where to paste the token.
+ */
+function searchSyntaxText(
+  searchToken: string,
+  explorerLabel?: string | undefined,
+): string {
+  const pasteHint: string = explorerLabel
+    ? `Paste into the ${explorerLabel} explorer search bar.`
+    : "Paste into the explorer search bar.";
+
+  return `Search syntax${searchToken}Copy${pasteHint}`;
+}
+
+// Everything a tooltip without syntax says: its heading and the reason.
+function unavailableReasonText(reason: string): string {
+  return `Search syntax${reason}`;
+}
+
 const CLUSTER_LABEL: string = getLockedFilterChipAriaLabel(
   "Cluster",
   "production",
@@ -180,7 +196,7 @@ describe("LockedFilterChip without a detail", () => {
 });
 
 describe("LockedFilterChip with a detail", () => {
-  test("is a button named for the filter, with the Enter hint, and no plain title", () => {
+  test("is a button named for the filter, with the Enter hint, and no plain title", async () => {
     render(
       <LockedFilterChip
         displayKey="Cluster"
@@ -200,33 +216,48 @@ describe("LockedFilterChip with a detail", () => {
     expect(control).toHaveAttribute("type", "button");
     expect(control).toHaveTextContent("Cluster:");
     expect(control).toHaveTextContent("production");
+
+    await hover(control);
+
+    expect(
+      within(screen.getByRole("tooltip")).getByTestId(
+        "locked-filter-search-token",
+      ).textContent,
+    ).toBe(CLUSTER_SEARCH_TOKEN);
   });
 
-  test("a chip whose syntax cannot be copied is named without the Enter hint", () => {
+  test("a chip whose syntax cannot be copied is named without the Enter hint and gives its reason", async () => {
     render(
       <LockedFilterChip
         displayKey="Session"
         displayValue="s-1"
-        lockedDetail={clusterDetail({
-          searchToken: undefined,
-          searchTokenUnavailableReason: "Session filters have no syntax.",
-        })}
+        lockedDetail={{ searchTokenUnavailableReason: SESSION_REASON }}
       />,
     );
 
+    const control: HTMLElement = screen.getByRole("button", {
+      name: getLockedFilterChipAriaLabel("Session", "s-1"),
+    });
+
+    expect(control).toBeInTheDocument();
+
+    await hover(control);
+
+    const tooltip: HTMLElement = screen.getByRole("tooltip");
+
+    expect(tooltip.textContent).toBe(unavailableReasonText(SESSION_REASON));
     expect(
-      screen.getByRole("button", {
-        name: getLockedFilterChipAriaLabel("Session", "s-1"),
-      }),
-    ).toBeInTheDocument();
+      within(tooltip).queryByTestId("locked-filter-search-token"),
+    ).not.toBeInTheDocument();
   });
 
-  test("renders the trailing element beside the button, never inside it", () => {
+  test("renders the trailing element beside the button, never inside it", async () => {
     render(
       <LockedFilterChip
         displayKey="Trace"
         displayValue="abc"
-        lockedDetail={clusterDetail({ searchToken: "trace:abc" })}
+        lockedDetail={{ searchToken: TRACE_SEARCH_TOKEN }}
+        signal="traces"
         trailing={<a href="/traces/view/abc">open</a>}
       />,
     );
@@ -239,9 +270,15 @@ describe("LockedFilterChip with a detail", () => {
 
     expect(chip).toContainElement(link);
     expect(control).not.toContainElement(link);
+
+    await hover(control);
+
+    expect(screen.getByRole("tooltip").textContent).toBe(
+      searchSyntaxText(TRACE_SEARCH_TOKEN, "Traces"),
+    );
   });
 
-  test("hover opens the explanation", async () => {
+  test("hover opens the search syntax and nothing else", async () => {
     render(
       <LockedFilterChip
         displayKey="Cluster"
@@ -255,18 +292,22 @@ describe("LockedFilterChip with a detail", () => {
 
     const tooltip: HTMLElement = screen.getByRole("tooltip");
 
-    expect(tooltip).toHaveTextContent("Locked filter");
+    expect(tooltip).toHaveTextContent("Search syntax");
+    expect(
+      within(tooltip).getByTestId("locked-filter-search-token").textContent,
+    ).toBe(CLUSTER_SEARCH_TOKEN);
     expect(tooltip).toHaveTextContent(
-      "Only logs from this Kubernetes cluster are shown.",
+      "Paste into the Logs explorer search bar.",
     );
-    expect(tooltip).toHaveTextContent("Pinned by this page");
-    expect(tooltip).toHaveTextContent(
-      'resource.k8s.cluster.name = "prod-eks-01"',
+    // The heading, the token, its Copy button and the paste hint — no more.
+    expect(tooltip.textContent).toBe(
+      searchSyntaxText(CLUSTER_SEARCH_TOKEN, "Logs"),
     );
-    expect(tooltip).toHaveTextContent("@resource.k8s.cluster.name:prod-eks-01");
+    expect(tooltip.querySelectorAll("code")).toHaveLength(1);
+    expect(within(tooltip).getAllByRole("button")).toHaveLength(1);
   });
 
-  test("keyboard focus opens the explanation too", async () => {
+  test("keyboard focus opens the search syntax too", async () => {
     render(
       <LockedFilterChip
         displayKey="Cluster"
@@ -287,7 +328,11 @@ describe("LockedFilterChip with a detail", () => {
       jest.advanceTimersByTime(150);
     });
 
-    expect(screen.getByRole("tooltip")).toHaveTextContent("Locked filter");
+    expect(
+      within(screen.getByRole("tooltip")).getByTestId(
+        "locked-filter-search-token",
+      ).textContent,
+    ).toBe(CLUSTER_SEARCH_TOKEN);
   });
 
   test("activating the chip copies its search syntax, shows the tick and announces it", async () => {
@@ -306,9 +351,8 @@ describe("LockedFilterChip with a detail", () => {
 
     await activate(control);
 
-    expect(writeText).toHaveBeenCalledWith(
-      "@resource.k8s.cluster.name:prod-eks-01",
-    );
+    expect(writeText).toHaveBeenCalledTimes(1);
+    expect(writeText).toHaveBeenCalledWith(CLUSTER_SEARCH_TOKEN);
     expect(screen.getByRole("status")).toHaveTextContent(
       COPIED_SEARCH_SYNTAX_ANNOUNCEMENT,
     );
@@ -326,23 +370,88 @@ describe("LockedFilterChip with a detail", () => {
     );
   });
 
-  test("activating a chip without syntax copies nothing and announces nothing", async () => {
+  test("activating a chip without syntax copies nothing, announces nothing and says it has none", async () => {
+    render(
+      <LockedFilterChip
+        displayKey="Session"
+        displayValue="s-1"
+        lockedDetail={{ searchToken: undefined }}
+      />,
+    );
+
+    const control: HTMLElement = screen.getByRole("button", {
+      name: getLockedFilterChipAriaLabel("Session", "s-1"),
+    });
+
+    await activate(control);
+
+    expect(writeText).not.toHaveBeenCalled();
+    expect(screen.getByRole("status")).toHaveTextContent("");
+
+    await hover(control);
+
+    expect(screen.getByRole("tooltip").textContent).toBe(
+      unavailableReasonText(NO_SEARCH_SYNTAX_REASON),
+    );
+  });
+
+  test("activating a chip with only a reason copies nothing and announces nothing", async () => {
     render(
       <LockedFilterChip
         displayKey="Session"
         displayValue="s-1"
-        lockedDetail={clusterDetail({ searchToken: undefined })}
+        lockedDetail={{ searchTokenUnavailableReason: SESSION_REASON }}
+        signal="logs"
       />,
     );
 
-    await activate(
-      screen.getByRole("button", {
-        name: getLockedFilterChipAriaLabel("Session", "s-1"),
-      }),
+    const control: HTMLElement = screen.getByRole("button", {
+      name: getLockedFilterChipAriaLabel("Session", "s-1"),
+    });
+
+    await activate(control);
+
+    expect(writeText).not.toHaveBeenCalled();
+    expect(screen.getByRole("status")).toHaveTextContent("");
+    expect(control.querySelector("svg")?.getAttribute("class")).toContain(
+      "text-gray-400",
+    );
+  });
+
+  test("an empty detail — neither a token nor a reason — is still a button, without the Enter hint, that copies nothing and gives the fallback reason", async () => {
+    render(
+      <LockedFilterChip
+        displayKey="Resource"
+        displayValue="3f9a1b2c4d5e6f70"
+        lockedDetail={{}}
+        signal="traces"
+      />,
     );
 
+    const chip: HTMLElement = screen.getByTestId("locked-filter-chip");
+    const control: HTMLElement = screen.getByRole("button", {
+      name: getLockedFilterChipAriaLabel("Resource", "3f9a1b2c4d5e6f70"),
+    });
+
+    expect(chip).not.toHaveAttribute("title");
+    expect(chip).toContainElement(control);
+
+    await activate(control);
+
     expect(writeText).not.toHaveBeenCalled();
     expect(screen.getByRole("status")).toHaveTextContent("");
+
+    await hover(control);
+
+    const tooltip: HTMLElement = screen.getByRole("tooltip");
+
+    expect(tooltip.textContent).toBe(
+      unavailableReasonText(NO_SEARCH_SYNTAX_REASON),
+    );
+    expect(
+      within(tooltip).queryByTestId("locked-filter-search-token"),
+    ).not.toBeInTheDocument();
+    expect(within(tooltip).queryByRole("button")).not.toBeInTheDocument();
   });
 
   test("the activation does not bubble to whatever holds the chip row", async () => {
@@ -361,10 +470,11 @@ describe("LockedFilterChip with a detail", () => {
 
     await activate(screen.getByRole("button", { name: CLUSTER_LABEL }));
 
+    expect(writeText).toHaveBeenCalledWith(CLUSTER_SEARCH_TOKEN);
     expect(onClick).not.toHaveBeenCalled();
   });
 
-  test("says so when nothing could be copied", async () => {
+  test("says so when nothing could be copied, and still shows the syntax to copy by hand", async () => {
     installClipboard(undefined);
 
     render(
@@ -390,13 +500,27 @@ describe("LockedFilterChip with a detail", () => {
     expect(control.querySelector("svg")?.getAttribute("class")).toContain(
       "text-rose-500",
     );
+
+    await hover(control);
+
+    expect(
+      within(screen.getByRole("tooltip")).getByTestId(
+        "locked-filter-search-token",
+      ).textContent,
+    ).toBe(CLUSTER_SEARCH_TOKEN);
   });
 
   test("copies through the legacy command when the async clipboard is absent", async () => {
     installClipboard(undefined);
+    const selectedTexts: Array<string | undefined> = [];
     const execCommand: ReturnType<
       typeof jest.fn<(command: string) => boolean>
     > = jest.fn<(command: string) => boolean>((): boolean => {
+      // The legacy path copies whatever the hidden textarea holds right now.
+      selectedTexts.push(
+        document.querySelector<HTMLTextAreaElement>("textarea[readonly]")
+          ?.value,
+      );
       return true;
     });
     installExecCommand(execCommand);
@@ -412,6 +536,7 @@ describe("LockedFilterChip with a detail", () => {
     await activate(screen.getByRole("button", { name: CLUSTER_LABEL }));
 
     expect(execCommand).toHaveBeenCalledWith("copy");
+    expect(selectedTexts).toEqual([CLUSTER_SEARCH_TOKEN]);
     expect(screen.getByRole("status")).toHaveTextContent(
       COPIED_SEARCH_SYNTAX_ANNOUNCEMENT,
     );
@@ -419,11 +544,9 @@ describe("LockedFilterChip with a detail", () => {
 });
 
 describe("LockedFilterTooltipContent", () => {
-  test("shows the chip, the summary, the source and every predicate", () => {
+  test("shows only the search syntax: its heading, the token, a Copy button and where to paste it", () => {
     render(
       <LockedFilterTooltipContent
-        displayKey="Cluster"
-        displayValue="production"
         lockedDetail={clusterDetail()}
         signal="logs"
       />,
@@ -431,109 +554,90 @@ describe("LockedFilterTooltipContent", () => {
 
     const content: HTMLElement = screen.getByTestId("locked-filter-tooltip");
 
-    expect(content).toHaveTextContent("Cluster: production");
-    expect(content).toHaveTextContent(
-      "Only logs from this Kubernetes cluster are shown.",
+    expect(screen.getByText("Search syntax")).toBeInTheDocument();
+    expect(screen.getByTestId("locked-filter-search-token").textContent).toBe(
+      CLUSTER_SEARCH_TOKEN,
     );
-    expect(content).toHaveTextContent("Pinned by this page");
-    expect(screen.getByText("Attribute")).toBeInTheDocument();
     expect(
-      screen.getByText('resource.k8s.cluster.name = "prod-eks-01"'),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText(
-        "Rows ingested before entity keys existed match on this attribute.",
-      ),
-    ).toBeInTheDocument();
-    expect(screen.getByText("Entity key")).toBeInTheDocument();
-    expect(
-      screen.getByText("entityKeys has 3f9a1b2c4d5e6f70"),
+      screen.getByRole("button", { name: "Copy search syntax" }),
     ).toBeInTheDocument();
-  });
-
-  test("says (any of) for OR-ed predicates and (all of) otherwise", () => {
-    const { unmount } = render(
-      <LockedFilterTooltipContent
-        displayKey="Cluster"
-        displayValue="production"
-        lockedDetail={clusterDetail({ combinator: "any" })}
-      />,
+    // It does not repeat the chip it belongs to, or say anything else.
+    expect(content).not.toHaveTextContent("Cluster: production");
+    expect(content.textContent).toBe(
+      searchSyntaxText(CLUSTER_SEARCH_TOKEN, "Logs"),
     );
+  });
 
-    expect(
-      screen.getByText("How rows are matched (any of)"),
-    ).toBeInTheDocument();
-
-    unmount();
-
+  test("the only code block and the only button belong to the search syntax", () => {
     render(
       <LockedFilterTooltipContent
-        displayKey="Cluster"
-        displayValue="production"
-        lockedDetail={clusterDetail({ combinator: "all" })}
+        lockedDetail={clusterDetail()}
+        signal="logs"
       />,
     );
 
-    expect(
-      screen.getByText("How rows are matched (all of)"),
-    ).toBeInTheDocument();
+    const content: HTMLElement = screen.getByTestId("locked-filter-tooltip");
+    const codeBlocks: NodeListOf<HTMLElement> =
+      content.querySelectorAll("code");
+    const buttons: Array<HTMLElement> = screen.getAllByRole("button");
+
+    expect(codeBlocks).toHaveLength(1);
+    expect(codeBlocks[0]?.textContent).toBe(CLUSTER_SEARCH_TOKEN);
+    expect(buttons).toHaveLength(1);
+    expect(buttons[0]).toHaveAccessibleName("Copy search syntax");
   });
 
-  test("names no combinator for a single predicate", () => {
+  test("shows the token, not the reason, when the detail carries both", () => {
     render(
       <LockedFilterTooltipContent
-        displayKey="Cluster"
-        displayValue="production"
         lockedDetail={clusterDetail({
-          predicates: [
-            {
-              label: "Attribute",
-              expression: 'resource.k8s.cluster.name = "prod-eks-01"',
-            },
-          ],
+          searchTokenUnavailableReason: OPERATOR_REASON,
         })}
+        signal="metrics"
       />,
     );
 
-    expect(screen.getByText("How rows are matched")).toBeInTheDocument();
-    expect(screen.queryByText(/any of|all of/)).not.toBeInTheDocument();
-  });
+    const content: HTMLElement = screen.getByTestId("locked-filter-tooltip");
 
-  test("omits the matching section when there are no predicates", () => {
-    render(
-      <LockedFilterTooltipContent
-        displayKey="Session"
-        displayValue="s-1"
-        lockedDetail={clusterDetail({ predicates: [] })}
-      />,
+    expect(screen.getByTestId("locked-filter-search-token").textContent).toBe(
+      CLUSTER_SEARCH_TOKEN,
+    );
+    expect(screen.queryByText(OPERATOR_REASON)).not.toBeInTheDocument();
+    expect(content.textContent).toBe(
+      searchSyntaxText(CLUSTER_SEARCH_TOKEN, "Metrics"),
     );
-
-    expect(screen.queryByText(/How rows are matched/)).not.toBeInTheDocument();
   });
 
   test("names the explorer the search syntax is for", () => {
     render(
       <LockedFilterTooltipContent
-        displayKey="Cluster"
-        displayValue="production"
         lockedDetail={clusterDetail()}
         signal="traces"
       />,
     );
 
-    expect(screen.getByTestId("locked-filter-search-token")).toHaveTextContent(
-      "@resource.k8s.cluster.name:prod-eks-01",
+    expect(screen.getByTestId("locked-filter-search-token").textContent).toBe(
+      CLUSTER_SEARCH_TOKEN,
     );
     expect(
       screen.getByText("Paste into the Traces explorer search bar."),
     ).toBeInTheDocument();
   });
 
+  test("names no explorer without a signal", () => {
+    render(<LockedFilterTooltipContent lockedDetail={clusterDetail()} />);
+
+    expect(
+      screen.getByText("Paste into the explorer search bar."),
+    ).toBeInTheDocument();
+    expect(screen.getByTestId("locked-filter-tooltip").textContent).toBe(
+      searchSyntaxText(CLUSTER_SEARCH_TOKEN),
+    );
+  });
+
   test("the copy button writes the token to the clipboard and says Copied! for a moment", async () => {
     render(
       <LockedFilterTooltipContent
-        displayKey="Cluster"
-        displayValue="production"
         lockedDetail={clusterDetail()}
         signal="logs"
       />,
@@ -545,9 +649,8 @@ describe("LockedFilterTooltipContent", () => {
 
     await activate(button);
 
-    expect(writeText).toHaveBeenCalledWith(
-      "@resource.k8s.cluster.name:prod-eks-01",
-    );
+    expect(writeText).toHaveBeenCalledTimes(1);
+    expect(writeText).toHaveBeenCalledWith(CLUSTER_SEARCH_TOKEN);
     expect(screen.getByRole("button", { name: "Copied" })).toHaveTextContent(
       "Copied!",
     );
@@ -566,8 +669,6 @@ describe("LockedFilterTooltipContent", () => {
 
     render(
       <LockedFilterTooltipContent
-        displayKey="Cluster"
-        displayValue="production"
         lockedDetail={clusterDetail()}
         signal="logs"
       />,
@@ -579,6 +680,10 @@ describe("LockedFilterTooltipContent", () => {
       screen.getByRole("button", { name: "Copy failed" }),
     ).toHaveTextContent("Copy failed");
     expect(screen.queryByText("Copied!")).not.toBeInTheDocument();
+    // The token stays on screen to be selected by hand.
+    expect(screen.getByTestId("locked-filter-search-token").textContent).toBe(
+      CLUSTER_SEARCH_TOKEN,
+    );
 
     await act(async () => {
       jest.advanceTimersByTime(COPIED_FEEDBACK_MS + 10);
@@ -595,57 +700,89 @@ describe("LockedFilterTooltipContent", () => {
 
     render(
       <div onClick={onClick}>
-        <LockedFilterTooltipContent
-          displayKey="Cluster"
-          displayValue="production"
-          lockedDetail={clusterDetail()}
-        />
+        <LockedFilterTooltipContent lockedDetail={clusterDetail()} />
       </div>,
     );
 
     await activate(screen.getByRole("button", { name: "Copy search syntax" }));
 
+    expect(writeText).toHaveBeenCalledWith(CLUSTER_SEARCH_TOKEN);
     expect(onClick).not.toHaveBeenCalled();
   });
 
   test("shows the reason instead of the syntax when the filter has none", () => {
     render(
       <LockedFilterTooltipContent
-        displayKey="logtype"
-        displayValue="is any of web, api"
-        lockedDetail={clusterDetail({
-          searchToken: undefined,
-          searchTokenUnavailableReason:
-            "Operator filters have no search syntax yet.",
-        })}
+        lockedDetail={{ searchTokenUnavailableReason: OPERATOR_REASON }}
         signal="logs"
       />,
     );
 
     expect(screen.getByText("Search syntax")).toBeInTheDocument();
-    expect(
-      screen.getByText("Operator filters have no search syntax yet."),
-    ).toBeInTheDocument();
+    expect(screen.getByText(OPERATOR_REASON)).toBeInTheDocument();
     expect(
       screen.queryByTestId("locked-filter-search-token"),
     ).not.toBeInTheDocument();
     expect(
       screen.queryByRole("button", { name: "Copy search syntax" }),
     ).not.toBeInTheDocument();
+    expect(screen.getByTestId("locked-filter-tooltip").textContent).toBe(
+      unavailableReasonText(OPERATOR_REASON),
+    );
   });
 
-  test("omits the syntax section entirely when there is neither a token nor a reason", () => {
+  test("says the filter has no search syntax when the detail names neither a token nor a reason", () => {
     render(
       <LockedFilterTooltipContent
-        displayKey="Session"
-        displayValue="s-1"
-        lockedDetail={clusterDetail({
+        lockedDetail={{
           searchToken: undefined,
           searchTokenUnavailableReason: undefined,
-        })}
+        }}
+      />,
+    );
+
+    expect(screen.getByText("Search syntax")).toBeInTheDocument();
+    expect(screen.getByText(NO_SEARCH_SYNTAX_REASON)).toBeInTheDocument();
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    expect(screen.getByTestId("locked-filter-tooltip").textContent).toBe(
+      unavailableReasonText(NO_SEARCH_SYNTAX_REASON),
+    );
+  });
+
+  test("an empty detail object says the filter has no search syntax, with no token and no Copy button", () => {
+    render(<LockedFilterTooltipContent lockedDetail={{}} signal="metrics" />);
+
+    expect(
+      screen.queryByTestId("locked-filter-search-token"),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    expect(screen.getByTestId("locked-filter-tooltip").textContent).toBe(
+      unavailableReasonText(NO_SEARCH_SYNTAX_REASON),
+    );
+  });
+
+  test("the fallback reason reads word for word as the Dashboard describers' generic one", () => {
+    /*
+     * A detail the describers leave without a reason and one they give the
+     * generic reason must read the same in the tooltip.
+     */
+    expect(NO_SEARCH_SYNTAX_REASON).toBe("This filter has no search syntax.");
+  });
+
+  test("an empty token and an empty reason count as none: nothing to copy, and the fallback reason", () => {
+    render(
+      <LockedFilterTooltipContent
+        lockedDetail={{ searchToken: "", searchTokenUnavailableReason: "" }}
+        signal="logs"
       />,
     );
 
-    expect(screen.queryByText("Search syntax")).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId("locked-filter-search-token"),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    expect(screen.getByTestId("locked-filter-tooltip").textContent).toBe(
+      unavailableReasonText(NO_SEARCH_SYNTAX_REASON),
+    );
   });
 });