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/components/SettingsObjectFieldRelationForm.tsx

@@ -105,7 +105,7 @@ export const SettingsObjectFieldRelationForm = ({
       <StyledInputsContainer>
         <IconPicker
           disabled={disableFieldEdition}
-          dropdownScopeId="field-destination-icon-picker"
+          dropdownId="field-destination-icon-picker"
           selectedIconKey={values.field.icon || undefined}
           onChange={(value) =>
             onChange({

packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx

@@ -17,7 +17,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';
 import { MenuItemSelectColor } from '@/ui/navigation/menu-item/components/MenuItemSelectColor';
 import { mainColorNames } from '@/ui/theme/constants/colors';
@@ -63,16 +62,14 @@ export const SettingsObjectFieldSelectFormOptionRow = ({
 }: SettingsObjectFieldSelectFormOptionRowProps) => {
   const theme = useTheme();
 
-  const dropdownScopeIds = useMemo(() => {
+  const dropdownIds = useMemo(() => {
     const baseScopeId = `select-field-option-row-${v4()}`;
     return { color: `${baseScopeId}-color`, actions: `${baseScopeId}-actions` };
   }, []);
 
-  const { closeDropdown: closeColorDropdown } = useDropdown(
-    dropdownScopeIds.color,
-  );
+  const { closeDropdown: closeColorDropdown } = useDropdown(dropdownIds.color);
   const { closeDropdown: closeActionsDropdown } = useDropdown(
-    dropdownScopeIds.actions,
+    dropdownIds.actions,
   );
 
   return (
@@ -82,82 +79,80 @@ export const SettingsObjectFieldSelectFormOptionRow = ({
         stroke={theme.icon.stroke.sm}
         color={theme.font.color.extraLight}
       />
-      <DropdownScope dropdownScopeId={dropdownScopeIds.color}>
-        <Dropdown
-          dropdownPlacement="bottom-start"
-          dropdownHotkeyScope={{
-            scope: dropdownScopeIds.color,
-          }}
-          clickableComponent={<StyledColorSample colorName={option.color} />}
-          dropdownComponents={
-            <DropdownMenu>
-              <DropdownMenuItemsContainer>
-                {mainColorNames.map((colorName) => (
-                  <MenuItemSelectColor
-                    key={colorName}
-                    onClick={() => {
-                      onChange({ ...option, color: colorName });
-                      closeColorDropdown();
-                    }}
-                    color={colorName}
-                    selected={colorName === option.color}
-                  />
-                ))}
-              </DropdownMenuItemsContainer>
-            </DropdownMenu>
-          }
-        />
-      </DropdownScope>
+      <Dropdown
+        dropdownId={dropdownIds.color}
+        dropdownPlacement="bottom-start"
+        dropdownHotkeyScope={{
+          scope: dropdownIds.color,
+        }}
+        clickableComponent={<StyledColorSample colorName={option.color} />}
+        dropdownComponents={
+          <DropdownMenu>
+            <DropdownMenuItemsContainer>
+              {mainColorNames.map((colorName) => (
+                <MenuItemSelectColor
+                  key={colorName}
+                  onClick={() => {
+                    onChange({ ...option, color: colorName });
+                    closeColorDropdown();
+                  }}
+                  color={colorName}
+                  selected={colorName === option.color}
+                />
+              ))}
+            </DropdownMenuItemsContainer>
+          </DropdownMenu>
+        }
+      />
       <StyledOptionInput
         value={option.label}
         onChange={(label) => onChange({ ...option, label })}
         RightIcon={isDefault ? IconCheck : undefined}
       />
-      <DropdownScope dropdownScopeId={dropdownScopeIds.actions}>
-        <Dropdown
-          dropdownPlacement="right-start"
-          dropdownHotkeyScope={{
-            scope: dropdownScopeIds.actions,
-          }}
-          clickableComponent={<LightIconButton Icon={IconDotsVertical} />}
-          dropdownComponents={
-            <DropdownMenu>
-              <DropdownMenuItemsContainer>
-                {isDefault ? (
-                  <MenuItem
-                    LeftIcon={IconX}
-                    text="Remove as default"
-                    onClick={() => {
-                      onChange({ ...option, isDefault: false });
-                      closeActionsDropdown();
-                    }}
-                  />
-                ) : (
-                  <MenuItem
-                    LeftIcon={IconCheck}
-                    text="Set as default"
-                    onClick={() => {
-                      onChange({ ...option, isDefault: true });
-                      closeActionsDropdown();
-                    }}
-                  />
-                )}
-                {!!onRemove && (
-                  <MenuItem
-                    accent="danger"
-                    LeftIcon={IconTrash}
-                    text="Remove option"
-                    onClick={() => {
-                      onRemove();
-                      closeActionsDropdown();
-                    }}
-                  />
-                )}
-              </DropdownMenuItemsContainer>
-            </DropdownMenu>
-          }
-        />
-      </DropdownScope>
+      <Dropdown
+        dropdownId={dropdownIds.actions}
+        dropdownPlacement="right-start"
+        dropdownHotkeyScope={{
+          scope: dropdownIds.actions,
+        }}
+        clickableComponent={<LightIconButton Icon={IconDotsVertical} />}
+        dropdownComponents={
+          <DropdownMenu>
+            <DropdownMenuItemsContainer>
+              {isDefault ? (
+                <MenuItem
+                  LeftIcon={IconX}
+                  text="Remove as default"
+                  onClick={() => {
+                    onChange({ ...option, isDefault: false });
+                    closeActionsDropdown();
+                  }}
+                />
+              ) : (
+                <MenuItem
+                  LeftIcon={IconCheck}
+                  text="Set as default"
+                  onClick={() => {
+                    onChange({ ...option, isDefault: true });
+                    closeActionsDropdown();
+                  }}
+                />
+              )}
+              {!!onRemove && (
+                <MenuItem
+                  accent="danger"
+                  LeftIcon={IconTrash}
+                  text="Remove option"
+                  onClick={() => {
+                    onRemove();
+                    closeActionsDropdown();
+                  }}
+                />
+              )}
+            </DropdownMenuItemsContainer>
+          </DropdownMenu>
+        }
+      />
     </StyledRow>
   );
 };

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,
+      }}
+    />
   );
 };

packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.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 SettingsObjectDisabledMenuDropDownProps = {
@@ -20,9 +19,9 @@ export const SettingsObjectDisabledMenuDropDown = ({
   onErase,
   isCustomObject,
 }: SettingsObjectDisabledMenuDropDownProps) => {
-  const dropdownScopeId = `${scopeKey}-settings-object-disabled-menu-dropdown`;
+  const dropdownId = `${scopeKey}-settings-object-disabled-menu-dropdown`;
 
-  const { closeDropdown } = useDropdown(dropdownScopeId);
+  const { closeDropdown } = useDropdown(dropdownId);
 
   const handleActivate = () => {
     onActivate();
@@ -35,34 +34,33 @@ export const SettingsObjectDisabledMenuDropDown = ({
   };
 
   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="Activate"
+              LeftIcon={IconArchiveOff}
+              onClick={handleActivate}
+            />
+            {isCustomObject && (
               <MenuItem
-                text="Activate"
-                LeftIcon={IconArchiveOff}
-                onClick={handleActivate}
+                text="Erase"
+                LeftIcon={IconTrash}
+                accent="danger"
+                onClick={handleErase}
               />
-              {isCustomObject && (
-                <MenuItem
-                  text="Erase"
-                  LeftIcon={IconTrash}
-                  accent="danger"
-                  onClick={handleErase}
-                />
-              )}
-            </DropdownMenuItemsContainer>
-          </DropdownMenu>
-        }
-        dropdownHotkeyScope={{
-          scope: dropdownScopeId,
-        }}
-      />
-    </DropdownScope>
+            )}
+          </DropdownMenuItemsContainer>
+        </DropdownMenu>
+      }
+      dropdownHotkeyScope={{
+        scope: dropdownId,
+      }}
+    />
   );
 };