From 44d3b3ed7ee77715006591a4f49049388fcd4035 Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Date: Fri, 17 Nov 2023 14:15:13 +0100
Subject: [PATCH] fix(editor): Show v1 banner dismiss button if owner (#7722)

Github issue / Community forum post (link here to close automatically):

https://community.n8n.io/t/v1-upgrade-banner-shall-be-dismissed-permanently/32775
---
 .../src/components/banners/V1Banner.vue       |   5 +-
 .../banners/__tests__/V1Banner.spec.ts        |  36 +++++++
 .../__snapshots__/V1Banner.spec.ts.snap       | 101 ++++++++++++++++++
 3 files changed, 139 insertions(+), 3 deletions(-)
 create mode 100644 packages/editor-ui/src/components/banners/__tests__/V1Banner.spec.ts
 create mode 100644 packages/editor-ui/src/components/banners/__tests__/__snapshots__/V1Banner.spec.ts.snap

diff --git a/packages/editor-ui/src/components/banners/V1Banner.vue b/packages/editor-ui/src/components/banners/V1Banner.vue
index 23a176e42e..e146911d2c 100644
--- a/packages/editor-ui/src/components/banners/V1Banner.vue
+++ b/packages/editor-ui/src/components/banners/V1Banner.vue
@@ -5,8 +5,7 @@ import { useUsersStore } from '@/stores/users.store';
 import { useUIStore } from '@/stores/ui.store';
 
 const uiStore = useUIStore();
-
-const { isInstanceOwner } = useUsersStore();
+const usersStore = useUsersStore();
 
 async function dismissPermanently() {
 	await uiStore.dismissBanner('V1', 'permanent');
@@ -18,7 +17,7 @@ async function dismissPermanently() {
 		<template #mainContent>
 			<span v-html="locale.baseText('banners.v1.message')"></span>
 			<a
-				v-if="isInstanceOwner"
+				v-if="usersStore.isInstanceOwner"
 				:class="$style.link"
 				@click="dismissPermanently"
 				data-test-id="banner-confirm-v1"
diff --git a/packages/editor-ui/src/components/banners/__tests__/V1Banner.spec.ts b/packages/editor-ui/src/components/banners/__tests__/V1Banner.spec.ts
new file mode 100644
index 0000000000..8c9cee11b6
--- /dev/null
+++ b/packages/editor-ui/src/components/banners/__tests__/V1Banner.spec.ts
@@ -0,0 +1,36 @@
+import { render } from '@testing-library/vue';
+import V1Banner from '../V1Banner.vue';
+import { createPinia, setActivePinia } from 'pinia';
+import { useUsersStore } from '@/stores/users.store';
+
+describe('V1 Banner', () => {
+	let pinia: ReturnType<typeof createPinia>;
+	let usersStore: ReturnType<typeof useUsersStore>;
+
+	beforeEach(async () => {
+		pinia = createPinia();
+		setActivePinia(pinia);
+
+		usersStore = useUsersStore();
+	});
+
+	it('should render banner', () => {
+		const { container } = render(V1Banner);
+		expect(container).toMatchSnapshot();
+		expect(container.querySelectorAll('a')).toHaveLength(1);
+	});
+
+	it('should render banner with dismiss call if user is owner', () => {
+		vi.spyOn(usersStore, 'currentUser', 'get').mockReturnValue({
+			globalRole: {
+				id: 0,
+				name: 'owner',
+				createdAt: '2021-08-09T14:00:00.000Z',
+			},
+		});
+
+		const { container } = render(V1Banner);
+		expect(container).toMatchSnapshot();
+		expect(container.querySelectorAll('a')).toHaveLength(2);
+	});
+});
diff --git a/packages/editor-ui/src/components/banners/__tests__/__snapshots__/V1Banner.spec.ts.snap b/packages/editor-ui/src/components/banners/__tests__/__snapshots__/V1Banner.spec.ts.snap
new file mode 100644
index 0000000000..47e1f6b0b6
--- /dev/null
+++ b/packages/editor-ui/src/components/banners/__tests__/__snapshots__/V1Banner.spec.ts.snap
@@ -0,0 +1,101 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`V1 Banner > should render banner 1`] = `
+<div>
+  <n8n-callout
+    class="v1container"
+    data-test-id="banners-V1"
+    icon="info-circle"
+    iconsize="medium"
+    roundcorners="false"
+    theme="warning"
+  >
+    <div
+      class="mainContent keepSpace"
+    >
+      
+      <span>
+        n8n has been updated to version 1, introducing some breaking changes. Please consult the 
+        <a
+          href="https://docs.n8n.io/1-0-migration-checklist"
+          target="_blank"
+        >
+          migration guide
+        </a>
+         for more information.
+      </span>
+      <!--v-if-->
+      
+    </div>
+  </n8n-callout>
+</div>
+`;
+
+exports[`V1 Banner > should render banner if user is not woner 1`] = `
+<div>
+  <n8n-callout
+    class="v1container"
+    data-test-id="banners-V1"
+    icon="info-circle"
+    iconsize="medium"
+    roundcorners="false"
+    theme="warning"
+  >
+    <div
+      class="mainContent keepSpace"
+    >
+      
+      <span>
+        n8n has been updated to version 1, introducing some breaking changes. Please consult the 
+        <a
+          href="https://docs.n8n.io/1-0-migration-checklist"
+          target="_blank"
+        >
+          migration guide
+        </a>
+         for more information.
+      </span>
+      <!--v-if-->
+      
+    </div>
+  </n8n-callout>
+</div>
+`;
+
+exports[`V1 Banner > should render banner with dismiss call if user is owner 1`] = `
+<div>
+  <n8n-callout
+    class="v1container"
+    data-test-id="banners-V1"
+    icon="info-circle"
+    iconsize="medium"
+    roundcorners="false"
+    theme="warning"
+  >
+    <div
+      class="mainContent keepSpace"
+    >
+      
+      <span>
+        n8n has been updated to version 1, introducing some breaking changes. Please consult the 
+        <a
+          href="https://docs.n8n.io/1-0-migration-checklist"
+          target="_blank"
+        >
+          migration guide
+        </a>
+         for more information.
+      </span>
+      <a
+        class="link"
+        data-test-id="banner-confirm-v1"
+      >
+        <span>
+          Don't show again
+        </span>
+      </a>
+      
+    </div>
+  </n8n-callout>
+</div>
+`;