fix(ui): add missing builder translations

Author: psychedelicious

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

@@ -1726,6 +1726,10 @@
             "layout": "Layout",
             "row": "Row",
             "column": "Column",
+            "container": "Container",
+            "heading": "Heading",
+            "text": "Text",
+            "divider": "Divider",
             "nodeField": "Node Field",
             "zoomToNode": "Zoom to Node",
             "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.",

invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx

@@ -14,8 +14,7 @@ import { $hasTemplates } from 'features/nodes/store/nodesSlice';
 import { selectIsFormEmpty } from 'features/nodes/store/workflowSlice';
 import type { FormElement } from 'features/nodes/types/workflow';
 import { buildContainer, buildDivider, buildHeading, buildText } from 'features/nodes/types/workflow';
-import { startCase } from 'lodash-es';
-import type { RefObject } from 'react';
+import type { PropsWithChildren, RefObject } from 'react';
 import { memo, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useGetOpenAPISchemaQuery } from 'services/api/endpoints/appInfo';
@@ -39,10 +38,10 @@ export const WorkflowBuilder = memo(() => {
     <Flex justifyContent="center" w="full" h="full">
       <Flex flexDir="column" w="full" maxW="768px" gap={2}>
         <Flex w="full" alignItems="center" gap={2} pt={3}>
-          <AddFormElementDndButton type="container" />
-          <AddFormElementDndButton type="divider" />
-          <AddFormElementDndButton type="heading" />
-          <AddFormElementDndButton type="text" />
+          <AddFormElementDndButton type="container">{t('workflows.builder.container')}</AddFormElementDndButton>
+          <AddFormElementDndButton type="divider">{t('workflows.builder.divider')}</AddFormElementDndButton>
+          <AddFormElementDndButton type="heading">{t('workflows.builder.heading')}</AddFormElementDndButton>
+          <AddFormElementDndButton type="text">{t('workflows.builder.text')}</AddFormElementDndButton>
           <Button size="sm" variant="ghost" tooltip={t('workflows.builder.nodeFieldTooltip')}>
             {t('workflows.builder.nodeField')}
           </Button>
@@ -130,14 +129,17 @@ const addFormElementButtonSx: SystemStyleObject = {
   _disabled: { borderStyle: 'dashed', opacity: 0.5 },
 };
 
-const AddFormElementDndButton = ({ type }: { type: Parameters<typeof useAddFormElementDnd>[0] }) => {
+const AddFormElementDndButton = ({
+  type,
+  children,
+}: PropsWithChildren<{ type: Parameters<typeof useAddFormElementDnd>[0] }>) => {
   const draggableRef = useRef<HTMLDivElement>(null);
   const isDragging = useAddFormElementDnd(type, draggableRef);
 
   return (
     // Must be as div for draggable to work correctly
     <Button as="div" ref={draggableRef} size="sm" isDisabled={isDragging} variant="outline" sx={addFormElementButtonSx}>
-      {startCase(type)}
+      {children}
     </Button>
   );
 };