Disable the fields of all CRUD workflow actions on readonly mode (#9939)

Fixes
https://discord.com/channels/1130383047699738754/1333822806504247467

In this PR:

- Make the workflow step title input readonly when the visualizer is in
readonly mode
- Make all the fields of the Update Record and Delete Record readonly
when the visualizer is in readonly mode
- Create stories for the Create Record, Updated Record and Delete Record
actions; I'm checking for the default mode and several variants of the
disabled mode
- Set up mocks for the workflows and use them in msw handlers

Follow up:

- We use `readonly` and `disabled` alternatively; these are two
different states when talking about a HTML `<input />` element. I think
we should settle on a single word.
- Refactor the `<WorkflowSingleRecordPicker />` component to behave as
other selects

| Current component | Should look like |
|--------|--------|
| ![CleanShot 2025-01-30 at 17 30
29@2x](https://github.com/user-attachments/assets/104f2e7f-d758-4121-987a-f62f2e138df2)
| ![CleanShot 2025-01-30 at 17 30
49@2x](https://github.com/user-attachments/assets/e74b318e-a41a-40b9-9db8-bcc8015a1d67)
|

packages/twenty-front/src/testing/mock-data/people.ts

@@ -26,7 +26,7 @@ export const mockedEmptyPersonData = {
   __typename: 'Person',
 };
 
-export const peopleQueryResult: { people: RecordGqlConnection } = {
+export const peopleQueryResult = {
   people: {
     __typename: 'PersonConnection',
     totalCount: 16,
@@ -58,8 +58,8 @@ export const peopleQueryResult: { people: RecordGqlConnection } = {
           email: 'asd.com',
           name: {
             __typename: 'FullName',
-            firstName: 'Test ',
-            lastName: 'tTest',
+            firstName: 'Test',
+            lastName: 'Test',
           },
           noteTargets: {
             __typename: 'NoteTargetConnection',
@@ -1719,4 +1719,4 @@ export const peopleQueryResult: { people: RecordGqlConnection } = {
       },
     ],
   },
-};
+} satisfies { people: RecordGqlConnection };