Load empty board if view type is kanban (#3605)

* Load empty board if view type is kanban

* Fix tests

* Revert

packages/twenty-front/src/modules/views/components/ViewBar.tsx

@@ -15,6 +15,7 @@ import { ViewScope } from '@/views/scopes/ViewScope';
 import { ViewField } from '@/views/types/ViewField';
 import { ViewFilter } from '@/views/types/ViewFilter';
 import { ViewSort } from '@/views/types/ViewSort';
+import { ViewType } from '@/views/types/ViewType';
 
 import { ViewsHotkeyScope } from '../types/ViewsHotkeyScope';
 
@@ -30,6 +31,7 @@ export type ViewBarProps = {
   onViewSortsChange?: (sorts: ViewSort[]) => void | Promise<void>;
   onViewFiltersChange?: (filters: ViewFilter[]) => void | Promise<void>;
   onViewFieldsChange?: (fields: ViewField[]) => void | Promise<void>;
+  onViewTypeChange?: (viewType: ViewType) => void | Promise<void>;
 };
 
 export const ViewBar = ({
@@ -40,12 +42,13 @@ export const ViewBar = ({
   onViewFieldsChange,
   onViewFiltersChange,
   onViewSortsChange,
+  onViewTypeChange,
 }: ViewBarProps) => {
   const { openDropdown: openOptionsDropdownButton } = useDropdown(
     optionsDropdownScopeId,
   );
   const { upsertViewSort, upsertViewFilter } = useViewBar({
-    viewBarId: viewBarId,
+    viewBarId,
   });
   const { objectNamePlural } = useParams();
 
@@ -58,6 +61,7 @@ export const ViewBar = ({
       onViewFieldsChange={onViewFieldsChange}
       onViewFiltersChange={onViewFiltersChange}
       onViewSortsChange={onViewSortsChange}
+      onViewTypeChange={onViewTypeChange}
     >
       <ViewBarEffect />
       <ViewBarFilterEffect

packages/twenty-front/src/modules/views/components/ViewBarEffect.tsx

@@ -22,15 +22,10 @@ export const ViewBarEffect = () => {
   const [searchParams] = useSearchParams();
   const currentViewIdFromUrl = searchParams.get('view');
 
-  const {
-    viewTypeState,
-    viewObjectMetadataIdState,
-    viewsState,
-    currentViewIdState,
-  } = useViewScopedStates();
+  const { viewObjectMetadataIdState, viewsState, currentViewIdState } =
+    useViewScopedStates();
 
   const [views, setViews] = useRecoilState(viewsState);
-  const viewType = useRecoilValue(viewTypeState);
   const viewObjectMetadataId = useRecoilValue(viewObjectMetadataIdState);
   const setCurrentViewId = useSetRecoilState(currentViewIdState);
 
@@ -38,7 +33,6 @@ export const ViewBarEffect = () => {
     skip: !viewObjectMetadataId,
     objectNameSingular: CoreObjectNameSingular.View,
     filter: {
-      type: { eq: viewType },
       objectMetadataId: { eq: viewObjectMetadataId },
     },
     useRecordsWithoutConnection: true,
@@ -80,10 +74,10 @@ export const ViewBarEffect = () => {
   ]);
 
   useEffect(() => {
-    if (!currentViewIdFromUrl) return;
+    if (!currentViewIdFromUrl || !newViews.length) return;
 
     loadView(currentViewIdFromUrl);
-  }, [currentViewIdFromUrl, loadView]);
+  }, [currentViewIdFromUrl, loadView, newViews]);
 
   return <></>;
 };

packages/twenty-front/src/modules/views/hooks/__tests__/useViewBar.test.tsx

@@ -22,8 +22,6 @@ import { ViewScope } from '@/views/scopes/ViewScope';
 import { entityCountInCurrentViewScopedState } from '@/views/states/entityCountInCurrentViewScopedState';
 import { viewEditModeScopedState } from '@/views/states/viewEditModeScopedState';
 import { viewObjectMetadataIdScopeState } from '@/views/states/viewObjectMetadataIdScopeState';
-import { viewTypeScopedState } from '@/views/states/viewTypeScopedState';
-import { ViewType } from '@/views/types/ViewType';
 
 jest.mock('@/object-metadata/hooks/useMapFieldMetadataToGraphQLQuery', () => {
   return {
@@ -225,25 +223,6 @@ describe('useViewBar', () => {
     expect(result.current.metadataId).toBe('newId');
   });
 
-  it('should update view type', async () => {
-    const { result } = renderHook(
-      () => ({
-        viewBar: useViewBar({ viewBarId }),
-        ViewType: useRecoilState(
-          getScopedStateDeprecated(viewTypeScopedState, viewBarId),
-        )[0],
-      }),
-      renderHookConfig,
-    );
-
-    expect(result.current.ViewType).toBe('table');
-    await act(async () => {
-      result.current.viewBar.setViewType(ViewType.Kanban);
-    });
-
-    expect(result.current.ViewType).toBe('kanban');
-  });
-
   it('should update count in current view', async () => {
     const { result } = renderHook(
       () => ({

packages/twenty-front/src/modules/views/hooks/internal/useViewScopedStates.ts

@@ -40,6 +40,7 @@ export const useViewScopedStates = (args?: { viewScopeId?: string }) => {
     onViewFieldsChangeState,
     onViewFiltersChangeState,
     onViewSortsChangeState,
+    onViewTypeChangeState,
     savedViewFieldsByKeySelector,
     savedViewFieldsState,
     savedViewFiltersByKeySelector,
@@ -72,6 +73,7 @@ export const useViewScopedStates = (args?: { viewScopeId?: string }) => {
     onViewFieldsChangeState,
     onViewFiltersChangeState,
     onViewSortsChangeState,
+    onViewTypeChangeState,
     savedViewFieldsByKeySelector,
     savedViewFieldsState,
     savedViewFiltersByKeySelector,

packages/twenty-front/src/modules/views/hooks/useViewBar.ts

@@ -43,7 +43,6 @@ export const useViewBar = (props?: UseViewProps) => {
     availableSortDefinitionsState,
     entityCountInCurrentViewState,
     viewObjectMetadataIdState,
-    viewTypeState,
   } = useViewScopedStates({
     viewScopeId: scopeId,
   });
@@ -79,7 +78,6 @@ export const useViewBar = (props?: UseViewProps) => {
 
   const setViewEditMode = useSetRecoilState(viewEditModeState);
   const setViewObjectMetadataId = useSetRecoilState(viewObjectMetadataIdState);
-  const setViewType = useSetRecoilState(viewTypeState);
 
   const [_, setSearchParams] = useSearchParams();
 
@@ -237,16 +235,18 @@ export const useViewBar = (props?: UseViewProps) => {
       (viewId: string) => {
         setCurrentViewId?.(viewId);
 
-        const { currentView } = getViewScopedStateValuesFromSnapshot({
-          snapshot,
-          viewScopeId: scopeId,
-          viewId,
-        });
+        const { currentView, onViewTypeChange } =
+          getViewScopedStateValuesFromSnapshot({
+            snapshot,
+            viewScopeId: scopeId,
+            viewId,
+          });
 
         if (!currentView) {
           return;
         }
 
+        onViewTypeChange?.(currentView.type);
         loadViewFields(currentView.viewFields, viewId);
         loadViewFilters(currentView.viewFilters, viewId);
         loadViewSorts(currentView.viewSorts, viewId);
@@ -418,7 +418,6 @@ export const useViewBar = (props?: UseViewProps) => {
 
     setViewEditMode,
     setViewObjectMetadataId,
-    setViewType,
     setEntityCountInCurrentView,
     setAvailableFieldDefinitions,
 

packages/twenty-front/src/modules/views/scopes/ViewScope.tsx

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 
 import { ViewFilter } from '@/views/types/ViewFilter';
 import { ViewSort } from '@/views/types/ViewSort';
+import { ViewType } from '@/views/types/ViewType';
 
 import { ViewField } from '../types/ViewField';
 
@@ -14,6 +15,7 @@ type ViewScopeProps = {
   onViewSortsChange?: (sorts: ViewSort[]) => void | Promise<void>;
   onViewFiltersChange?: (filters: ViewFilter[]) => void | Promise<void>;
   onViewFieldsChange?: (fields: ViewField[]) => void | Promise<void>;
+  onViewTypeChange?: (viewType: ViewType) => void | Promise<void>;
 };
 
 export const ViewScope = ({
@@ -22,6 +24,7 @@ export const ViewScope = ({
   onViewSortsChange,
   onViewFiltersChange,
   onViewFieldsChange,
+  onViewTypeChange,
 }: ViewScopeProps) => {
   return (
     <ViewScopeInternalContext.Provider
@@ -34,6 +37,7 @@ export const ViewScope = ({
         onViewSortsChange={onViewSortsChange}
         onViewFiltersChange={onViewFiltersChange}
         onViewFieldsChange={onViewFieldsChange}
+        onViewTypeChange={onViewTypeChange}
       />
       {children}
     </ViewScopeInternalContext.Provider>

packages/twenty-front/src/modules/views/scopes/init-effect/ViewScopeInitEffect.tsx

@@ -5,40 +5,48 @@ import { useViewScopedStates } from '@/views/hooks/internal/useViewScopedStates'
 import { ViewField } from '@/views/types/ViewField';
 import { ViewFilter } from '@/views/types/ViewFilter';
 import { ViewSort } from '@/views/types/ViewSort';
+import { ViewType } from '@/views/types/ViewType';
 
 type ViewScopeInitEffectProps = {
   viewScopeId: string;
   onViewSortsChange?: (sorts: ViewSort[]) => void | Promise<void>;
   onViewFiltersChange?: (filters: ViewFilter[]) => void | Promise<void>;
   onViewFieldsChange?: (fields: ViewField[]) => void | Promise<void>;
+  onViewTypeChange?: (viewType: ViewType) => void | Promise<void>;
 };
 
 export const ViewScopeInitEffect = ({
   onViewSortsChange,
   onViewFiltersChange,
   onViewFieldsChange,
+  onViewTypeChange,
 }: ViewScopeInitEffectProps) => {
   const {
     onViewFieldsChangeState,
     onViewFiltersChangeState,
     onViewSortsChangeState,
+    onViewTypeChangeState,
   } = useViewScopedStates();
 
   const setOnViewSortsChange = useSetRecoilState(onViewSortsChangeState);
   const setOnViewFiltersChange = useSetRecoilState(onViewFiltersChangeState);
   const setOnViewFieldsChange = useSetRecoilState(onViewFieldsChangeState);
+  const setOnViewTypeChange = useSetRecoilState(onViewTypeChangeState);
 
   useEffect(() => {
     setOnViewSortsChange(() => onViewSortsChange);
     setOnViewFiltersChange(() => onViewFiltersChange);
     setOnViewFieldsChange(() => onViewFieldsChange);
+    setOnViewTypeChange(() => onViewTypeChange);
   }, [
     onViewFieldsChange,
     onViewFiltersChange,
     onViewSortsChange,
+    onViewTypeChange,
     setOnViewFieldsChange,
     setOnViewFiltersChange,
     setOnViewSortsChange,
+    setOnViewTypeChange,
   ]);
 
   return <></>;

packages/twenty-front/src/modules/views/states/onViewTypeChangeScopedState.ts

@@ -0,0 +1,9 @@
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
+import { ViewType } from '@/views/types/ViewType';
+
+export const onViewTypeChangeScopedState = createStateScopeMap<
+  ((viewType: ViewType) => void | Promise<void>) | undefined
+>({
+  key: 'onViewTypeChangeScopedState',
+  defaultValue: undefined,
+});

packages/twenty-front/src/modules/views/types/GraphQLView.ts

@@ -1,10 +1,12 @@
 import { ViewField } from '@/views/types/ViewField';
 import { ViewFilter } from '@/views/types/ViewFilter';
 import { ViewSort } from '@/views/types/ViewSort';
+import { ViewType } from '@/views/types/ViewType';
 
 export type GraphQLView = {
   id: string;
   name: string;
+  type: ViewType;
   objectMetadataId: string;
   viewFields: ViewField[];
   viewFilters: ViewFilter[];

packages/twenty-front/src/modules/views/types/View.ts

@@ -1,5 +1,8 @@
+import { ViewType } from '@/views/types/ViewType';
+
 export type View = {
   id: string;
   name: string;
   objectMetadataId: string;
+  type: ViewType;
 };

packages/twenty-front/src/modules/views/utils/getViewScopedStateValuesFromSnapshot.ts

@@ -41,6 +41,7 @@ export const getViewScopedStateValuesFromSnapshot = ({
     onViewFieldsChangeState,
     onViewFiltersChangeState,
     onViewSortsChangeState,
+    onViewTypeChangeState,
     savedViewFieldsByKeySelector,
     savedViewFieldsState,
     savedViewFiltersByKeySelector,
@@ -85,6 +86,7 @@ export const getViewScopedStateValuesFromSnapshot = ({
     onViewFieldsChange: getSnapshotValue(snapshot, onViewFieldsChangeState),
     onViewFiltersChange: getSnapshotValue(snapshot, onViewFiltersChangeState),
     onViewSortsChange: getSnapshotValue(snapshot, onViewSortsChangeState),
+    onViewTypeChange: getSnapshotValue(snapshot, onViewTypeChangeState),
     savedViewFieldsByKey: getSnapshotValue(
       snapshot,
       savedViewFieldsByKeySelector,

packages/twenty-front/src/modules/views/utils/internal/getViewScopedStates.ts

@@ -3,6 +3,7 @@ import { getScopedSelectorDeprecated } from '@/ui/utilities/recoil-scope/utils/g
 import { getScopedStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedStateDeprecated';
 import { currentViewIdScopedState } from '@/views/states/currentViewIdScopedState';
 import { isPersistingViewScopedState } from '@/views/states/isPersistingViewScopedState';
+import { onViewTypeChangeScopedState } from '@/views/states/onViewTypeChangeScopedState';
 import { currentViewScopedSelector } from '@/views/states/selectors/currentViewScopedSelector';
 
 import { availableFieldDefinitionsScopedState } from '../../states/availableFieldDefinitionsScopedState';
@@ -164,6 +165,11 @@ export const getViewScopedStates = ({
     viewScopeId,
   );
 
+  const onViewTypeChangeState = getScopedStateDeprecated(
+    onViewTypeChangeScopedState,
+    viewScopeId,
+  );
+
   const currentViewIdState = getScopedStateDeprecated(
     currentViewIdScopedState,
     viewScopeId,
@@ -207,5 +213,6 @@ export const getViewScopedStates = ({
     onViewSortsChangeState,
     onViewFiltersChangeState,
     onViewFieldsChangeState,
+    onViewTypeChangeState,
   };
 };