houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(command-menu-item): rename Actions to CommandMenuItem (#18489)

Browse Source 
actions are being renamed to command menu item, they will be migrated to
server and will be served as headless front components

---------

Co-authored-by: Raphaël Bosi <71827178+bosiraphael@users.noreply.github.com>
This commit is contained in:
nitin
2026-03-09 19:33:12 +05:30
committed by GitHub
parent 06bdb5ad6a
commit 36bcc71f3d
275 changed files with 4544 additions and 4436 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx
+5 -5
View File
@@ -1,4 +1,4 @@
import { ActionButton } from '@/action-menu/actions/display/components/ActionButton';
import { CommandMenuButton } from '@/command-menu/components/CommandMenuButton';
import { useChildRecordFiltersAndRecordFilterGroups } from '@/object-record/advanced-filter/hooks/useChildRecordFiltersAndRecordFilterGroups';
import { useGetDefaultFieldMetadataItemForFilter } from '@/object-record/advanced-filter/hooks/useGetDefaultFieldMetadataItemForFilter';
import { useSetRecordFilterUsedInAdvancedFilterDropdownRow } from '@/object-record/advanced-filter/hooks/useSetRecordFilterUsedInAdvancedFilterDropdownRow';
@@ -147,8 +147,8 @@ export const AdvancedFilterAddFilterRuleSelect = ({
if (!isFilterRuleGroupOptionVisible) {
return (
<ActionButton
action={{
<CommandMenuButton
command={{
Icon: IconPlus,
label: t`Add rule`,
shortLabel: t`Add rule`,
@@ -163,8 +163,8 @@ export const AdvancedFilterAddFilterRuleSelect = ({
<Dropdown
dropdownId={dropdownId}
clickableComponent={
<ActionButton
action={{
<CommandMenuButton
command={{
Icon: IconPlus,
label: t`Add filter rule`,
shortLabel: t`Add filter rule`,
packages/twenty-front/src/modules/object-record/hooks/__tests__/useLazyFetchAllRecords.test.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import { useLazyFetchAllRecords } from '@/object-record/hooks/useLazyFetchAllRec
import { type MockedResponse } from '@apollo/client/testing';
import { act, renderHook, waitFor } from '@testing-library/react';
import gql from 'graphql-tag';
import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper';
import { getJestMetadataAndApolloMocksAndCommandMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndCommandMenuWrapper';
import { generatedMockObjectMetadataItems } from '~/testing/utils/generatedMockObjectMetadataItems';
const defaultResponseData = {
@@ -121,7 +121,7 @@ const mock: MockedResponse = {
})),
};
const Wrapper = getJestMetadataAndApolloMocksAndActionMenuWrapper({
const Wrapper = getJestMetadataAndApolloMocksAndCommandMenuWrapper({
apolloMocks: [mock],
componentInstanceId: 'recordIndexId',
contextStoreTargetedRecordsRule: {
packages/twenty-front/src/modules/object-record/record-board/components/RecordBoardClickOutsideEffect.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import { ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID } from '@/action-menu/constants/ActionMenuDropdownClickOutsideId';
import { COMMAND_MENU_DROPDOWN_CLICK_OUTSIDE_ID } from '@/command-menu-item/constants/CommandMenuDropdownClickOutsideId';
import { COMMAND_MENU_CLICK_OUTSIDE_ID } from '@/command-menu/constants/CommandMenuClickOutsideId';
import { RECORD_BOARD_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-board/constants/RecordBoardClickOutsideListenerId';
import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext';
@@ -31,7 +31,7 @@ export const RecordBoardClickOutsideEffect = () => {
useListenClickOutside({
excludedClickOutsideIds: [
ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID,
COMMAND_MENU_DROPDOWN_CLICK_OUTSIDE_ID,
COMMAND_MENU_CLICK_OUTSIDE_ID,
MODAL_BACKDROP_CLICK_OUTSIDE_ID,
PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID,
packages/twenty-front/src/modules/object-record/record-board/hooks/useRecordBoardSelection.ts
+4 -4
View File
@@ -1,5 +1,5 @@
import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
import { getActionMenuIdFromRecordIndexId } from '@/action-menu/utils/getActionMenuIdFromRecordIndexId';
import { getCommandMenuDropdownIdFromCommandMenuId } from '@/command-menu-item/utils/getCommandMenuDropdownIdFromCommandMenuId';
import { getCommandMenuIdFromRecordIndexId } from '@/command-menu-item/utils/getCommandMenuIdFromRecordIndexId';
import { RecordBoardComponentInstanceContext } from '@/object-record/record-board/states/contexts/RecordBoardComponentInstanceContext';
import { isRecordBoardCardSelectedComponentFamilyState } from '@/object-record/record-board/states/isRecordBoardCardSelectedComponentFamilyState';
import { recordBoardSelectedRecordIdsComponentSelector } from '@/object-record/record-board/states/selectors/recordBoardSelectedRecordIdsComponentSelector';
@@ -30,8 +30,8 @@ export const useRecordBoardSelection = (recordBoardId?: string) => {
const { closeDropdown } = useCloseDropdown();
const store = useStore();
const dropdownId = getActionMenuDropdownIdFromActionMenuId(
getActionMenuIdFromRecordIndexId(instanceIdFromProps),
const dropdownId = getCommandMenuDropdownIdFromCommandMenuId(
getCommandMenuIdFromRecordIndexId(instanceIdFromProps),
);
const setRecordAsSelected = useCallback(
packages/twenty-front/src/modules/object-record/record-board/hooks/useResetRecordBoardSelection.ts
+4 -4
View File
@@ -1,5 +1,5 @@
import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
import { getActionMenuIdFromRecordIndexId } from '@/action-menu/utils/getActionMenuIdFromRecordIndexId';
import { getCommandMenuDropdownIdFromCommandMenuId } from '@/command-menu-item/utils/getCommandMenuDropdownIdFromCommandMenuId';
import { getCommandMenuIdFromRecordIndexId } from '@/command-menu-item/utils/getCommandMenuIdFromRecordIndexId';
import { RecordBoardComponentInstanceContext } from '@/object-record/record-board/states/contexts/RecordBoardComponentInstanceContext';
import { isRecordBoardCardSelectedComponentFamilyState } from '@/object-record/record-board/states/isRecordBoardCardSelectedComponentFamilyState';
import { recordBoardSelectedRecordIdsComponentSelector } from '@/object-record/record-board/states/selectors/recordBoardSelectedRecordIdsComponentSelector';
@@ -30,8 +30,8 @@ export const useResetRecordBoardSelection = (recordBoardId?: string) => {
const { closeDropdown } = useCloseDropdown();
const store = useStore();
const dropdownId = getActionMenuDropdownIdFromActionMenuId(
getActionMenuIdFromRecordIndexId(instanceIdFromProps),
const dropdownId = getCommandMenuDropdownIdFromCommandMenuId(
getCommandMenuIdFromRecordIndexId(instanceIdFromProps),
);
const resetRecordBoardSelection = useCallback(() => {
packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
+11 -11
View File
@@ -1,6 +1,6 @@
import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-menu/states/recordIndexActionMenuDropdownPositionComponentState';
import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
import { getActionMenuIdFromRecordIndexId } from '@/action-menu/utils/getActionMenuIdFromRecordIndexId';
import { recordIndexCommandMenuDropdownPositionComponentState } from '@/command-menu-item/states/recordIndexCommandMenuDropdownPositionComponentState';
import { getCommandMenuDropdownIdFromCommandMenuId } from '@/command-menu-item/utils/getCommandMenuDropdownIdFromCommandMenuId';
import { getCommandMenuIdFromRecordIndexId } from '@/command-menu-item/utils/getCommandMenuIdFromRecordIndexId';
import { RecordBoardCardContext } from '@/object-record/record-board/record-board-card/contexts/RecordBoardCardContext';
import { isRecordBoardCardActiveComponentFamilyState } from '@/object-record/record-board/states/isRecordBoardCardActiveComponentFamilyState';
import { isRecordBoardCardFocusedComponentFamilyState } from '@/object-record/record-board/states/isRecordBoardCardFocusedComponentFamilyState';
@@ -99,14 +99,14 @@ export const RecordBoardCard = () => {
},
);
const actionMenuId = getActionMenuIdFromRecordIndexId(recordBoardId);
const commandMenuId = getCommandMenuIdFromRecordIndexId(recordBoardId);
const actionMenuDropdownId =
getActionMenuDropdownIdFromActionMenuId(actionMenuId);
const commandMenuDropdownId =
getCommandMenuDropdownIdFromCommandMenuId(commandMenuId);
const setRecordIndexActionMenuDropdownPosition = useSetAtomComponentState(
recordIndexActionMenuDropdownPositionComponentState,
actionMenuDropdownId,
const setRecordIndexCommandMenuDropdownPosition = useSetAtomComponentState(
recordIndexCommandMenuDropdownPositionComponentState,
commandMenuDropdownId,
);
const { openDropdown } = useOpenDropdown();
@@ -118,12 +118,12 @@ export const RecordBoardCard = () => {
const handleContextMenuOpen = (event: React.MouseEvent) => {
event.preventDefault();
setIsRecordBoardCardSelected(true);
setRecordIndexActionMenuDropdownPosition({
setRecordIndexCommandMenuDropdownPosition({
x: event.clientX,
y: event.clientY,
});
openDropdown({
dropdownComponentInstanceIdFromProps: actionMenuDropdownId,
dropdownComponentInstanceIdFromProps: commandMenuDropdownId,
globalHotkeysConfig: {
enableGlobalHotkeysWithModifiers: true,
enableGlobalHotkeysConflictingWithKeyboard: false,
packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendar.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { styled } from '@linaria/react';
import { ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID } from '@/action-menu/constants/ActionMenuDropdownClickOutsideId';
import { COMMAND_MENU_DROPDOWN_CLICK_OUTSIDE_ID } from '@/command-menu-item/constants/CommandMenuDropdownClickOutsideId';
import { COMMAND_MENU_CLICK_OUTSIDE_ID } from '@/command-menu/constants/CommandMenuClickOutsideId';
import { RecordCalendarTopBar } from '@/object-record/record-calendar/components/RecordCalendarTopBar';
import { RECORD_CALENDAR_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-calendar/constants/RecordCalendarClickOutsideListenerId';
@@ -35,7 +35,7 @@ export const RecordCalendar = () => {
useListenClickOutside({
excludedClickOutsideIds: [
ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID,
COMMAND_MENU_DROPDOWN_CLICK_OUTSIDE_ID,
COMMAND_MENU_CLICK_OUTSIDE_ID,
MODAL_BACKDROP_CLICK_OUTSIDE_ID,
PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID,
packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCard.tsx
+11 -11
View File
@@ -1,6 +1,6 @@
import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-menu/states/recordIndexActionMenuDropdownPositionComponentState';
import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
import { getActionMenuIdFromRecordIndexId } from '@/action-menu/utils/getActionMenuIdFromRecordIndexId';
import { recordIndexCommandMenuDropdownPositionComponentState } from '@/command-menu-item/states/recordIndexCommandMenuDropdownPositionComponentState';
import { getCommandMenuDropdownIdFromCommandMenuId } from '@/command-menu-item/utils/getCommandMenuDropdownIdFromCommandMenuId';
import { getCommandMenuIdFromRecordIndexId } from '@/command-menu-item/utils/getCommandMenuIdFromRecordIndexId';
import { RecordCalendarCardCellEditModePortal } from '@/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardCellEditModePortal';
import { RecordCalendarCardCellHoveredPortal } from '@/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardCellHoveredPortal';
import { RecordCalendarCardBody } from '@/object-record/record-calendar/record-calendar-card/components/RecordCalendarCardBody';
@@ -46,14 +46,14 @@ export const RecordCalendarCard = ({ recordId }: RecordCalendarCardProps) => {
RecordCalendarComponentInstanceContext,
);
const actionMenuId = getActionMenuIdFromRecordIndexId(recordCalendarId);
const commandMenuId = getCommandMenuIdFromRecordIndexId(recordCalendarId);
const actionMenuDropdownId =
getActionMenuDropdownIdFromActionMenuId(actionMenuId);
const commandMenuDropdownId =
getCommandMenuDropdownIdFromCommandMenuId(commandMenuId);
const setRecordIndexActionMenuDropdownPosition = useSetAtomComponentState(
recordIndexActionMenuDropdownPositionComponentState,
actionMenuDropdownId,
const setRecordIndexCommandMenuDropdownPosition = useSetAtomComponentState(
recordIndexCommandMenuDropdownPositionComponentState,
commandMenuDropdownId,
);
const { openDropdown } = useOpenDropdown();
@@ -61,12 +61,12 @@ export const RecordCalendarCard = ({ recordId }: RecordCalendarCardProps) => {
const handleContextMenuOpen = (event: React.MouseEvent) => {
event.preventDefault();
setIsRecordCalendarCardSelected(true);
setRecordIndexActionMenuDropdownPosition({
setRecordIndexCommandMenuDropdownPosition({
x: event.clientX,
y: event.clientY,
});
openDropdown({
dropdownComponentInstanceIdFromProps: actionMenuDropdownId,
dropdownComponentInstanceIdFromProps: commandMenuDropdownId,
globalHotkeysConfig: {
enableGlobalHotkeysWithModifiers: true,
enableGlobalHotkeysConflictingWithKeyboard: false,
packages/twenty-front/src/modules/object-record/record-calendar/states/selectors/useRecordCalendarSelection.ts
+4 -4
View File
@@ -1,7 +1,7 @@
import { useCallback } from 'react';
import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
import { getActionMenuIdFromRecordIndexId } from '@/action-menu/utils/getActionMenuIdFromRecordIndexId';
import { getCommandMenuDropdownIdFromCommandMenuId } from '@/command-menu-item/utils/getCommandMenuDropdownIdFromCommandMenuId';
import { getCommandMenuIdFromRecordIndexId } from '@/command-menu-item/utils/getCommandMenuIdFromRecordIndexId';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useAtomComponentFamilyStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentFamilyStateCallbackState';
@@ -31,8 +31,8 @@ export const useRecordCalendarSelection = (recordCalendarId?: string) => {
const { closeDropdown } = useCloseDropdown();
const store = useStore();
const dropdownId = getActionMenuDropdownIdFromActionMenuId(
getActionMenuIdFromRecordIndexId(instanceIdFromProps),
const dropdownId = getCommandMenuDropdownIdFromCommandMenuId(
getCommandMenuIdFromRecordIndexId(instanceIdFromProps),
);
const resetRecordSelection = useCallback(() => {
packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainerGater.tsx
+5 -5
View File
@@ -1,7 +1,7 @@
import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
import { getActionMenuIdFromRecordIndexId } from '@/action-menu/utils/getActionMenuIdFromRecordIndexId';
import { CommandMenuComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuComponentInstanceContext';
import { getCommandMenuIdFromRecordIndexId } from '@/command-menu-item/utils/getCommandMenuIdFromRecordIndexId';
import { getObjectPermissionsForObject } from '@/object-metadata/utils/getObjectPermissionsForObject';
import { MainContainerLayoutWithSidePanel } from '@/object-record/components/MainContainerLayoutWithSidePanel';
import { RecordComponentInstanceContextsWrapper } from '@/object-record/components/RecordComponentInstanceContextsWrapper';
@@ -88,9 +88,9 @@ export const RecordIndexContainerGater = () => {
<RecordComponentInstanceContextsWrapper
componentInstanceId={recordIndexId}
>
<ActionMenuComponentInstanceContext.Provider
<CommandMenuComponentInstanceContext.Provider
value={{
instanceId: getActionMenuIdFromRecordIndexId(recordIndexId),
instanceId: getCommandMenuIdFromRecordIndexId(recordIndexId),
}}
>
<PageTitle title={objectMetadataItem.labelPlural} />
@@ -103,7 +103,7 @@ export const RecordIndexContainerGater = () => {
<RecordIndexContainer />
</StyledIndexContainer>
</MainContainerLayoutWithSidePanel>
</ActionMenuComponentInstanceContext.Provider>
</CommandMenuComponentInstanceContext.Provider>
</RecordComponentInstanceContextsWrapper>
<RecordIndexLoadBaseOnContextStoreEffect />
</ViewComponentInstanceContext.Provider>
packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import { RecordIndexActionMenu } from '@/action-menu/components/RecordIndexActionMenu';
import { RecordIndexCommandMenu } from '@/command-menu-item/components/RecordIndexCommandMenu';
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
@@ -71,7 +71,7 @@ export const RecordIndexPageHeader = () => {
>
{isDefined(contextStoreCurrentViewId) && (
<>
<RecordIndexActionMenu />
<RecordIndexCommandMenu />
<PageHeaderToggleSidePanelButton />
</>
)}
packages/twenty-front/src/modules/object-record/record-index/export/hooks/__tests__/useRecordIndexLazyFetchRecords.test.ts
+2 -2
View File
@@ -8,7 +8,7 @@ import {
import { useLazyFetchAllRecords } from '@/object-record/hooks/useLazyFetchAllRecords';
import { ViewType } from '@/views/types/ViewType';
import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper';
import { getJestMetadataAndApolloMocksAndCommandMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndCommandMenuWrapper';
import { generatedMockObjectMetadataItems } from '~/testing/utils/generatedMockObjectMetadataItems';
const mockPerson = {
@@ -61,7 +61,7 @@ const mockPerson = {
},
};
const Wrapper = getJestMetadataAndApolloMocksAndActionMenuWrapper({
const Wrapper = getJestMetadataAndApolloMocksAndCommandMenuWrapper({
apolloMocks: [],
componentInstanceId: 'recordIndexId',
contextStoreTargetedRecordsRule: {
packages/twenty-front/src/modules/object-record/record-index/hooks/__tests__/useRecordIndexIdFromCurrentContextStore.test.tsx
+2 -2
View File
@@ -1,14 +1,14 @@
import { useRecordIndexIdFromCurrentContextStore } from '@/object-record/record-index/hooks/useRecordIndexIdFromCurrentContextStore';
import { renderHook } from '@testing-library/react';
import { JestObjectMetadataItemSetter } from '~/testing/jest/JestObjectMetadataItemSetter';
import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper';
import { getJestMetadataAndApolloMocksAndCommandMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndCommandMenuWrapper';
const testComponentInstanceId = 'test';
const testCurrentViewId = 'view-id';
const testObjectMetadataItemNameSingular = 'person';
const testObjectMetadataItemNamePlural = 'people';
const Wrapper = getJestMetadataAndApolloMocksAndActionMenuWrapper({
const Wrapper = getJestMetadataAndApolloMocksAndCommandMenuWrapper({
apolloMocks: [],
componentInstanceId: testComponentInstanceId,
contextStoreCurrentObjectMetadataNameSingular:
packages/twenty-front/src/modules/object-record/record-show/components/PageLayoutRecordPageRenderer.tsx
+3 -3
View File
@@ -1,5 +1,5 @@
import { RecordShowSidePanelActionMenu } from '@/action-menu/components/RecordShowSidePanelActionMenu';
import { RecordShowSidePanelOpenRecordButton } from '@/action-menu/components/RecordShowSidePanelOpenRecordButton';
import { RecordPageSidePanelCommandMenu } from '@/command-menu-item/components/RecordPageSidePanelCommandMenu';
import { RecordShowSidePanelOpenRecordButton } from '@/command-menu-item/components/RecordShowSidePanelOpenRecordButton';
import { InformationBannerDeletedRecord } from '@/information-banner/components/deleted-record/InformationBannerDeletedRecord';
import { CoreObjectNameSingular } from 'twenty-shared/types';
import { RecordShowContainerContextStoreTargetedRecordsEffect } from '@/object-record/record-show/components/RecordShowContainerContextStoreTargetedRecordsEffect';
@@ -103,7 +103,7 @@ export const PageLayoutRecordPageRenderer = ({
{isInSidePanel && (
<SidePanelFooter
actions={[
<RecordShowSidePanelActionMenu />,
<RecordPageSidePanelCommandMenu />,
<RecordShowSidePanelOpenRecordButton
objectNameSingular={
targetRecordIdentifier.targetObjectNameSingular
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableNoRecordGroupBodyContextProvider.tsx
+5 -5
View File
@@ -7,7 +7,7 @@ import {
type OpenTableCellArgs,
useOpenRecordTableCell,
} from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCell';
import { useTriggerActionMenuDropdown } from '@/object-record/record-table/record-table-cell/hooks/useTriggerActionMenuDropdown';
import { useTriggerCommandMenuDropdown } from '@/object-record/record-table/record-table-cell/hooks/useTriggerCommandMenuDropdown';
import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState';
import { type MoveFocusDirection } from '@/object-record/record-table/types/MoveFocusDirection';
import { type TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
@@ -47,15 +47,15 @@ export const RecordTableNoRecordGroupBodyContextProvider = ({
moveHoverToCurrentCell(cellPosition);
};
const { triggerActionMenuDropdown } = useTriggerActionMenuDropdown({
const { triggerCommandMenuDropdown } = useTriggerCommandMenuDropdown({
recordTableId,
});
const handleActionMenuDropdown = (
const handleCommandMenuDropdown = (
event: React.MouseEvent,
recordId: string,
) => {
triggerActionMenuDropdown(event, recordId);
triggerCommandMenuDropdown(event, recordId);
};
const hasUserSelectedAllRows = useAtomComponentStateValue(
@@ -70,7 +70,7 @@ export const RecordTableNoRecordGroupBodyContextProvider = ({
onMoveFocus: handleMoveFocus,
onCloseTableCell: handleCloseTableCell,
onMoveHoverToCurrentCell: handleMoveHoverToCurrentCell,
onActionMenuDropdownOpened: handleActionMenuDropdown,
onCommandMenuDropdownOpened: handleCommandMenuDropdown,
hasUserSelectedAllRows,
}}
>
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupBodyContextProvider.tsx
+5 -5
View File
@@ -7,7 +7,7 @@ import {
type OpenTableCellArgs,
useOpenRecordTableCell,
} from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCell';
import { useTriggerActionMenuDropdown } from '@/object-record/record-table/record-table-cell/hooks/useTriggerActionMenuDropdown';
import { useTriggerCommandMenuDropdown } from '@/object-record/record-table/record-table-cell/hooks/useTriggerCommandMenuDropdown';
import { type MoveFocusDirection } from '@/object-record/record-table/types/MoveFocusDirection';
import { type TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
import { type ReactNode } from 'react';
@@ -46,15 +46,15 @@ export const RecordTableRecordGroupBodyContextProvider = ({
moveHoverToCurrentCell(cellPosition);
};
const { triggerActionMenuDropdown } = useTriggerActionMenuDropdown({
const { triggerCommandMenuDropdown } = useTriggerCommandMenuDropdown({
recordTableId,
});
const handleActionMenuDropdown = (
const handleCommandMenuDropdown = (
event: React.MouseEvent,
recordId: string,
) => {
triggerActionMenuDropdown(event, recordId);
triggerCommandMenuDropdown(event, recordId);
};
return (
@@ -64,7 +64,7 @@ export const RecordTableRecordGroupBodyContextProvider = ({
onMoveFocus: handleMoveFocus,
onCloseTableCell: handlecloseTableCellInGroup,
onMoveHoverToCurrentCell: handleMoveHoverToCurrentCell,
onActionMenuDropdownOpened: handleActionMenuDropdown,
onCommandMenuDropdownOpened: handleCommandMenuDropdown,
}}
>
{children}
packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx
+1 -1
View File
@@ -181,7 +181,7 @@ const meta: Meta = {
onMoveFocus: () => {},
onCloseTableCell: () => {},
onMoveHoverToCurrentCell: () => {},
onActionMenuDropdownOpened: () => {},
onCommandMenuDropdownOpened: () => {},
}}
>
<RecordTableRowContextProvider
packages/twenty-front/src/modules/object-record/record-table/contexts/RecordTableBodyContext.ts
+1 -1
View File
@@ -11,7 +11,7 @@ export type RecordTableBodyContextProps = {
onMoveFocus: (direction: MoveFocusDirection) => void;
onCloseTableCell: () => void;
onMoveHoverToCurrentCell: (cellPosition: TableCellPosition) => void;
onActionMenuDropdownOpened: (
onCommandMenuDropdownOpened: (
event: React.MouseEvent,
recordId: string,
) => void;
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useResetTableRowSelection.ts
+4 -4
View File
@@ -1,8 +1,8 @@
import { useCallback } from 'react';
import { useStore } from 'jotai';
import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
import { getActionMenuIdFromRecordIndexId } from '@/action-menu/utils/getActionMenuIdFromRecordIndexId';
import { getCommandMenuDropdownIdFromCommandMenuId } from '@/command-menu-item/utils/getCommandMenuDropdownIdFromCommandMenuId';
import { getCommandMenuIdFromRecordIndexId } from '@/command-menu-item/utils/getCommandMenuIdFromRecordIndexId';
import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState';
import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
@@ -55,8 +55,8 @@ export const useResetTableRowSelection = (recordTableId?: string) => {
store.set(lastSelectedRowIndexComponentCallbackState, null);
closeDropdown(
getActionMenuDropdownIdFromActionMenuId(
getActionMenuIdFromRecordIndexId(recordTableIdFromContext),
getCommandMenuDropdownIdFromCommandMenuId(
getCommandMenuIdFromRecordIndexId(recordTableIdFromContext),
),
);
}, [
packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFocusClickOutsideEffect.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import { ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID } from '@/action-menu/constants/ActionMenuDropdownClickOutsideId';
import { COMMAND_MENU_DROPDOWN_CLICK_OUTSIDE_ID } from '@/command-menu-item/constants/CommandMenuDropdownClickOutsideId';
import { COMMAND_MENU_CLICK_OUTSIDE_ID } from '@/command-menu/constants/CommandMenuClickOutsideId';
import { RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/RecordTableClickOutsideListenerId';
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
@@ -26,7 +26,7 @@ export const RecordTableBodyFocusClickOutsideEffect = ({
useListenClickOutside({
excludedClickOutsideIds: [
ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID,
COMMAND_MENU_DROPDOWN_CLICK_OUTSIDE_ID,
COMMAND_MENU_CLICK_OUTSIDE_ID,
PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID,
MODAL_BACKDROP_CLICK_OUTSIDE_ID,
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayMode.tsx
+4 -4
View File
@@ -13,14 +13,14 @@ export const RecordTableCellDisplayMode = ({
const { recordId, isRecordFieldReadOnly: isReadOnly } =
useContext(FieldContext);
const { onActionMenuDropdownOpened } = useRecordTableBodyContextOrThrow();
const { onCommandMenuDropdownOpened } = useRecordTableBodyContextOrThrow();
const { openTableCell } = useOpenRecordTableCellFromCell();
const isFieldInputOnly = useIsFieldInputOnly();
const handleActionMenuDropdown = (event: React.MouseEvent) => {
onActionMenuDropdownOpened(event, recordId);
const handleCommandMenuDropdown = (event: React.MouseEvent) => {
onCommandMenuDropdownOpened(event, recordId);
};
const handleClick = (event: React.MouseEvent) => {
@@ -32,7 +32,7 @@ export const RecordTableCellDisplayMode = ({
return (
<RecordTableCellDisplayContainer
onContextMenu={handleActionMenuDropdown}
onContextMenu={handleCommandMenuDropdown}
onClick={handleClick}
>
{children}
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useTriggerActionMenuDropdown.ts → packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useTriggerCommandMenuDropdown.ts
+18 -17
View File
@@ -1,9 +1,9 @@
import { useCallback } from 'react';
import { useStore } from 'jotai';
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-menu/states/recordIndexActionMenuDropdownPositionComponentState';
import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
import { CommandMenuComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuComponentInstanceContext';
import { recordIndexCommandMenuDropdownPositionComponentState } from '@/command-menu-item/states/recordIndexCommandMenuDropdownPositionComponentState';
import { getCommandMenuDropdownIdFromCommandMenuId } from '@/command-menu-item/utils/getCommandMenuDropdownIdFromCommandMenuId';
import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
@@ -11,13 +11,13 @@ import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/com
import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
import { useAtomComponentFamilyStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentFamilyStateCallbackState';
export const useTriggerActionMenuDropdown = ({
export const useTriggerCommandMenuDropdown = ({
recordTableId,
}: {
recordTableId: string;
}) => {
const actionMenuInstanceId = useAvailableComponentInstanceIdOrThrow(
ActionMenuComponentInstanceContext,
const commandMenuInstanceId = useAvailableComponentInstanceIdOrThrow(
CommandMenuComponentInstanceContext,
);
const isRowSelectedFamilyState = useAtomComponentFamilyStateCallbackState(
@@ -25,24 +25,25 @@ export const useTriggerActionMenuDropdown = ({
recordTableId,
);
const actionMenuDropdownId =
getActionMenuDropdownIdFromActionMenuId(actionMenuInstanceId);
const commandMenuDropdownId = getCommandMenuDropdownIdFromCommandMenuId(
commandMenuInstanceId,
);
const recordIndexActionMenuDropdownPositionCallbackState =
const recordIndexCommandMenuDropdownPositionCallbackState =
useAtomComponentStateCallbackState(
recordIndexActionMenuDropdownPositionComponentState,
actionMenuDropdownId,
recordIndexCommandMenuDropdownPositionComponentState,
commandMenuDropdownId,
);
const { openDropdown } = useOpenDropdown();
const { closeSidePanelMenu } = useSidePanelMenu();
const store = useStore();
const triggerActionMenuDropdown = useCallback(
const triggerCommandMenuDropdown = useCallback(
(event: React.MouseEvent, recordId: string) => {
event.preventDefault();
store.set(recordIndexActionMenuDropdownPositionCallbackState, {
store.set(recordIndexCommandMenuDropdownPositionCallbackState, {
x: event.pageX,
y: event.pageY,
});
@@ -56,18 +57,18 @@ export const useTriggerActionMenuDropdown = ({
closeSidePanelMenu();
openDropdown({
dropdownComponentInstanceIdFromProps: actionMenuDropdownId,
dropdownComponentInstanceIdFromProps: commandMenuDropdownId,
});
},
[
recordIndexActionMenuDropdownPositionCallbackState,
recordIndexCommandMenuDropdownPositionCallbackState,
isRowSelectedFamilyState,
closeSidePanelMenu,
openDropdown,
actionMenuDropdownId,
commandMenuDropdownId,
store,
],
);
return { triggerActionMenuDropdown };
return { triggerCommandMenuDropdown };
};
packages/twenty-front/src/modules/object-record/record-update-multiple/components/UpdateMultipleRecordsFooter.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { computeProgressText } from '@/action-menu/utils/computeProgressText';
import { computeProgressText } from '@/command-menu-item/utils/computeProgressText';
import { SIDE_PANEL_FOCUS_ID } from '@/side-panel/constants/SidePanelFocusId';
import { type ObjectRecordQueryProgress } from '@/object-record/types/ObjectRecordQueryProgress';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
packages/twenty-front/src/modules/object-record/record-update-multiple/components/__stories__/UpdateMultipleRecordsContainer.stories.tsx
+5 -5
View File
@@ -1,4 +1,4 @@
import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
import { CommandMenuContext } from '@/command-menu-item/contexts/CommandMenuContext';
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
import { ApolloCoreClientContext } from '@/object-metadata/contexts/ApolloCoreClientContext';
import { UpdateMultipleRecordsContainer } from '@/object-record/record-update-multiple/components/UpdateMultipleRecordsContainer';
@@ -53,16 +53,16 @@ const meta: Meta<typeof UpdateMultipleRecordsContainer> = {
decorators: [
(Story) => (
<ApolloCoreClientContext.Provider value={mockApolloCoreClient}>
<ActionMenuContext.Provider
<CommandMenuContext.Provider
value={{
actions: [],
actionMenuType: 'index-page-action-menu-dropdown',
commandMenuItems: [],
containerType: 'index-page-dropdown',
displayType: 'dropdownItem',
isInSidePanel: true,
}}
>
<Story />
</ActionMenuContext.Provider>
</CommandMenuContext.Provider>
</ApolloCoreClientContext.Provider>
),
ContextStoreDecorator,