feat(ui): restore plus sign button to add node field to form

invokeai/frontend/web/public/locales/en.json

@@ -1717,6 +1717,7 @@
             "column": "Column",
             "nodeField": "Node Field",
             "nodeFieldTooltip": "To add a node field, click the small plus sign button on the field in the Workflow Editor, or drag the field by its name into the form.",
+            "addToForm": "Add to Form",
             "label": "Label",
             "description": "Description",
             "component": "Component",

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldAddToFormRoot.tsx

@@ -0,0 +1,29 @@
+import { IconButton } from '@invoke-ai/ui-library';
+import { useAddNodeFieldToRoot } from 'features/nodes/components/sidePanel/builder/use-add-node-field-to-root';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiPlusBold } from 'react-icons/pi';
+
+type Props = {
+  nodeId: string;
+  fieldName: string;
+};
+
+export const InputFieldAddToFormRoot = memo(({ nodeId, fieldName }: Props) => {
+  const { t } = useTranslation();
+  const addToRoot = useAddNodeFieldToRoot(nodeId, fieldName);
+
+  return (
+    <IconButton
+      variant="ghost"
+      tooltip={t('workflows.builder.addToForm')}
+      aria-label={t('workflows.builder.addToForm')}
+      icon={<PiPlusBold />}
+      pointerEvents="auto"
+      size="xs"
+      onClick={addToRoot}
+    />
+  );
+});
+
+InputFieldAddToFormRoot.displayName = 'InputFieldAddToFormRoot';

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeNodes.tsx

@@ -1,5 +1,6 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Flex, Spacer } from '@invoke-ai/ui-library';
+import { InputFieldAddToFormRoot } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldAddToFormRoot';
 import { InputFieldDescriptionPopover } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldDescriptionPopover';
 import { InputFieldHandle } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldHandle';
 import { InputFieldResetToDefaultValueIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldResetToDefaultValueIconButton';
@@ -119,6 +120,7 @@ const DirectField = memo(({ nodeId, fieldName, isInvalid, isConnected, fieldTemp
             <>
               <InputFieldDescriptionPopover nodeId={nodeId} fieldName={fieldName} />
               <InputFieldResetToDefaultValueIconButton nodeId={nodeId} fieldName={fieldName} />
+              <InputFieldAddToFormRoot nodeId={nodeId} fieldName={fieldName} />
             </>
           )}
         </Flex>

invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-add-node-field-to-root.ts

@@ -0,0 +1,26 @@
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useInputFieldInstance } from 'features/nodes/hooks/useInputFieldInstance';
+import { useInputFieldTemplate } from 'features/nodes/hooks/useInputFieldTemplate';
+import { formElementAdded, selectFormRootElementId } from 'features/nodes/store/workflowSlice';
+import { buildNodeFieldElement } from 'features/nodes/types/workflow';
+import { useCallback } from 'react';
+
+export const useAddNodeFieldToRoot = (nodeId: string, fieldName: string) => {
+  const dispatch = useAppDispatch();
+  const rootElementId = useAppSelector(selectFormRootElementId);
+  const fieldTemplate = useInputFieldTemplate(nodeId, fieldName);
+  const field = useInputFieldInstance(nodeId, fieldName);
+
+  const addNodeFieldToRoot = useCallback(() => {
+    const element = buildNodeFieldElement(nodeId, fieldName, fieldTemplate.type);
+    dispatch(
+      formElementAdded({
+        element,
+        parentId: rootElementId,
+        initialValue: field.value,
+      })
+    );
+  }, [nodeId, fieldName, fieldTemplate.type, dispatch, rootElementId, field.value]);
+
+  return addNodeFieldToRoot;
+};