@oneuptime/common 13.0.4 → 13.0.5

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

@@ -26,7 +26,7 @@ import getJestMockFunction, { MockFunction } from "../../MockType";
  * the real ones — is never rendered.
  *
  * This file renders the panel as it ships: saved views above real facet data,
- * two search boxes and two "+N more" toggles in the same scroll. Everything
+ * two search boxes and two collapsed tails in the same scroll. Everything
  * here is about the seams — which control owns which list, which name resolves
  * to which box, and what the host is told when a row is clicked.
  */
@@ -228,13 +228,16 @@ describe("the logs sidebar renders saved views beside real facets", () => {
     expect(screen.getAllByRole("textbox")).toHaveLength(2);
 
     /*
-     * The saved-views box carries an explicit aria-label, so it is the one
-     * that can be reached by name rather than by placeholder — the facet's
-     * box beside it has no accessible name at all to collide with.
+     * Both boxes carry an explicit aria-label, and the two names differ — the
+     * saved-views box reads as its placeholder, the facet's as "Search"
+     * plus the facet title — so neither can be reached by the other's name.
      */
     expect(
       screen.getByRole("textbox", { name: SAVED_VIEWS_SEARCH_LABEL }),
     ).toBe(savedViewsBox);
+    expect(screen.getByRole("textbox", { name: "Search Severity" })).toBe(
+      severityBox,
+    );
   });
 
   test("the two searches do not reach into each other's list", () => {
@@ -271,17 +274,20 @@ describe("the logs sidebar renders saved views beside real facets", () => {
     );
 
     /*
-     * Both lists hide three rows, so both toggles read "+3 more" — the reason
-     * a getByRole for that name throws here and every assertion below has to
-     * say which of the two it means.
+     * Both lists hide three rows. The saved views say "+3 more", the facet
+     * "Show 3 more" — each toggle is reached by its own name, and expanding
+     * one must leave the other's rows and label untouched.
      */
-    const toggles: Array<HTMLElement> = screen.getAllByRole("button", {
-      name: "+3 more",
+    const savedViewsToggle: HTMLElement = within(savedViewsSection()).getByRole(
+      "button",
+      { name: "+3 more" },
+    );
+    const severityToggle: HTMLElement = screen.getByRole("button", {
+      name: "Show 3 more",
     });
-    expect(toggles).toHaveLength(2);
+    expect(savedViewsToggle).not.toBe(severityToggle);
 
-    // Saved views render first, so theirs is the first match.
-    fireEvent.click(toggles[0]!);
+    fireEvent.click(savedViewsToggle);
 
     expect(savedViewRowNames()).toHaveLength(8);
     expect(severityRowNames()).toEqual([
@@ -291,10 +297,20 @@ describe("the logs sidebar renders saved views beside real facets", () => {
       "Sev4",
       "Sev5",
     ]);
-    expect(screen.getAllByRole("button", { name: "+3 more" })).toHaveLength(1);
+    expect(screen.queryByRole("button", { name: "+3 more" })).toBeNull();
+    expect(
+      screen.getByRole("button", { name: "Show 3 more" }),
+    ).toBeInTheDocument();
     expect(
       screen.getByRole("button", { name: "Show less" }),
     ).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Show 3 more" }));
+
+    expect(severityRowNames()).toHaveLength(8);
+    expect(screen.getAllByRole("button", { name: "Show less" })).toHaveLength(
+      2,
+    );
   });
 
   test("a short saved-views list gets no box while a long facet keeps its own", () => {
@@ -413,7 +429,9 @@ describe("the logs sidebar's two empty states", () => {
     typeInto(screen.getByPlaceholderText(SAVED_VIEWS_SEARCH_LABEL), "zzz");
 
     const searchedEmpty: HTMLElement = screen.getByText("No matches found");
-    const genuinelyEmpty: HTMLElement = screen.getByText("No values found");
+    const genuinelyEmpty: HTMLElement = screen.getByText(
+      "No values in this time range",
+    );
 
     expect(searchedEmpty).not.toBe(genuinelyEmpty);
     expect(savedViewRowNames()).toEqual([]);

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

@@ -51,6 +51,7 @@ const data: Array<Row> = [
 ];
 
 interface RenderTableOptions {
+  columns?: Columns<Row> | undefined;
   getRowProps?: ((item: Row) => React.HTMLAttributes<HTMLElement>) | undefined;
   sortBy?: keyof Row | null | undefined;
   sortOrder?: SortOrder | undefined;
@@ -69,7 +70,7 @@ const renderTable: RenderTableFunction = (
       id="test-table"
       data={data}
       getRowProps={options?.getRowProps}
-      columns={columns}
+      columns={options?.columns || columns}
       currentPageNumber={1}
       totalItemsCount={data.length}
       itemsOnPage={10}
@@ -196,6 +197,48 @@ describe("hideOnMobile columns", () => {
   });
 });
 
+describe("custom action columns", () => {
+  const actionColumns: Columns<Row> = [
+    { title: "Name", type: FieldType.Text, key: "name" },
+    {
+      title: "Actions",
+      type: FieldType.Actions,
+      key: "_id",
+      disableSort: true,
+      getElement: (row: Row): React.ReactElement => {
+        return <button type="button">Inspect {row.name}</button>;
+      },
+    },
+  ];
+
+  test.each([1280, 390])(
+    "renders a caller-provided action at width %i",
+    (width: number) => {
+      setViewportWidth(width);
+      renderTable({ columns: actionColumns });
+
+      expect(
+        screen.getByRole("button", { name: "Inspect Alpha" }),
+      ).toBeInTheDocument();
+    },
+  );
+
+  test("right-aligns the desktop Actions header and cell", () => {
+    setViewportWidth(1280);
+    renderTable({ columns: actionColumns });
+
+    const actionsHeader: HTMLElement = screen.getByRole("columnheader", {
+      name: "Actions",
+    });
+    const actionsCell: HTMLElement | null = screen
+      .getByRole("button", { name: "Inspect Alpha" })
+      .closest("td");
+
+    expect(actionsHeader.firstElementChild).toHaveClass("justify-end");
+    expect(actionsCell).toHaveStyle({ textAlign: "right" });
+  });
+});
+
 describe("optional table row attributes", () => {
   test.each([1024, 390])(
     "preserves row navigation and classes at width %i",

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

@@ -0,0 +1,304 @@
+import "@testing-library/jest-dom";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+} from "@testing-library/react";
+import React from "react";
+import TelemetryActiveFilterChips from "../../../UI/Components/TelemetryViewer/components/TelemetryActiveFilterChips";
+import { ActiveFilter } from "../../../UI/Components/TelemetryViewer/types";
+import { getLockedFilterChipAriaLabel } from "../../../UI/Components/TelemetryViewer/components/LockedFilterChip";
+import {
+  getCopyLockedFiltersAriaLabel,
+  getOpenExplorerAriaLabel,
+} from "../../../UI/Components/TelemetryViewer/components/LockedFilterActions";
+import Route from "../../../Types/API/Route";
+
+/*
+ * The traces / metrics chip list, now that its read-only chips are
+ * LockedFilterChips. Same contract as the logs list, minus the logs-only
+ * open-route affordance and the operator-value backstop.
+ */
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  Object.defineProperty(navigator, "clipboard", {
+    value: {
+      writeText: jest.fn<(text: string) => Promise<void>>(
+        async (): Promise<void> => {},
+      ),
+    },
+    configurable: true,
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  jest.useRealTimers();
+});
+
+function lockedHostChip(overrides: Partial<ActiveFilter> = {}): ActiveFilter {
+  return {
+    facetKey: "attributes.resource.host.name",
+    value: "web-01",
+    displayKey: "Host",
+    displayValue: "web-01",
+    readOnly: true,
+    lockedDetail: {
+      source: "Pinned by this page",
+      summary: "Only traces from this host are shown.",
+      predicates: [
+        { label: "Attribute", expression: 'resource.host.name = "web-01"' },
+      ],
+      searchToken: "@resource.host.name:web-01",
+    },
+    ...overrides,
+  };
+}
+
+function removableChip(overrides: Partial<ActiveFilter> = {}): ActiveFilter {
+  return {
+    facetKey: "statusCode",
+    value: "Error",
+    displayKey: "Status",
+    displayValue: "Error",
+    ...overrides,
+  };
+}
+
+async function hover(trigger: HTMLElement): Promise<void> {
+  fireEvent.mouseEnter(trigger);
+  await act(async () => {
+    jest.advanceTimersByTime(150);
+  });
+}
+
+describe("TelemetryActiveFilterChips — locked chips", () => {
+  test("a read-only chip renders as a locked chip: a named button, no remove control", () => {
+    render(
+      <TelemetryActiveFilterChips
+        filters={[lockedHostChip()]}
+        onRemove={() => {}}
+        onClearAll={() => {}}
+        signal="traces"
+      />,
+    );
+
+    const chip: HTMLElement = screen.getByRole("button", {
+      name: getLockedFilterChipAriaLabel("Host", "web-01", true),
+    });
+
+    expect(chip).toHaveTextContent("Host:");
+    expect(chip).toHaveTextContent("web-01");
+    expect(screen.queryByTitle(/^Remove /)).not.toBeInTheDocument();
+  });
+
+  test("a read-only chip without a detail is not a tab stop and has no name of its own", () => {
+    render(
+      <TelemetryActiveFilterChips
+        filters={[lockedHostChip({ lockedDetail: undefined })]}
+        onRemove={() => {}}
+        onClearAll={() => {}}
+        signal="traces"
+      />,
+    );
+
+    const pill: HTMLElement = screen.getByTestId("locked-filter-chip");
+
+    expect(pill).not.toHaveAttribute("tabindex");
+    expect(pill).not.toHaveAttribute("aria-label");
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  test("hovering the locked chip explains the filter and names the explorer", async () => {
+    render(
+      <TelemetryActiveFilterChips
+        filters={[lockedHostChip()]}
+        onRemove={() => {}}
+        onClearAll={() => {}}
+        signal="traces"
+      />,
+    );
+
+    await hover(
+      screen.getByRole("button", {
+        name: getLockedFilterChipAriaLabel("Host", "web-01", true),
+      }),
+    );
+
+    const tooltip: HTMLElement = screen.getByRole("tooltip");
+
+    expect(tooltip).toHaveTextContent("Only traces from this host are shown.");
+    expect(tooltip).toHaveTextContent("@resource.host.name:web-01");
+    expect(tooltip).toHaveTextContent(
+      "Paste into the Traces explorer search bar.",
+    );
+  });
+
+  test("a read-only chip without a detail keeps the plain title", () => {
+    render(
+      <TelemetryActiveFilterChips
+        filters={[lockedHostChip({ lockedDetail: undefined })]}
+        onRemove={() => {}}
+        onClearAll={() => {}}
+      />,
+    );
+
+    expect(
+      document.querySelector("[title='Host: web-01 (applied filter)']"),
+    ).not.toBeNull();
+  });
+});
+
+describe("TelemetryActiveFilterChips — locked filter actions", () => {
+  test("renders the actions after the locked chips and before the removable ones", () => {
+    render(
+      <TelemetryActiveFilterChips
+        filters={[removableChip(), lockedHostChip()]}
+        onRemove={() => {}}
+        onClearAll={() => {}}
+        signal="metrics"
+        lockedFilterActions={{
+          copyText: "@resource.host.name:web-01",
+          openExplorerRoute: new Route("/dashboard/p1/metrics?filters=x"),
+        }}
+      />,
+    );
+
+    const locked: HTMLElement = screen.getByRole("button", {
+      name: getLockedFilterChipAriaLabel("Host", "web-01", true),
+    });
+    const actions: HTMLElement = screen.getByTestId("locked-filter-actions");
+    const remove: HTMLElement = screen.getByTitle("Remove Status: Error");
+
+    expect(
+      locked.compareDocumentPosition(actions) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+    expect(
+      actions.compareDocumentPosition(remove) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+    expect(
+      screen.getByRole("button", {
+        name: getCopyLockedFiltersAriaLabel("Metrics"),
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: getOpenExplorerAriaLabel("Metrics") }),
+    ).toHaveAttribute("href", "/dashboard/p1/metrics?filters=x");
+  });
+
+  test("renders no actions without a signal — the group cannot name its explorer", () => {
+    render(
+      <TelemetryActiveFilterChips
+        filters={[lockedHostChip()]}
+        onRemove={() => {}}
+        onClearAll={() => {}}
+        lockedFilterActions={{ copyText: "@k:v" }}
+      />,
+    );
+
+    expect(
+      screen.queryByTestId("locked-filter-actions"),
+    ).not.toBeInTheDocument();
+  });
+
+  test("renders no actions when there is no locked chip", () => {
+    render(
+      <TelemetryActiveFilterChips
+        filters={[removableChip()]}
+        onRemove={() => {}}
+        onClearAll={() => {}}
+        signal="traces"
+        lockedFilterActions={{ copyText: "@k:v" }}
+      />,
+    );
+
+    expect(
+      screen.queryByTestId("locked-filter-actions"),
+    ).not.toBeInTheDocument();
+  });
+
+  test("renders no actions when the host offers none", () => {
+    render(
+      <TelemetryActiveFilterChips
+        filters={[lockedHostChip()]}
+        onRemove={() => {}}
+        onClearAll={() => {}}
+        signal="traces"
+      />,
+    );
+
+    expect(
+      screen.queryByTestId("locked-filter-actions"),
+    ).not.toBeInTheDocument();
+  });
+});
+
+describe("TelemetryActiveFilterChips — unchanged behaviour", () => {
+  test("removable chips still remove and Clear all still appears for two or more", () => {
+    const removed: Array<[string, string]> = [];
+    let cleared: number = 0;
+
+    render(
+      <TelemetryActiveFilterChips
+        filters={[
+          lockedHostChip(),
+          removableChip(),
+          removableChip({ value: "Ok", displayValue: "Ok" }),
+        ]}
+        onRemove={(facetKey: string, value: string) => {
+          removed.push([facetKey, value]);
+        }}
+        onClearAll={() => {
+          cleared += 1;
+        }}
+        signal="traces"
+        lockedFilterActions={{ copyText: "@k:v" }}
+      />,
+    );
+
+    fireEvent.click(screen.getByTitle("Remove Status: Error"));
+    expect(removed).toEqual([["statusCode", "Error"]]);
+
+    fireEvent.click(screen.getByText("Clear all"));
+    expect(cleared).toBe(1);
+  });
+
+  test("a single removable chip shows no Clear all", () => {
+    render(
+      <TelemetryActiveFilterChips
+        filters={[removableChip()]}
+        onRemove={() => {}}
+        onClearAll={() => {}}
+      />,
+    );
+
+    expect(screen.queryByText("Clear all")).not.toBeInTheDocument();
+  });
+
+  test("renders nothing at all for an empty list", () => {
+    const { container } = render(
+      <TelemetryActiveFilterChips
+        filters={[]}
+        onRemove={() => {}}
+        onClearAll={() => {}}
+        signal="traces"
+        lockedFilterActions={{ copyText: "@k:v" }}
+      />,
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+});