@oneuptime/common 14.0.10 → 14.0.11

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

@@ -0,0 +1,270 @@
+import { describe, expect, test } from "@jest/globals";
+import {
+  DEFAULT_FACET_EMPTY_STATE_TEXT,
+  getFacetValuesInScope,
+  getScopedHiddenFacetEmptyStateText,
+  getSidebarFacetEmptyStateText,
+  hasLockedTelemetryScope,
+} from "../../../UI/Components/TelemetryViewer/FacetVisibility";
+import {
+  ActiveFilter,
+  FacetData,
+} from "../../../UI/Components/TelemetryViewer/types";
+
+/*
+ * A viewer pinned to one scope — a database's Logs tab — listed the
+ * project's WHOLE catalog in its sidebar: fifty databases and thirty
+ * services at count 0 beside the one database the page is about. Resource
+ * facets arrive as the Postgres list with ClickHouse counts merged in, so on
+ * a scoped page every other resource shows up at 0 and picking it can only
+ * empty the list. These pin the pure rules the two sidebars share:
+ *
+ *  - a locked chip means "scoped"; nothing else does;
+ *  - under a scope, a value with count 0 is dropped unless it is selected;
+ *  - a facet emptied that way keeps its key (the sidebar folds it), and a
+ *    facet with nothing to drop keeps its very array;
+ *  - an empty resource facet under a scope says "in this time range", never
+ *    "in this project" (the project may well have such resources).
+ */
+
+function locked(value: string): ActiveFilter {
+  return {
+    facetKey: "entityKeys",
+    value: value,
+    displayKey: "Database",
+    displayValue: "orders-db",
+    readOnly: true,
+  };
+}
+
+function removable(value: string): ActiveFilter {
+  return {
+    facetKey: "severityText",
+    value: value,
+    displayKey: "Severity",
+    displayValue: value,
+  };
+}
+
+describe("hasLockedTelemetryScope", () => {
+  test("no chips, or only removable ones, is not a scope", () => {
+    expect(hasLockedTelemetryScope(undefined)).toBe(false);
+    expect(hasLockedTelemetryScope(null)).toBe(false);
+    expect(hasLockedTelemetryScope([])).toBe(false);
+    expect(hasLockedTelemetryScope([removable("Error")])).toBe(false);
+    expect(
+      hasLockedTelemetryScope([{ ...removable("Error"), readOnly: false }]),
+    ).toBe(false);
+  });
+
+  test("any locked chip is a scope", () => {
+    expect(hasLockedTelemetryScope([locked("database:1")])).toBe(true);
+    expect(
+      hasLockedTelemetryScope([removable("Error"), locked("database:1")]),
+    ).toBe(true);
+  });
+
+  test("tolerates junk entries rather than throwing inside a render", () => {
+    expect(
+      hasLockedTelemetryScope([
+        null as unknown as ActiveFilter,
+        undefined as unknown as ActiveFilter,
+        locked("database:1"),
+      ]),
+    ).toBe(true);
+    expect(
+      hasLockedTelemetryScope("chips" as unknown as Array<ActiveFilter>),
+    ).toBe(false);
+  });
+});
+
+describe("getFacetValuesInScope", () => {
+  const CATALOG: FacetData = {
+    primaryEntityId: [
+      { value: "svc-agent", count: 24, displayName: "kubernetes-agent" },
+      { value: "svc-collector", count: 0, displayName: "collector" },
+      { value: "svc-fluentbit", count: 0, displayName: "fluentbit-gke" },
+    ],
+    databaseServerId: [
+      { value: "db-clickhouse", count: 0, displayName: "ClickHouse" },
+      { value: "db-redis", count: 0, displayName: "Redis" },
+    ],
+    severityText: [{ value: "Information", count: 24 }],
+  };
+
+  test("keeps only values with rows in the scope", () => {
+    expect(
+      getFacetValuesInScope({ facetData: CATALOG, activeValuesByKey: {} }),
+    ).toEqual({
+      primaryEntityId: [
+        { value: "svc-agent", count: 24, displayName: "kubernetes-agent" },
+      ],
+      databaseServerId: [],
+      severityText: [{ value: "Information", count: 24 }],
+    });
+  });
+
+  test("a facet with nothing to drop keeps its very array", () => {
+    const result: FacetData = getFacetValuesInScope({
+      facetData: CATALOG,
+      activeValuesByKey: {},
+    });
+
+    expect(result["severityText"]).toBe(CATALOG["severityText"]);
+    expect(result["primaryEntityId"]).not.toBe(CATALOG["primaryEntityId"]);
+  });
+
+  test("a selected value survives at 0, so it can be cleared", () => {
+    const result: FacetData = getFacetValuesInScope({
+      facetData: CATALOG,
+      activeValuesByKey: {
+        databaseServerId: new Set<string>(["db-redis"]),
+      },
+    });
+
+    expect(result["databaseServerId"]).toEqual([
+      { value: "db-redis", count: 0, displayName: "Redis" },
+    ]);
+  });
+
+  test("a selection only protects values of its own facet", () => {
+    const result: FacetData = getFacetValuesInScope({
+      facetData: CATALOG,
+      activeValuesByKey: {
+        primaryEntityId: new Set<string>(["db-redis"]),
+      },
+    });
+
+    expect(result["databaseServerId"]).toEqual([]);
+  });
+
+  test("counts that are not positive numbers are not rows", () => {
+    const facetData: FacetData = {
+      hostId: [
+        { value: "negative", count: -1 },
+        { value: "nan", count: Number.NaN },
+        { value: "infinite", count: Number.POSITIVE_INFINITY },
+        { value: "missing", count: undefined as unknown as number },
+        { value: "string-zero", count: "0" as unknown as number },
+        { value: "string-three", count: "3" as unknown as number },
+        { value: "fraction", count: 0.5 },
+      ],
+    };
+
+    expect(
+      getFacetValuesInScope({ facetData: facetData, activeValuesByKey: {} })[
+        "hostId"
+      ]!.map((value: { value: string }): string => {
+        return value.value;
+      }),
+    ).toEqual(["string-three", "fraction"]);
+  });
+
+  test("keeps the order the server sent", () => {
+    const facetData: FacetData = {
+      hostId: [
+        { value: "c", count: 1 },
+        { value: "x", count: 0 },
+        { value: "a", count: 9 },
+        { value: "b", count: 3 },
+      ],
+    };
+
+    expect(
+      getFacetValuesInScope({ facetData: facetData, activeValuesByKey: {} })[
+        "hostId"
+      ]!.map((value: { value: string }): string => {
+        return value.value;
+      }),
+    ).toEqual(["c", "a", "b"]);
+  });
+
+  test("leaves the input untouched", () => {
+    const snapshot: string = JSON.stringify(CATALOG);
+
+    getFacetValuesInScope({ facetData: CATALOG, activeValuesByKey: {} });
+
+    expect(JSON.stringify(CATALOG)).toBe(snapshot);
+    expect(CATALOG["databaseServerId"]).toHaveLength(2);
+  });
+
+  test("an empty response stays empty, and junk entries pass through", () => {
+    expect(
+      getFacetValuesInScope({ facetData: {}, activeValuesByKey: {} }),
+    ).toEqual({});
+
+    const facetData: FacetData = {
+      broken: undefined as unknown as FacetData[string],
+      hostId: [
+        null as unknown as FacetData[string][number],
+        { value: "h-1", count: 2 },
+      ],
+    };
+
+    const result: FacetData = getFacetValuesInScope({
+      facetData: facetData,
+      activeValuesByKey: {},
+    });
+
+    expect(result["broken"]).toBeUndefined();
+    expect(Object.prototype.hasOwnProperty.call(result, "broken")).toBe(true);
+    expect(result["hostId"]).toEqual([{ value: "h-1", count: 2 }]);
+  });
+});
+
+describe("empty-state wording under a scope", () => {
+  test("a resource facet says 'in this time range', not 'in this project'", () => {
+    expect(getScopedHiddenFacetEmptyStateText("Databases")).toBe(
+      "No Databases in this time range",
+    );
+    expect(
+      getSidebarFacetEmptyStateText({
+        isHideable: true,
+        emptyStateNoun: "Databases",
+        isScoped: true,
+      }),
+    ).toBe("No Databases in this time range");
+  });
+
+  test("without a noun it falls back to the default sentence", () => {
+    expect(getScopedHiddenFacetEmptyStateText(undefined)).toBe(
+      DEFAULT_FACET_EMPTY_STATE_TEXT,
+    );
+    expect(getScopedHiddenFacetEmptyStateText("   ")).toBe(
+      DEFAULT_FACET_EMPTY_STATE_TEXT,
+    );
+  });
+
+  test("unscoped wording is unchanged", () => {
+    expect(
+      getSidebarFacetEmptyStateText({
+        isHideable: true,
+        emptyStateNoun: "Databases",
+      }),
+    ).toBe("No Databases in this project");
+    expect(
+      getSidebarFacetEmptyStateText({
+        isHideable: true,
+        emptyStateNoun: "Databases",
+        isScoped: false,
+      }),
+    ).toBe("No Databases in this project");
+  });
+
+  test("a non-resource facet keeps the section's default either way", () => {
+    expect(
+      getSidebarFacetEmptyStateText({ isHideable: false, isScoped: true }),
+    ).toBeUndefined();
+  });
+
+  test("a search result still reads as one, scope or not", () => {
+    expect(
+      getSidebarFacetEmptyStateText({
+        isHideable: true,
+        emptyStateNoun: "Databases",
+        isScoped: true,
+        searchedAtArrivalText: "redis",
+      }),
+    ).toBe("No matches for “redis”");
+  });
+});

package/Tests/UI/Components/Forms/FormFieldCodeEditors.test.tsx

@@ -0,0 +1,294 @@
+import "@testing-library/jest-dom";
+import React from "react";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+} from "@testing-library/react";
+import { afterEach, describe, expect, test } from "@jest/globals";
+import FormField from "../../../../UI/Components/Forms/Fields/FormField";
+import Field from "../../../../UI/Components/Forms/Types/Field";
+import FormFieldSchemaType from "../../../../UI/Components/Forms/Types/FormFieldSchemaType";
+import FormValues from "../../../../UI/Components/Forms/Types/FormValues";
+import { JSONObject } from "../../../../Types/JSON";
+
+/*
+ * Every code-typed form field - JSON, YAML, HTML, CSS, JavaScript - renders
+ * the one CodeEditor, with the grammar picked off the field type, the
+ * field's label naming it, the form's error in its status bar, and the
+ * form's touched/value bookkeeping wired to real events.
+ */
+
+interface TestEntity extends JSONObject {
+  config?: string;
+}
+
+interface RenderOptions {
+  fieldType: FormFieldSchemaType;
+  value?: string | undefined;
+  overrides?: Partial<Field<TestEntity>> | undefined;
+  error?: string | undefined;
+  touched?: boolean | undefined;
+  setFieldTouched?: ((name: string, value: boolean) => void) | undefined;
+  setFieldValue?: ((name: string, value: unknown) => void) | undefined;
+}
+
+type RenderFieldFunction = (options: RenderOptions) => void;
+
+const renderField: RenderFieldFunction = (options: RenderOptions): void => {
+  const field: Field<TestEntity> = {
+    title: "Config",
+    description: "The configuration.",
+    name: "config",
+    field: { config: true },
+    fieldType: options.fieldType,
+    required: false,
+    ...(options.overrides || {}),
+  } as Field<TestEntity>;
+
+  render(
+    <FormField<TestEntity>
+      field={field}
+      fieldName="config"
+      index={0}
+      isDisabled={false}
+      error={options.error || ""}
+      touched={Boolean(options.touched)}
+      currentValues={{ config: options.value ?? "" } as FormValues<TestEntity>}
+      setFieldTouched={options.setFieldTouched || ((): void => {})}
+      setFieldValue={
+        (options.setFieldValue as (name: string, value: unknown) => void) ||
+        ((): void => {})
+      }
+    />,
+  );
+};
+
+type GetInputFunction = () => HTMLTextAreaElement;
+
+const getInput: GetInputFunction = (): HTMLTextAreaElement => {
+  return screen.getByTestId("code-editor-input") as HTMLTextAreaElement;
+};
+
+type StatusTextFunction = () => string;
+
+const statusText: StatusTextFunction = (): string => {
+  return screen.getByTestId("code-editor-status").textContent || "";
+};
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("FormField — code fields render the code editor", () => {
+  test.each([
+    [FormFieldSchemaType.JSON, "json", "JSON"],
+    [FormFieldSchemaType.HTML, "html", "HTML"],
+    [FormFieldSchemaType.CSS, "css", "CSS"],
+    [FormFieldSchemaType.JavaScript, "javascript", "JavaScript"],
+    [FormFieldSchemaType.YAML, "yaml", "YAML"],
+  ])(
+    "a %s field is a %s code editor",
+    (fieldType: FormFieldSchemaType, codeType: string, label: string) => {
+      renderField({ fieldType, value: "" });
+
+      expect(document.querySelectorAll("[data-code-type]")).toHaveLength(1);
+      expect(document.querySelector("[data-code-type]")).toHaveAttribute(
+        "data-code-type",
+        codeType,
+      );
+      expect(screen.getByTestId("code-editor-language")).toHaveTextContent(
+        label,
+      );
+    },
+  );
+
+  test("a YAML field is wrapped in the YAML editor", () => {
+    renderField({ fieldType: FormFieldSchemaType.YAML, value: "a: 1" });
+
+    expect(screen.getByTestId("yaml-editor")).toContainElement(getInput());
+  });
+
+  test.each([
+    FormFieldSchemaType.JSON,
+    FormFieldSchemaType.HTML,
+    FormFieldSchemaType.CSS,
+    FormFieldSchemaType.JavaScript,
+    FormFieldSchemaType.YAML,
+  ])(
+    "the %s field's current value is in the editor",
+    (fieldType: FormFieldSchemaType) => {
+      renderField({ fieldType, value: "body { color: red; }" });
+
+      expect(getInput().value).toBe("body { color: red; }");
+    },
+  );
+
+  test.each([
+    FormFieldSchemaType.JSON,
+    FormFieldSchemaType.HTML,
+    FormFieldSchemaType.CSS,
+    FormFieldSchemaType.JavaScript,
+    FormFieldSchemaType.YAML,
+  ])(
+    "the %s field's label names the textarea",
+    (fieldType: FormFieldSchemaType) => {
+      renderField({ fieldType, value: "" });
+
+      expect(screen.getByRole("textbox", { name: /^Config/ })).toBe(getInput());
+      expect(getInput()).not.toHaveAttribute("aria-label");
+    },
+  );
+
+  test("the dataTestId the page sets reaches the editor", () => {
+    renderField({
+      fieldType: FormFieldSchemaType.JSON,
+      value: "{}",
+      overrides: { dataTestId: "allowed-origins" },
+    });
+
+    expect(screen.getByTestId("allowed-origins")).toContainElement(getInput());
+  });
+
+  test("the field's placeholder is drawn in the empty editor, never written into it", () => {
+    renderField({
+      fieldType: FormFieldSchemaType.JSON,
+      value: "",
+      overrides: { placeholder: '["https://app.example.com"]' },
+    });
+
+    expect(getInput().value).toBe("");
+    expect(
+      document.querySelector(".ou-code-editor__placeholder")?.textContent,
+    ).toBe('["https://app.example.com"]');
+  });
+});
+
+describe("FormField — a JSON field's status agrees with the form's own check", () => {
+  test("a plain JSON field reports JSON5 syntax as an error", () => {
+    renderField({ fieldType: FormFieldSchemaType.JSON, value: "{a: 1,}" });
+
+    expect(statusText()).toBe(
+      "Property names must be wrapped in double quotes (line 1, column 2)",
+    );
+  });
+
+  /*
+   * Some workflow arguments are read back with JSON5, and the form validates
+   * them that way (field.allowJSON5); the editor must not flag what Save
+   * accepts.
+   */
+  test("a field read with JSON5 judges the same text valid", () => {
+    renderField({
+      fieldType: FormFieldSchemaType.JSON,
+      value: "{a: 1,}",
+      overrides: { allowJSON5: true },
+    });
+
+    expect(statusText()).toBe("Valid JSON · 1 line");
+  });
+});
+
+describe("FormField — errors and touched state", () => {
+  test.each([
+    FormFieldSchemaType.JSON,
+    FormFieldSchemaType.HTML,
+    FormFieldSchemaType.CSS,
+    FormFieldSchemaType.JavaScript,
+    FormFieldSchemaType.YAML,
+  ])(
+    "a touched %s field shows the form's error once and is marked invalid",
+    (fieldType: FormFieldSchemaType) => {
+      renderField({
+        fieldType,
+        value: "x",
+        error: "Config is required.",
+        touched: true,
+      });
+
+      expect(statusText()).toBe("Config is required.");
+      expect(screen.getAllByText("Config is required.")).toHaveLength(1);
+      expect(getInput()).toHaveAttribute("aria-invalid", "true");
+    },
+  );
+
+  test("an untouched field keeps the form's error to itself", () => {
+    renderField({
+      fieldType: FormFieldSchemaType.JSON,
+      value: "{}",
+      error: "Config is required.",
+      touched: false,
+    });
+
+    expect(statusText()).toBe("Valid JSON · 1 line");
+    expect(getInput()).not.toHaveAttribute("aria-invalid");
+  });
+
+  test.each([
+    FormFieldSchemaType.JSON,
+    FormFieldSchemaType.HTML,
+    FormFieldSchemaType.CSS,
+    FormFieldSchemaType.JavaScript,
+    FormFieldSchemaType.YAML,
+  ])(
+    "a %s field is touched on blur, not on every keystroke",
+    (fieldType: FormFieldSchemaType) => {
+      const setFieldTouched: jest.Mock = jest.fn();
+
+      renderField({ fieldType, value: "", setFieldTouched });
+
+      act(() => {
+        getInput().focus();
+      });
+      fireEvent.change(getInput(), { target: { value: "a" } });
+      fireEvent.change(getInput(), { target: { value: "ab" } });
+
+      expect(setFieldTouched).not.toHaveBeenCalled();
+
+      fireEvent.blur(getInput());
+
+      expect(setFieldTouched).toHaveBeenCalledTimes(1);
+      expect(setFieldTouched).toHaveBeenCalledWith("config", true);
+    },
+  );
+
+  test.each([
+    FormFieldSchemaType.JSON,
+    FormFieldSchemaType.HTML,
+    FormFieldSchemaType.CSS,
+    FormFieldSchemaType.JavaScript,
+    FormFieldSchemaType.YAML,
+  ])("every %s edit reaches the form", (fieldType: FormFieldSchemaType) => {
+    const setFieldValue: jest.Mock = jest.fn();
+
+    renderField({ fieldType, value: "", setFieldValue });
+
+    fireEvent.change(getInput(), { target: { value: "[" } });
+    fireEvent.change(getInput(), { target: { value: "[1]" } });
+
+    expect(setFieldValue.mock.calls).toEqual([
+      ["config", "["],
+      ["config", "[1]"],
+    ]);
+  });
+
+  test("an edit the editor makes itself reaches the form too", () => {
+    // Bracket pairing writes through the textarea, not through a keystroke.
+    const setFieldValue: jest.Mock = jest.fn();
+
+    renderField({
+      fieldType: FormFieldSchemaType.JSON,
+      value: "",
+      setFieldValue,
+    });
+
+    act(() => {
+      getInput().focus();
+    });
+    fireEvent.keyDown(getInput(), { key: "[" });
+
+    expect(setFieldValue).toHaveBeenLastCalledWith("config", "[]");
+  });
+});

package/Tests/UI/Components/Forms/FormFieldMarkdown.test.tsx

@@ -0,0 +1,126 @@
+import "@testing-library/jest-dom";
+import React from "react";
+import { cleanup, render, screen, within } from "@testing-library/react";
+import { afterEach, describe, expect, test } from "@jest/globals";
+import BasicForm from "../../../../UI/Components/Forms/BasicForm";
+import FormField from "../../../../UI/Components/Forms/Fields/FormField";
+import Field from "../../../../UI/Components/Forms/Types/Field";
+import Fields from "../../../../UI/Components/Forms/Types/Fields";
+import FormFieldSchemaType from "../../../../UI/Components/Forms/Types/FormFieldSchemaType";
+import FormValues from "../../../../UI/Components/Forms/Types/FormValues";
+import { JSONObject } from "../../../../Types/JSON";
+
+/*
+ * A Markdown field's editor uploads pasted, dropped and picked images to the
+ * File API, which needs a signed-in user. A form that people without a
+ * OneUptime account fill in turns that off with the field's
+ * allowImageUpload option; every other form keeps it on without saying so.
+ */
+
+interface TestEntity extends JSONObject {
+  description?: string;
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+const renderMarkdownField: (overrides?: Partial<Field<TestEntity>>) => void = (
+  overrides?: Partial<Field<TestEntity>>,
+): void => {
+  const field: Field<TestEntity> = {
+    title: "Description",
+    field: { description: true },
+    fieldType: FormFieldSchemaType.Markdown,
+    dataTestId: "description-editor",
+    ...overrides,
+  };
+
+  render(
+    <FormField<TestEntity>
+      field={field}
+      fieldName="description"
+      index={0}
+      isDisabled={false}
+      error=""
+      touched={false}
+      currentValues={{ description: "- a" } as FormValues<TestEntity>}
+      setFieldTouched={() => {}}
+      setFieldValue={() => {}}
+    />,
+  );
+};
+
+const editorToolbar: () => HTMLElement = (): HTMLElement => {
+  return screen.getByTestId("description-editor");
+};
+
+describe("FormField - a Markdown field's image upload", () => {
+  test("offers image upload when the field does not say", () => {
+    renderMarkdownField();
+
+    expect(within(editorToolbar()).getByTitle("Image")).toBeInTheDocument();
+    expect(editorToolbar().querySelector('input[type="file"]')).not.toBeNull();
+  });
+
+  test("offers image upload when the field turns it on", () => {
+    renderMarkdownField({ allowImageUpload: true });
+
+    expect(within(editorToolbar()).getByTitle("Image")).toBeInTheDocument();
+  });
+
+  test("hands allowImageUpload: false to the editor", () => {
+    renderMarkdownField({ allowImageUpload: false });
+
+    expect(within(editorToolbar()).queryByTitle("Image")).toBeNull();
+    expect(editorToolbar().querySelector('input[type="file"]')).toBeNull();
+    // Only the image controls go; the rest of the editor is there.
+    expect(within(editorToolbar()).getByTitle("Link")).toBeInTheDocument();
+    expect(
+      within(editorToolbar()).getByTitle("Indent (Tab)"),
+    ).toBeInTheDocument();
+    expect(editorToolbar().querySelector("li")?.textContent).toBe("a");
+  });
+});
+
+describe("BasicForm - a Markdown field on a form open to anyone", () => {
+  test("renders its editor without image upload", () => {
+    const fields: Fields<TestEntity> = [
+      {
+        title: "Title",
+        field: { title: true } as Field<TestEntity>["field"],
+        fieldType: FormFieldSchemaType.Text,
+        required: true,
+      },
+      {
+        title: "Description",
+        field: { description: true },
+        fieldType: FormFieldSchemaType.Markdown,
+        allowImageUpload: false,
+        dataTestId: "public-description",
+      },
+      {
+        title: "Internal notes",
+        field: { notes: true } as Field<TestEntity>["field"],
+        fieldType: FormFieldSchemaType.Markdown,
+        dataTestId: "internal-notes",
+      },
+    ];
+
+    render(
+      <BasicForm
+        id="public-form"
+        fields={fields}
+        onSubmit={() => {}}
+        submitButtonText="Submit"
+      />,
+    );
+
+    expect(
+      within(screen.getByTestId("public-description")).queryByTitle("Image"),
+    ).toBeNull();
+    expect(
+      within(screen.getByTestId("internal-notes")).getByTitle("Image"),
+    ).toBeInTheDocument();
+  });
+});