@oneuptime/common 14.0.11 → 14.0.12

package/UI/Components/Workflow/ValuePicker/ArgumentControl.ts

@@ -0,0 +1,146 @@
+/*
+ * Which control a step's setting gets, now that every setting that can hold a
+ * value from an earlier step offers one.
+ *
+ * - Text of any length is the chip editor (ValueTextField): one line for
+ *   short values - a URL, an address, an ID, a subject - and a box that grows
+ *   for messages, prompts and the Log value.
+ * - A number, a password, a switch or a date keeps its own control, with { }
+ *   beside it; a picked value replaces it as a chip (ValueSingleField).
+ * - JSON and HTML keep their code editor, whose toolbar gets "Insert value".
+ * - Request headers keep their key/value rows, each value a chip editor.
+ * - JavaScript gets nothing: a step's values reach the code through its
+ *   Arguments setting, which is JSON and does get the picker. Its help says so.
+ * - Choices from a fixed list (an operator, a value type, a workflow) get
+ *   nothing either: a value from a run is not one of the choices.
+ *
+ * The row editor, field picker and schedule picker are chosen before this, in
+ * ArgumentsForm, for the settings that have them.
+ *
+ * Pure, so the whole table can be tested.
+ */
+
+import { ComponentInputType } from "../../../../Types/Workflow/Component";
+import { containsTemplateExpression } from "./TemplateText";
+
+export enum ArgumentControl {
+  /** The chip editor, one line. */
+  Text = "Text",
+  /** The chip editor, growing with what is in it. */
+  MultiLineText = "MultiLineText",
+  Number = "Number",
+  Password = "Password",
+  Boolean = "Boolean",
+  Date = "Date",
+  DateTime = "DateTime",
+  /** A JSON document in the code editor, with "Insert value". */
+  JSONCode = "JSONCode",
+  /** HTML in the code editor, with "Insert value". */
+  HTMLCode = "HTMLCode",
+  /** Key/value rows whose values are chip editors. */
+  KeyValueRows = "KeyValueRows",
+  /** The control componentInputTypeToFormFieldType picks, with no picker. */
+  Plain = "Plain",
+}
+
+const ONE_LINE_TEXT_TYPES: Array<ComponentInputType> = [
+  ComponentInputType.Text,
+  ComponentInputType.URL,
+  ComponentInputType.Email,
+];
+
+// Utils.MULTI_LINE_TEXT_INPUT_TYPES, repeated so this file stays pure.
+const MULTI_LINE_TEXT_TYPES: Array<ComponentInputType> = [
+  ComponentInputType.LongText,
+  ComponentInputType.Markdown,
+  ComponentInputType.AnyValue,
+];
+
+const JSON_TYPES: Array<ComponentInputType> = [
+  ComponentInputType.JSON,
+  ComponentInputType.JSONArray,
+  ComponentInputType.BaseModel,
+  ComponentInputType.BaseModelArray,
+  ComponentInputType.Query,
+  ComponentInputType.Select,
+];
+
+const CHOICE_TYPES: Array<ComponentInputType> = [
+  ComponentInputType.Operator,
+  ComponentInputType.ValueType,
+  ComponentInputType.WorkflowSelect,
+  ComponentInputType.CronTab,
+];
+
+export type ArgumentControlForFunction = (data: {
+  type: ComponentInputType;
+  value: unknown;
+  /**
+   * For a dictionary: whether its value can be shown as rows
+   * (Utils.parseStringDictionaryValue). One that cannot stays JSON.
+   */
+  isRowsDictionary?: boolean | undefined;
+}) => ArgumentControl;
+
+export const argumentControlFor: ArgumentControlForFunction = (data: {
+  type: ComponentInputType;
+  value: unknown;
+  isRowsDictionary?: boolean | undefined;
+}): ArgumentControl => {
+  const type: ComponentInputType = data.type;
+
+  if (ONE_LINE_TEXT_TYPES.includes(type)) {
+    return ArgumentControl.Text;
+  }
+
+  if (MULTI_LINE_TEXT_TYPES.includes(type)) {
+    return ArgumentControl.MultiLineText;
+  }
+
+  if (
+    type === ComponentInputType.Number ||
+    type === ComponentInputType.Decimal
+  ) {
+    return ArgumentControl.Number;
+  }
+
+  if (type === ComponentInputType.Password) {
+    return ArgumentControl.Password;
+  }
+
+  if (type === ComponentInputType.Boolean) {
+    return ArgumentControl.Boolean;
+  }
+
+  if (type === ComponentInputType.Date) {
+    return ArgumentControl.Date;
+  }
+
+  if (type === ComponentInputType.DateTime) {
+    return ArgumentControl.DateTime;
+  }
+
+  if (type === ComponentInputType.HTML) {
+    return ArgumentControl.HTMLCode;
+  }
+
+  if (type === ComponentInputType.StringDictionary) {
+    return data.isRowsDictionary
+      ? ArgumentControl.KeyValueRows
+      : ArgumentControl.JSONCode;
+  }
+
+  if (JSON_TYPES.includes(type)) {
+    return ArgumentControl.JSONCode;
+  }
+
+  /*
+   * A choice that somehow holds a reference (an imported workflow, say) is
+   * shown as the reference it is, rather than as a choice it is not.
+   */
+  if (CHOICE_TYPES.includes(type) && containsTemplateExpression(data.value)) {
+    return ArgumentControl.Text;
+  }
+
+  return ArgumentControl.Plain;
+};

package/UI/Components/Workflow/ValuePicker/DefaultValueSources.ts

@@ -0,0 +1,148 @@
+/*
+ * The sources the value picker uses unless it is told otherwise: the steps
+ * that run before this one, what they held the last times they ran, and the
+ * workflow's variables. All need the API (a record's fields, the runs, the
+ * variable list), which is why they are put together here and not in the
+ * pure modules they are built from.
+ *
+ * Another source is added by handing the provider a longer list
+ * (ValuePickerProvider's `sources`).
+ */
+
+import HTTPErrorResponse from "../../../../Types/API/HTTPErrorResponse";
+import HTTPResponse from "../../../../Types/API/HTTPResponse";
+import URL from "../../../../Types/API/URL";
+import { LIMIT_PER_PROJECT } from "../../../../Types/Database/LimitMax";
+import EqualToOrNull from "../../../../Types/BaseDatabase/EqualToOrNull";
+import { JSONObject } from "../../../../Types/JSON";
+import ObjectID from "../../../../Types/ObjectID";
+import {
+  StepSample,
+  parseStepSamplesResponse,
+} from "../../../../Types/Workflow/StepSamples";
+import { WorkflowVariableType } from "../../../../Types/Workflow/WorkflowVariableOAuth";
+import WorkflowVariable from "../../../../Models/DatabaseModels/WorkflowVariable";
+import { WORKFLOW_URL } from "../../../Config";
+import API from "../../../Utils/API/API";
+import ModelAPI, { ListResult } from "../../../Utils/ModelAPI/ModelAPI";
+import { fetchModelSchema } from "../ModelSchema";
+import {
+  LoadStepSamplesFunction,
+  createStepSampleSource,
+} from "./StepSampleSource";
+import { createStepValueSource } from "./StepValueSource";
+import {
+  ValueSuggestionContext,
+  ValueSuggestionGroup,
+  ValueSuggestionSource,
+} from "./ValueSuggestion";
+import {
+  VARIABLE_SOURCE_ID,
+  WorkflowVariableSummary,
+  buildVariableGroups,
+} from "./VariableValueSource";
+
+export type LoadWorkflowVariablesFunction = (
+  workflowId: ObjectID,
+) => Promise<Array<WorkflowVariableSummary>>;
+
+/** This workflow's variables and the project's global ones. */
+export const loadWorkflowVariables: LoadWorkflowVariablesFunction = async (
+  workflowId: ObjectID,
+): Promise<Array<WorkflowVariableSummary>> => {
+  const result: ListResult<WorkflowVariable> =
+    await ModelAPI.getList<WorkflowVariable>({
+      modelType: WorkflowVariable,
+      // A null workflowId is a global variable, readable from every workflow.
+      query: {
+        workflowId: new EqualToOrNull(workflowId.toString()),
+      },
+      limit: LIMIT_PER_PROJECT,
+      skip: 0,
+      select: {
+        _id: true,
+        name: true,
+        description: true,
+        workflowId: true,
+        isSecret: true,
+        variableType: true,
+      },
+      sort: {
+        name: "Ascending" as any,
+      },
+    });
+
+  return result.data.map(
+    (variable: WorkflowVariable): WorkflowVariableSummary => {
+      return {
+        name: (variable.name as string) || "",
+        description: variable.description || undefined,
+        isGlobal: !variable.workflowId,
+        isSecret: Boolean(variable.isSecret),
+        isOAuth: variable.variableType === WorkflowVariableType.OAuth2,
+      };
+    },
+  );
+};
+
+/**
+ * What these steps held the last times the workflow ran (see the workflow
+ * service's /step-samples). The project goes in the tenant header, like any
+ * other read of the project's data.
+ */
+export const loadStepSamples: LoadStepSamplesFunction = async (
+  workflowId: ObjectID,
+  componentIds: Array<string>,
+): Promise<Array<StepSample>> => {
+  const result: HTTPResponse<JSONObject> | HTTPErrorResponse =
+    await API.post<JSONObject>({
+      url: URL.fromString(WORKFLOW_URL.toString()).addRoute(
+        `/step-samples/${workflowId.toString()}`,
+      ),
+      data: { componentIds: componentIds },
+      headers: ModelAPI.getCommonHeaders(),
+    });
+
+  if (result instanceof HTTPErrorResponse) {
+    throw result;
+  }
+
+  return parseStepSamplesResponse(result.data);
+};
+
+export type CreateVariableValueSourceFunction = (
+  load?: LoadWorkflowVariablesFunction,
+) => ValueSuggestionSource;
+
+export const createVariableValueSource: CreateVariableValueSourceFunction = (
+  load: LoadWorkflowVariablesFunction = loadWorkflowVariables,
+): ValueSuggestionSource => {
+  return {
+    id: VARIABLE_SOURCE_ID,
+    loadGroups: async (
+      context: ValueSuggestionContext,
+    ): Promise<Array<ValueSuggestionGroup>> => {
+      if (!context.workflowId) {
+        return [];
+      }
+
+      return buildVariableGroups(await load(context.workflowId));
+    },
+  };
+};
+
+export type CreateDefaultValueSourcesFunction =
+  () => Array<ValueSuggestionSource>;
+
+export const createDefaultValueSources: CreateDefaultValueSourcesFunction =
+  (): Array<ValueSuggestionSource> => {
+    return [
+      createStepValueSource({
+        loadRecordColumns: (tableName: string) => {
+          return fetchModelSchema(tableName, "read");
+        },
+      }),
+      createStepSampleSource({ load: loadStepSamples }),
+      createVariableValueSource(),
+    ];
+  };

package/UI/Components/Workflow/ValuePicker/InsertValueButton.tsx

@@ -0,0 +1,116 @@
+/*
+ * A button that opens the list of values, for places where the value does
+ * not go into a text field of this picker's own: a code editor's toolbar
+ * (JSON, an email's HTML), or the Schedule trigger's choice of variable.
+ */
+
+import { ValueSuggestionGroup } from "./ValueSuggestion";
+import { ValuePickerContextValue, useValuePicker } from "./ValuePickerContext";
+import ValuePickerMenu from "./ValuePickerMenu";
+import ValuePickerPopup, {
+  ValuePickerCloseReason,
+  ValuePickerPopupMode,
+} from "./ValuePickerPopup";
+import { INSERT_VALUE_LABEL } from "./ValueTextField";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  ReactNode,
+  useRef,
+  useState,
+} from "react";
+
+export interface InsertValueButtonProps {
+  onPick: (reference: string) => void;
+  /** What the button says. Defaults to "{ } Insert value". */
+  children?: ReactNode | undefined;
+  /** The button's accessible name, when its text is not enough. */
+  ariaLabel?: string | undefined;
+  groupFilter?: ((group: ValueSuggestionGroup) => boolean) | undefined;
+  searchPlaceholder?: string | undefined;
+  emptyMessage?: string | undefined;
+  className?: string | undefined;
+  dataTestId?: string | undefined;
+  /** Called as the button is pressed, before it takes the focus. */
+  onPressStart?: (() => void) | undefined;
+  /** Where the focus goes when the list closes with Escape or Tab. */
+  onCloseFocus?: (() => void) | undefined;
+}
+
+const DEFAULT_CLASS: string =
+  "inline-flex shrink-0 items-center gap-1 rounded px-2 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-200 hover:text-gray-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500";
+
+const InsertValueButton: FunctionComponent<InsertValueButtonProps> = (
+  props: InsertValueButtonProps,
+): ReactElement | null => {
+  const picker: ValuePickerContextValue = useValuePicker();
+  const anchorRef: React.MutableRefObject<HTMLButtonElement | null> =
+    useRef<HTMLButtonElement | null>(null);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  if (!picker.isAvailable) {
+    return null;
+  }
+
+  return (
+    <>
+      <button
+        ref={anchorRef}
+        type="button"
+        className={props.className || DEFAULT_CLASS}
+        aria-label={
+          props.ariaLabel || (props.children ? undefined : INSERT_VALUE_LABEL)
+        }
+        title={props.ariaLabel || INSERT_VALUE_LABEL}
+        aria-haspopup="dialog"
+        aria-expanded={isOpen}
+        data-testid={props.dataTestId || "insert-value-button"}
+        onMouseDown={() => {
+          props.onPressStart?.();
+        }}
+        onClick={() => {
+          setIsOpen(!isOpen);
+        }}
+      >
+        {props.children || (
+          <>
+            <span className="font-mono text-[11px] leading-none">{"{ }"}</span>
+            Insert value
+          </>
+        )}
+      </button>
+
+      {isOpen && (
+        <ValuePickerPopup
+          anchorRef={anchorRef}
+          mode={ValuePickerPopupMode.Popover}
+          ariaLabel="Insert a value"
+          onClose={(reason: ValuePickerCloseReason) => {
+            setIsOpen(false);
+
+            if (reason !== ValuePickerCloseReason.Outside) {
+              if (props.onCloseFocus) {
+                props.onCloseFocus();
+              } else {
+                anchorRef.current?.focus();
+              }
+            }
+          }}
+        >
+          <ValuePickerMenu
+            hasSearchBox={true}
+            groupFilter={props.groupFilter}
+            searchPlaceholder={props.searchPlaceholder}
+            emptyMessage={props.emptyMessage}
+            onPick={(reference: string) => {
+              setIsOpen(false);
+              props.onPick(reference);
+            }}
+          />
+        </ValuePickerPopup>
+      )}
+    </>
+  );
+};
+
+export default InsertValueButton;

package/UI/Components/Workflow/ValuePicker/ReferenceChip.tsx

@@ -0,0 +1,162 @@
+/*
+ * A reference, drawn as a chip: "Webhook › Request Body" in place of
+ * {{local.components.webhook-1.returnValues.request-body}}, with the
+ * reference itself in the tooltip.
+ *
+ * Two forms of the same chip. The editor builds its content with the DOM
+ * directly (React does not own what is inside a contenteditable), so it uses
+ * createReferenceChipElement; anywhere else, ReferenceChip. Both take their
+ * classes from here, so they cannot drift apart.
+ */
+
+import {
+  LABEL_SEPARATOR,
+  ReferenceDescription,
+  ReferenceTone,
+} from "./ReferenceDescription";
+import React, { FunctionComponent, ReactElement } from "react";
+
+/** Marks a chip in the editor; its value is the reference the chip stands for. */
+export const CHIP_REFERENCE_ATTRIBUTE: string = "data-template-reference";
+
+const CHIP_BASE_CLASS: string =
+  "inline-flex max-w-full cursor-default select-none items-center gap-1 whitespace-nowrap rounded-md border px-1.5 py-px align-baseline text-xs font-medium leading-4";
+
+const CHIP_TONE_CLASS: Record<ReferenceTone, string> = {
+  [ReferenceTone.Normal]: "border-indigo-200 bg-indigo-50 text-indigo-700",
+  [ReferenceTone.Warning]: "border-amber-200 bg-amber-50 text-amber-700",
+};
+
+const CHIP_SOURCE_CLASS: Record<ReferenceTone, string> = {
+  [ReferenceTone.Normal]: "truncate font-normal text-indigo-500",
+  [ReferenceTone.Warning]: "truncate font-normal text-amber-600",
+};
+
+const CHIP_PART_CLASS: string = "truncate";
+
+const CHIP_SEPARATOR_CLASS: string = "shrink-0 opacity-60";
+
+export type ChipClassNameFunction = (tone: ReferenceTone) => string;
+
+export const chipClassName: ChipClassNameFunction = (
+  tone: ReferenceTone,
+): string => {
+  return `${CHIP_BASE_CLASS} ${CHIP_TONE_CLASS[tone]}`;
+};
+
+export type ChipTitleFunction = (
+  description: ReferenceDescription | null,
+  reference: string,
+) => string;
+
+/** The tooltip: the reference as stored, and what is wrong with it if anything. */
+export const chipTitle: ChipTitleFunction = (
+  description: ReferenceDescription | null,
+  reference: string,
+): string => {
+  if (description?.problem) {
+    return `${reference}\n${description.problem}`;
+  }
+
+  return reference;
+};
+
+export type CreateReferenceChipElementFunction = (
+  ownerDocument: Document,
+  reference: string,
+  description: ReferenceDescription | null,
+) => HTMLElement;
+
+/**
+ * The chip as a DOM element, for the editor. Not editable, not draggable, and
+ * carrying its reference in an attribute, which is what the editor reads back.
+ */
+export const createReferenceChipElement: CreateReferenceChipElementFunction = (
+  ownerDocument: Document,
+  reference: string,
+  description: ReferenceDescription | null,
+): HTMLElement => {
+  const tone: ReferenceTone = description?.tone || ReferenceTone.Normal;
+
+  const chip: HTMLElement = ownerDocument.createElement("span");
+  chip.setAttribute(CHIP_REFERENCE_ATTRIBUTE, reference);
+  chip.setAttribute("contenteditable", "false");
+  chip.setAttribute("draggable", "false");
+  chip.setAttribute("data-testid", "template-reference-chip");
+  chip.setAttribute("data-tone", tone);
+  chip.setAttribute("title", chipTitle(description, reference));
+  chip.className = chipClassName(tone);
+
+  if (!description) {
+    // Not one this workflow can name: the reference itself, as written.
+    const raw: HTMLElement = ownerDocument.createElement("span");
+    raw.className = CHIP_PART_CLASS;
+    raw.textContent = reference;
+    chip.appendChild(raw);
+    return chip;
+  }
+
+  const source: HTMLElement = ownerDocument.createElement("span");
+  source.className = CHIP_SOURCE_CLASS[tone];
+  source.textContent = description.source;
+  chip.appendChild(source);
+
+  for (const part of description.parts) {
+    const separator: HTMLElement = ownerDocument.createElement("span");
+    separator.className = CHIP_SEPARATOR_CLASS;
+    separator.setAttribute("aria-hidden", "true");
+    separator.textContent = LABEL_SEPARATOR.trim();
+    chip.appendChild(separator);
+
+    const partElement: HTMLElement = ownerDocument.createElement("span");
+    partElement.className = CHIP_PART_CLASS;
+    partElement.textContent = part;
+    chip.appendChild(partElement);
+  }
+
+  return chip;
+};
+
+export interface ReferenceChipProps {
+  reference: string;
+  description: ReferenceDescription | null;
+  dataTestId?: string | undefined;
+}
+
+/** The same chip, for places that are not the editor. */
+export const ReferenceChip: FunctionComponent<ReferenceChipProps> = (
+  props: ReferenceChipProps,
+): ReactElement => {
+  const tone: ReferenceTone = props.description?.tone || ReferenceTone.Normal;
+
+  return (
+    <span
+      className={chipClassName(tone)}
+      title={chipTitle(props.description, props.reference)}
+      data-testid={props.dataTestId || "template-reference-chip"}
+      data-tone={tone}
+    >
+      {!props.description ? (
+        <span className={CHIP_PART_CLASS}>{props.reference}</span>
+      ) : (
+        <>
+          <span className={CHIP_SOURCE_CLASS[tone]}>
+            {props.description.source}
+          </span>
+          {props.description.parts.map((part: string, index: number) => {
+            return (
+              <React.Fragment key={index}>
+                <span className={CHIP_SEPARATOR_CLASS} aria-hidden="true">
+                  {LABEL_SEPARATOR.trim()}
+                </span>
+                <span className={CHIP_PART_CLASS}>{part}</span>
+              </React.Fragment>
+            );
+          })}
+        </>
+      )}
+    </span>
+  );
+};
+
+export default ReferenceChip;