Replace hotkey scopes by focus stack (Part 4 - Inputs) (#12933)

# Replace hotkey scopes by focus stack (Part 4 - Inputs)

This PR is the 4th part of a refactoring aiming to deprecate the hotkey
scopes api in favor of the new focus stack api which is more robust.
Part 1: https://github.com/twentyhq/twenty/pull/12673
Part 2: https://github.com/twentyhq/twenty/pull/12798
Part 3: https://github.com/twentyhq/twenty/pull/12910

In this part, I refactored all inputs in the app so that each input has
a unique id which can be used to track the focused element.

packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepHeader.tsx

@@ -101,6 +101,7 @@ export const WorkflowStepHeader = ({
       <StyledHeaderInfo>
         <StyledHeaderTitle>
           <TitleInput
+            instanceId="workflow-step-title-input"
             disabled={disabled}
             sizeVariant="md"
             value={title}

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionServerlessFunction.tsx

@@ -287,6 +287,8 @@ export const WorkflowEditActionServerlessFunction = ({
   const headerIconColor = useActionIconColorOrThrow(action.type);
   const headerType = useActionHeaderTypeOrThrow(action.type);
 
+  const testLogsTextAreaId = `${serverlessFunctionId}-test-logs`;
+
   return (
     !loading && (
       <>
@@ -350,6 +352,7 @@ export const WorkflowEditActionServerlessFunction = ({
                 <StyledCodeEditorContainer>
                   <InputLabel>Logs</InputLabel>
                   <TextArea
+                    textAreaId={testLogsTextAreaId}
                     value={
                       isTesting ? '' : serverlessFunctionTestData.output.logs
                     }

packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablePicker.tsx

@@ -37,7 +37,7 @@ export const StyledSearchVariablesDropdownContainer = styled.div<{
 `;
 
 export const WorkflowVariablePicker: VariablePickerComponent = ({
-  inputId,
+  instanceId,
   disabled,
   multiline,
   onVariableSelect,
@@ -49,7 +49,7 @@ export const WorkflowVariablePicker: VariablePickerComponent = ({
       readonly={disabled}
     >
       <WorkflowVariablesDropdown
-        inputId={inputId}
+        instanceId={instanceId}
         onVariableSelect={onVariableSelect}
         disabled={disabled}
         objectNameSingularToSelect={objectNameSingularToSelect}

packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx

@@ -32,13 +32,13 @@ const StyledDropdownVariableButtonContainer = styled(
 `;
 
 export const WorkflowVariablesDropdown = ({
-  inputId,
+  instanceId,
   onVariableSelect,
   disabled,
   objectNameSingularToSelect,
   multiline,
 }: {
-  inputId: string;
+  instanceId: string;
   onVariableSelect: (variableName: string) => void;
   disabled?: boolean;
   objectNameSingularToSelect?: string;
@@ -46,7 +46,7 @@ export const WorkflowVariablesDropdown = ({
 }) => {
   const theme = useTheme();
 
-  const dropdownId = `${SEARCH_VARIABLES_DROPDOWN_ID}-${inputId}`;
+  const dropdownId = `${SEARCH_VARIABLES_DROPDOWN_ID}-${instanceId}`;
   const isDropdownOpen = useRecoilComponentValueV2(
     isDropdownOpenComponentStateV2,
     dropdownId,