fix(editor): Refine push modal layout (#12886)

Co-authored-by: Csaba Tuncsik <[email protected]>
n8n-io · Jan 29, 2025 · 212a5bf · 212a5bf
1 parent 9446304
commit 212a5bf
Show file tree

Hide file tree

Showing 5 changed files with 309 additions and 202 deletions.
diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json
@@ -41,8 +41,8 @@
     "@n8n/codemirror-lang-sql": "^1.0.2",
     "@n8n/permissions": "workspace:*",
     "@replit/codemirror-indentation-markers": "^6.5.3",
-    "@typescript/vfs": "^1.6.0",
     "@sentry/vue": "catalog:frontend",
+    "@typescript/vfs": "^1.6.0",
     "@vue-flow/background": "^1.3.2",
     "@vue-flow/controls": "^1.1.2",
     "@vue-flow/core": "^1.41.6",
@@ -56,6 +56,7 @@
     "chart.js": "^4.4.0",
     "codemirror-lang-html-n8n": "^1.0.0",
     "comlink": "^4.4.1",
+    "core-js": "^3.40.0",
     "dateformat": "^3.0.3",
     "email-providers": "^2.0.1",
     "esprima-next": "5.8.4",

diff --git a/packages/editor-ui/src/__tests__/setup.ts b/packages/editor-ui/src/__tests__/setup.ts
@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom';
 import { configure } from '@testing-library/vue';
+import 'core-js/proposals/set-methods-v2';
 
 configure({ testIdAttribute: 'data-test-id' });
 

diff --git a/packages/editor-ui/src/components/SourceControlPushModal.ee.test.ts b/packages/editor-ui/src/components/SourceControlPushModal.ee.test.ts
@@ -24,17 +24,25 @@ vi.mock('vue-router', () => ({
 
 let route: ReturnType<typeof useRoute>;
 
-const RecycleScroller = {
+const DynamicScrollerStub = {
 	props: {
 		items: Array,
 	},
 	template: '<div><template v-for="item in items"><slot v-bind="{ item }"></slot></template></div>',
+	methods: {
+		scrollToItem: vi.fn(),
+	},
+};
+
+const DynamicScrollerItemStub = {
+	template: '<slot></slot>',
 };
 
 const renderModal = createComponentRenderer(SourceControlPushModal, {
 	global: {
 		stubs: {
-			RecycleScroller,
+			DynamicScroller: DynamicScrollerStub,
+			DynamicScrollerItem: DynamicScrollerItemStub,
 			Modal: {
 				template: `
 					<div>
@@ -195,7 +203,7 @@ describe('SourceControlPushModal', () => {
 
 		const sourceControlStore = mockedStore(useSourceControlStore);
 
-		const { getByTestId, getByText } = renderModal({
+		const { getByTestId, getByRole } = renderModal({
 			props: {
 				data: {
 					eventBus,
@@ -207,9 +215,9 @@ describe('SourceControlPushModal', () => {
 		const submitButton = getByTestId('source-control-push-modal-submit');
 		const commitMessage = 'commit message';
 		expect(submitButton).toBeDisabled();
-		expect(getByText('1 new credentials added, 0 deleted and 0 changed')).toBeInTheDocument();
-		expect(getByText('At least one new variable has been added or modified')).toBeInTheDocument();
-		expect(getByText('At least one new tag has been added or modified')).toBeInTheDocument();
+		expect(getByRole('alert').textContent).toContain('Credentials: 1 added.');
+		expect(getByRole('alert').textContent).toContain('Variables: at least one new or modified.');
+		expect(getByRole('alert').textContent).toContain('Tags: at least one new or modified.');
 
 		await userEvent.type(getByTestId('source-control-push-modal-commit'), commitMessage);