From 8b1af08c40378d0331fe8cfa9ee937b3e6e3848a Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Fri, 2 Jul 2021 11:00:21 +0200
Subject: [PATCH] implement key features

---
 packages/editor-ui/src/Interface.ts                 |  1 +
 packages/editor-ui/src/components/Node.vue          |  7 +------
 .../src/components/NodeCreator/NodeItem.vue         |  2 +-
 packages/editor-ui/src/components/NodeIcon.vue      |  9 ++++++++-
 packages/editor-ui/src/components/VersionCard.vue   | 13 +++++++++++++
 packages/editor-ui/src/components/VersionsModal.vue |  2 +-
 6 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index c19c7964b00..5acbaae9989 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -552,6 +552,7 @@ export interface IVersion {
 		name: string;
 		displayName: string;
 		icon: string;
+		defaults: INodeParameters;
 		iconData: {
 			type: string;
 			icon?: string;
diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index 3ba3de90e6f..fd17eaea9e6 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -30,7 +30,7 @@
 				</div>
 			</div>
 
-			<NodeIcon class="node-icon" :nodeType="nodeType" size="60" :style="nodeIconStyle" :shrink="true"/>
+			<NodeIcon class="node-icon" :nodeType="nodeType" size="60" :shrink="true" :disabled="this.data.disabled"/>
 		</div>
 		<div class="node-description">
 			<div class="node-name" :title="data.name">
@@ -77,11 +77,6 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 		isExecuting (): boolean {
 			return this.$store.getters.executingNode === this.data.name;
 		},
-		nodeIconStyle (): object {
-			return {
-				color: this.data.disabled ? '#ccc' : this.data.color,
-			};
-		},
 		nodeType (): INodeTypeDescription | null {
 			return this.$store.getters.nodeType(this.data.type);
 		},
diff --git a/packages/editor-ui/src/components/NodeCreator/NodeItem.vue b/packages/editor-ui/src/components/NodeCreator/NodeItem.vue
index 06f4d4f4bef..c13c6f11a83 100644
--- a/packages/editor-ui/src/components/NodeCreator/NodeItem.vue
+++ b/packages/editor-ui/src/components/NodeCreator/NodeItem.vue
@@ -1,6 +1,6 @@
 <template functional>
 	<div :class="{[$style['node-item']]: true, [$style.bordered]: props.bordered}">
-		<NodeIcon :class="$style['node-icon']" :nodeType="props.nodeType" :style="{color: props.nodeType.defaults.color}" />
+		<NodeIcon :class="$style['node-icon']" :nodeType="props.nodeType" />
 		<div>
 			<div :class="$style.details">
 				<span :class="$style.name">{{props.nodeType.displayName}}</span>
diff --git a/packages/editor-ui/src/components/NodeIcon.vue b/packages/editor-ui/src/components/NodeIcon.vue
index 39c5a9bbb63..f71aebaefaf 100644
--- a/packages/editor-ui/src/components/NodeIcon.vue
+++ b/packages/editor-ui/src/components/NodeIcon.vue
@@ -26,16 +26,19 @@ export default Vue.extend({
 		'nodeType',
 		'size',
 		'shrink',
+		'disabled',
 	],
 	computed: {
 		iconStyleData (): object {
+			const color = this.disabled ? '#ccc' : this.nodeType.defaults && this.nodeType.defaults.color;
 			if (!this.size) {
-				return {};
+				return {color};
 			}
 
 			const size = parseInt(this.size, 10);
 
 			return {
+				color,
 				width: size + 'px',
 				height: size + 'px',
 				'font-size': Math.floor(parseInt(this.size, 10) * 0.6) + 'px',
@@ -98,6 +101,10 @@ export default Vue.extend({
 	&.full .icon {
 		height: 100%;
 		width: 100%;
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
 	}
 
 	&.shrink .icon {
diff --git a/packages/editor-ui/src/components/VersionCard.vue b/packages/editor-ui/src/components/VersionCard.vue
index 44132f4a522..1036b6c8b31 100644
--- a/packages/editor-ui/src/components/VersionCard.vue
+++ b/packages/editor-ui/src/components/VersionCard.vue
@@ -4,6 +4,10 @@
 			<div :class="$style.name">
 				Version {{version.name}}
 			</div>
+			<el-tooltip class="item" effect="light" content=" " placement="top" v-if="version.hasSecurityIssue">
+				<div slot="content">This version has a security issue.<br/>It is listed here for completeness.</div>
+				<font-awesome-icon :class="$style['security-flag']" icon="exclamation-triangle"></font-awesome-icon>
+    			</el-tooltip>
 			<el-tag type="danger" v-if="version.hasSecurityFix" size="small" :class="$style['security-update']">Security Update</el-tag>
 			<el-tag v-if="version.hasBreakingChange" size="small" :class="$style['breaking-change']">Breaking Change</el-tag>
 			<div :class="$style.released">
@@ -14,6 +18,7 @@
 			<div v-html="version.description" :class="$style.description"></div>
 			<div :class="$style.nodes" v-if="version.nodes && version.nodes.length > 0">
 				<NodeIcon 
+					:class="$style['node-icon']"
 					v-for="node in version.nodes"
 					:key="node.name"
 					:nodeType="node"
@@ -95,6 +100,10 @@ export default Vue.extend({
 		max-height: 18px;
 	}
 
+	.node-icon {
+		margin-right: 15px;
+	}
+
 	.breaking-change {
 		background-color: rgba(255, 229, 100, 0.3);
 		color: #6B5900;
@@ -106,4 +115,8 @@ export default Vue.extend({
 		display: flex;
 		align-items: center;
 	}
+
+	.security-flag {
+		color: red;
+	}
 </style>
diff --git a/packages/editor-ui/src/components/VersionsModal.vue b/packages/editor-ui/src/components/VersionsModal.vue
index ef0d829c396..4b6b662eea8 100644
--- a/packages/editor-ui/src/components/VersionsModal.vue
+++ b/packages/editor-ui/src/components/VersionsModal.vue
@@ -10,7 +10,7 @@
 		</template>
 		<template slot="content">
 			<section :class="$style['header-content']">
-				<p>You’re on {{ currentVersion.name }}, which was released <strong>{{currentReleaseDate}}</strong> and {{ nextVersions.length }} version{{nextVersions.length > 1 ? 's' : ''}} behind the latest and greatest n8n</p>	
+				<p>You’re on {{ currentVersion.name }}, which was released <strong>{{currentReleaseDate}}</strong> and is {{ nextVersions.length }} version{{nextVersions.length > 1 ? 's' : ''}} behind the latest and greatest n8n</p>	
 
 				<a :class="$style.update" :href="UPDATE_INFO_URL" v-if="UPDATE_INFO_URL" target="_blank">
 					<font-awesome-icon icon="info-circle"></font-awesome-icon>