diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/components/DeleteRecordsActionEffect.tsx b/packages/twenty-front/src/modules/action-menu/actions/record-actions/components/DeleteRecordsActionEffect.tsx index a1f1f34f1..208ae8ffc 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/components/DeleteRecordsActionEffect.tsx +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/components/DeleteRecordsActionEffect.tsx @@ -1,5 +1,5 @@ +import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext'; import { useActionMenuEntries } from '@/action-menu/hooks/useActionMenuEntries'; -import { ActionMenuType } from '@/action-menu/types/ActionMenuType'; import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState'; import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState'; import { computeContextStoreFilters } from '@/context-store/utils/computeContextStoreFilters'; @@ -12,17 +12,15 @@ import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTabl import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal'; import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; -import { useCallback, useEffect, useState } from 'react'; +import { useCallback, useContext, useEffect, useState } from 'react'; import { IconTrash, isDefined } from 'twenty-ui'; export const DeleteRecordsActionEffect = ({ position, objectMetadataItem, - actionMenuType, }: { position: number; objectMetadataItem: ObjectMetadataItem; - actionMenuType: ActionMenuType; }) => { const { addActionMenuEntry, removeActionMenuEntry } = useActionMenuEntries(); @@ -93,6 +91,9 @@ export const DeleteRecordsActionEffect = ({ contextStoreNumberOfSelectedRecords < DELETE_MAX_COUNT && contextStoreNumberOfSelectedRecords > 0; + const { isInRightDrawer, onActionExecutedCallback } = + useContext(ActionMenuContext); + useEffect(() => { if (canDelete) { addActionMenuEntry({ @@ -120,17 +121,14 @@ export const DeleteRecordsActionEffect = ({ } can be recovered from the Options menu.`} onConfirmClick={() => { handleDeleteClick(); - - if (actionMenuType === 'recordShow') { + onActionExecutedCallback?.(); + if (isInRightDrawer) { closeRightDrawer(); } }} deleteButtonText={`Delete ${ contextStoreNumberOfSelectedRecords > 1 ? 'Records' : 'Record' }`} - modalVariant={ - actionMenuType === 'recordShow' ? 'tertiary' : 'primary' - } /> ), }); @@ -142,13 +140,14 @@ export const DeleteRecordsActionEffect = ({ removeActionMenuEntry('delete'); }; }, [ - actionMenuType, addActionMenuEntry, canDelete, closeRightDrawer, contextStoreNumberOfSelectedRecords, handleDeleteClick, isDeleteRecordsModalOpen, + isInRightDrawer, + onActionExecutedCallback, position, removeActionMenuEntry, ]); diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/components/MultipleRecordsActionMenuEntriesSetter.tsx b/packages/twenty-front/src/modules/action-menu/actions/record-actions/components/MultipleRecordsActionMenuEntriesSetter.tsx deleted file mode 100644 index f1fcd52c9..000000000 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/components/MultipleRecordsActionMenuEntriesSetter.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { DeleteRecordsActionEffect } from '@/action-menu/actions/record-actions/components/DeleteRecordsActionEffect'; -import { ExportRecordsActionEffect } from '@/action-menu/actions/record-actions/components/ExportRecordsActionEffect'; -import { ActionMenuType } from '@/action-menu/types/ActionMenuType'; -import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; - -const actionEffects = [ExportRecordsActionEffect, DeleteRecordsActionEffect]; - -export const MultipleRecordsActionMenuEntriesSetter = ({ - objectMetadataItem, - actionMenuType, -}: { - objectMetadataItem: ObjectMetadataItem; - actionMenuType: ActionMenuType; -}) => { - return ( - <> - {actionEffects.map((ActionEffect, index) => ( - - ))} - - ); -}; diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter.tsx b/packages/twenty-front/src/modules/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter.tsx index 5ed405684..fc4b47209 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter.tsx +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter.tsx @@ -1,16 +1,23 @@ -import { MultipleRecordsActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/MultipleRecordsActionMenuEntriesSetter'; -import { SingleRecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/SingleRecordActionMenuEntriesSetter'; -import { ActionMenuType } from '@/action-menu/types/ActionMenuType'; +import { DeleteRecordsActionEffect } from '@/action-menu/actions/record-actions/components/DeleteRecordsActionEffect'; +import { ExportRecordsActionEffect } from '@/action-menu/actions/record-actions/components/ExportRecordsActionEffect'; +import { ManageFavoritesActionEffect } from '@/action-menu/actions/record-actions/components/ManageFavoritesActionEffect'; import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState'; import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState'; import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; -export const RecordActionMenuEntriesSetter = ({ - actionMenuType, -}: { - actionMenuType: ActionMenuType; -}) => { +const singleRecordActionEffects = [ + ManageFavoritesActionEffect, + ExportRecordsActionEffect, + DeleteRecordsActionEffect, +]; + +const multipleRecordActionEffects = [ + ExportRecordsActionEffect, + DeleteRecordsActionEffect, +]; + +export const RecordActionMenuEntriesSetter = () => { const contextStoreNumberOfSelectedRecords = useRecoilComponentValueV2( contextStoreNumberOfSelectedRecordsComponentState, ); @@ -33,19 +40,20 @@ export const RecordActionMenuEntriesSetter = ({ return null; } - if (contextStoreNumberOfSelectedRecords === 1) { - return ( - - ); - } + const actions = + contextStoreNumberOfSelectedRecords === 1 + ? singleRecordActionEffects + : multipleRecordActionEffects; return ( - + <> + {actions.map((ActionEffect, index) => ( + + ))} + ); }; diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/components/SingleRecordActionMenuEntriesSetter.tsx b/packages/twenty-front/src/modules/action-menu/actions/record-actions/components/SingleRecordActionMenuEntriesSetter.tsx deleted file mode 100644 index 7bf10746f..000000000 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/components/SingleRecordActionMenuEntriesSetter.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { DeleteRecordsActionEffect } from '@/action-menu/actions/record-actions/components/DeleteRecordsActionEffect'; -import { ExportRecordsActionEffect } from '@/action-menu/actions/record-actions/components/ExportRecordsActionEffect'; -import { ManageFavoritesActionEffect } from '@/action-menu/actions/record-actions/components/ManageFavoritesActionEffect'; -import { ActionMenuType } from '@/action-menu/types/ActionMenuType'; -import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; - -export const SingleRecordActionMenuEntriesSetter = ({ - objectMetadataItem, - actionMenuType, -}: { - objectMetadataItem: ObjectMetadataItem; - actionMenuType: ActionMenuType; -}) => { - const actionEffects = [ - ManageFavoritesActionEffect, - ExportRecordsActionEffect, - DeleteRecordsActionEffect, - ]; - return ( - <> - {actionEffects.map((ActionEffect, index) => ( - - ))} - - ); -}; diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx index 866303d3f..95df542d9 100644 --- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx @@ -3,16 +3,12 @@ import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMen import { RecordIndexActionMenuBar } from '@/action-menu/components/RecordIndexActionMenuBar'; import { RecordIndexActionMenuDropdown } from '@/action-menu/components/RecordIndexActionMenuDropdown'; import { RecordIndexActionMenuEffect } from '@/action-menu/components/RecordIndexActionMenuEffect'; +import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext'; -import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext'; import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; -export const RecordIndexActionMenu = ({ - actionMenuId, -}: { - actionMenuId: string; -}) => { +export const RecordIndexActionMenu = () => { const contextStoreCurrentObjectMetadataId = useRecoilComponentValueV2( contextStoreCurrentObjectMetadataIdComponentState, ); @@ -20,15 +16,18 @@ export const RecordIndexActionMenu = ({ return ( <> {contextStoreCurrentObjectMetadataId && ( - {}, + }} > - - + + )} ); diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuEffect.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuEffect.tsx index 97c785af7..19cd64c38 100644 --- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuEffect.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuEffect.tsx @@ -1,7 +1,9 @@ import { useActionMenu } from '@/action-menu/hooks/useActionMenu'; import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext'; +import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState'; import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState'; import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState'; +import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer'; import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState'; @@ -25,6 +27,9 @@ export const RecordIndexActionMenuEffect = () => { `action-menu-dropdown-${actionMenuId}`, ), ); + const { isRightDrawerOpen } = useRightDrawer(); + + const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState); useEffect(() => { if (contextStoreNumberOfSelectedRecords > 0 && !isDropdownOpen) { @@ -43,5 +48,11 @@ export const RecordIndexActionMenuEffect = () => { isDropdownOpen, ]); + useEffect(() => { + if (isRightDrawerOpen || isCommandMenuOpened) { + closeActionBar(); + } + }, [closeActionBar, isRightDrawerOpen, isCommandMenuOpened]); + return null; }; diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx index 80bbfe4e1..6ce6218e0 100644 --- a/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx @@ -1,30 +1,53 @@ import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter'; import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals'; -import { RecordShowActionMenuBar } from '@/action-menu/components/RecordShowActionMenuBar'; +import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext'; -import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext'; import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState'; +import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; +import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; +import { RecordShowPageBaseHeader } from '~/pages/object-record/RecordShowPageBaseHeader'; export const RecordShowActionMenu = ({ - actionMenuId, + isFavorite, + handleFavoriteButtonClick, + record, + objectMetadataItem, + objectNameSingular, }: { - actionMenuId: string; + isFavorite: boolean; + handleFavoriteButtonClick: () => void; + record: ObjectRecord | undefined; + objectMetadataItem: ObjectMetadataItem; + objectNameSingular: string; }) => { const contextStoreCurrentObjectMetadataId = useRecoilComponentValueV2( contextStoreCurrentObjectMetadataIdComponentState, ); + // TODO: refactor RecordShowPageBaseHeader to use the context store + return ( <> {contextStoreCurrentObjectMetadataId && ( - {}, + }} > - + - - + + )} ); diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerActionMenu.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerActionMenu.tsx new file mode 100644 index 000000000..c4399a42a --- /dev/null +++ b/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerActionMenu.tsx @@ -0,0 +1,30 @@ +import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter'; +import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals'; +import { RecordShowRightDrawerActionMenuBar } from '@/action-menu/components/RecordShowRightDrawerActionMenuBar'; +import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext'; + +import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; + +export const RecordShowRightDrawerActionMenu = () => { + const contextStoreCurrentObjectMetadataId = useRecoilComponentValueV2( + contextStoreCurrentObjectMetadataIdComponentState, + ); + + return ( + <> + {contextStoreCurrentObjectMetadataId && ( + {}, + }} + > + + + + + )} + + ); +}; diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuBar.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerActionMenuBar.tsx similarity index 91% rename from packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuBar.tsx rename to packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerActionMenuBar.tsx index c4fefcef4..85ab16ab0 100644 --- a/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuBar.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerActionMenuBar.tsx @@ -2,7 +2,7 @@ import { RecordShowActionMenuBarEntry } from '@/action-menu/components/RecordSho import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; -export const RecordShowActionMenuBar = () => { +export const RecordShowRightDrawerActionMenuBar = () => { const actionMenuEntries = useRecoilComponentValueV2( actionMenuEntriesComponentSelector, ); diff --git a/packages/twenty-front/src/modules/action-menu/components/__stories__/RecordShowActionMenuBar.stories.tsx b/packages/twenty-front/src/modules/action-menu/components/__stories__/RecordShowActionMenuBar.stories.tsx index 22f1bab67..2be67a567 100644 --- a/packages/twenty-front/src/modules/action-menu/components/__stories__/RecordShowActionMenuBar.stories.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/__stories__/RecordShowActionMenuBar.stories.tsx @@ -2,7 +2,7 @@ import { expect, jest } from '@storybook/jest'; import { Meta, StoryObj } from '@storybook/react'; import { RecoilRoot } from 'recoil'; -import { RecordShowActionMenuBar } from '@/action-menu/components/RecordShowActionMenuBar'; +import { RecordShowRightDrawerActionMenuBar } from '@/action-menu/components/RecordShowRightDrawerActionMenuBar'; import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState'; import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext'; import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState'; @@ -20,9 +20,9 @@ const deleteMock = jest.fn(); const addToFavoritesMock = jest.fn(); const exportMock = jest.fn(); -const meta: Meta = { - title: 'Modules/ActionMenu/RecordShowActionMenuBar', - component: RecordShowActionMenuBar, +const meta: Meta = { + title: 'Modules/ActionMenu/RecordShowRightDrawerActionMenuBar', + component: RecordShowRightDrawerActionMenuBar, decorators: [ (Story) => ( = { export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = { args: { diff --git a/packages/twenty-front/src/modules/action-menu/contexts/ActionMenuContext.ts b/packages/twenty-front/src/modules/action-menu/contexts/ActionMenuContext.ts new file mode 100644 index 000000000..0c1482f40 --- /dev/null +++ b/packages/twenty-front/src/modules/action-menu/contexts/ActionMenuContext.ts @@ -0,0 +1,11 @@ +import { createContext } from 'react'; + +type ActionMenuContextType = { + isInRightDrawer: boolean; + onActionExecutedCallback: () => void; +}; + +export const ActionMenuContext = createContext({ + isInRightDrawer: false, + onActionExecutedCallback: () => {}, +}); diff --git a/packages/twenty-front/src/modules/action-menu/types/ActionMenuType.ts b/packages/twenty-front/src/modules/action-menu/types/ActionMenuType.ts deleted file mode 100644 index a0e7d0e4b..000000000 --- a/packages/twenty-front/src/modules/action-menu/types/ActionMenuType.ts +++ /dev/null @@ -1 +0,0 @@ -export type ActionMenuType = 'recordIndex' | 'recordShow'; diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx index 02f636582..4dd360c93 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx @@ -10,6 +10,7 @@ import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchS import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState'; import { Command, CommandType } from '@/command-menu/types/Command'; import { Company } from '@/companies/types/Company'; +import { mainContextStoreComponentInstanceIdState } from '@/context-store/states/mainContextStoreComponentInstanceId'; import { useKeyboardShortcutMenu } from '@/keyboard-shortcut-menu/hooks/useKeyboardShortcutMenu'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { getCompanyDomainName } from '@/object-metadata/utils/getCompanyDomainName'; @@ -287,6 +288,14 @@ export const CommandMenu = () => { : true) && cmd.type === CommandType.Create, ); + const matchingActionCommands = commandMenuCommands.filter( + (cmd) => + (deferredCommandMenuSearch.length > 0 + ? checkInShortcuts(cmd, deferredCommandMenuSearch) || + checkInLabels(cmd, deferredCommandMenuSearch) + : true) && cmd.type === CommandType.Action, + ); + useListenClickOutside({ refs: [commandMenuRef], callback: closeCommandMenu, @@ -312,6 +321,7 @@ export const CommandMenu = () => { const selectableItemIds = copilotCommands .map((cmd) => cmd.id) + .concat(matchingActionCommands.map((cmd) => cmd.id)) .concat(matchingCreateCommand.map((cmd) => cmd.id)) .concat(matchingNavigateCommand.map((cmd) => cmd.id)) .concat(people?.map((person) => person.id)) @@ -320,22 +330,28 @@ export const CommandMenu = () => { .concat(notes?.map((note) => note.id)); const isNoResults = + !matchingActionCommands.length && !matchingCreateCommand.length && !matchingNavigateCommand.length && !people?.length && !companies?.length && !notes?.length && !opportunities?.length; + const isLoading = isPeopleLoading || isNotesLoading || isOpportunitiesLoading || isCompaniesLoading; + const mainContextStoreComponentInstanceId = useRecoilValue( + mainContextStoreComponentInstanceIdState, + ); + return ( <> {isCommandMenuOpened && ( - + { )} + {mainContextStoreComponentInstanceId && ( + + {matchingActionCommands?.map((actionCommand) => ( + + + + ))} + + )} {matchingCreateCommand.map((cmd) => ( diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts index e372251a1..06fc6469b 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts +++ b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts @@ -1,7 +1,7 @@ import { isNonEmptyString } from '@sniptt/guards'; import { useCallback } from 'react'; import { useNavigate } from 'react-router-dom'; -import { useRecoilCallback, useSetRecoilState } from 'recoil'; +import { useRecoilCallback, useRecoilValue, useSetRecoilState } from 'recoil'; import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState'; import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList'; @@ -9,7 +9,9 @@ import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousH import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope'; import { isDefined } from '~/utils/isDefined'; +import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector'; import { COMMAND_MENU_COMMANDS } from '@/command-menu/constants/CommandMenuCommands'; +import { mainContextStoreComponentInstanceIdState } from '@/context-store/states/mainContextStoreComponentInstanceId'; import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { ALL_ICONS } from '@ui/display/icon/providers/internal/AllIcons'; import { sortByProperty } from '~/utils/array/sortByProperty'; @@ -27,10 +29,43 @@ export const useCommandMenu = () => { goBackToPreviousHotkeyScope, } = usePreviousHotkeyScope(); - const openCommandMenu = useCallback(() => { - setIsCommandMenuOpened(true); - setHotkeyScopeAndMemorizePreviousScope(AppHotkeyScope.CommandMenuOpen); - }, [setHotkeyScopeAndMemorizePreviousScope, setIsCommandMenuOpened]); + const mainContextStoreComponentInstanceId = useRecoilValue( + mainContextStoreComponentInstanceIdState, + ); + + const openCommandMenu = useRecoilCallback( + ({ snapshot }) => + () => { + if (isDefined(mainContextStoreComponentInstanceId)) { + const actionMenuEntries = snapshot.getLoadable( + actionMenuEntriesComponentSelector.selectorFamily({ + instanceId: mainContextStoreComponentInstanceId, + }), + ); + + const actionCommands = actionMenuEntries + .getValue() + ?.map((actionMenuEntry) => ({ + id: actionMenuEntry.key, + label: actionMenuEntry.label, + Icon: actionMenuEntry.Icon, + onCommandClick: actionMenuEntry.onClick, + type: CommandType.Action, + })); + + setCommands(actionCommands); + } + + setIsCommandMenuOpened(true); + setHotkeyScopeAndMemorizePreviousScope(AppHotkeyScope.CommandMenuOpen); + }, + [ + mainContextStoreComponentInstanceId, + setCommands, + setHotkeyScopeAndMemorizePreviousScope, + setIsCommandMenuOpened, + ], + ); const closeCommandMenu = useRecoilCallback( ({ snapshot }) => diff --git a/packages/twenty-front/src/modules/command-menu/types/Command.ts b/packages/twenty-front/src/modules/command-menu/types/Command.ts index 38b430bb3..b43b23f9c 100644 --- a/packages/twenty-front/src/modules/command-menu/types/Command.ts +++ b/packages/twenty-front/src/modules/command-menu/types/Command.ts @@ -3,13 +3,14 @@ import { IconComponent } from 'twenty-ui'; export enum CommandType { Navigate = 'Navigate', Create = 'Create', + Action = 'Action', } export type Command = { id: string; - to: string; + to?: string; label: string; - type: CommandType.Navigate | CommandType.Create; + type: CommandType.Navigate | CommandType.Create | CommandType.Action; Icon?: IconComponent; firstHotKey?: string; secondHotKey?: string; diff --git a/packages/twenty-front/src/modules/context-store/components/SetMainContextStoreComponentInstanceIdEffect.tsx b/packages/twenty-front/src/modules/context-store/components/MainContextStoreComponentInstanceIdSetterEffect.tsx similarity index 91% rename from packages/twenty-front/src/modules/context-store/components/SetMainContextStoreComponentInstanceIdEffect.tsx rename to packages/twenty-front/src/modules/context-store/components/MainContextStoreComponentInstanceIdSetterEffect.tsx index b1acc25d8..cc838bb7e 100644 --- a/packages/twenty-front/src/modules/context-store/components/SetMainContextStoreComponentInstanceIdEffect.tsx +++ b/packages/twenty-front/src/modules/context-store/components/MainContextStoreComponentInstanceIdSetterEffect.tsx @@ -3,7 +3,7 @@ import { mainContextStoreComponentInstanceIdState } from '@/context-store/states import { useContext, useEffect } from 'react'; import { useSetRecoilState } from 'recoil'; -export const SetMainContextStoreComponentInstanceIdEffect = () => { +export const MainContextStoreComponentInstanceIdSetterEffect = () => { const setMainContextStoreComponentInstanceId = useSetRecoilState( mainContextStoreComponentInstanceIdState, ); diff --git a/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx b/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx index 3f41ab6ad..e21ec8456 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx @@ -71,7 +71,7 @@ export const RecordBoard = () => { useListenClickOutsideByClassName({ classNames: ['record-board-card'], - excludeClassNames: ['bottom-bar', 'action-menu-dropdown'], + excludeClassNames: ['bottom-bar', 'action-menu-dropdown', 'command-menu'], callback: resetRecordSelection, }); diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx index 3e2be27ee..a31e2597c 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx @@ -206,6 +206,7 @@ export const RecordIndexContainer = () => { viewBarId={recordIndexId} /> + {recordIndexViewType === ViewType.Table && ( <> { /> )} - + ); diff --git a/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx b/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx index 3a747b091..aae719251 100644 --- a/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx +++ b/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx @@ -1,5 +1,7 @@ import { useRecoilValue } from 'recoil'; +import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext'; +import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext'; import { isNewViewableRecordLoadingState } from '@/object-record/record-right-drawer/states/isNewViewableRecordLoading'; import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState'; import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState'; @@ -38,19 +40,29 @@ export const RightDrawerRecord = () => { ); return ( - - - {!isNewViewableRecordLoading && ( - - )} - - - + + + + + {!isNewViewableRecordLoading && ( + + )} + + + + + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx index 075b83cd3..79b194d2a 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx @@ -1,10 +1,11 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { ShowPageContainer } from '@/ui/layout/page/components/ShowPageContainer'; -import { SetMainContextStoreComponentInstanceIdEffect } from '@/context-store/components/SetMainContextStoreComponentInstanceIdEffect'; -import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext'; +import { MainContextStoreComponentInstanceIdSetterEffect } from '@/context-store/components/MainContextStoreComponentInstanceIdSetterEffect'; import { InformationBannerDeletedRecord } from '@/information-banner/components/deleted-record/InformationBannerDeletedRecord'; -import { RecordShowContainerContextStoreEffect } from '@/object-record/record-show/components/RecordShowContainerContextStoreEffect'; + +import { RecordShowContainerContextStoreObjectMetadataIdEffect } from '@/object-record/record-show/components/RecordShowContainerContextStoreObjectMetadataIdEffect'; +import { RecordShowContainerContextStoreTargetedRecordsEffect } from '@/object-record/record-show/components/RecordShowContainerContextStoreTargetedRecordsEffect'; import { useRecordShowContainerData } from '@/object-record/record-show/hooks/useRecordShowContainerData'; import { useRecordShowContainerTabs } from '@/object-record/record-show/hooks/useRecordShowContainerTabs'; import { ShowPageSubContainer } from '@/ui/layout/show-page/components/ShowPageSubContainer'; @@ -41,16 +42,15 @@ export const RecordShowContainer = ({ ); return ( - - + - {!isInRightDrawer && } + + {!isInRightDrawer && } {recordFromStore && recordFromStore.deletedAt && ( - + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainerContextStoreObjectMetadataIdEffect.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainerContextStoreObjectMetadataIdEffect.tsx new file mode 100644 index 000000000..79d0dce9d --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainerContextStoreObjectMetadataIdEffect.tsx @@ -0,0 +1,30 @@ +import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState'; +import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; +import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; +import { useEffect } from 'react'; + +export const RecordShowContainerContextStoreObjectMetadataIdEffect = ({ + recordId, + objectNameSingular, +}: { + recordId: string; + objectNameSingular: string; +}) => { + const setContextStoreCurrentObjectMetadataId = useSetRecoilComponentStateV2( + contextStoreCurrentObjectMetadataIdComponentState, + ); + + const { objectMetadataItem } = useObjectMetadataItem({ + objectNameSingular: objectNameSingular, + }); + + useEffect(() => { + setContextStoreCurrentObjectMetadataId(objectMetadataItem?.id); + + return () => { + setContextStoreCurrentObjectMetadataId(null); + }; + }, [recordId, setContextStoreCurrentObjectMetadataId, objectMetadataItem.id]); + + return null; +}; diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainerContextStoreEffect.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainerContextStoreTargetedRecordsEffect.tsx similarity index 61% rename from packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainerContextStoreEffect.tsx rename to packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainerContextStoreTargetedRecordsEffect.tsx index fe1c65796..176fce247 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainerContextStoreEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainerContextStoreTargetedRecordsEffect.tsx @@ -1,29 +1,17 @@ -import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState'; import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState'; import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState'; -import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { useEffect } from 'react'; -export const RecordShowContainerContextStoreEffect = ({ +export const RecordShowContainerContextStoreTargetedRecordsEffect = ({ recordId, - objectNameSingular, }: { recordId: string; - objectNameSingular: string; }) => { const setContextStoreTargetedRecordsRule = useSetRecoilComponentStateV2( contextStoreTargetedRecordsRuleComponentState, ); - const setContextStoreCurrentObjectMetadataId = useSetRecoilComponentStateV2( - contextStoreCurrentObjectMetadataIdComponentState, - ); - - const { objectMetadataItem } = useObjectMetadataItem({ - objectNameSingular: objectNameSingular, - }); - const setContextStoreNumberOfSelectedRecords = useSetRecoilComponentStateV2( contextStoreNumberOfSelectedRecordsComponentState, ); @@ -33,7 +21,6 @@ export const RecordShowContainerContextStoreEffect = ({ mode: 'selection', selectedRecordIds: [recordId], }); - setContextStoreCurrentObjectMetadataId(objectMetadataItem?.id); setContextStoreNumberOfSelectedRecords(1); return () => { @@ -41,14 +28,11 @@ export const RecordShowContainerContextStoreEffect = ({ mode: 'selection', selectedRecordIds: [], }); - setContextStoreCurrentObjectMetadataId(null); setContextStoreNumberOfSelectedRecords(0); }; }, [ recordId, setContextStoreTargetedRecordsRule, - setContextStoreCurrentObjectMetadataId, - objectMetadataItem?.id, setContextStoreNumberOfSelectedRecords, ]); diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableInternalEffect.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableInternalEffect.tsx index 828897b3b..c44d3a947 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableInternalEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableInternalEffect.tsx @@ -27,7 +27,7 @@ export const RecordTableInternalEffect = ({ useListenClickOutsideByClassName({ classNames: ['entity-table-cell'], - excludeClassNames: ['bottom-bar', 'action-menu-dropdown'], + excludeClassNames: ['bottom-bar', 'action-menu-dropdown', 'command-menu'], callback: () => { leaveTableFocus(); }, diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useTriggerActionMenuDropdown.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useTriggerActionMenuDropdown.ts index a651c22cf..132f7adfa 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useTriggerActionMenuDropdown.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useTriggerActionMenuDropdown.ts @@ -1,11 +1,13 @@ import { useRecoilCallback } from 'recoil'; +import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext'; import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-menu/states/recordIndexActionMenuDropdownPositionComponentState'; import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState'; import { isBottomBarOpenedComponentState } from '@/ui/layout/bottom-bar/states/isBottomBarOpenedComponentState'; import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState'; import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId'; import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue'; +import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; import { extractComponentFamilyState } from '@/ui/utilities/state/component-state/utils/extractComponentFamilyState'; import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState'; @@ -14,6 +16,10 @@ export const useTriggerActionMenuDropdown = ({ }: { recordTableId: string; }) => { + const actionMenuInstanceId = useAvailableComponentInstanceIdOrThrow( + ActionMenuComponentInstanceContext, + ); + const triggerActionMenuDropdown = useRecoilCallback( ({ set, snapshot }) => (event: React.MouseEvent, recordId: string) => { @@ -24,7 +30,7 @@ export const useTriggerActionMenuDropdown = ({ set( extractComponentState( recordIndexActionMenuDropdownPositionComponentState, - `action-menu-dropdown-${recordTableId}`, + `action-menu-dropdown-${actionMenuInstanceId}`, ), { x: event.clientX, @@ -48,19 +54,19 @@ export const useTriggerActionMenuDropdown = ({ const isActionMenuDropdownOpenState = extractComponentState( isDropdownOpenComponentState, - `action-menu-dropdown-${recordTableId}`, + `action-menu-dropdown-${actionMenuInstanceId}`, ); const isActionBarOpenState = isBottomBarOpenedComponentState.atomFamily( { - instanceId: `action-bar-${recordTableId}`, + instanceId: `action-bar-${actionMenuInstanceId}`, }, ); set(isActionBarOpenState, false); set(isActionMenuDropdownOpenState, true); }, - [recordTableId], + [actionMenuInstanceId, recordTableId], ); return { triggerActionMenuDropdown }; diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx index 6c538fe36..ba93026a5 100644 --- a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx +++ b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx @@ -1,5 +1,7 @@ import styled from '@emotion/styled'; +import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext'; +import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext'; import { RecordTableWithWrappers } from '@/object-record/record-table/components/RecordTableWithWrappers'; import { SignInBackgroundMockContainerEffect } from '@/sign-in-background-mock/components/SignInBackgroundMockContainerEffect'; import { ViewBar } from '@/views/components/ViewBar'; @@ -21,22 +23,32 @@ export const SignInBackgroundMockContainer = () => { return ( - {}} - optionsDropdownButton={<>} - /> - - {}} - /> + + + {}} + optionsDropdownButton={<>} + /> + + {}} + /> + + ); diff --git a/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx b/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx index 591684925..cde1a6a9d 100644 --- a/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx +++ b/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx @@ -219,6 +219,7 @@ export const Modal = ({ return ( diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx index 92ed242e7..01d36bac0 100644 --- a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx @@ -47,6 +47,10 @@ const StyledContainer = styled(motion.div)<{ isRightDrawerMinimized: boolean }>` right: 0; top: 0; z-index: 100; + + .modal-backdrop { + background: ${({ theme }) => theme.background.overlayTertiary}; + } `; const StyledRightDrawer = styled.div` diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx index 1c6777148..639c92926 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx @@ -1,4 +1,4 @@ -import { RecordShowActionMenu } from '@/action-menu/components/RecordShowActionMenu'; +import { RecordShowRightDrawerActionMenu } from '@/action-menu/components/RecordShowRightDrawerActionMenu'; import { Calendar } from '@/activities/calendar/components/Calendar'; import { EmailThreads } from '@/activities/emails/components/EmailThreads'; import { Attachments } from '@/activities/files/components/Attachments'; @@ -221,7 +221,7 @@ export const ShowPageSubContainer = ({ {isInRightDrawer && recordFromStore && !recordFromStore.deletedAt && ( - + )} diff --git a/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx b/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx index 6e7a2fb68..f52419335 100644 --- a/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx +++ b/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx @@ -1,7 +1,8 @@ import styled from '@emotion/styled'; import { useParams } from 'react-router-dom'; -import { SetMainContextStoreComponentInstanceIdEffect } from '@/context-store/components/SetMainContextStoreComponentInstanceIdEffect'; +import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext'; +import { MainContextStoreComponentInstanceIdSetterEffect } from '@/context-store/components/MainContextStoreComponentInstanceIdSetterEffect'; import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural'; @@ -81,13 +82,19 @@ export const RecordIndexPage = () => { - - - - + + + + + + diff --git a/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx b/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx index 8f2d489bf..77370c2da 100644 --- a/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx +++ b/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx @@ -1,6 +1,9 @@ import { useParams } from 'react-router-dom'; +import { RecordShowActionMenu } from '@/action-menu/components/RecordShowActionMenu'; +import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext'; import { TimelineActivityContext } from '@/activities/timeline-activities/contexts/TimelineActivityContext'; +import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { RecordShowContainer } from '@/object-record/record-show/components/RecordShowContainer'; import { useRecordShowPage } from '@/object-record/record-show/hooks/useRecordShowPage'; @@ -11,7 +14,6 @@ import { PageContainer } from '@/ui/layout/page/components/PageContainer'; import { PageTitle } from '@/ui/utilities/page-title/components/PageTitle'; import { RecordShowPageWorkflowHeader } from '@/workflow/components/RecordShowPageWorkflowHeader'; import { RecordShowPageWorkflowVersionHeader } from '@/workflow/components/RecordShowPageWorkflowVersionHeader'; -import { RecordShowPageBaseHeader } from '~/pages/object-record/RecordShowPageBaseHeader'; import { RecordShowPageHeader } from '~/pages/object-record/RecordShowPageHeader'; export const RecordShowPage = () => { @@ -38,49 +40,61 @@ export const RecordShowPage = () => { return ( - - - - + - <> - {objectNameSingular === CoreObjectNameSingular.Workflow ? ( - - ) : objectNameSingular === - CoreObjectNameSingular.WorkflowVersion ? ( - - ) : ( - - )} - - - - - + + + - - - + headerIcon={headerIcon} + > + <> + {objectNameSingular === CoreObjectNameSingular.Workflow ? ( + + ) : objectNameSingular === + CoreObjectNameSingular.WorkflowVersion ? ( + + ) : ( + <> + + + )} + + + + + + + + + + ); };