fix(editor): Fix copy selection behavior (#6112)

🐛 Fix copy selection behavior
n8n-io · May 2, 2023 · 0efd94a · 0efd94a
1 parent b561d46
commit 0efd94a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/packages/editor-ui/src/components/RunDataJson.vue b/packages/editor-ui/src/components/RunDataJson.vue
@@ -83,6 +83,7 @@ import { useNDVStore } from '@/stores/ndv';
 import MappingPill from './MappingPill.vue';
 import { getMappedExpression } from '@/utils/mappingUtils';
 import { useWorkflowsStore } from '@/stores/workflows';
+import { nonExistingJsonPath } from '@/components/RunDataJsonActions.vue';
 
 const runDataJsonActions = () => import('@/components/RunDataJsonActions.vue');
 
@@ -125,7 +126,7 @@ export default mixins(externalHooks).extend({
 	},
 	data() {
 		return {
-			selectedJsonPath: null as null | string,
+			selectedJsonPath: nonExistingJsonPath,
 			draggingPath: null as null | string,
 			displayMode: 'json',
 		};

diff --git a/packages/editor-ui/src/components/RunDataJsonActions.vue b/packages/editor-ui/src/components/RunDataJsonActions.vue
@@ -1,6 +1,14 @@
 <template>
 	<div :class="$style.actionsGroup">
-		<el-dropdown trigger="click" @command="handleCopyClick">
+		<n8n-icon-button
+			v-if="noSelection"
+			:title="$locale.baseText('runData.copyToClipboard')"
+			icon="copy"
+			type="tertiary"
+			:circle="false"
+			@click="handleCopyClick({ command: 'value' })"
+		/>
+		<el-dropdown v-else trigger="click" @command="handleCopyClick">
 			<span class="el-dropdown-link">
 				<n8n-icon-button
 					:title="$locale.baseText('runData.copyToClipboard')"
@@ -47,7 +55,7 @@ type JsonPathData = {
 };
 
 // A path that does not exist so that nothing is selected by default
-const nonExistingJsonPath = '_!^&*';
+export const nonExistingJsonPath = '_!^&*';
 
 export default mixins(genericHelpers, nodeHelpers, pinData, copyPaste).extend({
 	name: 'run-data-json-actions',
@@ -87,15 +95,17 @@ export default mixins(genericHelpers, nodeHelpers, pinData, copyPaste).extend({
 		activeNode(): INodeUi | null {
 			return this.ndvStore.activeNode;
 		},
+		noSelection() {
+			return this.selectedJsonPath === nonExistingJsonPath;
+		},
 		normalisedJsonPath(): string {
-			const isNotSelected = this.selectedJsonPath === nonExistingJsonPath;
-			return isNotSelected ? '[""]' : this.selectedJsonPath;
+			return this.noSelection ? '[""]' : this.selectedJsonPath;
 		},
 	},
 	methods: {
 		getJsonValue(): string {
 			let selectedValue = jp.query(this.jsonData, `$${this.normalisedJsonPath}`)[0];
-			if (this.selectedJsonPath === nonExistingJsonPath) {
+			if (this.noSelection) {
 				if (this.hasPinData) {
 					selectedValue = clearJsonKey(this.pinData as object);
 				} else {