From 859ed1d8dd6fbd620da2c19cf6590c53b0990e5e Mon Sep 17 00:00:00 2001 From: Gaurav Date: Fri, 28 Mar 2025 21:01:43 +0530 Subject: [PATCH] Feature: Update record right click menu (#11252) closes #11193 [recording.webm](https://github.com/user-attachments/assets/2c89f50a-546b-4047-8b5a-69f6588cabe4) --------- Co-authored-by: bosiraphael --- .../constants/DefaultActionsConfig.ts | 73 +++++++++---------- .../RecordIndexActionMenuDropdown.tsx | 16 +++- 2 files changed, 50 insertions(+), 39 deletions(-) diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts b/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts index 5c04dbf9b..5ea7bd987 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts @@ -29,7 +29,6 @@ import { msg } from '@lingui/core/macro'; import { IconChevronDown, IconChevronUp, - IconDatabaseExport, IconEyeOff, IconFileExport, IconFileImport, @@ -103,43 +102,14 @@ export const DEFAULT_ACTIONS_CONFIG: Record< ], useAction: useRemoveFromFavoritesSingleRecordAction, }, - deleteSingleRecord: { - type: ActionMenuEntryType.Standard, - scope: ActionMenuEntryScope.RecordSelection, - key: SingleRecordActionKeys.DELETE, - label: msg`Delete record`, - shortLabel: msg`Delete`, - position: 4, - Icon: IconTrash, - accent: 'danger', - isPinned: true, - availableOn: [ - ActionViewType.INDEX_PAGE_SINGLE_RECORD_SELECTION, - ActionViewType.SHOW_PAGE, - ], - useAction: useDeleteSingleRecordAction, - }, - deleteMultipleRecords: { - type: ActionMenuEntryType.Standard, - scope: ActionMenuEntryScope.RecordSelection, - key: MultipleRecordsActionKeys.DELETE, - label: msg`Delete records`, - shortLabel: msg`Delete`, - position: 5, - Icon: IconTrash, - accent: 'danger', - isPinned: true, - availableOn: [ActionViewType.INDEX_PAGE_BULK_SELECTION], - useAction: useDeleteMultipleRecordsAction, - }, exportSingleRecord: { type: ActionMenuEntryType.Standard, scope: ActionMenuEntryScope.RecordSelection, key: SingleRecordActionKeys.EXPORT, - label: msg`Export record`, + label: msg`Export`, shortLabel: msg`Export`, - position: 6, - Icon: IconDatabaseExport, + position: 4, + Icon: IconFileExport, accent: 'default', isPinned: false, availableOn: [ @@ -154,8 +124,8 @@ export const DEFAULT_ACTIONS_CONFIG: Record< key: MultipleRecordsActionKeys.EXPORT, label: msg`Export records`, shortLabel: msg`Export`, - position: 7, - Icon: IconDatabaseExport, + position: 5, + Icon: IconFileExport, accent: 'default', isPinned: false, availableOn: [ActionViewType.INDEX_PAGE_BULK_SELECTION], @@ -167,13 +137,42 @@ export const DEFAULT_ACTIONS_CONFIG: Record< key: NoSelectionRecordActionKeys.EXPORT_VIEW, label: msg`Export view`, shortLabel: msg`Export`, - position: 8, - Icon: IconDatabaseExport, + position: 6, + Icon: IconFileExport, accent: 'default', isPinned: false, availableOn: [ActionViewType.INDEX_PAGE_NO_SELECTION], useAction: useExportMultipleRecordsAction, }, + deleteSingleRecord: { + type: ActionMenuEntryType.Standard, + scope: ActionMenuEntryScope.RecordSelection, + key: SingleRecordActionKeys.DELETE, + label: msg`Delete`, + shortLabel: msg`Delete`, + position: 7, + Icon: IconTrash, + accent: 'default', + isPinned: true, + availableOn: [ + ActionViewType.INDEX_PAGE_SINGLE_RECORD_SELECTION, + ActionViewType.SHOW_PAGE, + ], + useAction: useDeleteSingleRecordAction, + }, + deleteMultipleRecords: { + type: ActionMenuEntryType.Standard, + scope: ActionMenuEntryScope.RecordSelection, + key: MultipleRecordsActionKeys.DELETE, + label: msg`Delete records`, + shortLabel: msg`Delete`, + position: 8, + Icon: IconTrash, + accent: 'default', + isPinned: true, + availableOn: [ActionViewType.INDEX_PAGE_BULK_SELECTION], + useAction: useDeleteMultipleRecordsAction, + }, seeDeletedRecords: { type: ActionMenuEntryType.Standard, scope: ActionMenuEntryScope.Object, diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx index 65f38b64d..9cab9e702 100644 --- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx @@ -7,6 +7,7 @@ import { ActionMenuEntryType, } from '@/action-menu/types/ActionMenuEntry'; import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId'; +import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; @@ -16,7 +17,7 @@ import { extractComponentState } from '@/ui/utilities/state/component-state/util import styled from '@emotion/styled'; import { i18n } from '@lingui/core'; import { useRecoilValue } from 'recoil'; -import { MenuItem } from 'twenty-ui'; +import { IconLayoutSidebarRightExpand, MenuItem } from 'twenty-ui'; const StyledDropdownMenuContainer = styled.div` width: 100%; @@ -53,6 +54,8 @@ export const RecordIndexActionMenuDropdown = () => { ), ); + const { openCommandMenu } = useCommandMenu(); + //TODO: remove this const width = recordIndexActions.some( (actionMenuEntry) => @@ -83,13 +86,22 @@ export const RecordIndexActionMenuDropdown = () => { key={item.key} LeftIcon={item.Icon} onClick={() => { - item.onClick?.(); closeDropdown(); + item.onClick?.(); }} accent={item.accent} text={i18n._(item.label)} /> ))} + { + closeDropdown(); + openCommandMenu(); + }} + text="More actions" + /> }