@oneuptime/common 12.0.9 → 12.0.11

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

@@ -0,0 +1,177 @@
+/*
+ * The "add a field" picker.
+ *
+ * This is the part that answers the complaint directly: the columns are already
+ * known, so they are offered by name and description rather than typed from
+ * memory into a box labelled "Key". Required columns are grouped first, because
+ * on a create those are the ones that decide whether the step works at all.
+ */
+
+import IconProp from "../../../../Types/Icon/IconProp";
+import Button, { ButtonSize, ButtonStyleType } from "../../Button/Button";
+import Dropdown, {
+  DropdownOption,
+  DropdownOptionGroup,
+  DropdownValue,
+} from "../../Dropdown/Dropdown";
+import Icon from "../../Icon/Icon";
+import Input from "../../Input/Input";
+import { ModelSchemaColumn } from "../ModelSchema";
+import { columnTypeLabel } from "./ColumnControl";
+import React, { FunctionComponent, ReactElement, useState } from "react";
+
+export interface ComponentProps {
+  /** Already filtered to what may be offered, and to what is not on screen. */
+  columns: Array<ModelSchemaColumn>;
+  /** Column ids a create must be given a value for, listed first. */
+  requiredColumnIds: Array<string>;
+  placeholder: string;
+  /**
+   * True when there is nothing to offer from the schema - it failed to load, or
+   * every column is already on screen - and the builder must still be able to
+   * name one. The runner accepts column names this endpoint does not describe.
+   */
+  allowCustomColumn: boolean;
+  onAdd: (columnId: string) => void;
+  dataTestId?: string | undefined;
+}
+
+type ToOptionFunction = (column: ModelSchemaColumn) => DropdownOption;
+
+const toOption: ToOptionFunction = (
+  column: ModelSchemaColumn,
+): DropdownOption => {
+  return {
+    value: column.id,
+    label: `${column.title} · ${column.id}`,
+    /*
+     * The model's own description, shown as the option's second line. It is the
+     * sentence that was previously nowhere on this screen, and it is the whole
+     * reason the picker beats a text box.
+     */
+    description: column.description || columnTypeLabel(column),
+  };
+};
+
+const AddColumnDropdown: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [customColumnId, setCustomColumnId] = useState<string>("");
+  const [isNamingCustomColumn, setIsNamingCustomColumn] =
+    useState<boolean>(false);
+  /*
+   * Bumped after every pick to remount the dropdown. It keeps its selection in
+   * state of its own and only re-reads props.value when that prop changes, so
+   * without this the picker would go on displaying the field it just added -
+   * as though it were a filter rather than an action.
+   */
+  const [pickerNonce, setPickerNonce] = useState<number>(0);
+
+  type AddCustomColumnFunction = () => void;
+
+  const addCustomColumn: AddCustomColumnFunction = (): void => {
+    const columnId: string = customColumnId.trim();
+
+    if (columnId === "") {
+      return;
+    }
+
+    props.onAdd(columnId);
+    setCustomColumnId("");
+    setIsNamingCustomColumn(false);
+  };
+
+  const hasOptions: boolean = props.columns.length > 0;
+
+  if (isNamingCustomColumn || !hasOptions) {
+    return (
+      <div className="flex items-start gap-2">
+        <div className="w-64">
+          <Input
+            value={customColumnId}
+            placeholder="Column name"
+            outerDivClassName="relative w-full"
+            dataTestId={`${props.dataTestId || "model-column-add"}-custom`}
+            onChange={setCustomColumnId}
+            onEnterPress={addCustomColumn}
+          />
+        </div>
+        <Button
+          title="Add"
+          buttonSize={ButtonSize.Small}
+          buttonStyle={ButtonStyleType.OUTLINE}
+          onClick={addCustomColumn}
+        />
+        {hasOptions && (
+          <Button
+            title="Cancel"
+            buttonSize={ButtonSize.Small}
+            buttonStyle={ButtonStyleType.SECONDARY_LINK}
+            onClick={() => {
+              setIsNamingCustomColumn(false);
+              setCustomColumnId("");
+            }}
+          />
+        )}
+      </div>
+    );
+  }
+
+  const requiredColumns: Array<ModelSchemaColumn> = props.columns.filter(
+    (column: ModelSchemaColumn) => {
+      return props.requiredColumnIds.includes(column.id);
+    },
+  );
+
+  const otherColumns: Array<ModelSchemaColumn> = props.columns.filter(
+    (column: ModelSchemaColumn) => {
+      return !props.requiredColumnIds.includes(column.id);
+    },
+  );
+
+  const options: Array<DropdownOption | DropdownOptionGroup> =
+    requiredColumns.length > 0
+      ? [
+          { label: "Required", options: requiredColumns.map(toOption) },
+          { label: "All fields", options: otherColumns.map(toOption) },
+        ]
+      : props.columns.map(toOption);
+
+  return (
+    <div className="flex items-center gap-3">
+      <div className="w-72">
+        <Dropdown
+          key={pickerNonce}
+          options={options}
+          placeholder={props.placeholder}
+          className="relative w-full overflow-visible rounded-md"
+          isMultiSelect={false}
+          dataTestId={props.dataTestId || "model-column-add"}
+          ariaLabel={props.placeholder}
+          onChange={(value: DropdownValue | Array<DropdownValue> | null) => {
+            if (value === null || Array.isArray(value)) {
+              return;
+            }
+
+            setPickerNonce(pickerNonce + 1);
+            props.onAdd(String(value));
+          }}
+        />
+      </div>
+      {props.allowCustomColumn && (
+        <button
+          type="button"
+          className="inline-flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700"
+          onClick={() => {
+            setIsNamingCustomColumn(true);
+          }}
+        >
+          <Icon icon={IconProp.Add} className="h-3 w-3" />
+          Add a column by name
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default AddColumnDropdown;

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

@@ -0,0 +1,243 @@
+/*
+ * One condition of a query: column, comparison, value.
+ *
+ * A condition genuinely picks its subject, so this row keeps a column picker -
+ * but a picker of real columns, not a text box. The comparison list is filtered
+ * by the column's type, so a Boolean column no longer offers "starts with" and
+ * an ID column no longer offers "greater than".
+ */
+
+import IconProp from "../../../../Types/Icon/IconProp";
+import Button, { ButtonStyleType } from "../../Button/Button";
+import {
+  DictionaryFilterOperator,
+  DictionaryFilterOperatorOption,
+  getOperatorOption,
+} from "../../Dictionary/DictionaryFilterOperator";
+import Dropdown, {
+  DropdownOption,
+  DropdownValue,
+} from "../../Dropdown/Dropdown";
+import AutocompleteTextInput from "../../AutocompleteTextInput/AutocompleteTextInput";
+import { ModelSchemaColumn } from "../ModelSchema";
+import { columnTypeLabel, controlForColumn } from "./ColumnControl";
+import { operatorLabelFor, operatorsForControl } from "./ColumnOperators";
+import {
+  ColumnValueMode,
+  ModelColumnControl,
+  ModelColumnRow,
+  changeColumnRow,
+} from "./ColumnRow";
+import { rowIssue } from "./ColumnRowSerialization";
+import ColumnValueInput from "./ColumnValueInput";
+import React, { FunctionComponent, ReactElement } from "react";
+
+export interface ComponentProps {
+  row: ModelColumnRow;
+  column: ModelSchemaColumn | undefined;
+  /** Every column the model describes, for this row's own picker. */
+  columns: Array<ModelSchemaColumn>;
+  suggestions?: Array<string> | undefined;
+  /** Focused on mount, so a condition added from the picker is ready to type into. */
+  autoFocus?: boolean | undefined;
+  onChange: (row: ModelColumnRow) => void;
+  onRemove: () => void;
+}
+
+const ColumnConditionRow: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const control: ModelColumnControl = controlForColumn(props.column);
+  const operatorOption: DictionaryFilterOperatorOption = getOperatorOption(
+    props.row.operator,
+  );
+  const issue: string | null = rowIssue(props.row, props.column);
+  const isUnknownColumn: boolean = !props.column && props.row.columnId !== "";
+
+  /*
+   * The title alone is the label, with the column name carried in the option's
+   * second line and repeated as a chip under the picker once it is chosen.
+   * Putting both in the label - "Created At · createdAt" - is what a select
+   * ellipsizes first, and the name is exactly the half that gets cut.
+   */
+  const columnOptions: Array<DropdownOption> = props.columns.map(
+    (column: ModelSchemaColumn) => {
+      return {
+        value: column.id,
+        label: column.title,
+        description: `${column.id} · ${
+          column.description || columnTypeLabel(column)
+        }`,
+      };
+    },
+  );
+
+  /*
+   * Whatever this condition already filters on is always in the list, even when
+   * the picker would not offer it: a name the endpoint does not describe at all,
+   * and equally a column it describes but does not offer - a relation, the
+   * project column, a JSON blob. Keyed on "is it in the options" rather than on
+   * "is it unknown", because the second misses the whole middle case and leaves
+   * the row showing an empty picker over a condition that is really there.
+   */
+  if (
+    props.row.columnId !== "" &&
+    !columnOptions.some((option: DropdownOption) => {
+      return option.value === props.row.columnId;
+    })
+  ) {
+    columnOptions.unshift({
+      value: props.row.columnId,
+      label: props.column?.title || props.row.columnId,
+      description: isUnknownColumn
+        ? "Not a column on this model"
+        : `${props.row.columnId} · can't be picked from the list`,
+    });
+  }
+
+  const operatorOptions: Array<DropdownOption> = operatorsForControl(
+    control,
+    props.row.operator,
+  ).map((operator: DictionaryFilterOperator) => {
+    return {
+      value: operator,
+      label: operatorLabelFor(operator, control),
+    };
+  });
+
+  /*
+   * Proportional column widths rather than fixed ones. A picker showing
+   * "Created At · createdAt" and a comparison reading "is on or before" both
+   * outgrow any rem figure that also leaves room for the value, and the settings
+   * panel is a different width on every screen. ModelQueryBuilder's header row
+   * repeats this template and has to stay in step with it.
+   */
+  const rowGridClass: string =
+    "group grid grid-cols-1 items-start gap-2 px-3 py-2.5 transition-colors hover:bg-gray-50/60 sm:grid-cols-[minmax(0,1fr)_minmax(0,0.85fr)_minmax(0,1.3fr)_auto]";
+
+  return (
+    <div className={rowGridClass} data-testid="model-column-row">
+      <div className="min-w-0">
+        {props.columns.length === 0 ? (
+          <AutocompleteTextInput
+            value={props.row.columnId}
+            placeholder="Column name"
+            outerDivClassName="relative w-full"
+            disableSpellCheck={true}
+            onChange={(value: string) => {
+              props.onChange(changeColumnRow(props.row, { columnId: value }));
+            }}
+          />
+        ) : (
+          <Dropdown
+            options={columnOptions}
+            placeholder="Column"
+            className="relative w-full overflow-visible rounded-md"
+            isMultiSelect={false}
+            ariaLabel="Column"
+            dataTestId={`model-column-picker-${props.row.columnId}`}
+            value={columnOptions.find((option: DropdownOption) => {
+              return option.value === props.row.columnId;
+            })}
+            onChange={(value: DropdownValue | Array<DropdownValue> | null) => {
+              /*
+               * The dropdown is always clearable and hands back null. The row
+               * stays - a condition being retargeted is not a condition being
+               * deleted - and an empty column is dropped on serialization.
+               */
+              props.onChange(
+                changeColumnRow(props.row, {
+                  columnId:
+                    value === null || Array.isArray(value) ? "" : String(value),
+                }),
+              );
+            }}
+          />
+        )}
+        {isUnknownColumn ? (
+          <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>
+        ) : (
+          props.column && (
+            <span className="mt-1 inline-block truncate rounded bg-gray-100 px-1.5 py-0.5 font-mono text-[11px] text-gray-500">
+              {props.row.columnId}
+            </span>
+          )
+        )}
+      </div>
+
+      <Dropdown
+        options={operatorOptions}
+        className="relative w-full overflow-visible rounded-md"
+        isMultiSelect={false}
+        ariaLabel="Comparison"
+        dataTestId={`model-column-operator-${props.row.columnId}`}
+        value={operatorOptions.find((option: DropdownOption) => {
+          return option.value === props.row.operator;
+        })}
+        onChange={(value: DropdownValue | Array<DropdownValue> | null) => {
+          if (value === null || Array.isArray(value)) {
+            return;
+          }
+
+          const nextOperator: DictionaryFilterOperator =
+            value as DictionaryFilterOperator;
+          const nextOption: DictionaryFilterOperatorOption =
+            getOperatorOption(nextOperator);
+
+          /*
+           * The value is cleared when the shape of the input changes, so a
+           * scalar is never shipped where a list is expected, or the other way
+           * round.
+           */
+          props.onChange(
+            changeColumnRow(props.row, {
+              operator: nextOperator,
+              text: nextOption.hidesValueInput ? "" : props.row.text,
+              values: nextOption.expectsMultiValue ? props.row.values : [],
+            }),
+          );
+        }}
+      />
+
+      <div className="min-w-0">
+        <ColumnValueInput
+          control={control}
+          valueMode={props.row.valueMode}
+          text={props.row.text}
+          values={props.row.values}
+          operatorOption={operatorOption}
+          placeholder={props.column?.example || props.column?.placeholder}
+          suggestions={props.suggestions}
+          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.
+          </p>
+        )}
+
+        {issue && <p className="mt-1 text-[11px] text-red-500">{issue}</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 ColumnConditionRow;

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

@@ -0,0 +1,255 @@
+/*
+ * Which control a column gets, decided from the model's own schema.
+ *
+ * This is the answer to "you already know the schema, why are you asking me?".
+ * The editor used to show a Type dropdown next to every row — Text, Number,
+ * Boolean — even though /model-schema/:tableName had already said that `color`
+ * is a Color and `name` is a Name. Nothing good could come of that dropdown:
+ * the builder could only agree with the schema or be wrong.
+ */
+
+import TableColumnType from "../../../../Types/Database/TableColumnType";
+import { ModelSchemaColumn } from "../ModelSchema";
+import { ModelColumnControl } from "./ColumnRow";
+
+/*
+ * Spelled with the enum, never with string literals. The wire carries the
+ * enum's *values* and several of them differ from the member name that reads
+ * like the obvious literal: ShortText is "Text", ObjectID is "Object ID",
+ * LongURL is "URL", PositiveNumber is "Positive Number" — and JavaScript is
+ * "JavaSCript", capital S and all. ModelSchema.ts:160 documents the same trap;
+ * a hand-written list here would classify the two most-declared column types
+ * as unsupported and quietly send every one of them to a plain text box.
+ */
+const TEXT_COLUMN_TYPES: Array<string> = [
+  TableColumnType.ShortText,
+  TableColumnType.Slug,
+  TableColumnType.Name,
+  TableColumnType.Email,
+  TableColumnType.Phone,
+  TableColumnType.Domain,
+  TableColumnType.IP,
+  TableColumnType.Version,
+  TableColumnType.LongURL,
+  TableColumnType.ShortURL,
+  TableColumnType.HashedString,
+  TableColumnType.Password,
+  TableColumnType.OTP,
+  TableColumnType.MonitorType,
+  TableColumnType.WorkflowStatus,
+  TableColumnType.CustomFieldType,
+  TableColumnType.Permission,
+];
+
+const LONG_TEXT_COLUMN_TYPES: Array<string> = [
+  TableColumnType.LongText,
+  TableColumnType.VeryLongText,
+  TableColumnType.Description,
+  TableColumnType.Markdown,
+  TableColumnType.HTML,
+  TableColumnType.CSS,
+  TableColumnType.JavaScript,
+];
+
+const NUMBER_COLUMN_TYPES: Array<string> = [
+  TableColumnType.Number,
+  TableColumnType.SmallNumber,
+  TableColumnType.BigNumber,
+  TableColumnType.PositiveNumber,
+  TableColumnType.SmallPositiveNumber,
+  TableColumnType.BigPositiveNumber,
+  TableColumnType.Port,
+];
+
+/*
+ * Everything a row cannot hold. Entity/EntityArray are relations - pointing a
+ * record at a related row means naming an existing record, which is what the
+ * scalar foreign-key column next to it (currentIncidentStateId, and every other
+ * "... ID" column) is for, and that column is offered normally.
+ */
+const UNSUPPORTED_COLUMN_TYPES: Array<string> = [
+  TableColumnType.Entity,
+  TableColumnType.EntityArray,
+  TableColumnType.JSON,
+  TableColumnType.Array,
+  TableColumnType.Buffer,
+  TableColumnType.File,
+  TableColumnType.MonitorSteps,
+];
+
+export type ControlForColumnFunction = (
+  column: ModelSchemaColumn | undefined,
+) => ModelColumnControl;
+
+/**
+ * The control for a column, or Text when the schema has nothing to say.
+ *
+ * An unknown column — one the endpoint did not describe, or a key typed before
+ * the schema loaded — gets Text rather than Unsupported, because the runner
+ * accepts column names this endpoint does not surface and locking those rows
+ * would be worse than letting them be typed.
+ */
+export const controlForColumn: ControlForColumnFunction = (
+  column: ModelSchemaColumn | undefined,
+): ModelColumnControl => {
+  if (!column) {
+    return ModelColumnControl.Text;
+  }
+
+  if (column.isRelation) {
+    return ModelColumnControl.Unsupported;
+  }
+
+  if (UNSUPPORTED_COLUMN_TYPES.includes(column.type)) {
+    return ModelColumnControl.Unsupported;
+  }
+
+  if (column.type === TableColumnType.Boolean) {
+    return ModelColumnControl.Boolean;
+  }
+
+  if (column.type === TableColumnType.Date) {
+    return ModelColumnControl.Date;
+  }
+
+  if (column.type === TableColumnType.ObjectID) {
+    return ModelColumnControl.ObjectId;
+  }
+
+  if (column.type === TableColumnType.Color) {
+    return ModelColumnControl.Color;
+  }
+
+  if (NUMBER_COLUMN_TYPES.includes(column.type)) {
+    return ModelColumnControl.Number;
+  }
+
+  if (LONG_TEXT_COLUMN_TYPES.includes(column.type)) {
+    return ModelColumnControl.LongText;
+  }
+
+  if (TEXT_COLUMN_TYPES.includes(column.type)) {
+    return ModelColumnControl.Text;
+  }
+
+  return ModelColumnControl.Text;
+};
+
+export type ColumnTypeLabelFunction = (
+  column: ModelSchemaColumn | undefined,
+) => string;
+
+/**
+ * The one-word type shown under a field's name, so the builder can see what
+ * kind of value is expected without opening the model's documentation.
+ */
+export const columnTypeLabel: ColumnTypeLabelFunction = (
+  column: ModelSchemaColumn | undefined,
+): string => {
+  if (!column) {
+    return "Unknown";
+  }
+
+  if (column.isRelation) {
+    return "Relation";
+  }
+
+  switch (controlForColumn(column)) {
+    case ModelColumnControl.Number:
+      return "Number";
+    case ModelColumnControl.Boolean:
+      return "True or false";
+    case ModelColumnControl.Date:
+      return "Date and time";
+    case ModelColumnControl.ObjectId:
+      return "ID";
+    case ModelColumnControl.Color:
+      return "Color";
+    case ModelColumnControl.LongText:
+      return "Long text";
+    case ModelColumnControl.Unsupported:
+      /*
+       * The raw column type is more use than the word "unsupported" here: it is
+       * what the builder will have to write by hand in the JSON editor.
+       */
+      return column.type;
+    default:
+      return "Text";
+  }
+};
+
+export type LiteralFitsControlFunction = (
+  control: ModelColumnControl,
+  value: unknown,
+) => boolean;
+
+/**
+ * Can this stored value be shown in the typed control without changing it?
+ *
+ * A `false` here is not an error — it sends the row to ColumnValueMode.Raw,
+ * where it is shown as text and re-emitted exactly as it was read. That is what
+ * stops opening a workflow and saving it again from rewriting `{"port":"8080"}`
+ * into `{"port":8080}` behind the builder's back.
+ */
+export const literalFitsControl: LiteralFitsControlFunction = (
+  control: ModelColumnControl,
+  value: unknown,
+): boolean => {
+  /*
+   * An empty control holds "" and nothing else. undefined and "" are what an
+   * untouched row is, so they fit; null does not, because an empty control
+   * cannot say "null" - it emits "", which a record drops entirely. A stored
+   * null therefore keeps its own value rather than being flattened into a
+   * missing field.
+   */
+  if (value === undefined || value === "") {
+    return true;
+  }
+
+  if (value === null) {
+    return false;
+  }
+
+  switch (control) {
+    case ModelColumnControl.Number:
+      return typeof value === "number" && !isNaN(value);
+    case ModelColumnControl.Boolean:
+      return typeof value === "boolean";
+    case ModelColumnControl.Date:
+      /*
+       * Dates travel as ISO strings. Anything else - a number of milliseconds,
+       * an operator wrapper - is shown raw rather than reinterpreted.
+       */
+      return typeof value === "string" && !isNaN(Date.parse(value));
+    default:
+      return typeof value === "string";
+  }
+};
+
+export type IsOfferableColumnFunction = (column: ModelSchemaColumn) => boolean;
+
+/**
+ * Should this column appear in the "add a field" picker?
+ *
+ * Note this only gates what is *offered*. A column already stored on the
+ * argument always gets its row, tenant column and all, because hiding a value
+ * that is really there is how an editor loses someone's work.
+ */
+export const isOfferableColumn: IsOfferableColumnFunction = (
+  column: ModelSchemaColumn,
+): boolean => {
+  if (column.isRelation) {
+    return false;
+  }
+
+  /*
+   * The workflow runner stamps the project column itself
+   * (ModelArguments.applyTenantColumn) and overwrites whatever was typed, so
+   * offering it would be offering a field that cannot work.
+   */
+  if (column.isTenantColumn) {
+    return false;
+  }
+
+  return controlForColumn(column) !== ModelColumnControl.Unsupported;
+};