From be5933493e78564507b5923335f548bcd23669ab Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Fri, 25 Mar 2022 15:18:36 +0100
Subject: [PATCH] update main panel

---
 .../editor-ui/src/components/DataDisplay.vue  |  73 +----------
 .../src/components/DisplayWithChange.vue      |  11 +-
 .../editor-ui/src/components/NodeSettings.vue | 120 +++++++++++++-----
 packages/editor-ui/src/components/RunData.vue |  19 ---
 packages/editor-ui/src/n8n-theme.scss         |   3 -
 .../src/plugins/i18n/locales/en.json          |   2 +-
 6 files changed, 92 insertions(+), 136 deletions(-)

diff --git a/packages/editor-ui/src/components/DataDisplay.vue b/packages/editor-ui/src/components/DataDisplay.vue
index 49edcf8518..c7c59115d7 100644
--- a/packages/editor-ui/src/components/DataDisplay.vue
+++ b/packages/editor-ui/src/components/DataDisplay.vue
@@ -2,39 +2,16 @@
 	<el-dialog
 		:visible="!!node"
 		:before-close="close"
-		:custom-class="`classic data-display-wrapper`"
+		custom-class="data-display-wrapper"
 		width="85%"
 		append-to-body
 		@opened="showDocumentHelp = true"
 	>
-		<div class="data-display" >
+		<div class="data-display" v-if="node" >
 			<NodeSettings @valueChanged="valueChanged" />
 			<RunData />
 
 		</div>
-		<transition name="fade">
-			<div v-if="nodeType && showDocumentHelp" class="doc-help-wrapper">
-						<svg id="help-logo" :href="documentationUrl" 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>{{ $locale.baseText('dataDisplay.nodeDocumentation') }}</title>
-							<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 x="0" y="0" width="18" height="18"></rect>
-										</g>
-									</g>
-								</g>
-							</g>
-						</svg>
-
-					<div class="text">
-						{{ $locale.baseText('dataDisplay.needHelp') }} <n8n-link size="small" :to="documentationUrl" :bold="true" @click="onDocumentationUrlClick">{{ $locale.baseText('dataDisplay.openDocumentationFor', { interpolate: { nodeTypeDisplayName: nodeType.displayName } }) }}</n8n-link>
-					</div>
-			</div>
-		</transition>
 	</el-dialog>
 </template>
 
@@ -69,17 +46,6 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
 		};
 	},
 	computed: {
-		documentationUrl (): string {
-			if (!this.nodeType) {
-				return '';
-			}
-
-			if (this.nodeType.documentationUrl && this.nodeType.documentationUrl.startsWith('http')) {
-				return this.nodeType.documentationUrl;
-			}
-
-			return 'https://docs.n8n.io/nodes/' + (this.nodeType.documentationUrl || this.nodeType.name) + '?utm_source=n8n_app&utm_medium=node_settings_modal-credential_link&utm_campaign=' + this.nodeType.name;
-		},
 		node (): INodeUi {
 			return this.$store.getters.activeNode;
 		},
@@ -145,41 +111,6 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
 	height: 100%;
 }
 
-.doc-help-wrapper {
-	position: absolute;
-	right: 0;
-	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";
-		font-size: 12px;
-		font-weight: 600;
-		line-height: 17px;
-		white-space: nowrap;
-	}
-}
-
 .fade-enter-active, .fade-enter-to, .fade-leave-active {
 	transition: all .75s ease;
 	opacity: 1;
diff --git a/packages/editor-ui/src/components/DisplayWithChange.vue b/packages/editor-ui/src/components/DisplayWithChange.vue
index f00d25c016..015bde4f0c 100644
--- a/packages/editor-ui/src/components/DisplayWithChange.vue
+++ b/packages/editor-ui/src/components/DisplayWithChange.vue
@@ -1,14 +1,5 @@
 <template>
-	<span class="static-text-wrapper">
-		<span v-show="!editActive" :title="$locale.baseText('displayWithChange.clickToChange')">
-			<span class="static-text" @mousedown="startEdit">{{currentValue}}</span>
-		</span>
-		<span v-show="editActive">
-			<input class="edit-field" ref="inputField" type="text" v-model="newValue" @keydown.enter.stop.prevent="setValue" @keydown.escape.stop.prevent="cancelEdit" @keydown.stop="noOp" @blur="cancelEdit" />
-			<font-awesome-icon icon="times" @mousedown="cancelEdit" class="icons clickable" :title="$locale.baseText('displayWithChange.cancelEdit')" />
-			<font-awesome-icon icon="check" @mousedown="setValue" class="icons clickable" :title="$locale.baseText('displayWithChange.setValue')" />
-		</span>
-	</span>
+	<span class="static-text">{{currentValue}}</span>
 </template>
 
 <script lang="ts">
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 0d59691cf9..41274f5510 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -1,17 +1,37 @@
 <template>
 	<div class="node-settings" @keydown.stop>
-		<div class="header-side-menu">
-			<span v-if="node">
-				<display-with-change :key-name="'name'" @valueChanged="valueChanged"></display-with-change>
-				<span class="node-info">
-					<n8n-link v-if="nodeType" :to="'http://n8n.io/nodes/' + nodeType.name">
-						<n8n-tooltip class="clickable" placement="top" >
-							<div slot="content" v-html="`<strong>${$locale.baseText('nodeSettings.nodeDescription')}:</strong><br />` + nodeTypeDescription + `<br /><br /><strong>${$locale.baseText('nodeSettings.clickOnTheQuestionMarkIcon')}</strong>`"></div>
-							<font-awesome-icon icon="question-circle" />
-						</n8n-tooltip>
-					</n8n-link>
-				</span>
-			</span>
+		<div :class="$style.header">
+			<div class="header-side-menu">
+				<display-with-change class="node-name" :key-name="'name'" @valueChanged="valueChanged"></display-with-change>
+				<div
+					v-if="!isReadOnly"
+					class="execute-node-button"
+				>
+					<n8n-button
+						:title="$locale.baseText('runData.executesThisNodeAfterExecuting', { interpolate: { nodeName: node.name } })"
+						:loading="workflowRunning"
+						icon="play-circle"
+						:label="$locale.baseText('runData.executeNode')"
+						@click.stop="runWorkflow(node.name, 'RunData.ExecuteNodeButton')"
+					/>
+				</div>
+			</div>
+			<el-tabs :class="$style.tabs" @tab-click="handleTabClick">
+				<el-tab-pane index="params" :label="$locale.baseText('nodeSettings.parameters')"></el-tab-pane>
+				<el-tab-pane :disabled="true">
+					<a slot="label" target="_blank" :class="$style.docs" :href="documentationUrl">
+						{{$locale.baseText('nodeSettings.docs')}}
+						<font-awesome-icon
+							:class="$style.external"
+							icon="external-link-alt"
+							size="sm"
+						/>
+					</a>
+				</el-tab-pane>
+				<el-tab-pane index="settings">
+					<font-awesome-icon slot="label" icon="cog" />
+				</el-tab-pane>
+			</el-tabs>
 		</div>
 		<div class="node-is-not-valid" v-if="node && !nodeValid">
 			<n8n-text>
@@ -24,7 +44,7 @@
 			</n8n-text>
 		</div>
 		<div class="node-parameters-wrapper" v-if="node && nodeValid">
-			<el-tabs stretch @tab-click="handleTabClick">
+			<el-tabs @tab-click="handleTabClick">
 				<el-tab-pane :label="$locale.baseText('nodeSettings.parameters')">
 					<node-credentials :node="node" @credentialSelected="credentialSelected"></node-credentials>
 					<node-webhooks :node="node" :nodeType="nodeType" />
@@ -35,7 +55,8 @@
 						</n8n-text>
 					</div>
 				</el-tab-pane>
-				<el-tab-pane :label="$locale.baseText('nodeSettings.settings')">
+				<el-tab-pane>
+					<font-awesome-icon slot="label" icon="cog" />
 					<parameter-input-list :parameters="nodeSettings" :hideDelete="true" :nodeValues="nodeValues" path="" @valueChanged="valueChanged" />
 					<parameter-input-list :parameters="parametersSetting" :nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged" />
 				</el-tab-pane>
@@ -153,11 +174,23 @@ export default mixins(
 			workflowRunning (): boolean {
 				return this.$store.getters.isActionActive('workflowRunning');
 			},
+			documentationUrl (): string {
+				if (!this.nodeType) {
+					return '';
+				}
+
+				if (this.nodeType.documentationUrl && this.nodeType.documentationUrl.startsWith('http')) {
+					return this.nodeType.documentationUrl;
+				}
+
+				return 'https://docs.n8n.io/nodes/' + (this.nodeType.documentationUrl || this.nodeType.name) + '?utm_source=n8n_app&utm_medium=node_settings_modal-credential_link&utm_campaign=' + this.nodeType.name;
+			},
 		},
 		data () {
 			return {
 				nodeValid: true,
 				nodeColor: null,
+				openPanel: '0',
 				nodeValues: {
 					color: '#ff0000',
 					alwaysOutputData: false,
@@ -515,6 +548,7 @@ export default mixins(
 				}
 			},
 			handleTabClick(tab: ElTabPane) {
+				this.openPanel = tab.index;
 				if(tab.label === 'Settings') {
 					this.$telemetry.track('User viewed node settings', { node_type: this.node ? this.node.type : '', workflow_id: this.$store.getters.workflowId });
 				}
@@ -526,8 +560,39 @@ export default mixins(
 	});
 </script>
 
-<style lang="scss">
+<style lang="scss" module>
+.header {
+	background-color: var(--color-background-base);
+}
 
+.tabs {
+	* {
+		color: var(--color-text-base);
+		font-weight: var(--font-weight-bold) !important;
+	}
+}
+
+.docs {
+	&:hover {
+		color: var(--color-primary) !important;
+		cursor: pointer;
+
+		.external {
+			* {
+				color: var(--color-primary) !important;
+			}
+			display: inline-block;
+		}
+	}
+}
+
+.external {
+	display: none;
+}
+
+</style>
+
+<style lang="scss">
 .node-settings {
 	overflow: hidden;
 	min-width: 350px;
@@ -538,20 +603,12 @@ export default mixins(
 	}
 
 	.header-side-menu {
-		padding: 1em 0 1em 1.8em;
+		padding: var(--spacing-s);
 		font-size: var(--font-size-l);
-		background-color: $--custom-window-sidebar-top;
+		display: flex;
 
-		.node-info {
-			display: none;
-			padding-left: 0.5em;
-			font-size: 0.8em;
-		}
-
-		&:hover {
-			.node-info {
-				display: inline;
-			}
+		.node-name {
+			flex-grow: 1;
 		}
 	}
 
@@ -563,7 +620,7 @@ export default mixins(
 		height: 100%;
 
 		.el-tabs__header {
-			background-color: #fff5f2;
+			background-color: var(--color-background-base);
 			margin-bottom: 0;
 		}
 
@@ -572,7 +629,6 @@ export default mixins(
 			.el-tabs__content {
 				overflow-y: auto;
 				height: 100%;
-				padding-bottom: 180px;
 
 				.el-tab-pane {
 					margin: 0 var(--spacing-s);
@@ -580,9 +636,9 @@ export default mixins(
 			}
 		}
 
-		.el-tabs__nav {
-			padding-bottom: var(--spacing-xs);
-		}
+		// .el-tabs__nav {
+		// 	padding-bottom: var(--spacing-xs);
+		// }
 
 		.add-option {
 			i.el-select__caret {
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 8fc8794811..0ddd34573c 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -2,19 +2,6 @@
 	<div class="run-data-view" v-loading="workflowRunning">
 		<BinaryDataDisplay :windowVisible="binaryDataDisplayVisible" :displayData="binaryDataDisplayData" @close="closeBinaryDataDisplay"/>
 
-		<div
-			v-if="node && !isReadOnly"
-			class="execute-node-button"
-		>
-			<n8n-button
-				:title="$locale.baseText('runData.executesThisNodeAfterExecuting', { interpolate: { nodeName: node.name } })"
-				:loading="workflowRunning"
-				icon="play-circle"
-				:label="$locale.baseText('runData.executeNode')"
-				@click.stop="runWorkflow(node.name, 'RunData.ExecuteNodeButton')"
-			/>
-		</div>
-
 		<div class="header">
 			<div class="title-text">
 				<n8n-text :bold="true" v-if="dataCount < maxDisplayItems">
@@ -782,12 +769,6 @@ export default mixins(
 		}
 	}
 
-	.execute-node-button {
-		position: absolute;
-		top: 10px;
-		right: 10px;
-	}
-
 	.header {
 		padding-top: 10px;
 		padding-left: 10px;
diff --git a/packages/editor-ui/src/n8n-theme.scss b/packages/editor-ui/src/n8n-theme.scss
index acd8ab1c75..c9b56cf04a 100644
--- a/packages/editor-ui/src/n8n-theme.scss
+++ b/packages/editor-ui/src/n8n-theme.scss
@@ -120,9 +120,6 @@
 .el-tabs__nav:focus {
 	outline: none;
 }
-.el-tabs__item {
-	color: #555;
-}
 .el-tabs__item.is-active {
 	font-weight: bold;
 }
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 7850822a1b..3872f363c4 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -456,6 +456,7 @@
 			"description": "If active, the workflow continues even if this node's execution fails. When this occurs, the node passes along input data from previous nodes - so your workflow should account for unexpected output data.",
 			"displayName": "Continue On Fail"
 		},
+		"docs": "Docs",
 		"executeOnce": {
 			"description": "If active, the node executes only once, with data from the first item it receives",
 			"displayName": "Execute Once"
@@ -479,7 +480,6 @@
 			"description": "If active, the node tries to execute again when it fails",
 			"displayName": "Retry On Fail"
 		},
-		"settings": "Settings",
 		"theNodeIsNotValidAsItsTypeIsUnknown": "The node is not valid as its type ({nodeType}) is unknown",
 		"thisNodeDoesNotHaveAnyParameters": "This node does not have any parameters",
 		"waitBetweenTries": {