Add calendar view type in picker (#14477)

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutContent.tsx

@@ -18,6 +18,7 @@ import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
 import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType';
 import { ViewType, viewTypeIconMapping } from '@/views/types/ViewType';
 import { useGetAvailableFieldsForKanban } from '@/views/view-picker/hooks/useGetAvailableFieldsForKanban';
+import { useFeatureFlagsMap } from '@/workspace/hooks/useFeatureFlagsMap';
 import { useLingui } from '@lingui/react/macro';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
@@ -31,6 +32,7 @@ import {
   OverflowingTextWithTooltip,
 } from 'twenty-ui/display';
 import { MenuItem, MenuItemSelect, MenuItemToggle } from 'twenty-ui/navigation';
+import { FeatureFlagKey } from '~/generated/graphql';
 
 export const ObjectOptionsDropdownLayoutContent = () => {
   const { t } = useLingui();
@@ -79,9 +81,14 @@ export const ObjectOptionsDropdownLayoutContent = () => {
   const isDefaultView = currentView?.key === 'INDEX';
   const nbsp = '\u00A0';
 
+  const featureFlags = useFeatureFlagsMap();
+  const hasCalendarViewEnabled =
+    featureFlags[FeatureFlagKey.IS_CALENDAR_VIEW_ENABLED];
+
   const selectableItemIdArray = [
     ViewType.Table,
     ...(isDefaultView ? [] : [ViewType.Kanban]),
+    ...(!isDefaultView && hasCalendarViewEnabled ? [ViewType.Calendar] : []),
     ViewOpenRecordInType.SIDE_PANEL,
     ...(currentView?.type === ViewType.Kanban ? ['Group', 'Compact view'] : []),
   ];
@@ -129,6 +136,24 @@ export const ObjectOptionsDropdownLayoutContent = () => {
                 }}
               />
             </SelectableListItem>
+            {hasCalendarViewEnabled && (
+              <SelectableListItem
+                itemId={ViewType.Calendar}
+                onEnter={() => {
+                  setAndPersistViewType(ViewType.Calendar);
+                }}
+              >
+                <MenuItemSelect
+                  LeftIcon={viewTypeIconMapping(ViewType.Calendar)}
+                  text={t`Calendar`}
+                  selected={currentView?.type === ViewType.Calendar}
+                  focused={selectedItemId === ViewType.Calendar}
+                  onClick={() => {
+                    setAndPersistViewType(ViewType.Calendar);
+                  }}
+                />
+              </SelectableListItem>
+            )}
             <SelectableListItem
               itemId={ViewType.Kanban}
               onEnter={() => {

packages/twenty-front/src/modules/object-record/object-options-dropdown/hooks/useSetViewTypeFromLayoutOptionsMenu.ts

@@ -17,6 +17,7 @@ import { useCallback } from 'react';
 import { useRecoilCallback, useSetRecoilState } from 'recoil';
 import { assertUnreachable, isDefined } from 'twenty-shared/utils';
 import { v4 } from 'uuid';
+import { ViewCalendarLayout } from '~/generated/graphql';
 
 export const useSetViewTypeFromLayoutOptionsMenu = () => {
   const { updateCurrentView } = useUpdateCurrentView();
@@ -129,7 +130,7 @@ export const useSetViewTypeFromLayoutOptionsMenu = () => {
             }
             return await updateCurrentView(updateCurrentViewParams);
           }
-          case ViewType.Table:
+          case ViewType.Table: {
             setRecordIndexViewType(viewType);
             set(coreViewsState, [
               ...existingCoreViews.filter(
@@ -146,6 +147,27 @@ export const useSetViewTypeFromLayoutOptionsMenu = () => {
                 viewTypeIconMapping(viewType).displayName;
             }
             return await updateCurrentView(updateCurrentViewParams);
+          }
+          case ViewType.Calendar: {
+            setRecordIndexViewType(viewType);
+            set(coreViewsState, [
+              ...existingCoreViews.filter(
+                (coreView) => coreView.id !== currentView.id,
+              ),
+              {
+                ...currentCoreView,
+                type: convertViewTypeToCore(viewType),
+                calendarLayout: ViewCalendarLayout.MONTH,
+              },
+            ]);
+
+            if (shouldChangeIcon(currentView.icon, currentView.type)) {
+              updateCurrentViewParams.icon =
+                viewTypeIconMapping(viewType).displayName;
+            }
+            updateCurrentViewParams.calendarLayout = ViewCalendarLayout.MONTH;
+            return await updateCurrentView(updateCurrentViewParams);
+          }
           default: {
             return assertUnreachable(viewType);
           }
@@ -177,6 +199,12 @@ export const useSetViewTypeFromLayoutOptionsMenu = () => {
     ) {
       return true;
     }
+    if (
+      oldViewType === ViewType.Calendar &&
+      oldIcon === viewTypeIconMapping(ViewType.Calendar).displayName
+    ) {
+      return true;
+    }
     return false;
   };