From 3045cd7b3a8661eea3ca89ebb64f5c06225e3cd4 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 21 Feb 2025 15:16:58 +1000
Subject: [PATCH] tidy(ui): split up FormElementEditModeHeader components

---
 .../builder/FormElementEditModeHeader.tsx     | 89 ++++++++++---------
 1 file changed, 47 insertions(+), 42 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeHeader.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeHeader.tsx
index 8d6dd2f72c..38613ae403 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeHeader.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeHeader.tsx
@@ -5,14 +5,13 @@ import { ContainerElementSettings } from 'features/nodes/components/sidePanel/bu
 import { useDepthContext } from 'features/nodes/components/sidePanel/builder/contexts';
 import { NodeFieldElementSettings } from 'features/nodes/components/sidePanel/builder/NodeFieldElementSettings';
 import { formElementRemoved } from 'features/nodes/store/workflowSlice';
-import { type FormElement, isContainerElement, isNodeFieldElement } from 'features/nodes/types/workflow';
+import type { FormElement } from 'features/nodes/types/workflow';
+import { isContainerElement, isNodeFieldElement } from 'features/nodes/types/workflow';
 import { startCase } from 'lodash-es';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiXBold } from 'react-icons/pi';
 
-import { useIsRootElement } from './dnd-hooks';
-
 const sx: SystemStyleObject = {
   w: 'full',
   ps: 2,
@@ -26,56 +25,62 @@ const sx: SystemStyleObject = {
   '&[data-depth="0"]': { bg: 'baseAlpha.100' },
   '&[data-depth="1"]': { bg: 'baseAlpha.150' },
   '&[data-depth="2"]': { bg: 'baseAlpha.200' },
-  '&[data-is-root="false"]': { cursor: 'grab' },
 };
 
 export const FormElementEditModeHeader = memo(
   forwardRef(({ element }: { element: FormElement }, ref) => {
-    const { t } = useTranslation();
     const depth = useDepthContext();
-    const dispatch = useAppDispatch();
-    const isRootElement = useIsRootElement(element.id);
-    const removeElement = useCallback(() => {
-      if (isRootElement) {
-        return;
-      }
-      dispatch(formElementRemoved({ id: element.id }));
-    }, [dispatch, element.id, isRootElement]);
-    const label = useMemo(() => {
-      if (isRootElement) {
-        return 'Root Container';
-      }
-      if (isContainerElement(element) && element.data.layout === 'column') {
-        return `Container (column layout)`;
-      }
-      if (isContainerElement(element) && element.data.layout === 'row') {
-        return `Container (row layout)`;
-      }
-      return startCase(element.type);
-    }, [element, isRootElement]);
 
     return (
-      <Flex ref={ref} sx={sx} data-depth={depth} data-is-root={isRootElement}>
-        <Text fontWeight="semibold" noOfLines={1} wordBreak="break-all" userSelect="none">
-          {label}
-        </Text>
+      <Flex ref={ref} sx={sx} data-depth={depth}>
+        <Label element={element} />
         <Spacer />
-        {isContainerElement(element) && !isRootElement && <ContainerElementSettings element={element} />}
+        {isContainerElement(element) && <ContainerElementSettings element={element} />}
         {isNodeFieldElement(element) && <NodeFieldElementSettings element={element} />}
-        {!isRootElement && (
-          <IconButton
-            tooltip={t('common.delete')}
-            aria-label={t('common.delete')}
-            onClick={removeElement}
-            icon={<PiXBold />}
-            variant="link"
-            size="sm"
-            alignSelf="stretch"
-            colorScheme="error"
-          />
-        )}
+        <RemoveElementButton element={element} />
       </Flex>
     );
   })
 );
 FormElementEditModeHeader.displayName = 'FormElementEditModeHeader';
+
+const RemoveElementButton = memo(({ element }: { element: FormElement }) => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const removeElement = useCallback(() => {
+    dispatch(formElementRemoved({ id: element.id }));
+  }, [dispatch, element.id]);
+
+  return (
+    <IconButton
+      tooltip={t('common.delete')}
+      aria-label={t('common.delete')}
+      onClick={removeElement}
+      icon={<PiXBold />}
+      variant="link"
+      size="sm"
+      alignSelf="stretch"
+      colorScheme="error"
+    />
+  );
+});
+RemoveElementButton.displayName = 'RemoveElementButton';
+
+const Label = memo(({ element }: { element: FormElement }) => {
+  const label = useMemo(() => {
+    if (isContainerElement(element) && element.data.layout === 'column') {
+      return `Container (column layout)`;
+    }
+    if (isContainerElement(element) && element.data.layout === 'row') {
+      return `Container (row layout)`;
+    }
+    return startCase(element.type);
+  }, [element]);
+
+  return (
+    <Text fontWeight="semibold" noOfLines={1} wordBreak="break-all" userSelect="none">
+      {label}
+    </Text>
+  );
+});
+Label.displayName = 'Label';