Fix Storybook stories (Datamodel edition / preview / signOut) (#5019)

As per title ; some small changes on broken stories

packages/twenty-front/src/modules/activities/hooks/__tests__/useCreateActivityInCache.test.tsx

@@ -8,6 +8,7 @@ import { useCreateActivityInCache } from '@/activities/hooks/useCreateActivityIn
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { getObjectMetadataItemsMock } from '@/object-metadata/utils/getObjectMetadataItemsMock';
+import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
 import { mockWorkspaceMembers } from '~/testing/mock-data/workspace-members';
 
@@ -64,18 +65,26 @@ describe('useCreateActivityInCache', () => {
         const setObjectMetadataItems = useSetRecoilState(
           objectMetadataItemsState,
         );
+        const setRecordStore = useSetRecoilState(
+          recordStoreFamilyState('1234'),
+        );
 
         const res = useCreateActivityInCache();
         return {
           ...res,
           setCurrentWorkspaceMember,
           setObjectMetadataItems,
+          setRecordStore,
         };
       },
       { wrapper: Wrapper },
     );
 
     act(() => {
+      result.current.setRecordStore({
+        id: '1234',
+        __typename: 'Person',
+      });
       result.current.setCurrentWorkspaceMember(mockWorkspaceMembers[0]);
       result.current.setObjectMetadataItems(mockObjectMetadataItems);
     });

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

@@ -41,6 +41,7 @@ const BooleanFieldInputWithContext = ({
   return (
     <FieldContextProvider
       fieldDefinition={{
+        defaultValue: false,
         fieldMetadataId: 'boolean',
         label: 'Boolean',
         iconName: 'Icon123',

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

@@ -35,6 +35,7 @@ const meta: Meta<typeof SettingsDataModelFieldSettingsFormCard> = {
     'Modules/Settings/DataModel/Fields/Forms/SettingsDataModelFieldSettingsFormCard',
   component: SettingsDataModelFieldSettingsFormCard,
   decorators: [
+    MemoryRouterDecorator,
     ComponentDecorator,
     ObjectMetadataItemsDecorator,
     SnackBarDecorator,
@@ -61,7 +62,6 @@ const relationFieldMetadataItem = mockedPersonObjectMetadataItem.fields.find(
 )!;
 
 export const WithRelationForm: Story = {
-  decorators: [MemoryRouterDecorator],
   args: {
     fieldMetadataItem: mockedCompanyObjectMetadataItem.fields.find(
       ({ name }) => name === 'people',

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

@@ -18,6 +18,7 @@ const meta: Meta<typeof SettingsDataModelFieldPreviewCard> = {
     'Modules/Settings/DataModel/Fields/Preview/SettingsDataModelFieldPreviewCard',
   component: SettingsDataModelFieldPreviewCard,
   decorators: [
+    MemoryRouterDecorator,
     ComponentDecorator,
     ObjectMetadataItemsDecorator,
     SnackBarDecorator,
@@ -64,7 +65,6 @@ export const Date: Story = {
 };
 
 export const Link: Story = {
-  decorators: [MemoryRouterDecorator],
   args: {
     fieldMetadataItem: mockedCompanyObjectMetadataItem.fields.find(
       ({ type }) => type === FieldMetadataType.Link,
@@ -91,7 +91,6 @@ export const Rating: Story = {
 };
 
 export const Relation: Story = {
-  decorators: [MemoryRouterDecorator],
   args: {
     fieldMetadataItem: mockedPersonObjectMetadataItem.fields.find(
       ({ name }) => name === 'company',
@@ -100,14 +99,3 @@ export const Relation: Story = {
     relationObjectMetadataItem: mockedCompanyObjectMetadataItem,
   },
 };
-
-// Todo: re-enable this test once useObjectMetadataItem has been split and refactored into smaller functions.
-// Right now, as the workspace is not set, the hook things the user is not logged in and it is not possible to have a custom object
-// export const Custom: Story = {
-//   args: {
-//     fieldMetadataItem: mockedCustomObjectMetadataItem.fields.find(
-//       ({ type }) => type === FieldMetadataType.Text,
-//     ),
-//     objectMetadataItem: mockedCustomObjectMetadataItem,
-//   },
-// };

packages/twenty-front/src/modules/workspace/components/WorkspaceInviteLink.tsx

@@ -29,7 +29,7 @@ export const WorkspaceInviteLink = ({
   const { enqueueSnackBar } = useSnackBar();
 
   return (
-    <StyledContainer>
+    <StyledContainer data-chromatic="ignore">
       <StyledLinkContainer>
         <TextInput value={inviteLink} disabled fullWidth />
       </StyledLinkContainer>

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

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { within } from '@storybook/test';
+import { userEvent, within } from '@storybook/test';
 
 import {
   PageDecorator,
@@ -13,7 +13,10 @@ const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/SettingsProfile',
   component: SettingsProfile,
   decorators: [PageDecorator],
-  args: { routePath: '/settings/profile' },
+  args: {
+    routePath: '/settings/profile',
+    additionalRoutes: ['/welcome'],
+  },
   parameters: {
     msw: graphqlMocks,
   },
@@ -29,6 +32,7 @@ export const LogOut: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const logoutButton = await canvas.findByText('Logout');
-    await logoutButton.click();
+
+    await userEvent.click(logoutButton);
   },
 };

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

@@ -20,6 +20,7 @@ import { FullHeightStorybookLayout } from '../FullHeightStorybookLayout';
 export type PageDecoratorArgs = {
   routePath: string;
   routeParams: RouteParams;
+  additionalRoutes?: string[];
 };
 
 type RouteParams = {
@@ -44,37 +45,47 @@ const ApolloStorybookDevLogEffect = () => {
 export const PageDecorator: Decorator<{
   routePath: string;
   routeParams: RouteParams;
-}> = (Story, { args }) => (
-  <RecoilRoot>
-    <ApolloProvider client={mockedApolloClient}>
-      <ApolloStorybookDevLogEffect />
-      <ApolloMetadataClientMockedProvider>
-        <UserProviderEffect />
-        <UserProvider>
-          <ClientConfigProviderEffect />
-          <ClientConfigProvider>
-            <MemoryRouter
-              initialEntries={[
-                computeLocation(args.routePath, args.routeParams),
-              ]}
-            >
-              <FullHeightStorybookLayout>
-                <HelmetProvider>
-                  <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
-                    <ObjectMetadataItemsProvider>
-                      <Routes>
-                        <Route element={<DefaultLayout />}>
-                          <Route path={args.routePath} element={<Story />} />
-                        </Route>
-                      </Routes>
-                    </ObjectMetadataItemsProvider>
-                  </SnackBarProviderScope>
-                </HelmetProvider>
-              </FullHeightStorybookLayout>
-            </MemoryRouter>
-          </ClientConfigProvider>
-        </UserProvider>
-      </ApolloMetadataClientMockedProvider>
-    </ApolloProvider>
-  </RecoilRoot>
-);
+  additionalRoutes?: string[];
+}> = (Story, { args }) => {
+  return (
+    <RecoilRoot>
+      <ApolloProvider client={mockedApolloClient}>
+        <ApolloStorybookDevLogEffect />
+        <ApolloMetadataClientMockedProvider>
+          <UserProviderEffect />
+          <UserProvider>
+            <ClientConfigProviderEffect />
+            <ClientConfigProvider>
+              <MemoryRouter
+                initialEntries={[
+                  computeLocation(args.routePath, args.routeParams),
+                ]}
+              >
+                <FullHeightStorybookLayout>
+                  <HelmetProvider>
+                    <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
+                      <ObjectMetadataItemsProvider>
+                        <Routes>
+                          <Route element={<DefaultLayout />}>
+                            <Route path={args.routePath} element={<Story />} />
+                            {args.additionalRoutes?.map((route) => (
+                              <Route
+                                key={route}
+                                path={route}
+                                element={<div>Navigated to {route}</div>}
+                              />
+                            ))}
+                          </Route>
+                        </Routes>
+                      </ObjectMetadataItemsProvider>
+                    </SnackBarProviderScope>
+                  </HelmetProvider>
+                </FullHeightStorybookLayout>
+              </MemoryRouter>
+            </ClientConfigProvider>
+          </UserProvider>
+        </ApolloMetadataClientMockedProvider>
+      </ApolloProvider>
+    </RecoilRoot>
+  );
+};