⚡ Add "About n8n" to Help in sidebar

packages/editor-ui/src/components/About.vue

@@ -0,0 +1,88 @@
+<template>
+	<span>
+		<el-dialog class="n8n-about" :visible="dialogVisible" append-to-body width="50%" title="About n8n" :before-close="closeDialog">
+			<div>
+				<el-row>
+					<el-col :span="8" class="info-name">
+						n8n Version:
+					</el-col>
+					<el-col :span="16">
+						{{versionCli}}
+					</el-col>
+				</el-row>
+				<el-row>
+					<el-col :span="8" class="info-name">
+						Source Code:
+					</el-col>
+					<el-col :span="16">
+						<a href="https://github.com/n8n-io/n8n" target="_blank">https://github.com/n8n-io/n8n</a>
+					</el-col>
+				</el-row>
+				<el-row>
+					<el-col :span="8" class="info-name">
+						License:
+					</el-col>
+					<el-col :span="16">
+						<a href="https://github.com/n8n-io/n8n/blob/master/packages/cli/LICENSE.md" target="_blank">Apache 2.0 with Commons Clause</a>
+					</el-col>
+				</el-row>
+
+				<div class="action-buttons">
+					<el-button type="success" @click="closeDialog">
+						Close
+					</el-button>
+				</div>
+			</div>
+		</el-dialog>
+	</span>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+import { genericHelpers } from '@/components/mixins/genericHelpers';
+import { showMessage } from '@/components/mixins/showMessage';
+
+import mixins from 'vue-typed-mixins';
+
+export default mixins(
+	genericHelpers,
+	showMessage,
+).extend({
+	name: 'About',
+	props: [
+		'dialogVisible',
+	],
+	computed: {
+		versionCli (): string {
+			return this.$store.getters.versionCli;
+		},
+	},
+	methods: {
+		closeDialog () {
+			// Handle the close externally as the visible parameter is an external prop
+			// and is so not allowed to be changed here.
+			this.$emit('closeDialog');
+			return false;
+		},
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.n8n-about {
+	.el-row {
+		padding: 0.25em 0;
+	}
+}
+
+.action-buttons {
+	margin-top: 1em;
+	text-align: right;
+}
+
+.info-name {
+	line-height: 32px;
+}
+
+</style>

packages/editor-ui/src/components/MainSidebar.vue

@@ -1,5 +1,6 @@
 <template>
 	<div id="side-menu">
+		<about :dialogVisible="aboutDialogVisible" @closeDialog="closeAboutDialog"></about>
 		<executions-list :dialogVisible="executionsListDialogVisible" @closeDialog="closeExecutionsListOpenDialog"></executions-list>
 		<credentials-list :dialogVisible="credentialOpenDialogVisible" @closeDialog="closeCredentialOpenDialog"></credentials-list>
 		<credentials-edit :dialogVisible="credentialNewDialogVisible" @closeDialog="closeCredentialNewDialog"></credentials-edit>
@@ -14,15 +15,9 @@
 			<el-menu default-active="workflow" @select="handleSelect" :collapse="isCollapsed">
 
 				<el-menu-item index="logo" class="logo-item">
-					<el-tooltip placement="top" effect="light">
+					<a href="https://n8n.io" target="_blank" class="logo">
-						<div slot="content">
-							n8n.io - Currently installed version {{versionCli}}
-						</div>
 						<img src="/n8n-icon-small.png" class="icon" alt="n8n.io"/>
-
+						<span class="logo-text" slot="title">n8n.io</span>
-					</el-tooltip>
-					<a href="https://n8n.io" class="logo-text" target="_blank" slot="title">
-						n8n.io
 					</a>
 				</el-menu-item>
 
@@ -149,6 +144,12 @@
 							</a>
 						</template>
 					</el-menu-item>
+					<el-menu-item index="help-about">
+						<template slot="title">
+							<font-awesome-icon class="about-icon" icon="info"/>
+							<span slot="title" class="item-title">About n8n</span>
+						</template>
+					</el-menu-item>
 				</el-submenu>
 
 			</el-menu>
@@ -168,6 +169,7 @@ import {
 	IWorkflowDataUpdate,
 } from '../Interface';
 
+import About from '@/components/About.vue';
 import CredentialsEdit from '@/components/CredentialsEdit.vue';
 import CredentialsList from '@/components/CredentialsList.vue';
 import ExecutionsList from '@/components/ExecutionsList.vue';
@@ -196,6 +198,7 @@ export default mixins(
 	.extend({
 		name: 'MainHeader',
 		components: {
+			About,
 			CredentialsEdit,
 			CredentialsList,
 			ExecutionsList,
@@ -204,6 +207,7 @@ export default mixins(
 		},
 		data () {
 			return {
+				aboutDialogVisible: false,
 				isCollapsed: true,
 				credentialNewDialogVisible: false,
 				credentialOpenDialogVisible: false,
@@ -251,9 +255,6 @@ export default mixins(
 			currentWorkflow (): string {
 				return this.$route.params.name;
 			},
-			versionCli (): string {
-				return this.$store.getters.versionCli;
-			},
 			workflowExecution (): IExecutionResponse | null {
 				return this.$store.getters.getWorkflowExecution;
 			},
@@ -269,6 +270,9 @@ export default mixins(
 				this.$store.commit('setWorkflowExecutionData', null);
 				this.updateNodesExecutionIssues();
 			},
+			closeAboutDialog () {
+				this.aboutDialogVisible = false;
+			},
 			closeWorkflowOpenDialog () {
 				this.workflowOpenDialogVisible = false;
 			},
@@ -434,6 +438,8 @@ export default mixins(
 					this.saveCurrentWorkflow();
 				} else if (key === 'workflow-save-as') {
 					this.saveCurrentWorkflow(true);
+				} else if (key === 'help-about') {
+					this.aboutDialogVisible = true;
 				} else if (key === 'workflow-settings') {
 					this.workflowSettingsDialogVisible = true;
 				} else if (key === 'workflow-new') {
@@ -466,6 +472,9 @@ export default mixins(
 </script>
 
 <style lang="scss">
+.about-icon {
+	padding-left: 5px;
+}
 
 #collapse-change-button {
 	position: absolute;
@@ -520,7 +529,11 @@ export default mixins(
 	}
 }
 
-a.logo-text {
+a.logo {
+	text-decoration: none;
+}
+
+.logo-text {
 	position: relative;
 	top: -3px;
 	left: 5px;