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 <raphael.bosi@gmail.com>
This commit is contained in:
Gaurav
2025-03-28 21:01:43 +05:30
committed by GitHub
parent da9e078283
commit 859ed1d8dd
2 changed files with 50 additions and 39 deletions

View File

@ -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,

View File

@ -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)}
/>
))}
<MenuItem
key="more-actions"
LeftIcon={IconLayoutSidebarRightExpand}
onClick={() => {
closeDropdown();
openCommandMenu();
}}
text="More actions"
/>
</DropdownMenuItemsContainer>
</StyledDropdownMenuContainer>
}