fix: object activate dropdown (#8438)

Fixes: #8436 
Fixes: #8435 
& other duplicate ```DropdownMenu```
This commit is contained in:
Harsh Singh
2024-11-11 13:56:07 +05:30
committed by GitHub
parent 51d1305e27
commit 6d62dd9fd1
7 changed files with 143 additions and 150 deletions

View File

@@ -8,7 +8,6 @@ import {
} from 'twenty-ui'; } from 'twenty-ui';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; 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 { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
@@ -50,27 +49,26 @@ export const AttachmentDropdown = ({
clickableComponent={ clickableComponent={
<LightIconButton Icon={IconDotsVertical} accent="tertiary" /> <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
} }
dropdownMenuWidth={160}
dropdownComponents={ dropdownComponents={
<DropdownMenu width="160px"> <DropdownMenuItemsContainer>
<DropdownMenuItemsContainer> <MenuItem
<MenuItem text="Download"
text="Download" LeftIcon={IconDownload}
LeftIcon={IconDownload} onClick={handleDownload}
onClick={handleDownload} />
/> <MenuItem
<MenuItem text="Rename"
text="Rename" LeftIcon={IconPencil}
LeftIcon={IconPencil} onClick={handleRename}
onClick={handleRename} />
/> <MenuItem
<MenuItem text="Delete"
text="Delete" accent="danger"
accent="danger" LeftIcon={IconTrash}
LeftIcon={IconTrash} onClick={handleDelete}
onClick={handleDelete} />
/> </DropdownMenuItemsContainer>
</DropdownMenuItemsContainer>
</DropdownMenu>
} }
dropdownHotkeyScope={{ dropdownHotkeyScope={{
scope: dropdownId, scope: dropdownId,

View File

@@ -14,7 +14,6 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
import { useDestroyOneRecord } from '@/object-record/hooks/useDestroyOneRecord'; import { useDestroyOneRecord } from '@/object-record/hooks/useDestroyOneRecord';
import { useTriggerApisOAuth } from '@/settings/accounts/hooks/useTriggerApiOAuth'; import { useTriggerApisOAuth } from '@/settings/accounts/hooks/useTriggerApiOAuth';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; 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 { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
@@ -46,46 +45,45 @@ export const SettingsAccountsRowDropdownMenu = ({
clickableComponent={ clickableComponent={
<LightIconButton Icon={IconDotsVertical} accent="tertiary" /> <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
} }
dropdownMenuWidth={160}
dropdownComponents={ 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 <MenuItem
LeftIcon={IconMail} LeftIcon={IconRefresh}
text="Emails settings" text="Reconnect"
onClick={() => { onClick={() => {
navigate(`/settings/accounts/emails`); triggerApisOAuth(account.provider);
closeDropdown(); closeDropdown();
}} }}
/> />
<MenuItem )}
LeftIcon={IconCalendarEvent} <MenuItem
text="Calendar settings" accent="danger"
onClick={() => { LeftIcon={IconTrash}
navigate(`/settings/accounts/calendars`); text="Remove account"
closeDropdown(); onClick={() => {
}} destroyOneRecord(account.id);
/> closeDropdown();
{account.authFailedAt && ( }}
<MenuItem />
LeftIcon={IconRefresh} </DropdownMenuItemsContainer>
text="Reconnect"
onClick={() => {
triggerApisOAuth(account.provider);
closeDropdown();
}}
/>
)}
<MenuItem
accent="danger"
LeftIcon={IconTrash}
text="Remove account"
onClick={() => {
destroyOneRecord(account.id);
closeDropdown();
}}
/>
</DropdownMenuItemsContainer>
</DropdownMenu>
} }
/> />
); );

View File

@@ -9,7 +9,6 @@ import {
} from 'twenty-ui'; } from 'twenty-ui';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; 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 { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { FieldMetadataType } from '~/generated-metadata/graphql'; import { FieldMetadataType } from '~/generated-metadata/graphql';
@@ -55,31 +54,34 @@ export const SettingsObjectFieldInactiveActionDropdown = ({
<Dropdown <Dropdown
dropdownId={dropdownId} dropdownId={dropdownId}
clickableComponent={ clickableComponent={
<LightIconButton Icon={IconDotsVertical} accent="tertiary" /> <LightIconButton
aria-label="Inactive Field Options"
Icon={IconDotsVertical}
accent="tertiary"
/>
} }
dropdownMenuWidth={160}
dropdownComponents={ 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 <MenuItem
text={isCustomField ? 'Edit' : 'View'} text="Delete"
LeftIcon={isCustomField ? IconPencil : IconEye} accent="danger"
onClick={handleEdit} LeftIcon={IconTrash}
onClick={handleDelete}
/> />
<MenuItem )}
text="Activate" </DropdownMenuItemsContainer>
LeftIcon={IconArchiveOff}
onClick={handleActivate}
/>
{isDeletable && (
<MenuItem
text="Delete"
accent="danger"
LeftIcon={IconTrash}
onClick={handleDelete}
/>
)}
</DropdownMenuItemsContainer>
</DropdownMenu>
} }
dropdownHotkeyScope={{ dropdownHotkeyScope={{
scope: dropdownId, scope: dropdownId,

View File

@@ -7,7 +7,6 @@ import {
} from 'twenty-ui'; } from 'twenty-ui';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; 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 { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
@@ -42,26 +41,29 @@ export const SettingsObjectInactiveMenuDropDown = ({
<Dropdown <Dropdown
dropdownId={dropdownId} dropdownId={dropdownId}
clickableComponent={ clickableComponent={
<LightIconButton Icon={IconDotsVertical} accent="tertiary" /> <LightIconButton
aria-label="Inactive Object Options"
Icon={IconDotsVertical}
accent="tertiary"
/>
} }
dropdownMenuWidth={160}
dropdownComponents={ dropdownComponents={
<DropdownMenu width="160px"> <DropdownMenuItemsContainer>
<DropdownMenuItemsContainer> <MenuItem
text="Activate"
LeftIcon={IconArchiveOff}
onClick={handleActivate}
/>
{isCustomObject && (
<MenuItem <MenuItem
text="Activate" text="Delete"
LeftIcon={IconArchiveOff} LeftIcon={IconTrash}
onClick={handleActivate} accent="danger"
onClick={handleDelete}
/> />
{isCustomObject && ( )}
<MenuItem </DropdownMenuItemsContainer>
text="Delete"
LeftIcon={IconTrash}
accent="danger"
onClick={handleDelete}
/>
)}
</DropdownMenuItemsContainer>
</DropdownMenu>
} }
dropdownHotkeyScope={{ dropdownHotkeyScope={{
scope: dropdownId, scope: dropdownId,

View File

@@ -14,7 +14,6 @@ import { SSOIdentitiesProvidersState } from '@/settings/security/states/SSOIdent
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar'; import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; 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 { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { UnwrapRecoilValue } from 'recoil'; import { UnwrapRecoilValue } from 'recoil';
@@ -77,29 +76,28 @@ export const SettingsSecuritySSORowDropdownMenu = ({
clickableComponent={ clickableComponent={
<LightIconButton Icon={IconDotsVertical} accent="tertiary" /> <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
} }
dropdownMenuWidth={160}
dropdownComponents={ dropdownComponents={
<DropdownMenu> <DropdownMenuItemsContainer>
<DropdownMenuItemsContainer> <MenuItem
<MenuItem accent="default"
accent="default" LeftIcon={IconArchive}
LeftIcon={IconArchive} text={SSOIdp.status === 'Active' ? 'Deactivate' : 'Activate'}
text={SSOIdp.status === 'Active' ? 'Deactivate' : 'Activate'} onClick={() => {
onClick={() => { toggleSSOIdentityProviderStatus(SSOIdp.id);
toggleSSOIdentityProviderStatus(SSOIdp.id); closeDropdown();
closeDropdown(); }}
}} />
/> <MenuItem
<MenuItem accent="danger"
accent="danger" LeftIcon={IconTrash}
LeftIcon={IconTrash} text="Delete"
text="Delete" onClick={() => {
onClick={() => { handleDeleteSSOIdentityProvider(SSOIdp.id);
handleDeleteSSOIdentityProvider(SSOIdp.id); closeDropdown();
closeDropdown(); }}
}} />
/> </DropdownMenuItemsContainer>
</DropdownMenuItemsContainer>
</DropdownMenu>
} }
/> />
); );

View File

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

View File

@@ -1,5 +1,4 @@
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; 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 { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/StyledDropdownButtonContainer'; import { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/StyledDropdownButtonContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
@@ -71,22 +70,20 @@ const SearchVariablesDropdown = ({
</StyledDropdownVariableButtonContainer> </StyledDropdownVariableButtonContainer>
} }
dropdownComponents={ dropdownComponents={
<DropdownMenu> <DropdownMenuItemsContainer>
<DropdownMenuItemsContainer> {selectedStep ? (
{selectedStep ? ( <SearchVariablesDropdownStepSubItem
<SearchVariablesDropdownStepSubItem step={selectedStep}
step={selectedStep} onSelect={handleSubItemSelect}
onSelect={handleSubItemSelect} onBack={handleBack}
onBack={handleBack} />
/> ) : (
) : ( <SearchVariablesDropdownStepItem
<SearchVariablesDropdownStepItem steps={availableVariablesInWorkflowStep}
steps={availableVariablesInWorkflowStep} onSelect={handleStepSelect}
onSelect={handleStepSelect} />
/> )}
)} </DropdownMenuItemsContainer>
</DropdownMenuItemsContainer>
</DropdownMenu>
} }
dropdownPlacement="bottom-end" dropdownPlacement="bottom-end"
dropdownOffset={{ x: 0, y: 4 }} dropdownOffset={{ x: 0, y: 4 }}