@oneuptime/common 13.0.3 → 13.0.5

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

@@ -4,10 +4,11 @@ import Card, {
   ComponentProps,
 } from "../../../UI/Components/Card/Card";
 import "@testing-library/jest-dom";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, within } from "@testing-library/react";
 import IconProp from "../../../Types/Icon/IconProp";
 import React, { ReactElement } from "react";
 import { describe, expect, jest } from "@jest/globals";
+import getJestMockFunction, { MockFunction } from "../../MockType";
 
 describe("Card", () => {
   const props: ComponentProps = {
@@ -107,3 +108,313 @@ describe("Card", () => {
     expect(childComponent.parentElement).toHaveClass("mt-4");
   });
 });
+
+describe("Card header layout", () => {
+  const buttons: Array<CardButtonSchema> = [
+    {
+      title: "Edit",
+      buttonStyle: ButtonStyleType.NORMAL,
+      onClick: jest.fn(),
+      icon: IconProp.Edit,
+    },
+    {
+      title: "Refresh",
+      buttonStyle: ButtonStyleType.OUTLINE,
+      onClick: jest.fn(),
+      icon: IconProp.Refresh,
+    },
+  ];
+
+  const baseProps: ComponentProps = {
+    title: "Incident Details",
+    description: "Key facts about this incident.",
+    buttons: buttons,
+    rightElement: <span>right element</span>,
+    children: <div>body</div>,
+  };
+
+  type RenderMarkupFunction = (props: ComponentProps) => string;
+
+  const renderMarkup: RenderMarkupFunction = (
+    props: ComponentProps,
+  ): string => {
+    const { container, unmount } = render(<Card {...props} />);
+    const markup: string = container.innerHTML;
+    unmount();
+    return markup;
+  };
+
+  // The nearest ancestor of an element that matches a selector, or a throw.
+  type ClosestFunction = (element: HTMLElement, selector: string) => Element;
+
+  const closest: ClosestFunction = (
+    element: HTMLElement,
+    selector: string,
+  ): Element => {
+    const match: Element | null = element.closest(selector);
+
+    if (!match) {
+      throw new Error(`No ancestor matches ${selector}`);
+    }
+
+    return match;
+  };
+
+  describe("default", () => {
+    /*
+     * Captured from Card before headerLayout existed. Every card in the app
+     * that does not opt in must keep rendering exactly this.
+     */
+    const GOLDEN_WITH_ACTIONS: string =
+      '<div data-testid="card" class="mb-5 extra"><div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-visible"><div class="py-6 px-5 md:px-6"><div class="flex flex-col md:flex-row md:justify-between md:items-start"><div class="flex-1 min-w-0"><h2 data-testid="card-details-heading" id="card-details-heading" class="text-lg font-semibold leading-6 text-gray-900">Title</h2><p data-testid="card-description" class="mt-1.5 text-sm text-gray-500 w-full hidden md:block leading-relaxed">Desc</p></div><div class="flex flex-col md:flex-row md:items-center md:w-fit mt-4 md:mt-0 md:ml-4 gap-2 md:gap-0 flex-shrink-0 items-center"><div class="mb-2 md:mb-0 md:mr-3"><span>right</span></div><div class="flex flex-wrap items-center gap-1.5"><div class="flex items-center"><a href="/docs">Docs</a></div></div></div></div><div class="mt-0"><div>body</div></div></div></div></div>';
+
+    const GOLDEN_WITHOUT_ACTIONS: string =
+      '<div data-testid="card" class="mb-5 "><div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-visible"><div class="py-6 px-5 md:px-6"><div class="flex flex-col md:flex-row md:justify-between md:items-start"><div class="w-full"><h2 data-testid="card-details-heading" id="card-details-heading" class="text-lg font-semibold leading-6 text-gray-900">Title</h2><p data-testid="card-description" class="mt-1.5 text-sm text-gray-500 w-full hidden md:block leading-relaxed">Desc</p></div></div></div></div></div>';
+
+    test.each([
+      ["left out", undefined],
+      ["default", "default"],
+    ] as Array<[string, "default" | undefined]>)(
+      "headerLayout %s renders the markup Card has always rendered",
+      (_label: string, headerLayout: "default" | undefined) => {
+        expect(
+          renderMarkup({
+            title: "Title",
+            description: "Desc",
+            rightElement: <span>right</span>,
+            buttons: [
+              <a key="docs" href="/docs">
+                Docs
+              </a>,
+            ],
+            children: <div>body</div>,
+            className: "extra",
+            bodyClassName: "mt-0",
+            headerLayout: headerLayout,
+          }),
+        ).toBe(GOLDEN_WITH_ACTIONS);
+
+        expect(
+          renderMarkup({
+            title: "Title",
+            description: "Desc",
+            headerLayout: headerLayout,
+          }),
+        ).toBe(GOLDEN_WITHOUT_ACTIONS);
+      },
+    );
+
+    test("leaving headerLayout out, or passing default, renders the same markup", () => {
+      const withoutProp: string = renderMarkup(baseProps);
+      const withDefault: string = renderMarkup({
+        ...baseProps,
+        headerLayout: "default",
+      });
+
+      expect(withDefault).toBe(withoutProp);
+    });
+
+    test("keeps the side-by-side header classes", () => {
+      render(<Card {...baseProps} />);
+
+      const heading: HTMLElement = screen.getByTestId("card-details-heading");
+      const titleBlock: HTMLElement = heading.parentElement!;
+      const headerRow: HTMLElement = titleBlock.parentElement!;
+
+      expect(titleBlock).toHaveClass("flex-1", "min-w-0");
+      expect(headerRow).toHaveClass(
+        "flex",
+        "flex-col",
+        "md:flex-row",
+        "md:justify-between",
+        "md:items-start",
+      );
+
+      const actions: HTMLElement = headerRow.children[1] as HTMLElement;
+
+      expect(actions).toHaveClass(
+        "flex",
+        "flex-col",
+        "md:flex-row",
+        "md:items-center",
+        "md:w-fit",
+        "mt-4",
+        "md:mt-0",
+        "md:ml-4",
+        "flex-shrink-0",
+      );
+      expect(actions.children[0]).toHaveClass("mb-2", "md:mb-0", "md:mr-3");
+      expect(actions.children[1]).toHaveClass(
+        "flex",
+        "flex-wrap",
+        "items-center",
+        "gap-1.5",
+      );
+      expect(screen.queryByTestId("card-header-actions")).toBeNull();
+      expect(screen.queryByTestId("card-header")).toBeNull();
+    });
+
+    test("a card with no actions gives the title block the full width", () => {
+      render(<Card title="Only a title" description="And a description" />);
+
+      const titleBlock: HTMLElement = screen.getByTestId(
+        "card-details-heading",
+      ).parentElement!;
+
+      expect(titleBlock).toHaveClass("w-full");
+      expect(titleBlock).not.toHaveClass("flex-1");
+    });
+  });
+
+  describe("stacked", () => {
+    test("gives the title and description the full width", () => {
+      render(<Card {...baseProps} headerLayout="stacked" />);
+
+      const header: HTMLElement = screen.getByTestId("card-header");
+      const titleBlock: HTMLElement = screen.getByTestId(
+        "card-details-heading",
+      ).parentElement!;
+
+      expect(header).toHaveAttribute("data-header-layout", "stacked");
+      expect(titleBlock).toHaveClass("w-full", "min-w-0");
+      expect(titleBlock).not.toHaveClass("flex-1");
+      expect(titleBlock).toContainElement(
+        screen.getByTestId("card-description"),
+      );
+      // Nothing in the header lays the title out side by side any more.
+      expect(header).not.toHaveClass("md:flex-row");
+      expect(header.querySelector(".md\\:flex-row")).toBeNull();
+    });
+
+    test("puts the right element and the buttons on one row under the description", () => {
+      render(<Card {...baseProps} headerLayout="stacked" />);
+
+      const header: HTMLElement = screen.getByTestId("card-header");
+      const actions: HTMLElement = screen.getByTestId("card-header-actions");
+
+      expect(Array.from(header.children)).toEqual([
+        screen.getByTestId("card-details-heading").parentElement,
+        actions,
+      ]);
+      expect(actions).toHaveClass(
+        "mt-3",
+        "flex",
+        "flex-wrap",
+        "items-center",
+        "gap-2",
+      );
+      expect(actions).not.toHaveClass("justify-end");
+      expect(actions).not.toHaveClass("justify-between");
+
+      const description: HTMLElement = screen.getByTestId("card-description");
+
+      expect(
+        description.compareDocumentPosition(actions) &
+          Node.DOCUMENT_POSITION_FOLLOWING,
+      ).toBeTruthy();
+
+      // Right element first, then each button, all direct children of the row.
+      expect(actions.children).toHaveLength(3);
+      expect(actions.children[0]).toHaveTextContent("right element");
+      expect(
+        closest(
+          screen.getByText("Edit"),
+          "[data-testid='card-header-actions'] > div",
+        ),
+      ).toBe(actions.children[1]);
+      expect(
+        closest(
+          screen.getByText("Refresh"),
+          "[data-testid='card-header-actions'] > div",
+        ),
+      ).toBe(actions.children[2]);
+    });
+
+    test("buttons still work and keep their test ids", () => {
+      const onEdit: MockFunction = getJestMockFunction();
+
+      render(
+        <Card
+          title="Details"
+          headerLayout="stacked"
+          buttons={[
+            {
+              title: "Edit",
+              onClick: onEdit,
+              icon: IconProp.Edit,
+            },
+          ]}
+        />,
+      );
+
+      fireEvent.click(screen.getByText("Edit"));
+
+      expect(onEdit).toHaveBeenCalledTimes(1);
+      expect(screen.getAllByTestId("card-button")).toHaveLength(1);
+    });
+
+    test("renders React element buttons as they are", () => {
+      render(
+        <Card
+          title="Details"
+          headerLayout="stacked"
+          buttons={[
+            <a key="docs" href="/docs">
+              Docs
+            </a>,
+          ]}
+        />,
+      );
+
+      expect(
+        within(screen.getByTestId("card-header-actions")).getByRole("link", {
+          name: "Docs",
+        }),
+      ).toHaveAttribute("href", "/docs");
+    });
+
+    test("renders no actions row when there is nothing to put in it", () => {
+      render(
+        <Card
+          title="Details"
+          description="Nothing to do here."
+          headerLayout="stacked"
+          buttons={[]}
+        />,
+      );
+
+      expect(screen.getByTestId("card-header")).toBeInTheDocument();
+      expect(screen.queryByTestId("card-header-actions")).toBeNull();
+    });
+
+    test("a right element alone still gets the row", () => {
+      render(
+        <Card
+          title="Details"
+          headerLayout="stacked"
+          rightElement={<span>just me</span>}
+        />,
+      );
+
+      const actions: HTMLElement = screen.getByTestId("card-header-actions");
+
+      expect(actions.children).toHaveLength(1);
+      expect(actions).toHaveTextContent("just me");
+      expect(screen.queryByTestId("card-button")).toBeNull();
+    });
+
+    test("leaves the body, its default spacing and bodyClassName alone", () => {
+      const { rerender } = render(
+        <Card {...baseProps} headerLayout="stacked" />,
+      );
+
+      expect(screen.getByText("body").parentElement).toHaveClass("mt-4");
+
+      rerender(
+        <Card {...baseProps} headerLayout="stacked" bodyClassName="mt-0" />,
+      );
+
+      expect(screen.getByText("body").parentElement).toHaveClass("mt-0");
+    });
+  });
+});

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

@@ -0,0 +1,253 @@
+import "@testing-library/jest-dom";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import React from "react";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+
+/*
+ * The overview pages' right-hand column is about 300px wide. A detail card
+ * there used to put a long "Edit Scheduled Maintenance Event" button beside
+ * its title, squeezing the title and description into a column one word
+ * wide. The pages now hand CardModelDetail a stacked header and a short
+ * "Edit" label. CardModelDetail passes cardProps straight to Card, so what
+ * is pinned here is that the layout survives that hop and that the short
+ * label changes nothing about how the button is gated.
+ */
+
+let permissionsForTest: Array<unknown> = [];
+
+jest.mock("../../../UI/Utils/Permission", () => {
+  return {
+    __esModule: true,
+    default: {
+      getAllPermissions: (): Array<unknown> => {
+        return permissionsForTest;
+      },
+      getProjectPermissions: (): null => {
+        return null;
+      },
+      getGlobalPermissions: (): null => {
+        return null;
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/User", () => {
+  return {
+    __esModule: true,
+    default: {
+      isMasterAdmin: (): boolean => {
+        return false;
+      },
+      getUserId: (): null => {
+        return null;
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/Translation", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return {
+        translateString: (value: string | undefined): string | undefined => {
+          return value;
+        },
+        translateValue: (value: unknown): unknown => {
+          return value;
+        },
+      };
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      getItem: async (): Promise<null> => {
+        return null;
+      },
+      getList: async (): Promise<{
+        data: Array<unknown>;
+        count: number;
+        skip: number;
+        limit: number;
+      }> => {
+        return { data: [], count: 0, skip: 0, limit: 10 };
+      },
+    },
+  };
+});
+
+import CardModelDetail from "../../../UI/Components/ModelDetail/CardModelDetail";
+import { CardHeaderLayout } from "../../../UI/Components/Card/Card";
+import PermissionGate from "../../../UI/Utils/PermissionGate";
+import Monitor from "../../../Models/DatabaseModels/Monitor";
+import ObjectID from "../../../Types/ObjectID";
+import Permission from "../../../Types/Permission";
+import FieldType from "../../../UI/Components/Types/FieldType";
+
+const MONITOR_ID: ObjectID = new ObjectID(
+  "11111111-1111-4111-8111-111111111111",
+);
+
+interface RenderOptions {
+  headerLayout?: CardHeaderLayout | undefined;
+  editButtonText?: string | undefined;
+}
+
+type RenderCardFunction = (options: RenderOptions) => ReturnType<typeof render>;
+
+const renderCard: RenderCardFunction = (
+  options: RenderOptions,
+): ReturnType<typeof render> => {
+  return render(
+    <CardModelDetail<Monitor>
+      name="Monitor Details"
+      cardProps={{
+        title: "Monitor Details",
+        description: "Key facts about this monitor.",
+        headerLayout: options.headerLayout,
+      }}
+      isEditable={true}
+      editButtonText={options.editButtonText}
+      formFields={[
+        {
+          field: { name: true },
+          title: "Name",
+          fieldType: "Text" as never,
+          required: true,
+        },
+      ]}
+      modelDetailProps={{
+        modelType: Monitor,
+        id: "monitor-detail",
+        modelId: MONITOR_ID,
+        fields: [
+          {
+            field: { name: true },
+            title: "Name",
+            fieldType: FieldType.Text,
+          },
+        ],
+      }}
+    />,
+  );
+};
+
+type FindButtonFunction = (label: string) => HTMLButtonElement | null;
+
+const findButton: FindButtonFunction = (
+  label: string,
+): HTMLButtonElement | null => {
+  return (
+    Array.from(document.querySelectorAll<HTMLButtonElement>("button")).find(
+      (button: HTMLButtonElement) => {
+        return (button.textContent || "").trim() === label;
+      },
+    ) || null
+  );
+};
+
+describe("CardModelDetail header layout", () => {
+  beforeEach(() => {
+    permissionsForTest = [];
+    PermissionGate.clearPermissionPropsCache();
+    window.localStorage.clear();
+  });
+
+  afterEach(() => {
+    cleanup();
+    jest.restoreAllMocks();
+  });
+
+  test("forwards a stacked header to the card, with Edit on its own row", async () => {
+    permissionsForTest = [Permission.ProjectAdmin];
+
+    renderCard({ headerLayout: "stacked", editButtonText: "Edit" });
+
+    await waitFor(() => {
+      expect(findButton("Edit")).not.toBeNull();
+    });
+
+    const header: HTMLElement = screen.getByTestId("card-header");
+    const actions: HTMLElement = screen.getByTestId("card-header-actions");
+
+    expect(header).toHaveAttribute("data-header-layout", "stacked");
+    expect(within(header).getByText("Monitor Details")).toBeInTheDocument();
+    expect(actions).toContainElement(findButton("Edit"));
+    expect(findButton("Edit Monitor")).toBeNull();
+  });
+
+  test("keeps the side-by-side header when the page does not ask", async () => {
+    permissionsForTest = [Permission.ProjectAdmin];
+
+    renderCard({});
+
+    await waitFor(() => {
+      expect(findButton("Edit Monitor")).not.toBeNull();
+    });
+
+    expect(screen.queryByTestId("card-header")).toBeNull();
+    expect(screen.queryByTestId("card-header-actions")).toBeNull();
+  });
+
+  test("the short label is still offered only to someone who may update", async () => {
+    permissionsForTest = [Permission.ProjectAdmin];
+
+    renderCard({ headerLayout: "stacked", editButtonText: "Edit" });
+
+    await waitFor(() => {
+      expect(findButton("Edit")).not.toBeNull();
+    });
+
+    expect(findButton("Edit")).not.toBeDisabled();
+  });
+
+  test("the short label is locked, not removed, and explains itself without permission", async () => {
+    permissionsForTest = [Permission.Viewer];
+
+    renderCard({ headerLayout: "stacked", editButtonText: "Edit" });
+
+    await waitFor(() => {
+      expect(findButton("Edit")).not.toBeNull();
+    });
+
+    expect(findButton("Edit")).toBeDisabled();
+
+    fireEvent.mouseEnter(findButton("Edit")!.parentElement as HTMLElement);
+
+    expect(screen.getByRole("tooltip")).toHaveTextContent(
+      "You do not have permission to update this Monitor.",
+    );
+  });
+
+  test("with no permission snapshot yet there is no button, and no empty row", async () => {
+    permissionsForTest = [];
+
+    renderCard({ headerLayout: "stacked", editButtonText: "Edit" });
+
+    await waitFor(() => {
+      expect(screen.getByText("Monitor Details")).toBeInTheDocument();
+    });
+
+    expect(findButton("Edit")).toBeNull();
+    expect(screen.queryByTestId("card-header-actions")).toBeNull();
+  });
+});