@oneuptime/common 14.0.2 → 14.0.3

package/Tests/UI/Components/ModelTable/BaseModelTableBulkDeleteVerb.test.tsx

@@ -0,0 +1,367 @@
+import "@testing-library/jest-dom";
+import { cleanup, render, waitFor } from "@testing-library/react";
+import React from "react";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+
+/*
+ * The schema BaseModelTable hands the bulk action bar for its default Delete,
+ * with and without `bulkActions.deleteVerb`. The rendered behaviour (menu,
+ * dialog, deleting) is covered end to end in BaseModelTableBulkDelete.test;
+ * this pins the parts that are not visible as text - the icon and the style -
+ * and the exact sentences for both shapes, by capturing what Table receives.
+ * The per-row delete action is captured too, for its icon and for the tooltip
+ * a viewer who cannot delete sees on both.
+ */
+
+let permissionsForTest: Array<unknown> = ["ProjectAdmin"];
+
+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;
+        },
+      };
+    },
+  };
+});
+
+type CapturedBulkActions = {
+  buttons: Array<Record<string, any>>;
+};
+
+let capturedBulkActions: Array<CapturedBulkActions> = [];
+let capturedRowActions: Array<Array<Record<string, any>>> = [];
+
+jest.mock("../../../../UI/Components/Table/Table", () => {
+  return {
+    __esModule: true,
+    default: (props: {
+      bulkActions?: CapturedBulkActions | undefined;
+      actionButtons?: Array<Record<string, any>> | undefined;
+    }): React.ReactElement => {
+      if (props.bulkActions) {
+        capturedBulkActions.push(props.bulkActions);
+      }
+      if (props.actionButtons) {
+        capturedRowActions.push(props.actionButtons);
+      }
+      return <div data-testid="table" />;
+    },
+  };
+});
+
+import BaseModelTable, {
+  BaseTableCallbacks,
+  ComponentProps as BaseModelTableProps,
+  ModalTableBulkDefaultActions,
+} from "../../../../UI/Components/ModelTable/BaseModelTable";
+import TableFilterUrlState from "../../../../UI/Utils/TableFilterUrlState";
+import PermissionGate from "../../../../UI/Utils/PermissionGate";
+import FieldType from "../../../../UI/Components/Types/FieldType";
+import { ButtonStyleType } from "../../../../UI/Components/Button/Button";
+import IncidentAlert from "../../../../Models/DatabaseModels/IncidentAlert";
+import IconProp from "../../../../Types/Icon/IconProp";
+import ListResult from "../../../../Types/BaseDatabase/ListResult";
+import { JSONObject } from "../../../../Types/JSON";
+import Permission from "../../../../Types/Permission";
+
+const WARNING: string = "Only the links are removed.";
+
+type TableOptions = {
+  deleteVerb?: string | undefined;
+  deleteIcon?: IconProp | undefined;
+  deleteConfirmationWarning?: string | undefined;
+  deleteButtonText?: string | undefined;
+};
+
+type MakePropsFunction = (
+  options: TableOptions,
+) => BaseModelTableProps<IncidentAlert>;
+
+const makeProps: MakePropsFunction = (
+  options: TableOptions,
+): BaseModelTableProps<IncidentAlert> => {
+  const callbacks: BaseTableCallbacks<IncidentAlert> = {
+    deleteItem: async (): Promise<void> => {
+      return undefined;
+    },
+    getModelFromJSON: (item: JSONObject): IncidentAlert => {
+      return item as unknown as IncidentAlert;
+    },
+    getJSONFromModel: (item: IncidentAlert): JSONObject => {
+      return item as unknown as JSONObject;
+    },
+    addSlugToSelect: (select: unknown): unknown => {
+      return select;
+    },
+    getList: async (data: {
+      skip: number;
+      limit: number;
+    }): Promise<ListResult<IncidentAlert>> => {
+      return { data: [], count: 0, skip: data.skip, limit: data.limit };
+    },
+    toJSONArray: (): Array<JSONObject> => {
+      return [];
+    },
+    updateById: async (): Promise<void> => {
+      return undefined;
+    },
+    showCreateEditModal: (): React.ReactElement => {
+      return <div />;
+    },
+  } as unknown as BaseTableCallbacks<IncidentAlert>;
+
+  return {
+    modelType: IncidentAlert,
+    id: "links-table",
+    name: "Links",
+    userPreferencesKey: "links-table",
+    urlStateKey: "links-table",
+    singularName: "Alert",
+    pluralName: "Alerts",
+    columns: [
+      { field: { createdAt: true }, title: "At", type: FieldType.Text },
+    ],
+    filters: [],
+    cardProps: { title: "Links", description: "Links" },
+    isCreateable: false,
+    isEditable: false,
+    isDeleteable: true,
+    isViewable: false,
+    deleteButtonText: options.deleteButtonText,
+    callbacks: callbacks,
+    bulkActions: {
+      buttons: [ModalTableBulkDefaultActions.Delete],
+      deleteVerb: options.deleteVerb,
+      deleteIcon: options.deleteIcon,
+      deleteConfirmationWarning: options.deleteConfirmationWarning,
+    },
+  } as unknown as BaseModelTableProps<IncidentAlert>;
+};
+
+type DeleteActionFunction = (
+  options: TableOptions,
+) => Promise<Record<string, any>>;
+
+const deleteAction: DeleteActionFunction = async (
+  options: TableOptions,
+): Promise<Record<string, any>> => {
+  render(<BaseModelTable<IncidentAlert> {...makeProps(options)} />);
+
+  await waitFor(() => {
+    expect(capturedBulkActions.length).toBeGreaterThan(0);
+  });
+
+  const buttons: Array<Record<string, any>> =
+    capturedBulkActions[capturedBulkActions.length - 1]!.buttons;
+
+  // Exactly one delete action, whatever it is called.
+  expect(buttons).toHaveLength(1);
+
+  return buttons[0]!;
+};
+
+type RowDeleteActionFunction = (title: string) => Promise<Record<string, any>>;
+
+/*
+ * The per-row delete action from the table rendered last. Its title is
+ * deleteButtonText, or "Delete".
+ */
+const rowDeleteAction: RowDeleteActionFunction = async (
+  title: string,
+): Promise<Record<string, any>> => {
+  let action: Record<string, any> | undefined = undefined;
+
+  await waitFor(() => {
+    const rowActions: Array<Record<string, any>> =
+      capturedRowActions[capturedRowActions.length - 1] || [];
+
+    action = rowActions.find((rowAction: Record<string, any>): boolean => {
+      return rowAction["title"] === title;
+    });
+
+    expect(action).toBeDefined();
+  });
+
+  return action!;
+};
+
+const TWO: Array<IncidentAlert> = [new IncidentAlert(), new IncidentAlert()];
+const ONE: Array<IncidentAlert> = [new IncidentAlert()];
+
+describe("BaseModelTable bulk delete verb", () => {
+  beforeEach(() => {
+    capturedBulkActions = [];
+    capturedRowActions = [];
+    permissionsForTest = ["ProjectAdmin"];
+    PermissionGate.clearPermissionPropsCache();
+    window.history.replaceState(window.history.state, "", "/dashboard/links");
+    TableFilterUrlState.resetClaimedKeys();
+    window.localStorage.clear();
+  });
+
+  afterEach(() => {
+    cleanup();
+    jest.restoreAllMocks();
+  });
+
+  test("without a verb the default Delete is unchanged", async () => {
+    const action: Record<string, any> = await deleteAction({
+      deleteConfirmationWarning: WARNING,
+    });
+
+    expect(action["title"]).toBe("Delete");
+    expect(action["icon"]).toBe(IconProp.Trash);
+    expect(action["buttonStyleType"]).toBe(ButtonStyleType.DANGER);
+    expect(action["confirmTitle"](TWO)).toBe("Delete 2 Alerts");
+    expect(action["confirmTitle"](ONE)).toBe("Delete 1 Alert");
+    expect(action["confirmMessage"](TWO)).toBe(
+      `Are you sure you want to delete 2 Alerts? This action cannot be undone. ${WARNING}`,
+    );
+  });
+
+  test("a deleteIcon on its own changes nothing", async () => {
+    const action: Record<string, any> = await deleteAction({
+      deleteIcon: IconProp.LinkSlash,
+    });
+
+    expect(action["title"]).toBe("Delete");
+    expect(action["icon"]).toBe(IconProp.Trash);
+  });
+
+  test("with a verb, the title, icon and both sentences use it", async () => {
+    const action: Record<string, any> = await deleteAction({
+      deleteVerb: "Unlink",
+      deleteIcon: IconProp.LinkSlash,
+      deleteConfirmationWarning: WARNING,
+    });
+
+    expect(action["title"]).toBe("Unlink");
+    expect(action["icon"]).toBe(IconProp.LinkSlash);
+    expect(action["confirmTitle"](TWO)).toBe("Unlink 2 Alerts");
+    expect(action["confirmTitle"](ONE)).toBe("Unlink 1 Alert");
+    expect(action["confirmMessage"](TWO)).toBe(
+      `Are you sure you want to unlink 2 alerts? ${WARNING}`,
+    );
+    expect(action["confirmMessage"](ONE)).toBe(
+      `Are you sure you want to unlink 1 alert? ${WARNING}`,
+    );
+  });
+
+  test("with a verb and no icon, keeps the trash can", async () => {
+    const action: Record<string, any> = await deleteAction({
+      deleteVerb: "Remove",
+    });
+
+    expect(action["title"]).toBe("Remove");
+    expect(action["icon"]).toBe(IconProp.Trash);
+    expect(action["confirmMessage"](TWO)).toBe(
+      "Are you sure you want to remove 2 alerts?",
+    );
+  });
+
+  test("with a verb and an icon, the row action wears the same icon", async () => {
+    await deleteAction({
+      deleteVerb: "Unlink",
+      deleteIcon: IconProp.LinkSlash,
+      deleteButtonText: "Unlink",
+    });
+
+    const row: Record<string, any> = await rowDeleteAction("Unlink");
+
+    expect(row["icon"]).toBe(IconProp.LinkSlash);
+  });
+
+  test("without a verb the row action keeps the trash can", async () => {
+    await deleteAction({ deleteIcon: IconProp.LinkSlash });
+
+    const row: Record<string, any> = await rowDeleteAction("Delete");
+
+    expect(row["icon"]).toBe(IconProp.Trash);
+  });
+
+  /*
+   * A viewer who can read the links but not remove them sees both Unlinks
+   * locked. The tooltip must not say the locked button deletes the Alert -
+   * that is the confusion the verb exists to remove.
+   */
+  test("a viewer's locked Unlink says unlink, not delete this Alert", async () => {
+    permissionsForTest = [Permission.Viewer];
+
+    const bulk: Record<string, any> = await deleteAction({
+      deleteVerb: "Unlink",
+      deleteIcon: IconProp.LinkSlash,
+      deleteButtonText: "Unlink",
+    });
+    const row: Record<string, any> = await rowDeleteAction("Unlink");
+
+    for (const action of [bulk, row]) {
+      expect(action["disabled"]).toBe(true);
+      expect(action["tooltip"]).toContain(
+        "You do not have permission to unlink this Alert.",
+      );
+      expect(action["tooltip"]).toContain("Delete Incident Alert");
+      expect(action["tooltip"]).not.toContain("delete this Alert");
+    }
+  });
+
+  test("a viewer's locked Delete without a verb still says delete", async () => {
+    permissionsForTest = [Permission.Viewer];
+
+    const bulk: Record<string, any> = await deleteAction({
+      deleteButtonText: "Remove",
+    });
+    const row: Record<string, any> = await rowDeleteAction("Remove");
+
+    for (const action of [bulk, row]) {
+      expect(action["disabled"]).toBe(true);
+      expect(action["tooltip"]).toContain(
+        "You do not have permission to delete this Alert.",
+      );
+    }
+  });
+});

package/Tests/UI/Components/ModelTable/BaseModelTableCreateButtonTitle.test.tsx

@@ -0,0 +1,275 @@
+import "@testing-library/jest-dom";
+import { cleanup, fireEvent, render, waitFor } from "@testing-library/react";
+import React from "react";
+import getJestMockFunction, { MockFunction } from "../../../MockType";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+
+/*
+ * The header's create button reads "<createVerb> <singularName>". It used to
+ * be translated one word at a time, so a table with createVerb "Link" read
+ * "Link" out of context - most locales translated it as the noun ("a link"),
+ * and a verb-noun phrase does not keep English word order in many languages
+ * either. The whole phrase is now looked up first and the word-by-word join
+ * is only the fallback. Translation is mocked with a dictionary per test.
+ */
+
+let dictionary: Record<string, string> = {};
+let lookedUp: Array<string> = [];
+
+jest.mock("../../../../UI/Utils/Permission", () => {
+  return {
+    __esModule: true,
+    default: {
+      getAllPermissions: (): Array<unknown> => {
+        return ["ProjectAdmin"];
+      },
+      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", () => {
+  const translate: (value: string | undefined) => string | undefined = (
+    value: string | undefined,
+  ): string | undefined => {
+    if (typeof value !== "string" || value.length === 0) {
+      return value;
+    }
+
+    lookedUp.push(value);
+
+    return dictionary[value] ?? value;
+  };
+
+  return {
+    __esModule: true,
+    default: () => {
+      return {
+        translateString: translate,
+        translateValue: (value: unknown): unknown => {
+          return typeof value === "string" ? translate(value) : value;
+        },
+      };
+    },
+  };
+});
+
+import BaseModelTable, {
+  BaseTableCallbacks,
+  ComponentProps as BaseModelTableProps,
+} from "../../../../UI/Components/ModelTable/BaseModelTable";
+import TableFilterUrlState from "../../../../UI/Utils/TableFilterUrlState";
+import PermissionGate from "../../../../UI/Utils/PermissionGate";
+import FieldType from "../../../../UI/Components/Types/FieldType";
+import Monitor from "../../../../Models/DatabaseModels/Monitor";
+import ListResult from "../../../../Types/BaseDatabase/ListResult";
+import { JSONObject } from "../../../../Types/JSON";
+
+type TableOptions = {
+  createVerb?: string | undefined;
+  singularName?: string | undefined;
+  onCreateClick?: (() => void) | undefined;
+};
+
+describe("BaseModelTable header create button title", () => {
+  type MakePropsFunction = (
+    options: TableOptions,
+  ) => BaseModelTableProps<Monitor>;
+
+  const makeProps: MakePropsFunction = (
+    options: TableOptions,
+  ): BaseModelTableProps<Monitor> => {
+    const callbacks: BaseTableCallbacks<Monitor> = {
+      deleteItem: async (): Promise<void> => {
+        return undefined;
+      },
+      getModelFromJSON: (item: JSONObject): Monitor => {
+        return item as unknown as Monitor;
+      },
+      getJSONFromModel: (item: Monitor): JSONObject => {
+        return item as unknown as JSONObject;
+      },
+      addSlugToSelect: (select: unknown): unknown => {
+        return select;
+      },
+      getList: async (data: {
+        skip: number;
+        limit: number;
+      }): Promise<ListResult<Monitor>> => {
+        return { data: [], count: 0, skip: data.skip, limit: data.limit };
+      },
+      toJSONArray: (): Array<JSONObject> => {
+        return [];
+      },
+      updateById: async (): Promise<void> => {
+        return undefined;
+      },
+      showCreateEditModal: (): React.ReactElement => {
+        return <div data-testid="create-edit-modal" />;
+      },
+    } as unknown as BaseTableCallbacks<Monitor>;
+
+    return {
+      modelType: Monitor,
+      id: "create-title-table",
+      name: "Create Title",
+      userPreferencesKey: "create-title-table",
+      urlStateKey: "create-title-table",
+      columns: [{ field: { name: true }, title: "Name", type: FieldType.Text }],
+      filters: [],
+      cardProps: { title: "Things", description: "All things" },
+      isCreateable: true,
+      isEditable: false,
+      isDeleteable: false,
+      isViewable: false,
+      callbacks: callbacks,
+      ...(options.createVerb ? { createVerb: options.createVerb } : {}),
+      ...(options.singularName ? { singularName: options.singularName } : {}),
+      ...(options.onCreateClick
+        ? { onCreateClick: options.onCreateClick }
+        : {}),
+    } as unknown as BaseModelTableProps<Monitor>;
+  };
+
+  type CardButtonTextsFunction = () => Array<string>;
+
+  const cardButtonTexts: CardButtonTextsFunction = (): Array<string> => {
+    return Array.from(
+      document.querySelectorAll<HTMLElement>('[data-testid="card-button"]'),
+    ).map((button: HTMLElement): string => {
+      return (button.textContent || "").trim();
+    });
+  };
+
+  type RenderedTitleFunction = (options: TableOptions) => Promise<string>;
+
+  /* The header's first card button is the create button. */
+  const renderedTitle: RenderedTitleFunction = async (
+    options: TableOptions,
+  ): Promise<string> => {
+    render(<BaseModelTable<Monitor> {...makeProps(options)} />);
+
+    await waitFor(() => {
+      expect(cardButtonTexts().length).toBeGreaterThan(0);
+    });
+
+    return cardButtonTexts()[0]!;
+  };
+
+  beforeEach(() => {
+    dictionary = {};
+    lookedUp = [];
+    PermissionGate.clearPermissionPropsCache();
+    window.history.replaceState(window.history.state, "", "/dashboard/things");
+    TableFilterUrlState.resetClaimedKeys();
+    window.localStorage.clear();
+  });
+
+  afterEach(() => {
+    cleanup();
+    jest.restoreAllMocks();
+  });
+
+  test("uses the whole phrase's translation when there is one", async () => {
+    dictionary = {
+      "Link Alert": "Alarm verknüpfen",
+      Link: "Verknüpfung",
+      Alert: "Alarm",
+    };
+
+    expect(
+      await renderedTitle({ createVerb: "Link", singularName: "Alert" }),
+    ).toBe("Alarm verknüpfen");
+    expect(lookedUp).toContain("Link Alert");
+  });
+
+  test("falls back to word by word when the phrase has no translation", async () => {
+    dictionary = {
+      Invite: "Einladen",
+      Member: "Mitglied",
+    };
+
+    expect(
+      await renderedTitle({ createVerb: "Invite", singularName: "Member" }),
+    ).toBe("Einladen Mitglied");
+  });
+
+  test("reads the same in English, where the phrase maps to itself", async () => {
+    dictionary = {
+      "Link Alert": "Link Alert",
+      Link: "Link",
+      Alert: "Alert",
+    };
+
+    expect(
+      await renderedTitle({ createVerb: "Link", singularName: "Alert" }),
+    ).toBe("Link Alert");
+  });
+
+  test("is unchanged with no translations at all", async () => {
+    expect(
+      await renderedTitle({ createVerb: "Link", singularName: "Alert" }),
+    ).toBe("Link Alert");
+  });
+
+  test("defaults the verb to Create and the noun to the model's name", async () => {
+    dictionary = {
+      "Create Monitor": "Monitor erstellen",
+    };
+
+    expect(await renderedTitle({})).toBe("Monitor erstellen");
+  });
+
+  test("defaults still translate word by word without a phrase entry", async () => {
+    dictionary = {
+      Create: "Erstellen",
+    };
+
+    expect(await renderedTitle({})).toBe("Erstellen Monitor");
+  });
+
+  test("still opens the page's own create flow", async () => {
+    const onCreateClick: MockFunction = getJestMockFunction();
+    dictionary = {
+      "Link Alert": "Alarm verknüpfen",
+    };
+
+    await renderedTitle({
+      createVerb: "Link",
+      singularName: "Alert",
+      onCreateClick: onCreateClick as unknown as () => void,
+    });
+
+    fireEvent.click(
+      document.querySelector<HTMLElement>('[data-testid="card-button"]')!,
+    );
+
+    expect(onCreateClick).toHaveBeenCalledTimes(1);
+  });
+});