New view picker (#4610)

* Implement new view picker

* Complete feature

* Fixes according to review

packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx

@@ -7,14 +7,18 @@ import { Button } from '@/ui/input/button/components/Button';
 import { ButtonGroup } from '@/ui/input/button/components/ButtonGroup';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
-import { UPDATE_VIEW_DROPDOWN_ID } from '@/views/constants/UpdateViewDropdownId';
+import { UPDATE_VIEW_BUTTON_DROPDOWN_ID } from '@/views/constants/UpdateViewButtonDropdownId';
 import { useViewStates } from '@/views/hooks/internal/useViewStates';
+import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { useSaveCurrentViewFiltersAndSorts } from '@/views/hooks/useSaveCurrentViewFiltersAndSorts';
+import { VIEW_PICKER_DROPDOWN_ID } from '@/views/view-picker/constants/ViewPickerDropdownId';
+import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode';
+import { useViewPickerStates } from '@/views/view-picker/hooks/useViewPickerStates';
 
 const StyledContainer = styled.div`
-  background: ${({ theme }) => theme.color.blue};
   border-radius: ${({ theme }) => theme.border.radius.md};
   display: inline-flex;
   margin-right: ${({ theme }) => theme.spacing(2)};
@@ -23,25 +27,50 @@ const StyledContainer = styled.div`
 
 export type UpdateViewButtonGroupProps = {
   hotkeyScope: HotkeyScope;
-  onViewEditModeChange?: () => void;
 };
 
 export const UpdateViewButtonGroup = ({
   hotkeyScope,
-  onViewEditModeChange,
 }: UpdateViewButtonGroupProps) => {
-  const { canPersistViewSelector, viewEditModeState } = useViewStates();
+  const { canPersistViewSelector, currentViewIdState } = useViewStates();
   const { saveCurrentViewFilterAndSorts } = useSaveCurrentViewFiltersAndSorts();
 
-  const setViewEditMode = useSetRecoilState(viewEditModeState);
+  const { setViewPickerMode } = useViewPickerMode();
+  const { viewPickerReferenceViewIdState } = useViewPickerStates();
   const canPersistView = useRecoilValue(canPersistViewSelector());
 
-  const handleCreateViewButtonClick = useCallback(() => {
-    setViewEditMode('create');
-    onViewEditModeChange?.();
-  }, [setViewEditMode, onViewEditModeChange]);
+  const { closeDropdown: closeUpdateViewButtonDropdown } = useDropdown(
+    UPDATE_VIEW_BUTTON_DROPDOWN_ID,
+  );
+  const { openDropdown: openViewPickerDropdown } = useDropdown(
+    VIEW_PICKER_DROPDOWN_ID,
+  );
+  const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView();
 
-  const handleViewSubmit = async () => {
+  const currentViewId = useRecoilValue(currentViewIdState);
+
+  const setViewPickerReferenceViewId = useSetRecoilState(
+    viewPickerReferenceViewIdState,
+  );
+
+  const handleViewCreate = useCallback(() => {
+    if (!currentViewId) {
+      return;
+    }
+    openViewPickerDropdown();
+    setViewPickerReferenceViewId(currentViewId);
+    setViewPickerMode('create');
+
+    closeUpdateViewButtonDropdown();
+  }, [
+    closeUpdateViewButtonDropdown,
+    currentViewId,
+    openViewPickerDropdown,
+    setViewPickerMode,
+    setViewPickerReferenceViewId,
+  ]);
+
+  const handleViewUpdate = async () => {
     await saveCurrentViewFilterAndSorts();
   };
 
@@ -51,27 +80,42 @@ export const UpdateViewButtonGroup = ({
 
   return (
     <StyledContainer>
-      <ButtonGroup size="small" accent="blue">
-        <Button title="Update view" onClick={handleViewSubmit} />
-        <Dropdown
-          dropdownId={UPDATE_VIEW_DROPDOWN_ID}
-          dropdownHotkeyScope={hotkeyScope}
-          clickableComponent={
-            <Button size="small" accent="blue" Icon={IconChevronDown} />
-          }
-          dropdownComponents={
-            <>
-              <DropdownMenuItemsContainer>
-                <MenuItem
-                  onClick={handleCreateViewButtonClick}
-                  LeftIcon={IconPlus}
-                  text="Create view"
-                />
-              </DropdownMenuItemsContainer>
-            </>
-          }
+      {currentViewWithCombinedFiltersAndSorts?.key !== 'INDEX' ? (
+        <ButtonGroup size="small" accent="blue">
+          <Button title="Update view" onClick={handleViewUpdate} />
+          <Dropdown
+            dropdownId={UPDATE_VIEW_BUTTON_DROPDOWN_ID}
+            dropdownHotkeyScope={hotkeyScope}
+            clickableComponent={
+              <Button
+                size="small"
+                accent="blue"
+                Icon={IconChevronDown}
+                position="right"
+              />
+            }
+            dropdownComponents={
+              <>
+                <DropdownMenuItemsContainer>
+                  <MenuItem
+                    onClick={handleViewCreate}
+                    LeftIcon={IconPlus}
+                    text="Create view"
+                  />
+                </DropdownMenuItemsContainer>
+              </>
+            }
+          />
+        </ButtonGroup>
+      ) : (
+        <Button
+          title="Save as new view"
+          onClick={handleViewCreate}
+          accent="blue"
+          size="small"
+          variant="secondary"
         />
-      </ButtonGroup>
+      )}
     </StyledContainer>
   );
 };