test: Update template credentials setup e2e test for new canvas (no-changelog) (#12487)

cypress/e2e/34-template-credentials-setup.cy.ts

@@ -3,6 +3,7 @@ import * as formStep from '../composables/setup-template-form-step';
 import { getSetupWorkflowCredentialsButton } from '../composables/setup-workflow-credentials-button';
 import TestTemplate1 from '../fixtures/Test_Template_1.json';
 import TestTemplate2 from '../fixtures/Test_Template_2.json';
+import { clearNotifications } from '../pages/notifications';
 import {
 	clickUseWorkflowButtonByTitle,
 	visitTemplateCollectionPage,
@@ -111,16 +112,19 @@ describe('Template credentials setup', () => {
 		templateCredentialsSetupPage.fillInDummyCredentialsForAppWithConfirm('X (Formerly Twitter)');
 		templateCredentialsSetupPage.fillInDummyCredentialsForApp('Telegram');
 
+		clearNotifications();
+
 		templateCredentialsSetupPage.finishCredentialSetup();
 
 		workflowPage.getters.canvasNodes().should('have.length', 3);
 
+		cy.grantBrowserPermissions('clipboardReadWrite', 'clipboardSanitizedWrite');
+
 		// Focus the canvas so the copy to clipboard works
 		workflowPage.getters.canvasNodes().eq(0).realClick();
 		workflowPage.actions.hitSelectAll();
 		workflowPage.actions.hitCopy();
 
-		cy.grantBrowserPermissions('clipboardReadWrite', 'clipboardSanitizedWrite');
 		// Check workflow JSON by copying it to clipboard
 		cy.readClipboard().then((workflowJSON) => {
 			const workflow = JSON.parse(workflowJSON);
@@ -154,6 +158,8 @@ describe('Template credentials setup', () => {
 		templateCredentialsSetupPage.fillInDummyCredentialsForApp('Email (IMAP)');
 		templateCredentialsSetupPage.fillInDummyCredentialsForApp('Nextcloud');
 
+		clearNotifications();
+
 		templateCredentialsSetupPage.finishCredentialSetup();
 
 		workflowPage.getters.canvasNodes().should('have.length', 3);
@@ -176,6 +182,8 @@ describe('Template credentials setup', () => {
 			templateCredentialsSetupPage.visitTemplateCredentialSetupPage(testTemplate.id);
 			templateCredentialsSetupPage.fillInDummyCredentialsForApp('Shopify');
 
+			clearNotifications();
+
 			templateCredentialsSetupPage.finishCredentialSetup();
 
 			getSetupWorkflowCredentialsButton().should('be.visible');
@@ -192,6 +200,8 @@ describe('Template credentials setup', () => {
 			templateCredentialsSetupPage.fillInDummyCredentialsForAppWithConfirm('X (Formerly Twitter)');
 			templateCredentialsSetupPage.fillInDummyCredentialsForApp('Telegram');
 
+			clearNotifications();
+
 			setupCredsModal.closeModalFromContinueButton();
 			setupCredsModal.getWorkflowCredentialsModal().should('not.exist');
 

cypress/pages/notifications.ts

@@ -13,5 +13,10 @@ export const infoToast = () => cy.get('.el-notification:has(.el-notification--in
  * Actions
  */
 export const clearNotifications = () => {
-	successToast().find('.el-notification__closeBtn').click({ multiple: true });
+	const buttons = successToast().find('.el-notification__closeBtn');
+	buttons.then(($buttons) => {
+		if ($buttons.length) {
+			buttons.click({ multiple: true });
+		}
+	});
 };

packages/editor-ui/src/composables/__snapshots__/useCanvasOperations.test.ts.snap

@@ -29,7 +29,10 @@ exports[`useCanvasOperations > copyNodes > should copy nodes 1`] = `
     }
   ],
   "connections": {},
-  "pinData": {}
+  "pinData": {},
+  "meta": {
+    "instanceId": ""
+  }
 }",
   ],
 ]
@@ -64,7 +67,10 @@ exports[`useCanvasOperations > cutNodes > should copy and delete nodes 1`] = `
     }
   ],
   "connections": {},
-  "pinData": {}
+  "pinData": {},
+  "meta": {
+    "instanceId": ""
+  }
 }",
   ],
 ]

packages/editor-ui/src/composables/useCanvasOperations.ts

@@ -1887,6 +1887,12 @@ export function useCanvasOperations({ router }: { router: ReturnType<typeof useR
 	async function copyNodes(ids: string[]) {
 		const workflowData = deepCopy(getNodesToSave(workflowsStore.getNodesByIds(ids)));
 
+		workflowData.meta = {
+			...workflowData.meta,
+			...workflowsStore.workflow.meta,
+			instanceId: rootStore.instanceId,
+		};
+
 		await clipboard.copy(JSON.stringify(workflowData, null, 2));
 
 		telemetry.track('User copied nodes', {

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

@@ -118,6 +118,11 @@ const LazyNodeDetailsView = defineAsyncComponent(
 	async () => await import('@/components/NodeDetailsView.vue'),
 );
 
+const LazySetupWorkflowCredentialsButton = defineAsyncComponent(
+	async () =>
+		await import('@/components/SetupWorkflowCredentialsButton/SetupWorkflowCredentialsButton.vue'),
+);
+
 const $style = useCssModule();
 const router = useRouter();
 const route = useRoute();
@@ -1696,6 +1701,9 @@ onBeforeUnmount(() => {
 		@viewport-change="onViewportChange"
 		@drag-and-drop="onDragAndDrop"
 	>
+		<Suspense>
+			<LazySetupWorkflowCredentialsButton :class="$style.setupCredentialsButtonWrapper" />
+		</Suspense>
 		<div v-if="!isCanvasReadOnly" :class="$style.executionButtons">
 			<CanvasRunWorkflowButton
 				v-if="isRunWorkflowButtonVisible"
@@ -1804,6 +1812,12 @@ onBeforeUnmount(() => {
 	}
 }
 
+.setupCredentialsButtonWrapper {
+	position: absolute;
+	left: var(--spacing-s);
+	top: var(--spacing-s);
+}
+
 .readOnlyEnvironmentNotification {
 	position: absolute;
 	bottom: 16px;