feat(ui): remove the showLabel flag for node fields

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

@@ -1,8 +1,9 @@
-import { Flex, FormControl, FormHelperText, FormLabel, Input } from '@invoke-ai/ui-library';
+import { Flex, FormControl, FormHelperText, FormLabel, Input, Spacer } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useEditable } from 'common/hooks/useEditable';
 import { InputFieldGate } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldGate';
 import { InputFieldRenderer } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer';
+import { NodeFieldElementResetToInitialValueIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/NodeFieldElementResetToInitialValueIconButton';
 import { FormElementEditModeWrapper } from 'features/nodes/components/sidePanel/builder/FormElementEditModeWrapper';
 import { useInputFieldDescription } from 'features/nodes/hooks/useInputFieldDescription';
 import { useInputFieldLabel } from 'features/nodes/hooks/useInputFieldLabel';
@@ -41,7 +42,7 @@ NodeFieldElementComponent.displayName = 'NodeFieldElementComponent';
 
 const NodeFieldElementComponentViewMode = memo(({ el }: { el: NodeFieldElement }) => {
   const { id, data } = el;
-  const { fieldIdentifier, showLabel, showDescription } = data;
+  const { fieldIdentifier, showDescription } = data;
   const label = useInputFieldLabel(fieldIdentifier.nodeId, fieldIdentifier.fieldName);
   const description = useInputFieldDescription(fieldIdentifier.nodeId, fieldIdentifier.fieldName);
   const fieldTemplate = useInputFieldTemplate(fieldIdentifier.nodeId, fieldIdentifier.fieldName);
@@ -55,7 +56,11 @@ const NodeFieldElementComponentViewMode = memo(({ el }: { el: NodeFieldElement }
   return (
     <Flex id={id} className={NODE_FIELD_CLASS_NAME} flex="1 1 0">
       <FormControl flex="1 1 0" orientation="vertical">
-        {showLabel && <FormLabel>{_label}</FormLabel>}
+        <Flex w="full" gap={4}>
+          <FormLabel>{_label}</FormLabel>
+          <Spacer />
+          <NodeFieldElementResetToInitialValueIconButton element={el} />
+        </Flex>
         <Flex w="full" gap={4}>
           <InputFieldRenderer
             nodeId={fieldIdentifier.nodeId}
@@ -73,13 +78,13 @@ NodeFieldElementComponentViewMode.displayName = 'NodeFieldElementComponentViewMo
 
 const NodeFieldElementComponentEditMode = memo(({ el }: { el: NodeFieldElement }) => {
   const { id, data } = el;
-  const { fieldIdentifier, showLabel, showDescription } = data;
+  const { fieldIdentifier, showDescription } = data;
 
   return (
     <FormElementEditModeWrapper element={el}>
       <Flex id={id} className={NODE_FIELD_CLASS_NAME} flex="1 1 0">
         <FormControl flex="1 1 0" orientation="vertical">
-          {showLabel && <NodeFieldEditableLabel el={el} />}
+          <NodeFieldEditableLabel el={el} />
           <Flex w="full" gap={4}>
             <InputFieldRenderer
               nodeId={fieldIdentifier.nodeId}
@@ -120,9 +125,13 @@ const NodeFieldEditableLabel = memo(({ el }: { el: NodeFieldElement }) => {
 
   if (!editable.isEditing) {
     return (
-      <FormLabel onDoubleClick={editable.startEditing} cursor="text">
-        {editable.value}
-      </FormLabel>
+      <Flex w="full" gap={4}>
+        <FormLabel onDoubleClick={editable.startEditing} cursor="text">
+          {editable.value}
+        </FormLabel>
+        <Spacer />
+        <NodeFieldElementResetToInitialValueIconButton element={el} />
+      </Flex>
     );
   }
 

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

@@ -32,17 +32,13 @@ import { PiWrenchFill } from 'react-icons/pi';
 
 export const NodeFieldElementSettings = memo(({ element }: { element: NodeFieldElement }) => {
   const { id, data } = element;
-  const { showLabel, showDescription, fieldIdentifier } = data;
+  const { showDescription, fieldIdentifier } = data;
   const { nodeId, fieldName } = fieldIdentifier;
   const fieldTemplate = useInputFieldTemplate(nodeId, fieldName);
 
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
 
-  const toggleShowLabel = useCallback(() => {
-    dispatch(formElementNodeFieldDataChanged({ id, changes: { showLabel: !showLabel } }));
-  }, [dispatch, id, showLabel]);
-
   const toggleShowDescription = useCallback(() => {
     dispatch(formElementNodeFieldDataChanged({ id, changes: { showDescription: !showDescription } }));
   }, [dispatch, id, showDescription]);
@@ -71,11 +67,7 @@ export const NodeFieldElementSettings = memo(({ element }: { element: NodeFieldE
       </PopoverTrigger>
       <PopoverContent>
         <PopoverArrow />
-        <PopoverBody>
-          <FormControl>
-            <FormLabel flex={1}>{t('workflows.builder.label')}</FormLabel>
-            <Switch size="sm" isChecked={showLabel} onChange={toggleShowLabel} />
-          </FormControl>
+        <PopoverBody minW={48}>
           <FormControl>
             <FormLabel flex={1}>{t('workflows.builder.description')}</FormLabel>
             <Switch size="sm" isChecked={showDescription} onChange={toggleShowDescription} />

invokeai/frontend/web/src/features/nodes/types/workflow.ts

@@ -126,7 +126,6 @@ export type NodeFieldStringConfig = z.infer<typeof zStringFieldConfig>;
 
 const zNodeFieldData = z.object({
   fieldIdentifier: zFieldIdentifier,
-  showLabel: z.boolean().default(true),
   showDescription: z.boolean().default(true),
   settings: z.union([zNodeFieldFloatSettings, zIntegerFieldConfig, zStringFieldConfig]).optional(),
 });
@@ -163,7 +162,6 @@ export const buildNodeFieldElement = (
     data: {
       fieldIdentifier: { nodeId, fieldName },
       settings,
-      showLabel: true,
       showDescription: true,
     },
   };