feat(ui): add fake dnd node field element w/ info tooltip

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",

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>