From 39864463635f6d902f2b5a739dfcbd6224e7b533 Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Wed, 28 Jul 2021 14:11:26 +0200
Subject: [PATCH] update copy buttons

---
 .../src/components/Error/NodeViewError.vue       |  7 +++----
 packages/editor-ui/src/components/RunData.vue    | 16 ++++++++++------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/editor-ui/src/components/Error/NodeViewError.vue b/packages/editor-ui/src/components/Error/NodeViewError.vue
index 4c86eb2571..9b721eaecf 100644
--- a/packages/editor-ui/src/components/Error/NodeViewError.vue
+++ b/packages/editor-ui/src/components/Error/NodeViewError.vue
@@ -37,9 +37,9 @@
 							<span class="box-card__subtitle">Data below may contain sensitive information. Proceed with caution when sharing.</span>
 						</div>
 						<div>
-							<el-button v-if="displayCause" class="copy-button" @click="copyCause" circle type="text" title="Copy to clipboard">
-								<font-awesome-icon icon="copy" />
-							</el-button>
+							<div class="copy-button">
+								<n8n-icon-button v-if="displayCause" @click="copyCause" title="Copy to Clipboard" icon="copy" />
+							</div>
 							<vue-json-pretty
 								v-if="displayCause"
 								:data="error.cause"
@@ -179,7 +179,6 @@ details[open] {
 
 .copy-button {
 	position: absolute;
-	font-size: 1.1rem;
 	right: 50px;
 	z-index: 1000;
 }
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 4993b37b1f..1e93dcb2dd 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -3,10 +3,10 @@
 		<BinaryDataDisplay :windowVisible="binaryDataDisplayVisible" :displayData="binaryDataDisplayData" @close="closeBinaryDataDisplay"/>
 
 		<div
+			v-if="node && !isReadOnly"
 			class="execute-node-button"
 		>
 			<n8n-button
-				v-if="node && !isReadOnly"
 				:title="`Executes this ${node.name} node after executing any previous nodes that have not yet returned data`"
 				:loading="workflowRunning"
 				icon="play-circle"
@@ -54,19 +54,17 @@
 
 				</span>
 			</div>
-			<div v-if="node && workflowRunData !== null && workflowRunData.hasOwnProperty(node.name) && !workflowRunData[node.name][runIndex].error" class="title-data-display-selector" @click.stop>
+			<div v-if="hasNodeRun && !hasRunError" class="title-data-display-selector" @click.stop>
 				<el-radio-group v-model="displayMode" size="mini">
 					<el-radio-button label="JSON" :disabled="showData === false"></el-radio-button>
 					<el-radio-button label="Table"></el-radio-button>
 					<el-radio-button label="Binary" v-if="binaryData.length !== 0"></el-radio-button>
 				</el-radio-group>
 			</div>
-			<div class="select-button" v-if="displayMode === 'JSON' && state.path !== deselectedPlaceholder">
+			<div class="select-button" v-if="hasNodeRun && !hasRunError && displayMode === 'JSON' && state.path !== deselectedPlaceholder">
 				<el-dropdown trigger="click" @command="handleCopyClick">
 					<span class="el-dropdown-link">
-						<el-button class="retry-button" circle type="text" size="small" title="Copy">
-							<font-awesome-icon icon="copy" />
-						</el-button>
+						<n8n-icon-button title="Copy to Clipboard" icon="copy" />
 					</span>
 					<el-dropdown-menu slot="dropdown">
 						<el-dropdown-item :command="{command: 'itemPath'}">Copy Item Path</el-dropdown-item>
@@ -266,6 +264,12 @@ export default mixins(
 			};
 		},
 		computed: {
+			hasNodeRun(): boolean {
+				return Boolean(this.node && this.workflowRunData && this.workflowRunData.hasOwnProperty(this.node.name));
+			},
+			hasRunError(): boolean {
+				return Boolean(this.node && this.workflowRunData && this.workflowRunData[this.node.name] && this.workflowRunData[this.node.name][this.runIndex] && this.workflowRunData[this.node.name][this.runIndex].error);
+			},
 			workflowRunning (): boolean {
 				return this.$store.getters.isActionActive('workflowRunning');
 			},