Fix ViewPicker create mode: view type switcher (#4821)

In this PR, I'm fixing two things on the ViewPicker in Create mode:
- if the Dropdown has no max height, it should not be scrollable (which
is causing issue with inner dropdowns being cut by overflow: hidden
- if the user has changed the icon, the type or the name of the view,
consider the create form as isDirty and prevent its value to be
overriden by re-renders (cache updates for example)

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

@@ -15,6 +15,7 @@ export const useViewPickerPersistView = () => {
     viewPickerReferenceViewIdState,
     viewPickerKanbanFieldMetadataIdState,
     viewPickerTypeState,
+    viewPickerIsDirtyState,
   } = useViewPickerStates();
 
   const { createView, selectView, removeView, updateView } = useHandleViews();
@@ -35,6 +36,7 @@ export const useViewPickerPersistView = () => {
         );
         const id = v4();
         set(viewPickerIsPersistingState, true);
+        set(viewPickerIsDirtyState, false);
         await createView({
           id,
           name,
@@ -50,6 +52,7 @@ export const useViewPickerPersistView = () => {
       createView,
       selectView,
       viewPickerInputNameState,
+      viewPickerIsDirtyState,
       viewPickerIsPersistingState,
       viewPickerKanbanFieldMetadataIdState,
       viewPickerSelectedIconState,
@@ -62,6 +65,7 @@ export const useViewPickerPersistView = () => {
       async () => {
         set(viewPickerIsPersistingState, true);
         closeAndResetViewPicker();
+        set(viewPickerIsDirtyState, false);
         const viewPickerReferenceViewId = getSnapshotValue(
           snapshot,
           viewPickerReferenceViewIdState,
@@ -78,6 +82,7 @@ export const useViewPickerPersistView = () => {
       closeAndResetViewPicker,
       removeView,
       selectView,
+      viewPickerIsDirtyState,
       viewPickerIsPersistingState,
       viewPickerReferenceViewIdState,
       viewsOnCurrentObject,
@@ -88,6 +93,7 @@ export const useViewPickerPersistView = () => {
     ({ set, snapshot }) =>
       async () => {
         set(viewPickerIsPersistingState, true);
+        set(viewPickerIsDirtyState, false);
         closeAndResetViewPicker();
 
         const viewPickerReferenceViewId = getSnapshotValue(
@@ -112,12 +118,13 @@ export const useViewPickerPersistView = () => {
       },
     [
       viewPickerIsPersistingState,
+      viewPickerIsDirtyState,
+      closeAndResetViewPicker,
       viewPickerReferenceViewIdState,
       viewPickerInputNameState,
       viewPickerSelectedIconState,
       updateView,
       selectView,
-      closeAndResetViewPicker,
     ],
   );
 

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

@@ -1,6 +1,7 @@
 import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
 import { viewPickerInputNameComponentState } from '@/views/view-picker/states/viewPickerInputNameComponentState';
+import { viewPickerIsDirtyComponentState } from '@/views/view-picker/states/viewPickerIsDirtyComponentState';
 import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states/viewPickerIsPersistingComponentState';
 import { viewPickerKanbanFieldMetadataIdComponentState } from '@/views/view-picker/states/viewPickerKanbanFieldMetadataIdComponentState';
 import { viewPickerModeComponentState } from '@/views/view-picker/states/viewPickerModeComponentState';
@@ -46,5 +47,9 @@ export const useViewPickerStates = (viewComponentId?: string) => {
       viewPickerTypeComponentState,
       componentId,
     ),
+    viewPickerIsDirtyState: extractComponentState(
+      viewPickerIsDirtyComponentState,
+      componentId,
+    ),
   };
 };