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
n8n-io · Nov 20, 2023 · 4dbae0e · 4dbae0e
1 parent c9f6ea1
commit 4dbae0e
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 12 deletions.
diff --git a/.../design-system/src/components/N8nActionBox/__tests__/__snapshots__/ActionBox.spec.ts.snap b/.../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
@@ -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
@@ -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
@@ -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
@@ -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;