diff --git a/packages/twenty-front/src/modules/action-menu/actions/components/ActionOpenSidePanelPage.tsx b/packages/twenty-front/src/modules/action-menu/actions/components/ActionOpenSidePanelPage.tsx index 4a54d8b732..6482d421f4 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/components/ActionOpenSidePanelPage.tsx +++ b/packages/twenty-front/src/modules/action-menu/actions/components/ActionOpenSidePanelPage.tsx @@ -2,12 +2,11 @@ import { ActionDisplay } from '@/action-menu/actions/display/components/ActionDi import { ActionConfigContext } from '@/action-menu/contexts/ActionConfigContext'; import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandMenu'; import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState'; -import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState'; import { type CommandMenuPages } from '@/command-menu/types/CommandMenuPages'; import { type MessageDescriptor } from '@lingui/core'; import { t } from '@lingui/core/macro'; import { useContext } from 'react'; -import { useRecoilValue, useSetRecoilState } from 'recoil'; +import { useSetRecoilState } from 'recoil'; import { type IconComponent } from 'twenty-ui/display'; export const ActionOpenSidePanelPage = ({ @@ -29,8 +28,6 @@ export const ActionOpenSidePanelPage = ({ const setCommandMenuSearchState = useSetRecoilState(commandMenuSearchState); - const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState); - if (!actionConfig) { return null; } @@ -42,7 +39,6 @@ export const ActionOpenSidePanelPage = ({ page, pageTitle: t(pageTitle), pageIcon, - resetNavigationStack: isCommandMenuOpened, }); if (shouldResetSearchState) { diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuPageInfoLayout.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuPageInfoLayout.tsx new file mode 100644 index 0000000000..d4be24b398 --- /dev/null +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuPageInfoLayout.tsx @@ -0,0 +1,60 @@ +import styled from '@emotion/styled'; +import { type ReactNode } from 'react'; + +export const StyledPageInfoContainer = styled.div` + align-items: center; + display: flex; + gap: ${({ theme }) => theme.spacing(0.5)}; +`; + +export const StyledPageInfoIcon = styled.div<{ iconColor?: string }>` + align-items: center; + background: ${({ theme }) => theme.background.transparent.light}; + border-radius: ${({ theme }) => theme.border.radius.sm}; + color: ${({ iconColor }) => iconColor}; + display: flex; + flex-shrink: 0; + justify-content: center; + padding: ${({ theme }) => theme.spacing(1)}; +`; + +export const StyledPageInfoTitleContainer = styled.div` + align-items: center; + display: flex; + flex: 1; + font-size: ${({ theme }) => theme.font.size.sm}; + font-weight: ${({ theme }) => theme.font.weight.semiBold}; + min-width: 0; + max-width: 150px; +`; + +export const StyledPageInfoLabel = styled.div` + color: ${({ theme }) => theme.font.color.tertiary}; + font-size: ${({ theme }) => theme.font.size.sm}; + white-space: nowrap; + flex-shrink: 0; +`; + +type CommandMenuPageInfoLayoutProps = { + icon?: ReactNode; + iconColor?: string; + title: ReactNode; + label?: ReactNode; +}; + +export const CommandMenuPageInfoLayout = ({ + icon, + iconColor, + title, + label, +}: CommandMenuPageInfoLayoutProps) => { + return ( + + {icon && ( + {icon} + )} + {title} + {label && {label}} + + ); +}; diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuPageLayoutInfo.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuPageLayoutInfo.tsx index d9f9b1e5cb..ed2b8a32ff 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuPageLayoutInfo.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuPageLayoutInfo.tsx @@ -12,44 +12,12 @@ import { TitleInput } from '@/ui/input/components/TitleInput'; import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; import { useTheme } from '@emotion/react'; -import styled from '@emotion/styled'; import { isNonEmptyString } from '@sniptt/guards'; import { useState } from 'react'; import { useRecoilValue } from 'recoil'; import { isDefined } from 'twenty-shared/utils'; import { useIcons } from 'twenty-ui/display'; - -const StyledPageLayoutInfoContainer = styled.div` - align-items: center; - display: flex; - gap: ${({ theme }) => theme.spacing(0.5)}; -`; - -const StyledPageLayoutIcon = styled.div<{ iconColor: string }>` - align-items: center; - background: ${({ theme }) => theme.background.transparent.light}; - border-radius: ${({ theme }) => theme.border.radius.sm}; - color: ${({ iconColor }) => iconColor}; - display: flex; - flex-shrink: 0; - justify-content: center; - padding: ${({ theme }) => theme.spacing(1)}; -`; - -const StyledPageLayoutTitleContainer = styled.div` - align-items: center; - display: flex; - flex: 1; - font-size: ${({ theme }) => theme.font.size.sm}; - font-weight: ${({ theme }) => theme.font.weight.semiBold}; - min-width: 0; -`; - -const StyledPageLayoutType = styled.div` - color: ${({ theme }) => theme.font.color.tertiary}; - font-size: ${({ theme }) => theme.font.size.sm}; - white-space: nowrap; -`; +import { CommandMenuPageInfoLayout } from './CommandMenuPageInfoLayout'; export const CommandMenuPageLayoutInfo = () => { const theme = useTheme(); @@ -133,13 +101,14 @@ export const CommandMenuPageLayoutInfo = () => { }; return ( - - {isDefined(headerIcon) && ( - + - - )} - + ) : undefined + } + iconColor={headerIconColor} + title={ { onTab={saveTitle} onShiftTab={saveTitle} /> - - {headerType && {headerType}} - + } + label={headerType} + /> ); }; diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuRecordInfo.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuRecordInfo.tsx index faea9a5ef3..8056f5e266 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuRecordInfo.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuRecordInfo.tsx @@ -11,7 +11,6 @@ import { recordStoreIdentifierFamilySelector } from '@/object-record/record-stor import { RecordTitleCell } from '@/object-record/record-title-cell/components/RecordTitleCell'; import { RecordTitleCellContainerType } from '@/object-record/record-title-cell/types/RecordTitleCellContainerType'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; -import styled from '@emotion/styled'; import { Trans } from '@lingui/react/macro'; import { isNonEmptyString } from '@sniptt/guards'; import { useRecoilValue } from 'recoil'; @@ -19,37 +18,7 @@ import { Avatar } from 'twenty-ui/display'; import { FieldMetadataType } from '~/generated-metadata/graphql'; import { dateLocaleState } from '~/localization/states/dateLocaleState'; import { beautifyPastDateRelativeToNow } from '~/utils/date-utils'; - -const StyledRecordInfoContainer = styled.div` - align-items: center; - display: flex; - gap: ${({ theme }) => theme.spacing(0.5)}; -`; - -const StyledRecordAvatar = styled.div` - align-items: center; - background: ${({ theme }) => theme.background.transparent.light}; - border-radius: ${({ theme }) => theme.border.radius.sm}; - display: flex; - flex-shrink: 0; - justify-content: center; - padding: ${({ theme }) => theme.spacing(1)}; -`; - -const StyledRecordTitleContainer = styled.div` - align-items: center; - display: flex; - flex: 1; - font-size: ${({ theme }) => theme.font.size.sm}; - font-weight: ${({ theme }) => theme.font.weight.semiBold}; - min-width: 0; -`; - -const StyledRecordDate = styled.div` - color: ${({ theme }) => theme.font.color.tertiary}; - font-size: ${({ theme }) => theme.font.size.sm}; - white-space: nowrap; -`; +import { CommandMenuPageInfoLayout } from './CommandMenuPageInfoLayout'; export const CommandMenuRecordInfo = ({ commandMenuPageInstanceId, @@ -122,9 +91,9 @@ export const CommandMenuRecordInfo = ({ }; return ( - - {recordIdentifier && ( - + - - )} - + ) : undefined + } + title={ - - {beautifiedCreatedAt && ( - + } + label={ + beautifiedCreatedAt ? ( Created {beautifiedCreatedAt} - - )} - + ) : undefined + } + /> ); }; diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuWorkflowStepInfo.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuWorkflowStepInfo.tsx index e67b2eff37..d6b60ddeb4 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuWorkflowStepInfo.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuWorkflowStepInfo.tsx @@ -1,5 +1,5 @@ import { useUpdateCommandMenuPageInfo } from '@/command-menu/hooks/useUpdateCommandMenuPageInfo'; -import { commandMenuWorkflowIdComponentState } from '@/command-menu/pages/workflow/states/commandMenuWorkflowIdComponentState'; +import { useCommandMenuWorkflowIdOrThrow } from '@/command-menu/pages/workflow/hooks/useCommandMenuWorkflowIdOrThrow'; import { commandMenuWorkflowStepIdComponentState } from '@/command-menu/pages/workflow/states/commandMenuWorkflowStepIdComponentState'; import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState'; import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages'; @@ -7,10 +7,12 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord'; import { TitleInput } from '@/ui/input/components/TitleInput'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; +import { useGetUpdatableWorkflowVersionOrThrow } from '@/workflow/hooks/useGetUpdatableWorkflowVersionOrThrow'; import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion'; import { type WorkflowVersion } from '@/workflow/types/Workflow'; import { getAgentIdFromStep } from '@/workflow/utils/getAgentIdFromStep'; import { getStepDefinitionOrThrow } from '@/workflow/utils/getStepDefinitionOrThrow'; +import { getWorkflowVisualizerComponentInstanceId } from '@/workflow/utils/getWorkflowVisualizerComponentInstanceId'; import { useUpdateAgentLabel } from '@/workflow/workflow-steps/hooks/useUpdateAgentLabel'; import { useUpdateWorkflowVersionStep } from '@/workflow/workflow-steps/hooks/useUpdateWorkflowVersionStep'; import { getActionIcon } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIcon'; @@ -18,45 +20,13 @@ import { getActionIconColorOrThrow } from '@/workflow/workflow-steps/workflow-ac import { getTriggerIcon } from '@/workflow/workflow-trigger/utils/getTriggerIcon'; import { getTriggerIconColor } from '@/workflow/workflow-trigger/utils/getTriggerIconColor'; import { useTheme } from '@emotion/react'; -import styled from '@emotion/styled'; import { t } from '@lingui/core/macro'; import { useState } from 'react'; import { useRecoilValue } from 'recoil'; import { isDefined } from 'twenty-shared/utils'; import { TRIGGER_STEP_ID } from 'twenty-shared/workflow'; import { useIcons } from 'twenty-ui/display'; - -const StyledWorkflowStepInfoContainer = styled.div` - align-items: center; - display: flex; - gap: ${({ theme }) => theme.spacing(0.5)}; -`; - -const StyledWorkflowStepIcon = styled.div<{ iconColor: string }>` - align-items: center; - background: ${({ theme }) => theme.background.transparent.light}; - border-radius: ${({ theme }) => theme.border.radius.sm}; - color: ${({ iconColor }) => iconColor}; - display: flex; - flex-shrink: 0; - justify-content: center; - padding: ${({ theme }) => theme.spacing(1)}; -`; - -const StyledWorkflowStepTitleContainer = styled.div` - align-items: center; - display: flex; - flex: 1; - font-size: ${({ theme }) => theme.font.size.sm}; - font-weight: ${({ theme }) => theme.font.weight.semiBold}; - min-width: 0; -`; - -const StyledWorkflowStepType = styled.div` - color: ${({ theme }) => theme.font.color.tertiary}; - font-size: ${({ theme }) => theme.font.size.sm}; - white-space: nowrap; -`; +import { CommandMenuPageInfoLayout } from './CommandMenuPageInfoLayout'; export const CommandMenuWorkflowStepInfo = ({ commandMenuPageInstanceId, @@ -68,10 +38,7 @@ export const CommandMenuWorkflowStepInfo = ({ const commandMenuPage = useRecoilValue(commandMenuPageState); - const workflowId = useRecoilComponentValue( - commandMenuWorkflowIdComponentState, - commandMenuPageInstanceId, - ); + const workflowId = useCommandMenuWorkflowIdOrThrow(); const workflowStepId = useRecoilComponentValue( commandMenuWorkflowStepIdComponentState, @@ -85,6 +52,13 @@ export const CommandMenuWorkflowStepInfo = ({ commandMenuPage === CommandMenuPages.WorkflowRunStepView; const { updateCommandMenuPageInfo } = useUpdateCommandMenuPageInfo(); + + const instanceId = getWorkflowVisualizerComponentInstanceId({ + recordId: workflowId, + }); + const { getUpdatableWorkflowVersion } = + useGetUpdatableWorkflowVersionOrThrow(instanceId); + const { updateWorkflowVersionStep } = useUpdateWorkflowVersionStep(); const { updateOneRecord: updateOneWorkflowVersion } = useUpdateOneRecord({ @@ -166,7 +140,7 @@ export const CommandMenuWorkflowStepInfo = ({ const Icon = getIcon(headerIcon ?? 'IconDefault'); const saveTitle = async () => { - if (!isDefined(workflowVersionId)) { + if (!isDefined(workflowVersionId) || !isDefined(workflowId)) { return; } @@ -175,9 +149,11 @@ export const CommandMenuWorkflowStepInfo = ({ pageIcon: Icon, }); + const targetWorkflowVersionId = await getUpdatableWorkflowVersion(); + if (isTrigger) { await updateOneWorkflowVersion({ - idToUpdate: workflowVersionId, + idToUpdate: targetWorkflowVersionId, updateOneRecordInput: { trigger: { ...stepDefinition.definition, @@ -187,7 +163,7 @@ export const CommandMenuWorkflowStepInfo = ({ }); } else { await updateWorkflowVersionStep({ - workflowVersionId, + workflowVersionId: targetWorkflowVersionId, step: { ...stepDefinition.definition, name: title, @@ -201,13 +177,14 @@ export const CommandMenuWorkflowStepInfo = ({ }; return ( - - {headerIcon && ( - + - - )} - + ) : undefined + } + iconColor={headerIconColor} + title={ - - - {isTrigger ? t`Trigger` : t`Action`} - - + } + label={isTrigger ? t`Trigger` : t`Action`} + /> ); }; diff --git a/packages/twenty-front/src/modules/object-record/components/CommandMenuPageLayout.tsx b/packages/twenty-front/src/modules/object-record/components/CommandMenuPageLayout.tsx index e55581fc81..2467681c46 100644 --- a/packages/twenty-front/src/modules/object-record/components/CommandMenuPageLayout.tsx +++ b/packages/twenty-front/src/modules/object-record/components/CommandMenuPageLayout.tsx @@ -1,6 +1,8 @@ import { CommandMenuRouter } from '@/command-menu/components/CommandMenuRouter'; import { COMMAND_MENU_SIDE_PANEL_WIDTH } from '@/command-menu/constants/CommandMenuSidePanelWidth'; +import { useCommandMenuCloseAnimationCompleteCleanup } from '@/command-menu/hooks/useCommandMenuCloseAnimationCompleteCleanup'; import { useCommandMenuHotKeys } from '@/command-menu/hooks/useCommandMenuHotKeys'; +import { isCommandMenuClosingState } from '@/command-menu/states/isCommandMenuClosingState'; import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState'; import { tableWidthResizeIsActiveState } from '@/object-record/record-table/states/tableWidthResizeIsActivedState'; import { ModalContainerContext } from '@/ui/layout/modal/contexts/ModalContainerContext'; @@ -66,6 +68,9 @@ export const CommandMenuPageLayout = ({ const theme = useTheme(); const isMobile = useIsMobile(); const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState); + const isCommandMenuClosing = useRecoilValue(isCommandMenuClosingState); + const { commandMenuCloseAnimationCompleteCleanup } = + useCommandMenuCloseAnimationCompleteCleanup(); const [modalContainer, setModalContainer] = useState( null, ); @@ -84,6 +89,10 @@ export const CommandMenuPageLayout = ({ setShouldRenderContent(false); } + if (isCommandMenuClosing) { + commandMenuCloseAnimationCompleteCleanup(); + } + setTableWidthResizeIsActive(true); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/useCreateNewIndexRecord.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/useCreateNewIndexRecord.ts index d2ed91a01f..6862ac96cf 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/useCreateNewIndexRecord.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/useCreateNewIndexRecord.ts @@ -74,7 +74,7 @@ export const useCreateNewIndexRecord = ({ instanceId: getRecordFieldInputInstanceId({ recordId, fieldName: labelIdentifierFieldMetadataItem.name, - prefix: RecordTitleCellContainerType.ShowPage, + prefix: RecordTitleCellContainerType.PageHeader, }), }); } diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabList.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabList.tsx index fe79472aa9..3c3b0212b4 100644 --- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabList.tsx +++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabList.tsx @@ -214,6 +214,7 @@ export const PageLayoutTabList = ({ setTabSettingsOpenTabId(tabId); navigatePageLayoutCommandMenu({ commandMenuPage: CommandMenuPages.PageLayoutTabSettings, + resetNavigationStack: true, }); }, [setTabSettingsOpenTabId, navigatePageLayoutCommandMenu], diff --git a/packages/twenty-front/src/modules/page-layout/hooks/useSetIsPageLayoutInEditMode.ts b/packages/twenty-front/src/modules/page-layout/hooks/useSetIsPageLayoutInEditMode.ts index 9b9beeb013..d1ad584436 100644 --- a/packages/twenty-front/src/modules/page-layout/hooks/useSetIsPageLayoutInEditMode.ts +++ b/packages/twenty-front/src/modules/page-layout/hooks/useSetIsPageLayoutInEditMode.ts @@ -1,3 +1,5 @@ +import { COMMAND_MENU_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuComponentInstanceId'; +import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState'; import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId'; import { contextStoreIsPageInEditModeComponentState } from '@/context-store/states/contextStoreIsPageInEditModeComponentState'; import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext'; @@ -24,11 +26,24 @@ export const useSetIsPageLayoutInEditMode = (pageLayoutIdFromProps: string) => { ); const setIsPageLayoutInEditMode = useRecoilCallback( - ({ set }) => + ({ set, snapshot }) => (value: boolean) => { set(isPageLayoutInEditModeState, value); set(contextStoreIsFullTabWidgetInEditModeState, value); + + const isCommandMenuOpened = snapshot + .getLoadable(isCommandMenuOpenedState) + .getValue(); + + if (isCommandMenuOpened) { + set( + contextStoreIsPageInEditModeComponentState.atomFamily({ + instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID, + }), + value, + ); + } }, [isPageLayoutInEditModeState, contextStoreIsFullTabWidgetInEditModeState], ); diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx index 0529aeaa02..f7965ee1c6 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx @@ -1,3 +1,4 @@ +import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext'; import { COMMAND_MENU_SIDE_PANEL_WIDTH } from '@/command-menu/constants/CommandMenuSidePanelWidth'; import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState'; import { useListenToSidePanelClosing } from '@/ui/layout/right-drawer/hooks/useListenToSidePanelClosing'; @@ -45,6 +46,7 @@ import { import '@xyflow/react/dist/style.css'; import React, { useCallback, + useContext, useEffect, useMemo, useRef, @@ -195,6 +197,7 @@ export const WorkflowDiagramCanvasBase = ({ }, [workflowDiagram]); const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState); + const { isInRightDrawer } = useContext(ActionMenuContext); const handleEdgesChange = ( edgeChanges: Array>, @@ -236,10 +239,12 @@ export const WorkflowDiagramCanvasBase = ({ workflowDiagramFlowInitialized, isCommandMenuOpened, workflowDiagram, + isInRightDrawer, }: { workflowDiagramFlowInitialized: boolean; isCommandMenuOpened: boolean; workflowDiagram: WorkflowDiagram | undefined; + isInRightDrawer: boolean; }) => { if ( !isDefined(containerRef.current) || @@ -266,10 +271,11 @@ export const WorkflowDiagramCanvasBase = ({ const hasViewportBeenMoved = currentViewport.x !== 0; let adjustedContainerWidth = baseContainerWidth; - if (isCommandMenuOpened) { + + if (!isInRightDrawer && isCommandMenuOpened) { adjustedContainerWidth = baseContainerWidth - COMMAND_MENU_SIDE_PANEL_WIDTH; - } else if (hasViewportBeenMoved) { + } else if (!isInRightDrawer && hasViewportBeenMoved) { adjustedContainerWidth = baseContainerWidth + COMMAND_MENU_SIDE_PANEL_WIDTH; } @@ -295,11 +301,14 @@ export const WorkflowDiagramCanvasBase = ({ ({ workflowDiagramFlowInitialized, isCommandMenuOpened, + isInRightDrawer, }: { workflowDiagramFlowInitialized: boolean; isCommandMenuOpened: boolean; + isInRightDrawer: boolean; }) => { setFlowViewport({ + isInRightDrawer, isCommandMenuOpened, workflowDiagramFlowInitialized, workflowDiagram: getSnapshotValue(snapshot, workflowDiagramState), @@ -312,11 +321,13 @@ export const WorkflowDiagramCanvasBase = ({ handleSetFlowViewportOnChange({ workflowDiagramFlowInitialized, isCommandMenuOpened, + isInRightDrawer, }); }, [ handleSetFlowViewportOnChange, isCommandMenuOpened, workflowDiagramFlowInitialized, + isInRightDrawer, ]); const handleNodesChanges = useRecoilCallback( @@ -348,6 +359,7 @@ export const WorkflowDiagramCanvasBase = ({ isCommandMenuOpened, workflowDiagramFlowInitialized, workflowDiagram: updatedWorkflowDiagram, + isInRightDrawer, }); }, [ @@ -356,6 +368,7 @@ export const WorkflowDiagramCanvasBase = ({ workflowDiagramFlowInitialized, workflowDiagramState, workflowDiagramWaitingNodesDimensionsState, + isInRightDrawer, ], );