feat(editor): Hide focus panel while node panel is open (no-changelog) (#17333)

packages/frontend/editor-ui/src/components/FocusPanel.vue

@@ -62,6 +62,7 @@ const resolvedParameter = computed(() =>
 );
 
 const focusPanelActive = computed(() => focusPanelStore.focusPanelActive);
+const focusPanelHidden = computed(() => focusPanelStore.focusPanelHidden);
 const focusPanelWidth = computed(() => focusPanelStore.focusPanelWidth);
 
 const isDisabled = computed(() => {
@@ -302,7 +303,7 @@ const onResizeThrottle = useThrottleFn(onResize, 10);
 </script>
 
 <template>
-	<div v-if="focusPanelActive" :class="$style.wrapper" @keydown.stop>
+	<div v-if="focusPanelActive" v-show="!focusPanelHidden" :class="$style.wrapper" @keydown.stop>
 		<N8nResizeWrapper
 			:width="focusPanelWidth"
 			:supported-directions="['left']"

packages/frontend/editor-ui/src/stores/focusPanel.store.ts

@@ -59,6 +59,7 @@ export const useFocusPanelStore = defineStore(STORES.FOCUS_PANEL, () => {
 	const lastFocusTimestamp = ref(0);
 
 	const focusPanelActive = computed(() => currentFocusPanelData.value.isActive);
+	const focusPanelHidden = ref(false);
 	const focusPanelWidth = computed(() => currentFocusPanelData.value.width ?? DEFAULT_PANEL_WIDTH);
 	const _focusedNodeParameters = computed(() => currentFocusPanelData.value.parameters);
 
@@ -101,13 +102,18 @@ export const useFocusPanelStore = defineStore(STORES.FOCUS_PANEL, () => {
 			[wid]: {
 				isActive: isActive ?? focusPanelActive.value,
 				parameters: parameters ?? _focusedNodeParameters.value,
-				width,
+				width: width ?? focusPanelWidth.value,
 			},
 		});
 
 		if (isActive) {
 			lastFocusTimestamp.value = Date.now();
 		}
+
+		// Unhide the focus panel if it was hidden
+		if (focusPanelHidden.value && focusPanelActive.value) {
+			focusPanelHidden.value = false;
+		}
 	}
 
 	// When a new workflow is saved, we should update the focus panel data with the new workflow ID
@@ -137,6 +143,14 @@ export const useFocusPanelStore = defineStore(STORES.FOCUS_PANEL, () => {
 		_setOptions({ isActive: false });
 	}
 
+	function hideFocusPanel(hide: boolean = true) {
+		if (focusPanelHidden.value === hide) {
+			return;
+		}
+
+		focusPanelHidden.value = hide;
+	}
+
 	function toggleFocusPanel() {
 		_setOptions({ isActive: !focusPanelActive.value });
 	}
@@ -165,12 +179,14 @@ export const useFocusPanelStore = defineStore(STORES.FOCUS_PANEL, () => {
 		focusPanelActive,
 		focusedNodeParameters,
 		lastFocusTimestamp,
+		focusPanelHidden,
+		focusPanelWidth,
 		openWithFocusedNodeParameter,
 		isRichParameter,
+		hideFocusPanel,
 		closeFocusPanel,
 		toggleFocusPanel,
 		onNewWorkflowSave,
 		updateWidth,
-		focusPanelWidth,
 	};
 });

packages/frontend/editor-ui/src/views/NodeView.vue

@@ -973,6 +973,10 @@ function onUpdateNodeOutputs(id: string) {
 }
 
 function onClickNodeAdd(source: string, sourceHandle: string) {
+	if (isFocusPanelFeatureEnabled.value && focusPanelStore.focusPanelActive) {
+		focusPanelStore.hideFocusPanel();
+	}
+
 	nodeCreatorStore.openNodeCreatorForConnectingNode({
 		connection: {
 			source,
@@ -1182,7 +1186,7 @@ async function onRevertAddNode({ node }: { node: INodeUi }) {
 	await revertAddNode(node.name);
 }
 
-async function onSwitchActiveNode(nodeName: string) {
+function onSwitchActiveNode(nodeName: string) {
 	const node = workflowsStore.getNodeByName(nodeName);
 	if (!node) return;
 
@@ -1190,7 +1194,7 @@ async function onSwitchActiveNode(nodeName: string) {
 	selectNodes([node.id]);
 }
 
-async function onOpenSelectiveNodeCreator(
+function onOpenSelectiveNodeCreator(
 	node: string,
 	connectionType: NodeConnectionType,
 	connectionIndex: number = 0,
@@ -1198,24 +1202,24 @@ async function onOpenSelectiveNodeCreator(
 	nodeCreatorStore.openSelectiveNodeCreator({ node, connectionType, connectionIndex });
 }
 
-function onOpenNodeCreatorForTriggerNodes(source: NodeCreatorOpenSource) {
-	nodeCreatorStore.openNodeCreatorForTriggerNodes(source);
+function onToggleNodeCreator(options: ToggleNodeCreatorOptions) {
+	nodeCreatorStore.setNodeCreatorState(options);
+
+	if (isFocusPanelFeatureEnabled.value && focusPanelStore.focusPanelActive) {
+		focusPanelStore.hideFocusPanel(options.createNodeActive);
+	}
+
+	if (!options.createNodeActive && !options.hasAddedNodes) {
+		uiStore.resetLastInteractedWith();
+	}
 }
 
 function onOpenNodeCreatorFromCanvas(source: NodeCreatorOpenSource) {
 	onToggleNodeCreator({ createNodeActive: true, source });
 }
 
-function onToggleNodeCreator(options: ToggleNodeCreatorOptions) {
-	nodeCreatorStore.setNodeCreatorState(options);
-
-	if (options.createNodeActive) {
-		focusPanelStore.closeFocusPanel();
-	}
-
-	if (!options.createNodeActive && !options.hasAddedNodes) {
-		uiStore.resetLastInteractedWith();
-	}
+function onOpenNodeCreatorForTriggerNodes(source: NodeCreatorOpenSource) {
+	nodeCreatorStore.openNodeCreatorForTriggerNodes(source);
 }
 
 function onToggleFocusPanel() {
@@ -1229,6 +1233,10 @@ function onToggleFocusPanel() {
 function closeNodeCreator() {
 	if (nodeCreatorStore.isCreateNodeActive) {
 		nodeCreatorStore.isCreateNodeActive = false;
+
+		if (isFocusPanelFeatureEnabled.value && focusPanelStore.focusPanelActive) {
+			focusPanelStore.hideFocusPanel(false);
+		}
 	}
 }