From 05258cc645e85805e10ff4f5e6b1e6283eff73ef Mon Sep 17 00:00:00 2001
From: Rupenieks <ronaldsupenieks96@gmail.com>
Date: Thu, 20 Aug 2020 14:47:59 +0200
Subject: [PATCH 1/6] :white_check_mark: Credentials doc help link

---
 .../src/components/CredentialsEdit.vue        | 122 +++++++++++++++++-
 1 file changed, 120 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/CredentialsEdit.vue b/packages/editor-ui/src/components/CredentialsEdit.vue
index a69ad78e24..4bea56cc2b 100644
--- a/packages/editor-ui/src/components/CredentialsEdit.vue
+++ b/packages/editor-ui/src/components/CredentialsEdit.vue
@@ -1,7 +1,29 @@
 <template>
 	<div v-if="dialogVisible" @keydown.stop>
-		<el-dialog :visible="dialogVisible" append-to-body width="55%" :title="title" :before-close="closeDialog">
-
+		<el-dialog :visible="dialogVisible" append-to-body width="55%" :title="title" :nodeType="nodeType"  :before-close="closeDialog">
+			<div name="title" class="titleContainer" slot="title">
+				<div id="left">{{title}}</div> 
+				<div id="right">
+				<div id="docsContainer">
+					<svg id="help-logo"   :href="'https://docs.n8n.io/credentials/' + nodeType.displayName" 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>
+					<span id='docLinkText'>Need help? <a id="doc-hyperlink"  :href="'https://docs.n8n.io/credentials/' + documentationUrl + '/?utm_source=n8n_app&utm_medium=add_credential_modal-credential_link&utm_campaign=' + nodeType.name" target="_blank">Open credential docs</a></span>
+				</div>
+				</div>
+			</div>
 			<div class="credential-type-item">
 				<el-row v-if="!setCredentialType">
 					<el-col :span="6">
@@ -40,9 +62,11 @@ import {
 	NodeHelpers,
 	ICredentialType,
 	INodeProperties,
+  INodeTypeDescription,
 } from 'n8n-workflow';
 
 import mixins from 'vue-typed-mixins';
+import { INodeUi } from '../Interface';
 
 export default mixins(
 	restApi,
@@ -85,6 +109,30 @@ export default mixins(
 				}
 			}
 		},
+		documentationUrl (): string {
+			if (this.editCredentials) {
+				const credentialType = this.$store.getters.credentialType(this.editCredentials.type);
+				return `${credentialType.documentationUrl}`;
+			} else {
+				if (this.credentialType) {
+					const credentialType = this.$store.getters.credentialType(this.credentialType);
+					return `${credentialType.documentationUrl}`;
+				} else {
+					return ``;
+				}
+			}
+		},
+		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;
+		},
 	},
 	watch: {
 		async dialogVisible (newValue, oldValue): Promise<void> {
@@ -250,4 +298,74 @@ export default mixins(
 	padding-bottom: 1em;
 }
 
+@media (min-width: 1200px){
+	.titleContainer {
+		display: flex;
+		flex-direction: row;
+		max-width: 100%;
+		line-height: 17px;
+	}
+
+	#docsContainer {
+		margin-left: auto;
+		margin-right: 0;
+	}
+}
+
+@media (max-width: 1199px){
+	.titleContainer {
+		display: flex;
+		flex-direction: column;
+		max-width: 100%;
+		line-height: 17px;
+	}
+
+	#docsContainer {
+		margin-top: 10px;
+		margin-left: 0;
+		margin-right: auto;
+	}
+}
+
+#left {
+	flex: 7;
+	font-size: 16px;
+	font-weight: bold;
+	color: #7a7a7a;
+	vertical-align:middle;
+}
+
+#right {
+	vertical-align: middle;
+	flex: 3;
+	font-family: "Open Sans";
+	color: #666666;
+	font-size: 12px;
+	font-weight: 510;
+	letter-spacing: 0;
+	display: flex;
+	flex-direction: row;
+	min-width: 40%;
+}
+
+
+
+#help-logo {
+	flex: 1;
+}
+
+#docLinkText {
+	margin-left: 2px;
+	float: right;
+	word-break: break-word;
+	flex: 9;
+}
+
+#doc-hyperlink, #doc-hyperlink:visited, #doc-hyperlink:focus, #doc-hyperlink:active {
+	text-decoration: none;
+	color: #FF6150;
+}
+	
+
+
 </style>

From d5dda2e35a9f0fc92dfd516fd69e0a9e453212da Mon Sep 17 00:00:00 2001
From: Rupenieks <ronaldsupenieks96@gmail.com>
Date: Thu, 20 Aug 2020 15:34:45 +0200
Subject: [PATCH 2/6] :zap: Credential fallback added, fixed Gmail
 documentationUrl

---
 .../src/components/CredentialsEdit.vue        | 19 +++++++++++--------
 .../credentials/GmailOAuth2Api.credentials.ts |  1 +
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/editor-ui/src/components/CredentialsEdit.vue b/packages/editor-ui/src/components/CredentialsEdit.vue
index 4bea56cc2b..5699369c54 100644
--- a/packages/editor-ui/src/components/CredentialsEdit.vue
+++ b/packages/editor-ui/src/components/CredentialsEdit.vue
@@ -112,15 +112,20 @@ export default mixins(
 		documentationUrl (): string {
 			if (this.editCredentials) {
 				const credentialType = this.$store.getters.credentialType(this.editCredentials.type);
-				return `${credentialType.documentationUrl}`;
-			} else {
-				if (this.credentialType) {
-					const credentialType = this.$store.getters.credentialType(this.credentialType);
-					return `${credentialType.documentationUrl}`;
+				if (credentialType.documentationUrl === undefined) {
+					return credentialType.name;
 				} else {
-					return ``;
+					return `${credentialType.documentationUrl}`;
+				}
+			} else {
+				const credentialType = this.$store.getters.credentialType(this.credentialType);
+				if (credentialType.documentationUrl === undefined) {
+					return credentialType.name;
+				} else {
+					return `${credentialType.documentationUrl}`;
 				}
 			}
+	
 		},
 		node (): INodeUi {
 			return this.$store.getters.activeNode;
@@ -348,8 +353,6 @@ export default mixins(
 	min-width: 40%;
 }
 
-
-
 #help-logo {
 	flex: 1;
 }
diff --git a/packages/nodes-base/credentials/GmailOAuth2Api.credentials.ts b/packages/nodes-base/credentials/GmailOAuth2Api.credentials.ts
index 63fe6916f1..ffe8f83d04 100644
--- a/packages/nodes-base/credentials/GmailOAuth2Api.credentials.ts
+++ b/packages/nodes-base/credentials/GmailOAuth2Api.credentials.ts
@@ -19,6 +19,7 @@ export class GmailOAuth2Api implements ICredentialType {
 		'googleOAuth2Api',
 	];
 	displayName = 'Gmail OAuth2 API';
+	documentationUrl = 'google';
 	properties = [
 		{
 			displayName: 'Scope',

From d8e8db39c4b45b5dd9421cf2b5005af3757931cb Mon Sep 17 00:00:00 2001
From: Rupenieks <ronaldsupenieks96@gmail.com>
Date: Tue, 25 Aug 2020 14:28:16 +0200
Subject: [PATCH 3/6] :zap: Fixed new/open credentials from menu. UTM link
 adjusted for unknown nodes base.

---
 .../src/components/CredentialsEdit.vue        | 47 ++++++++++---------
 1 file changed, 26 insertions(+), 21 deletions(-)

diff --git a/packages/editor-ui/src/components/CredentialsEdit.vue b/packages/editor-ui/src/components/CredentialsEdit.vue
index 5699369c54..b77e2eb787 100644
--- a/packages/editor-ui/src/components/CredentialsEdit.vue
+++ b/packages/editor-ui/src/components/CredentialsEdit.vue
@@ -2,26 +2,27 @@
 	<div v-if="dialogVisible" @keydown.stop>
 		<el-dialog :visible="dialogVisible" append-to-body width="55%" :title="title" :nodeType="nodeType"  :before-close="closeDialog">
 			<div name="title" class="titleContainer" slot="title">
-				<div id="left">{{title}}</div> 
+				<div id="left">{{title}}</div>
 				<div id="right">
-				<div id="docsContainer">
-					<svg id="help-logo"   :href="'https://docs.n8n.io/credentials/' + nodeType.displayName" 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>
+					<div id="docsContainer">
+						<svg id="help-logo" 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>
-										<rect id="ViewBox" x="0" y="0" width="18" height="18"></rect>
 									</g>
 								</g>
 							</g>
-						</g>
-					</svg>
-					<span id='docLinkText'>Need help? <a id="doc-hyperlink"  :href="'https://docs.n8n.io/credentials/' + documentationUrl + '/?utm_source=n8n_app&utm_medium=add_credential_modal-credential_link&utm_campaign=' + nodeType.name" target="_blank">Open credential docs</a></span>
-				</div>
+						</svg>
+						<span v-if="nodeType" id='docLinkText'>Need help? <a id="doc-hyperlink"  :href="'https://docs.n8n.io/credentials/' + documentationUrl + '/?utm_source=n8n_app&utm_medium=add_credential_modal-credential_link&utm_campaign=' + nodeType.name" target="_blank">Open credential docs</a></span>
+						<span v-if="!nodeType" id='docLinkText'>Need help? <a id="doc-hyperlink"  :href="'https://docs.n8n.io/credentials/' + documentationUrl + '/?utm_source=n8n_app&utm_medium=add_credential_modal-credential_link&utm_campaign=unknown-nodes-base.' + documentationUrl" target="_blank">Open credential docs</a></span>
+					</div>
 				</div>
 			</div>
 			<div class="credential-type-item">
@@ -118,14 +119,18 @@ export default mixins(
 					return `${credentialType.documentationUrl}`;
 				}
 			} else {
-				const credentialType = this.$store.getters.credentialType(this.credentialType);
-				if (credentialType.documentationUrl === undefined) {
-					return credentialType.name;
+				if (this.credentialType) {
+					const credentialType = this.$store.getters.credentialType(this.credentialType);
+
+					if (credentialType.documentationUrl === undefined) {
+						return credentialType.name;
+					} else {
+						return `${credentialType.documentationUrl}`;
+					}
 				} else {
-					return `${credentialType.documentationUrl}`;
+					return '';
 				}
 			}
-	
 		},
 		node (): INodeUi {
 			return this.$store.getters.activeNode;
@@ -368,7 +373,7 @@ export default mixins(
 	text-decoration: none;
 	color: #FF6150;
 }
-	
+
 
 
 </style>

From cf52ce3cfa75c880ae9187c8d8a384e85e649373 Mon Sep 17 00:00:00 2001
From: Rupenieks <ronaldsupenieks96@gmail.com>
Date: Thu, 27 Aug 2020 09:12:16 +0200
Subject: [PATCH 4/6] :zap: Updated UTM link

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

diff --git a/packages/editor-ui/src/components/CredentialsEdit.vue b/packages/editor-ui/src/components/CredentialsEdit.vue
index b77e2eb787..787774efe3 100644
--- a/packages/editor-ui/src/components/CredentialsEdit.vue
+++ b/packages/editor-ui/src/components/CredentialsEdit.vue
@@ -4,7 +4,7 @@
 			<div name="title" class="titleContainer" slot="title">
 				<div id="left">{{title}}</div>
 				<div id="right">
-					<div id="docsContainer">
+					<div v-if="credentialType" id="docsContainer">
 						<svg id="help-logo" 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">
@@ -20,8 +20,7 @@
 								</g>
 							</g>
 						</svg>
-						<span v-if="nodeType" id='docLinkText'>Need help? <a id="doc-hyperlink"  :href="'https://docs.n8n.io/credentials/' + documentationUrl + '/?utm_source=n8n_app&utm_medium=add_credential_modal-credential_link&utm_campaign=' + nodeType.name" target="_blank">Open credential docs</a></span>
-						<span v-if="!nodeType" id='docLinkText'>Need help? <a id="doc-hyperlink"  :href="'https://docs.n8n.io/credentials/' + documentationUrl + '/?utm_source=n8n_app&utm_medium=add_credential_modal-credential_link&utm_campaign=unknown-nodes-base.' + documentationUrl" target="_blank">Open credential docs</a></span>
+						<span v-if="credentialType" id='docLinkText'>Need help? <a id="doc-hyperlink"  :href="'https://docs.n8n.io/credentials/' + documentationUrl + '/?utm_source=n8n_app&utm_medium=left_nav_menu&utm_campaign=create_new_credentials_modal'" target="_blank">Open credential docs</a></span>
 					</div>
 				</div>
 			</div>

From 89499313b6b9c69782ebac8a78519b8f7c3eaf34 Mon Sep 17 00:00:00 2001
From: Rupenieks <ronaldsupenieks96@gmail.com>
Date: Thu, 27 Aug 2020 09:23:23 +0200
Subject: [PATCH 5/6] :zap: indentation

---
 packages/editor-ui/src/components/CredentialsEdit.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/CredentialsEdit.vue b/packages/editor-ui/src/components/CredentialsEdit.vue
index 787774efe3..2cf93f312c 100644
--- a/packages/editor-ui/src/components/CredentialsEdit.vue
+++ b/packages/editor-ui/src/components/CredentialsEdit.vue
@@ -62,7 +62,7 @@ import {
 	NodeHelpers,
 	ICredentialType,
 	INodeProperties,
-  INodeTypeDescription,
+	INodeTypeDescription,
 } from 'n8n-workflow';
 
 import mixins from 'vue-typed-mixins';

From 26a7acf5ed75787c04bbbfb3a1ab44c4cca8c15f Mon Sep 17 00:00:00 2001
From: Jan Oberhauser <jan.oberhauser@gmail.com>
Date: Thu, 27 Aug 2020 09:57:34 +0200
Subject: [PATCH 6/6] :zap: Minor improvements to display of help links

---
 .../src/components/CredentialsEdit.vue        | 152 +++++++++---------
 .../editor-ui/src/components/DataDisplay.vue  |  16 +-
 2 files changed, 85 insertions(+), 83 deletions(-)

diff --git a/packages/editor-ui/src/components/CredentialsEdit.vue b/packages/editor-ui/src/components/CredentialsEdit.vue
index bc34803365..6eb4ae876b 100644
--- a/packages/editor-ui/src/components/CredentialsEdit.vue
+++ b/packages/editor-ui/src/components/CredentialsEdit.vue
@@ -1,26 +1,26 @@
 <template>
-	<div v-if="dialogVisible" @keydown.stop>
+	<div v-if="dialogVisible" @keydown.stop class="credentials-edit-wrapper">
 		<el-dialog :visible="dialogVisible" append-to-body width="75%" :title="title" :nodeType="nodeType"  :before-close="closeDialog">
-			<div name="title" class="titleContainer" slot="title">
-				<div id="left">{{title}}</div>
-				<div id="right">
-					<div v-if="credentialType" id="docsContainer">
+			<div name="title" class="title-container" slot="title">
+				<div id="title-left">{{title}}</div>
+				<div id="title-right">
+					<div v-if="credentialType" id="docs-container">
 						<svg id="help-logo" 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 stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+								<g transform="translate(-1127.000000, -836.000000)" fill-rule="nonzero">
+									<g transform="translate(1117.000000, 825.000000)">
+										<g transform="translate(10.000000, 11.000000)">
+											<g 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"></path>
 											</g>
-											<rect id="ViewBox" x="0" y="0" width="18" height="18"></rect>
+											<rect x="0" y="0" width="18" height="18"></rect>
 										</g>
 									</g>
 								</g>
 							</g>
 						</svg>
-						<span v-if="credentialType" id='docLinkText'>Need help? <a id="doc-hyperlink"  :href="'https://docs.n8n.io/credentials/' + documentationUrl + '/?utm_source=n8n_app&utm_medium=left_nav_menu&utm_campaign=create_new_credentials_modal'" target="_blank">Open credential docs</a></span>
+						<span v-if="credentialType" id="doc-link-text">Need help? <a id="doc-hyperlink" :href="'https://docs.n8n.io/credentials/' + documentationUrl + '/?utm_source=n8n_app&utm_medium=left_nav_menu&utm_campaign=create_new_credentials_modal'" target="_blank">Open credential docs</a></span>
 					</div>
 				</div>
 			</div>
@@ -302,77 +302,79 @@ export default mixins(
 </script>
 
 <style lang="scss">
+.credentials-edit-wrapper {
+	.credential-type-item {
+		padding-bottom: 1em;
+	}
 
-.credential-type-item {
-	padding-bottom: 1em;
-}
+	@media (min-width: 1200px){
+		.title-container {
+			display: flex;
+			flex-direction: row;
+			max-width: 100%;
+			line-height: 17px;
+		}
 
-@media (min-width: 1200px){
-	.titleContainer {
+		#docs-container {
+			margin-left: auto;
+			margin-right: 0;
+		}
+	}
+
+	@media (max-width: 1199px){
+		.title-container {
+			display: flex;
+			flex-direction: column;
+			max-width: 100%;
+			line-height: 17px;
+		}
+
+		#docs-container {
+			margin-top: 10px;
+			margin-left: 0;
+			margin-right: auto;
+		}
+	}
+
+	#title-left {
+		flex: 7;
+		font-size: 16px;
+		font-weight: bold;
+		color: #7a7a7a;
+		vertical-align:middle;
+	}
+
+	#title-right {
+		vertical-align: middle;
+		flex: 3;
+		font-family: "Open Sans";
+		color: #666666;
+		font-size: 12px;
+		font-weight: 510;
+		letter-spacing: 0;
 		display: flex;
 		flex-direction: row;
-		max-width: 100%;
-		line-height: 17px;
+		min-width: 40%;
 	}
 
-	#docsContainer {
-		margin-left: auto;
-		margin-right: 0;
-	}
-}
-
-@media (max-width: 1199px){
-	.titleContainer {
-		display: flex;
-		flex-direction: column;
-		max-width: 100%;
-		line-height: 17px;
+	#help-logo {
+		flex: 1;
 	}
 
-	#docsContainer {
-		margin-top: 10px;
-		margin-left: 0;
-		margin-right: auto;
+	#doc-link-text {
+		margin-left: 2px;
+		float: right;
+		word-break: break-word;
+		flex: 9;
+	}
+
+	#doc-hyperlink,
+	#doc-hyperlink:visited,
+	#doc-hyperlink:focus,
+	#doc-hyperlink:active {
+		text-decoration: none;
+		color: #FF6150;
 	}
 }
 
-#left {
-	flex: 7;
-	font-size: 16px;
-	font-weight: bold;
-	color: #7a7a7a;
-	vertical-align:middle;
-}
-
-#right {
-	vertical-align: middle;
-	flex: 3;
-	font-family: "Open Sans";
-	color: #666666;
-	font-size: 12px;
-	font-weight: 510;
-	letter-spacing: 0;
-	display: flex;
-	flex-direction: row;
-	min-width: 40%;
-}
-
-#help-logo {
-	flex: 1;
-}
-
-#docLinkText {
-	margin-left: 2px;
-	float: right;
-	word-break: break-word;
-	flex: 9;
-}
-
-#doc-hyperlink, #doc-hyperlink:visited, #doc-hyperlink:focus, #doc-hyperlink:active {
-	text-decoration: none;
-	color: #FF6150;
-}
-
-
-
 </style>
diff --git a/packages/editor-ui/src/components/DataDisplay.vue b/packages/editor-ui/src/components/DataDisplay.vue
index 0e143e5784..6eb2b90ea3 100644
--- a/packages/editor-ui/src/components/DataDisplay.vue
+++ b/packages/editor-ui/src/components/DataDisplay.vue
@@ -9,16 +9,16 @@
 				</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">
+								<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 stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+										<g transform="translate(-1127.000000, -836.000000)" fill-rule="nonzero">
+											<g transform="translate(1117.000000, 825.000000)">
+												<g transform="translate(10.000000, 11.000000)">
+													<g 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"></path>
 													</g>
-													<rect id="ViewBox" x="0" y="0" width="18" height="18"></rect>
+													<rect x="0" y="0" width="18" height="18"></rect>
 												</g>
 											</g>
 										</g>