@oneuptime/common 12.0.5 → 12.0.6

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

@@ -8,10 +8,45 @@ import { describe, expect, it, test } from "@jest/globals";
  * the whole suite is skipped before a single assertion runs.
  */
 import "@testing-library/jest-dom";
-import { fireEvent, render } from "@testing-library/react";
+import { act, fireEvent, render, RenderResult } from "@testing-library/react";
 import React from "react";
 import getJestMockFunction, { MockFunction } from "../../../Tests/MockType";
 
+/*
+ * The panel mounts closed and opens on the next animation frame, so anything
+ * asserting the settled look has to let that frame run first.
+ */
+type FlushEntranceFrameFunction = () => Promise<void>;
+
+const flushEntranceFrame: FlushEntranceFrameFunction =
+  async (): Promise<void> => {
+    await act(async () => {
+      await new Promise<void>((resolve: () => void) => {
+        requestAnimationFrame(() => {
+          resolve();
+        });
+      });
+    });
+  };
+
+/*
+ * The backdrop a user actually clicks is the layer the panel is centred in,
+ * not the tinted sheet behind it, which is inert.
+ */
+type GetBackdropLayerFunction = (panel: HTMLElement) => HTMLElement;
+
+const getBackdropLayer: GetBackdropLayerFunction = (
+  panel: HTMLElement,
+): HTMLElement => {
+  return panel.parentElement!;
+};
+
+type GetHeaderFunction = (title: HTMLElement) => HTMLElement;
+
+const getHeader: GetHeaderFunction = (title: HTMLElement): HTMLElement => {
+  return title.parentElement!.parentElement!;
+};
+
 describe("Modal", () => {
   test("renders the modal with the title and description", () => {
     const onSubmit: MockFunction = getJestMockFunction();
@@ -453,4 +488,249 @@ describe("Modal", () => {
 
     expect(getByTestId("right-element")).toBeInTheDocument();
   });
+
+  it("fades and lifts the panel in from a closed state", async () => {
+    const { getByTestId } = render(
+      <Modal title="Entrance Modal">
+        <div>Modal content</div>
+      </Modal>,
+    );
+
+    const panel: HTMLElement = getByTestId("modal");
+    const backdrop: HTMLElement = getByTestId("modal-backdrop");
+
+    expect(panel).toHaveClass("opacity-0", "translate-y-6", "sm:scale-95");
+    expect(backdrop).toHaveClass("opacity-0");
+
+    await flushEntranceFrame();
+
+    expect(panel).toHaveClass("opacity-100");
+    expect(backdrop).toHaveClass("opacity-100");
+  });
+
+  /*
+   * A `scale-100` left behind after the entrance would make the panel the
+   * containing block for `position: fixed`, and a modal opened from inside
+   * this one would then be laid out against the panel instead of the viewport.
+   */
+  it("leaves no transform on the panel once it has settled", async () => {
+    const { getByTestId } = render(
+      <Modal title="Settled Modal">
+        <div>Modal content</div>
+      </Modal>,
+    );
+
+    await flushEntranceFrame();
+
+    expect(getByTestId("modal").className).not.toMatch(
+      /(^|\s)(sm:)?(scale|translate)-/,
+    );
+  });
+
+  it("closes on a click that both starts and ends on the backdrop", () => {
+    const onCloseMock: MockFunction = getJestMockFunction();
+    const { getByTestId } = render(
+      <Modal title="Dismissable Modal" onClose={onCloseMock}>
+        <div>Modal content</div>
+      </Modal>,
+    );
+
+    const backdropLayer: HTMLElement = getBackdropLayer(getByTestId("modal"));
+
+    fireEvent.mouseDown(backdropLayer);
+    fireEvent.click(backdropLayer);
+
+    expect(onCloseMock).toHaveBeenCalledTimes(1);
+  });
+
+  /*
+   * Selecting text in the body and releasing past the edge of the panel is a
+   * drag, not a dismissal. Closing on it is the fastest way to lose a
+   * half-filled form.
+   */
+  it("stays open when a drag that started inside the panel ends on the backdrop", () => {
+    const onCloseMock: MockFunction = getJestMockFunction();
+    const { getByText, getByTestId } = render(
+      <Modal title="Drag Modal" onClose={onCloseMock}>
+        <div>Modal content</div>
+      </Modal>,
+    );
+
+    fireEvent.mouseDown(getByText("Modal content"));
+    fireEvent.click(getBackdropLayer(getByTestId("modal")));
+
+    expect(onCloseMock).not.toHaveBeenCalled();
+  });
+
+  it("stays open on a backdrop click when backdrop dismissal is disabled", () => {
+    const onCloseMock: MockFunction = getJestMockFunction();
+    const { getByTestId } = render(
+      <Modal
+        title="Sticky Modal"
+        onClose={onCloseMock}
+        disableCloseOnBackdropClick={true}
+      >
+        <div>Modal content</div>
+      </Modal>,
+    );
+
+    const backdropLayer: HTMLElement = getBackdropLayer(getByTestId("modal"));
+
+    fireEvent.mouseDown(backdropLayer);
+    fireEvent.click(backdropLayer);
+
+    expect(onCloseMock).not.toHaveBeenCalled();
+    // The close button is still the way out.
+    fireEvent.click(getByTestId("close-button"));
+    expect(onCloseMock).toHaveBeenCalledTimes(1);
+  });
+
+  it("ignores a backdrop click on a modal that is not the topmost one", () => {
+    const onParentCloseMock: MockFunction = getJestMockFunction();
+    const onChildCloseMock: MockFunction = getJestMockFunction();
+
+    const NestedModalFixture: React.FunctionComponent =
+      (): React.ReactElement => {
+        const [isChildOpen, setIsChildOpen] = React.useState<boolean>(false);
+
+        return (
+          <Modal title="Parent Modal" onClose={onParentCloseMock}>
+            <>
+              <button
+                type="button"
+                onClick={() => {
+                  setIsChildOpen(true);
+                }}
+              >
+                Open child
+              </button>
+              {isChildOpen && (
+                <Modal title="Child Modal" onClose={onChildCloseMock}>
+                  <div>Child content</div>
+                </Modal>
+              )}
+            </>
+          </Modal>
+        );
+      };
+
+    const { getAllByTestId, getByRole } = render(<NestedModalFixture />);
+
+    fireEvent.click(getByRole("button", { name: "Open child" }));
+
+    const [parentPanel, childPanel] = getAllByTestId("modal") as [
+      HTMLElement,
+      HTMLElement,
+    ];
+    const parentBackdropLayer: HTMLElement = getBackdropLayer(parentPanel);
+
+    fireEvent.mouseDown(parentBackdropLayer);
+    fireEvent.click(parentBackdropLayer);
+
+    expect(onParentCloseMock).not.toHaveBeenCalled();
+    expect(onChildCloseMock).not.toHaveBeenCalled();
+
+    const childBackdropLayer: HTMLElement = getBackdropLayer(childPanel);
+
+    fireEvent.mouseDown(childBackdropLayer);
+    fireEvent.click(childBackdropLayer);
+
+    expect(onChildCloseMock).toHaveBeenCalledTimes(1);
+    expect(onParentCloseMock).not.toHaveBeenCalled();
+  });
+
+  it("locks page scrolling for as long as any modal is open", () => {
+    document.body.style.overflow = "auto";
+
+    const parent: RenderResult = render(
+      <Modal title="First Modal">
+        <div>Modal content</div>
+      </Modal>,
+    );
+
+    expect(document.body.style.overflow).toBe("hidden");
+
+    const child: RenderResult = render(
+      <Modal title="Second Modal">
+        <div>Modal content</div>
+      </Modal>,
+    );
+
+    child.unmount();
+
+    // The first modal is still up, so scrolling must not come back yet.
+    expect(document.body.style.overflow).toBe("hidden");
+
+    parent.unmount();
+
+    expect(document.body.style.overflow).toBe("auto");
+
+    document.body.style.overflow = "";
+  });
+
+  it("shows a scroll shadow only on the side that content is hidden", () => {
+    const { getByTestId } = render(
+      <Modal title="Tall Modal" onSubmit={getJestMockFunction()}>
+        <div>Modal content</div>
+      </Modal>,
+    );
+
+    const content: HTMLElement = getByTestId("modal-content");
+    const header: HTMLElement = getHeader(getByTestId("modal-title"));
+    const footer: HTMLElement = getByTestId("modal-footer");
+
+    /*
+     * jsdom lays nothing out, so the body is given a size that overflows its
+     * container by hand.
+     */
+    Object.defineProperty(content, "scrollHeight", {
+      configurable: true,
+      value: 600,
+    });
+    Object.defineProperty(content, "clientHeight", {
+      configurable: true,
+      value: 200,
+    });
+    Object.defineProperty(content, "scrollTop", {
+      configurable: true,
+      value: 0,
+    });
+
+    fireEvent.scroll(content);
+
+    expect(header.className).not.toMatch(/shadow-\[/);
+    expect(footer.className).toMatch(/shadow-\[0_-6px/);
+
+    Object.defineProperty(content, "scrollTop", {
+      configurable: true,
+      value: 400,
+    });
+
+    fireEvent.scroll(content);
+
+    expect(header.className).toMatch(/shadow-\[0_6px/);
+    expect(footer.className).not.toMatch(/shadow-\[/);
+  });
+
+  /*
+   * The close button used to be positioned over the header, so a title long
+   * enough to reach the right edge ran underneath it.
+   */
+  it("lays the close button out beside the title rather than over it", () => {
+    const { getByTestId } = render(
+      <Modal
+        title="A title long enough to reach the right edge of the header"
+        onClose={getJestMockFunction()}
+      >
+        <div>Modal content</div>
+      </Modal>,
+    );
+
+    const title: HTMLElement = getByTestId("modal-title");
+    const closeButton: HTMLElement = getByTestId("close-button");
+
+    expect(closeButton).not.toHaveClass("absolute");
+    expect(closeButton.parentElement).toBe(getHeader(title));
+    expect(title.parentElement).not.toHaveClass("pr-9");
+  });
 });

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

@@ -0,0 +1,396 @@
+import FiltersForm from "../../../UI/Components/Filters/FiltersForm";
+import ClassicFilter from "../../../UI/Components/Filters/Types/Filter";
+import FilterData from "../../../UI/Components/Filters/Types/FilterData";
+import ModelFilter from "../../../UI/Components/ModelFilter/Filter";
+import buildQueryFromFilterData, {
+  getFilterKeys,
+  sanitizeFilterData,
+} from "../../../UI/Components/ModelTable/FilterDataToQuery";
+import FieldType from "../../../UI/Components/Types/FieldType";
+import EqualTo from "../../../Types/BaseDatabase/EqualTo";
+import NotEqual from "../../../Types/BaseDatabase/NotEqual";
+import Query from "../../../Types/BaseDatabase/Query";
+import Search from "../../../Types/BaseDatabase/Search";
+import StartsWith from "../../../Types/BaseDatabase/StartsWith";
+import { JSONObject } from "../../../Types/JSON";
+import JSONFunctions from "../../../Types/JSONFunctions";
+import User from "../../../Models/DatabaseModels/User";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  within,
+} from "@testing-library/react";
+import React from "react";
+import { afterEach, beforeEach, describe, expect, test } from "@jest/globals";
+
+/*
+ * A master admin pastes a user id into the Users table's "User ID" filter and
+ * presses Apply. Between that keystroke and the rows coming back, the value
+ * crosses four separate pieces of machinery, each of which can drop it without
+ * anything visibly breaking:
+ *
+ *   1. FiltersForm picks a filter component by FieldType. ObjectID has to land
+ *      on the text input; a type it does not recognise renders no control at
+ *      all, and the modal shows a label with empty space beside it.
+ *   2. That component encodes the operator into a typed query value.
+ *   3. sanitizeFilterData drops every key the table did not declare - the
+ *      trust boundary for URL-supplied filters - so `_id` has to be declared.
+ *   4. buildQueryFromFilterData copies recognised values into the query.
+ *
+ * These tests walk the whole path with the exact filter declaration the admin
+ * Users and Projects tables ship, rather than asserting on any one stage in
+ * isolation.
+ */
+
+const USER_ID: string = "5f0e8e3a-1f24-4a2f-9e4c-2b1d3c4e5f60";
+
+// Exactly what App/FeatureSet/AdminDashboard/src/Pages/Users/Index.tsx declares.
+const ID_FILTER: ModelFilter<User> = {
+  field: { _id: true },
+  title: "User ID",
+  type: FieldType.ObjectID,
+};
+
+const NAME_FILTER: ModelFilter<User> = {
+  field: { name: true },
+  title: "Full Name",
+  type: FieldType.Text,
+};
+
+const MODEL_FILTERS: Array<ModelFilter<User>> = [ID_FILTER, NAME_FILTER];
+
+/*
+ * BaseModelTable converts its `field`-shaped filters into the `key`-shaped
+ * ones the filter form consumes. Mirror that conversion here so the form is
+ * driven by the page's real declaration.
+ */
+type ToClassicFunction = (filter: ModelFilter<User>) => ClassicFilter<User>;
+
+const toClassic: ToClassicFunction = (
+  filter: ModelFilter<User>,
+): ClassicFilter<User> => {
+  return {
+    title: filter.title,
+    key: Object.keys(filter.field)[0] as keyof User,
+    type: filter.type,
+  } as ClassicFilter<User>;
+};
+
+/**
+ * The filter form is controlled by its parent - the real one being the filter
+ * modal, which holds the selections until Apply. This stands in for that
+ * parent, and publishes the current selections so assertions can read them.
+ */
+let filterData: FilterData<User> = {};
+
+const FilterModalStandIn: React.FunctionComponent<{
+  initial: FilterData<User>;
+  onChange: (data: FilterData<User>) => void;
+}> = (props: {
+  initial: FilterData<User>;
+  onChange: (data: FilterData<User>) => void;
+}): React.ReactElement => {
+  const [data, setData] = React.useState<FilterData<User>>(props.initial);
+
+  return (
+    <FiltersForm<User>
+      id="users-table-filter-form"
+      showFilter={true}
+      filters={MODEL_FILTERS.map(toClassic)}
+      filterData={data}
+      onFilterChanged={(next: FilterData<User>) => {
+        setData(next);
+        props.onChange(next);
+      }}
+    />
+  );
+};
+
+type RenderFormFunction = (initial?: FilterData<User>) => void;
+
+const renderForm: RenderFormFunction = (initial?: FilterData<User>): void => {
+  filterData = initial || {};
+
+  render(
+    <FilterModalStandIn
+      initial={filterData}
+      onChange={(next: FilterData<User>) => {
+        filterData = next;
+      }}
+    />,
+  );
+};
+
+/**
+ * The text input belonging to the User ID row, found by the placeholder the
+ * filter builds from its own title.
+ */
+type IdInputFunction = () => HTMLInputElement;
+
+const idInput: IdInputFunction = (): HTMLInputElement => {
+  return screen.getByPlaceholderText("Filter by User ID") as HTMLInputElement;
+};
+
+/**
+ * The operator trigger on the User ID row. Rows are `grid` wrappers, so scope
+ * the lookup to the one whose label is "User ID" - otherwise the Full Name
+ * row's trigger is just as good a match.
+ */
+type IdOperatorTriggerFunction = () => HTMLButtonElement;
+
+const idOperatorTrigger: IdOperatorTriggerFunction = (): HTMLButtonElement => {
+  const label: HTMLElement = screen.getByText("User ID");
+  const row: HTMLElement = label.closest("div.grid") as HTMLElement;
+
+  return within(row).getByRole("button", {
+    name: /contains|equals|starts with|ends with|does not/i,
+  }) as HTMLButtonElement;
+};
+
+type ChooseOperatorFunction = (label: string) => void;
+
+const chooseOperator: ChooseOperatorFunction = (label: string): void => {
+  const trigger: HTMLButtonElement = idOperatorTrigger();
+
+  fireEvent.mouseDown(trigger);
+  fireEvent.click(trigger);
+
+  const menuId: string = trigger.getAttribute("aria-controls") as string;
+  const menu: HTMLElement = document.getElementById(menuId) as HTMLElement;
+
+  fireEvent.click(within(menu).getByText(label));
+};
+
+type QueryFromFilterDataFunction = () => Query<User>;
+
+/**
+ * The two stages that sit between the filter modal and the request: strip
+ * anything undeclared, then translate what is left into a query.
+ */
+const queryFromFilterData: QueryFromFilterDataFunction = (): Query<User> => {
+  return buildQueryFromFilterData<User>({
+    filterData: sanitizeFilterData<User>({
+      filterData: filterData,
+      filters: MODEL_FILTERS,
+    }),
+    filters: MODEL_FILTERS,
+  });
+};
+
+describe("filtering a model by its ObjectID", () => {
+  beforeEach(() => {
+    filterData = {};
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe("the control the admin actually gets", () => {
+    /*
+     * FiltersForm renders every filter component and each one returns an
+     * empty fragment for types it does not own. If ObjectID were missing from
+     * the text filter's list, the row would render its label and nothing
+     * else - a filter that looks present and cannot be used.
+     */
+    test("renders a text input to paste an id into", () => {
+      renderForm();
+
+      expect(idInput()).toBeTruthy();
+      expect(idInput().tagName).toBe("INPUT");
+    });
+
+    test("defaults to matching on part of an id", () => {
+      renderForm();
+
+      expect(idOperatorTrigger().textContent).toContain("contains");
+    });
+
+    /*
+     * An id is usually copied whole, so exact match has to be reachable -
+     * and it is the one operator where a wrong encoding is invisible, since
+     * "contains <whole id>" and "equals <whole id>" return the same row.
+     */
+    test("offers exact match as well as partial", () => {
+      renderForm();
+
+      const trigger: HTMLButtonElement = idOperatorTrigger();
+
+      fireEvent.mouseDown(trigger);
+      fireEvent.click(trigger);
+
+      const menu: HTMLElement = document.getElementById(
+        trigger.getAttribute("aria-controls") as string,
+      ) as HTMLElement;
+
+      expect(
+        Array.from(menu.querySelectorAll("[role='option']")).map(
+          (option: Element) => {
+            return (option.textContent || "").trim();
+          },
+        ),
+      ).toEqual([
+        "contains",
+        "does not contain",
+        "equals",
+        "does not equal",
+        "starts with",
+        "ends with",
+        "is empty",
+        "is not empty",
+      ]);
+    });
+  });
+
+  describe("what a typed id becomes", () => {
+    test("a partial id becomes a Search on _id", () => {
+      renderForm();
+
+      fireEvent.change(idInput(), { target: { value: "5f0e8e3a" } });
+
+      const query: Query<User> = queryFromFilterData();
+
+      expect(query._id).toBeInstanceOf(Search);
+      expect((query._id as Search<string>).toString()).toBe("5f0e8e3a");
+    });
+
+    test("a whole id under 'equals' becomes an EqualTo on _id", () => {
+      renderForm();
+
+      fireEvent.change(idInput(), { target: { value: USER_ID } });
+      chooseOperator("equals");
+
+      const query: Query<User> = queryFromFilterData();
+
+      expect(query._id).toBeInstanceOf(EqualTo);
+      expect((query._id as EqualTo<string>).toString()).toBe(USER_ID);
+    });
+
+    test("'does not equal' becomes a NotEqual on _id", () => {
+      renderForm();
+
+      fireEvent.change(idInput(), { target: { value: USER_ID } });
+      chooseOperator("does not equal");
+
+      expect(queryFromFilterData()._id).toBeInstanceOf(NotEqual);
+    });
+
+    test("'starts with' becomes a StartsWith on _id", () => {
+      renderForm();
+
+      fireEvent.change(idInput(), { target: { value: "5f0e8e3a" } });
+      chooseOperator("starts with");
+
+      expect(queryFromFilterData()._id).toBeInstanceOf(StartsWith);
+    });
+
+    /*
+     * Clearing the box has to clear the filter, not send an empty match that
+     * every row satisfies - or, worse, an `_id = ''` the database rejects.
+     */
+    test("clearing the box removes the filter entirely", () => {
+      renderForm();
+
+      fireEvent.change(idInput(), { target: { value: USER_ID } });
+      expect(queryFromFilterData()._id).toBeDefined();
+
+      fireEvent.change(idInput(), { target: { value: "" } });
+      expect(queryFromFilterData()._id).toBeUndefined();
+    });
+
+    test("filtering by id leaves the other filters alone", () => {
+      renderForm();
+
+      fireEvent.change(idInput(), { target: { value: USER_ID } });
+
+      expect(Object.keys(queryFromFilterData())).toEqual(["_id"]);
+    });
+  });
+
+  describe("the sanitizer that stands between the modal and the request", () => {
+    /*
+     * `sanitizeFilterData` keeps only keys the table declared a filter for.
+     * Before the page declared one, an `_id` in the filter data - restored
+     * from a URL, say - was dropped here and the table came back unfiltered.
+     */
+    test("keeps _id now that the page declares a filter for it", () => {
+      expect(getFilterKeys<User>(MODEL_FILTERS)).toContain("_id");
+
+      expect(
+        sanitizeFilterData<User>({
+          filterData: { _id: new Search(USER_ID) } as FilterData<User>,
+          filters: MODEL_FILTERS,
+        })._id,
+      ).toBeInstanceOf(Search);
+    });
+
+    test("still drops a column the page does not offer a filter for", () => {
+      expect(
+        sanitizeFilterData<User>({
+          filterData: {
+            _id: new Search(USER_ID),
+            isMasterAdmin: true,
+          } as unknown as FilterData<User>,
+          filters: MODEL_FILTERS,
+        }),
+      ).toEqual({ _id: new Search(USER_ID) });
+    });
+  });
+
+  /*
+   * Table filters are mirrored into the query string so a filtered view can be
+   * bookmarked and shared - which for an ID filter is the whole point, since
+   * "here is the user I mean" is exactly the link an admin wants to send.
+   * The values are class instances, so they only survive the round trip
+   * through JSONFunctions' typed (de)serialization.
+   */
+  describe("sharing a filtered view by URL", () => {
+    type RoundTripFunction = (value: unknown) => unknown;
+
+    const roundTrip: RoundTripFunction = (value: unknown): unknown => {
+      const serialized: string = JSON.stringify(
+        JSONFunctions.serialize({ _id: value } as JSONObject),
+      );
+
+      return (
+        JSONFunctions.deserialize(JSON.parse(serialized) as JSONObject) as {
+          _id: unknown;
+        }
+      )._id;
+    };
+
+    test("a 'contains' id filter survives the round trip", () => {
+      const restored: unknown = roundTrip(new Search(USER_ID));
+
+      expect(restored).toBeInstanceOf(Search);
+      expect((restored as Search<string>).toString()).toBe(USER_ID);
+    });
+
+    test("an 'equals' id filter survives the round trip", () => {
+      const restored: unknown = roundTrip(new EqualTo(USER_ID));
+
+      expect(restored).toBeInstanceOf(EqualTo);
+      expect((restored as EqualTo<string>).toString()).toBe(USER_ID);
+    });
+
+    /*
+     * A restored filter also has to read back as the operator that produced
+     * it, or the modal reopens showing "contains" over an equality filter.
+     */
+    test("a restored 'equals' filter reopens as 'equals'", () => {
+      renderForm({ _id: new EqualTo(USER_ID) } as FilterData<User>);
+
+      expect(idOperatorTrigger().textContent).toContain("equals");
+      expect(idInput().value).toBe(USER_ID);
+    });
+
+    test("a restored 'contains' filter reopens as 'contains'", () => {
+      renderForm({ _id: new Search("5f0e8e3a") } as FilterData<User>);
+
+      expect(idOperatorTrigger().textContent).toContain("contains");
+      expect(idInput().value).toBe("5f0e8e3a");
+    });
+  });
+});