@oneuptime/common 12.0.14 → 12.0.16

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

@@ -0,0 +1,267 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import Button from "../../../UI/Components/Button/Button";
+import MoreMenuItem from "../../../UI/Components/MoreMenu/MoreMenuItem";
+import IconProp from "../../../Types/Icon/IconProp";
+
+/*
+ * Button and MoreMenuItem have both accepted a `tooltip` for a long time, and
+ * on a disabled control it did nothing at all. That is the one case where the
+ * tooltip carries the whole message: a locked button with no explanation is
+ * indistinguishable from a broken one.
+ *
+ * Two separate mechanisms conspired against it. A disabled form control
+ * dispatches no pointer events and cannot be focused, so neither of tippy's
+ * triggers ever fires; and tippy's own show() bails out early when its
+ * reference element carries a `disabled` attribute. The fix needs both halves:
+ * a hoverable, focusable wrapper to act as the reference, and
+ * `pointer-events-none` on the button so hit-testing lands on that wrapper
+ * instead of on the control that swallows events.
+ *
+ * These tests are the regression guard for both halves. Deleting either one
+ * makes the "renders the tooltip" cases fail.
+ *
+ * Notes on asserting tippy under jsdom, learned the hard way:
+ *   - the tooltip is portalled to document.body, so query with `screen`,
+ *     never the render container;
+ *   - the box stays data-state="hidden" because the animation never completes
+ *     under jsdom - assert presence, not that attribute;
+ *   - aria-describedby is not yet on the trigger immediately after mouseenter.
+ */
+
+describe("tooltips on disabled controls", () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe("Button", () => {
+    test("shows its tooltip on hover when enabled", () => {
+      render(
+        <Button
+          dataTestId="btn"
+          title="Create Monitor"
+          tooltip="Some reason"
+        />,
+      );
+
+      fireEvent.mouseEnter(screen.getByTestId("btn"));
+
+      expect(screen.getByRole("tooltip")).toHaveTextContent("Some reason");
+    });
+
+    /*
+     * The core assertion of the whole change. Before the fix this found no
+     * tooltip at all: hovering a disabled button produced nothing, not even a
+     * tippy root element.
+     */
+    test("shows its tooltip on hover when DISABLED", () => {
+      render(
+        <Button
+          dataTestId="btn"
+          title="Create Monitor"
+          disabled={true}
+          tooltip="You do not have permission to create this Monitor."
+        />,
+      );
+
+      fireEvent.mouseEnter(screen.getByTestId("btn-disabled-wrapper"));
+
+      expect(screen.getByRole("tooltip")).toHaveTextContent(
+        "You do not have permission to create this Monitor.",
+      );
+    });
+
+    /*
+     * Half two of the fix. Without pointer-events-none the wrapper is never
+     * hovered in a real browser, because the button on top of it eats the
+     * pointer without dispatching anything. jsdom does not hit-test, so this
+     * has to be asserted on the class directly.
+     */
+    test("takes a disabled button out of hit-testing so the wrapper can be hovered", () => {
+      render(
+        <Button
+          dataTestId="btn"
+          title="Create Monitor"
+          disabled={true}
+          tooltip="You do not have permission to create this Monitor."
+        />,
+      );
+
+      expect(screen.getByTestId("btn")).toHaveClass("pointer-events-none");
+    });
+
+    test("keeps a disabled button reachable by keyboard for the tooltip", () => {
+      render(
+        <Button
+          dataTestId="btn"
+          title="Create Monitor"
+          disabled={true}
+          tooltip="You do not have permission to create this Monitor."
+        />,
+      );
+
+      // A disabled button is out of the tab order; the wrapper stands in.
+      expect(screen.getByTestId("btn-disabled-wrapper")).toHaveAttribute(
+        "tabindex",
+        "0",
+      );
+
+      fireEvent.focus(screen.getByTestId("btn-disabled-wrapper"));
+
+      expect(screen.getByRole("tooltip")).toBeInTheDocument();
+    });
+
+    test("still marks the button disabled to assistive technology", () => {
+      render(
+        <Button
+          dataTestId="btn"
+          title="Create Monitor"
+          disabled={true}
+          tooltip="Nope"
+        />,
+      );
+
+      const button: HTMLElement = screen.getByTestId("btn");
+
+      expect(button).toBeDisabled();
+      expect(button).toHaveAttribute("aria-disabled", "true");
+    });
+
+    test("does not fire onClick while disabled", () => {
+      let clicked: boolean = false;
+
+      render(
+        <Button
+          dataTestId="btn"
+          title="Create Monitor"
+          disabled={true}
+          tooltip="Nope"
+          onClick={() => {
+            clicked = true;
+          }}
+        />,
+      );
+
+      fireEvent.click(screen.getByTestId("btn"));
+
+      expect(clicked).toBe(false);
+    });
+
+    /*
+     * isLoading hard-disables the button too, so it hits exactly the same
+     * dead-tooltip path.
+     */
+    test("shows its tooltip while loading", () => {
+      render(
+        <Button
+          dataTestId="btn"
+          title="Saving"
+          isLoading={true}
+          tooltip="Working on it"
+        />,
+      );
+
+      fireEvent.mouseEnter(screen.getByTestId("btn-disabled-wrapper"));
+
+      expect(screen.getByRole("tooltip")).toHaveTextContent("Working on it");
+    });
+
+    /*
+     * The enabled path is by far the most common one - 200-odd call sites - and
+     * must keep rendering the bare button with no extra wrapper around it,
+     * because layout in several places depends on the button being the direct
+     * child of its flex container.
+     */
+    test("does not wrap an enabled button", () => {
+      render(<Button dataTestId="btn" title="Create" tooltip="Hello" />);
+
+      expect(screen.queryByTestId("btn-disabled-wrapper")).toBeNull();
+    });
+
+    test("does not wrap a disabled button that has nothing to say", () => {
+      render(<Button dataTestId="btn" title="Create" disabled={true} />);
+
+      expect(screen.queryByTestId("btn-disabled-wrapper")).toBeNull();
+      expect(screen.getByTestId("btn")).not.toHaveClass("pointer-events-none");
+    });
+  });
+
+  describe("MoreMenuItem", () => {
+    /*
+     * Header buttons that do not fit spill into a More menu, and bulk actions
+     * live there permanently - so a locked Delete is just as likely to be seen
+     * as a MoreMenuItem as it is as a Button.
+     */
+    test("shows its tooltip on hover when disabled", () => {
+      render(
+        <MoreMenuItem
+          text="Delete"
+          icon={IconProp.Trash}
+          isDisabled={true}
+          tooltip="You do not have permission to delete this Monitor."
+          onClick={() => {}}
+        />,
+      );
+
+      fireEvent.mouseEnter(screen.getByRole("menuitem").parentElement!);
+
+      expect(screen.getByRole("tooltip")).toHaveTextContent(
+        "You do not have permission to delete this Monitor.",
+      );
+    });
+
+    test("takes a disabled item out of hit-testing", () => {
+      render(
+        <MoreMenuItem
+          text="Delete"
+          isDisabled={true}
+          tooltip="Nope"
+          onClick={() => {}}
+        />,
+      );
+
+      expect(screen.getByRole("menuitem")).toHaveClass("pointer-events-none");
+    });
+
+    test("does not fire onClick while disabled", () => {
+      let clicked: boolean = false;
+
+      render(
+        <MoreMenuItem
+          text="Delete"
+          isDisabled={true}
+          tooltip="Nope"
+          onClick={() => {
+            clicked = true;
+          }}
+        />,
+      );
+
+      fireEvent.click(screen.getByRole("menuitem"));
+
+      expect(clicked).toBe(false);
+    });
+
+    test("renders an enabled item unwrapped and clickable", () => {
+      let clicked: boolean = false;
+
+      render(
+        <MoreMenuItem
+          text="Delete"
+          onClick={() => {
+            clicked = true;
+          }}
+        />,
+      );
+
+      fireEvent.click(screen.getByRole("menuitem"));
+
+      expect(clicked).toBe(true);
+      expect(screen.getByRole("menuitem")).not.toHaveClass(
+        "pointer-events-none",
+      );
+    });
+  });
+});

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

@@ -17,6 +17,31 @@ import ObjectID from "../../../Types/ObjectID";
 import React from "react";
 import { act } from "react-test-renderer";
 import Select from "../../../Types/BaseDatabase/Select";
+import TableAccessControl from "../../../Types/Database/AccessControl/TableAccessControl";
+import Permission from "../../../Types/Permission";
+/*
+ * The button is now gated on the viewer's permissions, so the tests have to
+ * say who is looking at the card. Without a permission snapshot the component
+ * cannot tell "not allowed" from "not loaded yet" and offers no button at all
+ * - which is correct, and is covered in the permission gating suites.
+ */
+jest.mock("../../../UI/Utils/Permission", () => {
+  return {
+    __esModule: true,
+    default: {
+      getAllPermissions: (): Array<string> => {
+        return ["ProjectOwner"];
+      },
+      getProjectPermissions: (): null => {
+        return null;
+      },
+      getGlobalPermissions: (): { globalPermissions: Array<string> } => {
+        return { globalPermissions: ["ProjectOwner"] };
+      },
+    },
+  };
+});
+
 jest.mock("../../../UI/Utils/Navigation", () => {
   return {
     __esModule: true,
@@ -64,6 +89,18 @@ jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
   };
 });
 
+/*
+ * Access control is not decoration here: Duplicate writes a new record, so the
+ * button is gated on create permission, and a model that declares none is one
+ * nobody can create - the button is correctly withheld. Every real model
+ * declares its own, so this one does too.
+ */
+@TableAccessControl({
+  create: [Permission.ProjectOwner],
+  read: [Permission.ProjectOwner],
+  update: [Permission.ProjectOwner],
+  delete: [Permission.ProjectOwner],
+})
 @TableMetaData({
   tableName: "Foo",
   singularName: "Foo",

package/Tests/UI/Components/Forms/FormSubmitAnalytics.test.tsx

@@ -0,0 +1,206 @@
+import "@testing-library/jest-dom";
+import { beforeEach, describe, expect, jest, test } from "@jest/globals";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { UserEvent } from "@testing-library/user-event/dist/types/setup/setup";
+import React from "react";
+import getJestMockFunction, { MockFunction } from "../../../MockType";
+
+/*
+ * The "FORM SUBMIT" event is what names a conversion in PostHog and in the GTM
+ * dataLayer. Every wrapper around BasicForm has to hand it something
+ * meaningful, and BasicForm has to stay silent when nothing meaningful exists.
+ * An event named after a missing prop reads as "FORM SUBMIT: undefined" and
+ * collapses every form in the product into one indistinguishable conversion.
+ */
+
+const captureMock: MockFunction = getJestMockFunction();
+
+jest.mock("../../../../UI/Utils/Analytics", () => {
+  return {
+    __esModule: true,
+    default: {
+      capture: (...args: Array<any>) => {
+        return captureMock(...args);
+      },
+    },
+  };
+});
+
+import BasicForm from "../../../../UI/Components/Forms/BasicForm";
+import BasicFormModal from "../../../../UI/Components/FormModal/BasicFormModal";
+import Fields from "../../../../UI/Components/Forms/Types/Fields";
+import FormFieldSchemaType from "../../../../UI/Components/Forms/Types/FormFieldSchemaType";
+import FormValues from "../../../../UI/Components/Forms/Types/FormValues";
+import FormAnalyticsName from "../../../../UI/Components/Forms/Utils/FormAnalyticsName";
+
+const fields: Fields<FormValues<any>> = [
+  {
+    field: {
+      label: true,
+    },
+    title: "Label",
+    fieldType: FormFieldSchemaType.Text,
+    dataTestId: "label",
+  },
+];
+
+function setupUser(): UserEvent {
+  return userEvent.setup({ delay: null });
+}
+
+type CapturedEventNamesFunction = () => Array<string>;
+
+const capturedEventNames: CapturedEventNamesFunction = (): Array<string> => {
+  return captureMock.mock.calls.map((call: Array<any>) => {
+    return call[0] as string;
+  });
+};
+
+describe("FORM SUBMIT analytics naming", () => {
+  beforeEach(() => {
+    captureMock.mockClear();
+  });
+
+  describe("FormAnalyticsName.resolve", () => {
+    test("takes the first usable candidate", () => {
+      expect(FormAnalyticsName.resolve("Create Monitor", "Fallback")).toBe(
+        "Create Monitor",
+      );
+      expect(FormAnalyticsName.resolve(undefined, "Fallback")).toBe("Fallback");
+      expect(FormAnalyticsName.resolve(null, "  Trimmed  ")).toBe("Trimmed");
+    });
+
+    test("rejects candidates that are, or embed, a stringified empty value", () => {
+      expect(FormAnalyticsName.resolve("undefined")).toBeUndefined();
+      expect(FormAnalyticsName.resolve("null")).toBeUndefined();
+      expect(FormAnalyticsName.resolve("Duplicate undefined")).toBeUndefined();
+      expect(FormAnalyticsName.resolve("Edit null")).toBeUndefined();
+
+      // A rejected candidate falls through to the next one.
+      expect(
+        FormAnalyticsName.resolve("Duplicate undefined", "Duplicate Monitor"),
+      ).toBe("Duplicate Monitor");
+    });
+
+    test("returns undefined when no candidate is usable", () => {
+      expect(FormAnalyticsName.resolve()).toBeUndefined();
+      expect(
+        FormAnalyticsName.resolve(undefined, null, "", "   "),
+      ).toBeUndefined();
+    });
+
+    test("leaves real words that merely look like empty values alone", () => {
+      expect(FormAnalyticsName.resolve("Set Nullable Columns")).toBe(
+        "Set Nullable Columns",
+      );
+    });
+  });
+
+  describe("BasicForm", () => {
+    test("captures the form name on submit", async () => {
+      const onSubmit: MockFunction = getJestMockFunction();
+
+      render(
+        <BasicForm
+          fields={fields}
+          id="named-form"
+          name="Create Widget"
+          initialValues={{ label: "" }}
+          onSubmit={onSubmit}
+          submitButtonText="Submit"
+        />,
+      );
+
+      const user: UserEvent = setupUser();
+      await user.click(screen.getByTestId("Submit"));
+
+      await waitFor(() => {
+        expect(onSubmit).toHaveBeenCalled();
+      });
+
+      expect(capturedEventNames()).toEqual(["FORM SUBMIT: Create Widget"]);
+    }, 30000);
+
+    test("stays silent when the form has no name", async () => {
+      const onSubmit: MockFunction = getJestMockFunction();
+
+      render(
+        <BasicForm
+          fields={fields}
+          id="unnamed-form"
+          initialValues={{ label: "" }}
+          onSubmit={onSubmit}
+          submitButtonText="Submit"
+        />,
+      );
+
+      const user: UserEvent = setupUser();
+      await user.click(screen.getByTestId("Submit"));
+
+      // The form still submits -- only the analytics event is skipped.
+      await waitFor(() => {
+        expect(onSubmit).toHaveBeenCalled();
+      });
+
+      expect(captureMock).not.toHaveBeenCalled();
+    }, 30000);
+  });
+
+  describe("BasicFormModal", () => {
+    test("falls back to the modal title when the caller passes no name", async () => {
+      const onSubmit: MockFunction = getJestMockFunction();
+
+      render(
+        <BasicFormModal<FormValues<any>>
+          title="Add Probe to Monitors"
+          submitButtonText="Save"
+          onSubmit={onSubmit}
+          formProps={{
+            fields: fields,
+            initialValues: { label: "" },
+          }}
+        />,
+      );
+
+      const user: UserEvent = setupUser();
+      await user.click(screen.getByTestId("modal-footer-submit-button"));
+
+      await waitFor(() => {
+        expect(onSubmit).toHaveBeenCalled();
+      });
+
+      expect(capturedEventNames()).toEqual([
+        "FORM SUBMIT: Add Probe to Monitors",
+      ]);
+    }, 30000);
+
+    test("prefers a name the caller supplied over the modal title", async () => {
+      const onSubmit: MockFunction = getJestMockFunction();
+
+      render(
+        <BasicFormModal<FormValues<any>>
+          title="Add Probe to Monitors"
+          name="Monitor > Bulk Add Probe"
+          submitButtonText="Save"
+          onSubmit={onSubmit}
+          formProps={{
+            fields: fields,
+            initialValues: { label: "" },
+          }}
+        />,
+      );
+
+      const user: UserEvent = setupUser();
+      await user.click(screen.getByTestId("modal-footer-submit-button"));
+
+      await waitFor(() => {
+        expect(onSubmit).toHaveBeenCalled();
+      });
+
+      expect(capturedEventNames()).toEqual([
+        "FORM SUBMIT: Monitor > Bulk Add Probe",
+      ]);
+    }, 30000);
+  });
+});