chore(ui): move JsonViewer in shared components - WF-98

The `BaseJsonViewer` needs to be reused in workflow module, which make
it harder to reuse since we have a clear separation of components used
in Editor and those used in Renderer.

So we have to introduce a new kind of `shared` components that can be
reused in both.

src/ui/src/components/core/content/CoreAnnotatedText.vue

@@ -17,7 +17,7 @@
 			</span>
 		</span>
 		<template v-if="fields.copyButtons.value === 'yes'">
-			<BaseControlBar
+			<SharedControlBar
 				:copy-raw-content="textToString(safeText)"
 				:copy-structured-content="stringifyData(safeText)"
 			/>
@@ -32,7 +32,7 @@ import {
 	cssClasses,
 	primaryTextColor,
 } from "@/renderer/sharedStyleFields";
-import BaseControlBar from "../base/BaseControlBar.vue";
+import SharedControlBar from "@/components/shared/SharedControlBar.vue";
 export default {
 	writer: {
 		name: "Annotated text",

src/ui/src/components/core/content/CoreJsonViewer.vue

@@ -1,14 +1,9 @@
 <template>
 	<div class="CoreJsonViewer">
-		<BaseJsonViewer
-			v-if="data"
-			:data="data"
+		<SharedJsonViewer
+			:data="data ?? {}"
 			:initial-depth="initialDepth"
-		/>
-		<BaseJsonViewerChildrenCounter v-else :data="{}" />
-		<BaseControlBar
-			v-if="fields.copy.value === 'yes'"
-			:copy-structured-content="dataAsString"
+			:enable-copy-to-json="fields.copy.value === 'yes'"
 		/>
 	</div>
 </template>
@@ -90,21 +85,12 @@ export default { writer: definition };
 <script setup lang="ts">
 import { computed, inject } from "vue";
 import injectionKeys from "@/injectionKeys";
-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";
+import type { JsonData } from "@/components/shared/SharedJsonViewer/SharedJsonViewer.vue";
+import SharedJsonViewer from "@/components/shared/SharedJsonViewer/SharedJsonViewer.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>
-
-<style scoped>
-.error {
-	color: #ffcfc2;
-}
-</style>

src/ui/src/components/shared/README.md

@@ -0,0 +1,3 @@
+# Shared components
+
+This folder contains Vue.js components that are used in Builder **and** in Renderer side.

src/ui/src/components/core/base/BaseCollapsible.vue → src/ui/src/components/shared/SharedCollapsible.vue

@@ -1,6 +1,6 @@
 <template>
 	<details
-		class="collapsible"
+		class="SharedCollapsible"
 		:open="open"
 		:disabled="disabled"
 		@toggle="onToggle"

src/ui/src/components/core/base/BaseControlBar.vue → src/ui/src/components/shared/SharedControlBar.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="BaseControlBar">
+	<div class="SharedControlBar">
 		<button
 			v-if="props.copyStructuredContent"
 			class="control-button"
@@ -34,9 +34,7 @@ function copyToClipboard({ text = "" }: { text?: string }) {
 </script>
 
 <style scoped>
-@import "@/renderer/sharedStyles.css";
-
-.BaseControlBar {
+.SharedControlBar {
 	margin-top: 8px;
 	display: flex;
 	flex-direction: row;

src/ui/src/components/core/base/BaseJsonViewer.utils.ts → src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewer.utils.ts

@@ -2,7 +2,7 @@ import type {
 	JsonData,
 	JsonValue,
 	JsonViewerTogglePayload,
-} from "./BaseJsonViewer.vue";
+} from "./SharedJsonViewer.vue";
 
 export function isJSONValue(data: JsonData): data is JsonValue {
 	if (["string", "number", "boolean"].includes(typeof data)) return true;

src/ui/src/components/core/base/BaseJsonViewer.vue → src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewer.vue

@@ -1,27 +1,32 @@
 <template>
 	<template v-if="isJSONObject(data) || isJSONArray(data)">
-		<BaseJsonViewerCollapsible
+		<SharedJsonViewerCollapsible
 			v-if="isRoot"
 			:open="isRootOpen"
 			:data="data"
 			@toggle="$emit('toggle', { path: [], open: $event })"
 		>
-			<BaseJsonViewerObject
+			<SharedJsonViewerObject
 				:data="data"
 				:path="path"
 				:initial-depth="initialDepth"
 				@toggle="$emit('toggle', $event)"
 			/>
-		</BaseJsonViewerCollapsible>
-		<BaseJsonViewerObject
+		</SharedJsonViewerCollapsible>
+		<SharedJsonViewerObject
 			v-else
 			:data="data"
 			:path="path"
 			:initial-depth="initialDepth"
 			@toggle="$emit('toggle', $event)"
 		/>
 	</template>
-	<BaseJsonViewerValue v-else-if="isJSONValue(data)" :data="data" />
+	<SharedJsonViewerValue v-else-if="isJSONValue(data)" :data="data" />
+	<SharedJsonViewerChildrenCounter v-else :data="{}" />
+	<SharedControlBar
+		v-if="enableCopyToJson"
+		:copy-structured-content="dataAsString"
+	/>
 </template>
 
 <script lang="ts">
@@ -44,10 +49,12 @@ import {
 	isJSONObject,
 	isJSONValue,
 	jsonViewerToggleEmitDefinition,
-} from "./BaseJsonViewer.utils";
-import BaseJsonViewerCollapsible from "./BaseJsonViewerCollapsible.vue";
-import BaseJsonViewerObject from "./BaseJsonViewerObject.vue";
-import BaseJsonViewerValue from "./BaseJsonViewerValue.vue";
+} from "./SharedJsonViewer.utils";
+import SharedJsonViewerCollapsible from "./SharedJsonViewerCollapsible.vue";
+import SharedJsonViewerObject from "./SharedJsonViewerObject.vue";
+import SharedJsonViewerValue from "./SharedJsonViewerValue.vue";
+import SharedJsonViewerChildrenCounter from "./SharedJsonViewerChildrenCounter.vue";
+import SharedControlBar from "../SharedControlBar.vue";
 
 const props = defineProps({
 	data: {
@@ -59,6 +66,7 @@ const props = defineProps({
 		default: () => [],
 	},
 	initialDepth: { type: Number, default: 0 },
+	enableCopyToJson: { type: Boolean, required: false },
 });
 
 defineEmits({
@@ -69,4 +77,5 @@ const isRoot = computed(() => props.path.length === 0);
 const isRootOpen = computed(
 	() => props.initialDepth === -1 || props.initialDepth > 0,
 );
+const dataAsString = computed(() => JSON.stringify(props.data ?? "{}"));
 </script>

src/ui/src/components/core/base/BaseJsonViewerChildrenCounter.vue → src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewerChildrenCounter.vue

@@ -8,8 +8,8 @@ import {
 	getJSONLength,
 	isJSONArray,
 	isJSONObject,
-} from "./BaseJsonViewer.utils";
-import type { JsonData } from "./BaseJsonViewer.vue";
+} from "./SharedJsonViewer.utils";
+import type { JsonData } from "./SharedJsonViewer.vue";
 
 const props = defineProps({
 	data: {

src/ui/src/components/core/base/BaseJsonViewerCollapsible.vue → src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewerCollapsible.vue

@@ -1,28 +1,28 @@
 <template>
-	<BaseCollapsible
+	<SharedCollapsible
 		:open="open"
 		:disabled="disabled"
 		@toggle="$emit('toggle', $event)"
 	>
 		<template #title>
-			<div class="BaseJsonViewerCollapsible__title">
+			<div class="SharedJsonViewerCollapsible__title">
 				<span v-if="title">{{ title }}</span>
-				<BaseJsonViewerChildrenCounter v-if="data" :data="data" />
+				<SharedJsonViewerChildrenCounter v-if="data" :data="data" />
 			</div>
 		</template>
 		<template #content>
-			<div class="BaseJsonViewerCollapsible__content">
+			<div class="SharedJsonViewerCollapsible__content">
 				<slot />
 			</div>
 		</template>
-	</BaseCollapsible>
+	</SharedCollapsible>
 </template>
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import BaseCollapsible from "./BaseCollapsible.vue";
-import type { JsonData } from "./BaseJsonViewer.vue";
-import BaseJsonViewerChildrenCounter from "./BaseJsonViewerChildrenCounter.vue";
+import SharedCollapsible from "../SharedCollapsible.vue";
+import type { JsonData } from "./SharedJsonViewer.vue";
+import SharedJsonViewerChildrenCounter from "./SharedJsonViewerChildrenCounter.vue";
 
 defineProps({
 	open: { type: Boolean, required: false },
@@ -41,14 +41,14 @@ defineEmits({
 </script>
 
 <style scoped>
-.BaseJsonViewerCollapsible__title {
+.SharedJsonViewerCollapsible__title {
 	font-family: monospace;
 	font-size: 12px;
 	display: flex;
 	gap: 8px;
 }
 
-.BaseJsonViewerCollapsible__content {
+.SharedJsonViewerCollapsible__content {
 	margin-left: 7px;
 	padding-left: var(--jsonViewerIndentationSpacing, 8px);
 	padding-top: 4px;

src/ui/src/components/core/base/BaseJsonViewerObject.vue → src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewerObject.vue

@@ -1,34 +1,34 @@
 <template>
-	<div class="WdsJsonViewerObject">
+	<div class="SharedJsonViewerObject">
 		<template
 			v-for="([key, value], index) in Object.entries(data)"
 			:key="index"
 		>
 			<!-- This is a single value, we display it as plain key/value text -->
 			<div
 				v-if="isJSONValue(value) || getJSONLength(value) === 0"
-				class="WdsJsonViewerObject__value"
+				class="SharedJsonViewerObject__value"
 			>
 				<span>{{ key }}</span
 				>:
-				<BaseJsonViewerValue :data="value" />
+				<SharedJsonViewerValue :data="value" />
 			</div>
 			<!-- This is a an object -->
-			<BaseJsonViewerCollapsible
+			<SharedJsonViewerCollapsible
 				v-else
 				:open="isOpen(key)"
 				:title="key"
 				:data="value"
 				@toggle="toggleOpenedKey(key, $event)"
 			>
-				<BaseJsonViewer
+				<SharedJsonViewer
 					v-if="isOpen(key)"
 					:data="value"
 					:path="[...path, key]"
 					:initial-depth="initialDepth"
 					@toggle="$emit('toggle', $event)"
 				/>
-			</BaseJsonViewerCollapsible>
+			</SharedJsonViewerCollapsible>
 		</template>
 	</div>
 </template>
@@ -39,11 +39,11 @@ import {
 	getJSONLength,
 	isJSONValue,
 	jsonViewerToggleEmitDefinition,
-} from "./BaseJsonViewer.utils";
-import type { JsonData, JsonPath } from "./BaseJsonViewer.vue";
-import BaseJsonViewer from "./BaseJsonViewer.vue";
-import BaseJsonViewerCollapsible from "./BaseJsonViewerCollapsible.vue";
-import BaseJsonViewerValue from "./BaseJsonViewerValue.vue";
+} from "./SharedJsonViewer.utils";
+import type { JsonData, JsonPath } from "./SharedJsonViewer.vue";
+import SharedJsonViewer from "./SharedJsonViewer.vue";
+import SharedJsonViewerCollapsible from "./SharedJsonViewerCollapsible.vue";
+import SharedJsonViewerValue from "./SharedJsonViewerValue.vue";
 
 const props = defineProps({
 	data: {
@@ -106,13 +106,13 @@ function isOpen(key: string) {
 </script>
 
 <style scoped>
-.WdsJsonViewerObject {
+.SharedJsonViewerObject {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 }
 
-.WdsJsonViewerObject__value {
+.SharedJsonViewerObject__value {
 	font-family: monospace;
 	font-size: 12px;
 	padding-left: 16px;

src/ui/src/components/core/base/BaseJsonViewerValue.vue → src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewerValue.vue

@@ -1,10 +1,10 @@
 <template>
-	<span class="JsonViewerValue">{{ dataFormatted }}</span>
+	<span class="SharedJsonViewerValue">{{ dataFormatted }}</span>
 </template>
 
 <script setup lang="ts">
 import { PropType, computed } from "vue";
-import type { JsonValue } from "./BaseJsonViewer.vue";
+import type { JsonValue } from "./SharedJsonViewer.vue";
 
 const props = defineProps({
 	data: {
@@ -17,7 +17,7 @@ const dataFormatted = computed(() => JSON.stringify(props.data));
 </script>
 
 <style scoped>
-.JsonViewerValue {
+.SharedJsonViewerValue {
 	font-family: monospace;
 	color: var(--secondaryTextColor);
 }