@oneuptime/common 10.2.20 → 10.2.22

package/UI/Components/Workflow/ArgumentsForm.tsx

@@ -1,8 +1,11 @@
 import ComponentLoader from "../ComponentLoader/ComponentLoader";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import BasicForm, { FormProps } from "../Forms/BasicForm";
+import FormFieldSchemaType from "../Forms/Types/FormFieldSchemaType";
+import { CustomElementProps } from "../Forms/Types/Field";
 import FormValues from "../Forms/Types/FormValues";
 import ComponentValuePickerModal from "./ComponentValuePickerModal";
+import ModelFieldPicker from "./ModelFieldPicker";
 import { componentInputTypeToFormFieldType } from "./Utils";
 import VariableModal from "./VariableModal";
 import Dictionary from "../../../Types/Dictionary";
@@ -140,17 +143,11 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
   }, [component]);
 
   return (
-    <div className="mb-3 mt-3">
-      <div className="mt-5 mb-5">
-        <h2 className="text-base font-medium text-gray-500">Arguments</h2>
-        <p className="text-sm font-medium text-gray-400 mb-5">
-          Arguments for this component
-        </p>
+    <div>
+      <div>
         {component.metadata.arguments &&
           component.metadata.arguments.length === 0 && (
-            <ErrorMessage
-              message={"This component does not take any arguments."}
-            />
+            <ErrorMessage message={"This step does not need any settings."} />
           )}
         {/*
           If any argument is a WorkflowSelect and we're still fetching the
@@ -190,15 +187,51 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
                   const isWorkflowSelect: boolean =
                     arg.type === ComponentInputType.WorkflowSelect;
 
+                  /*
+                   * Database Select args (the "Select Fields" / "Listen on"
+                   * trigger inputs) get a tree-style field picker backed by
+                   * the model's schema, instead of a raw JSON textarea. We
+                   * need a tableName on the component metadata to fetch the
+                   * column list; without it, fall back to the JSON editor.
+                   */
+                  const useFieldPicker: boolean =
+                    arg.type === ComponentInputType.Select &&
+                    Boolean(component.metadata.tableName);
+
                   const baseField: {
                     fieldType: import("../Forms/Types/FormFieldSchemaType").default;
                     dropdownOptions?: Array<DropdownOption> | undefined;
-                  } = componentInputTypeToFormFieldType(
-                    arg.type,
-                    component.arguments && component.arguments[arg.id]
-                      ? component.arguments[arg.id]
-                      : null,
-                  );
+                    getCustomElement?: (
+                      values: FormValues<JSONObject>,
+                      customProps: CustomElementProps,
+                    ) => ReactElement | undefined;
+                  } = useFieldPicker
+                    ? {
+                        fieldType: FormFieldSchemaType.CustomComponent,
+                        getCustomElement: (
+                          _values: FormValues<JSONObject>,
+                          customProps: CustomElementProps,
+                        ): ReactElement => {
+                          return (
+                            <ModelFieldPicker
+                              tableName={component.metadata.tableName as string}
+                              initialValue={customProps.initialValue}
+                              onChange={(value: string) => {
+                                void customProps.onChange?.(value);
+                              }}
+                              placeholder={customProps.placeholder}
+                              error={customProps.error}
+                              tabIndex={customProps.tabIndex}
+                            />
+                          );
+                        },
+                      }
+                    : componentInputTypeToFormFieldType(
+                        arg.type,
+                        component.arguments && component.arguments[arg.id]
+                          ? component.arguments[arg.id]
+                          : null,
+                      );
 
                   /*
                    * For WorkflowSelect, inject the dynamically fetched list
@@ -208,13 +241,17 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
                     baseField.dropdownOptions = workflowDropdownOptions;
                   }
 
+                  /*
+                   * The "pick from component / variable" footer doesn't
+                   * apply to the field picker (it edits a structured object,
+                   * not a free-text expression) or to WorkflowSelect.
+                   */
+                  const showVariableFooter: boolean =
+                    !isWorkflowSelect && !useFieldPicker;
+
                   return {
                     title: `${arg.name}`,
-                    /*
-                     * WorkflowSelect has no "pick from component/variable"
-                     * footer — it's a bound dropdown, not a free-text field.
-                     */
-                    footerElement: isWorkflowSelect ? undefined : (
+                    footerElement: showVariableFooter ? (
                       <div className="text-gray-500">
                         <p className="text-sm">
                           Pick this value from other{" "}
@@ -239,7 +276,7 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
                           </button>
                         </p>
                       </div>
-                    ),
+                    ) : undefined,
                     description: `${
                       arg.required ? "Required" : "Optional"
                     }. ${arg.description}`,

package/UI/Components/Workflow/ComponentPortViewer.tsx

@@ -11,11 +11,15 @@ const ComponentPortViewer: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   return (
-    <div className="mt-3 mb-3">
-      <h2 className="text-sm font-semibold text-gray-600">{props.name}</h2>
-      <p className="text-xs text-gray-400 mb-2">{props.description}</p>
+    <div>
+      {props.name && (
+        <h2 className="text-sm font-semibold text-gray-600">{props.name}</h2>
+      )}
+      {props.description && (
+        <p className="text-xs text-gray-400 mb-2">{props.description}</p>
+      )}
       {props.ports && props.ports.length === 0 && (
-        <p className="text-xs text-gray-400 italic">No ports configured.</p>
+        <p className="text-xs text-gray-400 italic">No connections.</p>
       )}
       <div>
         {props.ports &&

package/UI/Components/Workflow/ComponentReturnValueViewer.tsx

@@ -11,12 +11,16 @@ const ComponentReturnValueViewer: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   return (
-    <div className="mt-3 mb-3">
-      <h2 className="text-sm font-semibold text-gray-600">{props.name}</h2>
-      <p className="text-xs text-gray-400 mb-2">{props.description}</p>
+    <div>
+      {props.name && (
+        <h2 className="text-sm font-semibold text-gray-600">{props.name}</h2>
+      )}
+      {props.description && (
+        <p className="text-xs text-gray-400 mb-2">{props.description}</p>
+      )}
       {props.returnValues && props.returnValues.length === 0 && (
         <p className="text-xs text-gray-400 italic">
-          This component does not return any values.
+          This step does not return any data.
         </p>
       )}
       <div>

package/UI/Components/Workflow/ComponentSettingsModal.tsx

@@ -3,7 +3,7 @@ import BasicForm from "../Forms/BasicForm";
 import FormFieldSchemaType from "../Forms/Types/FormFieldSchemaType";
 import FormValues from "../Forms/Types/FormValues";
 import ConfirmModal from "../Modal/ConfirmModal";
-import SideOver from "../SideOver/SideOver";
+import Modal, { ModalWidth } from "../Modal/Modal";
 import ArgumentsForm from "./ArgumentsForm";
 import ComponentPortViewer from "./ComponentPortViewer";
 import ComponentReturnValueViewer from "./ComponentReturnValueViewer";
@@ -28,6 +28,36 @@ export interface ComponentProps {
   webhookSecretKey?: string | undefined;
 }
 
+interface SectionCardProps {
+  icon: IconProp;
+  title: string;
+  children: ReactElement | Array<ReactElement>;
+  tone?: "default" | "info" | undefined;
+}
+
+const SectionCard: FunctionComponent<SectionCardProps> = (
+  props: SectionCardProps,
+): ReactElement => {
+  const isInfo: boolean = props.tone === "info";
+  const containerClass: string = isInfo
+    ? "rounded-lg border border-blue-100 bg-blue-50/40 p-4"
+    : "rounded-lg border border-gray-200 bg-white p-4";
+  const iconClass: string = isInfo ? "text-blue-500" : "text-gray-400";
+  const titleClass: string = isInfo
+    ? "text-[11px] font-semibold uppercase tracking-wider text-blue-700"
+    : "text-[11px] font-semibold uppercase tracking-wider text-gray-500";
+
+  return (
+    <div className={containerClass}>
+      <div className="flex items-center gap-1.5 mb-3">
+        <Icon icon={props.icon} className={`h-3.5 w-3.5 ${iconClass}`} />
+        <span className={titleClass}>{props.title}</span>
+      </div>
+      {props.children}
+    </div>
+  );
+};
+
 const ComponentSettingsModal: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
@@ -38,17 +68,128 @@ const ComponentSettingsModal: FunctionComponent<ComponentProps> = (
   const [showDeleteConfirmation, setShowDeleteConfirmation] =
     useState<boolean>(false);
 
+  const settingsSection: ReactElement = (
+    <SectionCard icon={IconProp.Settings} title="Settings">
+      <ArgumentsForm
+        graphComponents={props.graphComponents}
+        workflowId={props.workflowId}
+        component={component}
+        onFormChange={(c: NodeDataProp) => {
+          setComponent({ ...c });
+        }}
+        onHasFormValidationErrors={(value: Dictionary<boolean>) => {
+          setHasFormValidationErrors({
+            ...hasFormValidationErrors,
+            ...value,
+          });
+        }}
+      />
+    </SectionCard>
+  );
+
+  const idSection: ReactElement = (
+    <SectionCard icon={IconProp.Label} title="ID">
+      <BasicForm
+        hideSubmitButton={true}
+        initialValues={{ id: component?.id }}
+        onChange={(values: FormValues<JSONObject>) => {
+          setComponent({ ...component, ...values });
+        }}
+        onFormValidationErrorChanged={(hasError: boolean) => {
+          setHasFormValidationErrors({
+            ...hasFormValidationErrors,
+            id: hasError,
+          });
+        }}
+        fields={[
+          {
+            title: "Identifier",
+            description: `Used to reference this ${component.metadata.componentType.toLowerCase()} from other steps.`,
+            field: { id: true },
+            required: true,
+            fieldType: FormFieldSchemaType.Text,
+          },
+        ]}
+      />
+    </SectionCard>
+  );
+
+  const documentationSection: ReactElement | null = component.metadata
+    .documentationLink ? (
+    <SectionCard icon={IconProp.Book} title="Documentation" tone="info">
+      <DocumentationViewer
+        documentationLink={component.metadata.documentationLink}
+        workflowId={props.workflowId}
+        webhookSecretKey={props.webhookSecretKey}
+      />
+    </SectionCard>
+  ) : null;
+
+  /*
+   * Each connection/output card is only rendered if there's something to
+   * show — keeps the sidebar lean for triggers (no inputs) and components
+   * that don't return any data.
+   */
+  const hasInputs: boolean =
+    Array.isArray(component.metadata.inPorts) &&
+    component.metadata.inPorts.length > 0;
+  const hasOutputs: boolean =
+    Array.isArray(component.metadata.outPorts) &&
+    component.metadata.outPorts.length > 0;
+  const hasReturns: boolean =
+    Array.isArray(component.metadata.returnValues) &&
+    component.metadata.returnValues.length > 0;
+
+  const inputsSection: ReactElement | null = hasInputs ? (
+    <SectionCard icon={IconProp.ArrowCircleDown} title="Inputs">
+      <ComponentPortViewer
+        name=""
+        description="Where this step is reached from."
+        ports={component.metadata.inPorts}
+      />
+    </SectionCard>
+  ) : null;
+
+  const outputsSection: ReactElement | null = hasOutputs ? (
+    <SectionCard icon={IconProp.ArrowCircleRight} title="Outputs">
+      <ComponentPortViewer
+        name=""
+        description="What runs after this step."
+        ports={component.metadata.outPorts}
+      />
+    </SectionCard>
+  ) : null;
+
+  const returnsSection: ReactElement | null = hasReturns ? (
+    <SectionCard icon={IconProp.Database} title="Returns">
+      <ComponentReturnValueViewer
+        name=""
+        description="Data this step makes available downstream."
+        returnValues={component.metadata.returnValues}
+      />
+    </SectionCard>
+  ) : null;
+
+  const hasErrors: boolean = Object.values(hasFormValidationErrors).some(
+    (v: boolean) => {
+      return v;
+    },
+  );
+
   return (
-    <SideOver
+    <Modal
       title={props.title}
       description={props.description}
       onClose={props.onClose}
       onSubmit={() => {
         return component && props.onSave(component);
       }}
+      submitButtonText="Save"
+      modalWidth={ModalWidth.Large}
+      disableSubmitButton={hasErrors}
       leftFooterElement={
         <Button
-          title={`Delete`}
+          title="Delete"
           icon={IconProp.Trash}
           buttonStyle={ButtonStyleType.DANGER_OUTLINE}
           onClick={() => {
@@ -65,7 +206,7 @@ const ComponentSettingsModal: FunctionComponent<ComponentProps> = (
             onClose={() => {
               setShowDeleteConfirmation(false);
             }}
-            submitButtonText={"Delete"}
+            submitButtonText="Delete"
             onSubmit={() => {
               props.onDelete(component);
               setShowDeleteConfirmation(false);
@@ -75,260 +216,23 @@ const ComponentSettingsModal: FunctionComponent<ComponentProps> = (
           />
         )}
 
-        {/* Component ID Section */}
-        <div
-          style={{
-            backgroundColor: "#f8fafc",
-            borderRadius: "10px",
-            border: "1px solid #e2e8f0",
-            padding: "1rem",
-            marginTop: "0.75rem",
-            marginBottom: "1rem",
-          }}
-        >
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              gap: "0.5rem",
-              marginBottom: "0.5rem",
-            }}
-          >
-            <Icon
-              icon={IconProp.Label}
-              style={{
-                color: "#64748b",
-                width: "0.875rem",
-                height: "0.875rem",
-              }}
-            />
-            <span
-              style={{
-                fontSize: "0.8125rem",
-                fontWeight: 600,
-                color: "#334155",
-              }}
-            >
-              Identity
-            </span>
+        {/*
+         * Two-column layout: arguments take the main column (2/3 width on
+         * md+), metadata sits in a narrower sidebar. Collapses to one
+         * column below md.
+         */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="md:col-span-2 space-y-4">{settingsSection}</div>
+          <div className="md:col-span-1 space-y-4">
+            {idSection}
+            {documentationSection}
+            {inputsSection}
+            {outputsSection}
+            {returnsSection}
           </div>
-          <BasicForm
-            hideSubmitButton={true}
-            initialValues={{
-              id: component?.id,
-            }}
-            onChange={(values: FormValues<JSONObject>) => {
-              setComponent({ ...component, ...values });
-            }}
-            onFormValidationErrorChanged={(hasError: boolean) => {
-              setHasFormValidationErrors({
-                ...hasFormValidationErrors,
-                id: hasError,
-              });
-            }}
-            fields={[
-              {
-                title: `${component.metadata.componentType} ID`,
-                description: `Unique identifier used to reference this ${component.metadata.componentType.toLowerCase()} from other components.`,
-                field: {
-                  id: true,
-                },
-                required: true,
-                fieldType: FormFieldSchemaType.Text,
-              },
-            ]}
-          />
-        </div>
-
-        {/* Documentation Section */}
-        {component.metadata.documentationLink && (
-          <div
-            style={{
-              backgroundColor: "#eff6ff",
-              borderRadius: "10px",
-              border: "1px solid #bfdbfe",
-              padding: "1rem",
-              marginBottom: "1rem",
-            }}
-          >
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                gap: "0.5rem",
-                marginBottom: "0.5rem",
-              }}
-            >
-              <Icon
-                icon={IconProp.Book}
-                style={{
-                  color: "#3b82f6",
-                  width: "0.875rem",
-                  height: "0.875rem",
-                }}
-              />
-              <span
-                style={{
-                  fontSize: "0.8125rem",
-                  fontWeight: 600,
-                  color: "#1e40af",
-                }}
-              >
-                Documentation
-              </span>
-            </div>
-            <DocumentationViewer
-              documentationLink={component.metadata.documentationLink}
-              workflowId={props.workflowId}
-              webhookSecretKey={props.webhookSecretKey}
-            />
-          </div>
-        )}
-
-        {/* Arguments Section */}
-        <div
-          style={{
-            backgroundColor: "#ffffff",
-            borderRadius: "10px",
-            border: "1px solid #e2e8f0",
-            padding: "1rem",
-            marginBottom: "1rem",
-          }}
-        >
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              gap: "0.5rem",
-              marginBottom: "0.75rem",
-            }}
-          >
-            <Icon
-              icon={IconProp.Settings}
-              style={{
-                color: "#64748b",
-                width: "0.875rem",
-                height: "0.875rem",
-              }}
-            />
-            <span
-              style={{
-                fontSize: "0.8125rem",
-                fontWeight: 600,
-                color: "#334155",
-              }}
-            >
-              Configuration
-            </span>
-          </div>
-          <ArgumentsForm
-            graphComponents={props.graphComponents}
-            workflowId={props.workflowId}
-            component={component}
-            onFormChange={(component: NodeDataProp) => {
-              setComponent({ ...component });
-            }}
-            onHasFormValidationErrors={(value: Dictionary<boolean>) => {
-              setHasFormValidationErrors({
-                ...hasFormValidationErrors,
-                ...value,
-              });
-            }}
-          />
-        </div>
-
-        {/* Ports Section */}
-        <div
-          style={{
-            backgroundColor: "#ffffff",
-            borderRadius: "10px",
-            border: "1px solid #e2e8f0",
-            padding: "1rem",
-            marginBottom: "1rem",
-          }}
-        >
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              gap: "0.5rem",
-              marginBottom: "0.25rem",
-            }}
-          >
-            <Icon
-              icon={IconProp.Link}
-              style={{
-                color: "#64748b",
-                width: "0.875rem",
-                height: "0.875rem",
-              }}
-            />
-            <span
-              style={{
-                fontSize: "0.8125rem",
-                fontWeight: 600,
-                color: "#334155",
-              }}
-            >
-              Connections
-            </span>
-          </div>
-          <ComponentPortViewer
-            name="In Ports"
-            description="Input connections for this component"
-            ports={component.metadata.inPorts}
-          />
-          <ComponentPortViewer
-            name="Out Ports"
-            description="Output connections from this component"
-            ports={component.metadata.outPorts}
-          />
-        </div>
-
-        {/* Return Values Section */}
-        <div
-          style={{
-            backgroundColor: "#ffffff",
-            borderRadius: "10px",
-            border: "1px solid #e2e8f0",
-            padding: "1rem",
-            marginBottom: "1rem",
-          }}
-        >
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              gap: "0.5rem",
-              marginBottom: "0.25rem",
-            }}
-          >
-            <Icon
-              icon={IconProp.ArrowCircleRight}
-              style={{
-                color: "#64748b",
-                width: "0.875rem",
-                height: "0.875rem",
-              }}
-            />
-            <span
-              style={{
-                fontSize: "0.8125rem",
-                fontWeight: 600,
-                color: "#334155",
-              }}
-            >
-              Output
-            </span>
-          </div>
-          <ComponentReturnValueViewer
-            name="Return Values"
-            description="Values this component produces for downstream use"
-            returnValues={component.metadata.returnValues}
-          />
         </div>
       </>
-    </SideOver>
+    </Modal>
   );
 };