Fix(view): Show Kanban View Creation (#5985)

# This PR
- Revise my previous work (PR #5969)
Because it would break the current logic and cause unexpected behavior.
(Issue #5979)
- Solve (Issue #5915) with another way

@lucasbordeau  What do you think about my current approach?
@JarWarren Please check it out—I'd love to get your feedback too!

---------

Co-authored-by: Achsan <achsanh@gmail.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/views/view-picker/components/ViewPickerCreateOrEditContentEffect.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { useGetAvailableFieldsForKanban } from '@/views/view-picker/hooks/useGetAvailableFieldsForKanban';
@@ -22,9 +22,8 @@ export const ViewPickerCreateOrEditContentEffect = () => {
   );
   const setViewPickerInputName = useSetRecoilState(viewPickerInputNameState);
 
-  const setViewPickerKanbanFieldMetadataId = useSetRecoilState(
+  const [viewPickerKanbanFieldMetadataId, setViewPickerKanbanFieldMetadataId] =
-    viewPickerKanbanFieldMetadataIdState,
+    useRecoilState(viewPickerKanbanFieldMetadataIdState);
-  );
   const setViewPickerType = useSetRecoilState(viewPickerTypeState);
 
   const viewPickerReferenceViewId = useRecoilValue(
@@ -50,13 +49,11 @@ export const ViewPickerCreateOrEditContentEffect = () => {
     ) {
       setViewPickerSelectedIcon(referenceView.icon);
       setViewPickerInputName(referenceView.name);
-      setViewPickerKanbanFieldMetadataId(referenceView.kanbanFieldMetadataId);
       setViewPickerType(referenceView.type);
     }
   }, [
     referenceView,
     setViewPickerInputName,
-    setViewPickerKanbanFieldMetadataId,
     setViewPickerSelectedIcon,
     setViewPickerType,
     viewPickerIsPersisting,
@@ -64,13 +61,22 @@ export const ViewPickerCreateOrEditContentEffect = () => {
   ]);
 
   useEffect(() => {
-    if (availableFieldsForKanban.length > 0 && !viewPickerIsDirty) {
+    if (
-      setViewPickerKanbanFieldMetadataId(availableFieldsForKanban[0].id);
+      isDefined(referenceView) &&
+      availableFieldsForKanban.length > 0 &&
+      viewPickerKanbanFieldMetadataId === ''
+    ) {
+      setViewPickerKanbanFieldMetadataId(
+        referenceView.kanbanFieldMetadataId !== ''
+          ? referenceView.kanbanFieldMetadataId
+          : availableFieldsForKanban[0].id,
+      );
     }
   }, [
+    referenceView,
     availableFieldsForKanban,
+    viewPickerKanbanFieldMetadataId,
     setViewPickerKanbanFieldMetadataId,
-    viewPickerIsDirty,
   ]);
 
   return <></>;

packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
 import {
   IconChevronDown,
   IconList,
@@ -19,7 +19,6 @@ import { ViewPickerListContent } from '@/views/view-picker/components/ViewPicker
 import { VIEW_PICKER_DROPDOWN_ID } from '@/views/view-picker/constants/ViewPickerDropdownId';
 import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode';
 import { useViewPickerPersistView } from '@/views/view-picker/hooks/useViewPickerPersistView';
-import { useViewPickerStates } from '@/views/view-picker/hooks/useViewPickerStates';
 import { isDefined } from '~/utils/isDefined';
 
 import { useViewStates } from '../../hooks/internal/useViewStates';
@@ -53,8 +52,6 @@ export const ViewPickerDropdown = () => {
 
   const { entityCountInCurrentViewState } = useViewStates();
 
-  const { viewPickerIsDirtyState } = useViewPickerStates();
-
   const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView();
 
   const { handleUpdate } = useViewPickerPersistView();
@@ -63,8 +60,6 @@ export const ViewPickerDropdown = () => {
     entityCountInCurrentViewState,
   );
 
-  const setViewPickerIsDirty = useSetRecoilState(viewPickerIsDirtyState);
-
   const { isDropdownOpen: isViewsListDropdownOpen } = useDropdown(
     VIEW_PICKER_DROPDOWN_ID,
   );
@@ -75,7 +70,6 @@ export const ViewPickerDropdown = () => {
   const CurrentViewIcon = getIcon(currentViewWithCombinedFiltersAndSorts?.icon);
 
   const handleClickOutside = async () => {
-    setViewPickerIsDirty(false);
     if (isViewsListDropdownOpen && viewPickerMode === 'edit') {
       await handleUpdate();
     }

packages/twenty-front/src/modules/views/view-picker/hooks/useGetAvailableFieldsForKanban.ts

@@ -5,16 +5,13 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 import { useViewStates } from '@/views/hooks/internal/useViewStates';
-import { useViewPickerStates } from '@/views/view-picker/hooks/useViewPickerStates';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 export const useGetAvailableFieldsForKanban = () => {
   const { viewObjectMetadataIdState } = useViewStates();
-  const { viewPickerIsDirtyState } = useViewPickerStates();
 
   const viewObjectMetadataId = useRecoilValue(viewObjectMetadataIdState);
   const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
-  const setViewPickerIsDirty = useSetRecoilState(viewPickerIsDirtyState);
   const setNavigationMemorizedUrl = useSetRecoilState(
     navigationMemorizedUrlState,
   );
@@ -32,15 +29,12 @@ export const useGetAvailableFieldsForKanban = () => {
   const navigate = useNavigate();
 
   const navigateToSelectSettings = useCallback(() => {
-    setViewPickerIsDirty(false);
-
     setNavigationMemorizedUrl(location.pathname + location.search);
 
     navigate(`/settings/objects/${objectMetadataItem?.namePlural}`);
   }, [
     navigate,
     objectMetadataItem?.namePlural,
-    setViewPickerIsDirty,
     setNavigationMemorizedUrl,
     location,
   ]);