@oneuptime/common 10.2.18 → 10.2.21

package/UI/Components/Forms/BasicForm.tsx

@@ -1,5 +1,6 @@
 import API from "../../Utils/API/API";
 import UiAnalytics from "../../Utils/Analytics";
+import useTranslateValue from "../../Utils/Translation";
 import Alert, { AlertType } from "../Alerts/Alert";
 import Button, { ButtonStyleType } from "../Button/Button";
 import ButtonTypes from "../Button/ButtonTypes";
@@ -104,6 +105,7 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
     props: ComponentProps<T>,
     ref: Ref<any>,
   ): ReactElement => {
+    const { translateString } = useTranslateValue();
     const isSubmitting: MutableRefObject<boolean> = useRef(false);
 
     const [didSomethingChange, setDidSomethingChange] =
@@ -164,9 +166,11 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
       ((formSteps as Array<FormStep<T>>)[formSteps.length - 1] as FormStep<T>)
         .id === currentFormStepId;
 
-    const submitButtonText: string = isOnLastFormStep
+    const submitButtonTextRaw: string = isOnLastFormStep
       ? props.submitButtonText || "Submit"
       : "Next";
+    const submitButtonText: string =
+      translateString(submitButtonTextRaw) ?? submitButtonTextRaw;
 
     useEffect(() => {
       if (props.values) {
@@ -597,12 +601,16 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
         <div className="col-lg-1">
           <div>
             {props.title && (
-              <h1 className="text-lg text-gray-700 mt-5">{props.title}</h1>
+              <h1 className="text-lg text-gray-700 mt-5">
+                {translateString(props.title) ?? props.title}
+              </h1>
             )}
 
             {Boolean(props.description) && (
               <div className="text-sm text-gray-500 mb-5">
-                {props.description}
+                {typeof props.description === "string"
+                  ? translateString(props.description) ?? props.description
+                  : props.description}
               </div>
             )}
 
@@ -679,11 +687,17 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
                                       className={`${fullRowSpan} mt-4 pt-5 first:mt-0 first:pt-0 border-t first:border-t-0 border-gray-200`}
                                     >
                                       <h3 className="text-base font-semibold text-gray-900">
-                                        {field.sectionTitle}
+                                        {translateString(field.sectionTitle) ??
+                                          field.sectionTitle}
                                       </h3>
                                       {field.sectionDescription && (
                                         <p className="mt-1 text-sm text-gray-500">
-                                          {field.sectionDescription}
+                                          {typeof field.sectionDescription ===
+                                          "string"
+                                            ? translateString(
+                                                field.sectionDescription,
+                                              ) ?? field.sectionDescription
+                                            : field.sectionDescription}
                                         </p>
                                       )}
                                     </div>
@@ -774,7 +788,10 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
                   {props.onCancel && (
                     <div>
                       <Button
-                        title={props.cancelButtonText || "Cancel"}
+                        title={
+                          translateString(props.cancelButtonText || "Cancel") ??
+                          (props.cancelButtonText || "Cancel")
+                        }
                         type={ButtonTypes.Button}
                         id={`${props.id}-cancel-button`}
                         disabled={

package/UI/Components/Forms/Fields/FieldLabel.tsx

@@ -1,5 +1,6 @@
 import Link from "../../Link/Link";
 import { FormFieldSideLink } from "../Types/Field";
+import useTranslateValue from "../../../Utils/Translation";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
@@ -15,6 +16,13 @@ export interface ComponentProps {
 const FieldLabelElement: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateString, translateValue } = useTranslateValue();
+  const translatedTitle: string = translateString(props.title) ?? props.title;
+  const translatedSideLinkText: string | undefined = translateString(
+    props.sideLink?.text,
+  );
+  const translatedDescription: string | ReactElement | undefined =
+    translateValue(props.description);
   return (
     <>
       <label
@@ -26,26 +34,30 @@ const FieldLabelElement: FunctionComponent<ComponentProps> = (
         }
       >
         <span>
-          {props.title}{" "}
+          {translatedTitle}{" "}
           <span className="text-gray-400 text-xs">
-            {props.required || props.hideOptionalLabel ? "" : "(Optional)"}
+            {props.required || props.hideOptionalLabel
+              ? ""
+              : translateString("(Optional)") ?? "(Optional)"}
           </span>
         </span>
-        {props.sideLink && props.sideLink?.text && props.sideLink?.url && (
+        {props.sideLink && translatedSideLinkText && props.sideLink?.url && (
           <span data-testid="login-forgot-password">
             <Link
               to={props.sideLink?.url}
               openInNewTab={props.sideLink?.openLinkInNewTab}
               className="text-indigo-500 hover:text-indigo-900 cursor-pointer"
             >
-              {props.sideLink?.text}
+              {translatedSideLinkText}
             </Link>
           </span>
         )}
       </label>
 
-      {props.description && (
-        <div className="mt-1 text-sm text-gray-500">{props.description}</div>
+      {translatedDescription && (
+        <div className="mt-1 text-sm text-gray-500">
+          {translatedDescription}
+        </div>
       )}
     </>
   );

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -281,7 +281,10 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
 ) => ReactElement = <TBaseModel extends BaseModel | AnalyticsBaseModel>(
   props: ComponentProps<TBaseModel>,
 ): ReactElement => {
-  const { translateValue } = useTranslateValue();
+  const { translateValue, translateString } = useTranslateValue();
+  const tx: (value: string) => string = (value: string): string => {
+    return translateString(value) ?? value;
+  };
   const [tableView, setTableView] = useState<TableView | null>(null);
 
   const matchBulkSelectedItemByField: keyof TBaseModel =
@@ -803,7 +806,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
 
     if (showActionsColumn) {
       columns.push({
-        title: "Actions",
+        title: tx("Actions"),
         type: FieldType.Actions,
       });
     }
@@ -1305,7 +1308,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
     // Add documentation link button first if provided
     if (props.documentationLink) {
       headerbuttons.push({
-        title: "View Documentation",
+        title: tx("View Documentation"),
         icon: IconProp.Book,
         buttonStyle: ButtonStyleType.HOVER_PRIMARY_OUTLINE,
         buttonSize: ButtonSize.Small,
@@ -1335,7 +1338,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
     // Add video link button if provided
     if (props.videoLink) {
       headerbuttons.push({
-        title: "Watch Demo",
+        title: tx("Watch Demo"),
         icon: IconProp.Play,
         buttonStyle: ButtonStyleType.HOVER_PRIMARY_OUTLINE,
         buttonSize: ButtonSize.Small,
@@ -1371,9 +1374,9 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
       showAs !== ShowAs.OrderedStatesList
     ) {
       headerbuttons.push({
-        title: `${props.createVerb || "Create"} ${
-          props.singularName || model.singularName
-        }`,
+        title: `${tx(props.createVerb || "Create")} ${tx(
+          props.singularName || model.singularName || "",
+        )}`,
         buttonStyle: ButtonStyleType.NORMAL,
         buttonSize: ButtonSize.Normal,
         className: "",
@@ -1581,7 +1584,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
 
     if (props.showViewIdButton) {
       actionsSchema.push({
-        title: "Show ID",
+        title: tx("Show ID"),
         buttonStyleType: ButtonStyleType.OUTLINE,
         hideOnMobile: true,
         onClick: async (
@@ -1613,9 +1616,9 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         (model.hasReadPermissions(permissions) || User.isMasterAdmin())
       ) {
         actionsSchema.push({
-          title:
-            props.viewButtonText ||
-            `View ${props.singularName || model.singularName}`,
+          title: props.viewButtonText
+            ? tx(props.viewButtonText)
+            : `${tx("View")} ${tx(props.singularName || model.singularName || "")}`,
           buttonStyleType: ButtonStyleType.NORMAL,
           onClick: async (
             item: TBaseModel,
@@ -1675,7 +1678,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         (model.hasUpdatePermissions(permissions) || User.isMasterAdmin())
       ) {
         actionsSchema.push({
-          title: props.editButtonText || "Edit",
+          title: tx(props.editButtonText || "Edit"),
           buttonStyleType: ButtonStyleType.OUTLINE,
           onClick: async (
             item: TBaseModel,
@@ -1704,7 +1707,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         (model.hasDeletePermissions(permissions) || User.isMasterAdmin())
       ) {
         actionsSchema.push({
-          title: props.deleteButtonText || "Delete",
+          title: tx(props.deleteButtonText || "Delete"),
           icon: IconProp.Trash,
           buttonStyleType: ButtonStyleType.DANGER_OUTLINE,
           onClick: async (

package/UI/Components/MoreMenu/MoreMenuSection.tsx

@@ -1,3 +1,4 @@
+import useTranslateValue from "../../Utils/Translation";
 import React, { FunctionComponent, ReactElement } from "react";
 import MoreMenuDivider from "./Divider";
 export interface ComponentProps {
@@ -8,10 +9,12 @@ export interface ComponentProps {
 const MoreMenuSection: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
+  const translatedTitle: string = translateString(props.title) ?? props.title;
   return (
     <div>
       <div className="text-gray-400 text-xs font-medium pt-2 pl-3 pr-3 pb-2">
-        {props.title.toUpperCase()}
+        {translatedTitle.toUpperCase()}
       </div>
       {props.children}
       <MoreMenuDivider />

package/UI/Components/Navbar/NavBarItem.tsx

@@ -1,5 +1,6 @@
 // Tailwind
 import Navigation from "../../Utils/Navigation";
+import useTranslateValue from "../../Utils/Translation";
 import Icon, { ThickProp } from "../Icon/Icon";
 import Link from "../Link/Link";
 import Route from "../../../Types/API/Route";
@@ -23,6 +24,8 @@ export interface ComponentProps {
 const NavBarItem: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
+  const translatedTitle: string = translateString(props.title) ?? props.title;
   const activeRoute: Route | undefined = props.activeRoute || props.route;
   const isActive: boolean = Boolean(
     activeRoute &&
@@ -67,7 +70,7 @@ const NavBarItem: FunctionComponent<ComponentProps> = (
         ) : (
           <></>
         )}
-        <span>{props.title}</span>
+        <span>{translatedTitle}</span>
         {props.children ? <div className="arrow-down"></div> : <></>}
       </Link>
       {props.children}

package/UI/Components/Navbar/NavBarMenuItem.tsx

@@ -2,6 +2,7 @@ import Icon from "../Icon/Icon";
 import Link from "../Link/Link";
 import Route from "../../../Types/API/Route";
 import IconProp from "../../../Types/Icon/IconProp";
+import useTranslateValue from "../../Utils/Translation";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
@@ -16,6 +17,10 @@ export interface ComponentProps {
 const NavBarMenuItem: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
+  const translatedTitle: string = translateString(props.title) ?? props.title;
+  const translatedDescription: string =
+    translateString(props.description) ?? props.description;
   // Default to indigo if no color specified
   const colorName: string = props.iconColor || "indigo";
 
@@ -130,8 +135,8 @@ const NavBarMenuItem: FunctionComponent<ComponentProps> = (
           <Icon icon={props.icon} className="h-4 w-4 text-gray-600" />
         </div>
         <div className="flex-1 min-w-0 text-left">
-          <p className="text-sm font-medium text-gray-900">{props.title}</p>
-          <p className="text-xs text-gray-500">{props.description}</p>
+          <p className="text-sm font-medium text-gray-900">{translatedTitle}</p>
+          <p className="text-xs text-gray-500">{translatedDescription}</p>
         </div>
       </Link>
     </div>

package/UI/Components/Navbar/NavBarMenuSubItem.tsx

@@ -1,5 +1,6 @@
 import Link from "../Link/Link";
 import Route from "../../../Types/API/Route";
+import useTranslateValue from "../../Utils/Translation";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
@@ -10,9 +11,11 @@ export interface ComponentProps {
 const NavBarMenuItem: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
+  const translatedTitle: string = translateString(props.title) ?? props.title;
   return (
     <Link className="dropdown-item" to={props.route}>
-      {props.title}
+      {translatedTitle}
     </Link>
   );
 };

package/UI/Components/ProgressButtons/ProgressButtonItem.tsx

@@ -2,6 +2,7 @@ import React, { FunctionComponent, ReactElement } from "react";
 import Color from "../../../Types/Color";
 import Icon from "../Icon/Icon";
 import IconProp from "../../../Types/Icon/IconProp";
+import useTranslateValue from "../../Utils/Translation";
 
 export interface ProgressItemProps {
   id: string;
@@ -20,6 +21,8 @@ export interface ComponentProps extends ProgressItemProps {
 const ProgressButtonItem: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
+  const translatedTitle: string = translateString(props.title) ?? props.title;
   return (
     <li
       className="relative md:flex md:flex-1 "
@@ -75,7 +78,7 @@ const ProgressButtonItem: FunctionComponent<ComponentProps> = (
             className="ml-4 text-sm font-medium text-gray-900"
             style={{ color: props.color.toString() }}
           >
-            {props.title}
+            {translatedTitle}
           </span>
         </span>
       </div>

package/UI/Components/Table/Table.tsx

@@ -1,4 +1,5 @@
 import { GetReactElementFunction } from "../../Types/FunctionTypes";
+import useTranslateValue from "../../Utils/Translation";
 import ActionButtonSchema from "../ActionButton/ActionButtonSchema";
 import BulkUpdateForm, {
   BulkActionButtonSchema,
@@ -84,6 +85,11 @@ type TableFunction = <T extends GenericObject>(
 const Table: TableFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
+  const translatedSingularLabel: string =
+    translateString(props.singularLabel) ?? props.singularLabel;
+  const translatedPluralLabel: string =
+    translateString(props.pluralLabel) ?? props.pluralLabel;
   const isBulkActionsEnabled: boolean | undefined =
     props.bulkActions &&
     props.bulkActions.buttons &&
@@ -156,7 +162,7 @@ const Table: TableFunction = <T extends GenericObject>(
                 message={
                   props.noItemsMessage
                     ? props.noItemsMessage
-                    : `No ${props.singularLabel.toLocaleLowerCase()}`
+                    : `${translateString("No") ?? "No"} ${translatedSingularLabel.toLocaleLowerCase()}`
                 }
                 onRefreshClick={props.onRefreshClick}
               />
@@ -242,8 +248,8 @@ const Table: TableFunction = <T extends GenericObject>(
         filters={props.filters || []}
         onFilterModalClose={props.onFilterModalClose}
         onFilterModalOpen={props.onFilterModalOpen}
-        singularLabel={props.singularLabel}
-        pluralLabel={props.pluralLabel}
+        singularLabel={translatedSingularLabel}
+        pluralLabel={translatedPluralLabel}
         filterData={props.filterData}
         onAdvancedFiltersToggle={props.onAdvancedFiltersToggle}
       />
@@ -259,8 +265,8 @@ const Table: TableFunction = <T extends GenericObject>(
             setIsAllItemsSelected(true);
           }}
           selectedItems={bulkSelectedItems}
-          singularLabel={props.singularLabel}
-          pluralLabel={props.pluralLabel}
+          singularLabel={translatedSingularLabel}
+          pluralLabel={translatedPluralLabel}
           isAllItemsSelected={isAllItemsSelected}
           onActionStart={props.onBulkActionStart}
           onActionEnd={() => {
@@ -324,8 +330,8 @@ const Table: TableFunction = <T extends GenericObject>(
         <div className="bg-gray-50 text-right md:-mx-6 -mb-6 rounded-b-xl">
           {!props.disablePagination && (
             <Pagination
-              singularLabel={props.singularLabel}
-              pluralLabel={props.pluralLabel}
+              singularLabel={translatedSingularLabel}
+              pluralLabel={translatedPluralLabel}
               currentPageNumber={props.currentPageNumber}
               totalItemsCount={props.totalItemsCount}
               itemsOnPage={props.itemsOnPage}

package/UI/Components/Table/TableHeader.tsx

@@ -8,6 +8,7 @@ import SortOrder, {
 } from "../../../Types/BaseDatabase/SortOrder";
 import GenericObject from "../../../Types/GenericObject";
 import IconProp from "../../../Types/Icon/IconProp";
+import useTranslateValue from "../../Utils/Translation";
 import React, { ReactElement, useEffect, useState } from "react";
 
 export interface ComponentProps<T extends GenericObject> {
@@ -31,6 +32,7 @@ type TableHeaderFunction = <T extends GenericObject>(
 const TableHeader: TableHeaderFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
   // Track mobile view for responsive behavior
   const [isMobile, setIsMobile] = useState<boolean>(false);
 
@@ -128,7 +130,7 @@ const TableHeader: TableHeaderFunction = <T extends GenericObject>(
                       : "justify-start"
                   }`}
                 >
-                  {column.title}
+                  {translateString(column.title) ?? column.title}
                   {canSort &&
                     props.sortBy === column.key &&
                     props.sortOrder === SortOrder.Ascending && (

package/UI/Components/Tabs/Tab.tsx

@@ -1,3 +1,4 @@
+import useTranslateValue from "../../Utils/Translation";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export enum TabType {
@@ -24,6 +25,9 @@ export interface ComponentProps {
 const TabElement: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
+  const translatedName: string =
+    translateString(props.tab.name) ?? props.tab.name;
   const backgroundColor: string = "bg-gray-100";
 
   const baseClasses: string =
@@ -55,7 +59,7 @@ const TabElement: FunctionComponent<ComponentProps> = (
         aria-selected={props.isSelected}
         aria-controls={props.tabPanelId}
       >
-        <div>{props.tab.name}</div>
+        <div>{translatedName}</div>
 
         {props.tab.countBadge && props.tab.countBadge > 0 ? (
           <span

package/UI/Components/TopAlert/TopAlert.tsx

@@ -1,3 +1,4 @@
+import useTranslateValue from "../../Utils/Translation";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export enum TopAlertType {
@@ -16,6 +17,11 @@ export interface ComponentProps {
 const TopAlert: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateString, translateValue } = useTranslateValue();
+  const translatedTitle: string = translateString(props.title) ?? props.title;
+  const translatedDescription: string | ReactElement =
+    (translateValue(props.description) as string | ReactElement | undefined) ??
+    props.description;
   const alertType: TopAlertType = props.alertType || TopAlertType.INFO;
 
   return (
@@ -26,9 +32,9 @@ const TopAlert: FunctionComponent<ComponentProps> = (
     >
       <div className="text-sm leading-6 text-white w-full">
         <div className="w-full">
-          <strong className="font-semibold">{props.title}</strong>
+          <strong className="font-semibold">{translatedTitle}</strong>
           &nbsp;-&nbsp;
-          {props.description} &nbsp;&nbsp;
+          {translatedDescription} &nbsp;&nbsp;
           {/** Uncomment the follwing line if you need a button on top alert */}
           {/* <a
                         href="#"

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";
@@ -190,15 +193,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 +247,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 +282,7 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
                           </button>
                         </p>
                       </div>
-                    ),
+                    ) : undefined,
                     description: `${
                       arg.required ? "Required" : "Optional"
                     }. ${arg.description}`,