From 14de1cc3e1150d3455545ffad7a560d3be294109 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Tue, 8 Oct 2024 21:52:48 +0200
Subject: [PATCH] feat(ui): add copy to clipboard for JSON viewer - WF-25

---
 .../components/core/base/BaseControlBar.vue   |  4 ++--
 .../core/content/CoreJsonViewer.vue           | 23 ++++++++++++++++---
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/ui/src/components/core/base/BaseControlBar.vue b/src/ui/src/components/core/base/BaseControlBar.vue
index 6ce2da620..8dce2fd86 100644
--- a/src/ui/src/components/core/base/BaseControlBar.vue
+++ b/src/ui/src/components/core/base/BaseControlBar.vue
@@ -37,10 +37,11 @@ function copyToClipboard({ text = "" }: { text?: string }) {
 @import "@/renderer/sharedStyles.css";
 
 .BaseControlBar {
-	margin: 10px 0;
+	margin-top: 8px;
 	display: flex;
 	flex-direction: row;
 	justify-content: flex-end;
+	gap: 8px;
 }
 
 .control-button {
@@ -50,7 +51,6 @@ function copyToClipboard({ text = "" }: { text?: string }) {
 	color: white;
 	cursor: pointer;
 	font-size: 11px;
-	margin-right: 10px;
 	padding: 4px 8px;
 
 	&:hover {
diff --git a/src/ui/src/components/core/content/CoreJsonViewer.vue b/src/ui/src/components/core/content/CoreJsonViewer.vue
index cd059a2ae..5ddcdadea 100644
--- a/src/ui/src/components/core/content/CoreJsonViewer.vue
+++ b/src/ui/src/components/core/content/CoreJsonViewer.vue
@@ -6,6 +6,10 @@
 			:initial-depth="initialDepth"
 		/>
 		<BaseJsonViewerChildrenCounter v-else :data="{}" />
+		<BaseControlBar
+			v-if="fields.copy.value === 'yes'"
+			:copy-structured-content="dataAsString"
+		/>
 	</div>
 </template>
 
@@ -55,6 +59,17 @@ const definition: WriterComponentDefinition = {
 			type: FieldType.Number,
 			init: "0",
 		},
+		copy: {
+			name: "Copy",
+			desc: "If active, adds a control bar with copy JSON button.",
+			type: FieldType.Text,
+			options: {
+				yes: "yes",
+				no: "no",
+			},
+			default: "no",
+			category: FieldCategory.Style,
+		},
 		jsonViewerIndentationSpacing: {
 			name: "JSON indentation",
 			type: FieldType.Width,
@@ -75,13 +90,15 @@ export default { writer: definition };
 <script setup lang="ts">
 import { computed, inject } from "vue";
 import injectionKeys from "@/injectionKeys";
-import type { JsonData } from "../base/BaseJsonViewer.vue";
-import BaseJsonViewer from "../base/BaseJsonViewer.vue";
-import BaseJsonViewerChildrenCounter from "../base/BaseJsonViewerChildrenCounter.vue";
+import type { JsonData } from "@/components/core/base/BaseJsonViewer.vue";
+import BaseJsonViewer from "@/components/core/base/BaseJsonViewer.vue";
+import BaseJsonViewerChildrenCounter from "@/components/core/base/BaseJsonViewerChildrenCounter.vue";
+import BaseControlBar from "@/components/core/base/BaseControlBar.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
 
 const data = computed(() => fields.data.value as JsonData);
+const dataAsString = computed(() => JSON.stringify(data.value));
 
 const initialDepth = computed(() => Number(fields.initialDepth.value) || 0);
 </script>