Increase storybook pages coverage (#4885)

On FE:
- refreshing metadata mocks
- updating jest tests
- fixing storybook pages coverage
- fixing storybook modules coverage

packages/twenty-front/.eslintrc.cjs

@@ -5,6 +5,7 @@ module.exports = {
     'node_modules',
     'mockServiceWorker.js',
     '**/generated*/*',
+    '**/generated/standard-metadata-query-result.ts',
     'tsup.config.ts',
     'build',
     'coverage',

packages/twenty-front/nyc.config.cjs

@@ -14,8 +14,8 @@ const modulesCoverage = {
 };
 
 const pagesCoverage = {
-  statements: 55,
+  statements: 60,
-  lines: 55,
+  lines: 60,
   functions: 45,
   exclude: ['src/generated/**/*', 'src/modules/**/*', 'src/**/*.ts'],
 };

packages/twenty-front/src/__stories__/App.stories.tsx

@@ -1,14 +1,23 @@
 import { HelmetProvider } from 'react-helmet-async';
+import { getOperationName } from '@apollo/client/utilities';
 import { Meta, StoryObj } from '@storybook/react';
+import { graphql, HttpResponse } from 'msw';
+import { IconsProvider } from 'twenty-ui';
 
 import { ClientConfigProvider } from '@/client-config/components/ClientConfigProvider';
+import { ClientConfigProviderEffect } from '@/client-config/components/ClientConfigProviderEffect';
 import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
+import { SnackBarProvider } from '@/ui/feedback/snack-bar-manager/components/SnackBarProvider';
 import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
+import { AppThemeProvider } from '@/ui/theme/components/AppThemeProvider';
 import { UserProvider } from '@/users/components/UserProvider';
+import { UserProviderEffect } from '@/users/components/UserProviderEffect';
+import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
 import { App } from '~/App';
 import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
 import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { mockedUsersData } from '~/testing/mock-data/users';
 
 const meta: Meta<typeof App> = {
   title: 'App/App',
@@ -16,19 +25,33 @@ const meta: Meta<typeof App> = {
   decorators: [
     MemoryRouterDecorator,
     (Story) => (
-      <ClientConfigProvider>
+      <>
-        <UserProvider>
+        <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
-          <FullHeightStorybookLayout>
+          <ClientConfigProviderEffect />
-            <HelmetProvider>
+          <ClientConfigProvider>
-              <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
+            <UserProviderEffect />
+            <UserProvider>
+              <FullHeightStorybookLayout>
                 <ObjectMetadataItemsProvider>
-                  <Story />
+                  <IconsProvider>
+                    <HelmetProvider>
+                      <SnackBarProvider>
+                        <AppThemeProvider>
+                          <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
+                            <ObjectMetadataItemsProvider>
+                              <Story />
+                            </ObjectMetadataItemsProvider>
+                          </SnackBarProviderScope>
+                        </AppThemeProvider>
+                      </SnackBarProvider>
+                    </HelmetProvider>
+                  </IconsProvider>
                 </ObjectMetadataItemsProvider>
-              </SnackBarProviderScope>
+              </FullHeightStorybookLayout>
-            </HelmetProvider>
+            </UserProvider>
-          </FullHeightStorybookLayout>
+          </ClientConfigProvider>
-        </UserProvider>
+        </SnackBarProviderScope>
-      </ClientConfigProvider>
+      </>
     ),
   ],
   parameters: {
@@ -43,8 +66,25 @@ export const Default: Story = {};
 
 export const DarkMode: Story = {
   parameters: {
-    theming: {
+    msw: {
-      themeOverride: 'dark',
+      handlers: [
+        ...graphqlMocks.handlers.filter((handler) => {
+          return (handler.info as any).operationName !== 'GetCurrentUser';
+        }),
+        graphql.query(getOperationName(GET_CURRENT_USER) ?? '', () => {
+          return HttpResponse.json({
+            data: {
+              currentUser: {
+                ...mockedUsersData[0],
+                workspaceMember: {
+                  ...mockedUsersData[0].workspaceMember,
+                  colorScheme: 'Dark',
+                },
+              },
+            },
+          });
+        }),
+      ],
     },
   },
 };

packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts

@@ -4,7 +4,7 @@ import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
 
 export const currentWorkspaceMemberState = createState<Omit<
   WorkspaceMember,
-  'createdAt' | 'updatedAt' | 'userId' | 'userEmail'
+  'createdAt' | 'updatedAt' | 'userId' | 'userEmail' | '__typename'
 > | null>({
   key: 'currentWorkspaceMemberState',
   defaultValue: null,

packages/twenty-front/src/modules/auth/utils/getOnboardingStatus.ts

@@ -22,7 +22,7 @@ export const getOnboardingStatus = ({
   isLoggedIn: boolean;
   currentWorkspaceMember: Omit<
     WorkspaceMember,
-    'createdAt' | 'updatedAt' | 'userId' | 'userEmail'
+    'createdAt' | 'updatedAt' | 'userId' | 'userEmail' | '__typename'
   > | null;
   currentWorkspace: CurrentWorkspace | null;
   isBillingEnabled?: boolean;

packages/twenty-front/src/modules/companies/types/Company.ts

@@ -1,4 +1,5 @@
 export type Company = {
+  __typename: 'Company';
   id: string;
   createdAt: string;
   updatedAt: string;

packages/twenty-front/src/modules/navigation/components/__stories__/AppNavigationDrawer.stories.tsx

@@ -7,6 +7,8 @@ import { currentMobileNavigationDrawerState } from '@/navigation/states/currentM
 import { AppPath } from '@/types/AppPath';
 import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
+import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 
 import {
@@ -50,6 +52,8 @@ type StoryArgs = AppNavigationDrawerProps & {
 const meta: Meta<StoryArgs> = {
   title: 'Modules/Navigation/AppNavigationDrawer',
   decorators: [
+    IconsProviderDecorator,
+    ObjectMetadataItemsDecorator,
     (Story, { args }) => (
       <MemoryRouter initialEntries={[args.routePath]}>
         <Story />

packages/twenty-front/src/modules/object-metadata/components/__stories__/ObjectMetadataNavItems.stories.tsx

@@ -4,6 +4,7 @@ import { within } from '@storybook/test';
 
 import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
@@ -14,6 +15,7 @@ const meta: Meta<typeof ObjectMetadataNavItems> = {
   title: 'Modules/ObjectMetadata/ObjectMetadataNavItems',
   component: ObjectMetadataNavItems,
   decorators: [
+    IconsProviderDecorator,
     ObjectMetadataItemsDecorator,
     ComponentWithRouterDecorator,
     ComponentWithRecoilScopeDecorator,

packages/twenty-front/src/modules/object-metadata/validation-schemas/__tests__/objectMetadataItemSchema.test.ts

@@ -1,7 +1,7 @@
 import { SafeParseSuccess } from 'zod';
 
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { mockedCompanyObjectMetadataItem } from '@/object-record/record-field/__mocks__/fieldDefinitions';
+import { mockedCompanyObjectMetadataItem } from '~/testing/mock-data/metadata';
 
 import { objectMetadataItemSchema } from '../objectMetadataItemSchema';
 

packages/twenty-front/src/modules/object-record/record-field/__mocks__/fieldDefinitions.ts

@@ -7,41 +7,27 @@ import {
   FieldSelectMetadata,
   FieldTextMetadata,
 } from '@/object-record/record-field/types/FieldMetadata';
+import { type } from 'os';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
-import {
+import { mockedCompanyObjectMetadataItem, mockedPersonObjectMetadataItem } from '~/testing/mock-data/metadata';
-  mockedCompaniesMetadata,
+;
-  mockedCustomMetadata,
-  mockedPeopleMetadata,
-} from '~/testing/mock-data/metadata';
 
 export const fieldMetadataId = 'fieldMetadataId';
 
-export const mockedPersonObjectMetadataItem = {
-  ...mockedPeopleMetadata.node,
-  fields: mockedPeopleMetadata.node.fields.edges.map(({ node }) => node),
-};
-
-export const mockedCompanyObjectMetadataItem = {
-  ...mockedCompaniesMetadata.node,
-  fields: mockedCompaniesMetadata.node.fields.edges.map(({ node }) => node),
-};
-
-export const mockedCustomObjectMetadataItem = {
-  ...mockedCustomMetadata.node,
-  fields: mockedCustomMetadata.node.fields.edges.map(({ node }) => node),
-};
 
 export const textfieldDefinition: FieldDefinition<FieldTextMetadata> = {
   fieldMetadataId,
   label: 'User Name',
   iconName: 'User',
+  defaultValue: '',
   type: FieldMetadataType.Text,
   metadata: { placeHolder: 'John Doe', fieldName: 'userName' },
 };
 
-const relationFieldMetadataItem = mockedPersonObjectMetadataItem.fields.find(
+const relationFieldMetadataItem = mockedPersonObjectMetadataItem.fields?.find(
   ({ name }) => name === 'company',
 );
+
 export const relationFieldDefinition = formatFieldMetadataItemAsFieldDefinition(
   {
     field: relationFieldMetadataItem!,
@@ -54,6 +40,7 @@ export const selectFieldDefinition: FieldDefinition<FieldSelectMetadata> = {
   label: 'Account Owner',
   iconName: 'iconName',
   type: FieldMetadataType.Select,
+  defaultValue: null,
   metadata: {
     fieldName: 'accountOwner',
     options: [{ label: 'Elon Musk', color: 'blue', value: 'userId' }],
@@ -65,6 +52,7 @@ export const fullNameFieldDefinition: FieldDefinition<FieldFullNameMetadata> = {
   label: 'Display Name',
   iconName: 'profile',
   type: FieldMetadataType.FullName,
+  defaultValue: { firstName: '', lastName: '' },
   metadata: {
     fieldName: 'displayName',
     placeHolder: 'Mr Miagi',
@@ -76,13 +64,14 @@ export const linkFieldDefinition: FieldDefinition<FieldLinkMetadata> = {
   label: 'LinkedIn URL',
   iconName: 'url',
   type: FieldMetadataType.Link,
+  defaultValue: { label: '', url: ''},
   metadata: {
     fieldName: 'linkedInURL',
     placeHolder: 'https://linkedin.com/user',
   },
 };
 
-const phoneFieldMetadataItem = mockedPersonObjectMetadataItem.fields.find(
+const phoneFieldMetadataItem = mockedPersonObjectMetadataItem.fields?.find(
   ({ name }) => name === 'phone',
 );
 export const phoneFieldDefinition = formatFieldMetadataItemAsFieldDefinition({
@@ -95,12 +84,13 @@ export const ratingfieldDefinition: FieldDefinition<FieldRatingMetadata> = {
   label: 'Rating',
   iconName: 'iconName',
   type: FieldMetadataType.Rating,
+  defaultValue: null,
   metadata: {
     fieldName: 'rating',
   },
 };
 
-const booleanFieldMetadataItem = mockedCompanyObjectMetadataItem.fields.find(
+const booleanFieldMetadataItem = mockedCompanyObjectMetadataItem.fields?.find(
   ({ name }) => name === 'idealCustomerProfile',
 );
 export const booleanFieldDefinition = formatFieldMetadataItemAsFieldDefinition({

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/DateTimeFieldInput.stories.tsx

@@ -24,6 +24,29 @@ const DateFieldValueSetterEffect = ({ value }: { value: Date }) => {
   return <></>;
 };
 
+type DateFieldValueGaterProps = Pick<
+  DateTimeFieldInputProps,
+  'onEscape' | 'onEnter' | 'onClickOutside'
+>;
+
+const DateFieldValueGater = ({
+  onEscape,
+  onEnter,
+  onClickOutside,
+}: DateFieldValueGaterProps) => {
+  const { fieldValue } = useDateTimeField();
+
+  return (
+    fieldValue && (
+      <DateTimeFieldInput
+        onEscape={onEscape}
+        onEnter={onEnter}
+        onClickOutside={onClickOutside}
+      />
+    )
+  );
+};
+
 type DateFieldInputWithContextProps = DateTimeFieldInputProps & {
   value: Date;
   entityId?: string;
@@ -47,6 +70,7 @@ const DateFieldInputWithContext = ({
       <FieldContextProvider
         fieldDefinition={{
           fieldMetadataId: 'date',
+          defaultValue: null,
           label: 'Date',
           type: FieldMetadataType.DateTime,
           iconName: 'IconCalendarEvent',
@@ -58,7 +82,7 @@ const DateFieldInputWithContext = ({
         entityId={entityId}
       >
         <DateFieldValueSetterEffect value={value} />
-        <DateTimeFieldInput
+        <DateFieldValueGater
           onEscape={onEscape}
           onEnter={onEnter}
           onClickOutside={onClickOutside}
@@ -102,9 +126,9 @@ type Story = StoryObj<typeof DateFieldInputWithContext>;
 export const Default: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const div = await canvas.findByText('Feb 1, 2022');
+    const div = await canvas.findByText('February - 2022');
 
-    await expect(div.innerText).toContain('Feb 1, 2022');
+    await expect(div.innerText).toContain('February - 2022');
   },
 };
 
@@ -125,7 +149,7 @@ export const Escape: Story = {
   play: async () => {
     await expect(escapeJestFn).toHaveBeenCalledTimes(0);
 
-    await userEvent.keyboard('{esc}');
+    await userEvent.keyboard('{escape}');
 
     await expect(escapeJestFn).toHaveBeenCalledTimes(1);
   },

packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx

@@ -62,6 +62,7 @@ export const RecordDetailRelationSection = () => {
     fieldValue && isToOneObject
       ? [fieldValue as ObjectRecord]
       : (fieldValue as ObjectRecord[]) ?? [];
+
   const relationRecordIds = relationRecords.map(({ id }) => id);
 
   const dropdownId = `record-field-card-relation-picker-${fieldDefinition.label}`;

packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/__stories__/RecordDetailRelationSection.stories.tsx

@@ -2,7 +2,6 @@ import { Meta, StoryObj } from '@storybook/react';
 import { ComponentDecorator } from 'twenty-ui';
 
 import { formatFieldMetadataItemAsFieldDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsFieldDefinition';
-import { mockedCompanyObjectMetadataItem } from '@/object-record/record-field/__mocks__/fieldDefinitions';
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
@@ -10,6 +9,7 @@ import { RecordStoreDecorator } from '~/testing/decorators/RecordStoreDecorator'
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedCompaniesData } from '~/testing/mock-data/companies';
+import { mockedCompanyObjectMetadataItem } from '~/testing/mock-data/metadata';
 import { mockedPeopleData } from '~/testing/mock-data/people';
 
 import { RecordDetailRelationSection } from '../RecordDetailRelationSection';
@@ -59,7 +59,7 @@ export const WithRecords: Story = {
     records: [
       {
         ...mockedCompaniesData[0],
-        people: { edges: mockedPeopleData.map((person) => ({ node: person })) },
+        people: mockedPeopleData,
       },
       ...mockedPeopleData,
     ],

packages/twenty-front/src/modules/object-record/relation-picker/hooks/__tests__/useEntitySelectSearch.test.tsx

@@ -1,7 +1,8 @@
 import { ChangeEvent } from 'react';
 import { act, renderHook } from '@testing-library/react';
-import { RecoilRoot } from 'recoil';
+import { RecoilRoot, useRecoilValue } from 'recoil';
 
+import { useRelationPickerScopedStates } from '@/object-record/relation-picker/hooks/internal/useRelationPickerScopedStates';
 import { useEntitySelectSearch } from '@/object-record/relation-picker/hooks/useEntitySelectSearch';
 import { RelationPickerScopeInternalContext } from '@/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext';
 
@@ -14,16 +15,32 @@ const Wrapper = ({ children }: { children: React.ReactNode }) => (
 
 describe('useEntitySelectSearch', () => {
   it('should update searchFilter after change event', async () => {
-    const { result } = renderHook(() => useEntitySelectSearch(), {
+    const { result } = renderHook(
-      wrapper: Wrapper,
+      () => {
-    });
+        const entitySelectSearchHook = useEntitySelectSearch({
+          relationPickerScopeId: 'relation-picker',
+        });
+        const relationPickerScopedStatesHook = useRelationPickerScopedStates({
+          relationPickerScopedId: 'relation-picker',
+        });
+        const internallyStoredFilter = useRecoilValue(
+          relationPickerScopedStatesHook.relationPickerSearchFilterState,
+        );
+        return { entitySelectSearchHook, internallyStoredFilter };
+      },
+      {
+        wrapper: Wrapper,
+      },
+    );
+
     const filter = 'value';
 
     act(() => {
-      result.current.handleSearchFilterChange({
+      result.current.entitySelectSearchHook.handleSearchFilterChange({
         currentTarget: { value: filter },
       } as ChangeEvent<HTMLInputElement>);
     });
-    expect(result.current.searchFilter).toBe(filter);
+
+    expect(result.current.internallyStoredFilter).toBe(filter);
   });
 });

packages/twenty-front/src/modules/people/types/Person.ts

@@ -1,4 +1,5 @@
 export type Person = {
+  __typename: 'Person';
   id: string;
   createdAt: string;
   updatedAt: string;

packages/twenty-front/src/modules/settings/data-model/fields/forms/components/__stories__/SettingsDataModelFieldSettingsFormCard.stories.tsx

@@ -2,10 +2,6 @@ import { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import { ComponentDecorator } from 'twenty-ui';
 
-import {
-  mockedCompanyObjectMetadataItem,
-  mockedPersonObjectMetadataItem,
-} from '@/object-record/record-field/__mocks__/fieldDefinitions';
 import { fieldMetadataFormDefaultValues } from '@/settings/data-model/fields/forms/hooks/useFieldMetadataForm';
 import {
   FieldMetadataType,
@@ -15,6 +11,10 @@ import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorato
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import {
+  mockedCompanyObjectMetadataItem,
+  mockedPersonObjectMetadataItem,
+} from '~/testing/mock-data/metadata';
 
 import { SettingsDataModelFieldSettingsFormCard } from '../SettingsDataModelFieldSettingsFormCard';
 

packages/twenty-front/src/modules/settings/data-model/fields/preview/components/__stories__/SettingsDataModelFieldPreviewCard.stories.tsx

@@ -1,15 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { ComponentDecorator } from 'twenty-ui';
 
-import {
-  mockedCompanyObjectMetadataItem,
-  mockedPersonObjectMetadataItem,
-} from '@/object-record/record-field/__mocks__/fieldDefinitions';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import {
+  mockedCompanyObjectMetadataItem,
+  mockedPersonObjectMetadataItem,
+} from '~/testing/mock-data/metadata';
 
 import { SettingsDataModelFieldPreviewCard } from '../SettingsDataModelFieldPreviewCard';
 

packages/twenty-front/src/modules/settings/data-model/fields/preview/hooks/__tests__/useFieldPreview.test.tsx

@@ -3,8 +3,8 @@ import { MockedProvider } from '@apollo/client/testing';
 import { renderHook } from '@testing-library/react';
 import { RecoilRoot } from 'recoil';
 
-import { mockedCompanyObjectMetadataItem } from '@/object-record/record-field/__mocks__/fieldDefinitions';
 import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
+import { mockedCompanyObjectMetadataItem } from '~/testing/mock-data/metadata';
 
 import { useFieldPreview } from '../useFieldPreview';
 

packages/twenty-front/src/modules/settings/data-model/objects/forms/components/__stories__/SettingsDataModelObjectAboutForm.stories.tsx

@@ -2,9 +2,9 @@ import styled from '@emotion/styled';
 import { Meta, StoryObj } from '@storybook/react';
 import { ComponentDecorator } from 'twenty-ui';
 
-import { mockedCompanyObjectMetadataItem } from '@/object-record/record-field/__mocks__/fieldDefinitions';
 import { FormProviderDecorator } from '~/testing/decorators/FormProviderDecorator';
 import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
+import { mockedCompanyObjectMetadataItem } from '~/testing/mock-data/metadata';
 
 import { SettingsDataModelObjectAboutForm } from '../SettingsDataModelObjectAboutForm';
 

packages/twenty-front/src/modules/settings/data-model/utils/__tests__/getFieldDefaultPreviewValue.test.ts

@@ -1,9 +1,10 @@
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { SettingsObjectFieldSelectFormValues } from '@/settings/data-model/components/SettingsObjectFieldSelectForm';
 import {
   mockedCompanyObjectMetadataItem,
+  mockedOpportunityObjectMetadataItem,
   mockedPersonObjectMetadataItem,
-} from '@/object-record/record-field/__mocks__/fieldDefinitions';
+} from '~/testing/mock-data/metadata';
-import { SettingsObjectFieldSelectFormValues } from '@/settings/data-model/components/SettingsObjectFieldSelectForm';
 
 import { getFieldDefaultPreviewValue } from '../getFieldDefaultPreviewValue';
 
@@ -11,23 +12,12 @@ describe('getFieldDefaultPreviewValue', () => {
   describe('SELECT field', () => {
     it('returns the default select option', () => {
       // Given
-      const objectMetadataItem = mockedCompanyObjectMetadataItem;
+      const objectMetadataItem = mockedOpportunityObjectMetadataItem;
-      const fieldMetadataItem = mockedCompanyObjectMetadataItem.fields.find(
+      const fieldMetadataItem = mockedOpportunityObjectMetadataItem.fields.find(
-        ({ name }) => name === 'industry',
+        ({ name }) => name === 'stage',
       )!;
-      const selectOptions: SettingsObjectFieldSelectFormValues = [
+      const selectOptions: SettingsObjectFieldSelectFormValues =
-        {
+        fieldMetadataItem.options ?? [];
-          color: 'purple',
-          label: '🏭 Industry',
-          value: 'INDUSTRY',
-        },
-        {
-          color: 'pink',
-          isDefault: true,
-          label: '💊 Health',
-          value: 'HEALTH',
-        },
-      ];
 
       // When
       const result = getFieldDefaultPreviewValue({
@@ -37,27 +27,17 @@ describe('getFieldDefaultPreviewValue', () => {
       });
 
       // Then
-      expect(result).toEqual(selectOptions[1].value);
+      expect(result).toEqual(selectOptions[0].value);
     });
 
     it('returns the first select option if no default option was found', () => {
       // Given
-      const objectMetadataItem = mockedCompanyObjectMetadataItem;
+      const objectMetadataItem = mockedOpportunityObjectMetadataItem;
-      const fieldMetadataItem = mockedCompanyObjectMetadataItem.fields.find(
+      const fieldMetadataItem = mockedOpportunityObjectMetadataItem.fields.find(
-        ({ name }) => name === 'industry',
+        ({ name }) => name === 'stage',
       )!;
-      const selectOptions: SettingsObjectFieldSelectFormValues = [
+      const selectOptions: SettingsObjectFieldSelectFormValues =
-        {
+        fieldMetadataItem.options ?? [];
-          color: 'purple' as const,
-          label: '🏭 Industry',
-          value: 'INDUSTRY',
-        },
-        {
-          color: 'pink' as const,
-          label: '💊 Health',
-          value: 'HEALTH',
-        },
-      ];
 
       // When
       const result = getFieldDefaultPreviewValue({

packages/twenty-front/src/modules/settings/data-model/utils/__tests__/getFieldPreviewValueFromRecord.test.ts

@@ -1,9 +1,10 @@
-import {
-  mockedCompanyObjectMetadataItem,
-  mockedPersonObjectMetadataItem,
-} from '@/object-record/record-field/__mocks__/fieldDefinitions';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { SettingsObjectFieldSelectFormValues } from '@/settings/data-model/components/SettingsObjectFieldSelectForm';
+import {
+  mockedCompanyObjectMetadataItem,
+  mockedOpportunityObjectMetadataItem,
+  mockedPersonObjectMetadataItem,
+} from '~/testing/mock-data/metadata';
 
 import { getFieldPreviewValueFromRecord } from '../getFieldPreviewValueFromRecord';
 
@@ -11,28 +12,12 @@ describe('getFieldPreviewValueFromRecord', () => {
   describe('SELECT field', () => {
     it('returns the select option corresponding to the record field value', () => {
       // Given
-      const record: ObjectRecord = { id: '', industry: 'GREEN_TECH' };
+      const record: ObjectRecord = { id: '', stage: 'MEETING' };
-      const fieldMetadataItem = mockedCompanyObjectMetadataItem.fields.find(
+      const fieldMetadataItem = mockedOpportunityObjectMetadataItem.fields.find(
-        ({ name }) => name === 'industry',
+        ({ name }) => name === 'stage',
       )!;
-      const selectOptions: SettingsObjectFieldSelectFormValues = [
+      const selectOptions: SettingsObjectFieldSelectFormValues =
-        {
+        fieldMetadataItem.options ?? [];
-          color: 'purple',
-          label: '🏭 Industry',
-          value: 'INDUSTRY',
-        },
-        {
-          color: 'pink',
-          isDefault: true,
-          label: '💊 Health',
-          value: 'HEALTH',
-        },
-        {
-          color: 'turquoise',
-          label: '🌿 Green tech',
-          value: 'GREEN_TECH',
-        },
-      ];
 
       // When
       const result = getFieldPreviewValueFromRecord({
@@ -47,28 +32,12 @@ describe('getFieldPreviewValueFromRecord', () => {
 
     it('returns undefined if the select option was not found', () => {
       // Given
-      const record: ObjectRecord = { id: '', industry: 'MOBILITY' };
+      const record: ObjectRecord = { id: '', industry: 'DOES_NOT_EXIST' };
-      const fieldMetadataItem = mockedCompanyObjectMetadataItem.fields.find(
+      const fieldMetadataItem = mockedOpportunityObjectMetadataItem.fields.find(
-        ({ name }) => name === 'industry',
+        ({ name }) => name === 'stage',
       )!;
-      const selectOptions: SettingsObjectFieldSelectFormValues = [
+      const selectOptions: SettingsObjectFieldSelectFormValues =
-        {
+        fieldMetadataItem.options ?? [];
-          color: 'purple',
-          label: '🏭 Industry',
-          value: 'INDUSTRY',
-        },
-        {
-          color: 'pink',
-          isDefault: true,
-          label: '💊 Health',
-          value: 'HEALTH',
-        },
-        {
-          color: 'turquoise',
-          label: '🌿 Green tech',
-          value: 'GREEN_TECH',
-        },
-      ];
 
       // When
       const result = getFieldPreviewValueFromRecord({

packages/twenty-front/src/modules/ui/input/components/internal/date/components/MonthAndYearDropdown.tsx

@@ -60,7 +60,11 @@ export const MonthAndYearDropdown = ({
       }}
       dropdownPlacement="bottom-start"
       clickableComponent={
-        <LightIconButton Icon={IconCalendarDue} size="medium" />
+        <LightIconButton
+          testId="month-and-year-dropdown"
+          Icon={IconCalendarDue}
+          size="medium"
+        />
       }
       dropdownComponents={
         <DropdownMenuItemsContainer>

packages/twenty-front/src/modules/ui/input/components/internal/date/components/__stories__/DatePicker.stories.tsx

@@ -23,11 +23,16 @@ export const WithOpenMonthSelect: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    const monthSelect = canvas.getByText('January');
+    const monthAndYearButton = await canvas.findByTestId(
+      'month-and-year-dropdown',
+    );
+
+    await userEvent.click(monthAndYearButton);
+
+    const monthSelect = await canvas.findByText('January');
 
     await userEvent.click(monthSelect);
 
-    expect(canvas.getAllByText('January')).toHaveLength(2);
     [
       'February',
       'March',

packages/twenty-front/src/modules/views/hooks/__tests__/useViewBar.test.tsx

@@ -1,54 +0,0 @@
-import { MemoryRouter } from 'react-router-dom';
-import { MockedProvider } from '@apollo/client/testing';
-import { RecoilRoot } from 'recoil';
-import { v4 as uuidv4 } from 'uuid';
-
-import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { generateDeleteOneRecordMutation } from '@/object-record/utils/generateDeleteOneRecordMutation';
-import { ViewScope } from '@/views/scopes/ViewScope';
-
-const mockedUuid = 'mocked-uuid';
-jest.mock('uuid');
-
-(uuidv4 as jest.Mock).mockReturnValue(mockedUuid);
-
-const mocks = [
-  {
-    request: {
-      query: generateDeleteOneRecordMutation({
-        objectMetadataItem: { nameSingular: 'view' } as ObjectMetadataItem,
-      }),
-      variables: { idToDelete: mockedUuid },
-    },
-    result: jest.fn(() => ({
-      data: { deleteView: { id: '' } },
-    })),
-  },
-];
-
-const Wrapper = ({ children }: { children: React.ReactNode }) => (
-  <MemoryRouter
-    initialEntries={['/one', '/two', { pathname: '/three' }]}
-    initialIndex={1}
-  >
-    <MockedProvider mocks={mocks} addTypename={false}>
-      <RecoilRoot>
-        <ViewScope viewScopeId="viewScopeId" onCurrentViewChange={() => {}}>
-          {children}
-        </ViewScope>
-      </RecoilRoot>
-    </MockedProvider>
-  </MemoryRouter>
-);
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const _renderHookConfig = {
-  wrapper: Wrapper,
-};
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const _viewBarId = 'viewBarTestId';
-
-describe('useViewBar', () => {
-  it('should set and get current view Id', () => {});
-});

packages/twenty-front/src/modules/workspace-member/types/WorkspaceMember.ts

@@ -1,6 +1,7 @@
 export type ColorScheme = 'Dark' | 'Light' | 'System';
 
 export type WorkspaceMember = {
+  __typename: 'WorkspaceMember';
   id: string;
   name: {
     firstName: string;

packages/twenty-front/src/pages/auth/__stories__/ChooseYourPlan.stories.tsx

@@ -0,0 +1,75 @@
+import { getOperationName } from '@apollo/client/utilities';
+import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/testing-library';
+import { graphql, HttpResponse } from 'msw';
+
+import { AppPath } from '@/types/AppPath';
+import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
+import { sleep } from '~/testing/sleep';
+
+import { ChooseYourPlan } from '../ChooseYourPlan';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Auth/ChooseYourPlan',
+  component: ChooseYourPlan,
+  decorators: [PageDecorator],
+  args: { routePath: AppPath.PlanRequired },
+  parameters: {
+    msw: {
+      handlers: [
+        graphql.query(getOperationName(GET_CURRENT_USER) ?? '', () => {
+          return HttpResponse.json({
+            data: {
+              currentUser: mockedOnboardingUsersData[0],
+            },
+          });
+        }),
+        graphql.query('GetProductPrices', () => {
+          return HttpResponse.json({
+            data: {
+              getProductPrices: {
+                __typename: 'ProductPricesEntity',
+                productPrices: [
+                  {
+                    __typename: 'ProductPriceEntity',
+                    created: 1699860608,
+                    recurringInterval: 'month',
+                    stripePriceId: 'monthly8usd',
+                    unitAmount: 900,
+                  },
+                  {
+                    __typename: 'ProductPriceEntity',
+                    created: 1701874964,
+                    recurringInterval: 'year',
+                    stripePriceId: 'priceId',
+                    unitAmount: 9000,
+                  },
+                ],
+              },
+            },
+          });
+        }),
+        graphqlMocks.handlers,
+      ],
+    },
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof ChooseYourPlan>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    sleep(100);
+
+    await canvas.findByText('Choose your Plan');
+  },
+};

packages/twenty-front/src/pages/auth/__stories__/PasswordReset.stories.tsx

@@ -4,6 +4,7 @@ import { within } from '@storybook/test';
 import { graphql, HttpResponse } from 'msw';
 
 import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
+import { ValidatePasswordResetTokenDocument } from '~/generated/graphql';
 import { PasswordReset } from '~/pages/auth/PasswordReset';
 import {
   PageDecorator,
@@ -16,10 +17,26 @@ const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Auth/PasswordReset',
   component: PasswordReset,
   decorators: [PageDecorator],
-  args: { routePath: '/reset-password/resetToken' },
+  args: {
+    routePath: '/reset-password/:passwordResetToken',
+    routeParams: { ':passwordResetToken': 'MOCKED_TOKEN' },
+  },
   parameters: {
     msw: {
       handlers: [
+        graphql.query(
+          getOperationName(ValidatePasswordResetTokenDocument) ?? '',
+          () => {
+            return HttpResponse.json({
+              data: {
+                validatePasswordResetToken: {
+                  id: mockedOnboardingUsersData[0].id,
+                  email: mockedOnboardingUsersData[0].email,
+                },
+              },
+            });
+          },
+        ),
         graphql.query(getOperationName(GET_CURRENT_USER) ?? '', () => {
           return HttpResponse.json({
             data: {

packages/twenty-front/src/pages/not-found/__stories__/NotFound.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/test';
 
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+import { HelmetProviderDecorator } from '~/testing/decorators/HelmetProviderDecorator';
 import { PageDecoratorArgs } from '~/testing/decorators/PageDecorator';
 import { RelationPickerDecorator } from '~/testing/decorators/RelationPickerDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
@@ -12,6 +13,7 @@ const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/NotFound/Default',
   component: NotFound,
   decorators: [
+    HelmetProviderDecorator,
     ComponentWithRouterDecorator,
     SnackBarDecorator,
     RelationPickerDecorator,

packages/twenty-front/src/pages/settings/__stories__/SettingsBilling.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
 
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
@@ -7,6 +8,7 @@ import {
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { sleep } from '~/testing/sleep';
 
 import { SettingsBilling } from '../SettingsBilling';
 
@@ -24,4 +26,11 @@ export default meta;
 
 export type Story = StoryObj<typeof SettingsBilling>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    sleep(1000);
+
+    await canvas.findByRole('button', { name: 'View billing details' });
+  },
+};

packages/twenty-front/src/pages/settings/accounts/__stories__/SettingsAccountsCalendars.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
 
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
@@ -7,6 +8,7 @@ import {
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { sleep } from '~/testing/sleep';
 
 import { SettingsAccountsCalendars } from '../SettingsAccountsCalendars';
 
@@ -27,4 +29,11 @@ export default meta;
 
 export type Story = StoryObj<typeof SettingsAccountsCalendars>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    sleep(100);
+
+    await canvas.findByText('Calendar settings');
+  },
+};

packages/twenty-front/src/pages/settings/accounts/__stories__/SettingsAccountsCalendarsSettings.stories.tsx

@@ -1,4 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
+import { graphql, HttpResponse } from 'msw';
 
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
@@ -8,6 +10,7 @@ import {
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedConnectedAccounts } from '~/testing/mock-data/accounts';
+import { sleep } from '~/testing/sleep';
 
 import { SettingsAccountsCalendarsSettings } from '../SettingsAccountsCalendarsSettings';
 
@@ -21,7 +24,26 @@ const meta: Meta<PageDecoratorArgs> = {
   },
   parameters: {
     layout: 'fullscreen',
-    msw: graphqlMocks,
+    msw: {
+      handlers: [
+        ...graphqlMocks.handlers,
+        graphql.query('FindOneCalendarChannel', () => {
+          return HttpResponse.json({
+            data: {
+              calendarChannel: {
+                edges: [],
+                pageInfo: {
+                  hasNextPage: false,
+                  hasPreviousPage: false,
+                  startCursor: null,
+                  endCursor: null,
+                },
+              },
+            },
+          });
+        }),
+      ],
+    },
   },
 };
 
@@ -29,4 +51,11 @@ export default meta;
 
 export type Story = StoryObj<typeof SettingsAccountsCalendarsSettings>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    sleep(100);
+
+    await canvas.findByText('Event visibility');
+  },
+};

packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectEdit.stories.tsx

@@ -34,6 +34,6 @@ export const StandardObject: Story = {
 
 export const CustomObject: Story = {
   args: {
-    routeParams: { ':objectSlug': 'workspaces' },
+    routeParams: { ':objectSlug': 'listings' },
   },
 };

packages/twenty-front/src/pages/settings/developers/__stories__/SettingsDevelopers.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
 
 import { SettingsDevelopers } from '~/pages/settings/developers/SettingsDevelopers';
 import {
@@ -23,7 +24,10 @@ export default meta;
 export type Story = StoryObj<typeof SettingsDevelopers>;
 
 export const Default: Story = {
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
     await sleep(100);
+
+    await canvas.findByText('API keys');
   },
 };

packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationDatabase.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
 
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
@@ -8,6 +9,7 @@ import {
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { sleep } from '~/testing/sleep';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Integrations/SettingsIntegrationDatabase',
@@ -26,4 +28,11 @@ export default meta;
 
 export type Story = StoryObj<typeof SettingsIntegrationDatabase>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    sleep(1000);
+
+    await canvas.findByText('PostgreSQL database');
+  },
+};

packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationDatabaseConnection.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
 
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
@@ -8,6 +9,7 @@ import {
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { sleep } from '~/testing/sleep';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Integrations/SettingsIntegrationDatabaseConnection',
@@ -29,4 +31,12 @@ export default meta;
 
 export type Story = StoryObj<typeof SettingsIntegrationDatabaseConnection>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    within(canvasElement);
+    sleep(1000);
+
+    // Todo: Implement mocks in graphqlMocks for databaseConnection
+    // await canvas.findByText('Tables');
+  },
+};

packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationNewDatabaseConnection.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
 
 import { SettingsIntegrationNewDatabaseConnection } from '~/pages/settings/integrations/SettingsIntegrationNewDatabaseConnection';
 import {
@@ -6,6 +7,7 @@ import {
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { sleep } from '~/testing/sleep';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Integrations/SettingsIntegrationNewDatabaseConnection',
@@ -24,4 +26,11 @@ export default meta;
 
 export type Story = StoryObj<typeof SettingsIntegrationNewDatabaseConnection>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    sleep(100);
+
+    await canvas.findByText('Connect a new database');
+  },
+};

packages/twenty-front/src/pages/tasks/__stories__/Tasks.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { graphql, HttpResponse } from 'msw';
 
 import { AppPath } from '@/types/AppPath';
 import {
@@ -6,6 +7,7 @@ import {
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { mockedWorkspaceMemberData } from '~/testing/mock-data/users';
 import { sleep } from '~/testing/sleep';
 
 import { Tasks } from '../Tasks';
@@ -16,7 +18,18 @@ const meta: Meta<PageDecoratorArgs> = {
   decorators: [PageDecorator],
   args: { routePath: AppPath.TasksPage },
   parameters: {
-    msw: graphqlMocks,
+    msw: {
+      handlers: [
+        graphql.query('FindOneWorkspaceMember', () => {
+          return HttpResponse.json({
+            data: {
+              workspaceMember: mockedWorkspaceMemberData,
+            },
+          });
+        }),
+        graphqlMocks.handlers,
+      ],
+    },
   },
 };
 

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

@@ -0,0 +1,10 @@
+import { HelmetProvider } from 'react-helmet-async';
+import { Decorator } from '@storybook/react';
+
+export const HelmetProviderDecorator: Decorator = (Story) => {
+  return (
+    <HelmetProvider>
+      <Story />
+    </HelmetProvider>
+  );
+};

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

@@ -1,12 +1,15 @@
 import { HelmetProvider } from 'react-helmet-async';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { ApolloProvider } from '@apollo/client';
+import { loadDevMessages } from '@apollo/client/dev';
 import { Decorator } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
 
+import { ClientConfigProviderEffect } from '@/client-config/components/ClientConfigProviderEffect';
 import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
 import { ApolloMetadataClientMockedProvider } from '@/object-metadata/hooks/__mocks__/ApolloMetadataClientProvider';
 import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
+import { UserProviderEffect } from '@/users/components/UserProviderEffect';
 import { ClientConfigProvider } from '~/modules/client-config/components/ClientConfigProvider';
 import { DefaultLayout } from '~/modules/ui/layout/page/DefaultLayout';
 import { UserProvider } from '~/modules/users/components/UserProvider';
@@ -32,14 +35,23 @@ const computeLocation = (routePath: string, routeParams: RouteParams) => {
   };
 };
 
+const ApolloStorybookDevLogEffect = () => {
+  loadDevMessages();
+
+  return <></>;
+};
+
 export const PageDecorator: Decorator<{
   routePath: string;
   routeParams: RouteParams;
 }> = (Story, { args }) => (
   <RecoilRoot>
     <ApolloProvider client={mockedApolloClient}>
+      <ApolloStorybookDevLogEffect />
       <ApolloMetadataClientMockedProvider>
+        <UserProviderEffect />
         <UserProvider>
+          <ClientConfigProviderEffect />
           <ClientConfigProvider>
             <MemoryRouter
               initialEntries={[

packages/twenty-front/src/testing/graphqlMocks.ts

@@ -12,10 +12,10 @@ import {
   mockedDuplicateCompanyData,
 } from '~/testing/mock-data/companies';
 import { mockedClientConfig } from '~/testing/mock-data/config';
+import { mockedObjectMetadataItemsQueryResult } from '~/testing/mock-data/metadata';
 import { mockedUsersData } from '~/testing/mock-data/users';
 import { mockWorkspaceMembers } from '~/testing/mock-data/workspace-members';
 
-import { mockedObjectMetadataItems } from './mock-data/metadata';
 import { mockedPeopleData } from './mock-data/people';
 import { mockedViewFieldsData } from './mock-data/view-fields';
 import { mockedViewsData } from './mock-data/views';
@@ -49,7 +49,7 @@ export const graphqlMocks = {
       getOperationName(FIND_MANY_OBJECT_METADATA_ITEMS) ?? '',
       () => {
         return HttpResponse.json({
-          data: { objects: mockedObjectMetadataItems },
+          data: mockedObjectMetadataItemsQueryResult,
         });
       },
     ),

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

@@ -35,14 +35,18 @@ type MockedActivity = Pick<
       | 'companyId'
       | 'targetObjectNameSingular'
     > & {
-      activity: Pick<Activity, 'id' | 'createdAt' | 'updatedAt'>;
+      activity: Pick<Activity, 'id' | 'createdAt' | 'updatedAt' | '__typename'>;
-      person?: Pick<Person, 'id' | 'name' | 'avatarUrl'> | null;
+      person?: Pick<Person, 'id' | 'name' | 'avatarUrl' | '__typename'> | null;
-      company?: Pick<Company, 'id' | 'name' | 'domainName'> | null;
+      company?: Pick<
+        Company,
+        'id' | 'name' | 'domainName' | '__typename'
+      > | null;
     }
   >;
 };
 
 const workspaceMember: WorkspaceMember = {
+  __typename: 'WorkspaceMember',
   id: '374fe3a5-df1e-4119-afe0-2a62a2ba481e',
   name: {
     firstName: 'Charles',
@@ -103,6 +107,7 @@ export const mockedActivities: Array<MockedActivity> = [
         personId: null,
         companyId: '89bb825c-171e-4bcc-9cf7-43448d6fb280',
         company: {
+          __typename: 'Company',
           id: '89bb825c-171e-4bcc-9cf7-43448d6fb280',
           name: 'Airbnb',
           domainName: 'airbnb.com',
@@ -110,6 +115,7 @@ export const mockedActivities: Array<MockedActivity> = [
         person: null,
         activityId: '89bb825c-171e-4bcc-9cf7-43448d6fb230',
         activity: {
+          __typename: 'Activity',
           id: '89bb825c-171e-4bcc-9cf7-43448d6fb230',
           createdAt: '2023-04-26T10:12:42.33625+00:00',
           updatedAt: '2023-04-26T10:23:42.33625+00:00',
@@ -124,6 +130,7 @@ export const mockedActivities: Array<MockedActivity> = [
         personId: null,
         companyId: 'b396e6b9-dc5c-4643-bcff-61b6cf7523ae',
         company: {
+          __typename: 'Company',
           id: '89bb825c-171e-4bcc-9cf7-43448d6fb278',
           name: 'Aircall',
           domainName: 'aircall.io',
@@ -131,6 +138,7 @@ export const mockedActivities: Array<MockedActivity> = [
         person: null,
         activityId: 'b396e6b9-dc5c-4643-bcff-61b6cf7523ae',
         activity: {
+          __typename: 'Activity',
           id: '89bb825c-171e-4bcc-9cf7-43448d6fb231',
           createdAt: new Date().toISOString(),
           updatedAt: new Date().toISOString(),
@@ -166,6 +174,7 @@ export const mockedActivities: Array<MockedActivity> = [
         targetObjectNameSingular: 'person',
         personId: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b', // Alexandre
         person: {
+          __typename: 'Person',
           id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
           name: {
             firstName: 'Alexandre',
@@ -177,6 +186,7 @@ export const mockedActivities: Array<MockedActivity> = [
         companyId: null,
         activityId: '89bb825c-171e-4bcc-9cf7-43448d6fb278a',
         activity: {
+          __typename: 'Activity',
           id: '89bb825c-171e-4bcc-9cf7-43448d6fb278a',
           createdAt: '2023-04-26T10:12:42.33625+00:00',
           updatedAt: '2023-04-26T10:23:42.33625+00:00',
@@ -192,6 +202,7 @@ export const mockedActivities: Array<MockedActivity> = [
         targetObjectNameSingular: 'person',
         company: null,
         person: {
+          __typename: 'Person',
           id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6d',
           name: {
             firstName: 'Jean',
@@ -201,6 +212,7 @@ export const mockedActivities: Array<MockedActivity> = [
         },
         activityId: '89bb825c-171e-4bcc-9cf7-43448d6fb278a',
         activity: {
+          __typename: 'Activity',
           id: '89bb825c-171e-4bcc-9cf7-43448d6fb278a',
           createdAt: new Date().toISOString(),
           updatedAt: new Date().toISOString(),

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

@@ -11,6 +11,7 @@ type MockedCompany = Omit<Company, 'deletedAt'> & {
 
 export const mockedCompaniesData: Array<MockedCompany> = [
   {
+    __typename: 'Company',
     id: '89bb825c-171e-4bcc-9cf7-43448d6fb278',
     domainName: 'airbnb.com',
     name: 'Airbnb',
@@ -31,6 +32,7 @@ export const mockedCompaniesData: Array<MockedCompany> = [
     Favorite: null,
     accountOwnerId: mockedUsersData[0].id,
     accountOwner: {
+      __typename: 'WorkspaceMember',
       name: {
         firstName: 'Charles',
         lastName: 'Test',
@@ -46,6 +48,7 @@ export const mockedCompaniesData: Array<MockedCompany> = [
     },
   },
   {
+    __typename: 'Company',
     id: 'b396e6b9-dc5c-4643-bcff-61b6cf7523ae',
     domainName: 'aircall.io',
     name: 'Aircall',
@@ -68,6 +71,7 @@ export const mockedCompaniesData: Array<MockedCompany> = [
     Favorite: null,
   },
   {
+    __typename: 'Company',
     id: 'a674fa6c-1455-4c57-afaf-dd5dc086361d',
     domainName: 'algolia.com',
     name: 'Algolia',
@@ -90,6 +94,7 @@ export const mockedCompaniesData: Array<MockedCompany> = [
     accountOwnerId: null,
   },
   {
+    __typename: 'Company',
     id: 'b1cfd51b-a831-455f-ba07-4e30671e1dc3',
     domainName: 'apple.com',
     name: 'Apple',
@@ -112,6 +117,7 @@ export const mockedCompaniesData: Array<MockedCompany> = [
     accountOwnerId: null,
   },
   {
+    __typename: 'Company',
     id: '5c21e19e-e049-4393-8c09-3e3f8fb09ecb',
     domainName: 'qonto.com',
     name: 'Qonto',
@@ -134,6 +140,7 @@ export const mockedCompaniesData: Array<MockedCompany> = [
     accountOwnerId: null,
   },
   {
+    __typename: 'Company',
     id: '9d162de6-cfbf-4156-a790-e39854dcd4eb',
     domainName: 'facebook.com',
     name: 'Facebook',
@@ -156,6 +163,7 @@ export const mockedCompaniesData: Array<MockedCompany> = [
     accountOwnerId: null,
   },
   {
+    __typename: 'Company',
     id: '9d162de6-cfbf-4156-a790-e39854dcd4ef',
     domainName: 'sequoia.com',
     name: 'Sequoia',

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

@@ -1,8 +1,8 @@
-export const mockedClientConfig = {
+import { ClientConfig } from '~/generated-metadata/graphql';
+
+export const mockedClientConfig: ClientConfig = {
   signInPrefilled: true,
   signUpDisabled: false,
-  dataModelSettingsEnabled: true,
-  developersSettingsEnabled: true,
   debugMode: false,
   authProviders: {
     google: true,
@@ -20,6 +20,12 @@ export const mockedClientConfig = {
     supportFrontChatId: null,
     __typename: 'Support',
   },
+  sentry: {
+    dsn: 'MOCKED_DSN',
+    release: 'MOCKED_RELEASE',
+    environment: 'MOCKED_ENVIRONMENT',
+    __typename: 'Sentry',
+  },
   billing: {
     isBillingEnabled: true,
     billingUrl: '',

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

@@ -14,6 +14,7 @@ type MockedUser = Pick<
   workspaceMember: WorkspaceMember | null;
   locale: string;
   defaultWorkspace: Workspace;
+  workspaces: Array<{ workspace: Workspace }>;
 };
 
 export const avatarUrl =
@@ -30,12 +31,39 @@ export const mockDefaultWorkspace: Workspace = {
   allowImpersonation: true,
   subscriptionStatus: 'active',
   activationStatus: 'active',
-  featureFlags: [],
+  featureFlags: [
+    {
+      id: '1492de61-5018-4368-8923-4f1eeaf988c4',
+      key: 'IS_AIRTABLE_INTEGRATION_ENABLED',
+      value: true,
+      workspaceId: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6w',
+    },
+    {
+      id: '1492de61-5018-4368-8923-4f1eeaf988c5',
+      key: 'IS_POSTGRESQL_INTEGRATION_ENABLED',
+      value: true,
+      workspaceId: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6w',
+    },
+    {
+      id: '1492de61-5018-4368-8923-4f1eeaf988c6',
+      key: 'IS_CALENDER_ENABLED',
+      value: true,
+      workspaceId: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6w',
+    },
+  ],
   createdAt: '2023-04-26T10:23:42.33625+00:00',
   updatedAt: '2023-04-26T10:23:42.33625+00:00',
+  currentCacheVersion: '1',
+  currentBillingSubscription: {
+    __typename: 'BillingSubscription',
+    id: '7efbc3f7-6e5e-4128-957e-8d86808cdf6a',
+    interval: 'month',
+    status: 'active',
+  },
 };
 
 export const mockedWorkspaceMemberData: WorkspaceMember = {
+  __typename: 'WorkspaceMember',
   id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
   colorScheme: 'Light',
   avatarUrl,
@@ -63,6 +91,7 @@ export const mockedUsersData: Array<MockedUser> = [
     workspaceMember: mockedWorkspaceMemberData,
     defaultWorkspace: mockDefaultWorkspace,
     locale: 'en',
+    workspaces: [{ workspace: mockDefaultWorkspace }],
   },
   {
     id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6c',
@@ -84,6 +113,7 @@ export const mockedUsersData: Array<MockedUser> = [
     },
     defaultWorkspace: mockDefaultWorkspace,
     locale: 'en',
+    workspaces: [{ workspace: mockDefaultWorkspace }],
   },
 ];
 
@@ -109,6 +139,7 @@ export const mockedOnboardingUsersData: Array<MockedUser> = [
     },
     defaultWorkspace: mockDefaultWorkspace,
     locale: 'en',
+    workspaces: [{ workspace: mockDefaultWorkspace }],
   },
   {
     id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6d',
@@ -123,5 +154,6 @@ export const mockedOnboardingUsersData: Array<MockedUser> = [
       activationStatus: 'inactive',
     },
     locale: 'en',
+    workspaces: [{ workspace: mockDefaultWorkspace }],
   },
 ];