Fix Frontend pages tests (#2719)

* Fix Frontend pages tests

Co-authored-by: gitstart-twenty <twenty@gitstart.com>
Co-authored-by: Mael FOSSO <fosso.mael.elvis@gmail.com>

* Add SnackBarDecorator

Co-authored-by: gitstart-twenty <twenty@gitstart.com>
Co-authored-by: Mael FOSSO <fosso.mael.elvis@gmail.com>

* Fix more tests

Co-authored-by: gitstart-twenty <twenty@gitstart.com>
Co-authored-by: Mael FOSSO <fosso.mael.elvis@gmail.com>

* Fix more tests

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: gitstart-twenty <twenty@gitstart.com>
Co-authored-by: Mael FOSSO <fosso.mael.elvis@gmail.com>

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Mael FOSSO <fosso.mael.elvis@gmail.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>

front/src/__stories__/App.stories.tsx

@@ -5,6 +5,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { ClientConfigProvider } from '@/client-config/components/ClientConfigProvider';
 import { UserProvider } from '@/users/components/UserProvider';
 import { App } from '~/App';
+import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
@@ -12,6 +13,7 @@ const meta: Meta<typeof App> = {
   title: 'App/App',
   component: App,
   decorators: [
+    SnackBarDecorator,
     (Story) => (
       <ClientConfigProvider>
         <UserProvider>

front/src/modules/settings/developers/components/__stories__/ApiKeyInput.stories.tsx

@@ -2,11 +2,12 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { ApiKeyInput } from '@/settings/developers/components/ApiKeyInput';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 
 const meta: Meta<typeof ApiKeyInput> = {
   title: 'Pages/Settings/Developers/ApiKeys/ApiKeyInput',
   component: ApiKeyInput,
-  decorators: [ComponentDecorator],
+  decorators: [ComponentDecorator, SnackBarDecorator],
   args: {
     apiKey:
       'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ0d2VudHktN2VkOWQyMTItMWMyNS00ZDAyLWJmMjUtNmFlY2NmN2VhNDE5IiwiaWF0IjoxNjk4MTQyODgyLCJleHAiOjE2OTk0MDE1OTksImp0aSI6ImMyMmFiNjQxLTVhOGYtNGQwMC1iMDkzLTk3MzUwYTM2YzZkOSJ9.JIe2TX5IXrdNl3n-kRFp3jyfNUE7unzXZLAzm2Gxl98',

front/src/modules/settings/profile/components/NameFields.tsx

@@ -34,10 +34,10 @@ export const NameFields = ({
   );
 
   const [firstName, setFirstName] = useState(
-    currentWorkspaceMember?.name.firstName ?? '',
+    currentWorkspaceMember?.name?.firstName ?? '',
   );
   const [lastName, setLastName] = useState(
-    currentWorkspaceMember?.name.lastName ?? '',
+    currentWorkspaceMember?.name?.lastName ?? '',
   );
 
   const { updateOneObject, objectNotFoundInMetadata } =
@@ -91,8 +91,8 @@ export const NameFields = ({
     }
 
     if (
-      currentWorkspaceMember.name.firstName !== firstName ||
+      currentWorkspaceMember.name?.firstName !== firstName ||
-      currentWorkspaceMember.name.lastName !== lastName
+      currentWorkspaceMember.name?.lastName !== lastName
     ) {
       debouncedUpdate();
     }

front/src/pages/auth/CreateProfile.tsx

@@ -76,8 +76,8 @@ export const CreateProfile = () => {
   } = useForm<Form>({
     mode: 'onChange',
     defaultValues: {
-      firstName: currentWorkspaceMember?.name.firstName ?? '',
+      firstName: currentWorkspaceMember?.name?.firstName ?? '',
-      lastName: currentWorkspaceMember?.name.lastName ?? '',
+      lastName: currentWorkspaceMember?.name?.lastName ?? '',
     },
     resolver: zodResolver(validationSchema),
   });

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

@@ -3,13 +3,19 @@ import { within } from '@storybook/testing-library';
 
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 import { PageDecoratorArgs } from '~/testing/decorators/PageDecorator';
+import { RelationPickerDecorator } from '~/testing/decorators/RelationPickerDecorator';
+import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 import { NotFound } from '../NotFound';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/NotFound/Default',
   component: NotFound,
-  decorators: [ComponentWithRouterDecorator],
+  decorators: [
+    ComponentWithRouterDecorator,
+    SnackBarDecorator,
+    RelationPickerDecorator,
+  ],
   args: {
     routePath: 'toto-not-found',
   },

front/src/pages/tasks/TasksEffect.tsx

@@ -22,9 +22,9 @@ export const TasksEffect = () => {
         value: currentWorkspaceMember.id,
         operand: ViewFilterOperand.Is,
         displayValue:
-          currentWorkspaceMember.name.firstName +
+          currentWorkspaceMember.name?.firstName +
           ' ' +
-          currentWorkspaceMember.name.lastName,
+          currentWorkspaceMember.name?.lastName,
         displayAvatarUrl: currentWorkspaceMember.avatarUrl ?? undefined,
         definition: tasksFilterDefinitions[0],
       });

front/src/testing/decorators/PageDecorator.tsx

@@ -1,7 +1,10 @@
 import { HelmetProvider } from 'react-helmet-async';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { Decorator } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
 
+import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
+import { RelationPickerScope } from '@/ui/input/components/internal/relation-picker/scopes/RelationPickerScope';
 import { ClientConfigProvider } from '~/modules/client-config/components/ClientConfigProvider';
 import { DefaultLayout } from '~/modules/ui/layout/page/DefaultLayout';
 import { UserProvider } from '~/modules/users/components/UserProvider';
@@ -30,21 +33,27 @@ export const PageDecorator: Decorator<{
   routePath: string;
   routeParams: RouteParams;
 }> = (Story, { args }) => (
-  <UserProvider>
+  <RecoilRoot>
-    <ClientConfigProvider>
+    <UserProvider>
-      <MemoryRouter
+      <ClientConfigProvider>
-        initialEntries={[computeLocation(args.routePath, args.routeParams)]}
+        <MemoryRouter
-      >
+          initialEntries={[computeLocation(args.routePath, args.routeParams)]}
-        <FullHeightStorybookLayout>
+        >
-          <HelmetProvider>
+          <FullHeightStorybookLayout>
-            <DefaultLayout>
+            <HelmetProvider>
-              <Routes>
+              <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
-                <Route path={args.routePath} element={<Story />} />
+                <RelationPickerScope relationPickerScopeId="relation-picker">
-              </Routes>
+                  <DefaultLayout>
-            </DefaultLayout>
+                    <Routes>
-          </HelmetProvider>
+                      <Route path={args.routePath} element={<Story />} />
-        </FullHeightStorybookLayout>
+                    </Routes>
-      </MemoryRouter>
+                  </DefaultLayout>
-    </ClientConfigProvider>
+                </RelationPickerScope>
-  </UserProvider>
+              </SnackBarProviderScope>
+            </HelmetProvider>
+          </FullHeightStorybookLayout>
+        </MemoryRouter>
+      </ClientConfigProvider>
+    </UserProvider>
+  </RecoilRoot>
 );

front/src/testing/decorators/RelationPickerDecorator.tsx

@@ -0,0 +1,9 @@
+import { Decorator } from '@storybook/react';
+
+import { RelationPickerScope } from '@/ui/input/components/internal/relation-picker/scopes/RelationPickerScope';
+
+export const RelationPickerDecorator: Decorator = (Story) => (
+  <RelationPickerScope relationPickerScopeId="relation-picker">
+    <Story />
+  </RelationPickerScope>
+);

front/src/testing/decorators/SnackBarDecorator.tsx

@@ -0,0 +1,9 @@
+import { Decorator } from '@storybook/react';
+
+import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
+
+export const SnackBarDecorator: Decorator = (Story) => (
+  <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
+    <Story />
+  </SnackBarProviderScope>
+);