Add storybook tests for User & Metadata loading (#5650)

### Description Add storybook tests for User & Metadata loading ### Refs #5590 ### Demo https://github.com/twentyhq/twenty/assets/140154534/2434fc50-8d95-420b-9f62-6fbdf43ce9e5 Fixes #5590 --------- Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com> Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
2024-06-04 04:51:33 -04:00
parent 3f9f2c3ba6
commit cd9ac529a5
44 changed files with 175 additions and 95 deletions
--- a/packages/twenty-front/src/loading/components/stories/PrefetchLoading.stories.tsx
+++ b/packages/twenty-front/src/loading/components/stories/PrefetchLoading.stories.tsx
@ -0,0 +1,47 @@
+import { expect } from '@storybook/jest';
+import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
+
+import { RecordIndexPage } from '~/pages/object-record/RecordIndexPage';
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'App/Loading/PrefetchLoading',
+  component: RecordIndexPage,
+  args: {
+    routePath: '/objects/:objectNamePlural',
+    routeParams: {
+      ':objectNamePlural': 'companies',
+    },
+  },
+  parameters: {
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof RecordIndexPage>;
+
+export const Default: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByText('Search');
+    await canvas.findByText('Settings');
+    await canvas.findByText('Tasks');
+
+    expect(canvas.queryByText('People')).toBeNull();
+    expect(canvas.queryByText('Opportunities')).toBeNull();
+    expect(canvas.queryByText('Listings')).toBeNull();
+    expect(canvas.queryByText('My Customs')).toBeNull();
+  },
+};
--- a/packages/twenty-front/src/loading/components/stories/UserOrMetadataLoader.stories.tsx
+++ b/packages/twenty-front/src/loading/components/stories/UserOrMetadataLoader.stories.tsx
@ -0,0 +1,87 @@
+import { getOperationName } from '@apollo/client/utilities';
+import { expect } from '@storybook/jest';
+import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
+import { graphql, HttpResponse } from 'msw';
+
+import { GET_CLIENT_CONFIG } from '@/client-config/graphql/queries/getClientConfig';
+import { FIND_MANY_OBJECT_METADATA_ITEMS } from '@/object-metadata/graphql/queries';
+import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
+import { RecordIndexPage } from '~/pages/object-record/RecordIndexPage';
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks, metadataGraphql } from '~/testing/graphqlMocks';
+import { mockedClientConfig } from '~/testing/mock-data/config';
+import { mockedUsersData } from '~/testing/mock-data/users';
+
+const userMetadataLoaderMocks = {
+  msw: {
+    handlers: [
+      graphql.query(getOperationName(GET_CURRENT_USER) ?? '', () => {
+        return HttpResponse.json({
+          data: {
+            currentUser: mockedUsersData[0],
+          },
+        });
+      }),
+      graphql.query(getOperationName(GET_CLIENT_CONFIG) ?? '', () => {
+        return HttpResponse.json({
+          data: {
+            clientConfig: mockedClientConfig,
+          },
+        });
+      }),
+      metadataGraphql.query(
+        getOperationName(FIND_MANY_OBJECT_METADATA_ITEMS) ?? '',
+        () => {
+          return HttpResponse.json({
+            data: {
+              objects: {
+                // simulate no metadata items
+                edges: [],
+              },
+            },
+          });
+        },
+      ),
+    ],
+  },
+};
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'App/Loading/UserOrMetadataLoader',
+  component: RecordIndexPage,
+  args: {
+    routePath: '/objects/:objectNamePlural',
+    routeParams: {
+      ':objectNamePlural': 'companies',
+    },
+  },
+  parameters: {
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof RecordIndexPage>;
+
+export const Default: Story = {
+  parameters: userMetadataLoaderMocks,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  decorators: [PageDecorator],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.queryByText('Search')).toBeNull();
+    expect(canvas.queryByText('Settings')).toBeNull();
+    expect(canvas.queryByText('Tasks')).toBeNull();
+    expect(canvas.queryByText('People')).toBeNull();
+    expect(canvas.queryByText('Opportunities')).toBeNull();
+    expect(canvas.queryByText('Listings')).toBeNull();
+    expect(canvas.queryByText('My Customs')).toBeNull();
+  },
+};
--- a/packages/twenty-front/src/modules/object-metadata/components/stories/ObjectMetadataNavItems.stories.tsx
+++ b/packages/twenty-front/src/modules/object-metadata/components/stories/ObjectMetadataNavItems.stories.tsx
@ -6,7 +6,6 @@ import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/Componen
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';

@ -21,7 +20,6 @@ const meta: Meta<typeof ObjectMetadataNavItems> = {
    ComponentWithRouterDecorator,
    ComponentWithRecoilScopeDecorator,
    SnackBarDecorator,
-    PrefetchLoadingDecorator,
  ],
  parameters: {
    msw: graphqlMocks,
--- a/packages/twenty-front/src/modules/support/components/stories/SupportChat.stories.tsx
+++ b/packages/twenty-front/src/modules/support/components/stories/SupportChat.stories.tsx
@ -7,7 +7,6 @@ import { currentUserState } from '@/auth/states/currentUserState';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { supportChatState } from '@/client-config/states/supportChatState';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import {
  mockDefaultWorkspace,
@ -36,7 +35,6 @@ const meta: Meta<typeof SupportChat> = {

      return <Story />;
    },
-    PrefetchLoadingDecorator,
  ],
  parameters: {
    msw: graphqlMocks,
--- a/packages/twenty-front/src/pages/auth/stories/ChooseYourPlan.stories.tsx
+++ b/packages/twenty-front/src/pages/auth/stories/ChooseYourPlan.stories.tsx
@ -9,7 +9,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
 import { sleep } from '~/testing/sleep';
@ -19,7 +18,7 @@ import { ChooseYourPlan } from '../ChooseYourPlan';
 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Auth/ChooseYourPlan',
  component: ChooseYourPlan,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: { routePath: AppPath.PlanRequired },
  parameters: {
    msw: {
--- a/packages/twenty-front/src/pages/auth/stories/CreateProfile.stories.tsx
+++ b/packages/twenty-front/src/pages/auth/stories/CreateProfile.stories.tsx
@ -9,7 +9,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedOnboardingUsersData } from '~/testing/mock-data/users';

@ -18,7 +17,7 @@ import { CreateProfile } from '../CreateProfile';
 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Auth/CreateProfile',
  component: CreateProfile,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: { routePath: AppPath.CreateProfile },
  parameters: {
    msw: {
--- a/packages/twenty-front/src/pages/auth/stories/CreateWorkspace.stories.tsx
+++ b/packages/twenty-front/src/pages/auth/stories/CreateWorkspace.stories.tsx
@ -11,7 +11,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedOnboardingUsersData } from '~/testing/mock-data/users';

@ -26,7 +25,6 @@ const meta: Meta<PageDecoratorArgs> = {
      setCurrentWorkspace(mockedOnboardingUsersData[1].defaultWorkspace);
      return <Story />;
    },
-    PrefetchLoadingDecorator,
    PageDecorator,
  ],
  args: { routePath: AppPath.CreateWorkspace },
--- a/packages/twenty-front/src/pages/auth/stories/PasswordReset.stories.tsx
+++ b/packages/twenty-front/src/pages/auth/stories/PasswordReset.stories.tsx
@ -10,14 +10,13 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedOnboardingUsersData } from '~/testing/mock-data/users';

 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Auth/PasswordReset',
  component: PasswordReset,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: {
    routePath: '/reset-password/:passwordResetToken',
    routeParams: { ':passwordResetToken': 'MOCKED_TOKEN' },
--- a/packages/twenty-front/src/pages/auth/stories/PaymentSuccess.stories.tsx
+++ b/packages/twenty-front/src/pages/auth/stories/PaymentSuccess.stories.tsx
@ -9,7 +9,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedOnboardingUsersData } from '~/testing/mock-data/users';

@ -18,7 +17,7 @@ import { PaymentSuccess } from '../PaymentSuccess';
 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Auth/PaymentSuccess',
  component: PaymentSuccess,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: { routePath: AppPath.PlanRequiredSuccess },
  parameters: {
    msw: {
--- a/packages/twenty-front/src/pages/auth/stories/SignInUp.stories.tsx
+++ b/packages/twenty-front/src/pages/auth/stories/SignInUp.stories.tsx
@ -9,7 +9,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';

 import { SignInUp } from '../SignInUp';
@ -17,7 +16,7 @@ import { SignInUp } from '../SignInUp';
 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Auth/SignInUp',
  component: SignInUp,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: { routePath: AppPath.SignInUp },
  parameters: {
    msw: {
--- a/packages/twenty-front/src/pages/impersonate/stories/ImpersonateEffect.stories.tsx
+++ b/packages/twenty-front/src/pages/impersonate/stories/ImpersonateEffect.stories.tsx
@ -5,7 +5,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';

@ -14,7 +13,7 @@ import { ImpersonateEffect } from '../ImpersonateEffect';
 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Impersonate/Impersonate',
  component: ImpersonateEffect,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: {
    routePath: AppPath.Impersonate,
    routeParams: { ':userId': '1' },
--- a/packages/twenty-front/src/pages/object-record/stories/RecordIndexPage.stories.tsx
+++ b/packages/twenty-front/src/pages/object-record/stories/RecordIndexPage.stories.tsx
@ -1,4 +1,3 @@
-import { expect } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/test';

@ -6,7 +5,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';

 import { RecordIndexPage } from '../RecordIndexPage';
@ -31,7 +29,6 @@ export default meta;
 export type Story = StoryObj<typeof RecordIndexPage>;

 export const Default: Story = {
-  decorators: [PrefetchLoadingDecorator],
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);

@ -42,14 +39,3 @@ export const Default: Story = {
    await canvas.findByText('My Customs');
  },
 };
-
-export const Loading: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    expect(canvas.queryByText('People')).toBeNull();
-    expect(canvas.queryByText('Opportunities')).toBeNull();
-    expect(canvas.queryByText('Listings')).toBeNull();
-    expect(canvas.queryByText('My Customs')).toBeNull();
-  },
-};
--- a/packages/twenty-front/src/pages/object-record/stories/RecordShowPage.stories.tsx
+++ b/packages/twenty-front/src/pages/object-record/stories/RecordShowPage.stories.tsx
@ -7,7 +7,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedPeopleData } from '~/testing/mock-data/people';
 import { mockedWorkspaceMemberData } from '~/testing/mock-data/users';
@ -84,7 +83,7 @@ export type Story = StoryObj<typeof RecordShowPage>;
 export const Default: Story = {
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);

--- a/packages/twenty-front/src/pages/settings/stories/SettingsAppearance.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/stories/SettingsAppearance.stories.tsx
@ -4,7 +4,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';

 import { SettingsAppearance } from '../SettingsAppearance';
@ -12,7 +11,7 @@ import { SettingsAppearance } from '../SettingsAppearance';
 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Settings/SettingsAppearance',
  component: SettingsAppearance,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: { routePath: '/settings/appearance' },
  parameters: {
    msw: graphqlMocks,
--- a/packages/twenty-front/src/pages/settings/stories/SettingsBilling.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/stories/SettingsBilling.stories.tsx
@ -7,7 +7,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';

@ -16,7 +15,7 @@ import { SettingsBilling } from '../SettingsBilling';
 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Settings/SettingsBilling',
  component: SettingsBilling,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: { routePath: getSettingsPagePath(SettingsPath.Billing) },
  parameters: {
    msw: graphqlMocks,
--- a/packages/twenty-front/src/pages/settings/stories/SettingsProfile.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/stories/SettingsProfile.stories.tsx
@ -5,7 +5,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';

 import { SettingsProfile } from '../SettingsProfile';
@ -13,7 +12,7 @@ import { SettingsProfile } from '../SettingsProfile';
 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Settings/SettingsProfile',
  component: SettingsProfile,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: {
    routePath: '/settings/profile',
    additionalRoutes: ['/welcome'],
--- a/packages/twenty-front/src/pages/settings/stories/SettingsWorkspace.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/stories/SettingsWorkspace.stories.tsx
@ -4,7 +4,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';

 import { SettingsWorkspace } from '../SettingsWorkspace';
@ -12,7 +11,7 @@ import { SettingsWorkspace } from '../SettingsWorkspace';
 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Settings/SettingsWorkspace',
  component: SettingsWorkspace,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: { routePath: '/settings/workspace' },
  parameters: {
    msw: graphqlMocks,
--- a/packages/twenty-front/src/pages/settings/stories/SettingsWorkspaceMembers.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/stories/SettingsWorkspaceMembers.stories.tsx
@ -5,7 +5,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';

@ -14,7 +13,7 @@ import { SettingsWorkspaceMembers } from '../SettingsWorkspaceMembers';
 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Settings/SettingsWorkspaceMembers',
  component: SettingsWorkspaceMembers,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: { routePath: '/settings/workspace-members' },
  parameters: {
    msw: graphqlMocks,
--- a/packages/twenty-front/src/pages/settings/accounts/stories/SettingsAccounts.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/accounts/stories/SettingsAccounts.stories.tsx
@ -5,7 +5,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';

 import { SettingsAccounts } from '../SettingsAccounts';
@ -13,7 +12,7 @@ import { SettingsAccounts } from '../SettingsAccounts';
 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Settings/Accounts/SettingsAccounts',
  component: SettingsAccounts,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: {
    routePath: '/settings/accounts',
  },
--- a/packages/twenty-front/src/pages/settings/accounts/stories/SettingsAccountsCalendars.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/accounts/stories/SettingsAccountsCalendars.stories.tsx
@ -7,7 +7,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';

@ -16,7 +15,7 @@ import { SettingsAccountsCalendars } from '../SettingsAccountsCalendars';
 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Settings/Accounts/SettingsAccountsCalendars',
  component: SettingsAccountsCalendars,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: {
    routePath: getSettingsPagePath(SettingsPath.AccountsCalendars),
  },
--- a/packages/twenty-front/src/pages/settings/accounts/stories/SettingsAccountsCalendarsSettings.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/accounts/stories/SettingsAccountsCalendarsSettings.stories.tsx
@ -8,7 +8,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedConnectedAccounts } from '~/testing/mock-data/accounts';
 import { sleep } from '~/testing/sleep';
@ -18,7 +17,7 @@ import { SettingsAccountsCalendarsSettings } from '../SettingsAccountsCalendarsS
 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Settings/Accounts/SettingsAccountsCalendarsSettings',
  component: SettingsAccountsCalendarsSettings,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: {
    routePath: getSettingsPagePath(SettingsPath.AccountsCalendarsSettings),
    routeParams: { ':accountUuid': mockedConnectedAccounts[0].id },
--- a/packages/twenty-front/src/pages/settings/accounts/stories/SettingsAccountsEmails.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/accounts/stories/SettingsAccountsEmails.stories.tsx
@ -4,7 +4,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';

 import { SettingsAccountsEmails } from '../SettingsAccountsEmails';
@ -12,7 +11,7 @@ import { SettingsAccountsEmails } from '../SettingsAccountsEmails';
 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Settings/Accounts/SettingsAccountsEmails',
  component: SettingsAccountsEmails,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: {
    routePath: '/settings/accounts/emails',
  },
--- a/packages/twenty-front/src/pages/settings/accounts/stories/SettingsAccountsEmailsInboxSettings.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/accounts/stories/SettingsAccountsEmailsInboxSettings.stories.tsx
@ -7,13 +7,12 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';

 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Settings/Accounts/SettingsAccountsEmailsInboxSettings',
  component: SettingsAccountsEmailsInboxSettings,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: {
    routePath: '/settings/accounts/emails/:accountUuid',
    routeParams: { ':accountUuid': '123' },
--- a/packages/twenty-front/src/pages/settings/accounts/stories/SettingsNewAccount.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/accounts/stories/SettingsNewAccount.stories.tsx
@ -5,13 +5,12 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';

 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Settings/Accounts/SettingsNewAccount',
  component: SettingsNewAccount,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: {
    routePath: '/settings/accounts/new',
  },
--- a/packages/twenty-front/src/pages/settings/data-model/stories/SettingsNewObject.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/stories/SettingsNewObject.stories.tsx
@ -5,7 +5,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';

 import { SettingsNewObject } from '../SettingsNewObject';
@ -13,7 +12,7 @@ import { SettingsNewObject } from '../SettingsNewObject';
 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Settings/DataModel/SettingsNewObject',
  component: SettingsNewObject,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: {
    routePath: '/settings/objects/new',
  },
--- a/packages/twenty-front/src/pages/settings/data-model/stories/SettingsObjectDetail.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/stories/SettingsObjectDetail.stories.tsx
@ -5,7 +5,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';

@ -14,7 +13,7 @@ import { SettingsObjectDetail } from '../SettingsObjectDetail';
 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Settings/DataModel/SettingsObjectDetail',
  component: SettingsObjectDetail,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: {
    routePath: '/settings/objects/:objectSlug',
    routeParams: { ':objectSlug': 'companies' },
--- a/packages/twenty-front/src/pages/settings/data-model/stories/SettingsObjectEdit.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/stories/SettingsObjectEdit.stories.tsx
@ -4,7 +4,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';

@ -13,7 +12,7 @@ import { SettingsObjectEdit } from '../SettingsObjectEdit';
 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Settings/DataModel/SettingsObjectEdit',
  component: SettingsObjectEdit,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: {
    routePath: '/settings/objects/:objectSlug/edit',
    routeParams: { ':objectSlug': 'companies' },
--- a/packages/twenty-front/src/pages/settings/data-model/stories/SettingsObjectFieldEdit.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/stories/SettingsObjectFieldEdit.stories.tsx
@ -4,7 +4,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';

 import { SettingsObjectFieldEdit } from '../SettingsObjectFieldEdit';
@ -12,7 +11,7 @@ import { SettingsObjectFieldEdit } from '../SettingsObjectFieldEdit';
 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Settings/DataModel/SettingsObjectFieldEdit',
  component: SettingsObjectFieldEdit,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: {
    routePath: '/settings/objects/:objectSlug/:fieldSlug',
    routeParams: { ':objectSlug': 'companies', ':fieldSlug': 'name' },
--- a/packages/twenty-front/src/pages/settings/data-model/stories/SettingsObjectNewField/SettingsObjectNewFieldStep1.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/stories/SettingsObjectNewField/SettingsObjectNewFieldStep1.stories.tsx
@ -5,7 +5,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';

 import { SettingsObjectNewFieldStep1 } from '../../SettingsObjectNewField/SettingsObjectNewFieldStep1';
@ -14,7 +13,7 @@ const meta: Meta<PageDecoratorArgs> = {
  title:
    'Pages/Settings/DataModel/SettingsObjectNewField/SettingsObjectNewFieldStep1',
  component: SettingsObjectNewFieldStep1,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: {
    routePath: '/settings/objects/:objectSlug/new-field/step-1',
    routeParams: { ':objectSlug': 'companies' },
--- a/packages/twenty-front/src/pages/settings/data-model/stories/SettingsObjectNewField/SettingsObjectNewFieldStep2.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/stories/SettingsObjectNewField/SettingsObjectNewFieldStep2.stories.tsx
@ -5,7 +5,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';

 import { SettingsObjectNewFieldStep2 } from '../../SettingsObjectNewField/SettingsObjectNewFieldStep2';
@ -14,7 +13,7 @@ const meta: Meta<PageDecoratorArgs> = {
  title:
    'Pages/Settings/DataModel/SettingsObjectNewField/SettingsObjectNewFieldStep2',
  component: SettingsObjectNewFieldStep2,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: {
    routePath: '/settings/objects/:objectSlug/new-field/step-2',
    routeParams: { ':objectSlug': 'companies' },
--- a/packages/twenty-front/src/pages/settings/data-model/stories/SettingsObjects.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/stories/SettingsObjects.stories.tsx
@ -5,7 +5,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';

@ -14,7 +13,7 @@ import { SettingsObjects } from '../SettingsObjects';
 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Settings/DataModel/SettingsObjects',
  component: SettingsObjects,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: { routePath: '/settings/objects' },
  parameters: {
    msw: graphqlMocks,
--- a/packages/twenty-front/src/pages/settings/developers/stories/SettingsDevelopers.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/stories/SettingsDevelopers.stories.tsx
@ -6,14 +6,13 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';

 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Settings/Developers/SettingsDevelopers',
  component: SettingsDevelopers,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: { routePath: '/settings/developers' },
  parameters: {
    msw: graphqlMocks,
--- a/packages/twenty-front/src/pages/settings/developers/stories/api-keys/SettingsDevelopersApiKeysDetail.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/stories/api-keys/SettingsDevelopersApiKeysDetail.stories.tsx
@ -7,13 +7,12 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';

 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Settings/Developers/ApiKeys/SettingsDevelopersApiKeyDetail',
  component: SettingsDevelopersApiKeyDetail,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: {
    routePath: '/settings/developers/api-keys/:apiKeyId',
    routeParams: {
--- a/packages/twenty-front/src/pages/settings/developers/stories/api-keys/SettingsDevelopersApiKeysNew.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/stories/api-keys/SettingsDevelopersApiKeysNew.stories.tsx
@ -6,13 +6,12 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';

 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Settings/Developers/ApiKeys/SettingsDevelopersApiKeysNew',
  component: SettingsDevelopersApiKeysNew,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: { routePath: '/settings/developers/api-keys/new' },
  parameters: {
    msw: graphqlMocks,
--- a/packages/twenty-front/src/pages/settings/developers/stories/webhooks/SettingsDevelopersWebhooksDetail.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/stories/webhooks/SettingsDevelopersWebhooksDetail.stories.tsx
@ -7,13 +7,12 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';

 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Settings/Developers/Webhooks/SettingsDevelopersWebhooksDetail',
  component: SettingsDevelopersWebhooksDetail,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: {
    routePath: '/settings/developers/webhooks/:webhookId',
    routeParams: { ':webhookId': '1234' },
--- a/packages/twenty-front/src/pages/settings/developers/stories/webhooks/SettingsDevelopersWebhooksNew.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/stories/webhooks/SettingsDevelopersWebhooksNew.stories.tsx
@ -6,13 +6,12 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';

 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Settings/Developers/Webhooks/SettingsDevelopersWebhooksNew',
  component: SettingsDevelopersWebhooksNew,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: { routePath: '/settings/developers' },
  parameters: {
    msw: graphqlMocks,
--- a/packages/twenty-front/src/pages/settings/integrations/stories/SettingsIntegrationDatabase.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/stories/SettingsIntegrationDatabase.stories.tsx
@ -8,14 +8,13 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';

 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Settings/Integrations/SettingsIntegrationDatabase',
  component: SettingsIntegrationDatabase,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: {
    routePath: getSettingsPagePath(SettingsPath.IntegrationDatabase),
    routeParams: { ':databaseKey': 'postgresql' },
--- a/packages/twenty-front/src/pages/settings/integrations/stories/SettingsIntegrationEditDatabaseConnection.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/stories/SettingsIntegrationEditDatabaseConnection.stories.tsx
@ -6,7 +6,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';

@ -14,7 +13,7 @@ const meta: Meta<PageDecoratorArgs> = {
  title:
    'Pages/Settings/Integrations/SettingsIntegrationEditDatabaseConnection',
  component: SettingsIntegrationEditDatabaseConnection,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: {
    routePath: '/settings/integrations/:databaseKey/edit',
    routeParams: {
--- a/packages/twenty-front/src/pages/settings/integrations/stories/SettingsIntegrationNewDatabaseConnection.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/stories/SettingsIntegrationNewDatabaseConnection.stories.tsx
@ -6,14 +6,13 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';

 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Settings/Integrations/SettingsIntegrationNewDatabaseConnection',
  component: SettingsIntegrationNewDatabaseConnection,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: {
    routePath: '/settings/integrations/:databaseKey/new',
    routeParams: { ':databaseKey': 'postgresql' },
--- a/packages/twenty-front/src/pages/settings/integrations/stories/SettingsIntegrationShowDatabaseConnection.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/stories/SettingsIntegrationShowDatabaseConnection.stories.tsx
@ -8,7 +8,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';

@ -16,7 +15,7 @@ const meta: Meta<PageDecoratorArgs> = {
  title:
    'Pages/Settings/Integrations/SettingsIntegrationShowDatabaseConnection',
  component: SettingsIntegrationShowDatabaseConnection,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: {
    routePath: getSettingsPagePath(SettingsPath.IntegrationDatabaseConnection),
    routeParams: {
--- a/packages/twenty-front/src/pages/settings/integrations/stories/SettingsIntegrations.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/stories/SettingsIntegrations.stories.tsx
@ -8,14 +8,13 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';

 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Settings/Integrations/SettingsIntegrations',
  component: SettingsIntegrations,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: { routePath: getSettingsPagePath(SettingsPath.Integrations) },
  parameters: {
    msw: graphqlMocks,
--- a/packages/twenty-front/src/pages/tasks/stories/Tasks.stories.tsx
+++ b/packages/twenty-front/src/pages/tasks/stories/Tasks.stories.tsx
@ -6,7 +6,6 @@ import {
  PageDecorator,
  PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedWorkspaceMemberData } from '~/testing/mock-data/users';
 import { sleep } from '~/testing/sleep';
@ -16,7 +15,7 @@ import { Tasks } from '../Tasks';
 const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Tasks/Default',
  component: Tasks,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
  args: { routePath: AppPath.TasksPage },
  parameters: {
    msw: {
--- a/packages/twenty-front/src/testing/decorators/PrefetchLoadingDecorator.tsx
+++ b/packages/twenty-front/src/testing/decorators/PrefetchLoadingDecorator.tsx
@ -12,8 +12,8 @@ export const PrefetchLoadingDecorator: Decorator = (Story) => {
    prefetchIsLoadedFamilyState(PrefetchKey.AllFavorites),
  );

-  setAreViewsPrefetched(true);
-  setAreFavoritesPrefetched(true);
+  setAreViewsPrefetched(false);
+  setAreFavoritesPrefetched(false);

  return <Story />;
 };
--- a/packages/twenty-front/src/testing/graphqlMocks.ts
+++ b/packages/twenty-front/src/testing/graphqlMocks.ts
@ -22,7 +22,9 @@ import { mockedPeopleData } from './mock-data/people';
 import { mockedRemoteServers } from './mock-data/remote-servers';
 import { mockedViewFieldsData } from './mock-data/view-fields';

-const metadataGraphql = graphql.link(`${REACT_APP_SERVER_BASE_URL}/metadata`);
+export const metadataGraphql = graphql.link(
+  `${REACT_APP_SERVER_BASE_URL}/metadata`,
+);

 export const graphqlMocks = {
  handlers: [