@oneuptime/common 12.0.15 → 12.0.17

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

@@ -0,0 +1,222 @@
+import "@testing-library/jest-dom";
+import { afterEach, describe, expect, test } from "@jest/globals";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import ActiveFilterChips from "../../../UI/Components/LogsViewer/components/ActiveFilterChips";
+import { ActiveFilter } from "../../../UI/Components/LogsViewer/types";
+import {
+  DICTIONARY_FILTER_OPERATOR_OPTIONS,
+  DictionaryEntryValue,
+  DictionaryFilterOperator,
+  DictionaryFilterOperatorOption,
+  buildDictionaryValue,
+} from "../../../UI/Components/Dictionary/DictionaryFilterOperator";
+import Includes from "../../../Types/BaseDatabase/Includes";
+import Search from "../../../Types/BaseDatabase/Search";
+
+/*
+ * The reported crash, at the exact component that threw it.
+ *
+ * A log monitor's attribute filters are pinned into the logs preview as
+ * read-only chips. Once the filter rows gained an operator dropdown, every
+ * operator except `=` stored an operator *object* as the value, and the chip
+ * rendered that value straight into a <span>. React answers an object child
+ * by throwing:
+ *
+ *   Objects are not valid as a React child (found: object with keys {_values})
+ *
+ * `{_values}` is an `Includes` — the "is any of" operator. Because the
+ * preview lives inside the Edit Monitor modal, the throw took the whole form
+ * down to an error card and the Save button with it.
+ *
+ * `ActiveFilter.displayValue` is typed `string`, so these tests deliberately
+ * cast an object in: the chips are built from query objects that reach the
+ * viewer through `as` casts, which is how the untyped value got here in the
+ * first place. The component must not be the thing that breaks.
+ */
+
+afterEach(() => {
+  cleanup();
+});
+
+function chipWithValue(
+  value: unknown,
+  overrides: Partial<ActiveFilter> = {},
+): ActiveFilter {
+  const filter: ActiveFilter = {
+    facetKey: "attributes.logtype",
+    value: value as string,
+    displayKey: "logtype",
+    displayValue: value as string,
+    readOnly: true,
+    ...overrides,
+  };
+
+  return filter;
+}
+
+function renderChips(filters: Array<ActiveFilter>): void {
+  render(
+    <ActiveFilterChips
+      filters={filters}
+      onRemove={() => {}}
+      onClearAll={() => {}}
+    />,
+  );
+}
+
+describe("ActiveFilterChips given operator-valued filters", () => {
+  test("an Includes value renders instead of throwing — the reported crash", () => {
+    expect(() => {
+      renderChips([chipWithValue(new Includes(["web"]))]);
+    }).not.toThrow();
+
+    expect(screen.getByText("logtype:")).toBeInTheDocument();
+    expect(screen.getByText("is any of web")).toBeInTheDocument();
+  });
+
+  test("a Search value renders as readable text", () => {
+    renderChips([chipWithValue(new Search<string>("web"))]);
+
+    expect(screen.getByText("contains web")).toBeInTheDocument();
+  });
+
+  test("the object never reaches the DOM as [object Object]", () => {
+    renderChips([chipWithValue(new Includes(["web", "api"]))]);
+
+    expect(document.body.textContent).not.toContain("[object Object]");
+    expect(document.body.textContent).toContain("is any of web, api");
+  });
+
+  test("the tooltip is text too, not a stringified object", () => {
+    renderChips([chipWithValue(new Search<string>("web"))]);
+
+    const chip: HTMLElement | null = document.querySelector(
+      "[title*='applied filter']",
+    );
+
+    expect(chip).not.toBeNull();
+    expect(chip!.getAttribute("title")).toBe(
+      "logtype: contains web (applied filter)",
+    );
+  });
+
+  test("removable chips survive an operator value as well as read-only ones", () => {
+    /*
+     * The two rendering paths are separate branches in the component; the
+     * removable one also builds a "Remove ..." tooltip out of the value.
+     */
+    expect(() => {
+      renderChips([chipWithValue(new Includes(["web"]), { readOnly: false })]);
+    }).not.toThrow();
+
+    expect(screen.getByText("is any of web")).toBeInTheDocument();
+
+    const removeButton: HTMLElement | null =
+      document.querySelector("[title^='Remove ']");
+
+    expect(removeButton!.getAttribute("title")).toBe(
+      "Remove logtype: is any of web",
+    );
+  });
+
+  test("clicking Remove hands the handler a string, not the operator object", () => {
+    /*
+     * Rendering is only half the backstop. `value` is what the viewer deletes
+     * out of its Set<string> of applied filters
+     * (DashboardLogsViewer.handleRemoveFilter), so an object here renders a
+     * perfectly good chip that then cannot be removed — Set.delete(object) on
+     * a set of strings is a silent no-op.
+     */
+    const removed: Array<[string, unknown]> = [];
+
+    render(
+      <ActiveFilterChips
+        filters={[chipWithValue(new Includes(["web"]), { readOnly: false })]}
+        onRemove={(facetKey: string, value: string) => {
+          removed.push([facetKey, value]);
+        }}
+        onClearAll={() => {}}
+      />,
+    );
+
+    fireEvent.click(document.querySelector("[title^='Remove ']")!);
+
+    expect(removed).toHaveLength(1);
+    expect(removed[0]![0]).toBe("attributes.logtype");
+    expect(typeof removed[0]![1]).toBe("string");
+    expect(removed[0]![1]).toBe("is any of web");
+  });
+
+  test("an ordinary string chip's remove argument is untouched", () => {
+    const removed: Array<unknown> = [];
+
+    render(
+      <ActiveFilterChips
+        filters={[
+          {
+            facetKey: "severityText",
+            value: "Error",
+            displayKey: "Severity",
+            displayValue: "Error",
+          },
+        ]}
+        onRemove={(_facetKey: string, value: string) => {
+          removed.push(value);
+        }}
+        onClearAll={() => {}}
+      />,
+    );
+
+    fireEvent.click(document.querySelector("[title^='Remove ']")!);
+
+    expect(removed).toEqual(["Error"]);
+  });
+
+  test.each(
+    DICTIONARY_FILTER_OPERATOR_OPTIONS.map(
+      (option: DictionaryFilterOperatorOption) => {
+        return [option.operator, option] as [
+          DictionaryFilterOperator,
+          DictionaryFilterOperatorOption,
+        ];
+      },
+    ),
+  )(
+    "a chip built from the %s operator renders",
+    (
+      operator: DictionaryFilterOperator,
+      option: DictionaryFilterOperatorOption,
+    ) => {
+      /*
+       * Steve reported it on the operators he happened to try. The defect was
+       * in all of them, so walk the whole dropdown.
+       */
+      const stored: DictionaryEntryValue = buildDictionaryValue({
+        operator,
+        rawValue: option.expectsNumericValue ? "5" : "web",
+        rawValues: ["web", "api"],
+      });
+
+      expect(() => {
+        renderChips([chipWithValue(stored)]);
+      }).not.toThrow();
+
+      expect(document.body.textContent).not.toContain("[object Object]");
+    },
+  );
+
+  test("ordinary string chips are untouched", () => {
+    renderChips([
+      {
+        facetKey: "severityText",
+        value: "Error",
+        displayKey: "Severity",
+        displayValue: "Error",
+      },
+    ]);
+
+    expect(screen.getByText("Severity:")).toBeInTheDocument();
+    expect(screen.getByText("Error")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,296 @@
+import "@testing-library/jest-dom";
+import { renderHook } from "@testing-library/react";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+
+/*
+ * The bulk-action hooks were the widest hole left in the table gating.
+ *
+ * BaseModelTable checks delete permission before it auto-injects the bulk
+ * Delete, but it spreads whatever the caller passed in `bulkActions.buttons`
+ * straight through untouched - and these three hooks are what nearly every
+ * table passes. So a viewer could select every row on a table that correctly
+ * refused them a per-row Edit, and still relabel, reassign or archive the lot
+ * from the action bar.
+ *
+ * Labels and archive state live on the record, so those are updates.
+ * Ownership lives in a junction table, so adding an owner is a create there
+ * and removing one is a delete - which is why the owner hook checks two
+ * different permissions rather than one.
+ */
+
+let isMasterAdminForTest: boolean = false;
+let permissionsForTest: Array<unknown> = [];
+
+jest.mock("../../../UI/Utils/Permission", () => {
+  return {
+    __esModule: true,
+    default: {
+      getAllPermissions: (): Array<unknown> => {
+        return permissionsForTest;
+      },
+      getProjectPermissions: (): null => {
+        return null;
+      },
+      getGlobalPermissions: (): { globalPermissions: Array<unknown> } => {
+        return { globalPermissions: [...permissionsForTest] };
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/User", () => {
+  return {
+    __esModule: true,
+    default: {
+      isMasterAdmin: (): boolean => {
+        return isMasterAdminForTest;
+      },
+      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;
+        },
+      };
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      getList: async (): Promise<{
+        data: Array<unknown>;
+        count: number;
+        skip: number;
+        limit: number;
+      }> => {
+        return { data: [], count: 0, skip: 0, limit: 10 };
+      },
+      getItem: async (): Promise<null> => {
+        return null;
+      },
+      updateById: async (): Promise<void> => {
+        return undefined;
+      },
+      deleteItem: async (): Promise<void> => {
+        return undefined;
+      },
+      create: async (): Promise<null> => {
+        return null;
+      },
+    },
+  };
+});
+
+import useBulkLabelActions, {
+  BulkLabelActionsResult,
+} from "../../../UI/Components/BulkUpdate/BulkLabelActions";
+import useBulkArchiveActions, {
+  BulkArchiveActionsResult,
+} from "../../../UI/Components/BulkUpdate/BulkArchiveActions";
+import useBulkOwnerActions, {
+  BulkOwnerActionsResult,
+} from "../../../UI/Components/BulkUpdate/BulkOwnerActions";
+import { BulkActionButtonSchema } from "../../../UI/Components/BulkUpdate/BulkUpdateForm";
+import PermissionGate from "../../../UI/Utils/PermissionGate";
+import Monitor from "../../../Models/DatabaseModels/Monitor";
+import MonitorOwnerUser from "../../../Models/DatabaseModels/MonitorOwnerUser";
+import MonitorOwnerTeam from "../../../Models/DatabaseModels/MonitorOwnerTeam";
+import PodmanHost from "../../../Models/DatabaseModels/PodmanHost";
+import Permission from "../../../Types/Permission";
+
+type FindActionFunction = (
+  actions: Array<BulkActionButtonSchema<never>>,
+  title: string,
+) => BulkActionButtonSchema<never> | undefined;
+
+const findAction: FindActionFunction = (
+  actions: Array<BulkActionButtonSchema<never>>,
+  title: string,
+): BulkActionButtonSchema<never> | undefined => {
+  return actions.find((action: BulkActionButtonSchema<never>) => {
+    return action.title === title;
+  });
+};
+
+describe("bulk action permission gating", () => {
+  beforeEach(() => {
+    isMasterAdminForTest = false;
+    permissionsForTest = [];
+    PermissionGate.clearPermissionPropsCache();
+    window.localStorage.clear();
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe("useBulkLabelActions", () => {
+    type RenderFunction = () => BulkLabelActionsResult<Monitor>;
+
+    const renderActions: RenderFunction =
+      (): BulkLabelActionsResult<Monitor> => {
+        return renderHook(() => {
+          return useBulkLabelActions<Monitor>({ modelType: Monitor });
+        }).result.current;
+      };
+
+    test("leaves the label actions working for someone who may update", () => {
+      permissionsForTest = [Permission.ProjectAdmin];
+
+      const actions: Array<BulkActionButtonSchema<never>> = renderActions()
+        .bulkActions as unknown as Array<BulkActionButtonSchema<never>>;
+
+      expect(findAction(actions, "Add Labels")?.disabled).toBeFalsy();
+      expect(findAction(actions, "Remove Labels")?.disabled).toBeFalsy();
+    });
+
+    test("locks both label actions for a viewer, with a reason", () => {
+      permissionsForTest = [Permission.Viewer];
+
+      const actions: Array<BulkActionButtonSchema<never>> = renderActions()
+        .bulkActions as unknown as Array<BulkActionButtonSchema<never>>;
+
+      for (const title of ["Add Labels", "Remove Labels"]) {
+        const action: BulkActionButtonSchema<never> | undefined = findAction(
+          actions,
+          title,
+        );
+
+        expect(action?.disabled).toBe(true);
+        expect(action?.tooltip).toContain(
+          "You do not have permission to update this Monitor.",
+        );
+      }
+    });
+
+    /*
+     * The actions still have to be handed to the table - Table derives the row
+     * checkboxes from this array being non-empty, and a viewer losing the
+     * selection column would be a layout change nobody asked for.
+     */
+    test("keeps the actions in the array rather than dropping them", () => {
+      permissionsForTest = [Permission.Viewer];
+
+      expect(renderActions().bulkActions.length).toBe(2);
+    });
+
+    test("leaves them working for a master admin", () => {
+      isMasterAdminForTest = true;
+      permissionsForTest = [];
+
+      const actions: Array<BulkActionButtonSchema<never>> = renderActions()
+        .bulkActions as unknown as Array<BulkActionButtonSchema<never>>;
+
+      expect(findAction(actions, "Add Labels")?.disabled).toBeFalsy();
+    });
+  });
+
+  describe("useBulkArchiveActions", () => {
+    type RenderFunction = () => BulkArchiveActionsResult<PodmanHost>;
+
+    const renderActions: RenderFunction =
+      (): BulkArchiveActionsResult<PodmanHost> => {
+        return renderHook(() => {
+          return useBulkArchiveActions<PodmanHost>({
+            modelType: PodmanHost,
+          });
+        }).result.current;
+      };
+
+    test("locks Archive and Unarchive for a viewer", () => {
+      permissionsForTest = [Permission.Viewer];
+
+      const result: BulkArchiveActionsResult<PodmanHost> = renderActions();
+
+      expect(result.archiveBulkActions[0]?.disabled).toBe(true);
+      expect(result.archiveBulkActions[0]?.tooltip).toContain(
+        "You do not have permission to update",
+      );
+      expect(result.unarchiveBulkActions[0]?.disabled).toBe(true);
+    });
+
+    test("leaves them working for someone who may update", () => {
+      permissionsForTest = [Permission.ProjectAdmin];
+
+      const result: BulkArchiveActionsResult<PodmanHost> = renderActions();
+
+      expect(result.archiveBulkActions[0]?.disabled).toBeFalsy();
+      expect(result.unarchiveBulkActions[0]?.disabled).toBeFalsy();
+    });
+  });
+
+  describe("useBulkOwnerActions", () => {
+    type RenderFunction = () => BulkOwnerActionsResult<Monitor>;
+
+    const renderActions: RenderFunction =
+      (): BulkOwnerActionsResult<Monitor> => {
+        return renderHook(() => {
+          return useBulkOwnerActions<Monitor>({
+            ownerUserModelType: MonitorOwnerUser,
+            ownerTeamModelType: MonitorOwnerTeam,
+            resourceIdField: "monitorId",
+          });
+        }).result.current;
+      };
+
+    test("locks adding and removing owners for a viewer", () => {
+      permissionsForTest = [Permission.Viewer];
+
+      const actions: Array<BulkActionButtonSchema<never>> = renderActions()
+        .bulkActions as unknown as Array<BulkActionButtonSchema<never>>;
+
+      expect(findAction(actions, "Add Owner")?.disabled).toBe(true);
+      expect(findAction(actions, "Remove Owner")?.disabled).toBe(true);
+    });
+
+    /*
+     * Add and Remove are checked against different permissions on the junction
+     * table, so a grant that covers one need not cover the other.
+     */
+    test("checks Add against create and Remove against delete", () => {
+      permissionsForTest = [Permission.Viewer];
+
+      const actions: Array<BulkActionButtonSchema<never>> = renderActions()
+        .bulkActions as unknown as Array<BulkActionButtonSchema<never>>;
+
+      expect(findAction(actions, "Add Owner")?.tooltip).toContain(
+        "permission to create",
+      );
+      expect(findAction(actions, "Remove Owner")?.tooltip).toContain(
+        "permission to delete",
+      );
+    });
+
+    test("leaves them working for someone who may manage owners", () => {
+      permissionsForTest = [Permission.ProjectAdmin];
+
+      const actions: Array<BulkActionButtonSchema<never>> = renderActions()
+        .bulkActions as unknown as Array<BulkActionButtonSchema<never>>;
+
+      expect(findAction(actions, "Add Owner")?.disabled).toBeFalsy();
+      expect(findAction(actions, "Remove Owner")?.disabled).toBeFalsy();
+    });
+  });
+});