@oneuptime/common 12.0.31 → 12.0.32

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

@@ -8,7 +8,7 @@ import {
   screen,
   waitFor,
 } from "@testing-library/react";
-import React from "react";
+import React, { ReactElement } from "react";
 
 /*
  * A real BaseModelTable mounts a card, a header, a full table and (in the
@@ -86,22 +86,31 @@ import BaseModelTable, {
   ComponentProps as BaseModelTableProps,
 } from "../../../../UI/Components/ModelTable/BaseModelTable";
 import Columns from "../../../../UI/Components/ModelTable/Columns";
+import TableColumnsToCsv from "../../../../UI/Utils/TableColumnsToCsv";
 import TableFilterUrlState from "../../../../UI/Utils/TableFilterUrlState";
 import Filter from "../../../../UI/Components/ModelFilter/Filter";
 import FieldType from "../../../../UI/Components/Types/FieldType";
+import { ButtonStyleType } from "../../../../UI/Components/Button/Button";
 import Monitor from "../../../../Models/DatabaseModels/Monitor";
 import Query from "../../../../Types/BaseDatabase/Query";
 import ListResult from "../../../../Types/BaseDatabase/ListResult";
+import SortOrder from "../../../../Types/BaseDatabase/SortOrder";
 import UserPreferences, {
   UserPreferenceType,
 } from "../../../../Utils/UserPreferences";
-import { JSONObject } from "../../../../Types/JSON";
+import { JSONObject, JSONValue } from "../../../../Types/JSON";
 
 const PREFS_KEY: string = "monitors-columns-table";
 
 type GetListCall = {
   query: Query<Monitor>;
   select: JSONObject;
+  sort: JSONObject;
+};
+
+type DownloadedCsvFile = {
+  csv: string;
+  filename: string;
 };
 
 const FILTERS: Array<Filter<Monitor>> = [
@@ -111,6 +120,14 @@ const FILTERS: Array<Filter<Monitor>> = [
 type MakeColumnsOptions = {
   // Adds a `isHiddenByDefault` column ("Monitor Type") at the end.
   withHiddenByDefault?: boolean | undefined;
+  /*
+   * Adds a `isHiddenByDefault` *entity* column ("Template") at the end, shaped
+   * like the one on the real Monitors table: several nested fields, and a cell
+   * rendered from the relation rather than from a scalar on the row. A scalar
+   * column cannot stand in for it - the nested part of the request is built by
+   * a different function, and the cell it feeds is the one that goes blank.
+   */
+  withHiddenByDefaultEntity?: boolean | undefined;
   // Marks "Name" `isNotCustomizable`, i.e. pinned and kept out of the picker.
   pinName?: boolean | undefined;
 };
@@ -158,9 +175,80 @@ const makeColumns: MakeColumnsFunction = (
     });
   }
 
+  if (options.withHiddenByDefaultEntity) {
+    columns.push({
+      field: { monitorTemplate: { _id: true, templateName: true } },
+      title: "Template",
+      type: FieldType.Entity,
+      isHiddenByDefault: true,
+      getElement: (item: Monitor): ReactElement => {
+        return <span>{item.monitorTemplate?.templateName || ""}</span>;
+      },
+    });
+  }
+
   return columns as unknown as Columns<Monitor>;
 };
 
+const TEMPLATE_NAME: string = "Standard HTTP Template";
+
+/*
+ * One fully populated row. The relation is nested exactly as the API returns
+ * it, because the point of these tests is what survives the round trip from
+ * the request's `select` into the rendered cell.
+ */
+const ROWS: Array<JSONObject> = [
+  {
+    _id: "monitor-1",
+    name: "api-gateway",
+    description: "The public API gateway",
+    monitorTemplate: {
+      _id: "template-1",
+      templateName: TEMPLATE_NAME,
+    },
+  },
+];
+
+type ProjectRowFunction = (row: JSONObject, select: JSONObject) => JSONObject;
+
+/*
+ * The API hands back exactly the fields the request asked for and nothing
+ * else, so the fake has to as well. A fake that returned the whole row
+ * whatever the select said would keep rendering a value for a field the table
+ * had stopped asking for - which is precisely the regression these tests are
+ * here to catch.
+ */
+const projectRow: ProjectRowFunction = (
+  row: JSONObject,
+  select: JSONObject,
+): JSONObject => {
+  const projected: JSONObject = {};
+
+  for (const key of Object.keys(select)) {
+    const value: JSONValue | undefined = row[key];
+    const selected: JSONValue | undefined = select[key];
+
+    if (value === undefined) {
+      continue;
+    }
+
+    // A nested select projects the relation, not just the presence of it.
+    if (
+      selected !== null &&
+      typeof selected === "object" &&
+      value !== null &&
+      typeof value === "object"
+    ) {
+      projected[key] = projectRow(value as JSONObject, selected as JSONObject);
+      continue;
+    }
+
+    projected[key] = value;
+  }
+
+  return projected;
+};
+
 const ALL_TITLES: Array<string> = [
   "Name",
   "Description",
@@ -230,52 +318,79 @@ const getPickerRowIds: GetPickerRowIdsFunction = (): Array<string> => {
 
 describe("BaseModelTable column customization", () => {
   let calls: Array<GetListCall> = [];
-
-  type MakeCallbacksFunction = () => BaseTableCallbacks<Monitor>;
-
-  const makeCallbacks: MakeCallbacksFunction =
-    (): BaseTableCallbacks<Monitor> => {
-      return {
-        deleteItem: async () => {
-          return undefined;
-        },
-        getModelFromJSON: (item: JSONObject) => {
-          return item as unknown as Monitor;
-        },
-        getJSONFromModel: (item: Monitor) => {
-          return item as unknown as JSONObject;
-        },
-        addSlugToSelect: (select: unknown) => {
-          return select;
-        },
-        getList: async (data: {
-          query: Query<Monitor>;
-          limit: number;
-          select: JSONObject;
-        }): Promise<ListResult<Monitor>> => {
-          calls.push({
-            query: data.query,
-            select: (data.select || {}) as unknown as JSONObject,
-          });
-          return { data: [], count: 0, skip: 0, limit: data.limit };
-        },
-        toJSONArray: () => {
-          return [];
-        },
-        updateById: async () => {
-          return undefined;
-        },
-        showCreateEditModal: () => {
-          return <></>;
-        },
-      } as unknown as BaseTableCallbacks<Monitor>;
-    };
+  let downloadedCsvFiles: Array<DownloadedCsvFile> = [];
+
+  type MakeCallbacksFunction = (
+    rows: Array<JSONObject>,
+  ) => BaseTableCallbacks<Monitor>;
+
+  const makeCallbacks: MakeCallbacksFunction = (
+    rows: Array<JSONObject>,
+  ): BaseTableCallbacks<Monitor> => {
+    return {
+      deleteItem: async () => {
+        return undefined;
+      },
+      getModelFromJSON: (item: JSONObject) => {
+        return item as unknown as Monitor;
+      },
+      getJSONFromModel: (item: Monitor) => {
+        return item as unknown as JSONObject;
+      },
+      addSlugToSelect: (select: unknown) => {
+        return select;
+      },
+      getList: async (data: {
+        query: Query<Monitor>;
+        limit: number;
+        select: JSONObject;
+        sort: JSONObject;
+      }): Promise<ListResult<Monitor>> => {
+        const select: JSONObject = (data.select || {}) as unknown as JSONObject;
+
+        calls.push({
+          query: data.query,
+          select: select,
+          sort: (data.sort || {}) as unknown as JSONObject,
+        });
+
+        return {
+          data: rows.map((row: JSONObject) => {
+            return projectRow(row, select);
+          }) as unknown as Array<Monitor>,
+          count: rows.length,
+          skip: 0,
+          limit: data.limit,
+        };
+      },
+      toJSONArray: () => {
+        return [];
+      },
+      updateById: async () => {
+        return undefined;
+      },
+      showCreateEditModal: () => {
+        return <></>;
+      },
+    } as unknown as BaseTableCallbacks<Monitor>;
+  };
 
   type RenderTableOptions = {
     userPreferencesKey?: string | undefined;
     columns?: Columns<Monitor> | undefined;
     isDeleteable?: boolean | undefined;
     disableColumnCustomization?: boolean | undefined;
+    /*
+     * The rows the fake API has. Defaults to none, as most of this suite only
+     * looks at headers.
+     */
+    rows?: Array<JSONObject> | undefined;
+    /*
+     * Gives the table a bulk action. Table grows its row checkboxes - and
+     * offers "Export CSV" - only when this array is non-empty, so it is the
+     * only way to reach the export from here.
+     */
+    withBulkActions?: boolean | undefined;
   };
 
   type RenderTableFunction = (
@@ -303,10 +418,25 @@ describe("BaseModelTable column customization", () => {
       isEditable: false,
       // This suite is about columns; keep the URL out of it entirely.
       disableUrlState: true,
-      callbacks: makeCallbacks(),
+      callbacks: makeCallbacks(options.rows || []),
       ...(options.disableColumnCustomization
         ? { disableColumnCustomization: true }
         : {}),
+      ...(options.withBulkActions
+        ? {
+            bulkActions: {
+              buttons: [
+                {
+                  title: "Archive",
+                  buttonStyleType: ButtonStyleType.NORMAL,
+                  onClick: async (): Promise<void> => {
+                    return Promise.resolve();
+                  },
+                },
+              ],
+            },
+          }
+        : {}),
     } as unknown as BaseModelTableProps<Monitor>;
 
     return render(<BaseModelTable<Monitor> {...props} />);
@@ -324,6 +454,31 @@ describe("BaseModelTable column customization", () => {
     });
   };
 
+  type WaitForCallCountFunction = (count: number) => Promise<void>;
+
+  const waitForCallCount: WaitForCallCountFunction = async (
+    count: number,
+  ): Promise<void> => {
+    await waitFor(() => {
+      expect(calls.length).toBe(count);
+    });
+  };
+
+  type SortByColumnFunction = (title: string) => Promise<void>;
+
+  /*
+   * The real click path for sorting: the header cell is a button, so this is
+   * what a viewer does, and it drives the same sortBy/sortOrder state the
+   * picker later has to reason about.
+   */
+  const sortByColumn: SortByColumnFunction = async (
+    title: string,
+  ): Promise<void> => {
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: title }));
+    });
+  };
+
   type OpenPickerFunction = () => Promise<void>;
 
   /*
@@ -363,8 +518,65 @@ describe("BaseModelTable column customization", () => {
     });
   };
 
+  type SelectRowsFunction = (container: HTMLElement) => Promise<void>;
+
+  /*
+   * Ticks the header checkbox, which selects every row on the page and is what
+   * puts the bulk bar - and with it "Export CSV" - on screen at all.
+   */
+  const selectRows: SelectRowsFunction = async (
+    container: HTMLElement,
+  ): Promise<void> => {
+    // The header checkbox is disabled until the first page has rendered.
+    await waitFor(() => {
+      expect(
+        container.querySelectorAll('input[type="checkbox"]:not([disabled])')
+          .length,
+      ).toBeGreaterThan(0);
+    });
+
+    await click(
+      container.querySelectorAll<HTMLInputElement>(
+        'input[type="checkbox"]',
+      )[0]!,
+    );
+  };
+
+  type ExportCsvFunction = () => Promise<Array<string>>;
+
+  /*
+   * The real click path, run end to end and read back as the lines a viewer
+   * would open in a spreadsheet. Every bulk action lives behind the bulk bar's
+   * "Bulk Actions" menu, so the export takes two clicks. Intercepted at the
+   * download rather than at the Blob, so the assertions are on the exact bytes
+   * that would have been written to disk.
+   */
+  const exportCsv: ExportCsvFunction = async (): Promise<Array<string>> => {
+    await click(screen.getByText("Bulk Actions"));
+
+    await waitFor(() => {
+      expect(screen.queryByText("Export CSV")).not.toBeNull();
+    });
+
+    await click(screen.getByText("Export CSV"));
+
+    await waitFor(() => {
+      expect(downloadedCsvFiles.length).toBe(1);
+    });
+
+    return (downloadedCsvFiles[0]?.csv || "").split("\r\n");
+  };
+
   beforeEach(() => {
     calls = [];
+    downloadedCsvFiles = [];
+
+    jest
+      .spyOn(TableColumnsToCsv, "downloadCsv")
+      .mockImplementation((data: DownloadedCsvFile): void => {
+        downloadedCsvFiles.push(data);
+      });
+
     window.history.replaceState(
       window.history.state,
       "",
@@ -499,6 +711,226 @@ describe("BaseModelTable column customization", () => {
       expect(calls[0]?.select["description"]).toBe(true);
       expect(calls[0]?.select["name"]).toBe(true);
     });
+
+    test("a hidden entity column's relation is still selected, in full", async () => {
+      /*
+       * "monitorTemplate" is deliberately absent from the stored order: a
+       * column the layout does not mention falls back to its declared
+       * default, so this covers both ways an entity column ends up off
+       * screen - the viewer switched it off, and the table ships it off.
+       */
+      seedPreference({
+        key: PREFS_KEY,
+        order: ["name", "description", "currentMonitorStatus", "labels"],
+        hidden: ["currentMonitorStatus"],
+      });
+
+      renderTable({
+        columns: makeColumns({ withHiddenByDefaultEntity: true }),
+      });
+
+      await waitForTable();
+
+      expect(getHeaders()).not.toContain("Monitor Status");
+      expect(getHeaders()).not.toContain("Template");
+
+      /*
+       * A relation is not selected by naming it - it is selected by the shape
+       * nested under it, and that shape is built by a *different* function
+       * (getRelationSelectFromColumns) with its own reference to the full
+       * column set. Narrowing only that one would leave every scalar
+       * assertion in this file green while every hidden entity cell came back
+       * as a bare id, so the column would paint blank the moment a viewer
+       * switched it on. Deep equality, because dropping the second key of a
+       * multi-field relation is the same bug one field smaller.
+       */
+      expect(calls[0]?.select["currentMonitorStatus"]).toEqual({ name: true });
+      expect(calls[0]?.select["monitorTemplate"]).toEqual({
+        _id: true,
+        templateName: true,
+      });
+    });
+
+    test("a column that ships hidden is selected even with no stored layout", async () => {
+      renderTable({ columns: makeColumns({ withHiddenByDefault: true }) });
+
+      await waitForTable();
+
+      /*
+       * Hidden because the table author said so, not because this viewer
+       * chose it - there is nothing in localStorage at all. The two states
+       * reach the same select today, and an optimisation that only widened
+       * the request "when the viewer has a stored layout" would look
+       * perfectly reasonable and would break exactly the shipped default,
+       * which is the state almost every viewer is in.
+       */
+      expect(getHeaders()).not.toContain("Monitor Type");
+      expect(readPreference(PREFS_KEY)).toBeNull();
+      expect(calls[0]?.select["monitorType"]).toBe(true);
+    });
+  });
+
+  describe("switching a hidden column back on", () => {
+    test("paints its value without asking the API again", async () => {
+      renderTable({
+        columns: makeColumns({ withHiddenByDefaultEntity: true }),
+        rows: ROWS,
+      });
+
+      await waitForTable();
+
+      expect(getHeaders()).not.toContain("Template");
+      expect(screen.queryByText(TEMPLATE_NAME)).toBeNull();
+
+      const callsBefore: number = calls.length;
+
+      await openPicker();
+      await click(screen.getByTestId("column-toggle-monitorTemplate"));
+      await savePicker();
+
+      await waitFor(() => {
+        expect(getHeaders()).toContain("Template");
+      });
+
+      /*
+       * The whole contract this table's hidden columns rest on, in one test.
+       *
+       * The request is built from the DECLARED columns, never the visible
+       * ones, and the fetch effect does not depend on the column set - so a
+       * column the viewer switches on is painted from the page already in
+       * hand, with its relation intact and no spinner. Wire the request up to
+       * the visible columns instead (there is a preference-filtered
+       * `selectFields` sitting unused in serializeToTableColumns that invites
+       * exactly that) and this cell comes back empty, with nothing to refetch
+       * it: the viewer's click would produce a column of blanks.
+       */
+      expect(screen.getByText(TEMPLATE_NAME)).toBeInTheDocument();
+      expect(calls.length).toBe(callsBefore);
+    });
+  });
+
+  describe("what the viewer's layout does to the CSV export", () => {
+    test("a column that ships hidden is not in the exported file", async () => {
+      const { container } = renderTable({
+        columns: makeColumns({ withHiddenByDefaultEntity: true }),
+        rows: ROWS,
+        withBulkActions: true,
+      });
+
+      await waitForTable();
+
+      await selectRows(container);
+
+      const lines: Array<string> = await exportCsv();
+
+      /*
+       * "Export what you see". The export is built from the table's own
+       * column set, so a column the table ships switched off has no header
+       * and no cell in the file.
+       *
+       * This is the one assertion in the suite that is about data leaving the
+       * product rather than about pixels. Every other test here is happy for
+       * a hidden column's field to be fetched - it has to be, or switching
+       * the column on would paint blanks - so the row in memory is carrying
+       * the relation the whole time. Only the column filtering keeps it out
+       * of a file the viewer opens, mails and uploads.
+       *
+       * Build the Table columns from the unfiltered `allColumns` instead of
+       * the preference-filtered `columnsToRender` in serializeToTableColumns
+       * - a one-word change, and the first thing anyone would reach for after
+       * a ticket saying "the CSV lost my Template column" - and every table
+       * in the app starts exporting columns nobody asked to see.
+       */
+      expect(lines[0]).toBe("Name,Description,Monitor Status,Labels");
+      expect(lines[1]).toBe("api-gateway,The public API gateway,,");
+      expect(lines.join("\r\n")).not.toContain(TEMPLATE_NAME);
+    });
+
+    test("switching it on puts it in the exported file", async () => {
+      const { container } = renderTable({
+        columns: makeColumns({ withHiddenByDefaultEntity: true }),
+        rows: ROWS,
+        withBulkActions: true,
+      });
+
+      await waitForTable();
+
+      await openPicker();
+      await click(screen.getByTestId("column-toggle-monitorTemplate"));
+      await savePicker();
+
+      await waitFor(() => {
+        expect(getHeaders()).toContain("Template");
+      });
+
+      await selectRows(container);
+
+      const lines: Array<string> = await exportCsv();
+
+      /*
+       * The other half of the same contract, and the reason the test above
+       * cannot be satisfied by simply never exporting an `isHiddenByDefault`
+       * column: the file follows this viewer's layout, not the table author's
+       * default. Someone who switches Template on has almost certainly done
+       * it *because* they want it in the export, and freezing the export
+       * columns at the shipped default would hand them a file missing the one
+       * column they went to the picker for.
+       */
+      expect(lines[0]).toBe("Name,Description,Monitor Status,Labels,Template");
+      expect(lines[1]).toContain(TEMPLATE_NAME);
+    });
+  });
+
+  describe("the sort a hidden column leaves behind", () => {
+    test("showing a column does not refetch; hiding the sorted one does", async () => {
+      renderTable({
+        columns: makeColumns({ withHiddenByDefaultEntity: true }),
+        rows: ROWS,
+      });
+
+      await waitForTable();
+
+      await sortByColumn("Description");
+      await waitForCallCount(2);
+      expect(calls[1]?.sort).toEqual({
+        description: SortOrder.Descending,
+      });
+
+      await openPicker();
+      await click(screen.getByTestId("column-toggle-monitorTemplate"));
+      await savePicker();
+
+      await waitFor(() => {
+        expect(getHeaders()).toContain("Template");
+      });
+
+      /*
+       * Adding a column changes nothing the server was asked for, so the
+       * guard in onColumnCustomizationSave has to leave the sort alone. A
+       * reset-on-every-save would throw the viewer's ordering away - and
+       * their page - every time they ticked a box.
+       */
+      expect(calls.length).toBe(2);
+      expect(screen.getByText(TEMPLATE_NAME)).toBeInTheDocument();
+
+      await openPicker();
+      await click(screen.getByTestId("column-toggle-description"));
+      await savePicker();
+
+      await waitFor(() => {
+        expect(getHeaders()).not.toContain("Description");
+      });
+
+      /*
+       * Hiding the column the table is sorted by is different: the header
+       * that ordering came from is gone, so the viewer can neither see it nor
+       * click it off. The sort falls back to the table's default (here: none)
+       * and the page is refetched, rather than leaving them staring at rows
+       * in an order they cannot explain or undo.
+       */
+      await waitForCallCount(3);
+      expect(calls[2]?.sort).toEqual({});
+    });
   });
 
   describe("the generated Actions column", () => {

package/Tests/UI/Components/ModelTable/ColumnPreference.test.ts

@@ -1675,4 +1675,93 @@ describe("a stored layout replayed against a changed column set", () => {
     expect(rendered).toHaveLength(4);
     expect(titlesOf(rendered)).toEqual(["Name", "Actions", "Actions", ""]);
   });
+
+  test("a layout saved against a column set missing a default-hidden column switches it back off", () => {
+    /*
+     * A column set changes between surfaces, not just between releases: the
+     * same table component is embedded on a detail page with one column
+     * spliced out (there is no point showing "Template" on the template's own
+     * page). If both surfaces persist under one storage key, the narrow one
+     * writes the layout for the wide one.
+     *
+     * buildColumnPreference records only what the picker was showing, so the
+     * spliced-out id lands in neither `order` nor `hidden` — and reading it
+     * back falls through to the column's DECLARED default.
+     *
+     * That fallback is why this stayed invisible until now, and why it is the
+     * hazard the moment a column ships hidden: a dropped column that defaults
+     * to visible is restored by accident, so nobody ever noticed the drop,
+     * while a dropped column that defaults to hidden silently un-picks the one
+     * choice the viewer made — and the picker is the only way back to it. A
+     * table embedded on a second surface must therefore key its stored layout
+     * per surface; this is the loss it is avoiding.
+     */
+    const fullColumns: Columns<Monitor> = [
+      makeColumn({
+        field: { name: true },
+        title: "Name",
+        isNotCustomizable: true,
+      }),
+      makeColumn({ field: { description: true }, title: "Description" }),
+      makeColumn({
+        field: { monitorTemplate: { _id: true, templateName: true } },
+        title: "Template",
+        isHiddenByDefault: true,
+      }),
+      makeColumn({ field: { labels: true }, title: "Labels" }),
+    ];
+
+    // The embedded surface drops the default-hidden column and one other.
+    const scopedColumns: Columns<Monitor> = fullColumns.filter(
+      (column: Column<Monitor>): boolean => {
+        return column.title !== "Template" && column.title !== "Labels";
+      },
+    );
+
+    // The viewer switches Template on from the full table and saves.
+    const preferenceA: ColumnPreference = buildColumnPreference<Monitor>(
+      getCustomizableColumns<Monitor>({
+        columns: fullColumns,
+        preference: {
+          order: ["description", "monitorTemplate", "labels"],
+          hidden: [],
+        },
+      }),
+    );
+
+    expect(
+      findEntry(
+        getCustomizableColumns<Monitor>({
+          columns: fullColumns,
+          preference: preferenceA,
+        }),
+        "monitorTemplate",
+      ).isVisible,
+    ).toBe(true);
+
+    /*
+     * Now the picker is saved from the embedded surface without the viewer
+     * changing anything there.
+     */
+    const preferenceB: ColumnPreference = buildColumnPreference<Monitor>(
+      getCustomizableColumns<Monitor>({
+        columns: scopedColumns,
+        preference: preferenceA,
+      }),
+    );
+
+    expect(preferenceB.order).not.toContain("monitorTemplate");
+    expect(preferenceB.hidden).not.toContain("monitorTemplate");
+
+    const replayed: Array<CustomizableColumn<Monitor>> =
+      getCustomizableColumns<Monitor>({
+        columns: fullColumns,
+        preference: preferenceB,
+      });
+
+    // The viewer's one opt-in is gone...
+    expect(findEntry(replayed, "monitorTemplate").isVisible).toBe(false);
+    // ...while a column dropped exactly the same way comes back unharmed.
+    expect(findEntry(replayed, "labels").isVisible).toBe(true);
+  });
 });