@oneuptime/common 14.0.10 → 14.0.12

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

@@ -0,0 +1,126 @@
+/*
+ * What a column is being picked for, and whether it belongs in that list.
+ *
+ * The record editor and the query builder share one picker, but they are
+ * asking different questions. A create wants the values a person would
+ * actually decide - the incident's title, its severity - and never the ones
+ * OneUptime stamps itself (its ID, when it was created, who created it). An
+ * update wants what may change after the record exists, which drops the
+ * create-only columns as well. A query is the opposite case: "created after
+ * yesterday" and "created by this user" are good filters, so the system columns
+ * stay, and only the ones that are empty on every record go.
+ *
+ * Kept free of React and of the API client so the server-side tests can run
+ * the real model metadata through exactly this policy.
+ */
+
+import {
+  isAlwaysEmptyColumnId,
+  isSystemColumnId,
+} from "../../../../Types/Workflow/SystemColumns";
+import { ModelSchemaColumn } from "../ModelSchema";
+
+export enum ColumnUse {
+  /** The values a Create One writes. */
+  Create = "Create",
+  /** The values an Update One / Update Many writes. */
+  Update = "Update",
+  /** The conditions a query matches records on. */
+  Filter = "Filter",
+}
+
+export type IsSystemColumnFunction = (column: ModelSchemaColumn) => boolean;
+
+/**
+ * Whether OneUptime fills this column in itself.
+ *
+ * The endpoint's own flag wins when it is there, because it also knows about
+ * `computed` and forced-default columns no list could name. The shared list is
+ * the backstop for a response from before the flag existed.
+ */
+export const isSystemColumn: IsSystemColumnFunction = (
+  column: ModelSchemaColumn,
+): boolean => {
+  if (typeof column.isSystemColumn === "boolean") {
+    return column.isSystemColumn;
+  }
+
+  return isSystemColumnId(column.id);
+};
+
+export type IsAlwaysEmptyColumnFunction = (
+  column: ModelSchemaColumn,
+) => boolean;
+
+/** Empty on every record a workflow can find (records are hard-deleted). */
+export const isAlwaysEmptyColumn: IsAlwaysEmptyColumnFunction = (
+  column: ModelSchemaColumn,
+): boolean => {
+  return isAlwaysEmptyColumnId(column.id);
+};
+
+export type CanUseColumnForFunction = (
+  column: ModelSchemaColumn,
+  use: ColumnUse,
+) => boolean;
+
+/**
+ * Whether the column belongs in the list for this use at all, before asking
+ * whether a single row could hold its value (ColumnControl.isOfferableColumn
+ * asks that).
+ *
+ * A missing canCreate / canUpdate reads as allowed: the write gate already
+ * admitted the column for at least one of the two, and a response from before
+ * those flags existed should keep offering what it always did.
+ */
+export const canUseColumnFor: CanUseColumnForFunction = (
+  column: ModelSchemaColumn,
+  use: ColumnUse,
+): boolean => {
+  if (use === ColumnUse.Filter) {
+    return !isAlwaysEmptyColumn(column);
+  }
+
+  if (isSystemColumn(column)) {
+    return false;
+  }
+
+  if (use === ColumnUse.Create) {
+    return column.canCreate !== false;
+  }
+
+  return column.canUpdate !== false;
+};
+
+export type RequiredWritableColumnsFunction = (
+  columns: Array<ModelSchemaColumn>,
+) => Array<ModelSchemaColumn>;
+
+/**
+ * Columns a create must be given a value for.
+ *
+ * Mirrors the server's own rule in DatabaseService.checkRequiredFields -
+ * required, minus anything carrying a default - and additionally drops the
+ * project column, which the workflow runner stamps itself
+ * (ModelArguments.applyTenantColumn) and which a builder must never type.
+ * Relations are left out because a row holds one scalar.
+ *
+ * System columns go too. A slug is required and has no default, because
+ * DatabaseService.generateSlug writes it from the name on every create - so
+ * Create One Scheduled Maintenance (and On-Call Policy, Incoming Call Policy,
+ * On-Call Schedule, whose slugs carry a create list) opened on a required
+ * "Slug" row for a value nobody can supply.
+ */
+export const requiredWritableColumns: RequiredWritableColumnsFunction = (
+  columns: Array<ModelSchemaColumn>,
+): Array<ModelSchemaColumn> => {
+  return columns.filter((column: ModelSchemaColumn) => {
+    return (
+      Boolean(column.required) &&
+      !column.hasDefault &&
+      !column.isTenantColumn &&
+      !column.isRelation &&
+      canUseColumnFor(column, ColumnUse.Create)
+    );
+  });
+};

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

@@ -3,22 +3,46 @@
  *
  * The control comes from the column's type in the model schema, so nobody is
  * asked whether the thing they are typing is Text, Number or Boolean - the
- * model already said. What is left for the builder to choose is the one thing
- * the schema genuinely cannot know: whether this value is typed in, or read
- * from an earlier step at run time.
+ * model already said. A value can also come from an earlier step or a
+ * variable, through the same picker every other workflow setting has:
+ *
+ * - a text cell is the chip editor, so a title can be "Alert: " followed by
+ *   the webhook's alert name, shown as a chip;
+ * - a number, a switch, a date or a colour keeps its control, with { }
+ *   beside it, and a picked value replaces it as a chip, with "abc" to type a
+ *   value again.
  */
 
 import Color from "../../../../Types/Color";
 import IconProp from "../../../../Types/Icon/IconProp";
-import AutocompleteTextInput from "../../AutocompleteTextInput/AutocompleteTextInput";
 import { DictionaryFilterOperatorOption } from "../../Dictionary/DictionaryFilterOperator";
 import ColorPicker from "../../Forms/Fields/ColorPicker";
 import Icon from "../../Icon/Icon";
 import Input, { InputType } from "../../Input/Input";
-import TextArea from "../../TextArea/TextArea";
+import {
+  ValuePickerContextValue,
+  useValuePicker,
+} from "../ValuePicker/ValuePickerContext";
+import ValuePickerMenu from "../ValuePicker/ValuePickerMenu";
+import ValuePickerPopup, {
+  ValuePickerCloseReason,
+  ValuePickerPopupMode,
+} from "../ValuePicker/ValuePickerPopup";
+import { TYPE_A_VALUE_LABEL } from "../ValuePicker/ValueSingleField";
+import ValueTextField, {
+  INSERT_VALUE_BUTTON_CLASS,
+  INSERT_VALUE_BUTTON_IDLE_CLASS,
+  INSERT_VALUE_BUTTON_OPEN_CLASS,
+  INSERT_VALUE_LABEL,
+} from "../ValuePicker/ValueTextField";
 import { ColumnValueMode, ModelColumnControl } from "./ColumnRow";
 import { containsTemplateExpression } from "./ColumnRowSerialization";
-import React, { FunctionComponent, ReactElement } from "react";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useRef,
+  useState,
+} from "react";
 
 export interface ComponentProps {
   control: ModelColumnControl;
@@ -28,8 +52,6 @@ export interface ComponentProps {
   /** Absent in record mode, where every row is an equality. */
   operatorOption?: DictionaryFilterOperatorOption | undefined;
   placeholder?: string | undefined;
-  /** The other steps' return values and the workflow's variables. */
-  suggestions?: Array<string> | undefined;
   /**
    * Every edit reports as one change.
    *
@@ -54,69 +76,114 @@ export interface ComponentProps {
 
 const INPUT_WRAPPER_CLASS: string = "relative w-full";
 
-const MONO_INPUT_CLASS: string =
-  "block w-full rounded-md border-0 bg-transparent py-1 pl-0 pr-0 font-mono text-xs text-indigo-900 placeholder-indigo-300 focus:outline-none focus:ring-0";
+/*
+ * Text of any kind: the cell is the chip editor in every mode, so there is
+ * nothing to switch between - a reference is just part of the text.
+ */
+const TEXT_CONTROLS: Array<ModelColumnControl> = [
+  ModelColumnControl.Text,
+  ModelColumnControl.LongText,
+  ModelColumnControl.ObjectId,
+  ModelColumnControl.Unsupported,
+];
 
 const ColumnValueInput: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const picker: ValuePickerContextValue = useValuePicker();
   const isReference: boolean = props.valueMode === ColumnValueMode.Reference;
+  const dataTestId: string = props.dataTestId || "model-column";
+  const cellRef: React.MutableRefObject<HTMLDivElement | null> =
+    useRef<HTMLDivElement | null>(null);
+  const [isPickerOpen, setIsPickerOpen] = useState<boolean>(false);
 
   type SetTextFunction = (value: string) => void;
 
   /*
-   * Typing "{{" anywhere in a text control means the builder is reaching for
-   * another step's output, so the cell becomes a reference there and then and
-   * keeps what has been typed. Without this the autocomplete would never open
-   * unless the reference button had been found first.
+   * A text cell holding a {{ }} reference is a reference: it is written as the
+   * string it is, whatever the column's type.
    */
   const setTextAndDetectReference: SetTextFunction = (value: string): void => {
-    if (!isReference && value.includes("{{")) {
-      props.onChange({ text: value, valueMode: ColumnValueMode.Reference });
-      return;
-    }
-
-    props.onChange({ text: value });
+    props.onChange({
+      text: value,
+      valueMode: containsTemplateExpression(value)
+        ? ColumnValueMode.Reference
+        : ColumnValueMode.Literal,
+    });
   };
 
   /*
-   * Spelled "{ }" rather than drawn as an icon. The shared variable glyph is a
-   * dashed square that reads as a placeholder or a spinner, and this button has
-   * to say what it does at a glance - it is the only route from a typed value to
-   * an earlier step's output, which is how most of these payloads are built.
+   * Spelled "{ }" rather than drawn as an icon, as in every other workflow
+   * setting: the shared variable glyph is a dashed square that reads as a
+   * placeholder or a spinner.
    */
-  const referenceButton: ReactElement = (
+  const insertValueButton: ReactElement | null = picker.isAvailable ? (
     <button
       type="button"
-      aria-pressed={isReference}
-      title={
-        isReference
-          ? "Type a value instead"
-          : "Use a value from an earlier step"
-      }
-      aria-label={
-        isReference
-          ? "Type a value instead"
-          : "Use a value from an earlier step"
-      }
-      data-testid={`${props.dataTestId || "model-column"}-reference-toggle`}
-      className={`shrink-0 rounded-md border px-1.5 py-1 font-mono text-[11px] leading-none transition-colors focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
-        isReference
-          ? "border-indigo-200 bg-white text-indigo-500 hover:bg-indigo-50"
-          : "border-transparent text-gray-400 hover:border-gray-200 hover:bg-gray-50 hover:text-gray-600"
+      aria-label={INSERT_VALUE_LABEL}
+      title={INSERT_VALUE_LABEL}
+      aria-haspopup="dialog"
+      aria-expanded={isPickerOpen}
+      data-testid={`${dataTestId}-insert-value`}
+      className={`${INSERT_VALUE_BUTTON_CLASS} ${
+        isPickerOpen
+          ? INSERT_VALUE_BUTTON_OPEN_CLASS
+          : INSERT_VALUE_BUTTON_IDLE_CLASS
       }`}
       onClick={() => {
-        props.onChange({
-          valueMode: isReference
-            ? ColumnValueMode.Literal
-            : ColumnValueMode.Reference,
-        });
+        setIsPickerOpen(!isPickerOpen);
+      }}
+    >
+      {"{ }"}
+    </button>
+  ) : null;
+
+  // Back to the column's own control, empty: it cannot show the reference.
+  const typeAValueButton: ReactElement = (
+    <button
+      type="button"
+      aria-label={TYPE_A_VALUE_LABEL}
+      title={TYPE_A_VALUE_LABEL}
+      data-testid={`${dataTestId}-type-a-value`}
+      className="mt-0.5 shrink-0 rounded-md border border-gray-200 px-1.5 py-1 font-mono text-[11px] leading-none text-gray-500 transition-colors hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+      onClick={() => {
+        props.onChange({ valueMode: ColumnValueMode.Literal, text: "" });
       }}
     >
-      {isReference ? "abc" : "{ }"}
+      abc
     </button>
   );
 
+  const pickerPopup: ReactElement | null = isPickerOpen ? (
+    <ValuePickerPopup
+      anchorRef={cellRef}
+      mode={ValuePickerPopupMode.Popover}
+      ariaLabel="Use a value"
+      onClose={(reason: ValuePickerCloseReason) => {
+        setIsPickerOpen(false);
+
+        if (reason !== ValuePickerCloseReason.Outside) {
+          cellRef.current
+            ?.querySelector<HTMLElement>(
+              `[data-testid="${dataTestId}-insert-value"]`,
+            )
+            ?.focus();
+        }
+      }}
+    >
+      <ValuePickerMenu
+        hasSearchBox={true}
+        onPick={(reference: string) => {
+          setIsPickerOpen(false);
+          props.onChange({
+            text: reference,
+            valueMode: ColumnValueMode.Reference,
+          });
+        }}
+      />
+    </ValuePickerPopup>
+  ) : null;
+
   // An operator like "is not set" takes no value at all.
   if (props.operatorOption?.hidesValueInput) {
     return (
@@ -140,29 +207,46 @@ const ColumnValueInput: FunctionComponent<ComponentProps> = (
     );
   }
 
+  const isTextControl: boolean = TEXT_CONTROLS.includes(props.control);
+
+  /*
+   * Text, typed or with references in it. Kept-raw values are the exception:
+   * they keep the plain box below until they are edited.
+   */
+  if (isTextControl && props.valueMode !== ColumnValueMode.Raw) {
+    return (
+      <ValueTextField
+        value={props.text}
+        multiline={props.control === ModelColumnControl.LongText}
+        monospace={props.control === ModelColumnControl.ObjectId}
+        placeholder={props.placeholder}
+        ariaLabelledby={props.ariaLabelledby}
+        autoFocus={props.autoFocus}
+        dataTestId={dataTestId}
+        isCompact={true}
+        onChange={setTextAndDetectReference}
+      />
+    );
+  }
+
+  // A typed column holding a value from an earlier step: the value, as a chip.
   if (isReference) {
     return (
-      <div className="flex w-full items-center gap-1.5 rounded-md border border-indigo-200 bg-indigo-50/40 px-2 py-1">
-        <span className="shrink-0 font-mono text-[11px] text-indigo-400">
-          {"{ }"}
-        </span>
+      <div className="flex w-full items-start gap-1">
         <div className="min-w-0 flex-1">
-          <AutocompleteTextInput
+          <ValueTextField
             value={props.text}
-            placeholder="{{local.components.step.returnValues.value}}"
-            suggestions={props.suggestions}
-            className={MONO_INPUT_CLASS}
-            outerDivClassName={INPUT_WRAPPER_CLASS}
-            disableSpellCheck={true}
-            autoFocus={props.autoFocus}
+            multiline={false}
             ariaLabelledby={props.ariaLabelledby}
-            dataTestId={props.dataTestId}
+            autoFocus={props.autoFocus}
+            dataTestId={dataTestId}
+            isCompact={true}
             onChange={(value: string) => {
               props.onChange({ text: value });
             }}
           />
         </div>
-        {referenceButton}
+        {typeAValueButton}
       </div>
     );
   }
@@ -265,35 +349,17 @@ const ColumnValueInput: FunctionComponent<ComponentProps> = (
           />
         );
 
-      case ModelColumnControl.LongText:
-        return (
-          <TextArea
-            value={props.text}
-            placeholder={props.placeholder}
-            className="block w-full rounded-md border border-gray-300 bg-white py-2 px-3 text-sm placeholder-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 resize-y min-h-16"
-            ariaLabelledby={props.ariaLabelledby}
-            dataTestId={props.dataTestId}
-            tabIndex={props.tabIndex}
-            autoFocus={props.autoFocus}
-            onChange={setTextAndDetectReference}
-          />
-        );
-
       default:
+        // Text kept raw: the plain box, until it is edited.
         return (
-          <AutocompleteTextInput
+          <Input
             value={props.text}
             placeholder={props.placeholder}
-            suggestions={props.suggestions}
             outerDivClassName={INPUT_WRAPPER_CLASS}
-            className={
-              props.control === ModelColumnControl.ObjectId
-                ? "block w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-3 font-mono text-xs text-gray-900 placeholder-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
-                : undefined
-            }
             ariaLabelledby={props.ariaLabelledby}
-            autoFocus={props.autoFocus}
             dataTestId={props.dataTestId}
+            tabIndex={props.tabIndex}
+            autoFocus={props.autoFocus}
             onChange={setTextAndDetectReference}
           />
         );
@@ -301,9 +367,10 @@ const ColumnValueInput: FunctionComponent<ComponentProps> = (
   };
 
   return (
-    <div className="flex w-full items-center gap-1">
+    <div ref={cellRef} className="flex w-full items-center gap-1">
       <div className="min-w-0 flex-1">{renderControl()}</div>
-      {referenceButton}
+      {props.valueMode === ColumnValueMode.Raw ? null : insertValueButton}
+      {pickerPopup}
     </div>
   );
 };

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

@@ -9,16 +9,16 @@
 import IconProp from "../../../../Types/Icon/IconProp";
 import Icon from "../../Icon/Icon";
 import { ModelSchemaColumn, findColumn } from "../ModelSchema";
-import AddColumnDropdown from "./AddColumnDropdown";
+import AddColumnPicker from "./AddColumnPicker";
 import { isOfferableColumn } from "./ColumnControl";
 import ColumnConditionRow from "./ColumnConditionRow";
 import { ModelColumnRow, makeColumnRow } from "./ColumnRow";
+import { ColumnUse } from "./ColumnUse";
 import React, { FunctionComponent, ReactElement, useState } from "react";
 
 export interface ComponentProps {
   rows: Array<ModelColumnRow>;
   columns: Array<ModelSchemaColumn>;
-  suggestions?: Array<string> | undefined;
   onChange: (rows: Array<ModelColumnRow>) => void;
 }
 
@@ -27,15 +27,19 @@ const ModelQueryBuilder: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
   /*
    * The row just added from the picker, so its value control can take focus.
-   * Without it the picker remounts to clear its own selection and focus falls
-   * to the document body, which for a keyboard user means starting again from
-   * the top of the panel.
+   * Without it the picker's list closes and focus falls to the document body,
+   * which for a keyboard user means starting again from the top of the panel.
    */
   const [justAddedKey, setJustAddedKey] = useState<string>("");
 
+  /*
+   * A query keeps the columns OneUptime fills in - "created after", "created
+   * by" and "ID is" are good filters - and drops only the ones that are empty
+   * on every record (ColumnUse.Filter).
+   */
   const offerableColumns: Array<ModelSchemaColumn> = props.columns.filter(
     (column: ModelSchemaColumn) => {
-      return isOfferableColumn(column);
+      return isOfferableColumn(column, ColumnUse.Filter);
     },
   );
 
@@ -83,7 +87,6 @@ const ModelQueryBuilder: FunctionComponent<ComponentProps> = (
                     row={row}
                     column={findColumn(props.columns, row.columnId)}
                     columns={offerableColumns}
-                    suggestions={props.suggestions}
                     autoFocus={row.key === justAddedKey}
                     onChange={(nextRow: ModelColumnRow) => {
                       replaceRow(index, nextRow);
@@ -103,14 +106,15 @@ const ModelQueryBuilder: FunctionComponent<ComponentProps> = (
         )}
 
         <div className="border-t border-gray-100 bg-gray-50/40 px-3 py-2.5">
-          <AddColumnDropdown
+          <AddColumnPicker
             columns={offerableColumns.filter((column: ModelSchemaColumn) => {
               return !props.rows.some((row: ModelColumnRow) => {
                 return row.columnId === column.id;
               });
             })}
+            use={ColumnUse.Filter}
             requiredColumnIds={[]}
-            placeholder="Add a condition..."
+            triggerLabel="Add a condition"
             allowCustomColumn={true}
             dataTestId="model-column-add"
             onAdd={(columnId: string) => {

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

@@ -12,16 +12,22 @@ import {
   findColumn,
   requiredWritableColumns,
 } from "../ModelSchema";
-import AddColumnDropdown from "./AddColumnDropdown";
-import { isOfferableColumn } from "./ColumnControl";
+import AddColumnPicker from "./AddColumnPicker";
+import { isOfferableColumn, jsonOnlyColumns } from "./ColumnControl";
 import ColumnFieldRow from "./ColumnFieldRow";
 import { ModelColumnRow, makeColumnRow } from "./ColumnRow";
+import { ColumnUse } from "./ColumnUse";
 import React, { FunctionComponent, ReactElement, useState } from "react";
 
 export interface ComponentProps {
   rows: Array<ModelColumnRow>;
   columns: Array<ModelSchemaColumn>;
-  suggestions?: Array<string> | undefined;
+  /*
+   * Create or Update. It decides which fields are offered: a create offers
+   * what may be set on a new record, an update what may be changed on one
+   * that exists - and neither offers what OneUptime fills in itself.
+   */
+  use: ColumnUse.Create | ColumnUse.Update;
   onChange: (rows: Array<ModelColumnRow>) => void;
 }
 
@@ -30,17 +36,23 @@ const ModelRecordForm: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
   /*
    * The row just added from the picker, so its value control can take focus.
-   * Without it the picker remounts to clear its own selection and focus falls
-   * to the document body, which for a keyboard user means starting again from
-   * the top of the panel.
+   * Without it the picker's list closes and focus falls to the document body,
+   * which for a keyboard user means starting again from the top of the panel.
    */
   const [justAddedKey, setJustAddedKey] = useState<string>("");
 
-  const requiredColumnIds: Array<string> = requiredWritableColumns(
-    props.columns,
-  ).map((column: ModelSchemaColumn) => {
-    return column.id;
-  });
+  /*
+   * Only a create has required fields: an update writes whichever columns it
+   * names and leaves the rest of the record as it was.
+   */
+  const requiredColumnIds: Array<string> =
+    props.use === ColumnUse.Create
+      ? requiredWritableColumns(props.columns).map(
+          (column: ModelSchemaColumn) => {
+            return column.id;
+          },
+        )
+      : [];
 
   const usedColumnIds: Array<string> = props.rows.map((row: ModelColumnRow) => {
     return row.columnId;
@@ -48,22 +60,19 @@ const ModelRecordForm: FunctionComponent<ComponentProps> = (
 
   const offerableColumns: Array<ModelSchemaColumn> = props.columns.filter(
     (column: ModelSchemaColumn) => {
-      return isOfferableColumn(column) && !usedColumnIds.includes(column.id);
+      return (
+        isOfferableColumn(column, props.use) &&
+        !usedColumnIds.includes(column.id)
+      );
     },
   );
 
-  /*
-   * Named so the builder is not left wondering where a column went. Relations
-   * and blobs cannot be a single box, and saying which ones is kinder than
-   * silently offering a shorter list than the model has.
-   */
-  const unofferableColumnTitles: Array<string> = props.columns
-    .filter((column: ModelSchemaColumn) => {
-      return !isOfferableColumn(column) && !column.isTenantColumn;
-    })
-    .map((column: ModelSchemaColumn) => {
-      return column.title;
-    });
+  const unofferableColumnTitles: Array<string> = jsonOnlyColumns(
+    props.columns,
+    props.use,
+  ).map((column: ModelSchemaColumn) => {
+    return column.title;
+  });
 
   const knownColumnIds: Array<string> = props.columns.map(
     (column: ModelSchemaColumn) => {
@@ -108,7 +117,6 @@ const ModelRecordForm: FunctionComponent<ComponentProps> = (
                   column={findColumn(props.columns, row.columnId)}
                   knownColumnIds={knownColumnIds}
                   isRequired={requiredColumnIds.includes(row.columnId)}
-                  suggestions={props.suggestions}
                   autoFocus={row.key === justAddedKey}
                   onChange={(nextRow: ModelColumnRow) => {
                     replaceRow(index, nextRow);
@@ -127,10 +135,11 @@ const ModelRecordForm: FunctionComponent<ComponentProps> = (
         )}
 
         <div className="border-t border-gray-100 bg-gray-50/40 px-3 py-2.5">
-          <AddColumnDropdown
+          <AddColumnPicker
             columns={offerableColumns}
+            use={props.use}
             requiredColumnIds={requiredColumnIds}
-            placeholder="Add a field..."
+            triggerLabel="Add a field"
             allowCustomColumn={true}
             dataTestId="model-column-add"
             onAdd={(columnId: string) => {