Improve storybook stories (#11694)

## Improvements

### TaskGroups

<img width="1512" alt="image"
src="https://github.com/user-attachments/assets/0dbd71fe-3999-4cf5-870e-565b8e2df1b9"
/>

### EventCardMessage

<img width="1512" alt="image"
src="https://github.com/user-attachments/assets/b41cddc1-3ff2-411f-9ac6-8d4035579e54"
/>

### Blocklist stories

<img width="1512" alt="image"
src="https://github.com/user-attachments/assets/e997a0c1-e7e2-4ea4-9253-f31609ee44df"
/>

### WorkflowEditActionUpdateRecord

<img width="1512" alt="image"
src="https://github.com/user-attachments/assets/275dab17-ad33-4174-8671-31ba455c20a4"
/>

packages/twenty-front/src/modules/activities/tasks/components/TaskList.tsx

@@ -6,7 +6,7 @@ import { Task } from '@/activities/types/Task';
 import { TaskRow } from './TaskRow';
 
 type TaskListProps = {
-  title?: string;
+  title: string;
   tasks: Task[];
   button?: ReactElement | false;
 };

packages/twenty-front/src/modules/activities/tasks/components/__stories__/TaskGroups.stories.tsx

@@ -6,6 +6,7 @@ import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/ob
 import { TabListComponentInstanceContext } from '@/ui/layout/tab/states/contexts/TabListComponentInstanceContext';
 import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
@@ -30,6 +31,7 @@ const meta: Meta<typeof TaskGroups> = {
     ComponentWithRecoilScopeDecorator,
     ObjectMetadataItemsDecorator,
     SnackBarDecorator,
+    I18nFrontDecorator,
   ],
 };
 

packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/__stories__/EventCardMessage.stories.tsx

@@ -1,11 +1,12 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/testing-library';
 import { HttpResponse, graphql } from 'msw';
 
 import { TimelineActivityContext } from '@/activities/timeline-activities/contexts/TimelineActivityContext';
 import { EventCardMessage } from '@/activities/timeline-activities/rows/message/components/EventCardMessage';
+import { ComponentDecorator } from 'twenty-ui/testing';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
-import { ComponentDecorator } from 'twenty-ui/testing';
 
 const meta: Meta<typeof EventCardMessage> = {
   title: 'Modules/TimelineActivities/Rows/Message/EventCardMessage',
@@ -32,6 +33,11 @@ export const Default: Story = {
     messageId: '1',
     authorFullName: 'John Doe',
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByText('Mock title');
+  },
   parameters: {
     msw: {
       handlers: [
@@ -57,6 +63,11 @@ export const NotShared: Story = {
     messageId: '1',
     authorFullName: 'John Doe',
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByText('Subject not shared');
+  },
   parameters: {
     msw: {
       handlers: [

packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsBlocklistTableRow.stories.tsx

@@ -1,10 +1,10 @@
 import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
 
-import { mockedBlocklist } from '@/settings/accounts/components/__stories__/mockedBlocklist';
 import { SettingsAccountsBlocklistTableRow } from '@/settings/accounts/components/SettingsAccountsBlocklistTableRow';
-import { formatToHumanReadableDate } from '~/utils/date-utils';
+import { mockedBlocklist } from '@/settings/accounts/components/__stories__/mockedBlocklist';
 import { ComponentDecorator } from 'twenty-ui/testing';
+import { formatToHumanReadableDate } from '~/utils/date-utils';
 
 const onRemoveJestFn = fn();
 

packages/twenty-front/src/modules/settings/accounts/components/__stories__/mockedBlocklist.ts

@@ -7,28 +7,40 @@ export const mockedBlocklist: BlocklistItem[] = [
     id: '1',
     handle: 'test1@twenty.com',
     workspaceMemberId: '1',
-    createdAt: DateTime.now().minus({ hours: 2 }).toISO() ?? '',
+    createdAt:
+      DateTime.fromISO('2023-04-26T10:12:42.33625+00:00')
+        .minus({ hours: 2 })
+        .toISO() ?? '',
     __typename: 'BlocklistItem',
   },
   {
     id: '2',
     handle: 'test2@twenty.com',
     workspaceMemberId: '1',
-    createdAt: DateTime.now().minus({ days: 2 }).toISO() ?? '',
+    createdAt:
+      DateTime.fromISO('2023-04-26T10:12:42.33625+00:00')
+        .minus({ days: 2 })
+        .toISO() ?? '',
     __typename: 'BlocklistItem',
   },
   {
     id: '3',
     handle: 'test3@twenty.com',
     workspaceMemberId: '1',
-    createdAt: DateTime.now().minus({ days: 3 }).toISO() ?? '',
+    createdAt:
+      DateTime.fromISO('2023-04-26T10:12:42.33625+00:00')
+        .minus({ days: 3 })
+        .toISO() ?? '',
     __typename: 'BlocklistItem',
   },
   {
     id: '4',
     handle: '@twenty.com',
     workspaceMemberId: '1',
-    createdAt: DateTime.now().minus({ days: 4 }).toISO() ?? '',
+    createdAt:
+      DateTime.fromISO('2023-04-26T10:12:42.33625+00:00')
+        .minus({ days: 4 })
+        .toISO() ?? '',
     __typename: 'BlocklistItem',
   },
 ];

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/__stories__/WorkflowEditActionUpdateRecord.stories.tsx

@@ -1,6 +1,7 @@
 import { WorkflowUpdateRecordAction } from '@/workflow/types/Workflow';
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
+import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
@@ -11,7 +12,6 @@ import { graphqlMocks } from '~/testing/graphqlMocks';
 import { allMockPersonRecords } from '~/testing/mock-data/people';
 import { getWorkflowNodeIdMock } from '~/testing/mock-data/workflow';
 import { WorkflowEditActionUpdateRecord } from '../WorkflowEditActionUpdateRecord';
-import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
 
 const DEFAULT_ACTION = {
   id: getWorkflowNodeIdMock(),
@@ -176,7 +176,7 @@ export const DisabledWithDefaultStaticValues: Story = {
     const selectedRecord = await canvas.findByText(
       `${peopleMock.name.firstName} ${peopleMock.name.lastName}`,
       undefined,
-      { timeout: 3000 },
+      { timeout: 5000 },
     );
     expect(selectedRecord).toBeVisible();
 

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

@@ -25,13 +25,13 @@ export const mockedTasks: Array<MockedTask> = [
     id: '3ecaa1be-aac7-463a-a38e-64078dd451d5',
     createdAt: '2023-04-26T10:12:42.33625+00:00',
     updatedAt: '2023-04-26T10:23:42.33625+00:00',
-    title: 'My very first note',
+    title: 'My very first task',
     bodyV2: {
       blocknote: null,
       markdown: null,
     },
     dueAt: '2023-04-26T10:12:42.33625+00:00',
-    status: null,
+    status: 'TODO',
     assignee: workspaceMember,
     assigneeId: workspaceMember.id,
     taskTargets: [