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/serverless-functions/components/SettingsServerlessFunctionNewForm.tsx

@@ -18,11 +18,15 @@ export const SettingsServerlessFunctionNewForm = ({
   formValues: ServerlessFunctionNewFormValues;
   onChange: (key: string) => (value: string) => void;
 }) => {
+  const descriptionTextAreaId = `${formValues.name}-description`;
+  const nameTextInputId = `${formValues.name}-name`;
+
   return (
     <Section>
       <H2Title title="About" description="Name and set your function" />
       <StyledInputsContainer>
         <TextInput
+          instanceId={nameTextInputId}
           placeholder="Name"
           fullWidth
           autoFocusOnMount
@@ -30,6 +34,7 @@ export const SettingsServerlessFunctionNewForm = ({
           onChange={onChange('name')}
         />
         <TextArea
+          textAreaId={descriptionTextAreaId}
           placeholder="Description"
           minRows={4}
           value={formValues.description}

packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariablesSection.tsx

@@ -8,11 +8,11 @@ import { TableRow } from '@/ui/layout/table/components/TableRow';
 import styled from '@emotion/styled';
 import dotenv from 'dotenv';
 import { useMemo, useState } from 'react';
-import { v4 } from 'uuid';
-import { Button } from 'twenty-ui/input';
 import { H2Title, IconPlus, IconSearch } from 'twenty-ui/display';
-import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
+import { Button } from 'twenty-ui/input';
 import { Section } from 'twenty-ui/layout';
+import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
+import { v4 } from 'uuid';
 
 const StyledSearchInput = styled(TextInput)`
   padding-bottom: ${({ theme }) => theme.spacing(2)};
@@ -82,6 +82,7 @@ export const SettingsServerlessFunctionTabEnvironmentVariablesSection = ({
         description="Set your function environment variables"
       />
       <StyledSearchInput
+        instanceId="serverless-function-env-var-search"
         LeftIcon={IconSearch}
         placeholder="Search a variable"
         value={searchTerm}