refactor(editor): Add GitHub 30k stars banner (no-changelog) (#6204)

* ⚡ Add GitHub 30k stars banner

* refactor(editor): Add date check to GitHub 30k stars banner (#6210)

packages/editor-ui/src/components/layouts/ResourcesListLayout.vue

@@ -61,6 +61,20 @@
 			<page-view-layout-list :overflow="type !== 'list'" v-else>
 				<template #header>
 					<div class="mb-xs">
+						<n8n-callout
+							v-if="starsBannerShouldRender"
+							theme="secondary"
+							icon="star"
+							:class="$style['github-stars-banner']"
+						>
+							<span v-html="$locale.baseText('githubStars.banner.title')"></span>
+							<template #trailingContent>
+								<n8n-link :to="repoUrl" size="small" theme="secondary" bold underline>
+									{{ $locale.baseText('githubStars.banner.link') }}
+								</n8n-link>
+							</template>
+						</n8n-callout>
+
 						<div :class="$style['filters-row']">
 							<n8n-input
 								:class="[$style['search'], 'mr-2xs']"
@@ -187,7 +201,11 @@ import mixins from 'vue-typed-mixins';
 
 import PageViewLayout from '@/components/layouts/PageViewLayout.vue';
 import PageViewLayoutList from '@/components/layouts/PageViewLayoutList.vue';
-import { EnterpriseEditionFeature } from '@/constants';
+import {
+	EnterpriseEditionFeature,
+	GITHUB_STARS_BANNER_SHOW_UNTIL_DATE,
+	MAIN_REPOSITORY_URL,
+} from '@/constants';
 import TemplateCard from '@/components/TemplateCard.vue';
 import type { PropType } from 'vue';
 import { debounceHelper } from '@/mixins/debounce';
@@ -299,10 +317,14 @@ export default mixins(showMessage, debounceHelper).extend({
 			rowsPerPage: 10 as number | '*',
 			resettingFilters: false,
 			EnterpriseEditionFeature,
+			repoUrl: MAIN_REPOSITORY_URL,
 		};
 	},
 	computed: {
 		...mapStores(useSettingsStore, useUsersStore),
+		starsBannerShouldRender() {
+			return this.resourceKey === 'workflows' && new Date() < GITHUB_STARS_BANNER_SHOW_UNTIL_DATE;
+		},
 		subviewResources(): IResource[] {
 			if (!this.shareable) {
 				return this.resources as IResource[];
@@ -533,4 +555,8 @@ export default mixins(showMessage, debounceHelper).extend({
 .datatable {
 	padding-bottom: var(--spacing-s);
 }
+
+.github-stars-banner {
+	margin-bottom: var(--spacing-m);
+}
 </style>

packages/editor-ui/src/constants.ts

@@ -80,6 +80,7 @@ export const COMMUNITY_NODES_BLOCKLIST_DOCS_URL = `https://${DOCS_DOMAIN}/integr
 export const CUSTOM_NODES_DOCS_URL = `https://${DOCS_DOMAIN}/integrations/creating-nodes/code/create-n8n-nodes-module/`;
 export const EXPRESSIONS_DOCS_URL = `https://${DOCS_DOMAIN}/code-examples/expressions/`;
 export const N8N_PRICING_PAGE_URL = 'https://n8n.io/pricing';
+export const MAIN_REPOSITORY_URL = 'https://github.com/n8n-io/n8n';
 
 // node types
 export const BAMBOO_HR_NODE_TYPE = 'n8n-nodes-base.bambooHr';
@@ -548,3 +549,5 @@ export const ALLOWED_HTML_TAGS = [
 	'details',
 	'summary',
 ];
+
+export const GITHUB_STARS_BANNER_SHOW_UNTIL_DATE = new Date('2023-06-01');

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -593,6 +593,8 @@
 	"genericHelpers.secShort": "s",
 	"genericHelpers.showMessage.message": "Executions are read-only. Make changes from the <b>Workflow</b> tab.",
 	"genericHelpers.showMessage.title": "Cannot edit execution",
+	"githubStars.banner.title": "<b>Celebrating 30,000 stars on GitHub!</b> A big thank you to our community for your amazing support and contributions",
+	"githubStars.banner.link": "Star us on GitHub",
 	"mainSidebar.aboutN8n": "About n8n",
 	"mainSidebar.confirmMessage.workflowDelete.cancelButtonText": "",
 	"mainSidebar.confirmMessage.workflowDelete.confirmButtonText": "Yes, delete",

packages/editor-ui/src/plugins/icons/index.ts

@@ -105,6 +105,7 @@ import {
 	faSignOutAlt,
 	faSlidersH,
 	faSpinner,
+	faStar,
 	faStop,
 	faSun,
 	faSync,
@@ -241,6 +242,7 @@ addIcon(faSlidersH);
 addIcon(faSpinner);
 addIcon(faSolidStickyNote);
 addIcon(faStickyNote as IconDefinition);
+addIcon(faStar);
 addIcon(faStop);
 addIcon(faSun);
 addIcon(faSync);