Migrate dropdown to scope map (#3338)

* Migrate dropdown to scope map

* Run lintr

* Move Dropdown Scope internally

* Fix

* Fix lint

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -68,6 +68,7 @@ export const EditableFilterDropdownButton = ({
 
   return (
     <Dropdown
+      dropdownId={viewFilter.fieldMetadataId}
       clickableComponent={
         <EditableFilterChip viewFilter={viewFilter} onRemove={handleRemove} />
       }

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

@@ -7,7 +7,6 @@ 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 { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { UpdateViewDropdownId } from '@/views/constants/UpdateViewDropdownId';
@@ -58,25 +57,24 @@ export const UpdateViewButtonGroup = ({
     <StyledContainer>
       <ButtonGroup size="small" accent="blue">
         <Button title="Update view" onClick={handleViewSubmit} />
-        <DropdownScope dropdownScopeId={UpdateViewDropdownId}>
-          <Dropdown
-            dropdownHotkeyScope={hotkeyScope}
-            clickableComponent={
-              <Button size="small" accent="blue" Icon={IconChevronDown} />
-            }
-            dropdownComponents={
-              <>
-                <DropdownMenuItemsContainer>
-                  <MenuItem
-                    onClick={handleCreateViewButtonClick}
-                    LeftIcon={IconPlus}
-                    text="Create view"
-                  />
-                </DropdownMenuItemsContainer>
-              </>
-            }
-          />
-        </DropdownScope>
+        <Dropdown
+          dropdownId={UpdateViewDropdownId}
+          dropdownHotkeyScope={hotkeyScope}
+          clickableComponent={
+            <Button size="small" accent="blue" Icon={IconChevronDown} />
+          }
+          dropdownComponents={
+            <>
+              <DropdownMenuItemsContainer>
+                <MenuItem
+                  onClick={handleCreateViewButtonClick}
+                  LeftIcon={IconPlus}
+                  text="Create view"
+                />
+              </DropdownMenuItemsContainer>
+            </>
+          }
+        />
       </ButtonGroup>
     </StyledContainer>
   );

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

@@ -5,7 +5,6 @@ import { useRecoilValue } from 'recoil';
 import { AddObjectFilterFromDetailsButton } from '@/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton';
 import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
 import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { EditableFilterDropdownButton } from '@/views/components/EditableFilterDropdownButton';
 import { EditableSortChip } from '@/views/components/EditableSortChip';
 import { ViewBarFilterEffect } from '@/views/components/ViewBarFilterEffect';
@@ -146,19 +145,17 @@ export const ViewBarDetails = ({
               <ObjectFilterDropdownScope
                 filterScopeId={viewFilter.fieldMetadataId}
               >
-                <DropdownScope dropdownScopeId={viewFilter.fieldMetadataId}>
-                  <ViewBarFilterEffect
-                    filterDropdownId={viewFilter.fieldMetadataId}
-                    onFilterSelect={upsertViewFilter}
-                  />
-                  <EditableFilterDropdownButton
-                    viewFilter={viewFilter}
-                    hotkeyScope={{
-                      scope: FiltersHotkeyScope.ObjectFilterDropdownButton,
-                    }}
-                    viewFilterDropdownId={viewFilter.fieldMetadataId}
-                  />
-                </DropdownScope>
+                <ViewBarFilterEffect
+                  filterDropdownId={viewFilter.fieldMetadataId}
+                  onFilterSelect={upsertViewFilter}
+                />
+                <EditableFilterDropdownButton
+                  viewFilter={viewFilter}
+                  hotkeyScope={{
+                    scope: FiltersHotkeyScope.ObjectFilterDropdownButton,
+                  }}
+                  viewFilterDropdownId={viewFilter.fieldMetadataId}
+                />
               </ObjectFilterDropdownScope>
             );
           })}

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

@@ -15,7 +15,6 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/StyledDropdownButtonContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
@@ -130,56 +129,55 @@ export const ViewsDropdownButton = ({
   };
 
   return (
-    <DropdownScope dropdownScopeId={ViewsDropdownId}>
-      <Dropdown
-        dropdownHotkeyScope={hotkeyScope}
-        clickableComponent={
-          <StyledDropdownButtonContainer isUnfolded={isViewsDropdownOpen}>
-            <StyledViewIcon size={theme.icon.size.md} />
-            <StyledViewName>{currentView?.name ?? 'All'}</StyledViewName>
-            <StyledDropdownLabelAdornments>
-              · {entityCountInCurrentView}{' '}
-              <IconChevronDown size={theme.icon.size.sm} />
-            </StyledDropdownLabelAdornments>
-          </StyledDropdownButtonContainer>
-        }
-        dropdownComponents={
-          <>
-            <DropdownMenuItemsContainer>
-              {views.map((view) => (
-                <MenuItem
-                  key={view.id}
-                  iconButtons={[
-                    {
-                      Icon: IconPencil,
-                      onClick: (event: MouseEvent<HTMLButtonElement>) =>
-                        handleEditViewButtonClick(event, view.id),
-                    },
-                    views.length > 1
-                      ? {
-                          Icon: IconTrash,
-                          onClick: (event: MouseEvent<HTMLButtonElement>) =>
-                            handleDeleteViewButtonClick(event, view.id),
-                        }
-                      : null,
-                  ].filter(assertNotNull)}
-                  onClick={() => handleViewSelect(view.id)}
-                  LeftIcon={IconList}
-                  text={view.name}
-                />
-              ))}
-            </DropdownMenuItemsContainer>
-            <DropdownMenuSeparator />
-            <StyledBoldDropdownMenuItemsContainer>
+    <Dropdown
+      dropdownId={ViewsDropdownId}
+      dropdownHotkeyScope={hotkeyScope}
+      clickableComponent={
+        <StyledDropdownButtonContainer isUnfolded={isViewsDropdownOpen}>
+          <StyledViewIcon size={theme.icon.size.md} />
+          <StyledViewName>{currentView?.name ?? 'All'}</StyledViewName>
+          <StyledDropdownLabelAdornments>
+            · {entityCountInCurrentView}{' '}
+            <IconChevronDown size={theme.icon.size.sm} />
+          </StyledDropdownLabelAdornments>
+        </StyledDropdownButtonContainer>
+      }
+      dropdownComponents={
+        <>
+          <DropdownMenuItemsContainer>
+            {views.map((view) => (
               <MenuItem
-                onClick={handleAddViewButtonClick}
-                LeftIcon={IconPlus}
-                text="Add view"
+                key={view.id}
+                iconButtons={[
+                  {
+                    Icon: IconPencil,
+                    onClick: (event: MouseEvent<HTMLButtonElement>) =>
+                      handleEditViewButtonClick(event, view.id),
+                  },
+                  views.length > 1
+                    ? {
+                        Icon: IconTrash,
+                        onClick: (event: MouseEvent<HTMLButtonElement>) =>
+                          handleDeleteViewButtonClick(event, view.id),
+                      }
+                    : null,
+                ].filter(assertNotNull)}
+                onClick={() => handleViewSelect(view.id)}
+                LeftIcon={IconList}
+                text={view.name}
               />
-            </StyledBoldDropdownMenuItemsContainer>
-          </>
-        }
-      />
-    </DropdownScope>
+            ))}
+          </DropdownMenuItemsContainer>
+          <DropdownMenuSeparator />
+          <StyledBoldDropdownMenuItemsContainer>
+            <MenuItem
+              onClick={handleAddViewButtonClick}
+              LeftIcon={IconPlus}
+              text="Add view"
+            />
+          </StyledBoldDropdownMenuItemsContainer>
+        </>
+      }
+    />
   );
 };