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,27 +49,26 @@ export const AttachmentDropdown = ({
       clickableComponent={
         <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
       }
+      dropdownMenuWidth={160}
       dropdownComponents={
-        <DropdownMenu width="160px">
-          <DropdownMenuItemsContainer>
-            <MenuItem
-              text="Download"
-              LeftIcon={IconDownload}
-              onClick={handleDownload}
-            />
-            <MenuItem
-              text="Rename"
-              LeftIcon={IconPencil}
-              onClick={handleRename}
-            />
-            <MenuItem
-              text="Delete"
-              accent="danger"
-              LeftIcon={IconTrash}
-              onClick={handleDelete}
-            />
-          </DropdownMenuItemsContainer>
-        </DropdownMenu>
+        <DropdownMenuItemsContainer>
+          <MenuItem
+            text="Download"
+            LeftIcon={IconDownload}
+            onClick={handleDownload}
+          />
+          <MenuItem
+            text="Rename"
+            LeftIcon={IconPencil}
+            onClick={handleRename}
+          />
+          <MenuItem
+            text="Delete"
+            accent="danger"
+            LeftIcon={IconTrash}
+            onClick={handleDelete}
+          />
+        </DropdownMenuItemsContainer>
       }
       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,46 +45,45 @@ export const SettingsAccountsRowDropdownMenu = ({
       clickableComponent={
         <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
       }
+      dropdownMenuWidth={160}
       dropdownComponents={
-        <DropdownMenu>
-          <DropdownMenuItemsContainer>
+        <DropdownMenuItemsContainer>
+          <MenuItem
+            LeftIcon={IconMail}
+            text="Emails settings"
+            onClick={() => {
+              navigate(`/settings/accounts/emails`);
+              closeDropdown();
+            }}
+          />
+          <MenuItem
+            LeftIcon={IconCalendarEvent}
+            text="Calendar settings"
+            onClick={() => {
+              navigate(`/settings/accounts/calendars`);
+              closeDropdown();
+            }}
+          />
+          {account.authFailedAt && (
             <MenuItem
-              LeftIcon={IconMail}
-              text="Emails settings"
+              LeftIcon={IconRefresh}
+              text="Reconnect"
               onClick={() => {
-                navigate(`/settings/accounts/emails`);
+                triggerApisOAuth(account.provider);
                 closeDropdown();
               }}
             />
-            <MenuItem
-              LeftIcon={IconCalendarEvent}
-              text="Calendar settings"
-              onClick={() => {
-                navigate(`/settings/accounts/calendars`);
-                closeDropdown();
-              }}
-            />
-            {account.authFailedAt && (
-              <MenuItem
-                LeftIcon={IconRefresh}
-                text="Reconnect"
-                onClick={() => {
-                  triggerApisOAuth(account.provider);
-                  closeDropdown();
-                }}
-              />
-            )}
-            <MenuItem
-              accent="danger"
-              LeftIcon={IconTrash}
-              text="Remove account"
-              onClick={() => {
-                destroyOneRecord(account.id);
-                closeDropdown();
-              }}
-            />
-          </DropdownMenuItemsContainer>
-        </DropdownMenu>
+          )}
+          <MenuItem
+            accent="danger"
+            LeftIcon={IconTrash}
+            text="Remove account"
+            onClick={() => {
+              destroyOneRecord(account.id);
+              closeDropdown();
+            }}
+          />
+        </DropdownMenuItemsContainer>
       }
     />
   );

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,31 +54,34 @@ 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>
+        <DropdownMenuItemsContainer>
+          <MenuItem
+            text={isCustomField ? 'Edit' : 'View'}
+            LeftIcon={isCustomField ? IconPencil : IconEye}
+            onClick={handleEdit}
+          />
+          <MenuItem
+            text="Activate"
+            LeftIcon={IconArchiveOff}
+            onClick={handleActivate}
+          />
+          {isDeletable && (
             <MenuItem
-              text={isCustomField ? 'Edit' : 'View'}
-              LeftIcon={isCustomField ? IconPencil : IconEye}
-              onClick={handleEdit}
+              text="Delete"
+              accent="danger"
+              LeftIcon={IconTrash}
+              onClick={handleDelete}
             />
-            <MenuItem
-              text="Activate"
-              LeftIcon={IconArchiveOff}
-              onClick={handleActivate}
-            />
-            {isDeletable && (
-              <MenuItem
-                text="Delete"
-                accent="danger"
-                LeftIcon={IconTrash}
-                onClick={handleDelete}
-              />
-            )}
-          </DropdownMenuItemsContainer>
-        </DropdownMenu>
+          )}
+        </DropdownMenuItemsContainer>
       }
       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,26 +41,29 @@ 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>
+        <DropdownMenuItemsContainer>
+          <MenuItem
+            text="Activate"
+            LeftIcon={IconArchiveOff}
+            onClick={handleActivate}
+          />
+          {isCustomObject && (
             <MenuItem
-              text="Activate"
-              LeftIcon={IconArchiveOff}
-              onClick={handleActivate}
+              text="Delete"
+              LeftIcon={IconTrash}
+              accent="danger"
+              onClick={handleDelete}
             />
-            {isCustomObject && (
-              <MenuItem
-                text="Delete"
-                LeftIcon={IconTrash}
-                accent="danger"
-                onClick={handleDelete}
-              />
-            )}
-          </DropdownMenuItemsContainer>
-        </DropdownMenu>
+          )}
+        </DropdownMenuItemsContainer>
       }
       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,29 +76,28 @@ export const SettingsSecuritySSORowDropdownMenu = ({
       clickableComponent={
         <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
       }
+      dropdownMenuWidth={160}
       dropdownComponents={
-        <DropdownMenu>
-          <DropdownMenuItemsContainer>
-            <MenuItem
-              accent="default"
-              LeftIcon={IconArchive}
-              text={SSOIdp.status === 'Active' ? 'Deactivate' : 'Activate'}
-              onClick={() => {
-                toggleSSOIdentityProviderStatus(SSOIdp.id);
-                closeDropdown();
-              }}
-            />
-            <MenuItem
-              accent="danger"
-              LeftIcon={IconTrash}
-              text="Delete"
-              onClick={() => {
-                handleDeleteSSOIdentityProvider(SSOIdp.id);
-                closeDropdown();
-              }}
-            />
-          </DropdownMenuItemsContainer>
-        </DropdownMenu>
+        <DropdownMenuItemsContainer>
+          <MenuItem
+            accent="default"
+            LeftIcon={IconArchive}
+            text={SSOIdp.status === 'Active' ? 'Deactivate' : 'Activate'}
+            onClick={() => {
+              toggleSSOIdentityProviderStatus(SSOIdp.id);
+              closeDropdown();
+            }}
+          />
+          <MenuItem
+            accent="danger"
+            LeftIcon={IconTrash}
+            text="Delete"
+            onClick={() => {
+              handleDeleteSSOIdentityProvider(SSOIdp.id);
+              closeDropdown();
+            }}
+          />
+        </DropdownMenuItemsContainer>
       }
     />
   );

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,21 +25,20 @@ 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"
-              LeftIcon={IconMessage}
-              onClick={handleTalkToUs}
-            />
-            <MenuItem
-              text="Documentation"
-              LeftIcon={IconHelpCircle}
-              onClick={handleUserGuide}
-            />
-          </DropdownMenuItemsContainer>
-        </DropdownMenu>
+        <DropdownMenuItemsContainer>
+          <MenuItem
+            text="Talk to us"
+            LeftIcon={IconMessage}
+            onClick={handleTalkToUs}
+          />
+          <MenuItem
+            text="Documentation"
+            LeftIcon={IconHelpCircle}
+            onClick={handleUserGuide}
+          />
+        </DropdownMenuItemsContainer>
       }
       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,22 +70,20 @@ const SearchVariablesDropdown = ({
         </StyledDropdownVariableButtonContainer>
       }
       dropdownComponents={
-        <DropdownMenu>
-          <DropdownMenuItemsContainer>
-            {selectedStep ? (
-              <SearchVariablesDropdownStepSubItem
-                step={selectedStep}
-                onSelect={handleSubItemSelect}
-                onBack={handleBack}
-              />
-            ) : (
-              <SearchVariablesDropdownStepItem
-                steps={availableVariablesInWorkflowStep}
-                onSelect={handleStepSelect}
-              />
-            )}
-          </DropdownMenuItemsContainer>
-        </DropdownMenu>
+        <DropdownMenuItemsContainer>
+          {selectedStep ? (
+            <SearchVariablesDropdownStepSubItem
+              step={selectedStep}
+              onSelect={handleSubItemSelect}
+              onBack={handleBack}
+            />
+          ) : (
+            <SearchVariablesDropdownStepItem
+              steps={availableVariablesInWorkflowStep}
+              onSelect={handleStepSelect}
+            />
+          )}
+        </DropdownMenuItemsContainer>
       }
       dropdownPlacement="bottom-end"
       dropdownOffset={{ x: 0, y: 4 }}