From 0f86df4c0fd9f536fbed89ed7d369925b24da8f5 Mon Sep 17 00:00:00 2001
From: Rupenieks <32895755+Rupenieks@users.noreply.github.com>
Date: Fri, 31 Jul 2020 08:56:39 +0100
Subject: [PATCH 1/2] :zap: Documentation Link in Node Display (#808)

* :white_check_mark: Implemented Documentation link help box

* :zap: Adjusted transition speed

* :zap: Added UTM link, fixed Node Name issue
---
 .../editor-ui/src/components/DataDisplay.vue  | 96 ++++++++++++++++++-
 1 file changed, 95 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/DataDisplay.vue b/packages/editor-ui/src/components/DataDisplay.vue
index 1b5745da3..462f4af20 100644
--- a/packages/editor-ui/src/components/DataDisplay.vue
+++ b/packages/editor-ui/src/components/DataDisplay.vue
@@ -1,5 +1,5 @@
 <template>
-	<transition name="el-fade-in">
+	<transition name="el-fade-in" @after-enter="showDocumentHelp = true">
 		<div class="data-display-wrapper close-on-click" v-show="node" @click="close">
 			<div class="data-display" >
 				<NodeSettings @valueChanged="valueChanged" />
@@ -7,9 +7,33 @@
 				<div class="close-button clickable close-on-click" title="Close">
 					<i class="el-icon-close close-on-click"></i>
 				</div>
+				<transition name="fade">
+					<div v-if="showDocumentHelp && nodeType" class="doc-help-wrapper">
+								<svg id="help-logo"  v-if="showDocumentHelp && nodeType" :href="'https://docs.n8n.io/nodes/' + nodeType.name" target="_blank" width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+									<title>Node Documentation</title>
+									<g id="MVP-Onboard-proposal" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+										<g id="Node-modal-(docs-link)" transform="translate(-1127.000000, -836.000000)" fill-rule="nonzero">
+											<g id="Group" transform="translate(1117.000000, 825.000000)">
+												<g id="mdi-help-box" transform="translate(10.000000, 11.000000)">
+													<g id="Icon" transform="translate(2.250000, 2.250000)" fill="#FF6150">
+														<path d="M6,11.25 L7.5,11.25 L7.5,9.75 L6,9.75 L6,11.25 M6.75,2.25 C5.09314575,2.25 3.75,3.59314575 3.75,5.25 L5.25,5.25 C5.25,4.42157288 5.92157288,3.75 6.75,3.75 C7.57842712,3.75 8.25,4.42157288 8.25,5.25 C8.25,6.75 6,6.5625 6,9 L7.5,9 C7.5,7.3125 9.75,7.125 9.75,5.25 C9.75,3.59314575 8.40685425,2.25 6.75,2.25 M1.5,0 L12,0 C12.8284271,0 13.5,0.671572875 13.5,1.5 L13.5,12 C13.5,12.8284271 12.8284271,13.5 12,13.5 L1.5,13.5 C0.671572875,13.5 0,12.8284271 0,12 L0,1.5 C0,0.671572875 0.671572875,0 1.5,0 Z" id="Icon-Shape"></path>
+													</g>
+													<rect id="ViewBox" x="0" y="0" width="18" height="18"></rect>
+												</g>
+											</g>
+										</g>
+									</g>
+								</svg>
+								
+							<div v-if="showDocumentHelp && nodeType" class="text"> 
+								Need help? <a id="doc-hyperlink" v-if="showDocumentHelp && nodeType" :href="'https://docs.n8n.io/nodes/' + nodeType.name + '?utm_source=n8n_app&utm_medium=node_settings_modal-credential_link&utm_campaign=' + nodeType.displayName" target="_blank">Open {{nodeType.displayName}} documentation</a>
+							</div>
+					</div>
+				</transition>
 			</div>
 		</div>
 	</transition>
+	
 </template>
 
 <script lang="ts">
@@ -18,6 +42,7 @@ import Vue from 'vue';
 
 import {
 	IRunData,
+	INodeTypeDescription,
 } from 'n8n-workflow';
 import {
 	INodeUi,
@@ -33,10 +58,24 @@ export default Vue.extend({
 		NodeSettings,
 		RunData,
 	},
+	data () {
+		return {
+			basePath: this.$store.getters.getBaseUrl,
+			showDocumentHelp: false,
+		};
+	},
 	computed: {
 		node (): INodeUi {
 			return this.$store.getters.activeNode;
 		},
+		nodeType (): INodeTypeDescription | null {
+			const activeNode = this.node;
+			if (this.node) {
+				return this.$store.getters.nodeType(this.node.type);
+			}
+			
+			return null;
+		},
 	},
 	methods: {
 		valueChanged (parameterData: IUpdateInformation) {
@@ -48,15 +87,18 @@ export default Vue.extend({
 		close (e: MouseEvent) {
 			// @ts-ignore
 			if (e.target.className && e.target.className.includes && e.target.className.includes('close-on-click')) {
+				this.showDocumentHelp = false;
 				this.$store.commit('setActiveNode', null);
 			}
 		},
 	},
 });
+
 </script>
 
 <style lang="scss">
 
+
 .data-display-wrapper {
 	position: fixed;
 	top: 0;
@@ -101,7 +143,59 @@ export default Vue.extend({
 			margin: 1em auto;
 			height: 95%;
 		}
+
+		.fade-enter-active, .fade-enter-to, .fade-leave-active {
+			transition: all .75s ease;
+		}
+
+		.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+			opacity: 0;
+		}
+
+		.doc-help-wrapper {
+			transition-delay: 2s;
+			background-color: #fff;
+			margin-top: 1%;
+			box-sizing: border-box;
+			border: 1px solid #DCDFE6;
+			border-radius: 4px;
+			background-color: #FFFFFF;
+			box-shadow: 0 2px 7px 0 rgba(0,0,0,0.15);
+			min-width: 319px;
+			height: 40px;
+			float: right;
+			padding: 5px;
+			display: flex;
+			flex-direction: row;
+			padding-top: 10px;
+			padding-right: 12px;
+
+			#help-logo {
+				flex: 1;
+			}
+
+			.text {
+				margin-left: 5px;
+				flex: 9;
+				font-family: "Open Sans";
+				color: #666666;
+				font-size: 12px;
+				font-weight: 600;
+				letter-spacing: 0;
+				line-height: 17px;
+				white-space: nowrap;
+			}
+
+			#doc-hyperlink, #doc-hyperlink:visited, #doc-hyperlink:focus, #doc-hyperlink:active {
+				text-decoration: none;
+				color: #FF6150;
+			}
+		}
 	}
+
+
 }
 
+
+
 </style>

From e82f3f405effb495275ae89049b21a09a8d3c526 Mon Sep 17 00:00:00 2001
From: Jan Oberhauser <jan.oberhauser@gmail.com>
Date: Fri, 31 Jul 2020 09:57:23 +0200
Subject: [PATCH 2/2] :zap: Fix link to documentation

---
 packages/editor-ui/src/components/DataDisplay.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/editor-ui/src/components/DataDisplay.vue b/packages/editor-ui/src/components/DataDisplay.vue
index 462f4af20..0e143e578 100644
--- a/packages/editor-ui/src/components/DataDisplay.vue
+++ b/packages/editor-ui/src/components/DataDisplay.vue
@@ -24,16 +24,16 @@
 										</g>
 									</g>
 								</svg>
-								
-							<div v-if="showDocumentHelp && nodeType" class="text"> 
-								Need help? <a id="doc-hyperlink" v-if="showDocumentHelp && nodeType" :href="'https://docs.n8n.io/nodes/' + nodeType.name + '?utm_source=n8n_app&utm_medium=node_settings_modal-credential_link&utm_campaign=' + nodeType.displayName" target="_blank">Open {{nodeType.displayName}} documentation</a>
+
+							<div v-if="showDocumentHelp && nodeType" class="text">
+								Need help? <a id="doc-hyperlink" v-if="showDocumentHelp && nodeType" :href="'https://docs.n8n.io/nodes/' + nodeType.name + '?utm_source=n8n_app&utm_medium=node_settings_modal-credential_link&utm_campaign=' + nodeType.name" target="_blank">Open {{nodeType.displayName}} documentation</a>
 							</div>
 					</div>
 				</transition>
 			</div>
 		</div>
 	</transition>
-	
+
 </template>
 
 <script lang="ts">
@@ -73,7 +73,7 @@ export default Vue.extend({
 			if (this.node) {
 				return this.$store.getters.nodeType(this.node.type);
 			}
-			
+
 			return null;
 		},
 	},