fix: object activate dropdown (#8438)

Fixes: #8436 
Fixes: #8435 
& other duplicate ```DropdownMenu```

packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx

@@ -8,7 +8,6 @@ import {
 } from 'twenty-ui';
 
 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';
 
@@ -50,8 +49,8 @@ export const AttachmentDropdown = ({
       clickableComponent={
         <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
       }
+      dropdownMenuWidth={160}
       dropdownComponents={
-        <DropdownMenu width="160px">
         <DropdownMenuItemsContainer>
           <MenuItem
             text="Download"
@@ -70,7 +69,6 @@ export const AttachmentDropdown = ({
             onClick={handleDelete}
           />
         </DropdownMenuItemsContainer>
-        </DropdownMenu>
       }
       dropdownHotkeyScope={{
         scope: dropdownId,

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx

@@ -14,7 +14,6 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { useDestroyOneRecord } from '@/object-record/hooks/useDestroyOneRecord';
 import { useTriggerApisOAuth } from '@/settings/accounts/hooks/useTriggerApiOAuth';
 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';
 
@@ -46,8 +45,8 @@ export const SettingsAccountsRowDropdownMenu = ({
       clickableComponent={
         <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
       }
+      dropdownMenuWidth={160}
       dropdownComponents={
-        <DropdownMenu>
         <DropdownMenuItemsContainer>
           <MenuItem
             LeftIcon={IconMail}
@@ -85,7 +84,6 @@ export const SettingsAccountsRowDropdownMenu = ({
             }}
           />
         </DropdownMenuItemsContainer>
-        </DropdownMenu>
       }
     />
   );

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

@@ -9,7 +9,6 @@ import {
 } from 'twenty-ui';
 
 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 { FieldMetadataType } from '~/generated-metadata/graphql';
@@ -55,10 +54,14 @@ export const SettingsObjectFieldInactiveActionDropdown = ({
     <Dropdown
       dropdownId={dropdownId}
       clickableComponent={
-        <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+        <LightIconButton
+          aria-label="Inactive Field Options"
+          Icon={IconDotsVertical}
+          accent="tertiary"
+        />
       }
+      dropdownMenuWidth={160}
       dropdownComponents={
-        <DropdownMenu width="160px">
         <DropdownMenuItemsContainer>
           <MenuItem
             text={isCustomField ? 'Edit' : 'View'}
@@ -79,7 +82,6 @@ export const SettingsObjectFieldInactiveActionDropdown = ({
             />
           )}
         </DropdownMenuItemsContainer>
-        </DropdownMenu>
       }
       dropdownHotkeyScope={{
         scope: dropdownId,

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

@@ -7,7 +7,6 @@ import {
 } from 'twenty-ui';
 
 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';
 
@@ -42,10 +41,14 @@ export const SettingsObjectInactiveMenuDropDown = ({
     <Dropdown
       dropdownId={dropdownId}
       clickableComponent={
-        <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+        <LightIconButton
+          aria-label="Inactive Object Options"
+          Icon={IconDotsVertical}
+          accent="tertiary"
+        />
       }
+      dropdownMenuWidth={160}
       dropdownComponents={
-        <DropdownMenu width="160px">
         <DropdownMenuItemsContainer>
           <MenuItem
             text="Activate"
@@ -61,7 +64,6 @@ export const SettingsObjectInactiveMenuDropDown = ({
             />
           )}
         </DropdownMenuItemsContainer>
-        </DropdownMenu>
       }
       dropdownHotkeyScope={{
         scope: dropdownId,

packages/twenty-front/src/modules/settings/security/components/SettingsSecuritySSORowDropdownMenu.tsx

@@ -14,7 +14,6 @@ import { SSOIdentitiesProvidersState } from '@/settings/security/states/SSOIdent
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 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 { UnwrapRecoilValue } from 'recoil';
@@ -77,8 +76,8 @@ export const SettingsSecuritySSORowDropdownMenu = ({
       clickableComponent={
         <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
       }
+      dropdownMenuWidth={160}
       dropdownComponents={
-        <DropdownMenu>
         <DropdownMenuItemsContainer>
           <MenuItem
             accent="default"
@@ -99,7 +98,6 @@ export const SettingsSecuritySSORowDropdownMenu = ({
             }}
           />
         </DropdownMenuItemsContainer>
-        </DropdownMenu>
       }
     />
   );

packages/twenty-front/src/modules/support/components/SupportDropdown.tsx

@@ -1,6 +1,5 @@
 import { SupportButton } from '@/support/components/SupportButton';
 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 { IconHelpCircle, IconMessage, MenuItem } from 'twenty-ui';
@@ -26,8 +25,8 @@ export const SupportDropdown = () => {
       dropdownPlacement="top-start"
       dropdownOffset={{ x: 0, y: -28 }}
       clickableComponent={<SupportButton />}
+      dropdownMenuWidth={160}
       dropdownComponents={
-        <DropdownMenu width="160px">
         <DropdownMenuItemsContainer>
           <MenuItem
             text="Talk to us"
@@ -40,7 +39,6 @@ export const SupportDropdown = () => {
             onClick={handleUserGuide}
           />
         </DropdownMenuItemsContainer>
-        </DropdownMenu>
       }
       dropdownHotkeyScope={{
         scope: dropdownId,

packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdown.tsx

@@ -1,5 +1,4 @@
 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 { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/StyledDropdownButtonContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
@@ -71,7 +70,6 @@ const SearchVariablesDropdown = ({
         </StyledDropdownVariableButtonContainer>
       }
       dropdownComponents={
-        <DropdownMenu>
         <DropdownMenuItemsContainer>
           {selectedStep ? (
             <SearchVariablesDropdownStepSubItem
@@ -86,7 +84,6 @@ const SearchVariablesDropdown = ({
             />
           )}
         </DropdownMenuItemsContainer>
-        </DropdownMenu>
       }
       dropdownPlacement="bottom-end"
       dropdownOffset={{ x: 0, y: 4 }}