@oneuptime/common 12.0.1 → 12.0.2

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

@@ -0,0 +1,375 @@
+import "@testing-library/jest-dom";
+import { render, screen, waitFor } from "@testing-library/react";
+import React, { ReactElement } from "react";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+
+/*
+ * The end-to-end shape of the fix, through the real table rather than around
+ * it: memberships in, one row per person out.
+ *
+ * The unit suites prove ProjectUsersModelAPI groups and pages correctly, and
+ * the page suite proves the page hands the table that API. Neither proves the
+ * two compose - that BaseModelTable renders what the override returns as rows,
+ * pages over people, and keeps the injected per-row fields intact all the way
+ * to the cell renderers. That composition is where the duplicate rows would
+ * come back, so it is asserted here on the rendered DOM.
+ */
+
+jest.mock("../../../../UI/Utils/Permission", () => {
+  return {
+    __esModule: true,
+    default: {
+      getAllPermissions: () => {
+        return [];
+      },
+      getProjectPermissions: () => {
+        return [];
+      },
+      getGlobalPermissions: () => {
+        return [];
+      },
+    },
+  };
+});
+
+jest.mock("../../../../UI/Utils/User", () => {
+  return {
+    __esModule: true,
+    default: {
+      isMasterAdmin: () => {
+        return true;
+      },
+      getUserId: () => {
+        return null;
+      },
+    },
+  };
+});
+
+jest.mock("../../../../UI/Utils/Translation", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return {
+        translateString: (value: string | undefined) => {
+          return value;
+        },
+        translateValue: (value: unknown) => {
+          return value;
+        },
+      };
+    },
+  };
+});
+
+import ModelTable from "../../../../UI/Components/ModelTable/ModelTable";
+import ModelAPI from "../../../../UI/Utils/ModelAPI/ModelAPI";
+import ProjectUsersModelAPI from "../../../../UI/Utils/ModelAPI/ProjectUsersModelAPI";
+import { ProjectUserRow } from "../../../../UI/Utils/TeamMembersByUser";
+import FieldType from "../../../../UI/Components/Types/FieldType";
+import Team from "../../../../Models/DatabaseModels/Team";
+import TeamMember from "../../../../Models/DatabaseModels/TeamMember";
+import User from "../../../../Models/DatabaseModels/User";
+import Query from "../../../../Types/BaseDatabase/Query";
+import Name from "../../../../Types/Name";
+import ObjectID from "../../../../Types/ObjectID";
+
+const PROJECT_ID: ObjectID = new ObjectID(
+  "00000000-0000-4000-8000-000000000001",
+);
+
+type MembershipSpec = {
+  id: string;
+  userId: string;
+  userName: string;
+  teamId: string;
+  teamName: string;
+};
+
+const buildMembership: (spec: MembershipSpec) => TeamMember = (
+  spec: MembershipSpec,
+): TeamMember => {
+  const teamMember: TeamMember = new TeamMember();
+
+  teamMember._id = spec.id;
+  teamMember.userId = new ObjectID(spec.userId);
+  teamMember.projectId = PROJECT_ID;
+  teamMember.hasAcceptedInvitation = true;
+
+  const user: User = new User();
+  user._id = spec.userId;
+  user.name = new Name(spec.userName);
+  teamMember.user = user;
+
+  teamMember.teamId = new ObjectID(spec.teamId);
+
+  const team: Team = new Team();
+  team._id = spec.teamId;
+  team.name = spec.teamName;
+  teamMember.team = team;
+
+  return teamMember;
+};
+
+/*
+ * The list from the bug report: Thomas Stock and Jason Apel each on two teams,
+ * so six membership rows for four people.
+ */
+const REPORTED_MEMBERSHIPS: Array<MembershipSpec> = [
+  {
+    id: "m1",
+    userId: "thomas",
+    userName: "Thomas Stock",
+    teamId: "online",
+    teamName: "NTW_Online Operations",
+  },
+  {
+    id: "m2",
+    userId: "thomas",
+    userName: "Thomas Stock",
+    teamId: "owners",
+    teamName: "Owners",
+  },
+  {
+    id: "m3",
+    userId: "jason",
+    userName: "Jason Apel",
+    teamId: "owners",
+    teamName: "Owners",
+  },
+  {
+    id: "m4",
+    userId: "colton",
+    userName: "Colton Hawkins",
+    teamId: "online",
+    teamName: "NTW_Online Operations",
+  },
+  {
+    id: "m5",
+    userId: "karsten",
+    userName: "Karsten Huster",
+    teamId: "it",
+    teamName: "NTW_IT Operations",
+  },
+  {
+    id: "m6",
+    userId: "jason",
+    userName: "Jason Apel",
+    teamId: "online",
+    teamName: "NTW_Online Operations",
+  },
+];
+
+type GetListCall = { limit: number; skip: number };
+
+let getListCalls: Array<GetListCall> = [];
+
+type RenderTableFunction = (memberships: Array<MembershipSpec>) => void;
+
+const renderTable: RenderTableFunction = (
+  memberships: Array<MembershipSpec>,
+): void => {
+  jest
+    .spyOn(ModelAPI, "getList")
+    .mockImplementation(async (data: unknown): Promise<never> => {
+      const call: GetListCall = data as GetListCall;
+      getListCalls.push({ limit: call.limit, skip: call.skip });
+
+      return {
+        data: memberships.map(buildMembership),
+        count: memberships.length,
+        skip: 0,
+        limit: memberships.length,
+      } as unknown as never;
+    });
+
+  render(
+    <ModelTable<TeamMember>
+      modelType={TeamMember}
+      modelAPI={ProjectUsersModelAPI}
+      id="users-table"
+      userPreferencesKey="users-table-test"
+      name="Settings > Users"
+      singularName="User"
+      pluralName="Users"
+      isDeleteable={false}
+      isEditable={false}
+      isCreateable={false}
+      isViewable={false}
+      query={{ projectId: PROJECT_ID } as Query<TeamMember>}
+      cardProps={{ title: "Users", description: "Everyone in this project." }}
+      filters={[]}
+      columns={[
+        {
+          field: { user: { name: true } },
+          title: "User",
+          type: FieldType.Element,
+          getElement: (item: TeamMember): ReactElement => {
+            return <span>{item.user?.name?.toString() || ""}</span>;
+          },
+        },
+        {
+          field: { team: { name: true, _id: true } },
+          title: "Teams",
+          type: FieldType.Element,
+          getElement: (item: TeamMember): ReactElement => {
+            return (
+              <span>
+                {((item as ProjectUserRow).teamsForUser || [])
+                  .map((team: Team) => {
+                    return team.name?.toString() || "";
+                  })
+                  .join(", ")}
+              </span>
+            );
+          },
+        },
+      ]}
+    />,
+  );
+};
+
+type RowTextsFunction = () => Array<string>;
+
+const rowTexts: RowTextsFunction = (): Array<string> => {
+  return screen.getAllByRole("row").map((row: HTMLElement) => {
+    return row.textContent || "";
+  });
+};
+
+describe("ModelTable driven by ProjectUsersModelAPI", () => {
+  beforeEach(() => {
+    getListCalls = [];
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  /*
+   * The regression that started all this. If this fails, Thomas Stock is on
+   * screen twice again.
+   */
+  test("renders one row per person, not one per membership", async () => {
+    renderTable(REPORTED_MEMBERSHIPS);
+
+    await waitFor(() => {
+      expect(screen.getByText("Thomas Stock")).toBeInTheDocument();
+    });
+
+    expect(screen.getAllByText("Thomas Stock")).toHaveLength(1);
+    expect(screen.getAllByText("Jason Apel")).toHaveLength(1);
+    expect(screen.getAllByText("Colton Hawkins")).toHaveLength(1);
+    expect(screen.getAllByText("Karsten Huster")).toHaveLength(1);
+  });
+
+  test("six memberships become four body rows", async () => {
+    renderTable(REPORTED_MEMBERSHIPS);
+
+    await waitFor(() => {
+      expect(screen.getByText("Thomas Stock")).toBeInTheDocument();
+    });
+
+    // The header row plus one row per person - not one per membership.
+    expect(rowTexts()).toHaveLength(5);
+  });
+
+  test("each person's row carries every team they belong to", async () => {
+    renderTable(REPORTED_MEMBERSHIPS);
+
+    await waitFor(() => {
+      expect(screen.getByText("Thomas Stock")).toBeInTheDocument();
+    });
+
+    const thomasRow: string =
+      rowTexts().find((text: string) => {
+        return text.includes("Thomas Stock");
+      }) || "";
+
+    expect(thomasRow).toContain("NTW_Online Operations");
+    expect(thomasRow).toContain("Owners");
+
+    const coltonRow: string =
+      rowTexts().find((text: string) => {
+        return text.includes("Colton Hawkins");
+      }) || "";
+
+    expect(coltonRow).toContain("NTW_Online Operations");
+    expect(coltonRow).not.toContain("Owners");
+  });
+
+  test("the rows are sorted by name, so paging is stable", async () => {
+    renderTable(REPORTED_MEMBERSHIPS);
+
+    await waitFor(() => {
+      expect(screen.getByText("Thomas Stock")).toBeInTheDocument();
+    });
+
+    const names: Array<string> = [
+      "Colton Hawkins",
+      "Jason Apel",
+      "Karsten Huster",
+      "Thomas Stock",
+    ];
+
+    const rendered: Array<string> = rowTexts()
+      .map((text: string) => {
+        return (
+          names.find((name: string) => {
+            return text.includes(name);
+          }) || ""
+        );
+      })
+      .filter(Boolean);
+
+    expect(rendered).toEqual(names);
+  });
+
+  test("the table reads the membership list itself rather than asking for a page of it", async () => {
+    renderTable(REPORTED_MEMBERSHIPS);
+
+    await waitFor(() => {
+      expect(screen.getByText("Thomas Stock")).toBeInTheDocument();
+    });
+
+    /*
+     * The table's own page size never reaches the server: the override has to
+     * see every membership before it can know which people are on page 1.
+     */
+    expect(getListCalls[0]!.skip).toBe(0);
+    expect(getListCalls[0]!.limit).toBeGreaterThan(REPORTED_MEMBERSHIPS.length);
+  });
+
+  test("a project where nobody is on two teams renders unchanged", async () => {
+    renderTable([
+      {
+        id: "m1",
+        userId: "a",
+        userName: "Aaron Falzon",
+        teamId: "t1",
+        teamName: "Ops",
+      },
+      {
+        id: "m2",
+        userId: "b",
+        userName: "Zoe Baker",
+        teamId: "t1",
+        teamName: "Ops",
+      },
+    ]);
+
+    await waitFor(() => {
+      expect(screen.getByText("Aaron Falzon")).toBeInTheDocument();
+    });
+
+    expect(screen.getAllByText("Aaron Falzon")).toHaveLength(1);
+    expect(screen.getAllByText("Zoe Baker")).toHaveLength(1);
+  });
+});

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

@@ -0,0 +1,196 @@
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import "@testing-library/jest-dom";
+import { cleanup, render, waitFor } from "@testing-library/react";
+import * as React from "react";
+import getJestMockFunction, { MockFunction } from "../../../MockType";
+
+/*
+ * `isLoading` used to start `false` and flip true inside the effect, which was
+ * fine while custom field definitions only ever added optional table columns:
+ * a column that appears late is just a column that appears late.
+ *
+ * The facet bar cannot read it that way. It restores its chips from the URL on
+ * the very first render, and a chip whose definition has not arrived yet is
+ * indistinguishable from a chip the user cleared — the difference being that
+ * the second means "erase the shared link's filter". So the first render has
+ * to be able to say "a request is coming", and these tests pin that.
+ */
+
+const getListMock: MockFunction = getJestMockFunction();
+
+/*
+ * The arrow wrappers are load bearing: jest.mock is hoisted above the compiled
+ * requires, so naming the mock directly would capture it before its
+ * initializer has run.
+ */
+jest.mock("../../../../UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      getList: (...args: Array<any>) => {
+        return getListMock(...args);
+      },
+    },
+  };
+});
+
+const getCurrentProjectIdMock: MockFunction = getJestMockFunction();
+
+jest.mock("../../../../UI/Utils/Project", () => {
+  return {
+    __esModule: true,
+    default: {
+      getCurrentProjectId: (...args: Array<any>) => {
+        return getCurrentProjectIdMock(...args);
+      },
+    },
+  };
+});
+
+import useCustomFieldColumns, {
+  CustomFieldColumnsResult,
+} from "../../../../UI/Components/ModelTable/useCustomFieldColumns";
+import { CustomFieldDefinition } from "../../../../UI/Components/ModelTable/CustomFieldColumns";
+import BaseModel from "../../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import IncidentCustomField from "../../../../Models/DatabaseModels/IncidentCustomField";
+import CustomFieldType from "../../../../Types/CustomField/CustomFieldType";
+import ObjectID from "../../../../Types/ObjectID";
+
+const PROJECT_ID: string = "11111111-1111-4111-8111-111111111111";
+
+interface Snapshot {
+  isLoading: boolean;
+  definitionNames: Array<string>;
+  columnIds: Array<string>;
+}
+
+type HarnessPropsType = {
+  customFieldsModelType?: { new (): BaseModel } | undefined;
+  onRender: (snapshot: Snapshot) => void;
+};
+
+const Harness: React.FunctionComponent<HarnessPropsType> = (
+  props: HarnessPropsType,
+): React.ReactElement => {
+  const result: CustomFieldColumnsResult<BaseModel> =
+    useCustomFieldColumns<BaseModel>({
+      customFieldsModelType: props.customFieldsModelType,
+    });
+
+  props.onRender({
+    isLoading: result.isLoading,
+    definitionNames: result.definitions.map((d: CustomFieldDefinition) => {
+      return d.name;
+    }),
+    columnIds: result.columns.map((column: { id?: string | undefined }) => {
+      return column.id || "";
+    }),
+  });
+
+  return <div />;
+};
+
+type RenderHarnessFunction = (
+  customFieldsModelType?: { new (): BaseModel } | undefined,
+) => Array<Snapshot>;
+
+const renderHarness: RenderHarnessFunction = (
+  customFieldsModelType?: { new (): BaseModel } | undefined,
+): Array<Snapshot> => {
+  const snapshots: Array<Snapshot> = [];
+
+  render(
+    <Harness
+      customFieldsModelType={customFieldsModelType}
+      onRender={(snapshot: Snapshot) => {
+        snapshots.push(snapshot);
+      }}
+    />,
+  );
+
+  return snapshots;
+};
+
+afterEach(() => {
+  cleanup();
+  getListMock.mockReset();
+  getCurrentProjectIdMock.mockReset();
+});
+
+describe("useCustomFieldColumns — isLoading on the first render", () => {
+  test("is true before the request has even been sent", () => {
+    getCurrentProjectIdMock.mockReturnValue(new ObjectID(PROJECT_ID));
+    getListMock.mockReturnValue(new Promise(() => {}));
+
+    const snapshots: Array<Snapshot> = renderHarness(IncidentCustomField);
+
+    expect(snapshots[0]!.isLoading).toBe(true);
+  });
+
+  test("is false when there is no definition model to load", () => {
+    /*
+     * Every table without custom fields renders this hook too. Reporting
+     * "loading" there would make the facet bar hold its URL snapshot hostage
+     * on pages that will never have a chip to wait for.
+     */
+    getCurrentProjectIdMock.mockReturnValue(new ObjectID(PROJECT_ID));
+
+    expect(renderHarness(undefined)[0]!.isLoading).toBe(false);
+    expect(getListMock).not.toHaveBeenCalled();
+  });
+
+  test("is false when there is no current project", () => {
+    getCurrentProjectIdMock.mockReturnValue(null);
+
+    expect(renderHarness(IncidentCustomField)[0]!.isLoading).toBe(false);
+    expect(getListMock).not.toHaveBeenCalled();
+  });
+});
+
+describe("useCustomFieldColumns — settling", () => {
+  test("goes false once the definitions land, and reports them sorted", () => {
+    getCurrentProjectIdMock.mockReturnValue(new ObjectID(PROJECT_ID));
+    getListMock.mockReturnValue(
+      Promise.resolve({
+        data: [
+          { name: "Team", customFieldType: CustomFieldType.Text },
+          { name: "Impacted Users", customFieldType: CustomFieldType.Number },
+        ],
+      }),
+    );
+
+    const snapshots: Array<Snapshot> = renderHarness(IncidentCustomField);
+
+    return waitFor(() => {
+      const last: Snapshot = snapshots[snapshots.length - 1]!;
+
+      expect(last.isLoading).toBe(false);
+      // Sorted, so a viewer's column layout does not shuffle between loads.
+      expect(last.definitionNames).toEqual(["Impacted Users", "Team"]);
+      expect(last.columnIds).toEqual([
+        "customFields.Impacted Users",
+        "customFields.Team",
+      ]);
+    });
+  });
+
+  test("goes false and yields nothing when the request fails", () => {
+    /*
+     * Custom fields are a paid feature the viewer may not be able to read, so
+     * a failure here is expected in normal operation. It must settle rather
+     * than leave every caller waiting forever.
+     */
+    getCurrentProjectIdMock.mockReturnValue(new ObjectID(PROJECT_ID));
+    getListMock.mockReturnValue(Promise.reject(new Error("no permission")));
+
+    const snapshots: Array<Snapshot> = renderHarness(IncidentCustomField);
+
+    return waitFor(() => {
+      const last: Snapshot = snapshots[snapshots.length - 1]!;
+
+      expect(last.isLoading).toBe(false);
+      expect(last.definitionNames).toEqual([]);
+      expect(last.columnIds).toEqual([]);
+    });
+  });
+});