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] :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 1b5745da3f..462f4af208 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>