fixing storybook (#14964)

Storybook had  issues. This PR intends to solve them

Main things to care :
I had to change the way the provider was given to the Calendar view. Not
sure how it may impact the final component, so if someone with some
knowledge about it could take a look that would be great

TODO:
Only one remaining test to fix : prefetch loading. Couldn't find out how
to solve this issue. When you open the story you see that the companies
are not fetched.

packages/twenty-front/src/modules/object-record/components/RecordComponentInstanceContextsWrapper.tsx

@@ -1,3 +1,4 @@
+import { RecordCalendarComponentInstanceContext } from '@/object-record/record-calendar/states/contexts/RecordCalendarComponentInstanceContext';
 import { RecordFieldsComponentInstanceContext } from '@/object-record/record-field/states/context/RecordFieldsComponentInstanceContext';
 import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
@@ -25,7 +26,11 @@ export const RecordComponentInstanceContextsWrapper = ({
           <RecordFieldsComponentInstanceContext.Provider
             value={{ instanceId: componentInstanceId }}
           >
-            {children}
+            <RecordCalendarComponentInstanceContext.Provider
+              value={{ instanceId: componentInstanceId }}
+            >
+              {children}
+            </RecordCalendarComponentInstanceContext.Provider>
           </RecordFieldsComponentInstanceContext.Provider>
         </RecordSortsComponentInstanceContext.Provider>
       </RecordFiltersComponentInstanceContext.Provider>

packages/twenty-front/src/modules/object-record/record-calendar/month/components/__stories__/RecordCalendarMonth.stories.tsx

@@ -12,6 +12,7 @@ import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewCompon
 
 import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
 import { RecordComponentInstanceContextsWrapper } from '@/object-record/components/RecordComponentInstanceContextsWrapper';
+import { RecordCalendarContextProvider } from '@/object-record/record-calendar/contexts/RecordCalendarContext';
 import { RecordCalendarMonth } from '@/object-record/record-calendar/month/components/RecordCalendarMonth';
 import { currentRecordFieldsComponentState } from '@/object-record/record-field/states/currentRecordFieldsComponentState';
 import { type RecordField } from '@/object-record/record-field/types/RecordField';
@@ -19,7 +20,7 @@ import { useRecordIndexFieldMetadataDerivedStates } from '@/object-record/record
 import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId';
 import { coreViewsState } from '@/views/states/coreViewState';
 import { useSetRecoilState } from 'recoil';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
 import { ContextStoreDecorator } from '~/testing/decorators/ContextStoreDecorator';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
@@ -108,7 +109,24 @@ const meta: Meta<typeof RecordCalendarMonth> = {
                 }}
               >
                 <ViewComponentInstanceContext.Provider value={{ instanceId }}>
-                  <Story />
+                  <RecordCalendarContextProvider
+                    value={{
+                      viewBarInstanceId: instanceId,
+                      objectNameSingular: CoreObjectNameSingular.Company,
+                      visibleRecordFields: [],
+                      objectMetadataItem: companyObjectMetadataItem,
+                      objectPermissions: {
+                        objectMetadataId: companyObjectMetadataItem.id,
+                        canReadObjectRecords: true,
+                        canUpdateObjectRecords: true,
+                        canSoftDeleteObjectRecords: true,
+                        canDestroyObjectRecords: true,
+                        restrictedFields: {},
+                      },
+                    }}
+                  >
+                    <Story />
+                  </RecordCalendarContextProvider>
                 </ViewComponentInstanceContext.Provider>
               </RecordTableComponentInstanceContext.Provider>
             </ObjectFilterDropdownComponentInstanceContext.Provider>
@@ -122,6 +140,7 @@ const meta: Meta<typeof RecordCalendarMonth> = {
     ComponentDecorator,
     IconsProviderDecorator,
     I18nFrontDecorator,
+    RouterDecorator,
   ],
 };
 

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

@@ -22,6 +22,7 @@ import { recordStoreFamilySelector } from '@/object-record/record-store/states/s
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { FieldMetadataType } from 'twenty-shared/types';
 import { RelationType } from '~/generated-metadata/graphql';
+import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 
 const RelationWorkspaceSetterEffect = () => {
   const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
@@ -51,7 +52,7 @@ const RelationOneToManyFieldInputWithContext = () => {
         relationType: RelationType.ONE_TO_MANY,
         relationObjectMetadataNamePlural: 'companies',
         relationObjectMetadataNameSingular: CoreObjectNameSingular.Company,
-        objectMetadataNameSingular: 'company',
+        objectMetadataNameSingular: 'person',
         relationFieldMetadataId: '20202020-8c37-4163-ba06-1dada334ce3e',
       },
     }),
@@ -115,7 +116,11 @@ const meta: Meta = {
   title: 'UI/Data/Field/Input/RelationOneToManyFieldInput',
   component: RelationOneToManyFieldInputWithContext,
   args: {},
-  decorators: [ObjectMetadataItemsDecorator, SnackBarDecorator],
+  decorators: [
+    ObjectMetadataItemsDecorator,
+    SnackBarDecorator,
+    I18nFrontDecorator,
+  ],
   parameters: {
     clearMocks: true,
     msw: graphqlMocks,

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexCalendarContainer.tsx

@@ -1,9 +1,10 @@
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { RecordComponentInstanceContextsWrapper } from '@/object-record/components/RecordComponentInstanceContextsWrapper';
 import { useObjectPermissionsForObject } from '@/object-record/hooks/useObjectPermissionsForObject';
 import { RecordCalendar } from '@/object-record/record-calendar/components/RecordCalendar';
 import { RecordIndexCalendarDataLoaderEffect } from '@/object-record/record-calendar/components/RecordIndexCalendarDataLoaderEffect';
 import { RecordCalendarContextProvider } from '@/object-record/record-calendar/contexts/RecordCalendarContext';
-import { RecordCalendarComponentInstanceContext } from '@/object-record/record-calendar/states/contexts/RecordCalendarComponentInstanceContext';
+
 import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
 import { isDefined } from 'twenty-shared/utils';
@@ -37,10 +38,8 @@ export const RecordIndexCalendarContainer = ({
   }
 
   return (
-    <RecordCalendarComponentInstanceContext.Provider
-      value={{
-        instanceId: recordCalendarInstanceId,
-      }}
+    <RecordComponentInstanceContextsWrapper
+      componentInstanceId={recordCalendarInstanceId}
     >
       <RecordCalendarContextProvider
         value={{
@@ -54,6 +53,6 @@ export const RecordIndexCalendarContainer = ({
         <RecordCalendar />
         <RecordIndexCalendarDataLoaderEffect />
       </RecordCalendarContextProvider>
-    </RecordCalendarComponentInstanceContext.Provider>
+    </RecordComponentInstanceContextsWrapper>
   );
 };

packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateNoGroupNoRecordAtAll.stories.tsx

@@ -8,6 +8,7 @@ import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { RecordTableDecorator } from '~/testing/decorators/RecordTableDecorator';
+import { ScrollWrapperDecorator } from '~/testing/decorators/ScrollWrapperDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
@@ -32,6 +33,7 @@ const meta: Meta = {
     SnackBarDecorator,
     ObjectMetadataItemsDecorator,
     I18nFrontDecorator,
+    ScrollWrapperDecorator,
   ],
   parameters: {
     recordTableObjectNameSingular: 'person',

packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateNoRecordFoundForFilter.stories.tsx

@@ -1,4 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react';
+import { ScrollWrapperDecorator } from '~/testing/decorators/ScrollWrapperDecorator';
 
 import { RecordTableContextProvider } from '@/object-record/record-table/components/RecordTableContextProvider';
 import { RecordTableEmptyStateNoRecordFoundForFilter } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateNoRecordFoundForFilter';
@@ -32,6 +33,7 @@ const meta: Meta = {
     SnackBarDecorator,
     ObjectMetadataItemsDecorator,
     I18nFrontDecorator,
+    ScrollWrapperDecorator,
   ],
   parameters: {
     recordTableObjectNameSingular: 'person',

packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateRemote.stories.tsx

@@ -1,4 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react';
+import { ScrollWrapperDecorator } from '~/testing/decorators/ScrollWrapperDecorator';
 
 import { RecordTableContextProvider } from '@/object-record/record-table/components/RecordTableContextProvider';
 import { RecordTableEmptyStateRemote } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateRemote';
@@ -31,6 +32,7 @@ const meta: Meta = {
     SnackBarDecorator,
     ObjectMetadataItemsDecorator,
     I18nFrontDecorator,
+    ScrollWrapperDecorator,
   ],
   parameters: {
     recordTableObjectNameSingular: 'person',

packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateSoftDelete.stories.tsx

@@ -1,13 +1,13 @@
-import { type Meta, type StoryObj } from '@storybook/react';
-
 import { RecordTableContextProvider } from '@/object-record/record-table/components/RecordTableContextProvider';
 import { RecordTableEmptyStateSoftDelete } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateSoftDelete';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { ComponentDecorator } from 'twenty-ui/testing';
 import { ContextStoreDecorator } from '~/testing/decorators/ContextStoreDecorator';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { RecordTableDecorator } from '~/testing/decorators/RecordTableDecorator';
+import { ScrollWrapperDecorator } from '~/testing/decorators/ScrollWrapperDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
@@ -31,6 +31,7 @@ const meta: Meta = {
     SnackBarDecorator,
     ObjectMetadataItemsDecorator,
     I18nFrontDecorator,
+    ScrollWrapperDecorator,
   ],
   parameters: {
     recordTableObjectNameSingular: 'person',

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

@@ -0,0 +1,10 @@
+import { ScrollWrapperComponentInstanceContext } from '@/ui/utilities/scroll/states/contexts/ScrollWrapperComponentInstanceContext';
+import { type Decorator } from '@storybook/react';
+
+export const ScrollWrapperDecorator: Decorator = (Story) => (
+  <ScrollWrapperComponentInstanceContext.Provider
+    value={{ instanceId: 'scroll-wrapper' }}
+  >
+    <Story />
+  </ScrollWrapperComponentInstanceContext.Provider>
+);