👌 Updating button component to support anchor tag, removing unused i1…

…8n entry
n8n-io · Nov 16, 2023 · d3d29e5 · d3d29e5
1 parent dda4a56
commit d3d29e5
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 11 deletions.
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,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
@@ -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
@@ -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
@@ -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;