Fix storybook and chromatic tests and fix Block editor custom slash menu positioning (#11580)

Storybook / Chromatic fixes:
- fix linaria twenty-ui style loading (since twenty-ui prebuild
refactoring)
- update prefetch view mocks
- add ability to disable hotkeys initialization in storybook to avoid
race condition

Custom slash menu positioning fix

packages/twenty-front/.storybook/preview.tsx

@@ -8,6 +8,7 @@ import { RootDecorator } from '../src/testing/decorators/RootDecorator';
 import { mockedUserJWT } from '../src/testing/mock-data/jwt';
 
 import 'react-loading-skeleton/dist/skeleton.css';
+import 'twenty-ui/style.css';
 import { THEME_DARK, THEME_LIGHT, ThemeContextProvider } from 'twenty-ui/theme';
 
 initialize({

packages/twenty-front/src/modules/prefetch/components/PrefetchRunViewQueryEffect.tsx

@@ -10,9 +10,9 @@ import { prefetchViewsState } from '@/prefetch/states/prefetchViewsState';
 import { isPersistingViewFieldsState } from '@/views/states/isPersistingViewFieldsState';
 import { View } from '@/views/types/View';
 import { useIsWorkspaceActivationStatusEqualsTo } from '@/workspace/hooks/useIsWorkspaceActivationStatusEqualsTo';
-import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
-import { WorkspaceActivationStatus } from 'twenty-shared/workspace';
 import { isDefined } from 'twenty-shared/utils';
+import { WorkspaceActivationStatus } from 'twenty-shared/workspace';
+import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 export const PrefetchRunViewQueryEffect = () => {
   const currentUser = useRecoilValue(currentUserState);

packages/twenty-front/src/modules/workflow/workflow-steps/components/__stories__/WorkflowStepHeader.stories.tsx

@@ -1,9 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
-import { WorkflowStepHeader } from '../WorkflowStepHeader';
-import { ComponentDecorator } from 'twenty-ui/testing';
 import { IconPlus } from 'twenty-ui/display';
+import { ComponentDecorator } from 'twenty-ui/testing';
 import { THEME_LIGHT } from 'twenty-ui/theme';
+import { WorkflowStepHeader } from '../WorkflowStepHeader';
 
 const meta: Meta<typeof WorkflowStepHeader> = {
   title: 'Modules/Workflow/WorkflowStepHeader',
@@ -13,6 +13,9 @@ const meta: Meta<typeof WorkflowStepHeader> = {
   },
   argTypes: {},
   decorators: [ComponentDecorator],
+  parameters: {
+    disableHotkeyInitialization: true,
+  },
 };
 
 export default meta;
@@ -45,7 +48,6 @@ export const EditableTitle: Story = {
   },
   play: async ({ canvasElement, args }) => {
     const canvas = within(canvasElement);
-
     // First find the div with the text, then click it to activate the input
     const titleText = await canvas.findByText('Create Record');
     await userEvent.click(titleText);

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

@@ -20,6 +20,7 @@ import { ClientConfigProvider } from '~/modules/client-config/components/ClientC
 import { UserProvider } from '~/modules/users/components/UserProvider';
 import { mockedApolloClient } from '~/testing/mockedApolloClient';
 
+import { MainContextStoreProvider } from '@/context-store/components/MainContextStoreProvider';
 import { RecoilDebugObserverEffect } from '@/debug/components/RecoilDebugObserver';
 import { ObjectMetadataItemsLoadEffect } from '@/object-metadata/components/ObjectMetadataItemsLoadEffect';
 import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
@@ -118,6 +119,7 @@ const Providers = () => {
                       </HelmetProvider>
                     </FullHeightStorybookLayout>
                   </ObjectMetadataItemsProvider>
+                  <MainContextStoreProvider />
                 </ApolloMetadataClientMockedProvider>
               </UserProvider>
             </ClientConfigProvider>

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

@@ -7,13 +7,21 @@ import { ApolloMetadataClientMockedProvider } from '@/object-metadata/hooks/__mo
 import { InitializeHotkeyStorybookHookEffect } from '../InitializeHotkeyStorybookHook';
 import { mockedApolloClient } from '../mockedApolloClient';
 
-export const RootDecorator: Decorator = (Story) => (
+export const RootDecorator: Decorator = (Story, context) => {
-  <RecoilRoot>
+  const { parameters } = context;
-    <ApolloProvider client={mockedApolloClient}>
+
-      <ApolloMetadataClientMockedProvider>
+  const disableHotkeyInitialization = parameters.disableHotkeyInitialization;
-        <InitializeHotkeyStorybookHookEffect />
+
-        <Story />
+  return (
-      </ApolloMetadataClientMockedProvider>
+    <RecoilRoot>
-    </ApolloProvider>
+      <ApolloProvider client={mockedApolloClient}>
-  </RecoilRoot>
+        <ApolloMetadataClientMockedProvider>
-);
+          {!disableHotkeyInitialization && (
+            <InitializeHotkeyStorybookHookEffect />
+          )}
+          <Story />
+        </ApolloMetadataClientMockedProvider>
+      </ApolloProvider>
+    </RecoilRoot>
+  );
+};

packages/twenty-front/src/testing/graphqlMocks.ts

@@ -22,6 +22,7 @@ import { mockWorkspaceMembers } from '~/testing/mock-data/workspace-members';
 
 import { GET_PUBLIC_WORKSPACE_DATA_BY_DOMAIN } from '@/auth/graphql/queries/getPublicWorkspaceDataByDomain';
 import { GET_ROLES } from '@/settings/roles/graphql/queries/getRolesQuery';
+import { isDefined } from 'twenty-shared/utils';
 import { mockedStandardObjectMetadataQueryResult } from '~/testing/mock-data/generated/mock-metadata-query-result';
 import { getRolesMock } from '~/testing/mock-data/roles';
 import { mockedTasks } from '~/testing/mock-data/tasks';
@@ -236,11 +237,26 @@ export const graphqlMocks = {
             edges: mockedViewsData
               .filter(
                 (view) =>
-                  view?.objectMetadataId === objectMetadataId &&
+                  (isDefined(objectMetadataId)
-                  view?.type === viewType,
+                    ? view?.objectMetadataId === objectMetadataId
+                    : true) &&
+                  (isDefined(viewType) ? view?.type === viewType : true),
               )
               .map((view) => ({
-                node: view,
+                node: {
+                  ...view,
+                  viewFields: {
+                    edges: mockedViewFieldsData
+                      .filter((viewField) => viewField.viewId === view.id)
+                      .map((viewField) => ({
+                        node: viewField,
+                        cursor: null,
+                      })),
+                    totalCount: mockedViewFieldsData.filter(
+                      (viewField) => viewField.viewId === view.id,
+                    ).length,
+                  },
+                },
                 cursor: null,
               })),
             pageInfo: {
@@ -321,69 +337,6 @@ export const graphqlMocks = {
         },
       });
     }),
-    graphql.query('CombinedFindManyRecords', () => {
-      return HttpResponse.json({
-        data: {
-          favorites: {
-            edges: mockedFavoritesData.map((favorite) => ({
-              node: favorite,
-              cursor: null,
-            })),
-            totalCount: mockedFavoritesData.length,
-            pageInfo: {
-              hasNextPage: false,
-              hasPreviousPage: false,
-              startCursor: null,
-              endCursor: null,
-            },
-          },
-          favoriteFolders: {
-            edges: [],
-            pageInfo: {
-              hasNextPage: false,
-              hasPreviousPage: false,
-              startCursor: null,
-              endCursor: null,
-            },
-          },
-          views: {
-            edges: mockedViewsData.map((view) => ({
-              node: {
-                ...view,
-                viewFilters: {
-                  edges: [],
-                  totalCount: 0,
-                },
-                viewSorts: {
-                  edges: [],
-                  totalCount: 0,
-                },
-                viewFields: {
-                  edges: mockedViewFieldsData
-                    .filter((viewField) => viewField.viewId === view.id)
-                    .map((viewField) => ({
-                      node: viewField,
-                      cursor: null,
-                    })),
-                  totalCount: mockedViewFieldsData.filter(
-                    (viewField) => viewField.viewId === view.id,
-                  ).length,
-                },
-              },
-              cursor: null,
-            })),
-            pageInfo: {
-              hasNextPage: false,
-              hasPreviousPage: false,
-              startCursor: null,
-              endCursor: null,
-              totalCount: mockedViewsData.length,
-            },
-            totalCount: mockedViewsData.length,
-          },
-        },
-      });
-    }),
     graphql.query('FindManyCompanies', ({ variables }) => {
       const mockedData = variables.limit
         ? companiesMock.slice(0, variables.limit)