Create empty page for calendar table (#14479)

<img width="1512" height="876" alt="image"
src="https://github.com/user-attachments/assets/e845fb3a-9977-4ab7-9eb7-4e60e499165b"
/>

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/__stories__/ObjectOptionsDropdownContent.stories.tsx

@@ -98,6 +98,7 @@ const createStory = (contentId: ObjectOptionsContentId | null): Story => ({
             objectNameSingular: 'company',
             objectMetadataItem: companyObjectMetadataItem,
             recordIndexId: instanceId,
+            viewBarInstanceId: instanceId,
             fieldDefinitionByFieldMetadataItemId,
             fieldMetadataItemByFieldMetadataItemId,
             labelIdentifierFieldMetadataItem,

packages/twenty-front/src/modules/object-record/record-calendar/contexts/RecordCalendarContext.ts

@@ -0,0 +1,15 @@
+import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { type RecordField } from '@/object-record/record-field/types/RecordField';
+import { type ObjectPermission } from '~/generated/graphql';
+import { createRequiredContext } from '~/utils/createRequiredContext';
+
+type RecordCalendarContextValue = {
+  viewBarInstanceId: string;
+  objectNameSingular: string;
+  objectMetadataItem: ObjectMetadataItem;
+  objectPermissions: ObjectPermission;
+  visibleRecordFields: RecordField[];
+};
+
+export const [RecordCalendarContextProvider, useRecordCalendarContextOrThrow] =
+  createRequiredContext<RecordCalendarContextValue>('RecordCalendarContext');

packages/twenty-front/src/modules/object-record/record-calendar/states/contexts/RecordCalendarComponentInstanceContext.ts

@@ -0,0 +1,4 @@
+import { createComponentInstanceContext } from '@/ui/utilities/state/component-state/utils/createComponentInstanceContext';
+
+export const RecordCalendarComponentInstanceContext =
+  createComponentInstanceContext();

packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/__stories__/perf/ChipFieldDisplay.perf.stories.tsx

@@ -48,6 +48,7 @@ const meta: Meta = {
               objectNameSingular: CoreObjectNameSingular.Company,
               objectMetadataItem: companyObjectMetadataItem,
               recordIndexId: instanceId,
+              viewBarInstanceId: instanceId,
               fieldDefinitionByFieldMetadataItemId,
               fieldMetadataItemByFieldMetadataItemId,
               labelIdentifierFieldMetadataItem,

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

@@ -0,0 +1,45 @@
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { useObjectPermissionsForObject } from '@/object-record/hooks/useObjectPermissionsForObject';
+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';
+
+type RecordIndexCalendarContainerProps = {
+  recordCalendarInstanceId: string;
+  viewBarInstanceId: string;
+};
+
+export const RecordIndexCalendarContainer = ({
+  viewBarInstanceId,
+  recordCalendarInstanceId,
+}: RecordIndexCalendarContainerProps) => {
+  const { objectNameSingular } = useRecordIndexContextOrThrow();
+
+  const { objectMetadataItem } = useObjectMetadataItem({
+    objectNameSingular,
+  });
+
+  const objectPermissions = useObjectPermissionsForObject(
+    objectMetadataItem.id,
+  );
+
+  return (
+    <RecordCalendarComponentInstanceContext.Provider
+      value={{
+        instanceId: recordCalendarInstanceId,
+      }}
+    >
+      <RecordCalendarContextProvider
+        value={{
+          viewBarInstanceId,
+          objectNameSingular,
+          visibleRecordFields: [],
+          objectMetadataItem,
+          objectPermissions,
+        }}
+      >
+        Calendar View
+      </RecordCalendarContextProvider>
+    </RecordCalendarComponentInstanceContext.Provider>
+  );
+};

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

@@ -13,6 +13,7 @@ import { InformationBannerWrapper } from '@/information-banner/components/Inform
 import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider';
 
+import { RecordIndexCalendarContainer } from '@/object-record/record-index/components/RecordIndexCalendarContainer';
 import { RecordIndexFiltersToContextStoreEffect } from '@/object-record/record-index/components/RecordIndexFiltersToContextStoreEffect';
 import { RecordIndexTableContainerEffect } from '@/object-record/record-index/components/RecordIndexTableContainerEffect';
 import { ViewBar } from '@/views/components/ViewBar';
@@ -66,10 +67,7 @@ export const RecordIndexContainer = () => {
         <RecordIndexFiltersToContextStoreEffect />
         {recordIndexViewType === ViewType.Table && (
           <>
-            <RecordIndexTableContainer
-              recordTableId={recordIndexId}
-              viewBarId={recordIndexId}
-            />
+            <RecordIndexTableContainer recordTableId={recordIndexId} />
             <RecordIndexTableContainerEffect />
           </>
         )}
@@ -87,6 +85,14 @@ export const RecordIndexContainer = () => {
             <RecordIndexBoardDataLoaderEffect recordBoardId={recordIndexId} />
           </StyledContainerWithPadding>
         )}
+        {recordIndexViewType === ViewType.Calendar && (
+          <StyledContainerWithPadding>
+            <RecordIndexCalendarContainer
+              recordCalendarInstanceId={recordIndexId}
+              viewBarInstanceId={recordIndexId}
+            />
+          </StyledContainerWithPadding>
+        )}
       </StyledContainer>
     </>
   );

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

@@ -73,6 +73,7 @@ export const RecordIndexContainerGater = () => {
         value={{
           objectPermissionsByObjectMetadataId,
           recordIndexId,
+          viewBarInstanceId: recordIndexId,
           objectNamePlural: objectMetadataItem.namePlural,
           objectNameSingular: objectMetadataItem.nameSingular,
           objectMetadataItem,

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

@@ -9,14 +9,13 @@ import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/ho
 
 type RecordIndexTableContainerProps = {
   recordTableId: string;
-  viewBarId: string;
 };
 
 export const RecordIndexTableContainer = ({
   recordTableId,
-  viewBarId,
 }: RecordIndexTableContainerProps) => {
-  const { objectNameSingular } = useRecordIndexContextOrThrow();
+  const { objectNameSingular, viewBarInstanceId } =
+    useRecordIndexContextOrThrow();
 
   const isRecordIndexRemoveSortingModalOpened = useRecoilComponentValue(
     isModalOpenedComponentState,
@@ -39,7 +38,7 @@ export const RecordIndexTableContainer = ({
       <RecordTableWithWrappers
         recordTableId={recordTableId}
         objectNameSingular={objectNameSingular}
-        viewBarId={viewBarId}
+        viewBarId={viewBarInstanceId}
         updateRecordMutation={updateEntity}
       />
       {isRecordIndexRemoveSortingModalOpened && (

packages/twenty-front/src/modules/object-record/record-index/contexts/RecordIndexContext.ts

@@ -17,6 +17,7 @@ export type RecordIndexContextValue = {
     ObjectPermissions & { objectMetadataId: string }
   >;
   recordIndexId: string;
+  viewBarInstanceId: string;
   recordFieldByFieldMetadataItemId: Record<string, RecordField>;
   labelIdentifierFieldMetadataItem: FieldMetadataItem | undefined;
   fieldMetadataItemByFieldMetadataItemId: Record<string, FieldMetadataItem>;

packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx

@@ -142,6 +142,7 @@ const meta: Meta = {
             // TODO: update performance mocks with new data, and merge with common mocks if possible
             objectMetadataItem: mockPerformance.objectMetadataItem as any,
             recordIndexId: 'recordIndexId',
+            viewBarInstanceId: 'recordIndexId',
             fieldDefinitionByFieldMetadataItemId,
             fieldMetadataItemByFieldMetadataItemId,
             labelIdentifierFieldMetadataItem,

packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelLabelIdentifierPreviewContextWrapper.tsx

@@ -34,6 +34,7 @@ export const SettingsDataModelLabelIdentifierPreviewContextWrapper = ({
           objectMetadataItem,
           objectPermissionsByObjectMetadataId: {},
           recordIndexId: '',
+          viewBarInstanceId: '',
           recordFieldByFieldMetadataItemId: {},
           labelIdentifierFieldMetadataItem,
           fieldMetadataItemByFieldMetadataItemId: {},

packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx

@@ -56,6 +56,7 @@ export const SignInBackgroundMockContainer = () => {
         value={{
           objectPermissionsByObjectMetadataId: {},
           recordIndexId,
+          viewBarInstanceId: recordIndexId,
           objectNamePlural,
           objectNameSingular,
           objectMetadataItem: objectMetadataItem ?? objectMetadataItems[0],

packages/twenty-front/src/modules/views/components/__stories__/ViewBarFilterDropdown.stories.tsx

@@ -93,6 +93,7 @@ const meta: Meta<typeof ViewBarFilterDropdown> = {
             objectNameSingular: CoreObjectNameSingular.Company,
             objectMetadataItem: companyObjectMetadataItem,
             recordIndexId: instanceId,
+            viewBarInstanceId: instanceId,
             labelIdentifierFieldMetadataItem,
             recordFieldByFieldMetadataItemId,
             fieldDefinitionByFieldMetadataItemId,

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowEditActionFindRecords.tsx

@@ -185,6 +185,7 @@ export const WorkflowEditActionFindRecords = ({
                 objectNameSingular: selectedObjectMetadataItem.nameSingular,
                 objectMetadataItem: selectedObjectMetadataItem,
                 recordIndexId: instanceId,
+                viewBarInstanceId: instanceId,
                 objectPermissionsByObjectMetadataId,
                 labelIdentifierFieldMetadataItem,
                 recordFieldByFieldMetadataItemId,

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

@@ -145,6 +145,7 @@ const InternalTableContextProviders = ({
         objectMetadataItem: objectMetadataItem,
         objectPermissionsByObjectMetadataId,
         recordIndexId: 'record-index',
+        viewBarInstanceId: 'viewBarInstanceId',
         labelIdentifierFieldMetadataItem,
         recordFieldByFieldMetadataItemId,
         fieldDefinitionByFieldMetadataItemId,

packages/twenty-front/src/testing/jest/JestRecordIndexContextProviderWrapper.tsx

@@ -28,6 +28,7 @@ export const JestRecordIndexContextProviderWrapper = ({
         objectNameSingular: objectMetadataItem.nameSingular,
         objectMetadataItem: objectMetadataItem,
         recordIndexId: 'recordIndexId',
+        viewBarInstanceId: 'recordIndexId',
         labelIdentifierFieldMetadataItem,
         recordFieldByFieldMetadataItemId,
         fieldDefinitionByFieldMetadataItemId,

packages/twenty-server/src/engine/workspace-manager/dev-seeder/core/utils/seed-feature-flags.util.ts

@@ -70,6 +70,11 @@ export const seedFeatureFlags = async (
         workspaceId: workspaceId,
         value: false,
       },
+      {
+        key: FeatureFlagKey.IS_CALENDAR_VIEW_ENABLED,
+        workspaceId: workspaceId,
+        value: true,
+      },
     ])
     .execute();
 };