@oneuptime/common 11.7.1 → 11.7.3

package/Tests/UI/Components/ModelTableExportFromColumns.test.ts

@@ -0,0 +1,153 @@
+import Column from "../../../UI/Components/ModelTable/Column";
+import { getExportKeysFromColumn } from "../../../UI/Components/ModelTable/ExportFromColumns";
+import FieldType from "../../../UI/Components/Types/FieldType";
+import Alert from "../../../Models/DatabaseModels/Alert";
+import ProxmoxCluster from "../../../Models/DatabaseModels/ProxmoxCluster";
+import { describe, expect, test } from "@jest/globals";
+
+describe("ModelTable ExportFromColumns", () => {
+  describe("getExportKeysFromColumn", () => {
+    test("it returns every field a column declares, not just the first", () => {
+      /*
+       * The alert "Affected Resources" cell renders five relations at once.
+       * All five are selected, but the Table column's `key` only holds the
+       * first, so the CSV export used to carry the hosts and drop the rest.
+       */
+      const column: Column<Alert> = {
+        field: {
+          hosts: { name: true },
+          kubernetesClusters: { name: true },
+          dockerHosts: { name: true },
+          podmanHosts: { name: true },
+          services: { name: true },
+        },
+        title: "Affected Resources",
+        type: FieldType.EntityArray,
+      };
+
+      expect(
+        getExportKeysFromColumn<Alert>({
+          column: column,
+          columnKey: "hosts",
+        }),
+      ).toEqual([
+        "hosts",
+        "kubernetesClusters",
+        "dockerHosts",
+        "podmanHosts",
+        "services",
+      ]);
+    });
+
+    test("it returns a single key for an ordinary column", () => {
+      const column: Column<ProxmoxCluster> = {
+        field: { name: true },
+        title: "Name",
+        type: FieldType.Text,
+      };
+
+      expect(
+        getExportKeysFromColumn<ProxmoxCluster>({
+          column: column,
+          columnKey: "name",
+        }),
+      ).toEqual(["name"]);
+    });
+
+    test("it keeps the selectedProperty path the cell renders", () => {
+      /*
+       * columnKey already carries the "relation.property" path, and that is
+       * the path the export has to read - not the bare relation.
+       */
+      const column: Column<Alert> = {
+        field: { alertSeverity: { name: true } },
+        selectedProperty: "name",
+        title: "Severity",
+        type: FieldType.Text,
+      };
+
+      expect(
+        getExportKeysFromColumn<Alert>({
+          column: column,
+          columnKey: "alertSeverity.name",
+        }),
+      ).toEqual(["alertSeverity.name"]);
+    });
+
+    test("it drops secondary fields the user cannot read", () => {
+      /*
+       * Mirrors getSelectFromColumns: a field that was never selected because
+       * of permissions is not on the row, so exporting it would only ever
+       * produce an empty cell.
+       */
+      const column: Column<ProxmoxCluster> = {
+        field: { nodeCount: true, onlineNodeCount: true },
+        title: "Nodes",
+        type: FieldType.Element,
+      };
+
+      expect(
+        getExportKeysFromColumn<ProxmoxCluster>({
+          column: column,
+          columnKey: "nodeCount",
+          hasPermissionToReadField: (field: string): boolean => {
+            return field !== "onlineNodeCount";
+          },
+        }),
+      ).toEqual(["nodeCount"]);
+    });
+
+    test("it keeps the primary field even when the permission check rejects it", () => {
+      /*
+       * The primary field is what the column sorts and renders by, and
+       * BaseModelTable has already decided the column is visible by this
+       * point. Only secondary fields are gated here.
+       */
+      const column: Column<ProxmoxCluster> = {
+        field: { nodeCount: true, onlineNodeCount: true },
+        title: "Nodes",
+        type: FieldType.Element,
+      };
+
+      expect(
+        getExportKeysFromColumn<ProxmoxCluster>({
+          column: column,
+          columnKey: "nodeCount",
+          hasPermissionToReadField: (): boolean => {
+            return false;
+          },
+        }),
+      ).toEqual(["nodeCount"]);
+    });
+
+    test("it does not repeat the primary field when it is declared again", () => {
+      const column: Column<ProxmoxCluster> = {
+        field: { name: true, nodeCount: true },
+        title: "Name",
+        type: FieldType.Element,
+      };
+
+      expect(
+        getExportKeysFromColumn<ProxmoxCluster>({
+          column: column,
+          columnKey: "name",
+        }),
+      ).toEqual(["name", "nodeCount"]);
+    });
+
+    test("it returns nothing for a column with no key", () => {
+      const column: Column<ProxmoxCluster> = {
+        field: {},
+        title: "Actions",
+        type: FieldType.Actions,
+      };
+
+      expect(
+        getExportKeysFromColumn<ProxmoxCluster>({
+          column: column,
+          columnKey: null,
+        }),
+      ).toEqual([]);
+    });
+  });
+});

package/Tests/UI/Components/MonacoLoader.test.ts

@@ -0,0 +1,67 @@
+import getJestMockFunction, { MockFunction } from "../../../Tests/MockType";
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+
+const config: MockFunction = getJestMockFunction();
+
+jest.mock("@monaco-editor/react", () => {
+  return {
+    loader: {
+      config,
+    },
+  };
+});
+
+describe("configureMonacoLoader", () => {
+  afterEach(() => {
+    config.mockClear();
+    delete process.env["MONACO_ASSET_PATH"];
+    jest.resetModules();
+  });
+
+  type LoadLoader = () => Promise<() => void>;
+
+  const loadLoader: LoadLoader = async (): Promise<() => void> => {
+    const { default: configureMonacoLoader } = await import(
+      "../../../UI/Components/CodeEditor/MonacoLoader"
+    );
+
+    return configureMonacoLoader;
+  };
+
+  test("points Monaco at the path the build baked in", async () => {
+    process.env["MONACO_ASSET_PATH"] = "/dashboard/assets/monaco/vs";
+
+    (await loadLoader())();
+
+    /*
+     * Absolute, not the root-relative value the build baked in: Monaco resolves
+     * its language-service workers from this inside a blob: worker, which has no
+     * base to resolve a root-relative path against.
+     */
+    expect(config).toHaveBeenCalledWith({
+      paths: {
+        vs: `${window.location.origin}/dashboard/assets/monaco/vs`,
+      },
+    });
+  });
+
+  test("gives Monaco an absolute path its blob workers can resolve", async () => {
+    process.env["MONACO_ASSET_PATH"] = "/dashboard/assets/monaco/vs";
+
+    (await loadLoader())();
+
+    const configuredPath: string = (
+      config.mock.calls[0] as unknown as Array<{ paths: { vs: string } }>
+    )[0]!.paths.vs;
+
+    expect(() => {
+      return new URL(configuredPath);
+    }).not.toThrow();
+  });
+
+  test("keeps the bundled default when the build set no path", async () => {
+    (await loadLoader())();
+
+    expect(config).not.toHaveBeenCalled();
+  });
+});

package/Tests/UI/Components/MonacoRuntime.test.ts

@@ -0,0 +1,121 @@
+import { describe, expect, test } from "@jest/globals";
+import fs from "fs";
+import path from "path";
+
+/*
+ * The build copies monaco-editor's min/vs next to each frontend bundle and
+ * MonacoLoader points @monaco-editor/loader at it, so the version we install is
+ * the version that actually runs in the browser.
+ *
+ * The loader resolves init() with whatever the AMD module `vs/editor/editor.main`
+ * exports, and that shape is not stable across Monaco releases. 0.53 and 0.54
+ * nest the API under `exports.m`; against a loader that does not unwrap that,
+ * `monaco.editor` comes back undefined and every editor throws
+ * "Cannot read properties of undefined (reading 'getModel')" instead of
+ * mounting - with the assets all serving 200, so nothing else looks wrong.
+ *
+ * @monaco-editor/loader learned to unwrap it in 1.7.0. These tests fail if the
+ * two are ever moved into a combination that cannot work.
+ */
+
+// [from, to) - the Monaco releases whose AMD module nests the API under `exports.m`.
+const NESTED_API_RANGE: { from: string; to: string } = {
+  from: "0.53.0",
+  to: "0.55.0",
+};
+
+// The first @monaco-editor/loader that unwraps `exports.m`.
+const LOADER_UNWRAPS_FROM: string = "1.7.0";
+
+type ReadVersion = (packageName: string) => string;
+
+const readVersion: ReadVersion = (packageName: string): string => {
+  return JSON.parse(
+    fs.readFileSync(require.resolve(`${packageName}/package.json`), "utf8"),
+  ).version;
+};
+
+type Compare = (a: string, b: string) => number;
+
+const compare: Compare = (a: string, b: string): number => {
+  const left: Array<number> = a.split(".").map(Number);
+  const right: Array<number> = b.split(".").map(Number);
+
+  for (let i: number = 0; i < 3; i++) {
+    const difference: number = (left[i] || 0) - (right[i] || 0);
+
+    if (difference !== 0) {
+      return difference;
+    }
+  }
+
+  return 0;
+};
+
+describe("Monaco runtime", () => {
+  test("does not pair a nested-API Monaco with a loader that cannot unwrap it", () => {
+    const monacoVersion: string = readVersion("monaco-editor");
+    const loaderVersion: string = readVersion("@monaco-editor/loader");
+
+    const nestsApi: boolean =
+      compare(monacoVersion, NESTED_API_RANGE.from) >= 0 &&
+      compare(monacoVersion, NESTED_API_RANGE.to) < 0;
+
+    if (!nestsApi) {
+      return;
+    }
+
+    expect({
+      monacoVersion,
+      loaderVersion,
+      unwrapsNestedApi: compare(loaderVersion, LOADER_UNWRAPS_FROM) >= 0,
+    }).toEqual({
+      monacoVersion,
+      loaderVersion,
+      unwrapsNestedApi: true,
+    });
+  });
+
+  test("ships the files the loader asks for by path", () => {
+    const monacoRoot: string = path.dirname(
+      require.resolve("monaco-editor/package.json"),
+    );
+
+    /*
+     * The loader builds a script tag for `${paths.vs}/loader.js` and then
+     * require()s `vs/editor/editor.main`. Everything else Monaco pulls in is
+     * relative to those two, so a missing one is the difference between a
+     * working editor and a silent 404 on an air-gapped install.
+     */
+    for (const asset of ["loader.js", "editor/editor.main.js"]) {
+      expect(fs.existsSync(path.join(monacoRoot, "min", "vs", asset))).toBe(
+        true,
+      );
+    }
+  });
+
+  test("does not bring a second copy of anything Common already depends on", () => {
+    /*
+     * Monaco releases from 0.55 on depend on marked and dompurify, both of which
+     * Common already pins at the top level. npm nests Monaco's own copies
+     * because it pins them exactly, so the top-level pin does not reach them and
+     * the tree ends up carrying two versions - the older one being whatever
+     * Monaco vendored at release time.
+     */
+    const monacoDependencies: Array<string> = Object.keys(
+      JSON.parse(
+        fs.readFileSync(require.resolve("monaco-editor/package.json"), "utf8"),
+      ).dependencies || {},
+    );
+
+    const commonDependencies: Record<string, string> = JSON.parse(
+      fs.readFileSync(path.join(__dirname, "../../../package.json"), "utf8"),
+    ).dependencies;
+
+    expect(
+      monacoDependencies.filter((name: string) => {
+        return Boolean(commonDependencies[name]);
+      }),
+    ).toEqual([]);
+  });
+});

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

@@ -1,8 +1,10 @@
 import { afterEach, beforeEach, describe, expect, test } from "@jest/globals";
 import { fireEvent, render, RenderResult } from "@testing-library/react";
 import * as React from "react";
+import { ReactElement } from "react";
 import getJestMockFunction, { MockFunction } from "../../MockType";
 import Table, { BulkActionProps } from "../../../UI/Components/Table/Table";
+import TableColumnsToCsv from "../../../UI/Utils/TableColumnsToCsv";
 import Columns from "../../../UI/Components/Table/Types/Columns";
 import FieldType from "../../../UI/Components/Types/FieldType";
 import SortOrder from "../../../Types/BaseDatabase/SortOrder";
@@ -27,21 +29,26 @@ jest.mock("react-i18next", () => {
 interface Row {
   _id?: string | undefined;
   name?: string | undefined;
+  description?: string | undefined;
+  hosts?: Array<{ name: string }> | undefined;
+  services?: Array<{ name: string }> | undefined;
 }
 
 const columns: Columns<Row> = [
   { title: "Name", type: FieldType.Text, key: "name" },
+  { title: "Description", type: FieldType.Text, key: "description" },
 ];
 
 const data: Array<Row> = [
-  { _id: "1", name: "Alpha" },
-  { _id: "2", name: "Beta" },
+  { _id: "1", name: "Alpha", description: "First" },
+  { _id: "2", name: "Beta", description: "Second" },
 ];
 
 interface RenderTableOptions {
   bulkActions?: BulkActionProps<Row> | undefined;
   bulkSelectedItems?: Array<Row> | undefined;
   disableBulkCsvExport?: boolean | undefined;
+  columns?: Columns<Row> | undefined;
 }
 
 type RenderTableFunction = (options: RenderTableOptions) => RenderResult;
@@ -53,7 +60,7 @@ const renderTable: RenderTableFunction = (
     <Table<Row>
       id="test-table"
       data={data}
-      columns={columns}
+      columns={options.columns || columns}
       currentPageNumber={1}
       totalItemsCount={data.length}
       itemsOnPage={10}
@@ -89,6 +96,8 @@ describe("Table bulk CSV export", () => {
   let createObjectURLMock: MockFunction;
   let revokeObjectURLMock: MockFunction;
   let clickSpy: jest.SpyInstance;
+  let downloadedCsvFiles: Array<{ csv: string; filename: string }> = [];
+  let downloadCsvSpy: jest.SpyInstance;
 
   beforeEach(() => {
     createObjectURLMock = getJestMockFunction();
@@ -103,10 +112,28 @@ describe("Table bulk CSV export", () => {
     clickSpy = jest
       .spyOn(HTMLAnchorElement.prototype, "click")
       .mockImplementation(() => {});
+
+    downloadedCsvFiles = [];
   });
 
+  type SpyOnDownloadFunction = () => void;
+
+  /*
+   * Asserting on the CSV text the exporter hands to the browser, rather than
+   * on the opaque Blob, is what lets these tests see an export whose rows are
+   * all blank - the shape the bug produced.
+   */
+  const spyOnDownload: SpyOnDownloadFunction = (): void => {
+    downloadCsvSpy = jest
+      .spyOn(TableColumnsToCsv, "downloadCsv")
+      .mockImplementation((...args: Array<unknown>): void => {
+        downloadedCsvFiles.push(args[0] as { csv: string; filename: string });
+      });
+  };
+
   afterEach(() => {
     clickSpy.mockRestore();
+    downloadCsvSpy?.mockRestore();
   });
 
   test("shows an Export CSV action when the table has bulk actions and rows are selected", () => {
@@ -165,4 +192,186 @@ describe("Table bulk CSV export", () => {
     expect(queryByText("Bulk Actions")).toBeNull();
     expect(queryByText("Export CSV")).toBeNull();
   });
+
+  test("the exported CSV carries the values of every selected row", () => {
+    spyOnDownload();
+
+    const { getByText } = renderTable({
+      bulkActions: customBulkActions,
+      bulkSelectedItems: data,
+    });
+
+    fireEvent.click(getByText("Bulk Actions"));
+    fireEvent.click(getByText("Export CSV"));
+
+    expect(downloadedCsvFiles.length).toBe(1);
+    expect(downloadedCsvFiles[0]!.csv.split("\r\n")).toEqual([
+      "Name,Description",
+      "Alpha,First",
+      "Beta,Second",
+    ]);
+  });
+
+  test("it exports the selection, not the rows on screen", () => {
+    spyOnDownload();
+
+    /*
+     * The selection outgrows the page as soon as the user selects across
+     * pages or picks "Select All", so the export has to follow
+     * bulkSelectedItems rather than the rendered data.
+     */
+    const selection: Array<Row> = [];
+
+    for (let i: number = 0; i < 30; i++) {
+      selection.push({
+        _id: `${i}`,
+        name: `Row ${i}`,
+        description: `Desc ${i}`,
+      });
+    }
+
+    const { getByText } = renderTable({
+      bulkActions: customBulkActions,
+      bulkSelectedItems: selection,
+    });
+
+    fireEvent.click(getByText("Bulk Actions"));
+    fireEvent.click(getByText("Export CSV"));
+
+    const lines: Array<string> = downloadedCsvFiles[0]!.csv.split("\r\n");
+
+    // Header plus every selected row, even though the table renders two.
+    expect(lines.length).toBe(31);
+    expect(lines[30]).toBe("Row 29,Desc 29");
+  });
+
+  test("rows stripped down to an id export as blank cells", () => {
+    spyOnDownload();
+
+    /*
+     * Characterisation test. TableColumnsToCsv writes what it is handed, so
+     * a selection of id-only models produces a header and nothing else -
+     * which is exactly what the "Select All then Export CSV" bug looked
+     * like. The fix belongs where the selection is fetched
+     * (BaseModelTable.fetchAllBulkItems), not here.
+     */
+    const { getByText } = renderTable({
+      bulkActions: customBulkActions,
+      bulkSelectedItems: [{ _id: "1" }, { _id: "2" }],
+    });
+
+    fireEvent.click(getByText("Bulk Actions"));
+    fireEvent.click(getByText("Export CSV"));
+
+    expect(downloadedCsvFiles[0]!.csv.split("\r\n")).toEqual([
+      "Name,Description",
+      ",",
+      ",",
+    ]);
+  });
+
+  test("a placeholder id column is left out instead of exporting a raw uuid", () => {
+    spyOnDownload();
+
+    /*
+     * The "Owners" column on alerts / incidents / monitors renders entirely
+     * through getElement and declares `field: { _id: true }` only so the row
+     * gets fetched. It used to put the row's UUID in the file under the
+     * header "Owners".
+     */
+    const { getByText } = renderTable({
+      bulkActions: customBulkActions,
+      bulkSelectedItems: [data[0]!],
+      columns: [
+        { title: "Name", type: FieldType.Text, key: "name" },
+        {
+          title: "Owners",
+          type: FieldType.Element,
+          key: "_id",
+          exportKeys: ["_id"],
+          getElement: (): ReactElement => {
+            return <span>Owners</span>;
+          },
+        },
+      ],
+    });
+
+    fireEvent.click(getByText("Bulk Actions"));
+    fireEvent.click(getByText("Export CSV"));
+
+    expect(downloadedCsvFiles[0]!.csv.split("\r\n")).toEqual(["Name", "Alpha"]);
+  });
+
+  test("a placeholder id column that supplies an export value is exported", () => {
+    spyOnDownload();
+
+    const { getByText } = renderTable({
+      bulkActions: customBulkActions,
+      bulkSelectedItems: [data[0]!],
+      columns: [
+        { title: "Name", type: FieldType.Text, key: "name" },
+        {
+          title: "Owners",
+          type: FieldType.Element,
+          key: "_id",
+          exportKeys: ["_id"],
+          getElement: (): ReactElement => {
+            return <span>Owners</span>;
+          },
+          getExportValue: (item: Row): string => {
+            return `owner-of-${item.name}`;
+          },
+        },
+      ],
+    });
+
+    fireEvent.click(getByText("Bulk Actions"));
+    fireEvent.click(getByText("Export CSV"));
+
+    expect(downloadedCsvFiles[0]!.csv.split("\r\n")).toEqual([
+      "Name,Owners",
+      "Alpha,owner-of-Alpha",
+    ]);
+  });
+
+  test("a column that renders several relations exports all of them", () => {
+    spyOnDownload();
+
+    /*
+     * The alert "Affected Resources" cell spans hosts / kubernetesClusters /
+     * dockerHosts / podmanHosts / services. All of them are fetched, but only
+     * the first reached the file.
+     */
+    const { getByText } = renderTable({
+      bulkActions: customBulkActions,
+      bulkSelectedItems: [
+        {
+          _id: "1",
+          name: "Alpha",
+          hosts: [{ name: "web-01" }],
+          services: [{ name: "checkout" }],
+        },
+      ],
+      columns: [
+        { title: "Name", type: FieldType.Text, key: "name" },
+        {
+          title: "Affected Resources",
+          type: FieldType.EntityArray,
+          key: "hosts",
+          exportKeys: ["hosts", "services"],
+          getElement: (): ReactElement => {
+            return <span>Resources</span>;
+          },
+        },
+      ],
+    });
+
+    fireEvent.click(getByText("Bulk Actions"));
+    fireEvent.click(getByText("Export CSV"));
+
+    expect(downloadedCsvFiles[0]!.csv.split("\r\n")).toEqual([
+      "Name,Affected Resources",
+      "Alpha,web-01; checkout",
+    ]);
+  });
 });