@oneuptime/common 12.0.9 → 12.0.11

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

@@ -0,0 +1,304 @@
+import SavedViewsDropdown, {
+  SavedViewsDropdownProps,
+} from "../../../UI/Components/LogsViewer/components/SavedViewsDropdown";
+import LogsViewerToolbar from "../../../UI/Components/LogsViewer/components/LogsViewerToolbar";
+import LogsFacetSidebar from "../../../UI/Components/LogsViewer/components/LogsFacetSidebar";
+import { LogsSavedViewOption } from "../../../UI/Components/LogsViewer/types";
+import "@testing-library/jest-dom";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  RenderResult,
+} from "@testing-library/react";
+import React from "react";
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+
+/*
+ * The logs explorer grew its saved views before the shared telemetry viewer
+ * did, so it carries its own copy of the dropdown — and its own copy of the
+ * bug in issue 3189: a view could be applied but never taken back off.
+ *
+ * Everything the telemetry dropdown gained is pinned here for the logs one
+ * too, plus the two extra surfaces logs has that traces does not: the toolbar
+ * that mounts the dropdown, and the facet sidebar, which lists the same views
+ * again down the left-hand side and re-applied them on click.
+ */
+
+const VIEWS: Array<LogsSavedViewOption> = [
+  { id: "errors", name: "Errors only" },
+  { id: "checkout", name: "Checkout service", isDefault: true },
+];
+
+const CLEAR_LABEL: string = "Clear view";
+const MENU_PROBE: string = "+ Save Current View";
+
+interface Handlers {
+  onSelect: (viewId: string) => void;
+  onClear: () => void;
+  onCreate: () => void;
+  onEdit: (viewId: string) => void;
+  onDelete: (viewId: string) => void;
+  onUpdateCurrent: () => void;
+}
+
+function makeHandlers(): Handlers {
+  return {
+    onSelect: jest.fn(),
+    onClear: jest.fn(),
+    onCreate: jest.fn(),
+    onEdit: jest.fn(),
+    onDelete: jest.fn(),
+    onUpdateCurrent: jest.fn(),
+  };
+}
+
+function renderDropdown(
+  overrides: Partial<SavedViewsDropdownProps> = {},
+  handlers: Handlers = makeHandlers(),
+): { handlers: Handlers; result: RenderResult } {
+  const props: SavedViewsDropdownProps = {
+    savedViews: VIEWS,
+    selectedSavedViewId: null,
+    ...handlers,
+    ...overrides,
+  };
+
+  return { handlers, result: render(<SavedViewsDropdown {...props} />) };
+}
+
+function trigger(): HTMLElement {
+  return screen.getAllByRole("button")[0]!;
+}
+
+function openMenu(): void {
+  fireEvent.click(trigger());
+}
+
+function isMenuOpen(): boolean {
+  return screen.queryByText(MENU_PROBE) !== null;
+}
+
+function rowFor(name: string): HTMLElement {
+  return screen.getByRole("button", { name: name });
+}
+
+describe("LogsViewer SavedViewsDropdown — clearing the applied view", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("clicking the applied view clears it instead of re-applying it", () => {
+    const { handlers } = renderDropdown({ selectedSavedViewId: "errors" });
+
+    openMenu();
+    fireEvent.click(rowFor("Errors only"));
+
+    expect(handlers.onClear).toHaveBeenCalledTimes(1);
+    expect(handlers.onSelect).not.toHaveBeenCalled();
+    expect(isMenuOpen()).toBe(false);
+  });
+
+  test("the explicit Clear view row clears and closes the menu", () => {
+    const { handlers } = renderDropdown({ selectedSavedViewId: "errors" });
+
+    openMenu();
+    fireEvent.click(rowFor(CLEAR_LABEL));
+
+    expect(handlers.onClear).toHaveBeenCalledTimes(1);
+    expect(handlers.onSelect).not.toHaveBeenCalled();
+    expect(isMenuOpen()).toBe(false);
+  });
+
+  test("the Clear view row is offered only while a view is applied", () => {
+    renderDropdown({ selectedSavedViewId: null });
+
+    openMenu();
+
+    expect(screen.queryByText(CLEAR_LABEL)).toBeNull();
+  });
+
+  test("a selection pointing at a view that no longer exists offers no clear row", () => {
+    renderDropdown({ selectedSavedViewId: "deleted-view" });
+
+    openMenu();
+
+    expect(screen.queryByText(CLEAR_LABEL)).toBeNull();
+  });
+
+  test("clicking a different view still applies it", () => {
+    const { handlers } = renderDropdown({ selectedSavedViewId: "errors" });
+
+    openMenu();
+    fireEvent.click(rowFor("Checkout service (default)"));
+
+    expect(handlers.onSelect).toHaveBeenCalledWith("checkout");
+    expect(handlers.onClear).not.toHaveBeenCalled();
+  });
+
+  test("aria-pressed tracks which view is applied", () => {
+    renderDropdown({ selectedSavedViewId: "errors" });
+
+    openMenu();
+
+    expect(rowFor("Errors only")).toHaveAttribute("aria-pressed", "true");
+    expect(rowFor("Checkout service (default)")).toHaveAttribute(
+      "aria-pressed",
+      "false",
+    );
+  });
+
+  test("without onClear the applied view is still merely re-applied", () => {
+    const { handlers } = renderDropdown({
+      selectedSavedViewId: "errors",
+      onClear: undefined,
+    });
+
+    openMenu();
+
+    expect(screen.queryByText(CLEAR_LABEL)).toBeNull();
+
+    fireEvent.click(rowFor("Errors only"));
+
+    expect(handlers.onSelect).toHaveBeenCalledWith("errors");
+    expect(handlers.onClear).not.toHaveBeenCalled();
+  });
+
+  test("Edit and Delete on the applied row do not clear it", () => {
+    const { handlers } = renderDropdown({ selectedSavedViewId: "errors" });
+
+    openMenu();
+    fireEvent.click(screen.getAllByRole("button", { name: "Edit" })[0]!);
+
+    expect(handlers.onEdit).toHaveBeenCalledWith("errors");
+
+    openMenu();
+    fireEvent.click(screen.getAllByRole("button", { name: "Delete" })[0]!);
+
+    expect(handlers.onDelete).toHaveBeenCalledWith("errors");
+    expect(handlers.onClear).not.toHaveBeenCalled();
+  });
+});
+
+/*
+ * The toolbar is the only thing that mounts the dropdown in the real logs
+ * explorer, so a clear handler that never reaches it is the same bug wearing
+ * a different hat. This renders the real toolbar rather than asserting on
+ * prop names.
+ */
+describe("LogsViewerToolbar hands the clear handler to the dropdown", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("Clear view appears in the toolbar's dropdown and fires the host handler", () => {
+    const onClearSavedView: () => void = jest.fn();
+    const onSavedViewSelect: (viewId: string) => void = jest.fn();
+
+    render(
+      <LogsViewerToolbar
+        resultCount={12}
+        savedViews={VIEWS}
+        selectedSavedViewId="errors"
+        onSavedViewSelect={onSavedViewSelect}
+        onClearSavedView={onClearSavedView}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /Errors only/ }));
+    fireEvent.click(screen.getByRole("button", { name: CLEAR_LABEL }));
+
+    expect(onClearSavedView).toHaveBeenCalledTimes(1);
+    expect(onSavedViewSelect).not.toHaveBeenCalled();
+  });
+
+  test("a toolbar without a clear handler shows no Clear view row", () => {
+    render(
+      <LogsViewerToolbar
+        resultCount={12}
+        savedViews={VIEWS}
+        selectedSavedViewId="errors"
+        onSavedViewSelect={jest.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /Errors only/ }));
+
+    expect(screen.queryByText(CLEAR_LABEL)).toBeNull();
+  });
+});
+
+/*
+ * The sidebar lists the same saved views a second time. It has no room for a
+ * "Clear view" row, so the toggle is the whole affordance there — and without
+ * it the sidebar quietly stayed a one-way door even after the dropdown was
+ * fixed.
+ */
+describe("LogsFacetSidebar toggles the applied view off", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  function renderSidebar(
+    onClearSavedView: (() => void) | undefined,
+    onSavedViewSelect: (viewId: string) => void,
+  ): void {
+    render(
+      <LogsFacetSidebar
+        facetData={{}}
+        isLoading={false}
+        serviceMap={{}}
+        onIncludeFilter={jest.fn()}
+        onExcludeFilter={jest.fn()}
+        savedViews={VIEWS}
+        selectedSavedViewId="errors"
+        onSavedViewSelect={onSavedViewSelect}
+        onClearSavedView={onClearSavedView}
+      />,
+    );
+  }
+
+  test("clicking the applied view clears it", () => {
+    const onClearSavedView: () => void = jest.fn();
+    const onSavedViewSelect: (viewId: string) => void = jest.fn();
+
+    renderSidebar(onClearSavedView, onSavedViewSelect);
+    fireEvent.click(screen.getByRole("button", { name: /Errors only/ }));
+
+    expect(onClearSavedView).toHaveBeenCalledTimes(1);
+    expect(onSavedViewSelect).not.toHaveBeenCalled();
+  });
+
+  test("clicking another view still applies it", () => {
+    const onClearSavedView: () => void = jest.fn();
+    const onSavedViewSelect: (viewId: string) => void = jest.fn();
+
+    renderSidebar(onClearSavedView, onSavedViewSelect);
+    fireEvent.click(screen.getByRole("button", { name: /Checkout service/ }));
+
+    expect(onSavedViewSelect).toHaveBeenCalledWith("checkout");
+    expect(onClearSavedView).not.toHaveBeenCalled();
+  });
+
+  test("the applied row reports itself as pressed", () => {
+    renderSidebar(jest.fn(), jest.fn());
+
+    expect(screen.getByRole("button", { name: /Errors only/ })).toHaveAttribute(
+      "aria-pressed",
+      "true",
+    );
+    expect(
+      screen.getByRole("button", { name: /Checkout service/ }),
+    ).toHaveAttribute("aria-pressed", "false");
+  });
+
+  test("a sidebar without a clear handler re-applies as before", () => {
+    const onSavedViewSelect: (viewId: string) => void = jest.fn();
+
+    renderSidebar(undefined, onSavedViewSelect);
+    fireEvent.click(screen.getByRole("button", { name: /Errors only/ }));
+
+    expect(onSavedViewSelect).toHaveBeenCalledWith("errors");
+  });
+});

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

@@ -0,0 +1,179 @@
+import { LogsSavedViewOption } from "../../../UI/Components/LogsViewer/types";
+import "@testing-library/jest-dom";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import React from "react";
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+
+/*
+ * LogsViewer is the container between the logs explorer and the two places a
+ * saved view can be picked — the toolbar dropdown and the facet sidebar. Both
+ * of those are covered directly in LogsSavedViewsDropdown.test.tsx, and the
+ * host's clearSavedView is covered in App/Tests/Dashboard. This file is the
+ * middle link: the passthrough that connects them.
+ *
+ * It is worth its own file because that link is invisible when it breaks.
+ * Deleting `onClearSavedView: props.onClearSavedView` from the toolbar props
+ * object leaves the dropdown rendering, the host handler defined, every other
+ * test green — and the "Clear view" row simply never appears again, which is
+ * the original bug back in place.
+ *
+ * The container loads services and log attributes on mount, so both API
+ * surfaces are mocked out; nothing here depends on what they return beyond
+ * their resolving.
+ */
+
+/*
+ * Declared before jest.mock but dereferenced inside the factories: ts-jest
+ * hoists the jest.mock calls above these initializers, so naming the mocks
+ * directly in a factory would capture undefined.
+ */
+const getListMock: MockFunction = getJestMockFunction();
+const postMock: MockFunction = getJestMockFunction();
+
+jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      getList: (...args: Array<any>) => {
+        return getListMock(...args);
+      },
+      getCommonHeaders: () => {
+        return {};
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/API/API", () => {
+  return {
+    __esModule: true,
+    default: {
+      post: (...args: Array<any>) => {
+        return postMock(...args);
+      },
+      getFriendlyErrorMessage: (error: Error) => {
+        return error.message;
+      },
+      getFriendlyMessage: (error: Error) => {
+        return error.message;
+      },
+    },
+  };
+});
+
+getListMock.mockImplementation(() => {
+  return Promise.resolve({ data: [], count: 0, skip: 0, limit: 0 });
+});
+
+postMock.mockImplementation(() => {
+  return Promise.resolve({ data: {} });
+});
+
+// Imported after the mock so the container picks the mocked ModelAPI up.
+import LogsViewer from "../../../UI/Components/LogsViewer/LogsViewer";
+
+const VIEWS: Array<LogsSavedViewOption> = [
+  { id: "errors", name: "Errors only" },
+  { id: "checkout", name: "Checkout service", isDefault: true },
+];
+
+const CLEAR_LABEL: string = "Clear view";
+
+interface RenderedViewer {
+  onClearSavedView: () => void;
+  onSavedViewSelect: (viewId: string) => void;
+}
+
+async function renderViewer(
+  withClearHandler: boolean,
+): Promise<RenderedViewer> {
+  const onClearSavedView: () => void = jest.fn();
+  const onSavedViewSelect: (viewId: string) => void = jest.fn();
+
+  render(
+    <LogsViewer
+      logs={[]}
+      isLoading={false}
+      filterData={{}}
+      onFilterChanged={jest.fn()}
+      facetData={{}}
+      savedViews={VIEWS}
+      selectedSavedViewId="errors"
+      onSavedViewSelect={onSavedViewSelect}
+      {...(withClearHandler ? { onClearSavedView: onClearSavedView } : {})}
+    />,
+  );
+
+  // The container renders a loader until its service lookup resolves.
+  await waitFor(() => {
+    expect(screen.getAllByRole("button").length).toBeGreaterThan(0);
+  });
+
+  return {
+    onClearSavedView: onClearSavedView,
+    onSavedViewSelect: onSavedViewSelect,
+  };
+}
+
+function savedViewButtons(): Array<HTMLElement> {
+  return screen.getAllByRole("button", { name: /Errors only/ });
+}
+
+describe("LogsViewer forwards the clear handler to both saved-view surfaces", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("the toolbar dropdown offers Clear view and it reaches the host", async () => {
+    const { onClearSavedView, onSavedViewSelect } = await renderViewer(true);
+
+    /*
+     * The sidebar lists the view too, so the trigger is picked by its
+     * dropdown, not by name alone: the toolbar's trigger is the one that
+     * opens a panel containing the clear row.
+     */
+    for (const button of savedViewButtons()) {
+      fireEvent.click(button);
+    }
+
+    const clearRow: HTMLElement = screen.getByRole("button", {
+      name: CLEAR_LABEL,
+    });
+
+    fireEvent.click(clearRow);
+
+    expect(onClearSavedView).toHaveBeenCalled();
+    expect(onSavedViewSelect).not.toHaveBeenCalled();
+  });
+
+  test("the facet sidebar's applied row toggles off through the same handler", async () => {
+    const { onClearSavedView, onSavedViewSelect } = await renderViewer(true);
+
+    /*
+     * The sidebar's entry is a plain row rather than a dropdown trigger, so
+     * clicking it is the clear. It is the first of the two matches because
+     * the sidebar renders before the table column.
+     */
+    fireEvent.click(savedViewButtons()[0]!);
+
+    expect(onClearSavedView).toHaveBeenCalled();
+    expect(onSavedViewSelect).not.toHaveBeenCalled();
+  });
+
+  test("a host that passes no clear handler still gets the old behaviour", async () => {
+    const { onClearSavedView, onSavedViewSelect } = await renderViewer(false);
+
+    fireEvent.click(savedViewButtons()[0]!);
+
+    expect(screen.queryByText(CLEAR_LABEL)).toBeNull();
+    expect(onClearSavedView).not.toHaveBeenCalled();
+    expect(onSavedViewSelect).toHaveBeenCalledWith("errors");
+  });
+});