feat(editor): Add experimental NDV pane in canvas (no-changelog) (#16419)

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

@@ -54,6 +54,7 @@ import { ProjectTypes } from '@/types/projects.types';
 import { updateDynamicConnections } from '@/utils/nodeSettingsUtils';
 import FreeAiCreditsCallout from '@/components/FreeAiCreditsCallout.vue';
 import { useCanvasOperations } from '@/composables/useCanvasOperations';
+import { N8nIconButton } from '@n8n/design-system';
 
 const props = withDefaults(
 	defineProps<{
@@ -67,6 +68,8 @@ const props = withDefaults(
 		executable: boolean;
 		inputSize: number;
 		activeNode?: INodeUi;
+		canExpand?: boolean;
+		hideConnections?: boolean;
 	}>(),
 	{
 		foreignCredentials: () => [],
@@ -74,6 +77,9 @@ const props = withDefaults(
 		executable: true,
 		inputSize: 0,
 		blockUI: false,
+		activeNode: undefined,
+		canExpand: false,
+		hideConnections: false,
 	},
 );
 
@@ -85,6 +91,7 @@ const emit = defineEmits<{
 	openConnectionNodeCreator: [nodeName: string, connectionType: NodeConnectionType];
 	activate: [];
 	execute: [];
+	expand: [];
 }>();
 
 const nodeTypesStore = useNodeTypesStore();
@@ -977,7 +984,9 @@ onMounted(() => {
 	populateSettings();
 	setNodeValues();
 	props.eventBus?.on('openSettings', openSettings);
-	nodeHelpers.updateNodeParameterIssues(node.value as INodeUi, props.nodeType);
+	if (node.value !== null) {
+		nodeHelpers.updateNodeParameterIssues(node.value, props.nodeType);
+	}
 	importCurlEventBus.on('setHttpNodeParameters', setHttpNodeParameters);
 	ndvEventBus.on('updateParameterValue', valueChanged);
 });
@@ -1019,9 +1028,9 @@ function displayCredentials(credentialTypeDescription: INodeCredentialDescriptio
 					:read-only="isReadOnly"
 					@update:model-value="nameChanged"
 				></NodeTitle>
-				<div v-if="isExecutable">
+				<div v-if="isExecutable || props.canExpand" :class="$style.headerActions">
 					<NodeExecuteButton
-						v-if="!blockUI && node && nodeValid"
+						v-if="isExecutable && !blockUI && node && nodeValid"
 						data-test-id="node-execute-button"
 						:node-name="node.name"
 						:disabled="outputPanelEditMode.enabled && !isTriggerNode"
@@ -1032,6 +1041,16 @@ function displayCredentials(credentialTypeDescription: INodeCredentialDescriptio
 						@stop-execution="onStopExecution"
 						@value-changed="valueChanged"
 					/>
+					<N8nIconButton
+						v-if="props.canExpand"
+						icon="expand"
+						type="secondary"
+						text
+						size="mini"
+						icon-size="large"
+						aria-label="Expand"
+						@click="emit('expand')"
+					/>
 				</div>
 			</div>
 			<NodeSettingsTabs
@@ -1174,7 +1193,7 @@ function displayCredentials(credentialTypeDescription: INodeCredentialDescriptio
 			</div>
 		</div>
 		<NDVSubConnections
-			v-if="node"
+			v-if="node && !props.hideConnections"
 			ref="subConnections"
 			:root-node="node"
 			@switch-selected-node="onSwitchSelectedNode"
@@ -1189,6 +1208,12 @@ function displayCredentials(credentialTypeDescription: INodeCredentialDescriptio
 	background-color: var(--color-background-base);
 }
 
+.headerActions {
+	display: flex;
+	gap: var(--spacing-4xs);
+	align-items: center;
+}
+
 .warningIcon {
 	color: var(--color-text-lighter);
 	font-size: var(--font-size-2xl);