From d3d29e5488cd9d62a522f1970886e4e527a3c79d Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Thu, 16 Nov 2023 17:16:20 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=91=8C=20Updating=20button=20component=20?=
 =?UTF-8?q?to=20support=20anchor=20tag,=20removing=20unused=20i18n=20entry?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/N8nButton/Button.vue           | 15 +++++++++++++--
 .../__tests__/__snapshots__/Button.spec.ts.snap   |  8 ++++----
 .../editor-ui/src/plugins/i18n/locales/en.json    |  1 -
 .../editor-ui/src/views/TemplatesSearchView.vue   |  8 ++++----
 4 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue
index 346b33d68d9dd..d466dd5233cfc 100644
--- a/packages/design-system/src/components/N8nButton/Button.vue
+++ b/packages/design-system/src/components/N8nButton/Button.vue
@@ -1,9 +1,11 @@
 <template>
-	<button
+	<component
+		:is="element"
 		:class="classes"
 		:disabled="isDisabled"
 		:aria-disabled="ariaDisabled"
 		:aria-busy="ariaBusy"
+		:href="href"
 		aria-live="polite"
 		v-bind="$attrs"
 	>
@@ -14,7 +16,7 @@
 		<span v-if="label || $slots.default">
 			<slot>{{ label }}</slot>
 		</span>
-	</button>
+	</component>
 </template>
 
 <script setup lang="ts">
@@ -72,11 +74,20 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	link: {
+		type: Boolean,
+		default: false,
+	},
+	href: {
+		type: String,
+		default: '#',
+	},
 });
 
 const ariaBusy = computed(() => (props.loading ? 'true' : undefined));
 const ariaDisabled = computed(() => (props.disabled ? 'true' : undefined));
 const isDisabled = computed(() => props.disabled || props.loading);
+const element = computed(() => (props.link ? 'a' : 'button'));
 
 const classes = computed(() => {
 	return (
diff --git a/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap b/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
index 162da77b5d108..a69e6e3033845 100644
--- a/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
+++ b/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
@@ -1,17 +1,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`components > N8nButton > props > icon > should render icon button 1`] = `"<button class=\\"button button primary medium withIcon\\" aria-live=\\"polite\\"><span class=\\"icon\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub></span><span>Button</span></button>"`;
+exports[`components > N8nButton > props > icon > should render icon button 1`] = `"<button class=\\"button button primary medium withIcon\\" href=\\"#\\" aria-live=\\"polite\\"><span class=\\"icon\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub></span><span>Button</span></button>"`;
 
-exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `"<button class=\\"button button primary medium loading withIcon\\" disabled=\\"\\" aria-busy=\\"true\\" aria-live=\\"polite\\"><span class=\\"icon\\"><n8n-spinner-stub size=\\"medium\\" type=\\"dots\\"></n8n-spinner-stub></span><span>Button</span></button>"`;
+exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `"<button class=\\"button button primary medium loading withIcon\\" disabled=\\"\\" aria-busy=\\"true\\" href=\\"#\\" aria-live=\\"polite\\"><span class=\\"icon\\"><n8n-spinner-stub size=\\"medium\\" type=\\"dots\\"></n8n-spinner-stub></span><span>Button</span></button>"`;
 
 exports[`components > N8nButton > props > square > should render square button 1`] = `
-"<button class=\\"button button primary medium square\\" aria-live=\\"polite\\">
+"<button class=\\"button button primary medium square\\" href=\\"#\\" aria-live=\\"polite\\">
   <!--v-if--><span>48</span>
 </button>"
 `;
 
 exports[`components > N8nButton > should render correctly 1`] = `
-"<button class=\\"button button primary medium\\" aria-live=\\"polite\\">
+"<button class=\\"button button primary medium\\" href=\\"#\\" aria-live=\\"polite\\">
   <!--v-if--><span>Button</span>
 </button>"
 `;
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index f81937c8c8d2d..70d6daae6c6b0 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -1697,7 +1697,6 @@
 	"templates.collectionsNotFound": "Collection could not be found",
 	"templates.connectionWarning": "⚠️ There was a problem fetching workflow templates. Check your internet connection.",
 	"templates.heading": "Workflow templates",
-	"templates.newButton": "New blank workflow",
 	"templates.shareWorkflow": "Share template",
 	"templates.noSearchResults": "Nothing found. Try adjusting your search to see more.",
 	"templates.searchPlaceholder": "Search workflows",
diff --git a/packages/editor-ui/src/views/TemplatesSearchView.vue b/packages/editor-ui/src/views/TemplatesSearchView.vue
index 20f405a233706..503b6afaa7661 100644
--- a/packages/editor-ui/src/views/TemplatesSearchView.vue
+++ b/packages/editor-ui/src/views/TemplatesSearchView.vue
@@ -11,8 +11,10 @@
 					<n8n-button
 						size="large"
 						type="secondary"
+						:link="true"
+						:href="creatorHubUrl"
 						:label="$locale.baseText('templates.shareWorkflow')"
-						@click="openNewWorkflow"
+						target="_blank"
 					/>
 				</div>
 			</div>
@@ -133,6 +135,7 @@ export default defineComponent({
 			search: '',
 			searchEventToTrack: null as null | ISearchEvent,
 			errorLoadingWorkflows: false,
+			creatorHubUrl: CREATOR_HUB_URL as string,
 		};
 	},
 	computed: {
@@ -225,9 +228,6 @@ export default defineComponent({
 				this.searchEventToTrack = null;
 			}
 		},
-		openNewWorkflow() {
-			window.open(CREATOR_HUB_URL, '_blank');
-		},
 		onSearchInput(search: string) {
 			this.loadingWorkflows = true;
 			this.loadingCollections = true;