From 4dbae0e2e95d1b5f46cfc50a5a9fc6bb761defde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= <milorad@n8n.io>
Date: Mon, 20 Nov 2023 10:51:46 +0100
Subject: [PATCH] feat: Add Creator hub link to Templates page (#7721)

Replace the `New Blank Workflow` button with link to the new Creator Hub
in the Templates page
---
 .../__snapshots__/ActionBox.spec.ts.snap      |  2 +-
 .../src/components/N8nButton/Button.vue       | 23 ++++++++++++++++---
 packages/editor-ui/src/constants.ts           |  2 ++
 .../src/plugins/i18n/locales/en.json          |  2 +-
 .../src/views/TemplatesSearchView.vue         | 14 +++++------
 5 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/packages/design-system/src/components/N8nActionBox/__tests__/__snapshots__/ActionBox.spec.ts.snap b/packages/design-system/src/components/N8nActionBox/__tests__/__snapshots__/ActionBox.spec.ts.snap
index 6679585f19..f48caf426c 100644
--- a/packages/design-system/src/components/N8nActionBox/__tests__/__snapshots__/ActionBox.spec.ts.snap
+++ b/packages/design-system/src/components/N8nActionBox/__tests__/__snapshots__/ActionBox.spec.ts.snap
@@ -9,7 +9,7 @@ exports[`N8NActionBox > should render correctly 1`] = `
   <div class=\\"description\\">
     <n8n-text-stub color=\\"text-base\\" bold=\\"false\\" size=\\"medium\\" compact=\\"false\\" tag=\\"span\\"></n8n-text-stub>
   </div>
-  <n8n-button-stub label=\\"Do something\\" type=\\"primary\\" size=\\"large\\" loading=\\"false\\" disabled=\\"false\\" outline=\\"false\\" text=\\"false\\" block=\\"false\\" active=\\"false\\" square=\\"false\\"></n8n-button-stub>
+  <n8n-button-stub label=\\"Do something\\" type=\\"primary\\" size=\\"large\\" loading=\\"false\\" disabled=\\"false\\" outline=\\"false\\" text=\\"false\\" block=\\"false\\" active=\\"false\\" square=\\"false\\" element=\\"button\\"></n8n-button-stub>
   <!--v-if-->
 </div>"
 `;
diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue
index 346b33d68d..bc794cf01d 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,13 +16,13 @@
 		<span v-if="label || $slots.default">
 			<slot>{{ label }}</slot>
 		</span>
-	</button>
+	</component>
 </template>
 
 <script setup lang="ts">
 import N8nIcon from '../N8nIcon';
 import N8nSpinner from '../N8nSpinner';
-import { useCssModule, computed, useAttrs } from 'vue';
+import { useCssModule, computed, useAttrs, watchEffect } from 'vue';
 
 const $style = useCssModule();
 const $attrs = useAttrs();
@@ -72,6 +74,21 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	element: {
+		type: String,
+		default: 'button',
+		validator: (value: string) => ['button', 'a'].includes(value),
+	},
+	href: {
+		type: String,
+		required: false,
+	},
+});
+
+watchEffect(() => {
+	if (props.element === 'a' && !props.href) {
+		console.error('n8n-button:href is required for link buttons');
+	}
 });
 
 const ariaBusy = computed(() => (props.loading ? 'true' : undefined));
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index 500a2547c8..76c7433fbc 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -648,3 +648,5 @@ export const DRAG_EVENT_DATA_KEY = 'nodesAndConnections';
 
 export const NOT_DUPLICATABE_NODE_TYPES = [FORM_TRIGGER_NODE_TYPE];
 export const UPDATE_WEBHOOK_ID_NODE_TYPES = [FORM_TRIGGER_NODE_TYPE];
+
+export const CREATOR_HUB_URL = 'https://creators.n8n.io/hub';
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 872ba3d3cd..dafe27f38d 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -1697,7 +1697,7 @@
 	"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",
 	"templates.workflows": "Workflows",
diff --git a/packages/editor-ui/src/views/TemplatesSearchView.vue b/packages/editor-ui/src/views/TemplatesSearchView.vue
index da680b7879..08776b586d 100644
--- a/packages/editor-ui/src/views/TemplatesSearchView.vue
+++ b/packages/editor-ui/src/views/TemplatesSearchView.vue
@@ -10,8 +10,11 @@
 				<div :class="$style.button">
 					<n8n-button
 						size="large"
-						:label="$locale.baseText('templates.newButton')"
-						@click="openNewWorkflow"
+						type="secondary"
+						element="a"
+						:href="creatorHubUrl"
+						:label="$locale.baseText('templates.shareWorkflow')"
+						target="_blank"
 					/>
 				</div>
 			</div>
@@ -90,7 +93,7 @@ import type {
 } from '@/Interface';
 import type { IDataObject } from 'n8n-workflow';
 import { setPageTitle } from '@/utils';
-import { VIEWS } from '@/constants';
+import { CREATOR_HUB_URL, VIEWS } from '@/constants';
 import { debounceHelper } from '@/mixins/debounce';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
@@ -132,6 +135,7 @@ export default defineComponent({
 			search: '',
 			searchEventToTrack: null as null | ISearchEvent,
 			errorLoadingWorkflows: false,
+			creatorHubUrl: CREATOR_HUB_URL as string,
 		};
 	},
 	computed: {
@@ -224,10 +228,6 @@ export default defineComponent({
 				this.searchEventToTrack = null;
 			}
 		},
-		openNewWorkflow() {
-			this.uiStore.nodeViewInitialized = false;
-			void this.$router.push({ name: VIEWS.NEW_WORKFLOW });
-		},
 		onSearchInput(search: string) {
 			this.loadingWorkflows = true;
 			this.loadingCollections = true;