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 06217adc7..3e83e18e9 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 @@ -27,10 +27,6 @@ export const RecordActionMenuEntriesSetter = () => { FeatureFlagKey.IsWorkflowEnabled, ); - const isCommandMenuV2Enabled = useIsFeatureEnabled( - FeatureFlagKey.IsCommandMenuV2Enabled, - ); - if (!isDefined(contextStoreCurrentObjectMetadataItem)) { return null; } @@ -40,10 +36,7 @@ export const RecordActionMenuEntriesSetter = () => { contextStoreTargetedRecordsRule, ); - const actionConfig = getActionConfig( - contextStoreCurrentObjectMetadataItem, - isCommandMenuV2Enabled, - ); + const actionConfig = getActionConfig(contextStoreCurrentObjectMetadataItem); const actionsToRegister = isDefined(viewType) ? Object.values(actionConfig ?? {}).filter((action) => diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useDeleteSingleRecordAction.tsx b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useDeleteSingleRecordAction.tsx index acc44cc28..88fd6a02d 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useDeleteSingleRecordAction.tsx +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useDeleteSingleRecordAction.tsx @@ -1,6 +1,5 @@ import { useSelectedRecordIdOrThrow } from '@/action-menu/actions/record-actions/single-record/hooks/useSelectedRecordIdOrThrow'; import { ActionHookWithObjectMetadataItem } from '@/action-menu/actions/types/ActionHook'; -import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext'; import { useDeleteFavorite } from '@/favorites/hooks/useDeleteFavorite'; import { useFavorites } from '@/favorites/hooks/useFavorites'; import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord'; @@ -8,10 +7,9 @@ import { recordStoreFamilyState } from '@/object-record/record-store/states/reco import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; import { useHasObjectReadOnlyPermission } from '@/settings/roles/hooks/useHasObjectReadOnlyPermission'; import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal'; -import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer'; import { t } from '@lingui/core/macro'; import { isNull } from '@sniptt/guards'; -import { useCallback, useContext, useState } from 'react'; +import { useCallback, useState } from 'react'; import { useRecoilValue } from 'recoil'; import { isDefined } from 'twenty-shared'; import { getOsControlSymbol } from 'twenty-ui'; @@ -39,8 +37,6 @@ export const useDeleteSingleRecordAction: ActionHookWithObjectMetadataItem = ({ const { sortedFavorites: favorites } = useFavorites(); const { deleteFavorite } = useDeleteFavorite(); - const { closeRightDrawer } = useRightDrawer(); - const handleDeleteClick = useCallback(async () => { resetTableRowSelection(); @@ -63,8 +59,6 @@ export const useDeleteSingleRecordAction: ActionHookWithObjectMetadataItem = ({ const isRemoteObject = objectMetadataItem.isRemote; - const { isInRightDrawer } = useContext(ActionMenuContext); - const shouldBeRegistered = !isRemoteObject && isNull(selectedRecord?.deletedAt) && @@ -91,9 +85,6 @@ export const useDeleteSingleRecordAction: ActionHookWithObjectMetadataItem = ({ subtitle={t`Are you sure you want to delete this record? It can be recovered from the Command menu (${osControlSymbol} + K).`} onConfirmClick={() => { handleDeleteClick(); - if (isInRightDrawer) { - closeRightDrawer({ emitCloseEvent: false }); - } }} confirmButtonText={'Delete Record'} /> diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useDestroySingleRecordAction.tsx b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useDestroySingleRecordAction.tsx index ca017aef1..2962e44d0 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useDestroySingleRecordAction.tsx +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useDestroySingleRecordAction.tsx @@ -1,14 +1,12 @@ import { useSelectedRecordIdOrThrow } from '@/action-menu/actions/record-actions/single-record/hooks/useSelectedRecordIdOrThrow'; import { ActionHookWithObjectMetadataItem } from '@/action-menu/actions/types/ActionHook'; -import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext'; import { useDestroyOneRecord } from '@/object-record/hooks/useDestroyOneRecord'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; import { useHasObjectReadOnlyPermission } from '@/settings/roles/hooks/useHasObjectReadOnlyPermission'; import { AppPath } from '@/types/AppPath'; import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal'; -import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer'; -import { useCallback, useContext, useState } from 'react'; +import { useCallback, useState } from 'react'; import { useRecoilValue } from 'recoil'; import { isDefined } from 'twenty-shared'; import { useNavigateApp } from '~/hooks/useNavigateApp'; @@ -35,8 +33,6 @@ export const useDestroySingleRecordAction: ActionHookWithObjectMetadataItem = ({ const selectedRecord = useRecoilValue(recordStoreFamilyState(recordId)); - const { closeRightDrawer } = useRightDrawer(); - const handleDeleteClick = useCallback(async () => { resetTableRowSelection(); @@ -54,8 +50,6 @@ export const useDestroySingleRecordAction: ActionHookWithObjectMetadataItem = ({ const isRemoteObject = objectMetadataItem.isRemote; - const { isInRightDrawer } = useContext(ActionMenuContext); - const shouldBeRegistered = !hasObjectReadOnlyPermission && !isRemoteObject && @@ -82,9 +76,6 @@ export const useDestroySingleRecordAction: ActionHookWithObjectMetadataItem = ({ } onConfirmClick={async () => { await handleDeleteClick(); - if (isInRightDrawer) { - closeRightDrawer(); - } }} confirmButtonText={'Permanently Destroy Record'} /> diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useRestoreSingleRecordAction.tsx b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useRestoreSingleRecordAction.tsx index 1462ba37d..80abc8c22 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useRestoreSingleRecordAction.tsx +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useRestoreSingleRecordAction.tsx @@ -1,6 +1,5 @@ import { useSelectedRecordIdOrThrow } from '@/action-menu/actions/record-actions/single-record/hooks/useSelectedRecordIdOrThrow'; import { ActionHookWithObjectMetadataItem } from '@/action-menu/actions/types/ActionHook'; -import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext'; import { contextStoreCurrentViewTypeComponentState } from '@/context-store/states/contextStoreCurrentViewTypeComponentState'; import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType'; import { useRestoreManyRecords } from '@/object-record/hooks/useRestoreManyRecords'; @@ -9,9 +8,8 @@ import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTabl import { isSoftDeleteFilterActiveComponentState } from '@/object-record/record-table/states/isSoftDeleteFilterActiveComponentState'; import { useHasObjectReadOnlyPermission } from '@/settings/roles/hooks/useHasObjectReadOnlyPermission'; 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, useContext, useState } from 'react'; +import { useCallback, useState } from 'react'; import { useRecoilValue } from 'recoil'; import { isDefined } from 'twenty-shared'; @@ -35,8 +33,6 @@ export const useRestoreSingleRecordAction: ActionHookWithObjectMetadataItem = ({ const selectedRecord = useRecoilValue(recordStoreFamilyState(recordId)); - const { closeRightDrawer } = useRightDrawer(); - const handleRestoreClick = useCallback(async () => { resetTableRowSelection(); @@ -55,8 +51,6 @@ export const useRestoreSingleRecordAction: ActionHookWithObjectMetadataItem = ({ useRecoilComponentValueV2(contextStoreCurrentViewTypeComponentState) === ContextStoreViewType.ShowPage; - const { isInRightDrawer } = useContext(ActionMenuContext); - const shouldBeRegistered = !isRemoteObject && isDefined(selectedRecord?.deletedAt) && @@ -73,9 +67,6 @@ export const useRestoreSingleRecordAction: ActionHookWithObjectMetadataItem = ({ const handleConfirmClick = () => { handleRestoreClick(); - if (isInRightDrawer) { - closeRightDrawer({ emitCloseEvent: false }); - } }; return { diff --git a/packages/twenty-front/src/modules/action-menu/actions/utils/getActionConfig.ts b/packages/twenty-front/src/modules/action-menu/actions/utils/getActionConfig.ts index c63566eda..a7df5d492 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/utils/getActionConfig.ts +++ b/packages/twenty-front/src/modules/action-menu/actions/utils/getActionConfig.ts @@ -1,4 +1,3 @@ -import { DEFAULT_ACTIONS_CONFIG_V1 } from '@/action-menu/actions/record-actions/constants/DefaultActionsConfigV1'; import { DEFAULT_ACTIONS_CONFIG_V2 } from '@/action-menu/actions/record-actions/constants/DefaultActionsConfigV2'; import { WORKFLOW_ACTIONS_CONFIG } from '@/action-menu/actions/record-actions/constants/WorkflowActionsConfig'; import { WORKFLOW_RUNS_ACTIONS_CONFIG } from '@/action-menu/actions/record-actions/constants/WorkflowRunsActionsConfig'; @@ -6,10 +5,7 @@ import { WORKFLOW_VERSIONS_ACTIONS_CONFIG } from '@/action-menu/actions/record-a import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; -export const getActionConfig = ( - objectMetadataItem: ObjectMetadataItem, - isCommandMenuV2Enabled: boolean, -) => { +export const getActionConfig = (objectMetadataItem: ObjectMetadataItem) => { switch (objectMetadataItem.nameSingular) { case CoreObjectNameSingular.Workflow: return WORKFLOW_ACTIONS_CONFIG; @@ -18,8 +14,6 @@ export const getActionConfig = ( case CoreObjectNameSingular.WorkflowRun: return WORKFLOW_RUNS_ACTIONS_CONFIG; default: - return isCommandMenuV2Enabled - ? DEFAULT_ACTIONS_CONFIG_V2 - : DEFAULT_ACTIONS_CONFIG_V1; + return DEFAULT_ACTIONS_CONFIG_V2; } }; diff --git a/packages/twenty-front/src/modules/action-menu/components/CmdEnterActionButton.tsx b/packages/twenty-front/src/modules/action-menu/components/CmdEnterActionButton.tsx index bbc492cb8..1d113e000 100644 --- a/packages/twenty-front/src/modules/action-menu/components/CmdEnterActionButton.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/CmdEnterActionButton.tsx @@ -1,10 +1,7 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; +import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope'; import { Key } from 'ts-key-enum'; import { Button, getOsControlSymbol } from 'twenty-ui'; -import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope'; -import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope'; -import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; -import { FeatureFlagKey } from '~/generated/graphql'; export const CmdEnterActionButton = ({ title, @@ -15,15 +12,10 @@ export const CmdEnterActionButton = ({ onClick: () => void; disabled?: boolean; }) => { - const isCommandMenuV2Enabled = useIsFeatureEnabled( - FeatureFlagKey.IsCommandMenuV2Enabled, - ); useScopedHotkeys( [`${Key.Control}+${Key.Enter}`, `${Key.Meta}+${Key.Enter}`], () => onClick(), - isCommandMenuV2Enabled - ? AppHotkeyScope.CommandMenuOpen - : RightDrawerHotkeyScope.RightDrawer, + AppHotkeyScope.CommandMenuOpen, [onClick], ); 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 6bad7e63a..ee57a95c9 100644 --- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx @@ -3,10 +3,8 @@ import { MultipleRecordsActionKeys } from '@/action-menu/actions/record-actions/ import { RecordAgnosticActionMenuEntriesSetter } from '@/action-menu/actions/record-agnostic-actions/components/RecordAgnosticActionMenuEntriesSetter'; import { RunWorkflowRecordAgnosticActionMenuEntriesSetter } from '@/action-menu/actions/record-agnostic-actions/components/RunWorkflowRecordAgnosticActionMenuEntriesSetter'; import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals'; -import { RecordIndexActionMenuBar } from '@/action-menu/components/RecordIndexActionMenuBar'; import { RecordIndexActionMenuButtons } from '@/action-menu/components/RecordIndexActionMenuButtons'; import { RecordIndexActionMenuDropdown } from '@/action-menu/components/RecordIndexActionMenuDropdown'; -import { RecordIndexActionMenuEffect } from '@/action-menu/components/RecordIndexActionMenuEffect'; import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext'; import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState'; import { isRecordIndexLoadMoreLockedComponentState } from '@/object-record/record-index/states/isRecordIndexLoadMoreLockedComponentState'; @@ -21,10 +19,6 @@ export const RecordIndexActionMenu = ({ indexId }: { indexId: string }) => { contextStoreCurrentObjectMetadataItemComponentState, ); - const isCommandMenuV2Enabled = useIsFeatureEnabled( - FeatureFlagKey.IsCommandMenuV2Enabled, - ); - const isWorkflowEnabled = useIsFeatureEnabled( FeatureFlagKey.IsWorkflowEnabled, ); @@ -54,14 +48,9 @@ export const RecordIndexActionMenu = ({ indexId }: { indexId: string }) => { }, }} > - {isCommandMenuV2Enabled ? ( - <>{!isMobile && } - ) : ( - - )} + {!isMobile && } - {isWorkflowEnabled && ( diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBar.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBar.tsx deleted file mode 100644 index bdecf9e79..000000000 --- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBar.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { RecordIndexActionMenuBarAllActionsButton } from '@/action-menu/components/RecordIndexActionMenuBarAllActionsButton'; -import { RecordIndexActionMenuBarEntry } from '@/action-menu/components/RecordIndexActionMenuBarEntry'; -import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector'; -import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext'; -import { ActionBarHotkeyScope } from '@/action-menu/types/ActionBarHotKeyScope'; -import { getActionBarIdFromActionMenuId } from '@/action-menu/utils/getActionBarIdFromActionMenuId'; -import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState'; -import { BottomBar } from '@/ui/layout/bottom-bar/components/BottomBar'; -import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; -import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; -import styled from '@emotion/styled'; - -const StyledLabel = styled.div` - color: ${({ theme }) => theme.font.color.tertiary}; - font-size: ${({ theme }) => theme.font.size.md}; - font-weight: ${({ theme }) => theme.font.weight.medium}; - padding-left: ${({ theme }) => theme.spacing(2)}; - padding-right: ${({ theme }) => theme.spacing(2)}; -`; - -export const RecordIndexActionMenuBar = () => { - const contextStoreNumberOfSelectedRecords = useRecoilComponentValueV2( - contextStoreNumberOfSelectedRecordsComponentState, - ); - - const actionMenuId = useAvailableComponentInstanceIdOrThrow( - ActionMenuComponentInstanceContext, - ); - - const actionMenuEntries = useRecoilComponentValueV2( - actionMenuEntriesComponentSelector, - ); - - const pinnedEntries = actionMenuEntries.filter((entry) => entry.isPinned); - if (contextStoreNumberOfSelectedRecords === 0) { - return null; - } - - return ( - - {contextStoreNumberOfSelectedRecords} selected: - {pinnedEntries.map((entry, index) => ( - - ))} - - - ); -}; diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuEffect.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuEffect.tsx deleted file mode 100644 index 66d49da9a..000000000 --- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuEffect.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { useActionMenu } from '@/action-menu/hooks/useActionMenu'; -import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext'; -import { getActionBarIdFromActionMenuId } from '@/action-menu/utils/getActionBarIdFromActionMenuId'; -import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId'; -import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState'; -import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState'; -import { isBottomBarOpenedComponentState } from '@/ui/layout/bottom-bar/states/isBottomBarOpenedComponentState'; -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 { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; -import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState'; -import { useEffect } from 'react'; -import { useRecoilValue } from 'recoil'; - -export const RecordIndexActionMenuEffect = () => { - const contextStoreNumberOfSelectedRecords = useRecoilComponentValueV2( - contextStoreNumberOfSelectedRecordsComponentState, - ); - - const actionMenuId = useAvailableComponentInstanceIdOrThrow( - ActionMenuComponentInstanceContext, - ); - - const { openActionBar, closeActionBar } = useActionMenu(actionMenuId); - - // Using closeActionBar here was causing a bug because it goes back to the - // previous hotkey scope, and we don't want that here. - const setIsBottomBarOpened = useSetRecoilComponentStateV2( - isBottomBarOpenedComponentState, - getActionBarIdFromActionMenuId(actionMenuId), - ); - - const isDropdownOpen = useRecoilValue( - extractComponentState( - isDropdownOpenComponentState, - getActionMenuDropdownIdFromActionMenuId(actionMenuId), - ), - ); - const { isRightDrawerOpen } = useRightDrawer(); - - const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState); - - useEffect(() => { - if ( - contextStoreNumberOfSelectedRecords > 0 && - !isDropdownOpen && - !isRightDrawerOpen && - !isCommandMenuOpened - ) { - // We only handle opening the ActionMenuBar here, not the Dropdown. - // The Dropdown is already managed by sync handlers for events like - // right-click to open and click outside to close. - openActionBar(); - } - if (contextStoreNumberOfSelectedRecords === 0 && isDropdownOpen) { - closeActionBar(); - } - }, [ - contextStoreNumberOfSelectedRecords, - openActionBar, - closeActionBar, - isDropdownOpen, - isRightDrawerOpen, - isCommandMenuOpened, - ]); - - useEffect(() => { - if (isRightDrawerOpen || isCommandMenuOpened) { - setIsBottomBarOpened(false); - } - }, [isRightDrawerOpen, isCommandMenuOpened, setIsBottomBarOpened]); - - 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 cdc648865..bc6c74b76 100644 --- a/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx @@ -5,40 +5,19 @@ import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMen import { RecordShowActionMenuButtons } from '@/action-menu/components/RecordShowActionMenuButtons'; import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext'; import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState'; -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 { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; import { FeatureFlagKey } from '~/generated/graphql'; -import { RecordShowPageBaseHeader } from '~/pages/object-record/RecordShowPageBaseHeader'; -export const RecordShowActionMenu = ({ - isFavorite, - record, - objectMetadataItem, - objectNameSingular, - handleFavoriteButtonClick, -}: { - isFavorite: boolean; - record: ObjectRecord | undefined; - objectMetadataItem: ObjectMetadataItem; - objectNameSingular: string; - handleFavoriteButtonClick: () => void; -}) => { +export const RecordShowActionMenu = () => { const contextStoreCurrentObjectMetadataItem = useRecoilComponentValueV2( contextStoreCurrentObjectMetadataItemComponentState, ); - const isCommandMenuV2Enabled = useIsFeatureEnabled( - FeatureFlagKey.IsCommandMenuV2Enabled, - ); - const isWorkflowEnabled = useIsFeatureEnabled( FeatureFlagKey.IsWorkflowEnabled, ); - // TODO: refactor RecordShowPageBaseHeader to use the context store - return ( <> {contextStoreCurrentObjectMetadataItem && ( @@ -48,19 +27,7 @@ export const RecordShowActionMenu = ({ onActionExecutedCallback: () => {}, }} > - {isCommandMenuV2Enabled ? ( - - ) : ( - - )} + diff --git a/packages/twenty-front/src/modules/action-menu/components/RightDrawerActionMenuDropdown.tsx b/packages/twenty-front/src/modules/action-menu/components/RightDrawerActionMenuDropdown.tsx index b7e7f219e..cedd1f732 100644 --- a/packages/twenty-front/src/modules/action-menu/components/RightDrawerActionMenuDropdown.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/RightDrawerActionMenuDropdown.tsx @@ -6,17 +6,14 @@ import { getRightDrawerActionMenuDropdownIdFromActionMenuId } from '@/action-men import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdownV2 } from '@/ui/layout/dropdown/hooks/useDropdownV2'; -import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope'; import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; -import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; import { useTheme } from '@emotion/react'; import { i18n } from '@lingui/core'; import { Key } from 'ts-key-enum'; -import { Button, MenuItem, getOsControlSymbol } from 'twenty-ui'; -import { FeatureFlagKey } from '~/generated/graphql'; +import { Button, getOsControlSymbol, MenuItem } from 'twenty-ui'; export const RightDrawerActionMenuDropdown = () => { const actionMenuEntries = useRecoilComponentValueV2( @@ -31,10 +28,6 @@ export const RightDrawerActionMenuDropdown = () => { const theme = useTheme(); - const isCommandMenuV2Enabled = useIsFeatureEnabled( - FeatureFlagKey.IsCommandMenuV2Enabled, - ); - useScopedHotkeys( [Key.Escape, 'ctrl+o,meta+o'], () => { @@ -53,9 +46,7 @@ export const RightDrawerActionMenuDropdown = () => { getRightDrawerActionMenuDropdownIdFromActionMenuId(actionMenuId), ); }, - isCommandMenuV2Enabled - ? AppHotkeyScope.CommandMenuOpen - : RightDrawerHotkeyScope.RightDrawer, + AppHotkeyScope.CommandMenuOpen, [openDropdown], ); diff --git a/packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuBar.stories.tsx b/packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuBar.stories.tsx deleted file mode 100644 index 539f45776..000000000 --- a/packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuBar.stories.tsx +++ /dev/null @@ -1,141 +0,0 @@ -import { RecordIndexActionMenuBar } from '@/action-menu/components/RecordIndexActionMenuBar'; -import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState'; -import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext'; -import { - ActionMenuEntry, - ActionMenuEntryScope, - ActionMenuEntryType, -} from '@/action-menu/types/ActionMenuEntry'; -import { getActionBarIdFromActionMenuId } from '@/action-menu/utils/getActionBarIdFromActionMenuId'; -import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState'; -import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState'; -import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext'; -import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext'; -import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext'; -import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext'; -import { isBottomBarOpenedComponentState } from '@/ui/layout/bottom-bar/states/isBottomBarOpenedComponentState'; -import { msg } from '@lingui/core/macro'; -import { expect, jest } from '@storybook/jest'; -import { Meta, StoryObj } from '@storybook/react'; -import { userEvent, waitFor, within } from '@storybook/test'; -import { RecoilRoot } from 'recoil'; -import { IconTrash, RouterDecorator } from 'twenty-ui'; -import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; - -const deleteMock = jest.fn(); - -const meta: Meta = { - title: 'Modules/ActionMenu/RecordIndexActionMenuBar', - component: RecordIndexActionMenuBar, - decorators: [ - RouterDecorator, - I18nFrontDecorator, - (Story) => ( - - - - - { - set( - contextStoreTargetedRecordsRuleComponentState.atomFamily({ - instanceId: 'story-action-menu', - }), - { - mode: 'selection', - selectedRecordIds: ['1', '2', '3'], - }, - ); - set( - contextStoreNumberOfSelectedRecordsComponentState.atomFamily( - { - instanceId: 'story-action-menu', - }, - ), - 3, - ); - const map = new Map(); - map.set('delete', { - isPinned: true, - scope: ActionMenuEntryScope.RecordSelection, - type: ActionMenuEntryType.Standard, - key: 'delete', - label: msg`Delete`, - position: 0, - Icon: IconTrash, - onClick: deleteMock, - }); - set( - actionMenuEntriesComponentState.atomFamily({ - instanceId: 'story-action-menu', - }), - map, - ); - set( - isBottomBarOpenedComponentState.atomFamily({ - instanceId: - getActionBarIdFromActionMenuId('story-action-menu'), - }), - true, - ); - }} - > - - - - - - - - - ), - ], - args: { - actionMenuId: 'story-action-menu', - }, -}; - -export default meta; - -type Story = StoryObj; - -export const Default: Story = { - args: { - actionMenuId: 'story-action-menu', - }, -}; - -export const WithCustomSelection: Story = { - args: { - actionMenuId: 'story-action-menu', - }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - const selectionText = await canvas.findByText('3 selected:'); - expect(selectionText).toBeInTheDocument(); - }, -}; - -export const WithButtonClicks: Story = { - args: { - actionMenuId: 'story-action-menu', - }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - const deleteButton = await canvas.findByText('Delete'); - await userEvent.click(deleteButton); - await waitFor(() => { - expect(deleteMock).toHaveBeenCalled(); - }); - }, -}; diff --git a/packages/twenty-front/src/modules/action-menu/hooks/__tests__/useActionMenu.test.ts b/packages/twenty-front/src/modules/action-menu/hooks/__tests__/useActionMenu.test.ts deleted file mode 100644 index aa0078596..000000000 --- a/packages/twenty-front/src/modules/action-menu/hooks/__tests__/useActionMenu.test.ts +++ /dev/null @@ -1,82 +0,0 @@ -import { getActionBarIdFromActionMenuId } from '@/action-menu/utils/getActionBarIdFromActionMenuId'; -import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId'; -import { renderHook } from '@testing-library/react'; -import { act } from 'react'; -import { useActionMenu } from '../useActionMenu'; - -const openBottomBar = jest.fn(); -const closeBottomBar = jest.fn(); -const openDropdown = jest.fn(); -const closeDropdown = jest.fn(); - -jest.mock('@/ui/layout/bottom-bar/hooks/useBottomBar', () => ({ - useBottomBar: jest.fn(() => ({ - openBottomBar: openBottomBar, - closeBottomBar: closeBottomBar, - })), -})); - -jest.mock('@/ui/layout/dropdown/hooks/useDropdownV2', () => ({ - useDropdownV2: jest.fn(() => ({ - openDropdown: openDropdown, - closeDropdown: closeDropdown, - })), -})); - -describe('useActionMenu', () => { - const actionMenuId = 'test-action-menu'; - const actionBarId = getActionBarIdFromActionMenuId(actionMenuId); - const actionMenuDropdownId = - getActionMenuDropdownIdFromActionMenuId(actionMenuId); - - it('should return the correct functions', () => { - const { result } = renderHook(() => useActionMenu(actionMenuId)); - - expect(result.current).toHaveProperty('openActionMenuDropdown'); - expect(result.current).toHaveProperty('openActionBar'); - expect(result.current).toHaveProperty('closeActionBar'); - expect(result.current).toHaveProperty('closeActionMenuDropdown'); - }); - - it('should call the correct functions when opening action menu dropdown', () => { - const { result } = renderHook(() => useActionMenu(actionMenuId)); - - act(() => { - result.current.openActionMenuDropdown(); - }); - - expect(closeBottomBar).toHaveBeenCalledWith(actionBarId); - expect(openDropdown).toHaveBeenCalledWith(actionMenuDropdownId); - }); - - it('should call the correct functions when opening action bar', () => { - const { result } = renderHook(() => useActionMenu(actionMenuId)); - - act(() => { - result.current.openActionBar(); - }); - - expect(closeDropdown).toHaveBeenCalledWith(actionMenuDropdownId); - expect(openBottomBar).toHaveBeenCalledWith(actionBarId); - }); - - it('should call the correct function when closing action menu dropdown', () => { - const { result } = renderHook(() => useActionMenu(actionMenuId)); - - act(() => { - result.current.closeActionMenuDropdown(); - }); - - expect(closeDropdown).toHaveBeenCalledWith(actionMenuDropdownId); - }); - - it('should call the correct function when closing action bar', () => { - const { result } = renderHook(() => useActionMenu(actionMenuId)); - - act(() => { - result.current.closeActionBar(); - }); - - expect(closeBottomBar).toHaveBeenCalledWith(actionBarId); - }); -}); diff --git a/packages/twenty-front/src/modules/action-menu/hooks/useActionMenu.ts b/packages/twenty-front/src/modules/action-menu/hooks/useActionMenu.ts deleted file mode 100644 index 109bd1ee5..000000000 --- a/packages/twenty-front/src/modules/action-menu/hooks/useActionMenu.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { getActionBarIdFromActionMenuId } from '@/action-menu/utils/getActionBarIdFromActionMenuId'; -import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId'; -import { useBottomBar } from '@/ui/layout/bottom-bar/hooks/useBottomBar'; -import { useDropdownV2 } from '@/ui/layout/dropdown/hooks/useDropdownV2'; - -export const useActionMenu = (actionMenuId: string) => { - const { openDropdown, closeDropdown } = useDropdownV2(); - const { openBottomBar, closeBottomBar } = useBottomBar(); - - const actionBarId = getActionBarIdFromActionMenuId(actionMenuId); - const actionMenuDropdownId = - getActionMenuDropdownIdFromActionMenuId(actionMenuId); - - const openActionMenuDropdown = () => { - closeBottomBar(actionBarId); - openDropdown(actionMenuDropdownId); - }; - - const openActionBar = () => { - closeDropdown(actionMenuDropdownId); - openBottomBar(actionBarId); - }; - - const closeActionMenuDropdown = () => { - closeDropdown(actionMenuDropdownId); - }; - - const closeActionBar = () => { - closeBottomBar(actionBarId); - }; - - return { - openActionMenuDropdown, - openActionBar, - closeActionBar, - closeActionMenuDropdown, - }; -}; diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx index 2f29177c5..1e9e1a761 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -1,7 +1,6 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useRef } from 'react'; -import { useRecoilValue } from 'recoil'; import { IconCheck, IconQuestionMark, IconX } from 'twenty-ui'; import { CalendarEventParticipant } from '@/activities/calendar/types/CalendarEventParticipant'; @@ -9,7 +8,6 @@ import { ParticipantChip } from '@/activities/components/ParticipantChip'; import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox'; import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay'; import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList'; -import { isRightDrawerAnimationCompletedState } from '@/ui/layout/right-drawer/states/isRightDrawerAnimationCompletedState'; const StyledInlineCellBaseContainer = styled.div` align-items: center; @@ -68,9 +66,6 @@ export const CalendarEventParticipantsResponseStatusField = ({ participants: CalendarEventParticipant[]; }) => { const theme = useTheme(); - const isRightDrawerAnimationCompleted = useRecoilValue( - isRightDrawerAnimationCompletedState, - ); const Icon = { Yes: , @@ -103,9 +98,7 @@ export const CalendarEventParticipantsResponseStatusField = ({ - {isRightDrawerAnimationCompleted && ( - {styledChips} - )} + {styledChips} diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx index 9d986988c..60deb9f74 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx @@ -6,13 +6,11 @@ import { useRecoilValue } from 'recoil'; import { CalendarCurrentEventCursor } from '@/activities/calendar/components/CalendarCurrentEventCursor'; import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext'; -import { useOpenCalendarEventRightDrawer } from '@/activities/calendar/right-drawer/hooks/useOpenCalendarEventRightDrawer'; import { getCalendarEventEndDate } from '@/activities/calendar/utils/getCalendarEventEndDate'; import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalendarEventStartDate'; import { hasCalendarEventEnded } from '@/activities/calendar/utils/hasCalendarEventEnded'; import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState'; import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu'; -import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; import { isDefined } from 'twenty-shared'; import { Avatar, @@ -24,7 +22,6 @@ import { } from 'twenty-ui'; import { CalendarChannelVisibility, - FeatureFlagKey, TimelineCalendarEvent, } from '~/generated-metadata/graphql'; @@ -117,11 +114,7 @@ export const CalendarEventRow = ({ const theme = useTheme(); const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); const { displayCurrentEventCursor = false } = useContext(CalendarContext); - const { openCalendarEventRightDrawer } = useOpenCalendarEventRightDrawer(); const { openCalendarEventInCommandMenu } = useCommandMenu(); - const isCommandMenuV2Enabled = useIsFeatureEnabled( - FeatureFlagKey.IsCommandMenuV2Enabled, - ); const startsAt = getCalendarEventStartDate(calendarEvent); const endsAt = getCalendarEventEndDate(calendarEvent); @@ -145,11 +138,7 @@ export const CalendarEventRow = ({ onClick={ showTitle ? () => { - if (isCommandMenuV2Enabled) { - openCalendarEventInCommandMenu(calendarEvent.id); - } else { - openCalendarEventRightDrawer(calendarEvent.id); - } + openCalendarEventInCommandMenu(calendarEvent.id); } : undefined } diff --git a/packages/twenty-front/src/modules/activities/calendar/right-drawer/components/RightDrawerCalendarEvent.tsx b/packages/twenty-front/src/modules/activities/calendar/right-drawer/components/RightDrawerCalendarEvent.tsx deleted file mode 100644 index 4e3ee38ae..000000000 --- a/packages/twenty-front/src/modules/activities/calendar/right-drawer/components/RightDrawerCalendarEvent.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { useRecoilValue } from 'recoil'; - -import { CalendarEventDetails } from '@/activities/calendar/components/CalendarEventDetails'; -import { CalendarEventDetailsEffect } from '@/activities/calendar/components/CalendarEventDetailsEffect'; -import { FIND_ONE_CALENDAR_EVENT_OPERATION_SIGNATURE } from '@/activities/calendar/graphql/operation-signatures/FindOneCalendarEventOperationSignature'; -import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent'; -import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord'; -import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState'; -import { RecordValueSetterEffect } from '@/object-record/record-store/components/RecordValueSetterEffect'; -import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; -import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore'; - -export const RightDrawerCalendarEvent = () => { - const { upsertRecords } = useUpsertRecordsInStore(); - const viewableRecordId = useRecoilValue(viewableRecordIdState); - - const { record: calendarEvent } = useFindOneRecord({ - objectNameSingular: - FIND_ONE_CALENDAR_EVENT_OPERATION_SIGNATURE.objectNameSingular, - objectRecordId: viewableRecordId ?? '', - recordGqlFields: FIND_ONE_CALENDAR_EVENT_OPERATION_SIGNATURE.fields, - onCompleted: (record) => upsertRecords([record]), - }); - - if (!calendarEvent) { - return null; - } - - return ( - - - - - - ); -}; diff --git a/packages/twenty-front/src/modules/activities/calendar/right-drawer/hooks/__tests__/useOpenCalendarEventRightDrawer.test.tsx b/packages/twenty-front/src/modules/activities/calendar/right-drawer/hooks/__tests__/useOpenCalendarEventRightDrawer.test.tsx deleted file mode 100644 index 980160850..000000000 --- a/packages/twenty-front/src/modules/activities/calendar/right-drawer/hooks/__tests__/useOpenCalendarEventRightDrawer.test.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { act, renderHook } from '@testing-library/react'; -import { RecoilRoot, useRecoilValue } from 'recoil'; - -import { useOpenCalendarEventRightDrawer } from '@/activities/calendar/right-drawer/hooks/useOpenCalendarEventRightDrawer'; -import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState'; -import { isRightDrawerOpenState } from '@/ui/layout/right-drawer/states/isRightDrawerOpenState'; - -describe('useOpenCalendarEventRightDrawer', () => { - it('opens the right drawer with the calendar event', () => { - const { result } = renderHook( - () => { - const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState); - const viewableRecordId = useRecoilValue(viewableRecordIdState); - return { - ...useOpenCalendarEventRightDrawer(), - isRightDrawerOpen, - viewableRecordId, - }; - }, - { wrapper: RecoilRoot }, - ); - - expect(result.current.isRightDrawerOpen).toBe(false); - expect(result.current.viewableRecordId).toBeNull(); - - act(() => { - result.current.openCalendarEventRightDrawer('1234'); - }); - - expect(result.current.isRightDrawerOpen).toBe(true); - expect(result.current.viewableRecordId).toBe('1234'); - }); -}); diff --git a/packages/twenty-front/src/modules/activities/calendar/right-drawer/hooks/useOpenCalendarEventRightDrawer.ts b/packages/twenty-front/src/modules/activities/calendar/right-drawer/hooks/useOpenCalendarEventRightDrawer.ts deleted file mode 100644 index 4575eb875..000000000 --- a/packages/twenty-front/src/modules/activities/calendar/right-drawer/hooks/useOpenCalendarEventRightDrawer.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { useSetRecoilState } from 'recoil'; - -import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState'; -import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer'; -import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope'; -import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages'; -import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; -import { IconCalendarEvent } from 'twenty-ui'; - -export const useOpenCalendarEventRightDrawer = () => { - const { openRightDrawer } = useRightDrawer(); - const setHotkeyScope = useSetHotkeyScope(); - const setViewableRecordId = useSetRecoilState(viewableRecordIdState); - - const openCalendarEventRightDrawer = (calendarEventId: string) => { - setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false }); - openRightDrawer(RightDrawerPages.ViewCalendarEvent, { - title: 'Calendar Event', - Icon: IconCalendarEvent, - }); - setViewableRecordId(calendarEventId); - }; - - return { openCalendarEventRightDrawer }; -}; diff --git a/packages/twenty-front/src/modules/activities/components/ActivityRichTextEditor.tsx b/packages/twenty-front/src/modules/activities/components/ActivityRichTextEditor.tsx index 036f2510e..112a9694f 100644 --- a/packages/twenty-front/src/modules/activities/components/ActivityRichTextEditor.tsx +++ b/packages/twenty-front/src/modules/activities/components/ActivityRichTextEditor.tsx @@ -1,38 +1,35 @@ import { useApolloClient } from '@apollo/client'; -import { PartialBlock } from '@blocknote/core'; -import { useCreateBlockNote } from '@blocknote/react'; -import { isArray, isNonEmptyString } from '@sniptt/guards'; import { useCallback, useMemo } from 'react'; import { useRecoilCallback, useRecoilState } from 'recoil'; -import { Key } from 'ts-key-enum'; -import { useDebouncedCallback } from 'use-debounce'; import { v4 } from 'uuid'; +import { BLOCK_SCHEMA } from '@/activities/blocks/constants/Schema'; +import { useUploadAttachmentFile } from '@/activities/files/hooks/useUploadAttachmentFile'; import { useUpsertActivity } from '@/activities/hooks/useUpsertActivity'; import { canCreateActivityState } from '@/activities/states/canCreateActivityState'; import { ActivityEditorHotkeyScope } from '@/activities/types/ActivityEditorHotkeyScope'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; +import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { modifyRecordFromCache } from '@/object-record/cache/utils/modifyRecordFromCache'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; -import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope'; import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; +import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope'; import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritingKey'; +import { Key } from 'ts-key-enum'; import { isDefined } from 'twenty-shared'; +import { useDebouncedCallback } from 'use-debounce'; -import { BLOCK_SCHEMA } from '@/activities/blocks/constants/Schema'; import { ActivityRichTextEditorChangeOnActivityIdEffect } from '@/activities/components/ActivityRichTextEditorChangeOnActivityIdEffect'; -import { useUploadAttachmentFile } from '@/activities/files/hooks/useUploadAttachmentFile'; import { Note } from '@/activities/types/Note'; import { Task } from '@/activities/types/Task'; -import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { BlockEditor } from '@/ui/input/editor/components/BlockEditor'; -import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope'; -import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; +import { PartialBlock } from '@blocknote/core'; import '@blocknote/core/fonts/inter.css'; import '@blocknote/mantine/style.css'; +import { useCreateBlockNote } from '@blocknote/react'; import '@blocknote/react/style.css'; -import { FeatureFlagKey } from '~/generated/graphql'; +import { isArray, isNonEmptyString } from '@sniptt/guards'; type ActivityRichTextEditorProps = { activityId: string; @@ -50,10 +47,6 @@ export const ActivityRichTextEditor = ({ const cache = useApolloClient().cache; const activity = activityInStore as Task | Note | null; - const isCommandMenuV2Enabled = useIsFeatureEnabled( - FeatureFlagKey.IsCommandMenuV2Enabled, - ); - const { objectMetadataItem: objectMetadataItemActivity } = useObjectMetadataItem({ objectNameSingular: activityObjectNameSingular, @@ -280,9 +273,7 @@ export const ActivityRichTextEditor = ({ editor.setTextCursorPosition(newBlockId, 'end'); editor.focus(); }, - isCommandMenuV2Enabled - ? AppHotkeyScope.CommandMenuOpen - : RightDrawerHotkeyScope.RightDrawer, + AppHotkeyScope.CommandMenuOpen, [], { preventDefault: false, diff --git a/packages/twenty-front/src/modules/activities/copilot/right-drawer/components/RightDrawerAIChat.tsx b/packages/twenty-front/src/modules/activities/copilot/right-drawer/components/RightDrawerAIChat.tsx deleted file mode 100644 index 4ad2c423c..000000000 --- a/packages/twenty-front/src/modules/activities/copilot/right-drawer/components/RightDrawerAIChat.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import styled from '@emotion/styled'; -import { useSetRecoilState } from 'recoil'; - -import { copilotQueryState } from '@/activities/copilot/right-drawer/states/copilotQueryState'; -import { - AutosizeTextInput, - AutosizeTextInputVariant, -} from '@/ui/input/components/AutosizeTextInput'; - -const StyledContainer = styled.div` - box-sizing: border-box; - display: flex; - flex-direction: column; - height: 100%; - justify-content: flex-start; - overflow-y: auto; - position: relative; -`; - -const StyledChatArea = styled.div` - flex: 1; - display: flex; - flex-direction: column; - overflow-y: scroll; - padding: ${({ theme }) => theme.spacing(6)}; - padding-bottom: 0px; -`; - -const StyledNewMessageArea = styled.div` - display: flex; - flex-direction: column; - padding: ${({ theme }) => theme.spacing(6)}; - padding-top: 0px; -`; - -export const RightDrawerAIChat = () => { - const setCopilotQuery = useSetRecoilState(copilotQueryState); - - return ( - - {/* TODO */} - - { - setCopilotQuery(text); - }} - /> - - - ); -}; diff --git a/packages/twenty-front/src/modules/activities/copilot/right-drawer/hooks/useOpenCopilotRightDrawer.ts b/packages/twenty-front/src/modules/activities/copilot/right-drawer/hooks/useOpenCopilotRightDrawer.ts deleted file mode 100644 index 8b3e8b4cb..000000000 --- a/packages/twenty-front/src/modules/activities/copilot/right-drawer/hooks/useOpenCopilotRightDrawer.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer'; -import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope'; -import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages'; -import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; -import { IconSparkles } from 'twenty-ui'; - -export const useOpenCopilotRightDrawer = () => { - const { openRightDrawer } = useRightDrawer(); - const setHotkeyScope = useSetHotkeyScope(); - - return () => { - setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false }); - openRightDrawer(RightDrawerPages.Copilot, { - title: 'Copilot', - Icon: IconSparkles, - }); - }; -}; diff --git a/packages/twenty-front/src/modules/activities/copilot/right-drawer/states/copilotQueryState.ts b/packages/twenty-front/src/modules/activities/copilot/right-drawer/states/copilotQueryState.ts deleted file mode 100644 index b2782ace4..000000000 --- a/packages/twenty-front/src/modules/activities/copilot/right-drawer/states/copilotQueryState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { createState } from '@ui/utilities/state/utils/createState'; - -export const copilotQueryState = createState({ - key: 'activities/copilot-query', - defaultValue: '', -}); diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx index aa7184f22..5becd7538 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx @@ -1,19 +1,10 @@ import styled from '@emotion/styled'; -import { useRecoilCallback } from 'recoil'; import { Avatar, GRAY_SCALE } from 'twenty-ui'; import { ActivityRow } from '@/activities/components/ActivityRow'; import { EmailThreadNotShared } from '@/activities/emails/components/EmailThreadNotShared'; -import { useEmailThread } from '@/activities/emails/hooks/useEmailThread'; -import { emailThreadIdWhenEmailThreadWasClosedState } from '@/activities/emails/states/lastViewableEmailThreadIdState'; import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu'; -import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer'; -import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; -import { - FeatureFlagKey, - MessageChannelVisibility, - TimelineThread, -} from '~/generated/graphql'; +import { MessageChannelVisibility, TimelineThread } from '~/generated/graphql'; import { formatToHumanReadableDate } from '~/utils/date-utils'; const StyledHeading = styled.div<{ unread: boolean }>` @@ -77,11 +68,7 @@ type EmailThreadPreviewProps = { }; export const EmailThreadPreview = ({ thread }: EmailThreadPreviewProps) => { - const { openEmailThread } = useEmailThread(); const { openEmailThreadInCommandMenu } = useCommandMenu(); - const isCommandMenuV2Enabled = useIsFeatureEnabled( - FeatureFlagKey.IsCommandMenuV2Enabled, - ); const visibility = thread.visibility; @@ -103,48 +90,19 @@ export const EmailThreadPreview = ({ thread }: EmailThreadPreviewProps) => { false, ]; - const { isSameEventThanRightDrawerClose } = useRightDrawer(); + const handleThreadClick = () => { + const canOpen = + thread.visibility === MessageChannelVisibility.SHARE_EVERYTHING; - const handleThreadClick = useRecoilCallback( - ({ snapshot }) => - (event: React.MouseEvent) => { - const clickJustTriggeredEmailDrawerClose = - isSameEventThanRightDrawerClose(event.nativeEvent); - - const emailThreadIdWhenEmailThreadWasClosed = snapshot - .getLoadable(emailThreadIdWhenEmailThreadWasClosedState) - .getValue(); - - const canOpen = - thread.visibility === MessageChannelVisibility.SHARE_EVERYTHING && - (!clickJustTriggeredEmailDrawerClose || - emailThreadIdWhenEmailThreadWasClosed !== thread.id); - - if (canOpen) { - if (isCommandMenuV2Enabled) { - openEmailThreadInCommandMenu(thread.id); - } else { - openEmailThread(thread.id); - } - } - }, - [ - isCommandMenuV2Enabled, - isSameEventThanRightDrawerClose, - openEmailThread, - openEmailThreadInCommandMenu, - thread.id, - thread.visibility, - ], - ); + if (canOpen) { + openEmailThreadInCommandMenu(thread.id); + } + }; const isDisabled = visibility !== MessageChannelVisibility.SHARE_EVERYTHING; return ( - handleThreadClick(event)} - disabled={isDisabled} - > + { - it('should open email thread', () => { - const { result } = renderHook( - () => { - const emailThread = useEmailThread(); - const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState); - const viewableRecordId = useRecoilValue(viewableRecordIdState); - - return { ...emailThread, isRightDrawerOpen, viewableRecordId }; - }, - { wrapper: RecoilRoot }, - ); - - expect(result.current.isRightDrawerOpen).toBe(false); - expect(result.current.viewableRecordId).toBeNull(); - - act(() => { - result.current.openEmailThread(viewableEmailThreadId); - }); - - expect(result.current.isRightDrawerOpen).toBe(true); - expect(result.current.viewableRecordId).toBe(viewableEmailThreadId); - }); - - it('should close email thread if trying to open the same thread id', () => { - const { result } = renderHook( - () => { - const emailThread = useEmailThread(); - const [isRightDrawerOpen, setIsRightDrawerOpen] = useRecoilState( - isRightDrawerOpenState, - ); - const [viewableRecordId, setViewableRecordId] = useRecoilState( - viewableRecordIdState, - ); - - return { - ...emailThread, - isRightDrawerOpen, - viewableRecordId, - setIsRightDrawerOpen, - setViewableRecordId, - }; - }, - { wrapper: RecoilRoot }, - ); - - act(() => { - result.current.setIsRightDrawerOpen(true); - result.current.setViewableRecordId(viewableEmailThreadId); - }); - - act(() => { - result.current.openEmailThread(viewableEmailThreadId); - }); - - expect(result.current.isRightDrawerOpen).toBe(false); - expect(result.current.viewableRecordId).toBeNull(); - }); -}); diff --git a/packages/twenty-front/src/modules/activities/emails/hooks/useEmailThread.ts b/packages/twenty-front/src/modules/activities/emails/hooks/useEmailThread.ts deleted file mode 100644 index c2fa722ed..000000000 --- a/packages/twenty-front/src/modules/activities/emails/hooks/useEmailThread.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { useRecoilCallback } from 'recoil'; - -import { useOpenEmailThreadRightDrawer } from '@/activities/emails/right-drawer/hooks/useOpenEmailThreadRightDrawer'; -import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState'; -import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer'; -import { isRightDrawerOpenState } from '@/ui/layout/right-drawer/states/isRightDrawerOpenState'; - -export const useEmailThread = () => { - const { closeRightDrawer } = useRightDrawer(); - const openEmailThreadRightDrawer = useOpenEmailThreadRightDrawer(); - - const openEmailThread = useRecoilCallback( - ({ snapshot, set }) => - (threadId: string) => { - const isRightDrawerOpen = snapshot - .getLoadable(isRightDrawerOpenState) - .getValue(); - - const viewableEmailThreadId = snapshot - .getLoadable(viewableRecordIdState) - .getValue(); - - if (isRightDrawerOpen && viewableEmailThreadId === threadId) { - set(viewableRecordIdState, null); - closeRightDrawer(); - return; - } - - openEmailThreadRightDrawer(); - set(viewableRecordIdState, threadId); - }, - [closeRightDrawer, openEmailThreadRightDrawer], - ); - - return { openEmailThread }; -}; diff --git a/packages/twenty-front/src/modules/activities/emails/right-drawer/components/IntermediaryMessages.tsx b/packages/twenty-front/src/modules/activities/emails/right-drawer/components/IntermediaryMessages.tsx deleted file mode 100644 index aee31f1e1..000000000 --- a/packages/twenty-front/src/modules/activities/emails/right-drawer/components/IntermediaryMessages.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import styled from '@emotion/styled'; -import { useState } from 'react'; -import { Button, IconArrowsVertical } from 'twenty-ui'; - -import { EmailThreadMessage } from '@/activities/emails/components/EmailThreadMessage'; -import { EmailThreadMessageWithSender } from '@/activities/emails/types/EmailThreadMessageWithSender'; - -const StyledButtonContainer = styled.div` - border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; - padding: 16px 24px; -`; - -export const IntermediaryMessages = ({ - messages, -}: { - messages: EmailThreadMessageWithSender[]; -}) => { - const [areMessagesOpen, setAreMessagesOpen] = useState(false); - - if (messages.length === 0) { - return null; - } - - return areMessagesOpen ? ( - messages.map((message) => ( - - )) - ) : ( - -