@oneuptime/common 12.0.7 → 12.0.8

package/UI/Components/Workflow/ModelColumnEditor.tsx

@@ -0,0 +1,396 @@
+/*
+ * A row-based editor for the two workflow arguments that are keyed on a
+ * model's columns: the Query that picks which records a component acts on,
+ * and the record of values a create/update writes.
+ *
+ * Both were bare JSON editors, with the column names — and, for a query, the
+ * operator syntax — left entirely to memory. The description on those
+ * arguments had to carry a hint about "_id" versus "id" precisely because
+ * nothing else told the builder what the columns were called.
+ *
+ * Everything needed to do better already existed: /model-schema/:tableName
+ * knows the columns, and DictionaryForm's operator mode emits exactly the
+ * {_type, value} shape that JSONFunctions.deserialize hydrates on the server
+ * (FindManyBaseModel and friends). This wires the two together, and keeps a
+ * JSON escape hatch for the values rows cannot express.
+ */
+
+import CodeEditor from "../CodeEditor/CodeEditor";
+import ComponentLoader from "../ComponentLoader/ComponentLoader";
+import DictionaryForm, { ValueType } from "../Dictionary/Dictionary";
+import { DictionaryEntryValue } from "../Dictionary/DictionaryFilterOperator";
+import Icon from "../Icon/Icon";
+import {
+  ModelSchemaColumn,
+  ModelSchemaState,
+  findColumn,
+  useModelSchema,
+} from "./ModelSchema";
+import CodeType from "../../../Types/Code/CodeType";
+import Dictionary from "../../../Types/Dictionary";
+import IconProp from "../../../Types/Icon/IconProp";
+import { JSONObject, ObjectType } from "../../../Types/JSON";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+export enum ModelColumnEditorMode {
+  /** Conditions that select records: column, operator, value. */
+  Query = "Query",
+  /** Values to write: column, value. No operators — you cannot save a ">". */
+  Record = "Record",
+}
+
+export interface ComponentProps {
+  tableName: string;
+  mode: ModelColumnEditorMode;
+  initialValue?: string | JSONObject | null | undefined;
+  onChange: (value: string) => void;
+  error?: string | undefined;
+  placeholder?: string | undefined;
+  tabIndex?: number | undefined;
+}
+
+type ViewMode = "builder" | "json";
+
+/*
+ * Operator wrappers the row editor can show. Anything else in a stored query
+ * (an InBetween, a relation sub-object, a raw QueryHelper construct) keeps the
+ * JSON editor rather than being silently flattened.
+ */
+const REPRESENTABLE_OPERATOR_TYPES: Array<string> = [
+  ObjectType.EqualTo,
+  ObjectType.NotEqual,
+  ObjectType.Search,
+  ObjectType.NotContains,
+  ObjectType.StartsWith,
+  ObjectType.EndsWith,
+  ObjectType.GreaterThan,
+  ObjectType.GreaterThanOrEqual,
+  ObjectType.LessThan,
+  ObjectType.LessThanOrEqual,
+  ObjectType.IsNull,
+  ObjectType.NotNull,
+  ObjectType.Includes,
+  ObjectType.IncludesNone,
+];
+
+interface ParsedQuery {
+  /** The raw text, always kept so the JSON editor can show it verbatim. */
+  text: string;
+  /** The parsed object, or null when the text is not a JSON object. */
+  parsed: JSONObject | null;
+}
+
+type NormalizeInitialValueFunction = (
+  value: string | JSONObject | null | undefined,
+) => ParsedQuery;
+
+const normalizeInitialValue: NormalizeInitialValueFunction = (
+  value: string | JSONObject | null | undefined,
+): ParsedQuery => {
+  if (value === null || value === undefined || value === "") {
+    return { text: "", parsed: {} };
+  }
+
+  if (typeof value === "object" && !Array.isArray(value)) {
+    return { text: JSON.stringify(value, null, 2), parsed: value };
+  }
+
+  if (typeof value !== "string") {
+    return { text: String(value), parsed: null };
+  }
+
+  try {
+    const parsed: unknown = JSON.parse(value);
+
+    if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+      return { text: value, parsed: parsed as JSONObject };
+    }
+
+    return { text: value, parsed: null };
+  } catch {
+    return { text: value, parsed: null };
+  }
+};
+
+interface CompatibilityResult {
+  compatible: boolean;
+  /** Shown to the builder so a locked JSON editor is never unexplained. */
+  reasons: Array<string>;
+}
+
+type ClassifyCompatibilityFunction = (
+  parsed: JSONObject | null,
+  columns: Array<ModelSchemaColumn>,
+  mode: ModelColumnEditorMode,
+) => CompatibilityResult;
+
+/**
+ * Can this value be shown as rows without losing anything?
+ *
+ * Deliberately conservative: when in doubt the JSON editor stays, because a
+ * value silently rewritten into something that means something else is far
+ * worse than one the builder has to keep editing as text.
+ */
+export const classifyColumnValueCompatibility: ClassifyCompatibilityFunction = (
+  parsed: JSONObject | null,
+  columns: Array<ModelSchemaColumn>,
+  mode: ModelColumnEditorMode,
+): CompatibilityResult => {
+  if (parsed === null) {
+    return {
+      compatible: false,
+      reasons: ["The current value isn't a JSON object."],
+    };
+  }
+
+  const reasons: Array<string> = [];
+
+  for (const key of Object.keys(parsed)) {
+    /*
+     * Columns are only checked when the schema actually loaded. An unknown key
+     * is worth saying out loud — it is the "id" versus "_id" mistake — but it
+     * does not force the JSON editor, since the runner accepts column names
+     * this endpoint does not surface.
+     */
+    if (columns.length > 0 && !findColumn(columns, key)) {
+      reasons.push(`"${key}" isn't a known column on this model.`);
+    }
+
+    const value: unknown = parsed[key];
+
+    if (value === null) {
+      continue;
+    }
+
+    if (
+      typeof value === "string" ||
+      typeof value === "number" ||
+      typeof value === "boolean"
+    ) {
+      continue;
+    }
+
+    if (Array.isArray(value)) {
+      reasons.push(
+        `"${key}" holds a list. Use the "is any of" operator instead, or keep editing as JSON.`,
+      );
+      continue;
+    }
+
+    if (typeof value === "object") {
+      const objectType: unknown = (value as JSONObject)["_type"];
+
+      if (
+        mode === ModelColumnEditorMode.Query &&
+        typeof objectType === "string" &&
+        REPRESENTABLE_OPERATOR_TYPES.includes(objectType)
+      ) {
+        continue;
+      }
+
+      if (typeof objectType === "string") {
+        reasons.push(`"${key}" uses ${objectType}, which the rows can't show.`);
+        continue;
+      }
+
+      reasons.push(
+        `"${key}" holds a nested record, which the rows can't show.`,
+      );
+      continue;
+    }
+
+    reasons.push(`"${key}" has an unexpected value.`);
+  }
+
+  /*
+   * An unknown column name is a warning, not a reason to lock the editor —
+   * the builder can still fix it in the row that shows it.
+   */
+  const blocking: Array<string> = reasons.filter((reason: string) => {
+    return !reason.includes("isn't a known column");
+  });
+
+  return { compatible: blocking.length === 0, reasons: reasons };
+};
+
+type BuildQueryJsonFunction = (
+  value: Dictionary<DictionaryEntryValue>,
+) => string;
+
+/**
+ * The rows, as the string stored on the workflow argument.
+ *
+ * Empty collapses to "" rather than "{}" so a required argument still reads as
+ * empty to form validation and to the graph linter.
+ */
+export const buildColumnValueJson: BuildQueryJsonFunction = (
+  value: Dictionary<DictionaryEntryValue>,
+): string => {
+  const entries: JSONObject = {};
+
+  for (const key of Object.keys(value)) {
+    if (key.trim() === "") {
+      continue;
+    }
+
+    entries[key] = value[key] as never;
+  }
+
+  if (Object.keys(entries).length === 0) {
+    return "";
+  }
+
+  /*
+   * The operator wrappers serialize themselves through toJSON() into
+   * {_type, value}, which is exactly what the server rehydrates with
+   * JSONFunctions.deserialize.
+   */
+  return JSON.stringify(entries);
+};
+
+const ModelColumnEditor: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const schema: ModelSchemaState = useModelSchema(props.tableName);
+  const isQuery: boolean = props.mode === ModelColumnEditorMode.Query;
+
+  const initial: ParsedQuery = useMemo(() => {
+    return normalizeInitialValue(props.initialValue);
+  }, []);
+
+  const [jsonText, setJsonText] = useState<string>(initial.text);
+  const [viewMode, setViewMode] = useState<ViewMode>("builder");
+
+  /*
+   * The row editor is uncontrolled after mount (DictionaryForm seeds itself
+   * once), so the initial value is captured rather than recomputed.
+   */
+  const initialRows: React.MutableRefObject<Dictionary<DictionaryEntryValue>> =
+    useRef<Dictionary<DictionaryEntryValue>>(
+      (initial.parsed || {}) as Dictionary<DictionaryEntryValue>,
+    );
+
+  const compatibility: CompatibilityResult = useMemo(() => {
+    return classifyColumnValueCompatibility(
+      initial.parsed,
+      schema.columns || [],
+      props.mode,
+    );
+  }, [schema.columns, props.mode]);
+
+  const columnKeys: Array<string> = useMemo(() => {
+    return (schema.columns || []).map((column: ModelSchemaColumn) => {
+      return column.id;
+    });
+  }, [schema.columns]);
+
+  if (schema.isLoading) {
+    return <ComponentLoader />;
+  }
+
+  const isLockedToJson: boolean = !compatibility.compatible;
+  const effectiveMode: ViewMode = isLockedToJson ? "json" : viewMode;
+
+  type OnJsonChangeFunction = (value: string) => void;
+
+  const onJsonChange: OnJsonChangeFunction = (value: string): void => {
+    setJsonText(value);
+    props.onChange(value);
+  };
+
+  type OnRowsChangeFunction = (value: Dictionary<DictionaryEntryValue>) => void;
+
+  const onRowsChange: OnRowsChangeFunction = (
+    value: Dictionary<DictionaryEntryValue>,
+  ): void => {
+    const asJson: string = buildColumnValueJson(value);
+    setJsonText(asJson);
+    props.onChange(asJson);
+  };
+
+  return (
+    <div>
+      {schema.error && (
+        <p className="text-sm text-amber-600 mb-2">
+          Couldn&apos;t load this model&apos;s columns ({schema.error}). You can
+          still write the query as JSON.
+        </p>
+      )}
+
+      {isLockedToJson && compatibility.reasons.length > 0 && (
+        <div className="mb-2 rounded-md border border-amber-200 bg-amber-50 p-3">
+          <p className="text-sm text-amber-800">Editing as JSON, because:</p>
+          <ul className="mt-1 list-disc pl-5 text-sm text-amber-700">
+            {compatibility.reasons.map((reason: string, i: number) => {
+              return <li key={i}>{reason}</li>;
+            })}
+          </ul>
+        </div>
+      )}
+
+      {!isLockedToJson && compatibility.reasons.length > 0 && (
+        <div className="mb-2 rounded-md border border-amber-200 bg-amber-50 p-3">
+          <ul className="list-disc pl-5 text-sm text-amber-700">
+            {compatibility.reasons.map((reason: string, i: number) => {
+              return <li key={i}>{reason}</li>;
+            })}
+          </ul>
+        </div>
+      )}
+
+      {effectiveMode === "builder" ? (
+        <DictionaryForm
+          keys={columnKeys}
+          enableOperators={isQuery}
+          valueTypes={[ValueType.Text, ValueType.Number, ValueType.Boolean]}
+          addButtonSuffix={isQuery ? "condition" : "field"}
+          keyPlaceholder="Column"
+          valuePlaceholder="Value"
+          initialValue={initialRows.current}
+          onChange={onRowsChange}
+        />
+      ) : (
+        <CodeEditor
+          type={CodeType.JSON}
+          tabIndex={props.tabIndex}
+          error={props.error}
+          initialValue={initial.text}
+          value={jsonText}
+          placeholder={props.placeholder}
+          onChange={onJsonChange}
+        />
+      )}
+
+      {!isLockedToJson && (
+        <div className="mt-2">
+          <button
+            type="button"
+            className="text-sm underline text-blue-500 hover:text-blue-600 cursor-pointer inline-flex items-center gap-1"
+            onClick={() => {
+              setViewMode(effectiveMode === "builder" ? "json" : "builder");
+            }}
+          >
+            <Icon icon={IconProp.Code} className="h-3.5 w-3.5" />
+            {effectiveMode === "builder"
+              ? "Edit as JSON"
+              : isQuery
+                ? "Back to conditions"
+                : "Back to fields"}
+          </button>
+        </div>
+      )}
+
+      {props.error && effectiveMode === "builder" && (
+        <p className="mt-1 text-sm text-red-400">{props.error}</p>
+      )}
+    </div>
+  );
+};
+
+export default ModelColumnEditor;

package/UI/Components/Workflow/ModelSchema.ts

@@ -0,0 +1,196 @@
+/*
+ * Shared access to the workflow /model-schema/:tableName endpoint.
+ *
+ * Three builder inputs are backed by a model's column list — the field picker
+ * for Select arguments, the query builder for Query arguments, and the record
+ * form for create/update arguments — and all three want the same fetch, the
+ * same loading and error handling, and the same column shape.
+ */
+
+import HTTPErrorResponse from "../../../Types/API/HTTPErrorResponse";
+import HTTPResponse from "../../../Types/API/HTTPResponse";
+import URL from "../../../Types/API/URL";
+import { JSONObject } from "../../../Types/JSON";
+import { WORKFLOW_URL } from "../../Config";
+import API from "../../Utils/API/API";
+import { useEffect, useState } from "react";
+
+/**
+ * A column as the endpoint describes it. `type` is deliberately a bare string
+ * rather than the server-side TableColumnType enum, so this file stays on the
+ * browser side of the wire format.
+ */
+export interface ModelSchemaColumn {
+  id: string;
+  title: string;
+  description?: string;
+  type: string;
+  isRelation: boolean;
+  relatedTableName?: string | undefined;
+  relatedColumns?: Array<ModelSchemaColumn> | undefined;
+}
+
+export interface ModelSchemaState {
+  columns: Array<ModelSchemaColumn> | null;
+  isLoading: boolean;
+  error: string | null;
+}
+
+export type FetchModelSchemaFunction = (
+  tableName: string,
+) => Promise<Array<ModelSchemaColumn>>;
+
+export const fetchModelSchema: FetchModelSchemaFunction = async (
+  tableName: string,
+): Promise<Array<ModelSchemaColumn>> => {
+  const url: URL = URL.fromString(WORKFLOW_URL.toString()).addRoute(
+    `/model-schema/${encodeURIComponent(tableName)}`,
+  );
+
+  const result: HTTPResponse<JSONObject> | HTTPErrorResponse =
+    await API.get<JSONObject>({ url });
+
+  if (result instanceof HTTPErrorResponse) {
+    throw result;
+  }
+
+  const data: JSONObject = result.data as JSONObject;
+
+  return (data["columns"] as unknown as Array<ModelSchemaColumn>) || [];
+};
+
+export type UseModelSchemaFunction = (
+  tableName: string | undefined,
+) => ModelSchemaState;
+
+/**
+ * Load a model's columns, once per table name.
+ *
+ * Never throws: a failure leaves `columns` as an empty array and puts the
+ * message in `error`, so a caller can fall back to its JSON editor rather than
+ * showing the builder a blank panel.
+ */
+export const useModelSchema: UseModelSchemaFunction = (
+  tableName: string | undefined,
+): ModelSchemaState => {
+  const [columns, setColumns] = useState<Array<ModelSchemaColumn> | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(Boolean(tableName));
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!tableName) {
+      setColumns([]);
+      setIsLoading(false);
+      return;
+    }
+
+    let cancelled: boolean = false;
+
+    const load: () => Promise<void> = async (): Promise<void> => {
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        const loaded: Array<ModelSchemaColumn> =
+          await fetchModelSchema(tableName);
+
+        if (cancelled) {
+          return;
+        }
+
+        setColumns(loaded);
+      } catch (err) {
+        if (cancelled) {
+          return;
+        }
+
+        setError(API.getFriendlyMessage(err));
+        setColumns([]);
+      } finally {
+        if (!cancelled) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    void load();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [tableName]);
+
+  return { columns: columns, isLoading: isLoading, error: error };
+};
+
+/*
+ * Column types that hold a single scalar the builder can sensibly type into a
+ * box. Everything else (relations, JSON blobs, buffers) needs the JSON editor.
+ */
+const SCALAR_COLUMN_TYPES: Array<string> = [
+  "ShortText",
+  "LongText",
+  "VeryLongText",
+  "Slug",
+  "Email",
+  "Phone",
+  "Color",
+  "Domain",
+  "Name",
+  "Description",
+  "ObjectID",
+  "Number",
+  "PositiveNumber",
+  "Boolean",
+  "Date",
+  "Password",
+  "HashedString",
+  "Port",
+  "Hostname",
+  "URL",
+  "Route",
+  "IP",
+  "Version",
+  "Markdown",
+  "HTML",
+  "JavaScript",
+  "CSS",
+];
+
+export type IsScalarColumnFunction = (column: ModelSchemaColumn) => boolean;
+
+export const isScalarColumn: IsScalarColumnFunction = (
+  column: ModelSchemaColumn,
+): boolean => {
+  return !column.isRelation && SCALAR_COLUMN_TYPES.includes(column.type);
+};
+
+export type IsNumericColumnFunction = (column: ModelSchemaColumn) => boolean;
+
+export const isNumericColumn: IsNumericColumnFunction = (
+  column: ModelSchemaColumn,
+): boolean => {
+  return column.type === "Number" || column.type === "PositiveNumber";
+};
+
+export type IsBooleanColumnFunction = (column: ModelSchemaColumn) => boolean;
+
+export const isBooleanColumn: IsBooleanColumnFunction = (
+  column: ModelSchemaColumn,
+): boolean => {
+  return column.type === "Boolean";
+};
+
+export type FindColumnFunction = (
+  columns: Array<ModelSchemaColumn>,
+  columnId: string,
+) => ModelSchemaColumn | undefined;
+
+export const findColumn: FindColumnFunction = (
+  columns: Array<ModelSchemaColumn>,
+  columnId: string,
+): ModelSchemaColumn | undefined => {
+  return columns.find((column: ModelSchemaColumn) => {
+    return column.id === columnId;
+  });
+};

package/UI/Components/Workflow/RunForm.tsx

@@ -1,9 +1,16 @@
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import BasicForm, { FormProps } from "../Forms/BasicForm";
 import FormValues from "../Forms/Types/FormValues";
-import { componentInputTypeToFormFieldType } from "./Utils";
+import {
+  componentInputTypeToFormFieldType,
+  parseStringDictionaryValue,
+} from "./Utils";
 import { JSONObject } from "../../../Types/JSON";
-import { Argument, NodeDataProp } from "../../../Types/Workflow/Component";
+import {
+  Argument,
+  ComponentInputType,
+  NodeDataProp,
+} from "../../../Types/Workflow/Component";
 import React, {
   FunctionComponent,
   ReactElement,
@@ -34,6 +41,29 @@ const RunForm: FunctionComponent<ComponentProps> = (
     props.onFormChange(component);
   }, [component]);
 
+  /*
+   * Same hydration ArgumentsForm does: a StringDictionary renders as key/value
+   * rows, and those need a real object rather than the JSON string older
+   * workflows stored. The field type is chosen from the same value, so the two
+   * cannot disagree about which editor is on screen.
+   */
+  const formInitialValues: JSONObject = { ...(component.arguments || {}) };
+
+  for (const argument of component.metadata.runWorkflowManuallyArguments ||
+    []) {
+    if (argument.type !== ComponentInputType.StringDictionary) {
+      continue;
+    }
+
+    const parsed: JSONObject | null = parseStringDictionaryValue(
+      formInitialValues[argument.id],
+    );
+
+    if (parsed !== null) {
+      formInitialValues[argument.id] = parsed;
+    }
+  }
+
   return (
     <div className="mb-3 mt-3">
       <div className="mt-5 mb-5">
@@ -57,7 +87,7 @@ const RunForm: FunctionComponent<ComponentProps> = (
               hideSubmitButton={true}
               ref={formRef}
               initialValues={{
-                ...(component.arguments || {}),
+                ...formInitialValues,
               }}
               onChange={(values: FormValues<JSONObject>) => {
                 setComponent({
@@ -86,12 +116,16 @@ const RunForm: FunctionComponent<ComponentProps> = (
                       },
                       required: argument.required,
                       placeholder: argument.placeholder,
+                      /*
+                       * Decided from the value the form actually renders.
+                       * This used to read component.returnValues, which is not
+                       * where RunForm writes — so for a field holding a value
+                       * the row editor cannot represent, the editor on screen
+                       * and the value behind it could disagree.
+                       */
                       ...componentInputTypeToFormFieldType(
                         argument.type,
-                        component.returnValues &&
-                          component.returnValues[argument.id]
-                          ? component.returnValues[argument.id]
-                          : null,
+                        formInitialValues[argument.id] ?? null,
                       ),
                     };
                   },