From 78832e546a62dc03223bcddbce626ef6ea36d385 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 21 Feb 2025 08:23:10 +1000
Subject: [PATCH] feat(ui): restore plus sign button to add node field to form

---
 invokeai/frontend/web/public/locales/en.json  |  1 +
 .../fields/InputFieldAddToFormRoot.tsx        | 29 +++++++++++++++++++
 .../fields/InputFieldEditModeNodes.tsx        |  2 ++
 .../builder/use-add-node-field-to-root.ts     | 26 +++++++++++++++++
 4 files changed, 58 insertions(+)
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldAddToFormRoot.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-add-node-field-to-root.ts

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 7914d281c8..5f95131e64 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/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",
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldAddToFormRoot.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldAddToFormRoot.tsx
new file mode 100644
index 0000000000..102cc9aa76
--- /dev/null
+++ b/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';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeNodes.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeNodes.tsx
index deacfb77c3..9d50a0a503 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeNodes.tsx
+++ b/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>
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-add-node-field-to-root.ts b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-add-node-field-to-root.ts
new file mode 100644
index 0000000000..cffe13b862
--- /dev/null
+++ b/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;
+};