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/components/ViewPickerCreateOrEditContent.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
 import { IconChevronLeft, IconLayoutKanban, IconTable, IconX } from 'twenty-ui';
 
@@ -57,6 +57,7 @@ export const ViewPickerCreateOrEditContent = () => {
     viewPickerIsPersistingState,
     viewPickerKanbanFieldMetadataIdState,
     viewPickerTypeState,
+    viewPickerIsDirtyState,
   } = useViewPickerStates();
 
   const [viewPickerInputName, setViewPickerInputName] = useRecoilState(
@@ -66,6 +67,7 @@ export const ViewPickerCreateOrEditContent = () => {
     viewPickerSelectedIconState,
   );
   const viewPickerIsPersisting = useRecoilValue(viewPickerIsPersistingState);
+  const setViewPickerIsDirty = useSetRecoilState(viewPickerIsDirtyState);
 
   const [viewPickerKanbanFieldMetadataId, setViewPickerKanbanFieldMetadataId] =
     useRecoilState(viewPickerKanbanFieldMetadataIdState);
@@ -80,16 +82,13 @@ export const ViewPickerCreateOrEditContent = () => {
   useScopedHotkeys(
     Key.Enter,
     async () => {
+      if (viewPickerIsPersisting) {
+        return;
+      }
       if (viewPickerMode === 'create') {
-        if (viewPickerIsPersisting) {
-          return;
-        }
         await handleCreate();
       }
       if (viewPickerMode === 'edit') {
-        if (viewPickerIsPersisting) {
-          return;
-        }
         await handleUpdate();
       }
     },
@@ -97,6 +96,7 @@ export const ViewPickerCreateOrEditContent = () => {
   );
 
   const onIconChange = ({ iconKey }: { iconKey: string }) => {
+    setViewPickerIsDirty(true);
     setViewPickerSelectedIcon(iconKey);
   };
 
@@ -128,7 +128,10 @@ export const ViewPickerCreateOrEditContent = () => {
           />
           <DropdownMenuInput
             value={viewPickerInputName}
-            onChange={(event) => setViewPickerInputName(event.target.value)}
+            onChange={(event) => {
+              setViewPickerIsDirty(true);
+              setViewPickerInputName(event.target.value);
+            }}
             autoFocus
           />
         </StyledIconAndNameContainer>
@@ -139,7 +142,10 @@ export const ViewPickerCreateOrEditContent = () => {
               label="View type"
               fullWidth
               value={viewPickerType}
-              onChange={(value) => setViewPickerType(value)}
+              onChange={(value) => {
+                setViewPickerIsDirty(true);
+                setViewPickerType(value);
+              }}
               options={[
                 { value: ViewType.Table, label: 'Table', Icon: IconTable },
                 {

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

@@ -14,6 +14,7 @@ export const ViewPickerCreateOrEditContentEffect = () => {
     viewPickerIsPersistingState,
     viewPickerKanbanFieldMetadataIdState,
     viewPickerTypeState,
+    viewPickerIsDirtyState,
   } = useViewPickerStates();
 
   const setViewPickerSelectedIcon = useSetRecoilState(
@@ -30,6 +31,8 @@ export const ViewPickerCreateOrEditContentEffect = () => {
     viewPickerReferenceViewIdState,
   );
 
+  const viewPickerIsDirty = useRecoilValue(viewPickerIsDirtyState);
+
   const viewPickerIsPersisting = useRecoilValue(viewPickerIsPersistingState);
 
   const { viewsOnCurrentObject } = useGetCurrentView();
@@ -40,7 +43,11 @@ export const ViewPickerCreateOrEditContentEffect = () => {
   const { availableFieldsForKanban } = useGetAvailableFieldsForKanban();
 
   useEffect(() => {
-    if (isDefined(referenceView) && !viewPickerIsPersisting) {
+    if (
+      isDefined(referenceView) &&
+      !viewPickerIsPersisting &&
+      !viewPickerIsDirty
+    ) {
       setViewPickerSelectedIcon(referenceView.icon);
       setViewPickerInputName(referenceView.name);
       setViewPickerKanbanFieldMetadataId(referenceView.kanbanFieldMetadataId);
@@ -53,6 +60,7 @@ export const ViewPickerCreateOrEditContentEffect = () => {
     setViewPickerSelectedIcon,
     setViewPickerType,
     viewPickerIsPersisting,
+    viewPickerIsDirty,
   ]);
 
   useEffect(() => {