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/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx

@@ -12,7 +12,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { Section } from '@/ui/layout/section/components/Section';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
@@ -44,7 +43,7 @@ const StyledTag = styled(Tag)`
   height: ${({ theme }) => theme.spacing(6)};
 `;
 
-const dropdownScopeId = 'settings-object-edit-about-menu-dropdown';
+const dropdownId = 'settings-object-edit-about-menu-dropdown';
 
 export const SettingsAboutSection = ({
   iconKey = '',
@@ -57,7 +56,7 @@ export const SettingsAboutSection = ({
   const { getIcon } = useIcons();
   const Icon = getIcon(iconKey);
 
-  const { closeDropdown } = useDropdown(dropdownScopeId);
+  const { closeDropdown } = useDropdown(dropdownId);
 
   const handleEdit = () => {
     onEdit();
@@ -83,32 +82,31 @@ export const SettingsAboutSection = ({
           ) : (
             <StyledTag color="blue" text="Standard" weight="medium" />
           )}
-          <DropdownScope dropdownScopeId={dropdownScopeId}>
-            <Dropdown
-              clickableComponent={
-                <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
-              }
-              dropdownComponents={
-                <DropdownMenu width="160px">
-                  <DropdownMenuItemsContainer>
-                    <MenuItem
-                      text="Edit"
-                      LeftIcon={IconPencil}
-                      onClick={handleEdit}
-                    />
-                    <MenuItem
-                      text="Disable"
-                      LeftIcon={IconArchive}
-                      onClick={handleDisable}
-                    />
-                  </DropdownMenuItemsContainer>
-                </DropdownMenu>
-              }
-              dropdownHotkeyScope={{
-                scope: dropdownScopeId,
-              }}
-            />
-          </DropdownScope>
+          <Dropdown
+            dropdownId={dropdownId}
+            clickableComponent={
+              <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+            }
+            dropdownComponents={
+              <DropdownMenu width="160px">
+                <DropdownMenuItemsContainer>
+                  <MenuItem
+                    text="Edit"
+                    LeftIcon={IconPencil}
+                    onClick={handleEdit}
+                  />
+                  <MenuItem
+                    text="Disable"
+                    LeftIcon={IconArchive}
+                    onClick={handleDisable}
+                  />
+                </DropdownMenuItemsContainer>
+              </DropdownMenu>
+            }
+            dropdownHotkeyScope={{
+              scope: dropdownId,
+            }}
+          />
         </StyledCardContent>
       </Card>
     </Section>

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx

@@ -9,7 +9,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 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';
 
 type SettingsObjectFieldActiveActionDropdownProps = {
@@ -25,9 +24,9 @@ export const SettingsObjectFieldActiveActionDropdown = ({
   onEdit,
   scopeKey,
 }: SettingsObjectFieldActiveActionDropdownProps) => {
-  const dropdownScopeId = `${scopeKey}-settings-field-active-action-dropdown`;
+  const dropdownId = `${scopeKey}-settings-field-active-action-dropdown`;
 
-  const { closeDropdown } = useDropdown(dropdownScopeId);
+  const { closeDropdown } = useDropdown(dropdownId);
 
   const handleEdit = () => {
     onEdit();
@@ -40,33 +39,32 @@ export const SettingsObjectFieldActiveActionDropdown = ({
   };
 
   return (
-    <DropdownScope dropdownScopeId={dropdownScopeId}>
-      <Dropdown
-        clickableComponent={
-          <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
-        }
-        dropdownComponents={
-          <DropdownMenu width="160px">
-            <DropdownMenuItemsContainer>
+    <Dropdown
+      dropdownId={dropdownId}
+      clickableComponent={
+        <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+      }
+      dropdownComponents={
+        <DropdownMenu width="160px">
+          <DropdownMenuItemsContainer>
+            <MenuItem
+              text={isCustomField ? 'Edit' : 'View'}
+              LeftIcon={isCustomField ? IconPencil : IconEye}
+              onClick={handleEdit}
+            />
+            {!!onDisable && (
               <MenuItem
-                text={isCustomField ? 'Edit' : 'View'}
-                LeftIcon={isCustomField ? IconPencil : IconEye}
-                onClick={handleEdit}
+                text="Disable"
+                LeftIcon={IconArchive}
+                onClick={handleDisable}
               />
-              {!!onDisable && (
-                <MenuItem
-                  text="Disable"
-                  LeftIcon={IconArchive}
-                  onClick={handleDisable}
-                />
-              )}
-            </DropdownMenuItemsContainer>
-          </DropdownMenu>
-        }
-        dropdownHotkeyScope={{
-          scope: dropdownScopeId,
-        }}
-      />
-    </DropdownScope>
+            )}
+          </DropdownMenuItemsContainer>
+        </DropdownMenu>
+      }
+      dropdownHotkeyScope={{
+        scope: dropdownId,
+      }}
+    />
   );
 };

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx

@@ -4,7 +4,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 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';
 
 type SettingsObjectFieldDisabledActionDropdownProps = {
@@ -18,9 +17,9 @@ export const SettingsObjectFieldDisabledActionDropdown = ({
   onActivate,
   scopeKey,
 }: SettingsObjectFieldDisabledActionDropdownProps) => {
-  const dropdownScopeId = `${scopeKey}-settings-field-disabled-action-dropdown`;
+  const dropdownId = `${scopeKey}-settings-field-disabled-action-dropdown`;
 
-  const { closeDropdown } = useDropdown(dropdownScopeId);
+  const { closeDropdown } = useDropdown(dropdownId);
 
   const handleActivate = () => {
     onActivate();
@@ -33,20 +32,20 @@ export const SettingsObjectFieldDisabledActionDropdown = ({
   // };
 
   return (
-    <DropdownScope dropdownScopeId={dropdownScopeId}>
-      <Dropdown
-        clickableComponent={
-          <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
-        }
-        dropdownComponents={
-          <DropdownMenu width="160px">
-            <DropdownMenuItemsContainer>
-              <MenuItem
-                text="Activate"
-                LeftIcon={IconArchiveOff}
-                onClick={handleActivate}
-              />
-              {/* {isCustomField && (
+    <Dropdown
+      dropdownId={dropdownId}
+      clickableComponent={
+        <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+      }
+      dropdownComponents={
+        <DropdownMenu width="160px">
+          <DropdownMenuItemsContainer>
+            <MenuItem
+              text="Activate"
+              LeftIcon={IconArchiveOff}
+              onClick={handleActivate}
+            />
+            {/* {isCustomField && (
                 <MenuItem
                   text="Erase"
                   accent="danger"
@@ -54,13 +53,12 @@ export const SettingsObjectFieldDisabledActionDropdown = ({
                   onClick={handleErase}
                 />
               )} */}
-            </DropdownMenuItemsContainer>
-          </DropdownMenu>
-        }
-        dropdownHotkeyScope={{
-          scope: dropdownScopeId,
-        }}
-      />
-    </DropdownScope>
+          </DropdownMenuItemsContainer>
+        </DropdownMenu>
+      }
+      dropdownHotkeyScope={{
+        scope: dropdownId,
+      }}
+    />
   );
 };