From fbd7e6511105ccca2d2d5f224636dec5e08ac1b7 Mon Sep 17 00:00:00 2001 From: Guillim Date: Wed, 8 Oct 2025 14:09:04 +0200 Subject: [PATCH] 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. --- ...RecordComponentInstanceContextsWrapper.tsx | 7 +++++- .../RecordCalendarMonth.stories.tsx | 23 +++++++++++++++++-- .../RelationOneToManyFieldInput.stories.tsx | 9 ++++++-- .../RecordIndexCalendarContainer.tsx | 11 ++++----- ...EmptyStateNoGroupNoRecordAtAll.stories.tsx | 2 ++ ...ptyStateNoRecordFoundForFilter.stories.tsx | 2 ++ .../RecordTableEmptyStateRemote.stories.tsx | 2 ++ ...ecordTableEmptyStateSoftDelete.stories.tsx | 5 ++-- .../decorators/ScrollWrapperDecorator.tsx | 10 ++++++++ 9 files changed, 58 insertions(+), 13 deletions(-) create mode 100644 packages/twenty-front/src/testing/decorators/ScrollWrapperDecorator.tsx diff --git a/packages/twenty-front/src/modules/object-record/components/RecordComponentInstanceContextsWrapper.tsx b/packages/twenty-front/src/modules/object-record/components/RecordComponentInstanceContextsWrapper.tsx index 8843190a0bf..52f23dcdd86 100644 --- a/packages/twenty-front/src/modules/object-record/components/RecordComponentInstanceContextsWrapper.tsx +++ b/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 = ({ - {children} + + {children} + diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/__stories__/RecordCalendarMonth.stories.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/__stories__/RecordCalendarMonth.stories.tsx index 0427d1b5dc9..e40635a1347 100644 --- a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/__stories__/RecordCalendarMonth.stories.tsx +++ b/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 = { }} > - + + + @@ -122,6 +140,7 @@ const meta: Meta = { ComponentDecorator, IconsProviderDecorator, I18nFrontDecorator, + RouterDecorator, ], }; diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/__stories__/RelationOneToManyFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/__stories__/RelationOneToManyFieldInput.stories.tsx index bc973a4925f..3cc58490252 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/__stories__/RelationOneToManyFieldInput.stories.tsx +++ b/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, diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexCalendarContainer.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexCalendarContainer.tsx index ab16176efd7..11d04771fff 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexCalendarContainer.tsx +++ b/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 ( - - + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateNoGroupNoRecordAtAll.stories.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateNoGroupNoRecordAtAll.stories.tsx index c1c308c1f8a..c97817ae93f 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateNoGroupNoRecordAtAll.stories.tsx +++ b/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', diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateNoRecordFoundForFilter.stories.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateNoRecordFoundForFilter.stories.tsx index f4c01e94ba6..d7c188d4e65 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateNoRecordFoundForFilter.stories.tsx +++ b/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', diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateRemote.stories.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateRemote.stories.tsx index da747b4a6d2..88adcbc1750 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateRemote.stories.tsx +++ b/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', diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateSoftDelete.stories.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateSoftDelete.stories.tsx index e5ba22b5afd..c67acabaac7 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateSoftDelete.stories.tsx +++ b/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', diff --git a/packages/twenty-front/src/testing/decorators/ScrollWrapperDecorator.tsx b/packages/twenty-front/src/testing/decorators/ScrollWrapperDecorator.tsx new file mode 100644 index 00000000000..d36beb84ac2 --- /dev/null +++ b/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) => ( + + + +);