feat: Github star button in-app (#11695)

n8n-io · Nov 14, 2024 · 83511fc · 83511fc
1 parent 65aed8e
commit 83511fc
Show file tree

Hide file tree

Showing 10 changed files with 97 additions and 122 deletions.
diff --git a/cypress/e2e/1-workflows.cy.ts b/cypress/e2e/1-workflows.cy.ts
@@ -23,6 +23,7 @@ describe('Workflows', () => {
 	});
 
 	it('should create multiple new workflows using add workflow button', () => {
+		cy.viewport(1920, 1080);
 		[...Array(multipleWorkflowsCount).keys()].forEach(() => {
 			cy.visit(WorkflowsPage.url);
 			WorkflowsPage.getters.createWorkflowButton().click();
@@ -35,6 +36,7 @@ describe('Workflows', () => {
 	});
 
 	it('should search for a workflow', () => {
+		cy.viewport(1920, 1080);
 		// One Result
 		WorkflowsPage.getters.searchBar().type('Empty State Card Workflow');
 		WorkflowsPage.getters.workflowCards().should('have.length', 1);
@@ -60,6 +62,7 @@ describe('Workflows', () => {
 	});
 
 	it('should delete all the workflows', () => {
+		cy.viewport(1920, 1080);
 		WorkflowsPage.getters.workflowCards().should('have.length', multipleWorkflowsCount + 1);
 
 		WorkflowsPage.getters.workflowCards().each(($el) => {
@@ -75,6 +78,7 @@ describe('Workflows', () => {
 	});
 
 	it('should respect tag querystring filter when listing workflows', () => {
+		cy.viewport(1920, 1080);
 		WorkflowsPage.getters.newWorkflowButtonCard().click();
 
 		cy.createFixtureWorkflow('Test_workflow_2.json', getUniqueWorkflowName('My New Workflow'));

diff --git a/cypress/e2e/17-workflow-tags.cy.ts b/cypress/e2e/17-workflow-tags.cy.ts
@@ -53,6 +53,7 @@ describe('Workflow tags', () => {
 	});
 
 	it('should detach a tag inline by clicking on X on tag pill', () => {
+		cy.viewport(1920, 1080);
 		wf.getters.createTagButton().click();
 		wf.actions.addTags(TEST_TAGS);
 		wf.getters.nthTagPill(1).click();
@@ -73,6 +74,7 @@ describe('Workflow tags', () => {
 	});
 
 	it('should not show non existing tag as a selectable option', () => {
+		cy.viewport(1920, 1080);
 		const NON_EXISTING_TAG = 'My Test Tag';
 
 		wf.getters.createTagButton().click();

diff --git a/cypress/e2e/19-execution.cy.ts b/cypress/e2e/19-execution.cy.ts
@@ -514,6 +514,7 @@ describe('Execution', () => {
 	});
 
 	it('should send proper payload for node rerun', () => {
+		cy.viewport(1920, 1080);
 		cy.createFixtureWorkflow('Multiple_trigger_node_rerun.json', 'Multiple trigger node rerun');
 
 		workflowPage.getters.zoomToFitButton().click();

diff --git a/cypress/e2e/20-workflow-executions.cy.ts b/cypress/e2e/20-workflow-executions.cy.ts
@@ -101,6 +101,7 @@ describe('Workflow Executions', () => {
 		});
 
 		it('should show workflow data in executions tab after hard reload and modify name and tags', () => {
+			cy.viewport(1920, 1080);
 			executionsTab.actions.switchToExecutionsTab();
 			checkMainHeaderELements();
 			workflowPage.getters.saveButton().find('button').should('not.exist');

diff --git a/cypress/e2e/34-template-credentials-setup.cy.ts b/cypress/e2e/34-template-credentials-setup.cy.ts
@@ -182,6 +182,7 @@ describe('Template credentials setup', () => {
 		});
 
 		it('should fill credentials from workflow editor', () => {
+			cy.viewport(1920, 1080);
 			templateCredentialsSetupPage.visitTemplateCredentialSetupPage(testTemplate.id);
 			templateCredentialsSetupPage.getters.skipLink().click();
 

diff --git a/cypress/e2e/45-ai-assistant.cy.ts b/cypress/e2e/45-ai-assistant.cy.ts
@@ -36,6 +36,7 @@ describe('AI Assistant::enabled', () => {
 	});
 
 	it('renders placeholder UI', () => {
+		cy.viewport(1920, 1080);
 		aiAssistant.getters.askAssistantFloatingButton().should('be.visible');
 		aiAssistant.getters.askAssistantFloatingButton().click();
 		aiAssistant.getters.askAssistantChat().should('be.visible');

diff --git a/cypress/e2e/5-ndv.cy.ts b/cypress/e2e/5-ndv.cy.ts
@@ -66,6 +66,7 @@ describe('NDV', () => {
 	});
 
 	it('should disconect Switch outputs if rules order was changed', () => {
+		cy.viewport(1920, 1080);
 		cy.createFixtureWorkflow('NDV-test-switch_reorder.json', 'NDV test switch reorder');
 		workflowPage.actions.zoomToFit();
 
@@ -232,6 +233,7 @@ describe('NDV', () => {
 			ndv.getters.outputPanel().find('[class*=_pagination]').should('exist');
 		});
 		it('should display large schema', () => {
+			cy.viewport(1920, 1080);
 			cy.createFixtureWorkflow(
 				'Test_workflow_schema_test_pinned_data.json',
 				'NDV test schema view 2',
@@ -718,6 +720,7 @@ describe('NDV', () => {
 	});
 
 	it('Should open appropriate node creator after clicking on connection hint link', () => {
+		cy.viewport(1920, 1080);
 		const nodeCreator = new NodeCreator();
 		const hintMapper = {
 			Memory: 'AI Nodes',

diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json
@@ -74,6 +74,7 @@
     "vue": "catalog:frontend",
     "vue-agile": "^2.0.0",
     "vue-chartjs": "^5.2.0",
+    "vue-github-button": "^3.1.3",
     "vue-i18n": "^9.2.2",
     "vue-json-pretty": "2.2.4",
     "vue-markdown-render": "catalog:frontend",

diff --git a/packages/editor-ui/src/components/MainHeader/MainHeader.vue b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
@@ -18,6 +18,8 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useExecutionsStore } from '@/stores/executions.store';
 import { usePushConnection } from '@/composables/usePushConnection';
 
+import GithubButton from 'vue-github-button';
+
 const router = useRouter();
 const route = useRoute();
 const locale = useI18n();
@@ -161,7 +163,7 @@ async function navigateToExecutionsView(openInNewTab: boolean) {
 </script>
 
 <template>
-	<div>
+	<div class="container">
 		<div :class="{ 'main-header': true, expanded: !uiStore.sidebarMenuCollapsed }">
 			<div v-show="!hideMenuBar" class="top-menu">
 				<WorkflowDetails
@@ -174,18 +176,35 @@ async function navigateToExecutionsView(openInNewTab: boolean) {
 					:active="workflow.active"
 					:read-only="readOnly"
 				/>
-				<TabBar
-					v-if="onWorkflowPage"
-					:items="tabBarItems"
-					:model-value="activeHeaderTab"
-					@update:model-value="onTabSelected"
-				/>
 			</div>
+			<TabBar
+				v-if="onWorkflowPage"
+				:items="tabBarItems"
+				:model-value="activeHeaderTab"
+				@update:model-value="onTabSelected"
+			/>
+		</div>
+		<div class="github-button">
+			<GithubButton
+				href="https://github.com/n8n-io/n8n"
+				:data-color-scheme="uiStore.appliedTheme"
+				data-size="large"
+				data-show-count="true"
+				aria-label="Star n8n-io/n8n on GitHub"
+				>Star</GithubButton
+			>
 		</div>
 	</div>
 </template>
 
 <style lang="scss">
+.container {
+	display: flex;
+	position: relative;
+	width: 100%;
+	align-items: center;
+}
+
 .main-header {
 	background-color: var(--color-background-xlight);
 	height: $header-height;
@@ -201,6 +220,18 @@ async function navigateToExecutionsView(openInNewTab: boolean) {
 	font-size: 0.9em;
 	height: $header-height;
 	font-weight: 400;
-	padding: 0 var(--spacing-m) 0 var(--spacing-xs);
+	padding: 0 var(--spacing-m) 0 var(--spacing-m);
+}
+
+.github-button {
+	display: flex;
+	position: relative;
+	align-items: center;
+	height: $header-height;
+	padding-left: var(--spacing-m);
+	padding-right: var(--spacing-m);
+	background-color: var(--color-background-xlight);
+	border-bottom: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
+	border-left: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
 }
 </style>