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/decorators/WorkflowStepActionDrawerDecorator.tsx

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+import { Decorator } from '@storybook/react';
+
+const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const WorkflowStepActionDrawerDecorator: Decorator = (Story) => (
+  <StyledWrapper>
+    <Story />
+  </StyledWrapper>
+);

packages/twenty-front/src/testing/decorators/WorkflowStepDecorator.tsx

@@ -0,0 +1,21 @@
+import { workflowIdState } from '@/workflow/states/workflowIdState';
+import { workflowSelectedNodeState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeState';
+import { Decorator } from '@storybook/react';
+import { useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
+import {
+  getWorkflowMock,
+  getWorkflowNodeIdMock,
+} from '~/testing/mock-data/workflow';
+
+export const WorkflowStepDecorator: Decorator = (Story) => {
+  const setWorkflowId = useSetRecoilState(workflowIdState);
+  const setWorkflowSelectedNode = useSetRecoilState(workflowSelectedNodeState);
+
+  useEffect(() => {
+    setWorkflowId(getWorkflowMock().id);
+    setWorkflowSelectedNode(getWorkflowNodeIdMock());
+  }, [setWorkflowId, setWorkflowSelectedNode]);
+
+  return <Story />;
+};