@oneuptime/common 12.0.6 → 12.0.8

package/UI/Components/Date/TimeRangePickerDropdown.tsx

@@ -0,0 +1,250 @@
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import InBetween from "../../../Types/BaseDatabase/InBetween";
+import IconProp from "../../../Types/Icon/IconProp";
+import RangeStartAndEndDateTime, {
+  RangeStartAndEndDateTimeUtil,
+} from "../../../Types/Time/RangeStartAndEndDateTime";
+import TimeRange from "../../../Types/Time/TimeRange";
+import {
+  DropdownHorizontalAlignment,
+  getDropdownAlignmentClassName,
+  useDropdownHorizontalAlignment,
+} from "../../Utils/DropdownAlignment";
+import Icon from "../Icon/Icon";
+import CustomTimeRangeModal from "./CustomTimeRangeModal";
+
+export interface TimeRangePickerPresetOption {
+  range: TimeRange;
+  label: string;
+}
+
+export interface ComponentProps {
+  value: RangeStartAndEndDateTime;
+  onChange: (value: RangeStartAndEndDateTime) => void;
+  /*
+   * Prefix for the trigger and panel test ids, so each surface embedding this
+   * picker keeps the selector its own tests were written against.
+   */
+  dataTestIdPrefix: string;
+  dropdownWidthInPx: number;
+}
+
+export const CUSTOM_RANGE_OPTION_LABEL: string = "Custom Range...";
+
+// Preset options to show in the dropdown, ordered shortest window first.
+export const TIME_RANGE_PRESET_OPTIONS: Array<TimeRangePickerPresetOption> = [
+  { range: TimeRange.PAST_FIVE_MINS, label: "Past 5 Minutes" },
+  { range: TimeRange.PAST_FIFTEEN_MINS, label: "Past 15 Minutes" },
+  { range: TimeRange.PAST_THIRTY_MINS, label: "Past 30 Minutes" },
+  { range: TimeRange.PAST_ONE_HOUR, label: "Past 1 Hour" },
+  { range: TimeRange.PAST_TWO_HOURS, label: "Past 2 Hours" },
+  { range: TimeRange.PAST_THREE_HOURS, label: "Past 3 Hours" },
+  { range: TimeRange.PAST_ONE_DAY, label: "Past 1 Day" },
+  { range: TimeRange.PAST_TWO_DAYS, label: "Past 2 Days" },
+  { range: TimeRange.PAST_ONE_WEEK, label: "Past 1 Week" },
+  { range: TimeRange.PAST_TWO_WEEKS, label: "Past 2 Weeks" },
+  { range: TimeRange.PAST_ONE_MONTH, label: "Past 1 Month" },
+  { range: TimeRange.PAST_THREE_MONTHS, label: "Past 3 Months" },
+];
+
+function formatDateShort(date: Date): string {
+  const month: string = date.toLocaleString("en-US", { month: "short" });
+  const day: number = date.getDate();
+  const hours: string = date.getHours().toString().padStart(2, "0");
+  const minutes: string = date.getMinutes().toString().padStart(2, "0");
+  return `${month} ${day}, ${hours}:${minutes}`;
+}
+
+export function getTimeRangeButtonLabel(
+  value: RangeStartAndEndDateTime,
+): string {
+  if (value.range === TimeRange.CUSTOM && value.startAndEndDate) {
+    const start: string = formatDateShort(value.startAndEndDate.startValue);
+    const end: string = formatDateShort(value.startAndEndDate.endValue);
+    return `${start} – ${end}`;
+  }
+
+  const preset: TimeRangePickerPresetOption | undefined =
+    TIME_RANGE_PRESET_OPTIONS.find((opt: TimeRangePickerPresetOption) => {
+      return opt.range === value.range;
+    });
+  return preset ? preset.label : value.range;
+}
+
+const TimeRangePickerDropdown: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  /*
+   * The custom window is edited in a modal rather than inline in this panel.
+   * Two `datetime-local` fields never fitted the 288px dropdown, and the native
+   * calendar those fields open renders outside this container — so the
+   * click-outside handler below tore the panel down the moment a date was
+   * clicked, which is what made "Custom Range..." look broken.
+   */
+  const [customSeedValue, setCustomSeedValue] =
+    useState<InBetween<Date> | null>(null);
+  const containerRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(
+    null!,
+  );
+  const buttonRef: React.RefObject<HTMLButtonElement> =
+    useRef<HTMLButtonElement>(null!);
+  const dropdownRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(
+    null!,
+  );
+
+  const alignment: DropdownHorizontalAlignment = useDropdownHorizontalAlignment(
+    {
+      isOpen: isOpen,
+      anchorRef: buttonRef,
+      dropdownRef: dropdownRef,
+      dropdownWidthInPx: props.dropdownWidthInPx,
+    },
+  );
+
+  // Close on click outside
+  useEffect(() => {
+    const handleClickOutside: (e: MouseEvent) => void = (
+      e: MouseEvent,
+    ): void => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const handlePresetSelect: (range: TimeRange) => void = useCallback(
+    (range: TimeRange): void => {
+      props.onChange({ range });
+      setIsOpen(false);
+    },
+    [props],
+  );
+
+  const openCustomModal: () => void = useCallback((): void => {
+    /*
+     * Seed the editor with the window currently on screen — the custom range
+     * if one is already applied, otherwise the absolute bounds of the selected
+     * preset, so the user edits what they are looking at.
+     */
+    setCustomSeedValue(
+      props.value.range === TimeRange.CUSTOM && props.value.startAndEndDate
+        ? props.value.startAndEndDate
+        : RangeStartAndEndDateTimeUtil.getStartAndEndDate(props.value),
+    );
+    setIsOpen(false);
+  }, [props.value]);
+
+  const buttonLabel: string = getTimeRangeButtonLabel(props.value);
+
+  return (
+    <div ref={containerRef} className="relative">
+      <button
+        ref={buttonRef}
+        type="button"
+        data-testid={`${props.dataTestIdPrefix}-button`}
+        aria-haspopup="true"
+        aria-expanded={isOpen}
+        className={`inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium shadow-sm transition-colors ${
+          isOpen
+            ? "border-indigo-300 bg-indigo-50 text-indigo-700"
+            : "border-gray-200 bg-white text-gray-700 hover:border-gray-300 hover:bg-gray-50"
+        }`}
+        onClick={() => {
+          setIsOpen(!isOpen);
+        }}
+      >
+        <Icon icon={IconProp.Clock} className="h-3.5 w-3.5" />
+        <span>{buttonLabel}</span>
+        <Icon
+          icon={IconProp.ChevronDown}
+          className={`h-3 w-3 transition-transform ${isOpen ? "rotate-180" : ""}`}
+        />
+      </button>
+
+      {isOpen && (
+        <div
+          ref={dropdownRef}
+          data-testid={`${props.dataTestIdPrefix}-dropdown`}
+          data-align={alignment}
+          className={`absolute ${getDropdownAlignmentClassName(
+            alignment,
+          )} top-full z-50 mt-1 w-72 max-w-[calc(100vw-1rem)] rounded-lg border border-gray-200 bg-white shadow-lg`}
+        >
+          {/* Preset options */}
+          <div className="max-h-64 overflow-y-auto py-1">
+            {TIME_RANGE_PRESET_OPTIONS.map(
+              (option: TimeRangePickerPresetOption) => {
+                const isActive: boolean = props.value.range === option.range;
+
+                return (
+                  <button
+                    key={option.range}
+                    type="button"
+                    className={`flex w-full items-center px-3 py-1.5 text-left text-sm transition-colors ${
+                      isActive
+                        ? "bg-indigo-50 font-medium text-indigo-700"
+                        : "text-gray-700 hover:bg-gray-50"
+                    }`}
+                    onClick={() => {
+                      handlePresetSelect(option.range);
+                    }}
+                  >
+                    {option.label}
+                  </button>
+                );
+              },
+            )}
+
+            {/* Custom option — opens the editor in a modal */}
+            <button
+              type="button"
+              data-testid={`${props.dataTestIdPrefix}-custom-option`}
+              className={`flex w-full items-center px-3 py-1.5 text-left text-sm transition-colors ${
+                props.value.range === TimeRange.CUSTOM
+                  ? "bg-indigo-50 font-medium text-indigo-700"
+                  : "text-gray-700 hover:bg-gray-50"
+              }`}
+              onClick={openCustomModal}
+            >
+              {CUSTOM_RANGE_OPTION_LABEL}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {customSeedValue && (
+        <CustomTimeRangeModal
+          initialValue={customSeedValue}
+          onClose={() => {
+            setCustomSeedValue(null);
+          }}
+          onSave={(startAndEndDate: InBetween<Date>) => {
+            setCustomSeedValue(null);
+            props.onChange({
+              range: TimeRange.CUSTOM,
+              startAndEndDate: startAndEndDate,
+            });
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default TimeRangePickerDropdown;

package/UI/Components/Dictionary/Dictionary.tsx

@@ -164,7 +164,16 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
        * numeric/boolean inputs always represent equality.
        */
       if (item.type === ValueType.Number) {
-        result[item.key] = item.value as number;
+        /*
+         * An empty number box is a row the user is still filling in, not a
+         * filter for "". Leaving the key out of the result keeps it out of the
+         * query until an actual number is typed — which is what the value
+         * input used to achieve by deleting the row outright.
+         */
+        if (typeof item.value !== "number" || isNaN(item.value)) {
+          return;
+        }
+        result[item.key] = item.value;
         return;
       }
       if (item.type === ValueType.Boolean) {
@@ -495,12 +504,20 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
                     placeholder={props.valuePlaceholder}
                     onChange={(value: string) => {
                       const newData: Array<Item> = [...data];
+                      const parsedValue: number = parseInt(value);
 
-                      if (typeof value === "string" && value.length > 0) {
-                        newData[index]!.value = parseInt(value);
-                      } else {
-                        delete newData[index];
-                      }
+                      /*
+                       * Emptying the box empties this row's value — it does not
+                       * remove the row. `delete` on an array leaves a hole, so
+                       * clearing the number silently threw away the filter the
+                       * user was in the middle of writing, and the next
+                       * `[...data]` materialised that hole as `undefined` and
+                       * crashed the whole form on the following render.
+                       */
+                      newData[index]!.value =
+                        value.length > 0 && !isNaN(parsedValue)
+                          ? parsedValue
+                          : "";
 
                       setData(newData);
                       onDataChange(newData);

package/UI/Components/Forms/Fields/ColorPicker.tsx

@@ -10,6 +10,7 @@ import React, {
   FunctionComponent,
   ReactElement,
   useEffect,
+  useId,
   useState,
 } from "react";
 import { createPortal } from "react-dom";
@@ -43,14 +44,20 @@ const ColorPicker: FunctionComponent<ComponentProps> = (
     anchorRef,
     popupRef,
     isPopupOpen,
+    popupId,
     popupPosition,
     portalTarget,
+    onTriggerKeyDown,
     togglePopup,
   }: AnchoredFieldPopup = useAnchoredFieldPopup({
     popupMaxHeight: COLOR_PICKER_POPUP_MAX_HEIGHT_PX,
     popupWidth: COLOR_PICKER_POPUP_WIDTH_PX,
   });
 
+  const isInteractive: boolean = !props.readOnly && !props.disabled;
+  const generatedId: string = useId();
+  const errorId: string = `${generatedId}-color-picker-error`;
+
   const [isInitialValuesInitialized, setIsInitialValuesInitialized] =
     useState<boolean>(false);
 
@@ -79,20 +86,39 @@ const ColorPicker: FunctionComponent<ComponentProps> = (
       >
         <div
           onClick={() => {
-            if (!props.readOnly) {
+            if (isInteractive) {
               togglePopup();
             }
           }}
+          aria-hidden="true"
           className="rounded h-5 w-5 border border-gray-200 cursor-pointer"
           style={{ backgroundColor: color.toString() }}
         ></div>
 
         <Input
           onClick={() => {
-            if (!props.readOnly) {
+            if (isInteractive) {
               togglePopup();
             }
           }}
+          /*
+           * The field is a trigger, not a text box: it is readOnly and its only
+           * job is to open the picker. Without this a keyboard user cannot
+           * reach the picker at all, which on a required colour - the Create
+           * Label form - means they cannot submit the form either.
+           */
+          onKeyDown={isInteractive ? onTriggerKeyDown : undefined}
+          ariaHasPopup="dialog"
+          ariaExpanded={isPopupOpen}
+          ariaControls={isPopupOpen ? popupId : undefined}
+          /*
+           * The message below belongs to the whole control rather than to this
+           * input, so it has to be pointed at explicitly - otherwise "Label
+           * Color is required." is on screen and nowhere in the accessibility
+           * tree, and a screen reader user is told only that the form failed.
+           */
+          ariaDescribedby={props.error ? errorId : undefined}
+          ariaInvalid={Boolean(props.error)}
           disabled={props.disabled}
           dataTestId={props.dataTestId}
           onBlur={props.onBlur}
@@ -113,16 +139,24 @@ const ColorPicker: FunctionComponent<ComponentProps> = (
           onFocus={props.onFocus || undefined}
         />
         {color && !props.disabled && (
-          <Icon
-            icon={IconProp.Close}
-            className="text-gray-400 h-5 w-5 cursor-pointer hover:text-gray-600"
+          /*
+           * A button, not a bare svg with a click handler: undoing a choice has
+           * to be reachable by the same keyboard that made it.
+           */
+          <button
+            type="button"
+            aria-label="Clear color"
+            title="Clear color"
+            className="flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 rounded"
             onClick={() => {
               setColor("");
               if (props.onChange) {
                 props.onChange(null);
               }
             }}
-          />
+          >
+            <Icon icon={IconProp.Close} className="h-5 w-5 cursor-pointer" />
+          </button>
         )}
       </div>
       {/*
@@ -134,6 +168,9 @@ const ColorPicker: FunctionComponent<ComponentProps> = (
             <div
               ref={popupRef}
               data-testid="color-picker-popup"
+              id={popupId}
+              role="dialog"
+              aria-label="Color picker"
               tabIndex={-1}
               className="fixed overflow-auto rounded-md shadow-lg"
               style={{
@@ -147,10 +184,24 @@ const ColorPicker: FunctionComponent<ComponentProps> = (
             >
               <ChromePicker
                 color={color}
+                /*
+                 * The field stores a bare hex, so an alpha channel it cannot
+                 * represent is worse than no alpha at all: react-color reports
+                 * a fully transparent colour as the literal "transparent",
+                 * which sails through Color (it validates nothing) and is then
+                 * rejected on save as longer than the ten characters the column
+                 * holds - for a colour the user can see in the swatch.
+                 */
+                disableAlpha={true}
+                /*
+                 * One callback, not two. The swatch used to be painted from
+                 * onChange and the form fed from onChangeComplete, which
+                 * react-color debounces by 100ms — so for that window the field
+                 * showed a colour the form did not hold yet. The value always
+                 * arrived in the end, but there is no reason for the two to
+                 * disagree at all.
+                 */
                 onChange={(color: ColorResult) => {
-                  setColor(color.hex);
-                }}
-                onChangeComplete={(color: ColorResult) => {
                   return handleChange(color.hex);
                 }}
               />
@@ -159,7 +210,12 @@ const ColorPicker: FunctionComponent<ComponentProps> = (
           )
         : null}
       {props.error && (
-        <p data-testid="error-message" className="mt-1 text-sm text-red-400">
+        <p
+          id={errorId}
+          role="alert"
+          data-testid="error-message"
+          className="mt-1 text-sm text-red-400"
+        >
           {props.error}
         </p>
       )}

package/UI/Components/Forms/Fields/IconPicker.tsx

@@ -9,6 +9,7 @@ import React, {
   FunctionComponent,
   ReactElement,
   useEffect,
+  useId,
   useState,
 } from "react";
 import { createPortal } from "react-dom";
@@ -41,15 +42,21 @@ const IconPicker: FunctionComponent<ComponentProps> = (
     anchorRef,
     popupRef,
     isPopupOpen,
+    popupId,
     popupPosition,
     portalTarget,
     closePopup,
+    onTriggerKeyDown,
     togglePopup,
   }: AnchoredFieldPopup = useAnchoredFieldPopup({
     popupMaxHeight: ICON_PICKER_POPUP_MAX_HEIGHT_PX,
     popupWidth: ICON_PICKER_POPUP_WIDTH_PX,
   });
 
+  const isInteractive: boolean = !props.readOnly && !props.disabled;
+  const generatedId: string = useId();
+  const errorId: string = `${generatedId}-icon-picker-error`;
+
   const [isInitialValuesInitialized, setIsInitialValuesInitialized] =
     useState<boolean>(false);
 
@@ -84,10 +91,11 @@ const IconPicker: FunctionComponent<ComponentProps> = (
       >
         <div
           onClick={() => {
-            if (!props.readOnly && !props.disabled) {
+            if (isInteractive) {
               togglePopup();
             }
           }}
+          aria-hidden="true"
           className="flex items-center justify-center h-5 w-5 cursor-pointer"
         >
           {selectedIcon ? (
@@ -99,10 +107,18 @@ const IconPicker: FunctionComponent<ComponentProps> = (
 
         <Input
           onClick={() => {
-            if (!props.readOnly && !props.disabled) {
+            if (isInteractive) {
               togglePopup();
             }
           }}
+          // The field is a trigger, not a text box - see ColorPicker.
+          onKeyDown={isInteractive ? onTriggerKeyDown : undefined}
+          ariaHasPopup="dialog"
+          ariaExpanded={isPopupOpen}
+          ariaControls={isPopupOpen ? popupId : undefined}
+          // The message below belongs to the control, not to this input.
+          ariaDescribedby={props.error ? errorId : undefined}
+          ariaInvalid={Boolean(props.error)}
           disabled={props.disabled}
           dataTestId={props.dataTestId}
           onBlur={props.onBlur}
@@ -119,14 +135,19 @@ const IconPicker: FunctionComponent<ComponentProps> = (
           onFocus={props.onFocus || undefined}
         />
         {selectedIcon && !props.disabled && (
-          <Icon
-            icon={IconProp.Close}
-            className="text-gray-400 h-5 w-5 cursor-pointer hover:text-gray-600"
+          // A button, not a bare svg with a click handler - see ColorPicker.
+          <button
+            type="button"
+            aria-label="Clear icon"
+            title="Clear icon"
+            className="flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 rounded"
             onClick={() => {
               setSelectedIcon(null);
               props.onChange(null);
             }}
-          />
+          >
+            <Icon icon={IconProp.Close} className="h-5 w-5 cursor-pointer" />
+          </button>
         )}
       </div>
       {/*
@@ -138,6 +159,9 @@ const IconPicker: FunctionComponent<ComponentProps> = (
             <div
               ref={popupRef}
               data-testid="icon-picker-popup"
+              id={popupId}
+              role="dialog"
+              aria-label="Icon picker"
               tabIndex={-1}
               className="fixed flex flex-col overflow-hidden bg-white border border-gray-200 rounded-lg shadow-lg p-3"
               style={{
@@ -166,13 +190,22 @@ const IconPicker: FunctionComponent<ComponentProps> = (
               {/* Icons grid */}
               <div className="grid grid-cols-6 gap-2 min-h-0 flex-1 overflow-y-auto">
                 {filteredIcons.map((icon: IconProp) => {
+                  /*
+                   * A button rather than a div: the grid is the only way to set
+                   * this field, so every cell has to be reachable by Tab and
+                   * answer to Enter and Space. type="button" keeps it from
+                   * submitting the form the field sits in.
+                   */
                   return (
-                    <div
+                    <button
                       key={icon}
+                      type="button"
                       onClick={() => {
                         handleChange(icon);
                       }}
-                      className={`flex items-center justify-center p-2 rounded cursor-pointer hover:bg-gray-100 ${
+                      aria-pressed={selectedIcon === icon}
+                      aria-label={icon}
+                      className={`flex items-center justify-center p-2 rounded cursor-pointer hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 ${
                         selectedIcon === icon
                           ? "bg-indigo-100 ring-2 ring-indigo-500"
                           : ""
@@ -180,7 +213,7 @@ const IconPicker: FunctionComponent<ComponentProps> = (
                       title={icon}
                     >
                       <Icon icon={icon} className="h-5 w-5 text-gray-600" />
-                    </div>
+                    </button>
                   );
                 })}
               </div>
@@ -195,7 +228,12 @@ const IconPicker: FunctionComponent<ComponentProps> = (
           )
         : null}
       {props.error && (
-        <p data-testid="error-message" className="mt-1 text-sm text-red-400">
+        <p
+          id={errorId}
+          role="alert"
+          data-testid="error-message"
+          className="mt-1 text-sm text-red-400"
+        >
           {props.error}
         </p>
       )}

package/UI/Components/Forms/Types/Field.ts

@@ -92,6 +92,13 @@ export default interface Field<TEntity> {
     | undefined;
   styleType?: FormFieldStyleType | undefined;
   showIf?: ((item: FormValues<TEntity>) => boolean) | undefined;
+  /**
+   * For a JSON field: judge its contents by JSON5's rules rather than JSON's.
+   * Set it where the code that eventually reads this value uses
+   * JSONFunctions.parse, so validation cannot reject a value that would have
+   * been read back perfectly well.
+   */
+  allowJSON5?: boolean | undefined;
   onChange?:
     | ((
         value: any,

package/UI/Components/Forms/Validation.ts

@@ -12,8 +12,12 @@ import Email from "../../../Types/Email";
 import BadDataException from "../../../Types/Exception/BadDataException";
 import Exception from "../../../Types/Exception/Exception";
 import GenericObject from "../../../Types/GenericObject";
-import { JSONObject } from "../../../Types/JSON";
+import { JSONObject, JSONValue } from "../../../Types/JSON";
 import Phone from "../../../Types/Phone";
+import {
+  JSONSyntaxCheckResult,
+  checkJSONSyntax,
+} from "../../../Types/Workflow/TemplateSyntax";
 import { Logger } from "../../Utils/Logger";
 import Port from "../../../Types/Port";
 import Typeof from "../../../Types/Typeof";
@@ -320,6 +324,50 @@ export default class Validation {
     return null;
   }
 
+  /**
+   * A JSON field whose contents are not JSON.
+   *
+   * Until this existed, a stray trailing comma saved cleanly and only surfaced
+   * when something tried to parse it — for a workflow that meant a real run,
+   * at whatever hour the trigger fired, ending in
+   * "Invalid JSON provided for argument request-body"
+   * (RunWorkflow.getComponentArguments).
+   *
+   * Takes the raw value rather than the stringified `content` the other
+   * validators get, because a JSON-typed field can legitimately already hold a
+   * parsed object, and `String(anObject)` is "[object Object]" — which is not
+   * JSON, and would fail every time.
+   *
+   * Tolerates {{...}} handlebars: workflow arguments are templates, and
+   * `{"retries": {{local.variables.retryCount}}}` is not JSON as written but is
+   * JSON by the time it is parsed. checkJSONSyntax masks those before parsing
+   * and declines to judge anything containing a {{#each}} loop at all.
+   */
+  public static validateJSONSyntax<T extends GenericObject>(
+    value: JSONValue | undefined,
+    field: Field<T>,
+  ): string | null {
+    if (field.fieldType !== FormFieldSchemaType.JSON) {
+      return null;
+    }
+
+    const result: JSONSyntaxCheckResult = checkJSONSyntax(value, {
+      allowJSON5: field.allowJSON5,
+    });
+
+    if (result.isValid) {
+      return null;
+    }
+
+    return translateValidationMessage(
+      "{{field}} is not valid JSON. {{parserMessage}}",
+      {
+        field: field.title || field.name || "",
+        parserMessage: result.errorMessage || "",
+      },
+    );
+  }
+
   public static validate<T extends GenericObject>(args: {
     formFields: Array<Field<T>>;
     values: FormValues<T>;
@@ -375,6 +423,20 @@ export default class Validation {
           errors[name] = resultValidateData;
         }
 
+        /*
+         * Fed the raw value, not `content` — see validateJSONSyntax. An
+         * already-parsed object stringifies to "[object Object]", which would
+         * fail the check every time it was handed the stringified form.
+         */
+        const resultJSONSyntax: string | null = this.validateJSONSyntax(
+          (entries as JSONObject)[name] as JSONValue | undefined,
+          field,
+        );
+
+        if (resultJSONSyntax) {
+          errors[name] = resultJSONSyntax;
+        }
+
         const resultMatch: string | null = this.validateMatchField(
           content,
           field,