Make workflow step name editable (#8677)

- Use TextInput in header title
- add onTitleChange prop
- rename field name instead of label

To fix :
- padding right on title comes from current TextInput component. It
needs to be refactored


https://github.com/user-attachments/assets/535cd6d3-866b-4a61-9c5d-cdbe7710396a

packages/twenty-front/src/modules/ui/field/input/components/TextInput.tsx

@@ -19,10 +19,19 @@ type TextInputProps = {
   onEscape: (newText: string) => void;
   onTab?: (newText: string) => void;
   onShiftTab?: (newText: string) => void;
-  onClickOutside: (event: MouseEvent | TouchEvent, inputValue: string) => void;
+  onClickOutside?: (event: MouseEvent | TouchEvent, inputValue: string) => void;
   hotkeyScope: string;
   onChange?: (newText: string) => void;
   copyButton?: boolean;
+  shouldTrim?: boolean;
+};
+
+const getValue = (value: string, shouldTrim: boolean) => {
+  if (shouldTrim) {
+    return value.trim();
+  }
+
+  return value;
 };
 
 export const TextInput = ({
@@ -37,6 +46,7 @@ export const TextInput = ({
   onClickOutside,
   onChange,
   copyButton = true,
+  shouldTrim = true,
 }: TextInputProps) => {
   const [internalText, setInternalText] = useState(value);
 
@@ -44,12 +54,12 @@ export const TextInput = ({
   const copyRef = useRef<HTMLDivElement>(null);
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setInternalText(event.target.value.trim());
-    onChange?.(event.target.value.trim());
+    setInternalText(getValue(event.target.value, shouldTrim));
+    onChange?.(getValue(event.target.value, shouldTrim));
   };
   useEffect(() => {
-    setInternalText(value.trim());
-  }, [value]);
+    setInternalText(getValue(value, shouldTrim));
+  }, [value, shouldTrim]);
 
   useRegisterInputEvents({
     inputRef: wrapperRef,