From a28ffee80feba152fa44402c0e40a36aa7bdd8eb Mon Sep 17 00:00:00 2001
From: Jeet Desai <52026385+jeet1desai@users.noreply.github.com>
Date: Thu, 28 Mar 2024 15:22:42 +0530
Subject: [PATCH] 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
---
 .../components/ViewPickerCreateOrEditContent.tsx     |  9 ++++++++-
 .../view-picker/components/ViewPickerDropdown.tsx    | 12 +++++++++++-
 .../view-picker/hooks/useViewPickerPersistView.ts    |  4 ++--
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerCreateOrEditContent.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerCreateOrEditContent.tsx
index 0b9d39e86..b57dc8128 100644
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerCreateOrEditContent.tsx
+++ b/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>
diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx
index 59b347f1b..b46b94416 100644
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx
+++ b/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 ? (
diff --git a/packages/twenty-front/src/modules/views/view-picker/hooks/useViewPickerPersistView.ts b/packages/twenty-front/src/modules/views/view-picker/hooks/useViewPickerPersistView.ts
index 825e46c36..42ef7c2db 100644
--- a/packages/twenty-front/src/modules/views/view-picker/hooks/useViewPickerPersistView.ts
+++ b/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,