@oneuptime/common 12.0.9 → 12.0.11

package/UI/Components/Workflow/ColumnEditor/ColumnFieldRow.tsx

@@ -0,0 +1,178 @@
+/*
+ * One field of a record: the column's real name and description on the left,
+ * the value on the right.
+ *
+ * This is a settings form, not a table of key/value pairs, because the keys are
+ * not the builder's to invent - they are the model's columns, and the model has
+ * already said what each one is called and what it means.
+ */
+
+import IconProp from "../../../../Types/Icon/IconProp";
+import AutocompleteTextInput from "../../AutocompleteTextInput/AutocompleteTextInput";
+import Button, { ButtonStyleType } from "../../Button/Button";
+import { ModelSchemaColumn } from "../ModelSchema";
+import { columnTypeLabel, controlForColumn } from "./ColumnControl";
+import {
+  ColumnValueMode,
+  ModelColumnControl,
+  ModelColumnRow,
+  changeColumnRow,
+} from "./ColumnRow";
+import { rowIssue } from "./ColumnRowSerialization";
+import ColumnValueInput from "./ColumnValueInput";
+import React, { FunctionComponent, ReactElement, useId } from "react";
+
+export interface ComponentProps {
+  row: ModelColumnRow;
+  /** Undefined when the stored key is not a column this model describes. */
+  column: ModelSchemaColumn | undefined;
+  /** Every column id, offered as autocomplete when a key has to be retyped. */
+  knownColumnIds: Array<string>;
+  isRequired: boolean;
+  suggestions?: Array<string> | undefined;
+  /** Focused on mount, so a field added from the picker is ready to type into. */
+  autoFocus?: boolean | undefined;
+  onChange: (row: ModelColumnRow) => void;
+  onRemove: () => void;
+}
+
+const ColumnFieldRow: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const labelId: string = useId();
+  const control: ModelColumnControl = controlForColumn(props.column);
+  const issue: string | null = rowIssue(props.row, props.column);
+  const isUnknownColumn: boolean = !props.column;
+  const typeLabel: string = columnTypeLabel(props.column);
+
+  /*
+   * An empty required field is worth pointing at, but only quietly: the step
+   * cannot be saved without it anyway (form validation reads the whole value),
+   * and a red row for something the builder has not reached yet reads as an
+   * error they made.
+   */
+  const isEmptyRequired: boolean =
+    props.isRequired && props.row.text === "" && props.row.values.length === 0;
+
+  return (
+    <div
+      className="group relative grid grid-cols-1 items-start gap-x-4 gap-y-2 px-3 py-3 transition-colors hover:bg-gray-50/60 sm:grid-cols-[minmax(0,14rem)_minmax(0,1fr)_auto]"
+      data-testid="model-column-row"
+    >
+      {isEmptyRequired && (
+        <span
+          className="absolute left-0 top-2 bottom-2 w-0.5 rounded-r bg-amber-400"
+          aria-hidden="true"
+        />
+      )}
+
+      <div className="min-w-0">
+        {isUnknownColumn ? (
+          <div>
+            <AutocompleteTextInput
+              value={props.row.columnId}
+              placeholder="Column name"
+              suggestions={props.knownColumnIds}
+              outerDivClassName="relative w-full"
+              className="block w-full rounded-md border border-amber-300 bg-white py-1.5 pl-2 pr-2 font-mono text-xs text-gray-900 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+              disableSpellCheck={true}
+              onChange={(value: string) => {
+                props.onChange(changeColumnRow(props.row, { columnId: value }));
+              }}
+            />
+            <span className="mt-1 inline-block rounded bg-amber-50 px-1.5 py-0.5 text-[11px] text-amber-700">
+              Not a column on this model
+            </span>
+          </div>
+        ) : (
+          <>
+            <label
+              id={labelId}
+              className="block truncate text-sm font-medium text-gray-900"
+            >
+              {props.column?.title}
+              {props.isRequired && (
+                <span className="ml-0.5 text-red-500" aria-hidden="true">
+                  *
+                </span>
+              )}
+            </label>
+            {/*
+              The column name and its type share a line. Stacked they made every
+              field four lines tall, and the two together are one fact: what this
+              key is called on the wire, and what shape of value it takes.
+
+              The type is dropped when it would only repeat the field's own name -
+              a column called "Color" does not need "Color" printed under it.
+            */}
+            <span className="mt-1 flex items-center gap-1.5 text-[11px] text-gray-500">
+              <span className="truncate rounded bg-gray-100 px-1.5 py-0.5 font-mono">
+                {props.row.columnId}
+              </span>
+              {typeLabel.toLowerCase() !==
+                (props.column?.title || "").toLowerCase() && (
+                <span className="truncate text-gray-400">{typeLabel}</span>
+              )}
+            </span>
+            {/*
+              Wrapped rather than truncated. This sentence is the model's own
+              explanation of the field and is often the only thing that settles
+              what to type; cutting it off mid-word and hiding the rest behind a
+              hover is not a real answer inside a modal.
+            */}
+            {props.column?.description && (
+              <span className="mt-1 block text-xs leading-snug text-gray-500">
+                {props.column.description}
+              </span>
+            )}
+          </>
+        )}
+      </div>
+
+      <div className="min-w-0">
+        <ColumnValueInput
+          control={control}
+          valueMode={props.row.valueMode}
+          text={props.row.text}
+          values={props.row.values}
+          placeholder={props.column?.example || props.column?.placeholder}
+          suggestions={props.suggestions}
+          ariaLabelledby={isUnknownColumn ? undefined : labelId}
+          autoFocus={props.autoFocus}
+          dataTestId={`model-column-value-${props.row.columnId}`}
+          onChange={(change: Partial<ModelColumnRow>) => {
+            props.onChange(changeColumnRow(props.row, change));
+          }}
+        />
+
+        {props.row.valueMode === ColumnValueMode.Raw && (
+          <p className="mt-1 text-[11px] text-amber-600">
+            Kept exactly as it was saved. Editing it rewrites it in this
+            column&apos;s own type.
+          </p>
+        )}
+
+        {issue && <p className="mt-1 text-[11px] text-red-500">{issue}</p>}
+
+        {props.column?.isTenantColumn && (
+          <p className="mt-1 text-[11px] text-gray-500">
+            The workflow sets this itself and ignores what you type here.
+          </p>
+        )}
+      </div>
+
+      <div className="flex items-center pt-1">
+        <Button
+          buttonStyle={ButtonStyleType.ICON}
+          icon={IconProp.Trash}
+          title="Remove"
+          dataTestId={`model-column-remove-${props.row.columnId}`}
+          className="opacity-0 transition-opacity focus-visible:opacity-100 group-hover:opacity-100"
+          onClick={props.onRemove}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ColumnFieldRow;

package/UI/Components/Workflow/ColumnEditor/ColumnOperators.ts

@@ -0,0 +1,206 @@
+/*
+ * Which comparisons a column can be filtered by, and what to call them.
+ *
+ * The old row editor offered all fourteen operators against every column, so a
+ * Boolean column offered "starts with" and an ID column offered "greater than".
+ * Both are accepted by the form and neither means anything - `uuid ILIKE '%x%'`
+ * needs a cast Postgres will not do for you.
+ *
+ * Only the labels change here. The DictionaryFilterOperator members, and
+ * therefore every byte that reaches the server, are exactly the ones the
+ * Dictionary form already emitted.
+ */
+
+import {
+  DICTIONARY_FILTER_OPERATOR_OPTIONS,
+  DictionaryFilterOperator,
+  DictionaryFilterOperatorOption,
+  getOperatorOption,
+} from "../../Dictionary/DictionaryFilterOperator";
+import { ModelColumnControl } from "./ColumnRow";
+
+const TEXT_OPERATORS: Array<DictionaryFilterOperator> = [
+  DictionaryFilterOperator.EqualTo,
+  DictionaryFilterOperator.NotEqual,
+  DictionaryFilterOperator.Contains,
+  DictionaryFilterOperator.NotContains,
+  DictionaryFilterOperator.StartsWith,
+  DictionaryFilterOperator.EndsWith,
+  DictionaryFilterOperator.IsAnyOf,
+  DictionaryFilterOperator.IsNoneOf,
+  DictionaryFilterOperator.IsEmpty,
+  DictionaryFilterOperator.IsNotEmpty,
+];
+
+const NUMBER_OPERATORS: Array<DictionaryFilterOperator> = [
+  DictionaryFilterOperator.EqualTo,
+  DictionaryFilterOperator.NotEqual,
+  DictionaryFilterOperator.GreaterThan,
+  DictionaryFilterOperator.GreaterThanOrEqual,
+  DictionaryFilterOperator.LessThan,
+  DictionaryFilterOperator.LessThanOrEqual,
+  DictionaryFilterOperator.IsAnyOf,
+  DictionaryFilterOperator.IsNoneOf,
+  DictionaryFilterOperator.IsEmpty,
+  DictionaryFilterOperator.IsNotEmpty,
+];
+
+const DATE_OPERATORS: Array<DictionaryFilterOperator> = [
+  DictionaryFilterOperator.EqualTo,
+  DictionaryFilterOperator.NotEqual,
+  DictionaryFilterOperator.GreaterThan,
+  DictionaryFilterOperator.GreaterThanOrEqual,
+  DictionaryFilterOperator.LessThan,
+  DictionaryFilterOperator.LessThanOrEqual,
+  DictionaryFilterOperator.IsEmpty,
+  DictionaryFilterOperator.IsNotEmpty,
+];
+
+const IDENTIFIER_OPERATORS: Array<DictionaryFilterOperator> = [
+  DictionaryFilterOperator.EqualTo,
+  DictionaryFilterOperator.NotEqual,
+  DictionaryFilterOperator.IsAnyOf,
+  DictionaryFilterOperator.IsNoneOf,
+  DictionaryFilterOperator.IsEmpty,
+  DictionaryFilterOperator.IsNotEmpty,
+];
+
+const BOOLEAN_OPERATORS: Array<DictionaryFilterOperator> = [
+  DictionaryFilterOperator.EqualTo,
+  DictionaryFilterOperator.NotEqual,
+  DictionaryFilterOperator.IsEmpty,
+  DictionaryFilterOperator.IsNotEmpty,
+];
+
+/*
+ * A date reads far better as "is after" than as ">", and the ordering
+ * operators are the whole point of filtering on one. Anything not listed keeps
+ * the shared label from DICTIONARY_FILTER_OPERATOR_OPTIONS.
+ */
+const DATE_OPERATOR_LABELS: Partial<Record<DictionaryFilterOperator, string>> =
+  {
+    [DictionaryFilterOperator.EqualTo]: "is",
+    [DictionaryFilterOperator.NotEqual]: "is not",
+    [DictionaryFilterOperator.GreaterThan]: "is after",
+    [DictionaryFilterOperator.GreaterThanOrEqual]: "is on or after",
+    [DictionaryFilterOperator.LessThan]: "is before",
+    [DictionaryFilterOperator.LessThanOrEqual]: "is on or before",
+    [DictionaryFilterOperator.IsEmpty]: "is not set",
+    [DictionaryFilterOperator.IsNotEmpty]: "is set",
+  };
+
+const BOOLEAN_OPERATOR_LABELS: Partial<
+  Record<DictionaryFilterOperator, string>
+> = {
+  [DictionaryFilterOperator.EqualTo]: "is",
+  [DictionaryFilterOperator.NotEqual]: "is not",
+  [DictionaryFilterOperator.IsEmpty]: "is not set",
+  [DictionaryFilterOperator.IsNotEmpty]: "is set",
+};
+
+const DEFAULT_OPERATOR_LABELS: Partial<
+  Record<DictionaryFilterOperator, string>
+> = {
+  [DictionaryFilterOperator.IsEmpty]: "is not set",
+  [DictionaryFilterOperator.IsNotEmpty]: "is set",
+};
+
+export type OperatorsForControlFunction = (
+  control: ModelColumnControl,
+  currentOperator?: DictionaryFilterOperator | undefined,
+) => Array<DictionaryFilterOperator>;
+
+/**
+ * The operators offered for a column, in the order they should be listed.
+ *
+ * `currentOperator` is always included even when the type filter would drop it.
+ * A query saved before this filter existed can hold "contains" on an ID column;
+ * leaving it out of the list would render a blank dropdown, and the next
+ * unrelated edit to that row would silently rewrite the operator to equals.
+ */
+export const operatorsForControl: OperatorsForControlFunction = (
+  control: ModelColumnControl,
+  currentOperator?: DictionaryFilterOperator | undefined,
+): Array<DictionaryFilterOperator> => {
+  let operators: Array<DictionaryFilterOperator>;
+
+  switch (control) {
+    case ModelColumnControl.Number:
+      operators = NUMBER_OPERATORS;
+      break;
+    case ModelColumnControl.Date:
+      operators = DATE_OPERATORS;
+      break;
+    case ModelColumnControl.ObjectId:
+    case ModelColumnControl.Color:
+      operators = IDENTIFIER_OPERATORS;
+      break;
+    case ModelColumnControl.Boolean:
+      operators = BOOLEAN_OPERATORS;
+      break;
+    default:
+      /*
+       * Unsupported lands here too. It is never offered in the picker, but a
+       * stored condition on such a column still gets a row, and that row should
+       * have the widest set rather than the narrowest.
+       */
+      operators = TEXT_OPERATORS;
+      break;
+  }
+
+  if (currentOperator && !operators.includes(currentOperator)) {
+    return [...operators, currentOperator];
+  }
+
+  return [...operators];
+};
+
+export type DefaultOperatorForControlFunction = (
+  control: ModelColumnControl,
+) => DictionaryFilterOperator;
+
+export const defaultOperatorForControl: DefaultOperatorForControlFunction =
+  (): DictionaryFilterOperator => {
+    /*
+     * Equals for every type. It is the only operator that is right more often
+     * than not, and it is the one the value serializes without a wrapper.
+     */
+    return DictionaryFilterOperator.EqualTo;
+  };
+
+export type OperatorLabelForFunction = (
+  operator: DictionaryFilterOperator,
+  control: ModelColumnControl,
+) => string;
+
+export const operatorLabelFor: OperatorLabelForFunction = (
+  operator: DictionaryFilterOperator,
+  control: ModelColumnControl,
+): string => {
+  const overrides: Partial<Record<DictionaryFilterOperator, string>> =
+    control === ModelColumnControl.Date
+      ? DATE_OPERATOR_LABELS
+      : control === ModelColumnControl.Boolean
+        ? BOOLEAN_OPERATOR_LABELS
+        : DEFAULT_OPERATOR_LABELS;
+
+  const override: string | undefined = overrides[operator];
+
+  if (override) {
+    return override;
+  }
+
+  return getOperatorOption(operator).label;
+};
+
+export type IsKnownOperatorFunction = (value: string) => boolean;
+
+export const isKnownOperator: IsKnownOperatorFunction = (
+  value: string,
+): boolean => {
+  return DICTIONARY_FILTER_OPERATOR_OPTIONS.some(
+    (option: DictionaryFilterOperatorOption) => {
+      return option.operator === value;
+    },
+  );
+};

package/UI/Components/Workflow/ColumnEditor/ColumnRow.ts

@@ -0,0 +1,157 @@
+/*
+ * The row model shared by the record form and the query builder.
+ *
+ * A row is one column of the model plus the value the builder typed for it.
+ * Everything the editor knows about a row that is not the schema lives here,
+ * and the two React bodies hold no state of their own — ModelColumnEditor owns
+ * the array and hands it down, so a row can never disagree with the JSON the
+ * argument is stored as.
+ */
+
+import { DictionaryFilterOperator } from "../../Dictionary/DictionaryFilterOperator";
+
+/**
+ * The kind of control a column's value is typed into.
+ *
+ * Deliberately much smaller than TableColumnType: the builder does not need a
+ * different box for Email than for Slug, and every extra control is another
+ * thing that can render the wrong way round. What matters is the shape of the
+ * value that comes out — string, number, boolean, ISO date — because that is
+ * what ends up in the JSON the server parses.
+ */
+export enum ModelColumnControl {
+  Text = "Text",
+  LongText = "LongText",
+  Number = "Number",
+  Boolean = "Boolean",
+  Date = "Date",
+  ObjectId = "ObjectId",
+  Color = "Color",
+  /** Buffers, files, nested JSON, monitor steps — no row can hold one. */
+  Unsupported = "Unsupported",
+}
+
+/**
+ * How the value in a row is being edited.
+ *
+ * Literal is the type-appropriate control. Reference is the {{ }} autocomplete,
+ * available on every column type because most creates are assembled out of an
+ * earlier step's return values. Raw is the escape hatch for a stored scalar
+ * whose JavaScript type disagrees with the column's — `{"port": "8080"}` on a
+ * numeric column — which is re-emitted exactly as it was read until the builder
+ * edits that one cell. Without Raw, opening a workflow and saving it again
+ * would quietly rewrite the stored bytes.
+ */
+export enum ColumnValueMode {
+  Literal = "Literal",
+  Reference = "Reference",
+  Raw = "Raw",
+}
+
+/**
+ * One row of the editor.
+ *
+ * `text` is what the control shows and is always a string, whatever the column
+ * type — the conversion to a JSON number/boolean/null happens once, on the way
+ * out, in ColumnRowSerialization. `values` is only used by the multi-value
+ * operators (is any of / is none of), which Record mode never offers.
+ */
+export interface ModelColumnRow {
+  /**
+   * This row's identity for React, fixed when the row is created.
+   *
+   * It cannot be the column name: an unknown column is edited in a text box, so
+   * keying on the name would give the row a new identity on every keystroke,
+   * unmount it mid-word and take the focused input with it.
+   */
+  key: string;
+  /** The column name as it will be written into the JSON object. */
+  columnId: string;
+  operator: DictionaryFilterOperator;
+  valueMode: ColumnValueMode;
+  text: string;
+  values: Array<string>;
+  /**
+   * True for a blank row the editor opened with because the model says a create
+   * must supply this column. Seeded rows serialize away while they are empty,
+   * so an untouched Create One still reads as "nothing set" to form validation
+   * and to the graph linter.
+   */
+  isSeeded: boolean;
+  /**
+   * The value exactly as it was read from storage, kept only for
+   * ColumnValueMode.Raw so that round-tripping is byte-for-byte.
+   */
+  rawValue?: unknown;
+}
+
+/*
+ * A counter rather than a random id, so a row's identity is reproducible and
+ * two editors mounted in the same page can never collide.
+ */
+let nextRowKey: number = 0;
+
+export type MakeColumnRowFunction = (
+  row: Partial<ModelColumnRow> & { columnId: string },
+) => ModelColumnRow;
+
+export const makeColumnRow: MakeColumnRowFunction = (
+  row: Partial<ModelColumnRow> & { columnId: string },
+): ModelColumnRow => {
+  nextRowKey = nextRowKey + 1;
+
+  return {
+    key: row.key || `row-${nextRowKey}`,
+    columnId: row.columnId,
+    operator: row.operator || DictionaryFilterOperator.EqualTo,
+    valueMode: row.valueMode || ColumnValueMode.Literal,
+    text: row.text === undefined ? "" : row.text,
+    values: row.values || [],
+    isSeeded: Boolean(row.isSeeded),
+    ...(row.rawValue === undefined ? {} : { rawValue: row.rawValue }),
+  };
+};
+
+/**
+ * A row with some of its fields changed.
+ *
+ * Every edit goes through here rather than through several separate callbacks,
+ * because two callbacks fired from one event both close over the same render's
+ * row and the second silently discards the first. That is how editing a raw
+ * cell came to change the box on screen without changing what was stored.
+ *
+ * Leaving Raw drops the stored original: from that point the builder's own
+ * value is what the row means, in the column's own type.
+ */
+export type ChangeColumnRowFunction = (
+  row: ModelColumnRow,
+  change: Partial<
+    Pick<
+      ModelColumnRow,
+      "columnId" | "operator" | "valueMode" | "text" | "values"
+    >
+  >,
+) => ModelColumnRow;
+
+export const changeColumnRow: ChangeColumnRowFunction = (
+  row: ModelColumnRow,
+  change: Partial<
+    Pick<
+      ModelColumnRow,
+      "columnId" | "operator" | "valueMode" | "text" | "values"
+    >
+  >,
+): ModelColumnRow => {
+  const next: ModelColumnRow = {
+    ...row,
+    ...change,
+    // Any edit means the row is no longer just a blank the editor opened with.
+    isSeeded: false,
+  };
+
+  if (next.valueMode !== ColumnValueMode.Raw) {
+    delete next.rawValue;
+  }
+
+  return next;
+};