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/settings/data-model/fields/forms/components/SettingsDataModelFieldDescriptionForm.tsx

@@ -29,6 +29,8 @@ export const SettingsDataModelFieldDescriptionForm = ({
   const { control } =
     useFormContext<SettingsDataModelFieldDescriptionFormValues>();
 
+  const descriptionTextAreaId = `${fieldMetadataItem?.id}-description`;
+
   return (
     <Controller
       name="description"
@@ -36,6 +38,7 @@ export const SettingsDataModelFieldDescriptionForm = ({
       defaultValue={fieldMetadataItem?.description}
       render={({ field: { onChange, value } }) => (
         <TextArea
+          textAreaId={descriptionTextAreaId}
           placeholder={t`Write a description`}
           minRows={4}
           value={value ?? undefined}

packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx

@@ -14,7 +14,6 @@ import { TextInput } from '@/ui/input/components/TextInput';
 import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { computeMetadataNameFromLabel } from '~/pages/settings/data-model/utils/compute-metadata-name-from-label.utils';
 import {
   AppTooltip,
   IconInfoCircle,
@@ -22,6 +21,7 @@ import {
   TooltipDelay,
 } from 'twenty-ui/display';
 import { Card } from 'twenty-ui/layout';
+import { computeMetadataNameFromLabel } from '~/pages/settings/data-model/utils/compute-metadata-name-from-label.utils';
 
 export const settingsDataModelFieldIconLabelFormSchema = (
   existingOtherLabels: string[] = [],
@@ -94,6 +94,9 @@ export const SettingsDataModelFieldIconLabelForm = ({
 
   const { t } = useLingui();
 
+  const labelTextInputId = `${fieldMetadataItem?.id}-label`;
+  const nameTextInputId = `${fieldMetadataItem?.id}-name`;
+
   const isLabelSyncedWithName =
     watch('isLabelSyncedWithName') ??
     (isDefined(fieldMetadataItem)
@@ -133,6 +136,7 @@ export const SettingsDataModelFieldIconLabelForm = ({
           defaultValue={fieldMetadataItem?.label}
           render={({ field: { onChange, value } }) => (
             <TextInput
+              instanceId={labelTextInputId}
               placeholder={t`Employees`}
               value={value}
               onChange={(value) => {
@@ -167,6 +171,7 @@ export const SettingsDataModelFieldIconLabelForm = ({
                     render={({ field: { onChange, value } }) => (
                       <>
                         <TextInput
+                          instanceId={nameTextInputId}
                           label={t`API Name`}
                           placeholder={t`employees`}
                           value={value}

packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx

@@ -108,6 +108,7 @@ export const SettingsObjectNewFieldSelector = ({
       {' '}
       <Section>
         <StyledSearchInput
+          instanceId="new-field-type-search"
           LeftIcon={IconSearch}
           placeholder={t`Search a type`}
           value={searchQuery}

packages/twenty-front/src/modules/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateForm.tsx

@@ -117,6 +117,7 @@ export const SettingsDataModelFieldDateForm = ({
           defaultValue={initialCustomUnicodeDateFormat}
           render={({ field: { onChange, value } }) => (
             <StyledTextInput
+              instanceId="custom-date-format-input"
               placeholder={t`Format e.g. d-MMM-y (qqq''yy)`}
               value={value}
               onChange={(value) => onChange(value)}

packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationForm.tsx

@@ -187,6 +187,7 @@ export const SettingsDataModelFieldRelationForm = ({
           defaultValue={initialRelationFieldMetadataItem.label}
           render={({ field: { onChange, value } }) => (
             <TextInput
+              instanceId="relation-field-label"
               disabled={disableFieldEdition}
               placeholder={t`Field name`}
               value={value}

packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx

@@ -99,6 +99,7 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
       />
       <AdvancedSettingsWrapper animationDimension="width" hideDot>
         <StyledOptionInput
+          instanceId={`select-option-value-${option.id}`}
           value={option.value}
           onChange={(input) =>
             onChange({
@@ -133,6 +134,7 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
         }
       />
       <StyledOptionInput
+        instanceId={`select-option-label-${option.id}`}
         value={option.label}
         onChange={(label) => {
           const optionNameHasBeenEdited = !(