@oneuptime/common 12.0.8 → 12.0.9

package/UI/Components/Table/TableHeader.tsx

@@ -21,6 +21,8 @@ export interface ComponentProps<T extends GenericObject> {
   onAllItemsDeselected: undefined | (() => void);
   hasTableItems: undefined | boolean;
   isAllItemsOnThePageSelected: undefined | boolean;
+  /** Some but not all of this page is selected - drives the indeterminate box. */
+  isSomeItemsOnThePageSelected?: undefined | boolean;
   sortBy: keyof T | null;
   sortOrder: SortOrder;
 }
@@ -72,6 +74,17 @@ const TableHeader: TableHeaderFunction = <T extends GenericObject>(
               <CheckboxElement
                 disabled={!props.hasTableItems}
                 value={selectBulkSelectCheckbox}
+                ariaLabel={translateString("Select all items")}
+                /*
+                 * Half-filled when only part of the page is selected. Without
+                 * it, a page where some rows cannot be selected at all can
+                 * never reach "all selected", so the box sits permanently
+                 * empty and reads as "your selection was lost".
+                 */
+                isIndeterminate={Boolean(
+                  props.isSomeItemsOnThePageSelected &&
+                    !selectBulkSelectCheckbox,
+                )}
                 onChange={(value: boolean) => {
                   if (value) {
                     if (props.onAllItemsOnThePageSelected) {

package/UI/Components/Table/TableRow.tsx

@@ -29,6 +29,24 @@ export interface ComponentProps<T extends GenericObject> {
   onItemSelected?: undefined | ((item: T) => void);
   onItemDeselected?: undefined | ((item: T) => void);
   isItemSelected?: boolean | undefined;
+  /*
+   * FALSE locks this row's checkbox. Defaulted true by the caller, so a table
+   * that says nothing about selectability keeps behaving exactly as before.
+   *
+   * A locked box is better than an unlocked one that fails afterwards whenever
+   * the reason is knowable up front: the action a bulk selection leads to is
+   * usually irreversible from the user's side (mail sent, rows deleted), and
+   * "you cannot pick this, here is why" costs one hover where "you picked it and
+   * nothing happened" costs a support conversation.
+   */
+  isItemSelectable?: boolean | undefined;
+  /*
+   * The accessible name for this row's checkbox - "Select Ada Lovelace" rather
+   * than an unnamed box repeated once per row.
+   */
+  itemSelectLabel?: string | undefined;
+  /** Hover text for a row whose box is locked. Says why, in the caller's words. */
+  itemNotSelectableReason?: string | undefined;
 
   // responsive
   isMobile?: boolean;
@@ -84,6 +102,44 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
     },
   );
 
+  /*
+   * Absent means selectable, so every existing caller is unaffected. Only an
+   * explicit false locks the box.
+   */
+  const isItemSelectable: boolean = props.isItemSelectable !== false;
+
+  /*
+   * The bulk-select box, identical on the mobile card and the desktop row. It is
+   * one function rather than two copies because the two used to drift: the
+   * mobile copy still has no `disabled` handling of its own, and a locked row
+   * that is only locked at one breakpoint is not locked.
+   */
+  const getBulkSelectCheckbox: () => ReactElement = (): ReactElement => {
+    return (
+      <CheckboxElement
+        value={Boolean(props.isItemSelected)}
+        disabled={!isItemSelectable}
+        ariaLabel={props.itemSelectLabel}
+        hoverText={
+          isItemSelectable
+            ? props.itemSelectLabel
+            : props.itemNotSelectableReason || props.itemSelectLabel
+        }
+        onChange={(value: boolean) => {
+          if (!isItemSelectable) {
+            return;
+          }
+
+          if (value) {
+            props.onItemSelected?.(props.item);
+          } else {
+            props.onItemDeselected?.(props.item);
+          }
+        }}
+      />
+    );
+  };
+
   type GetRowFunction = (provided?: DraggableProvided) => ReactElement;
 
   const getRow: GetRowFunction = (
@@ -113,18 +169,7 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
             )}
 
             {props.isBulkActionsEnabled ? (
-              <div className="mb-3">
-                <CheckboxElement
-                  value={Boolean(props.isItemSelected)}
-                  onChange={(value: boolean) => {
-                    if (value) {
-                      props.onItemSelected?.(props.item);
-                    } else {
-                      props.onItemDeselected?.(props.item);
-                    }
-                  }}
-                />
-              </div>
+              <div className="mb-3">{getBulkSelectCheckbox()}</div>
             ) : (
               <></>
             )}
@@ -329,20 +374,7 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
               className="w-10 py-3.5  align-top"
               {...provided?.dragHandleProps}
             >
-              <div className="ml-5">
-                <CheckboxElement
-                  value={props.isItemSelected}
-                  onChange={(value: boolean) => {
-                    if (value) {
-                      if (props.onItemSelected) {
-                        props.onItemSelected(props.item);
-                      }
-                    } else if (props.onItemDeselected) {
-                      props.onItemDeselected(props.item);
-                    }
-                  }}
-                />
-              </div>
+              <div className="ml-5">{getBulkSelectCheckbox()}</div>
             </td>
           )}
           {props.columns &&

package/UI/Components/Workflow/ArgumentsForm.tsx

@@ -22,14 +22,22 @@ import {
   NodeDataProp,
   isJSON5ToleratedInputType,
 } from "../../../Types/Workflow/Component";
+import {
+  componentReturnValueReference,
+  globalVariableReference,
+  variableReference,
+} from "../../../Types/Workflow/TemplateSyntax";
 import { DropdownOption } from "../Dropdown/Dropdown";
+import EqualToOrNull from "../../../Types/BaseDatabase/EqualToOrNull";
 import { LIMIT_PER_PROJECT } from "../../../Types/Database/LimitMax";
 import ModelAPI, { ListResult } from "../../Utils/ModelAPI/ModelAPI";
 import Workflow from "../../../Models/DatabaseModels/Workflow";
+import WorkflowVariable from "../../../Models/DatabaseModels/WorkflowVariable";
 import React, {
   FunctionComponent,
   ReactElement,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -230,6 +238,121 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
     // Only re-fetch when the component in the settings panel changes identity.
   }, [component.id, hasWorkflowSelectArg]);
 
+  /*
+   * Every reference the builder could type into a row, offered as autocomplete
+   * on any row whose column has no suggestions of its own.
+   *
+   * The row editor replaces the "pick this value from other component or from
+   * variable" footer on the arguments it takes over, and a create payload is
+   * almost always assembled out of a trigger's return values - so without this
+   * the row editor would be a step backwards for exactly the case it exists to
+   * serve. The old footer cannot simply be kept: it appends the reference to
+   * the whole field, turning {"title":"x"} into {"title":"x"}{{...}}, which is
+   * not JSON and which the linter rejects immediately.
+   */
+  const hasColumnEditorArgument: boolean = Boolean(
+    component.metadata.tableName &&
+      component.metadata.arguments?.some((arg: Argument) => {
+        return (
+          arg.type === ComponentInputType.Query ||
+          arg.type === ComponentInputType.JSON ||
+          arg.type === ComponentInputType.BaseModel
+        );
+      }),
+  );
+
+  const componentReferenceSuggestions: Array<string> = useMemo(() => {
+    const suggestions: Array<string> = [];
+
+    for (const graphComponent of props.graphComponents || []) {
+      // A component cannot reference its own output.
+      if (graphComponent.id === component.id) {
+        continue;
+      }
+
+      /*
+       * Placeholder nodes carry a partial metadata object with no return
+       * values at all, so this cannot assume the array is there.
+       */
+      for (const returnValue of graphComponent.metadata?.returnValues || []) {
+        suggestions.push(
+          componentReturnValueReference(graphComponent.id, returnValue.id),
+        );
+      }
+    }
+
+    return suggestions;
+  }, [props.graphComponents, component.id]);
+
+  const [variableSuggestions, setVariableSuggestions] = useState<Array<string>>(
+    [],
+  );
+
+  useEffect(() => {
+    if (!hasColumnEditorArgument) {
+      return;
+    }
+
+    let cancelled: boolean = false;
+
+    const loadVariables: () => Promise<void> = async (): Promise<void> => {
+      try {
+        const result: ListResult<WorkflowVariable> =
+          await ModelAPI.getList<WorkflowVariable>({
+            modelType: WorkflowVariable,
+            // Null workflowId is a project-wide variable, usable from any workflow.
+            query: {
+              workflowId: new EqualToOrNull(props.workflowId.toString()),
+            },
+            limit: LIMIT_PER_PROJECT,
+            skip: 0,
+            select: {
+              _id: true,
+              name: true,
+              workflowId: true,
+            },
+            sort: {
+              name: "Ascending" as any,
+            },
+          });
+
+        if (cancelled) {
+          return;
+        }
+
+        setVariableSuggestions(
+          result.data
+            .filter((variable: WorkflowVariable) => {
+              return Boolean(variable.name);
+            })
+            .map((variable: WorkflowVariable) => {
+              return variable.workflowId
+                ? variableReference(variable.name as string)
+                : globalVariableReference(variable.name as string);
+            }),
+        );
+      } catch {
+        /*
+         * Swallow: suggestions are an accelerator, not the only way in. The
+         * builder can still type a reference by hand.
+         */
+        if (!cancelled) {
+          setVariableSuggestions([]);
+        }
+      }
+    };
+
+    void loadVariables();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [hasColumnEditorArgument, props.workflowId.toString()]);
+
+  const referenceSuggestions: Array<string> = useMemo(() => {
+    return [...componentReferenceSuggestions, ...variableSuggestions];
+  }, [componentReferenceSuggestions, variableSuggestions]);
+
   useEffect(() => {
     props.onHasFormValidationErrors(hasFormValidationErrors);
   }, [hasFormValidationErrors]);
@@ -310,21 +433,38 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
                     arg.type === ComponentInputType.CronTab;
 
                   /*
-                   * Query arguments (which records does this act on) and
-                   * BaseModel arguments (which values does it write) are both
-                   * keyed on the model's columns, so both get the row editor
-                   * backed by the model schema. Same tableName requirement as
-                   * the field picker.
+                   * Query arguments (which records does this act on) and the
+                   * write payload (which values does it set) are both keyed on
+                   * the model's columns, so both get the row editor backed by
+                   * the model schema. Same tableName requirement as the field
+                   * picker.
+                   *
+                   * The write payload is typed JSON, not BaseModel: Create One's
+                   * "json" and Update's "data" are declared
+                   * ComponentInputType.JSON in Types/Workflow/Components/BaseModel,
+                   * and BaseModel appears there only as a *return* value. Keying
+                   * this branch on BaseModel alone therefore never matched a real
+                   * component, and every create and update opened on a bare code
+                   * editor. Retyping those arguments would be the smaller-looking
+                   * fix and is the wrong one - it moves them into
+                   * JSON5_TOLERANT_INPUT_TYPES and changes how RunWorkflow parses
+                   * them. Widening the predicate leaves every runtime path alone.
                    *
-                   * BaseModelArray is deliberately not included: it holds a
-                   * list of records, which rows cannot represent.
+                   * tableName is set only by the database component generator, and
+                   * the only JSON-typed arguments on those components are the two
+                   * above, so this cannot reach a JSON argument on any other
+                   * component.
+                   *
+                   * JSONArray (Create Many) is deliberately not included: it holds
+                   * a list of records, which rows cannot represent.
                    */
                   const columnEditorMode: ModelColumnEditorMode | undefined =
                     !component.metadata.tableName
                       ? undefined
                       : arg.type === ComponentInputType.Query
                         ? ModelColumnEditorMode.Query
-                        : arg.type === ComponentInputType.BaseModel
+                        : arg.type === ComponentInputType.JSON ||
+                            arg.type === ComponentInputType.BaseModel
                           ? ModelColumnEditorMode.Record
                           : undefined;
 
@@ -355,6 +495,7 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
                             placeholder={customProps.placeholder}
                             error={customProps.error}
                             tabIndex={customProps.tabIndex}
+                            valueSuggestions={referenceSuggestions}
                           />
                         );
                       },
@@ -537,7 +678,12 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
 
       {showComponentPickerModal && (
         <ComponentValuePickerModal
-          components={props.graphComponents}
+          /* A component cannot read its own output. */
+          components={(props.graphComponents || []).filter(
+            (graphComponent: NodeDataProp) => {
+              return graphComponent.id !== component.id;
+            },
+          )}
           onClose={() => {
             setShowComponentPickerModal(false);
           }}

package/UI/Components/Workflow/ComponentReturnValueViewer.tsx

@@ -1,10 +1,18 @@
 import { ReturnValue } from "../../../Types/Workflow/Component";
+import { componentReturnValueReference } from "../../../Types/Workflow/TemplateSyntax";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
   returnValues: Array<ReturnValue>;
   name: string;
   description: string;
+  /*
+   * This step's identifier. When given, each return value also shows the exact
+   * reference another step would use to read it. That string was previously
+   * obtainable only by opening the value picker on some other component, so the
+   * syntax had no home on the component that owns the value.
+   */
+  componentId?: string | undefined;
 }
 
 const ComponentReturnValueViewer: FunctionComponent<ComponentProps> = (
@@ -78,6 +86,24 @@ const ComponentReturnValueViewer: FunctionComponent<ComponentProps> = (
                       {returnValue.description}
                     </p>
                   )}
+                  {props.componentId && (
+                    <code
+                      style={{
+                        display: "block",
+                        marginTop: "0.25rem",
+                        fontSize: "0.6875rem",
+                        color: "var(--ou-text-subtle, #94a3b8)",
+                        fontFamily:
+                          'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
+                        overflowWrap: "anywhere",
+                      }}
+                    >
+                      {componentReturnValueReference(
+                        props.componentId,
+                        returnValue.id,
+                      )}
+                    </code>
+                  )}
                 </div>
                 <span
                   style={{

package/UI/Components/Workflow/ComponentSettingsModal.tsx

@@ -128,6 +128,7 @@ const ComponentSettingsModal: FunctionComponent<ComponentProps> = (
         documentationLink={component.metadata.documentationLink}
         workflowId={props.workflowId}
         webhookSecretKey={props.webhookSecretKey}
+        tableName={component.metadata.tableName}
       />
     </SectionCard>
   ) : null;
@@ -173,6 +174,7 @@ const ComponentSettingsModal: FunctionComponent<ComponentProps> = (
         name=""
         description="Data this step makes available downstream."
         returnValues={component.metadata.returnValues}
+        componentId={component.id}
       />
     </SectionCard>
   ) : null;
@@ -284,12 +286,19 @@ const ComponentSettingsModal: FunctionComponent<ComponentProps> = (
          */}
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
           <div className="md:col-span-2 space-y-4">{settingsSection}</div>
+          {/*
+           * Documentation goes last. Inputs, outputs and returns are generated
+           * from this component's own metadata and are therefore always exactly
+           * about the step on screen; the documentation is a shared file
+           * covering a whole family. Reading order should follow accuracy, and
+           * the shared file is also much the tallest of the four.
+           */}
           <div className="md:col-span-1 space-y-4">
             {idSection}
-            {documentationSection}
             {inputsSection}
             {outputsSection}
             {returnsSection}
+            {documentationSection}
           </div>
         </div>
       </>

package/UI/Components/Workflow/ComponentValuePickerModal.tsx

@@ -3,7 +3,17 @@ import Input from "../Input/Input";
 import Modal, { ModalWidth } from "../Modal/Modal";
 import Pill from "../Pill/Pill";
 import { Black } from "../../../Types/BrandColors";
-import { NodeDataProp, ReturnValue } from "../../../Types/Workflow/Component";
+import {
+  ComponentInputType,
+  NodeDataProp,
+  ReturnValue,
+} from "../../../Types/Workflow/Component";
+import { componentReturnValueReference } from "../../../Types/Workflow/TemplateSyntax";
+import {
+  ModelSchemaColumn,
+  ModelSchemaState,
+  useModelSchema,
+} from "./ModelSchema";
 import React, {
   FunctionComponent,
   ReactElement,
@@ -17,6 +27,32 @@ export interface ComponentProps {
   components: Array<NodeDataProp>;
 }
 
+/*
+ * A return value that holds one record can be drilled into: the useful
+ * reference is almost never the record itself but a column on it, and deeper
+ * paths already resolve at run time. An array of records cannot - there is no
+ * single row to take a column from.
+ */
+type CanDrillIntoFunction = (
+  component: NodeDataProp | null,
+  returnValue: ReturnValue | null,
+) => boolean;
+
+export const canDrillIntoReturnValue: CanDrillIntoFunction = (
+  component: NodeDataProp | null,
+  returnValue: ReturnValue | null,
+): boolean => {
+  if (!component || !returnValue) {
+    return false;
+  }
+
+  if (!component.metadata?.tableName) {
+    return false;
+  }
+
+  return returnValue.type === ComponentInputType.BaseModel;
+};
+
 const ComponentValuePickerModal: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
@@ -24,12 +60,26 @@ const ComponentValuePickerModal: FunctionComponent<ComponentProps> = (
     useState<ReturnValue | null>(null);
   const [selectedComponent, setSelectedComponent] =
     useState<NodeDataProp | null>(null);
+  const [selectedColumnId, setSelectedColumnId] = useState<string | null>(null);
   const [searchedComponents, setSearchedComponents] = useState<
     Array<NodeDataProp>
   >([]);
 
   const [searchText, setSearchText] = useState<string>("");
 
+  const canDrillIn: boolean = canDrillIntoReturnValue(
+    selectedComponent,
+    selectedReturnValue,
+  );
+
+  /*
+   * Passing undefined keeps the hook idle, so this costs nothing until a
+   * record-shaped return value is actually selected.
+   */
+  const drillInSchema: ModelSchemaState = useModelSchema(
+    canDrillIn ? (selectedComponent?.metadata.tableName as string) : undefined,
+  );
+
   useEffect(() => {
     setSearchedComponents(searchReturnValues(props.components, searchText));
   }, [props.components, searchText]);
@@ -47,21 +97,30 @@ const ComponentValuePickerModal: FunctionComponent<ComponentProps> = (
       return components;
     }
 
+    // Case-sensitive matching meant "monitor" never found "Find One Monitor".
+    const needle: string = searchText.trim().toLowerCase();
+
     const searched: Array<NodeDataProp> = [];
 
     for (const component of components) {
       if (
-        component.metadata.title.includes(searchText) ||
-        component.metadata.description.includes(searchText)
+        (component.metadata.title || "").toLowerCase().includes(needle) ||
+        (component.metadata.description || "").toLowerCase().includes(needle)
       ) {
         searched.push(component);
         continue;
       }
 
-      for (const returnVal of component.metadata.returnValues) {
+      /*
+       * Not every node carries return values. The placeholder trigger node has
+       * a partial metadata object with none, and this loop ran inside an effect,
+       * so reading through it threw past the nearest error boundary and took the
+       * whole builder page down - along with any unsaved graph edits.
+       */
+      for (const returnVal of component.metadata.returnValues || []) {
         if (
-          returnVal.name.includes(searchText) ||
-          returnVal.description.includes(searchText)
+          (returnVal.name || "").toLowerCase().includes(needle) ||
+          (returnVal.description || "").toLowerCase().includes(needle)
         ) {
           searched.push(component);
           break;
@@ -91,7 +150,11 @@ const ComponentValuePickerModal: FunctionComponent<ComponentProps> = (
         }
 
         props.onSave(
-          `{{local.components.${selectedComponent.id}.returnValues.${selectedReturnValue.id}}}`,
+          componentReturnValueReference(
+            selectedComponent.id,
+            selectedReturnValue.id,
+            canDrillIn && selectedColumnId ? [selectedColumnId] : undefined,
+          ),
         );
       }}
     >
@@ -155,6 +218,8 @@ const ComponentValuePickerModal: FunctionComponent<ComponentProps> = (
                               onClick={() => {
                                 setSelectedComponent(component);
                                 setSelectedReturnValue(returnValue);
+                                // A new selection is a new record — drop any column picked off the last one.
+                                setSelectedColumnId(null);
                               }}
                               className={`cursor-pointer mt-2 mb-2 relative flex items-center space-x-3 rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-pink-500 focus-within:ring-offset-2 hover:border-gray-400 ${
                                 isSelected ? "ring ring-indigo-500" : ""
@@ -189,6 +254,69 @@ const ComponentValuePickerModal: FunctionComponent<ComponentProps> = (
               },
             )}
         </div>
+
+        {/*
+         * Second step, only for a return value that holds one record. Without
+         * it the picker could only ever emit a reference to the whole record —
+         * and for a Find One or an On Create step the whole record is the single
+         * return value, so the one path it produced was never the useful one.
+         */}
+        {canDrillIn && (
+          <div className="border-t border-gray-200 pt-4">
+            <h2 className="text-base font-medium text-gray-500">
+              Which field of {selectedReturnValue?.name}?
+            </h2>
+            <p className="text-sm font-medium text-gray-400 mb-3">
+              Pick a column to reference just that value, or leave this to
+              reference the whole record.
+            </p>
+
+            {drillInSchema.isLoading && <p className="text-sm">Loading…</p>}
+
+            {drillInSchema.error && (
+              <p className="text-sm text-amber-600">
+                Couldn&apos;t load this model&apos;s columns (
+                {drillInSchema.error}). The whole record will be referenced.
+              </p>
+            )}
+
+            <div className="max-h-48 overflow-y-auto flex flex-wrap gap-2">
+              {(drillInSchema.columns || []).map(
+                (column: ModelSchemaColumn) => {
+                  const isSelected: boolean = selectedColumnId === column.id;
+
+                  return (
+                    <button
+                      type="button"
+                      key={column.id}
+                      title={column.description || column.title}
+                      onClick={() => {
+                        setSelectedColumnId(isSelected ? null : column.id);
+                      }}
+                      className={`rounded-md border px-2 py-1 text-xs cursor-pointer ${
+                        isSelected
+                          ? "border-indigo-500 ring-1 ring-indigo-500 text-indigo-700"
+                          : "border-gray-300 text-gray-600 hover:border-gray-400"
+                      }`}
+                    >
+                      {column.id}
+                    </button>
+                  );
+                },
+              )}
+            </div>
+
+            {selectedComponent && selectedReturnValue && (
+              <code className="mt-3 block text-xs text-gray-500 break-all">
+                {componentReturnValueReference(
+                  selectedComponent.id,
+                  selectedReturnValue.id,
+                  selectedColumnId ? [selectedColumnId] : undefined,
+                )}
+              </code>
+            )}
+          </div>
+        )}
       </div>
     </Modal>
   );