@oneuptime/common 11.7.3 → 12.0.0

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

@@ -569,4 +569,431 @@ describe("ColumnCustomizationModal", () => {
       "Customize Columns",
     );
   });
+
+  test("the header carries the title and description, and no icon", () => {
+    const { view }: RenderedModal = renderModal();
+
+    expect(view.getByTestId("modal-description")).toHaveTextContent(
+      "Choose which columns to show and drag them into the order you want.",
+    );
+
+    // The header icon was decorative; it repeated what the title already said.
+    expect(view.queryByTestId("icon")).not.toBeInTheDocument();
+  });
+
+  test("uses a custom description when one is given", () => {
+    const onSave: MockFunction = getJestMockFunction();
+    const onClose: MockFunction = getJestMockFunction();
+    const onReset: MockFunction = getJestMockFunction();
+
+    const view: RenderResult = render(
+      <ColumnCustomizationModal<Monitor>
+        columns={getDefaultColumns()}
+        onSave={onSave}
+        onClose={onClose}
+        onReset={onReset}
+        description="Pick the ones you care about."
+      />,
+    );
+
+    expect(view.getByTestId("modal-description")).toHaveTextContent(
+      "Pick the ones you care about.",
+    );
+  });
+
+  /*
+   * Below: the state the two bulk actions and the search box put the rest of
+   * the body into. These are the parts a viewer reads to work out why a
+   * control did nothing, so each one is pinned rather than left to the styling.
+   */
+
+  test("Show all is inert once every column is already on", () => {
+    const { view }: RenderedModal = renderModal();
+
+    const showAll: HTMLElement = view.getByTestId(
+      "column-customization-show-all",
+    );
+
+    expect(showAll).not.toBeDisabled();
+
+    fireEvent.click(showAll);
+
+    // Nothing left to show, so the control says so rather than doing nothing.
+    expect(showAll).toBeDisabled();
+  });
+
+  test("Show all comes back to life as soon as a column is switched off", () => {
+    const { view }: RenderedModal = renderModal();
+
+    fireEvent.click(view.getByTestId("column-customization-show-all"));
+    fireEvent.click(view.getByTestId("column-toggle-description"));
+
+    expect(
+      view.getByTestId("column-customization-show-all"),
+    ).not.toBeDisabled();
+  });
+
+  test("Hide all is inert once only the one required column is left", () => {
+    const { view }: RenderedModal = renderModal();
+
+    const hideAll: HTMLElement = view.getByTestId(
+      "column-customization-hide-all",
+    );
+
+    fireEvent.click(hideAll);
+
+    /*
+     * A second press could only try to hide the column that has to stay, so
+     * the button is switched off instead of quietly refusing.
+     */
+    expect(hideAll).toBeDisabled();
+    expect(view.getByTestId("column-customization-count")).toHaveTextContent(
+      "1 of 4 columns shown",
+    );
+  });
+
+  test("Hide all starts out inert when the caller opens with a single column on", () => {
+    const { view }: RenderedModal = renderModal({
+      columns: [
+        makeEntry({ id: "name", title: "Monitor Name", isVisible: true }),
+        makeEntry({
+          id: "description",
+          title: "Description",
+          isVisible: false,
+        }),
+      ],
+    });
+
+    expect(view.getByTestId("column-customization-hide-all")).toBeDisabled();
+    expect(
+      view.getByTestId("column-customization-show-all"),
+    ).not.toBeDisabled();
+  });
+
+  test("the column that cannot be switched off is marked as required", () => {
+    const { view }: RenderedModal = renderModal();
+
+    expect(view.queryByTestId("column-locked-name")).not.toBeInTheDocument();
+
+    fireEvent.click(view.getByTestId("column-customization-hide-all"));
+
+    /*
+     * The disabled checkbox alone reads as a glitch. The badge is the only
+     * thing on the row that explains why it will not move.
+     */
+    expect(view.getByTestId("column-locked-name")).toHaveTextContent(
+      "Required",
+    );
+  });
+
+  test("the required badge follows the column that is actually locked", () => {
+    const { view }: RenderedModal = renderModal({
+      columns: [
+        makeEntry({ id: "name", title: "Monitor Name", isVisible: true }),
+        makeEntry({ id: "description", title: "Description", isVisible: true }),
+      ],
+    });
+
+    fireEvent.click(view.getByTestId("column-toggle-name"));
+
+    expect(view.getByTestId("column-locked-description")).toBeInTheDocument();
+    expect(view.queryByTestId("column-locked-name")).not.toBeInTheDocument();
+  });
+
+  test("the clear button only exists while there is something to clear", () => {
+    const { view }: RenderedModal = renderModal();
+
+    expect(
+      view.queryByTestId("column-customization-search-clear"),
+    ).not.toBeInTheDocument();
+
+    typeSearch(view, "desc");
+
+    expect(
+      view.getByTestId("column-customization-search-clear"),
+    ).toBeInTheDocument();
+  });
+
+  test("the clear button empties the box and brings the whole list back", () => {
+    const { view }: RenderedModal = renderModal();
+
+    typeSearch(view, "desc");
+    expect(view.getAllByTestId(/^column-toggle-/)).toHaveLength(1);
+
+    fireEvent.click(view.getByTestId("column-customization-search-clear"));
+
+    expect(view.getByTestId("column-customization-search")).toHaveValue("");
+    expect(view.getAllByTestId(/^column-toggle-/)).toHaveLength(4);
+    expect(
+      view.queryByTestId("column-customization-search-clear"),
+    ).not.toBeInTheDocument();
+  });
+
+  test("clearing through the button re-arms the move buttons", () => {
+    const { view, onSave }: RenderedModal = renderModal();
+
+    typeSearch(view, "desc");
+    fireEvent.click(view.getByTestId("column-customization-search-clear"));
+    fireEvent.click(view.getByTestId("column-move-down-name"));
+    fireEvent.click(view.getByTestId("modal-footer-submit-button"));
+
+    expect(getSavedIds(onSave)).toEqual([
+      "currentMonitorStatus",
+      "name",
+      "description",
+      "createdAt",
+    ]);
+  });
+
+  test("a search that matches nothing still offers a way out", () => {
+    const { view }: RenderedModal = renderModal();
+
+    typeSearch(view, "no-such-column");
+
+    expect(
+      view.getByTestId("column-customization-no-results"),
+    ).toBeInTheDocument();
+
+    fireEvent.click(view.getByTestId("column-customization-search-clear"));
+
+    expect(
+      view.queryByTestId("column-customization-no-results"),
+    ).not.toBeInTheDocument();
+    expect(view.getAllByTestId(/^column-toggle-/)).toHaveLength(4);
+  });
+
+  test("the hint explains reordering, and explains its absence while searching", () => {
+    const { view }: RenderedModal = renderModal();
+
+    expect(view.getByTestId("column-customization-hint")).toHaveTextContent(
+      "Drag a row, or use the arrows, to change the column order.",
+    );
+
+    typeSearch(view, "desc");
+
+    /*
+     * The move buttons go grey during a search. Without this line the viewer
+     * is left to guess whether that is deliberate.
+     */
+    expect(view.getByTestId("column-customization-hint")).toHaveTextContent(
+      "Clear the search to reorder columns.",
+    );
+
+    typeSearch(view, "");
+
+    expect(view.getByTestId("column-customization-hint")).toHaveTextContent(
+      "Drag a row, or use the arrows, to change the column order.",
+    );
+  });
+
+  test("whitespace alone is not a search", () => {
+    const { view }: RenderedModal = renderModal();
+
+    typeSearch(view, "   ");
+
+    // Nothing is filtered out, so nothing about the list should change either.
+    expect(view.getAllByTestId(/^column-toggle-/)).toHaveLength(4);
+    expect(view.getByTestId("column-customization-hint")).toHaveTextContent(
+      "Drag a row, or use the arrows, to change the column order.",
+    );
+    expect(view.getByTestId("column-move-down-name")).not.toBeDisabled();
+  });
+
+  test("a search that matches everything leaves every row in place", () => {
+    const { view }: RenderedModal = renderModal({
+      columns: [
+        makeEntry({ id: "one", title: "Alpha One", isVisible: true }),
+        makeEntry({ id: "two", title: "Alpha Two", isVisible: true }),
+      ],
+    });
+
+    typeSearch(view, "alpha");
+
+    expect(view.getAllByTestId(/^column-toggle-/)).toHaveLength(2);
+    // Still a search, so reordering stays off.
+    expect(view.getByTestId("column-move-down-one")).toBeDisabled();
+  });
+
+  test("a column can be toggled from inside a filtered list", () => {
+    const { view, onSave }: RenderedModal = renderModal();
+
+    typeSearch(view, "description");
+    fireEvent.click(view.getByTestId("column-toggle-description"));
+
+    expect(view.getByTestId("column-customization-count")).toHaveTextContent(
+      "2 of 4 columns shown",
+    );
+
+    fireEvent.click(view.getByTestId("modal-footer-submit-button"));
+
+    expect(
+      getSaved(onSave).find((entry: CustomizableColumn<Monitor>) => {
+        return entry.id === "description";
+      })?.isVisible,
+    ).toBe(false);
+  });
+
+  test("bulk actions reach the columns a search is hiding", () => {
+    const { view, onSave }: RenderedModal = renderModal();
+
+    typeSearch(view, "name");
+    fireEvent.click(view.getByTestId("column-customization-show-all"));
+    typeSearch(view, "");
+
+    /*
+     * "Show all" is not "show all of the matches" - it works on the layout,
+     * not on what happens to be on screen.
+     */
+    expect(view.getByTestId("column-customization-count")).toHaveTextContent(
+      "4 of 4 columns shown",
+    );
+
+    fireEvent.click(view.getByTestId("modal-footer-submit-button"));
+
+    expect(
+      getSaved(onSave).every((entry: CustomizableColumn<Monitor>) => {
+        return entry.isVisible;
+      }),
+    ).toBe(true);
+  });
+
+  test("Save reports the entries untouched when nothing was changed", () => {
+    const { view, onSave }: RenderedModal = renderModal();
+
+    fireEvent.click(view.getByTestId("modal-footer-submit-button"));
+
+    expect(getSavedIds(onSave)).toEqual([
+      "name",
+      "currentMonitorStatus",
+      "description",
+      "createdAt",
+    ]);
+    expect(
+      getSaved(onSave).map((entry: CustomizableColumn<Monitor>) => {
+        return entry.isVisible;
+      }),
+    ).toEqual([true, true, true, false]);
+  });
+
+  test("Escape closes the modal without saving", () => {
+    const { onSave, onClose }: RenderedModal = renderModal();
+
+    fireEvent.keyDown(document, { key: "Escape" });
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(onSave).not.toHaveBeenCalled();
+  });
+
+  test("the header close button closes without saving", () => {
+    const { view, onSave, onClose }: RenderedModal = renderModal();
+
+    fireEvent.click(view.getByTestId("column-toggle-description"));
+    fireEvent.click(view.getByTestId("close-button"));
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(onSave).not.toHaveBeenCalled();
+  });
+
+  test("a single-column table opens with everything locked down", () => {
+    const { view }: RenderedModal = renderModal({
+      columns: [
+        makeEntry({ id: "name", title: "Monitor Name", isVisible: true }),
+      ],
+    });
+
+    expect(view.getByTestId("column-toggle-name")).toBeDisabled();
+    expect(view.getByTestId("column-move-up-name")).toBeDisabled();
+    expect(view.getByTestId("column-move-down-name")).toBeDisabled();
+    expect(view.getByTestId("column-customization-show-all")).toBeDisabled();
+    expect(view.getByTestId("column-customization-hide-all")).toBeDisabled();
+    expect(view.getByTestId("column-customization-count")).toHaveTextContent(
+      "1 of 1 columns shown",
+    );
+  });
+
+  test("an empty column list renders without falling over", () => {
+    const { view }: RenderedModal = renderModal({ columns: [] });
+
+    expect(view.getByTestId("column-customization-modal")).toBeInTheDocument();
+    expect(view.queryAllByTestId(/^column-toggle-/)).toHaveLength(0);
+    expect(view.getByTestId("column-customization-count")).toHaveTextContent(
+      "0 of 0 columns shown",
+    );
+  });
+
+  test("columns with the same title are still addressed individually", () => {
+    const { view, onSave }: RenderedModal = renderModal({
+      columns: [
+        makeEntry({ id: "createdAt", title: "Date", isVisible: true }),
+        makeEntry({ id: "updatedAt", title: "Date", isVisible: true }),
+      ],
+    });
+
+    // The row is keyed by id, not by the title the viewer happens to see.
+    fireEvent.click(view.getByTestId("column-toggle-updatedAt"));
+    fireEvent.click(view.getByTestId("modal-footer-submit-button"));
+
+    expect(
+      getSaved(onSave).map((entry: CustomizableColumn<Monitor>) => {
+        return { id: entry.id, isVisible: entry.isVisible };
+      }),
+    ).toEqual([
+      { id: "createdAt", isVisible: true },
+      { id: "updatedAt", isVisible: false },
+    ]);
+  });
+
+  test("a column with no title is searchable without breaking the filter", () => {
+    const untitled: CustomizableColumn<Monitor> = makeEntry({
+      id: "untitled",
+      title: "",
+      isVisible: true,
+    });
+
+    const { view }: RenderedModal = renderModal({
+      columns: [
+        makeEntry({ id: "name", title: "Monitor Name", isVisible: true }),
+        untitled,
+      ],
+    });
+
+    expect(view.getAllByTestId(/^column-toggle-/)).toHaveLength(2);
+
+    typeSearch(view, "monitor");
+
+    // The untitled column simply does not match; it does not throw.
+    expect(view.getAllByTestId(/^column-toggle-/)).toHaveLength(1);
+    expect(view.getByTestId("column-toggle-name")).toBeInTheDocument();
+  });
+
+  test("Reset does not close the modal on the viewer's behalf", () => {
+    const { view, onReset, onClose }: RenderedModal = renderModal({
+      isDefaultLayout: false,
+    });
+
+    fireEvent.click(view.getByTestId("column-customization-reset"));
+
+    /*
+     * Closing is the caller's decision - it owns the stored layout and this
+     * modal only reports the click.
+     */
+    expect(onReset).toHaveBeenCalledTimes(1);
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  test("the props handed to Save are a fresh list, not the caller's array", () => {
+    const columns: Array<CustomizableColumn<Monitor>> = getDefaultColumns();
+    const { view, onSave }: RenderedModal = renderModal({ columns });
+
+    fireEvent.click(view.getByTestId("column-move-down-name"));
+    fireEvent.click(view.getByTestId("modal-footer-submit-button"));
+
+    // The caller's own array is left exactly as it was passed in.
+    expect(
+      columns.map((entry: CustomizableColumn<Monitor>) => {
+        return entry.id;
+      }),
+    ).toEqual(["name", "currentMonitorStatus", "description", "createdAt"]);
+    expect(getSaved(onSave)).not.toBe(columns);
+  });
 });

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

@@ -45,6 +45,13 @@ const dropdownDefinition: CustomFieldDefinition = {
   dropdownOptions: "Low\nHigh",
 };
 
+const coloredDropdownDefinition: CustomFieldDefinition = {
+  name: "Severity",
+  customFieldType: CustomFieldType.Dropdown,
+  dropdownOptions:
+    '[{"value":"Low","color":"#22c55e"},{"value":"High","color":"#ef4444"}]',
+};
+
 const multiSelectDefinition: CustomFieldDefinition = {
   name: "Teams",
   customFieldType: CustomFieldType.MultiSelectDropdown,
@@ -92,6 +99,16 @@ const getPlaceholder: GetPlaceholderFunction = (
   return container.querySelector("span.text-gray-400");
 };
 
+const requireElement: (
+  element: HTMLElement | null | undefined,
+) => HTMLElement = (element: HTMLElement | null | undefined): HTMLElement => {
+  if (!element) {
+    throw new Error("Expected custom field value badge to be rendered");
+  }
+
+  return element;
+};
+
 type ColumnAtFunction = (
   columns: Columns<Monitor>,
   index: number,
@@ -164,19 +181,25 @@ describe("CustomFieldColumns.parseDropdownOptions", () => {
      * inside an option label.
      */
     expect(parseDropdownOptions("Low\nMedium\nHigh")).toEqual([
-      "Low",
-      "Medium",
-      "High",
+      { value: "Low" },
+      { value: "Medium" },
+      { value: "High" },
     ]);
   });
 
   test("trims each option", () => {
-    expect(parseDropdownOptions("  Low  \n\tHigh\t")).toEqual(["Low", "High"]);
+    expect(parseDropdownOptions("  Low  \n\tHigh\t")).toEqual([
+      { value: "Low" },
+      { value: "High" },
+    ]);
   });
 
   test("drops blank and whitespace-only lines", () => {
     // A trailing newline in the textarea must not become an empty option.
-    expect(parseDropdownOptions("Low\n\n   \nHigh\n")).toEqual(["Low", "High"]);
+    expect(parseDropdownOptions("Low\n\n   \nHigh\n")).toEqual([
+      { value: "Low" },
+      { value: "High" },
+    ]);
   });
 
   test("returns an empty list for a blob that is only whitespace", () => {
@@ -184,7 +207,18 @@ describe("CustomFieldColumns.parseDropdownOptions", () => {
   });
 
   test("returns the single option when the blob has no newline at all", () => {
-    expect(parseDropdownOptions("Low")).toEqual(["Low"]);
+    expect(parseDropdownOptions("Low")).toEqual([{ value: "Low" }]);
+  });
+
+  test("parses colors from the structured representation", () => {
+    expect(
+      parseDropdownOptions(
+        '[{"value":"Low","color":"#22c55e"},{"value":"High","color":"#ef4444"}]',
+      ),
+    ).toEqual([
+      { value: "Low", color: "#22c55e" },
+      { value: "High", color: "#ef4444" },
+    ]);
   });
 
   test("returns an empty list for empty, null, undefined and non-string input", () => {
@@ -874,6 +908,64 @@ describe("CustomFieldColumns.renderCustomFieldValue", () => {
     expect(getBadgeLabels(container)).toEqual(["High"]);
   });
 
+  test("renders a dropdown value with its configured color", () => {
+    const container: HTMLElement = renderValue({
+      value: "High",
+      definition: coloredDropdownDefinition,
+    });
+    const badgeElement: HTMLElement | null = container.querySelector(
+      '[data-dropdown-value-badge="true"]',
+    );
+
+    expect(badgeElement).not.toBeNull();
+    expect(requireElement(badgeElement).textContent).toContain("High");
+    expect(requireElement(badgeElement).style.backgroundColor).toEqual(
+      "rgb(239, 68, 68)",
+    );
+    expect(requireElement(badgeElement).style.borderColor).toEqual("#ef4444");
+    expect(
+      requireElement(badgeElement).getAttribute("data-dropdown-value-color"),
+    ).toEqual("#ef4444");
+    expect(requireElement(badgeElement).style.color).toEqual(
+      "rgb(249, 250, 251)",
+    );
+  });
+
+  test("uses dark text on a light dropdown color", () => {
+    const container: HTMLElement = renderValue({
+      value: "Low",
+      definition: {
+        ...coloredDropdownDefinition,
+        dropdownOptions: '[{"value":"Low","color":"#fef08a"}]',
+      },
+    });
+
+    expect(
+      requireElement(
+        container.querySelector<HTMLElement>(
+          '[data-dropdown-value-badge="true"]',
+        ),
+      ).style.color,
+    ).toEqual("rgb(17, 24, 39)");
+  });
+
+  test("falls back to the uncolored badge for a saved value no longer in the options", () => {
+    const container: HTMLElement = renderValue({
+      value: "Critical",
+      definition: coloredDropdownDefinition,
+    });
+    const badgeElement: HTMLElement | null = container.querySelector(
+      '[data-dropdown-value-badge="true"]',
+    );
+
+    expect(
+      requireElement(badgeElement).classList.contains("bg-indigo-50"),
+    ).toBe(true);
+    expect(
+      requireElement(badgeElement).getAttribute("data-dropdown-value-color"),
+    ).toBeNull();
+  });
+
   test("renders one badge per multi-select value", () => {
     /*
      * One badge each rather than a single comma-joined badge: the table reads
@@ -887,6 +979,33 @@ describe("CustomFieldColumns.renderCustomFieldValue", () => {
     expect(getBadgeLabels(container)).toEqual(["Infra", "Apps"]);
   });
 
+  test("applies each configured color to the matching multi-select value", () => {
+    const container: HTMLElement = renderValue({
+      value: ["Infra", "Apps", "Legacy"],
+      definition: {
+        ...multiSelectDefinition,
+        dropdownOptions:
+          '[{"value":"Infra","color":"#0ea5e9"},{"value":"Apps","color":"#a855f7"}]',
+      },
+    });
+    const badges: Array<HTMLElement> = Array.from(
+      container.querySelectorAll<HTMLElement>(
+        '[data-dropdown-value-badge="true"]',
+      ),
+    );
+
+    expect(badges).toHaveLength(3);
+    expect(requireElement(badges[0]).style.backgroundColor).toEqual(
+      "rgb(14, 165, 233)",
+    );
+    expect(requireElement(badges[1]).style.backgroundColor).toEqual(
+      "rgb(168, 85, 247)",
+    );
+    expect(requireElement(badges[2]).classList.contains("bg-indigo-50")).toBe(
+      true,
+    );
+  });
+
   test("renders a bare string on a multi-select field as one badge", () => {
     /*
      * Tolerant on the way out: a value saved while the field was a