Fix: Save view by clicking outside popup while editing (#4678)

* fix: #4657 Save view by clicking outside popup while editing

* made changes on save view

* resolved comment

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

@@ -102,11 +102,18 @@ export const ViewPickerCreateOrEditContent = () => {
 
   const { availableFieldsForKanban } = useGetAvailableFieldsForKanban();
 
+  const handleClose = async () => {
+    if (viewPickerMode === 'edit') {
+      await handleUpdate();
+    }
+    setViewPickerMode('list');
+  };
+
   return (
     <>
       <DropdownMenuHeader
         StartIcon={viewPickerMode === 'create' ? IconX : IconChevronLeft}
-        onClick={() => setViewPickerMode('list')}
+        onClick={handleClose}
       >
         {viewPickerMode === 'create' ? 'Create view' : 'Edit view'}
       </DropdownMenuHeader>

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

@@ -15,6 +15,7 @@ import { ViewPickerCreateOrEditContentEffect } from '@/views/view-picker/compone
 import { ViewPickerListContent } from '@/views/view-picker/components/ViewPickerListContent';
 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 { useViewStates } from '../../hooks/internal/useViewStates';
 
@@ -49,6 +50,8 @@ export const ViewPickerDropdown = () => {
 
   const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView();
 
+  const { handleUpdate } = useViewPickerPersistView();
+
   const entityCountInCurrentView = useRecoilValue(
     entityCountInCurrentViewState,
   );
@@ -62,13 +65,20 @@ export const ViewPickerDropdown = () => {
   const { getIcon } = useIcons();
   const CurrentViewIcon = getIcon(currentViewWithCombinedFiltersAndSorts?.icon);
 
+  const handleClickOutside = async () => {
+    if (isViewsListDropdownOpen && viewPickerMode === 'edit') {
+      await handleUpdate();
+    }
+    setViewPickerMode('list');
+  };
+
   return (
     <Dropdown
       dropdownId={VIEW_PICKER_DROPDOWN_ID}
       dropdownHotkeyScope={{ scope: ViewsHotkeyScope.ListDropdown }}
       dropdownOffset={{ x: 0, y: 8 }}
       dropdownMenuWidth={200}
-      onClickOutside={() => setViewPickerMode('list')}
+      onClickOutside={handleClickOutside}
       clickableComponent={
         <StyledDropdownButtonContainer isUnfolded={isViewsListDropdownOpen}>
           {currentViewWithCombinedFiltersAndSorts && CurrentViewIcon ? (

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

@@ -61,6 +61,7 @@ export const useViewPickerPersistView = () => {
     ({ set, snapshot }) =>
       async () => {
         set(viewPickerIsPersistingState, true);
+        closeAndResetViewPicker();
         const viewPickerReferenceViewId = getSnapshotValue(
           snapshot,
           viewPickerReferenceViewIdState,
@@ -72,7 +73,6 @@ export const useViewPickerPersistView = () => {
           )[0].id,
         );
         await removeView(viewPickerReferenceViewId);
-        closeAndResetViewPicker();
       },
     [
       closeAndResetViewPicker,
@@ -88,6 +88,7 @@ export const useViewPickerPersistView = () => {
     ({ set, snapshot }) =>
       async () => {
         set(viewPickerIsPersistingState, true);
+        closeAndResetViewPicker();
 
         const viewPickerReferenceViewId = getSnapshotValue(
           snapshot,
@@ -108,7 +109,6 @@ export const useViewPickerPersistView = () => {
           icon: viewPickerSelectedIcon,
         });
         selectView(viewPickerReferenceViewId);
-        closeAndResetViewPicker();
       },
     [
       viewPickerIsPersistingState,