@oneuptime/common 12.0.7 → 12.0.8

package/Tests/UI/Components/Forms/ValidationJSON.test.ts

@@ -0,0 +1,241 @@
+import Validation from "../../../../UI/Components/Forms/Validation";
+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 Dictionary from "../../../../Types/Dictionary";
+import { JSONObject, JSONValue } from "../../../../Types/JSON";
+import { describe, expect, test } from "@jest/globals";
+
+interface TestEntity extends JSONObject {
+  config?: JSONValue;
+  name?: JSONValue;
+}
+
+type MakeFieldFunction = (
+  overrides?: Partial<Field<TestEntity>>,
+) => Field<TestEntity>;
+
+const makeJSONField: MakeFieldFunction = (
+  overrides?: Partial<Field<TestEntity>>,
+): Field<TestEntity> => {
+  return {
+    title: "Config",
+    name: "config",
+    field: { config: true },
+    fieldType: FormFieldSchemaType.JSON,
+    ...overrides,
+  } as Field<TestEntity>;
+};
+
+type ValidateValueFunction = (
+  value: unknown,
+  field?: Field<TestEntity> | undefined,
+) => string | null;
+
+const validateValue: ValidateValueFunction = (
+  value: unknown,
+  field?: Field<TestEntity> | undefined,
+): string | null => {
+  return Validation.validateJSONSyntax(
+    value as never,
+    field || makeJSONField(),
+  );
+};
+
+describe("Validation.validateJSONSyntax — only acts on JSON fields", () => {
+  test("ignores every other field type", () => {
+    const textField: Field<TestEntity> = makeJSONField({
+      fieldType: FormFieldSchemaType.Text,
+    });
+
+    expect(validateValue("definitely not json", textField)).toBeNull();
+  });
+
+  test("names the field in the message", () => {
+    const message: string | null = validateValue('{"a":1,}');
+
+    expect(message).toMatch(/^Config is not valid JSON\./);
+  });
+});
+
+describe("Validation.validateJSONSyntax — catches the real mistakes", () => {
+  test("a trailing comma", () => {
+    expect(validateValue('{"a": 1,}')).toBeTruthy();
+  });
+
+  test("an unclosed brace", () => {
+    expect(validateValue('{"a": 1')).toBeTruthy();
+  });
+
+  test("unquoted keys and single quotes", () => {
+    expect(validateValue("{a: 1}")).toBeTruthy();
+    expect(validateValue("{'a': 1}")).toBeTruthy();
+  });
+
+  test("plain text in a JSON box", () => {
+    expect(validateValue("hello")).toBeTruthy();
+  });
+});
+
+describe("Validation.validateJSONSyntax — never fires on a working value", () => {
+  test("well-formed JSON", () => {
+    expect(validateValue('{"a": 1}')).toBeNull();
+    expect(validateValue("[1,2,3]")).toBeNull();
+    expect(validateValue('"a string"')).toBeNull();
+  });
+
+  /*
+   * The values that made a naive JSON.parse check unshippable. Each is a real
+   * thing a workflow author writes.
+   */
+  test("a whole-field template", () => {
+    expect(
+      validateValue(
+        "{{local.components.api-get-1.returnValues.response-body}}",
+      ),
+    ).toBeNull();
+  });
+
+  test("a template standing in for a bare value", () => {
+    expect(validateValue('{"retries": {{local.variables.count}}}')).toBeNull();
+  });
+
+  test("a template inside a string", () => {
+    expect(
+      validateValue('{"auth": "Bearer {{local.variables.token}}"}'),
+    ).toBeNull();
+  });
+
+  test("a loop, whose shape is only known at run time", () => {
+    expect(
+      validateValue(
+        '[{{#each local.components.a.returnValues.items}}{"id":"{{this}}"},{{/each}}]',
+      ),
+    ).toBeNull();
+  });
+
+  /*
+   * The seven model-backed forms elsewhere in the product bind real arrays and
+   * objects to a JSON field. Those must never be judged as text — this is the
+   * regression the raw-value plumbing exists to prevent.
+   */
+  test("an already-parsed object", () => {
+    expect(validateValue({ a: 1 })).toBeNull();
+  });
+
+  test("an already-parsed array", () => {
+    expect(validateValue(["https://a.example.com"])).toBeNull();
+  });
+
+  test("empty, so the required-field message stands instead", () => {
+    expect(validateValue("")).toBeNull();
+    expect(validateValue("   ")).toBeNull();
+    expect(validateValue(undefined)).toBeNull();
+    expect(validateValue(null)).toBeNull();
+  });
+});
+
+describe("Validation.validateJSONSyntax — allowJSON5", () => {
+  /*
+   * Some workflow argument types are read back with JSONFunctions.parse, which
+   * is JSON5. Judging those by JSON's rules would report a mistake in a
+   * workflow that runs perfectly well.
+   */
+  const looseField: Field<TestEntity> = makeJSONField({ allowJSON5: true });
+
+  test("accepts unquoted keys, single quotes and a trailing comma", () => {
+    expect(validateValue("{a: 1}", looseField)).toBeNull();
+    expect(validateValue("{'a': 1}", looseField)).toBeNull();
+    expect(validateValue('{"a": 1,}', looseField)).toBeNull();
+  });
+
+  test("still rejects text that is not parseable at all", () => {
+    expect(validateValue("{oops", looseField)).toBeTruthy();
+    expect(validateValue("hello", looseField)).toBeTruthy();
+  });
+
+  test("is off by default, so JSON fields stay strict", () => {
+    expect(validateValue('{"a": 1,}')).toBeTruthy();
+  });
+});
+
+describe("Validation.validate — end to end through the form validator", () => {
+  type RunValidateFunction = (
+    values: FormValues<TestEntity>,
+    fields: Array<Field<TestEntity>>,
+  ) => Dictionary<string>;
+
+  const runValidate: RunValidateFunction = (
+    values: FormValues<TestEntity>,
+    fields: Array<Field<TestEntity>>,
+  ): Dictionary<string> => {
+    return Validation.validate<TestEntity>({
+      formFields: fields,
+      values: values,
+      onValidate: undefined,
+    });
+  };
+
+  test("surfaces a JSON error against the field name", () => {
+    const errors: Dictionary<string> = runValidate(
+      { config: '{"a":1,}' } as FormValues<TestEntity>,
+      [makeJSONField()],
+    );
+
+    expect(errors["config"]).toMatch(/not valid JSON/);
+  });
+
+  test("says required, not malformed, when the box is empty", () => {
+    const errors: Dictionary<string> = runValidate(
+      { config: "" } as FormValues<TestEntity>,
+      [makeJSONField({ required: true })],
+    );
+
+    expect(errors["config"]).toMatch(/required/i);
+    expect(errors["config"]).not.toMatch(/not valid JSON/);
+  });
+
+  test("does not flag an object bound to a JSON field", () => {
+    const errors: Dictionary<string> = runValidate(
+      { config: { nested: { deep: true } } } as FormValues<TestEntity>,
+      [makeJSONField()],
+    );
+
+    expect(errors["config"]).toBeUndefined();
+  });
+
+  test("does not flag an array bound to a JSON field", () => {
+    const errors: Dictionary<string> = runValidate(
+      {
+        config: ["https://a.example.com", "https://b.example.com"],
+      } as FormValues<TestEntity>,
+      [makeJSONField()],
+    );
+
+    expect(errors["config"]).toBeUndefined();
+  });
+
+  test("leaves a hidden field alone", () => {
+    const errors: Dictionary<string> = runValidate(
+      { config: "{oops" } as FormValues<TestEntity>,
+      [
+        makeJSONField({
+          showIf: (): boolean => {
+            return false;
+          },
+        }),
+      ],
+    );
+
+    expect(errors["config"]).toBeUndefined();
+  });
+
+  test("reports nothing for a valid form", () => {
+    const errors: Dictionary<string> = runValidate(
+      { config: '{"a": 1}' } as FormValues<TestEntity>,
+      [makeJSONField()],
+    );
+
+    expect(Object.keys(errors)).toHaveLength(0);
+  });
+});

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

@@ -3,6 +3,7 @@ import LogTimeRangePicker, {
 } from "../../../UI/Components/LogsViewer/components/LogTimeRangePicker";
 import RangeStartAndEndDateTime from "../../../Types/Time/RangeStartAndEndDateTime";
 import TimeRange from "../../../Types/Time/TimeRange";
+import InBetween from "../../../Types/BaseDatabase/InBetween";
 import "@testing-library/jest-dom";
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
@@ -135,4 +136,45 @@ describe("LogTimeRangePicker", () => {
       dropdown.parentElement?.classList.contains("relative") ?? false,
     ).toBe(true);
   });
+
+  test("keeps the date fields out of the narrow dropdown panel", () => {
+    const dropdown: HTMLElement = openDropdown({
+      range: TimeRange.CUSTOM,
+      startAndEndDate: new InBetween<Date>(
+        new Date("2024-01-01T00:00:00.000Z"),
+        new Date("2024-01-02T00:00:00.000Z"),
+      ),
+    });
+
+    expect(dropdown.querySelectorAll("input").length).toBe(0);
+  });
+
+  test("opens the custom range modal from the dropdown", () => {
+    openDropdown({ range: TimeRange.PAST_ONE_HOUR });
+
+    fireEvent.click(screen.getByTestId("log-time-range-picker-custom-option"));
+
+    expect(screen.getByTestId("custom-time-range-modal")).toBeInTheDocument();
+    expect(screen.queryByTestId(DROPDOWN_TEST_ID)).toBeNull();
+  });
+
+  test("applies a custom range picked in the modal", () => {
+    const emitted: Array<RangeStartAndEndDateTime> = [];
+    render(
+      <LogTimeRangePicker
+        value={{ range: TimeRange.PAST_ONE_HOUR }}
+        onChange={(value: RangeStartAndEndDateTime) => {
+          emitted.push(value);
+        }}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId(BUTTON_TEST_ID));
+    fireEvent.click(screen.getByTestId("log-time-range-picker-custom-option"));
+    fireEvent.click(screen.getByText("Apply"));
+
+    expect(emitted).toHaveLength(1);
+    expect(emitted[0]!.range).toBe(TimeRange.CUSTOM);
+    expect(emitted[0]!.startAndEndDate).toBeInstanceOf(InBetween);
+  });
 });

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

@@ -75,9 +75,27 @@ type PressFunction = (element: HTMLElement) => void;
 
 const press: PressFunction = (element: HTMLElement): void => {
   fireEvent.mouseDown(element);
+  fireEvent.mouseUp(element);
   fireEvent.click(element);
 };
 
+/*
+ * A press that begins on one element and ends on another. The browser reports
+ * the click against the nearest common ancestor of the two, which for anything
+ * inside the dialog is the backdrop layer itself — so the click alone cannot
+ * tell a drag from a dismissal, and the modal has to watch both ends.
+ */
+type DragPressFunction = (from: HTMLElement, to: HTMLElement) => void;
+
+const dragPress: DragPressFunction = (
+  from: HTMLElement,
+  to: HTMLElement,
+): void => {
+  fireEvent.mouseDown(from);
+  fireEvent.mouseUp(to);
+  fireEvent.click(getBackdropLayer().parentElement!);
+};
+
 interface PortalHarness {
   onClose: () => void;
 }
@@ -472,6 +490,78 @@ describe("Modal dismissal and portalled dropdown menus", () => {
       expect(harness.onClose).toHaveBeenCalledTimes(1);
     });
 
+    test("a press that starts on the backdrop and ends on the panel is a drag, not a dismissal", () => {
+      const harness: PortalHarness = renderInModal(<div>Modal content</div>);
+
+      /*
+       * Pressing outside and releasing inside — reaching for the backdrop,
+       * changing your mind, letting go over the form. The click lands on the
+       * backdrop layer either way, so before the modal tracked the release this
+       * discarded whatever had been typed.
+       */
+      dragPress(getBackdropLayer(), screen.getByText("Modal content"));
+
+      expect(harness.onClose).not.toHaveBeenCalled();
+      expect(screen.getByTestId("modal")).toBeInTheDocument();
+    });
+
+    test("a press that starts on the panel and ends on the backdrop is a drag too", () => {
+      const harness: PortalHarness = renderInModal(<div>Modal content</div>);
+
+      // Selecting text in the body and releasing past the panel edge.
+      dragPress(screen.getByText("Modal content"), getBackdropLayer());
+
+      expect(harness.onClose).not.toHaveBeenCalled();
+    });
+
+    test("a release on a portalled menu does not dismiss the dialog either", () => {
+      const harness: PortalHarness = renderInModal(
+        <div>
+          {createPortal(
+            <button type="button" data-testid="portalled-option">
+              pick me
+            </button>,
+            document.body,
+          )}
+        </div>,
+      );
+
+      dragPress(getBackdropLayer(), screen.getByTestId("portalled-option"));
+
+      expect(harness.onClose).not.toHaveBeenCalled();
+      expect(screen.getByTestId("modal")).toBeInTheDocument();
+    });
+
+    test("dismissing an open picker leaves the modal behind it standing", () => {
+      const harness: PortalHarness = renderInModal(
+        <ColorPicker
+          dataTestId="color-value"
+          placeholder="Pick a color"
+          onChange={jest.fn()}
+        />,
+      );
+
+      fireEvent.click(screen.getByTestId("color-value"));
+      expect(screen.getByTestId("color-picker-popup")).toBeInTheDocument();
+
+      /*
+       * The popup covers a good part of the backdrop, so "click off it to put
+       * it away" is the obvious gesture — and one press used to close the
+       * picker and the form behind it together. Dismissal belongs to the
+       * topmost layer that is open.
+       */
+      press(getBackdropLayer());
+
+      expect(screen.queryByTestId("color-picker-popup")).toBeNull();
+      expect(harness.onClose).not.toHaveBeenCalled();
+      expect(screen.getByTestId("modal")).toBeInTheDocument();
+
+      // With the picker gone, the very next backdrop press dismisses as usual.
+      press(getBackdropLayer());
+
+      expect(harness.onClose).toHaveBeenCalledTimes(1);
+    });
+
     test("the close button still closes a modal holding a portalled menu", () => {
       const harness: PortalHarness = renderInModal(
         <AutocompleteTextInput

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

@@ -371,7 +371,12 @@ describe("TelemetryTimeRangePicker", () => {
       expect(optionLabels).toEqual(expectedLabels);
     });
 
-    test("renders the custom range editor when a custom range is active", () => {
+    test("keeps the date fields out of the narrow dropdown panel", () => {
+      /*
+       * Regression: the custom editor used to render two `datetime-local`
+       * fields inside the 288px panel. It now lives in a modal, so the panel
+       * itself stays a plain list of options.
+       */
       renderPicker({
         range: TimeRange.CUSTOM,
         startAndEndDate: new InBetween<Date>(
@@ -382,14 +387,11 @@ describe("TelemetryTimeRangePicker", () => {
 
       const dropdown: HTMLElement = openDropdown();
 
-      // The custom editor lives in the same panel, so alignment still applies.
       expect(hasClass(dropdown, "left-0")).toBe(true);
-      expect(dropdown.querySelectorAll("input").length).toBeGreaterThan(0);
+      expect(dropdown.querySelectorAll("input").length).toBe(0);
     });
 
-    test("keeps the taller custom panel inside the viewport near the right edge", () => {
-      stubTriggerRect(1310, 1430);
-
+    test("marks the custom entry as selected while a custom range is active", () => {
       renderPicker({
         range: TimeRange.CUSTOM,
         startAndEndDate: new InBetween<Date>(
@@ -398,7 +400,47 @@ describe("TelemetryTimeRangePicker", () => {
         ),
       });
 
-      expect(hasClass(openDropdown(), "right-0")).toBe(true);
+      openDropdown();
+
+      expect(
+        hasClass(
+          screen.getByTestId("telemetry-time-range-picker-custom-option"),
+          "text-indigo-700",
+        ),
+      ).toBe(true);
+    });
+
+    test("opens the custom range modal from the dropdown", () => {
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+      openDropdown();
+
+      fireEvent.click(
+        screen.getByTestId("telemetry-time-range-picker-custom-option"),
+      );
+
+      expect(screen.getByTestId("custom-time-range-modal")).toBeInTheDocument();
+      // The dropdown gets out of the way once the modal is up.
+      expect(screen.queryByTestId(DROPDOWN_TEST_ID)).toBeNull();
+    });
+
+    test("applies a custom range picked in the modal", () => {
+      const emitted: Array<RangeStartAndEndDateTime> = [];
+      renderPicker(
+        { range: TimeRange.PAST_ONE_HOUR },
+        (value: RangeStartAndEndDateTime) => {
+          emitted.push(value);
+        },
+      );
+      openDropdown();
+
+      fireEvent.click(
+        screen.getByTestId("telemetry-time-range-picker-custom-option"),
+      );
+      fireEvent.click(screen.getByText("Apply"));
+
+      expect(emitted).toHaveLength(1);
+      expect(emitted[0]!.range).toBe(TimeRange.CUSTOM);
+      expect(emitted[0]!.startAndEndDate).toBeInstanceOf(InBetween);
     });
   });
 });