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/pages/settings/SettingsWorkspaceMembers.tsx

@@ -216,6 +216,7 @@ export const SettingsWorkspaceMembers = () => {
           />
           <StyledSearchContainer>
             <StyledSearchInput
+              instanceId="workspace-members-search"
               value={searchFilter}
               onChange={handleSearchChange}
               placeholder={t`Search a team member...`}

packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldTable.tsx

@@ -17,9 +17,9 @@ import { useLingui } from '@lingui/react/macro';
 import { isNonEmptyArray } from '@sniptt/guards';
 import { useEffect, useMemo, useState } from 'react';
 import { useRecoilState } from 'recoil';
+import { IconSearch } from 'twenty-ui/display';
 import { useMapFieldMetadataItemToSettingsObjectDetailTableItem } from '~/pages/settings/data-model/hooks/useMapFieldMetadataItemToSettingsObjectDetailTableItem';
 import { SettingsObjectDetailTableItem } from '~/pages/settings/data-model/types/SettingsObjectDetailTableItem';
-import { IconSearch } from 'twenty-ui/display';
 
 const GET_SETTINGS_OBJECT_DETAIL_TABLE_METADATA_STANDARD: TableMetadata<SettingsObjectDetailTableItem> =
   {
@@ -178,6 +178,7 @@ export const SettingsObjectFieldTable = ({
   return (
     <>
       <StyledSearchInput
+        instanceId="object-field-table-search"
         LeftIcon={IconSearch}
         placeholder={t`Search a field...`}
         value={searchTerm}

packages/twenty-front/src/pages/settings/data-model/SettingsObjectIndexTable.tsx

@@ -14,8 +14,8 @@ import { useLingui } from '@lingui/react/macro';
 import { isNonEmptyArray } from '@sniptt/guards';
 import { useEffect, useMemo, useState } from 'react';
 import { useRecoilState } from 'recoil';
-import { SettingsObjectIndexesTableItem } from '~/pages/settings/data-model/types/SettingsObjectIndexesTableItem';
 import { IconSearch, IconSquareKey } from 'twenty-ui/display';
+import { SettingsObjectIndexesTableItem } from '~/pages/settings/data-model/types/SettingsObjectIndexesTableItem';
 
 export const StyledObjectIndexTableRow = styled(TableRow)`
   grid-template-columns: 350px 70px 80px;
@@ -113,6 +113,7 @@ export const SettingsObjectIndexTable = ({
   return (
     <>
       <StyledSearchInput
+        instanceId="object-index-table-search"
         LeftIcon={IconSearch}
         placeholder={t`Search an index...`}
         value={searchTerm}

packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx

@@ -170,6 +170,7 @@ export const SettingsObjects = () => {
             <H2Title title={t`Existing objects`} />
 
             <StyledSearchInput
+              instanceId="settings-objects-search"
               LeftIcon={IconSearch}
               placeholder={t`Search for an object...`}
               value={searchTerm}

packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx

@@ -221,6 +221,7 @@ export const SettingsDevelopersApiKeyDetail = () => {
                 description={t`When the key will be disabled`}
               />
               <TextInput
+                instanceId={`api-key-expiration-${apiKeyData?.id}`}
                 placeholder={t`E.g. backoffice integration`}
                 value={formatExpiration(
                   apiKeyData?.expiresAt || '',

packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx

@@ -106,6 +106,7 @@ export const SettingsDevelopersApiKeysNew = () => {
         <Section>
           <H2Title title={t`Name`} description={t`Name of your API key`} />
           <TextInput
+            instanceId="api-key-new-name"
             placeholder={t`E.g. backoffice integration`}
             value={formValues.name}
             onKeyDown={(e) => {

packages/twenty-front/src/pages/settings/security/SettingsSecurityApprovedAccessDomain.tsx

@@ -116,6 +116,7 @@ export const SettingsSecurityApprovedAccessDomain = () => {
                 fieldState: { error },
               }) => (
                 <TextInput
+                  instanceId="approved-access-domain"
                   autoFocus
                   autoComplete="off"
                   value={value}
@@ -140,6 +141,7 @@ export const SettingsSecurityApprovedAccessDomain = () => {
                 fieldState: { error },
               }) => (
                 <TextInput
+                  instanceId="approved-access-domain-email"
                   autoComplete="off"
                   value={value.split('@')[0]}
                   onChange={onChange}