From 6cfeadb33b55bcc7969e1a70c99901857f48401c Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 21 Feb 2025 08:22:50 +1000
Subject: [PATCH] feat(ui): add fake dnd node field element w/ info tooltip

---
 invokeai/frontend/web/public/locales/en.json                 | 2 ++
 .../nodes/components/sidePanel/builder/WorkflowBuilder.tsx   | 5 +++++
 2 files changed, 7 insertions(+)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index fb1841532c..7914d281c8 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -1715,6 +1715,8 @@
             "layout": "Layout",
             "row": "Row",
             "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.",
             "label": "Label",
             "description": "Description",
             "component": "Component",
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
index 3fe6ac4ecf..8684ca942b 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
@@ -13,9 +13,11 @@ import { buildContainer, buildDivider, buildHeading, buildText } from 'features/
 import { startCase } from 'lodash-es';
 import type { RefObject } from 'react';
 import { memo, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { assert } from 'tsafe';
 
 export const WorkflowBuilder = memo(() => {
+  const { t } = useTranslation();
   const rootElementId = useAppSelector(selectFormRootElementId);
   useBuilderDndMonitor();
 
@@ -27,6 +29,9 @@ export const WorkflowBuilder = memo(() => {
           <AddFormElementDndButton type="divider" />
           <AddFormElementDndButton type="heading" />
           <AddFormElementDndButton type="text" />
+          <Button variant="ghost" tooltip={t('workflows.builder.nodeFieldTooltip')}>
+            {t('workflows.builder.nodeField')}
+          </Button>
           <Spacer />
           <WorkflowBuilderEditMenu />
         </ButtonGroup>