fix(ui): fix type validation for SharedJsonViewer - WF-103

The `SharedJsonViewer` is able to render primitives values, but the type definition is not correct and produce warning in development mode.
writer · Nov 9, 2024 · b0c877b · b0c877b
1 parent 3a44cb8
commit b0c877b
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 7 deletions.
diff --git a/src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewer.vue b/src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewer.vue
@@ -58,7 +58,14 @@ import SharedControlBar from "../SharedControlBar.vue";
 
 const props = defineProps({
 	data: {
-		type: Object as PropType<JsonData>,
+		type: [
+			String,
+			Number,
+			Boolean,
+			Object,
+			Array,
+			null,
+		] as PropType<JsonData>,
 		required: true,
 	},
 	path: {
@@ -77,5 +84,8 @@ const isRoot = computed(() => props.path.length === 0);
 const isRootOpen = computed(
 	() => props.initialDepth === -1 || props.initialDepth > 0,
 );
-const dataAsString = computed(() => JSON.stringify(props.data ?? "{}"));
+const dataAsString = computed(() => {
+	if (props.data === undefined) return JSON.stringify(null);
+	return JSON.stringify(props.data);
+});
 </script>
diff --git a/src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewerChildrenCounter.vue b/src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewerChildrenCounter.vue
@@ -13,7 +13,14 @@ import type { JsonData } from "./SharedJsonViewer.vue";
 
 const props = defineProps({
 	data: {
-		type: Object as PropType<JsonData>,
+		type: [
+			String,
+			Number,
+			Boolean,
+			Object,
+			Array,
+			null,
+		] as PropType<JsonData>,
 		required: true,
 	},
 });

diff --git a/src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewerCollapsible.vue b/src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewerCollapsible.vue
@@ -29,7 +29,14 @@ defineProps({
 	disabled: { type: Boolean, required: false },
 	title: { type: String, required: false, default: undefined },
 	data: {
-		type: [Object, Array] as PropType<JsonData>,
+		type: [
+			String,
+			Number,
+			Boolean,
+			Object,
+			Array,
+			null,
+		] as PropType<JsonData>,
 		required: false,
 		default: undefined,
 	},

diff --git a/src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewerObject.vue b/src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewerObject.vue
@@ -47,7 +47,7 @@ import SharedJsonViewerValue from "./SharedJsonViewerValue.vue";
 
 const props = defineProps({
 	data: {
-		type: Object as PropType<{ [x: string]: JsonData } | JsonData>,
+		type: [Object, Array] as PropType<JsonData>,
 		required: true,
 	},
 	path: {

diff --git a/src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewerValue.vue b/src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewerValue.vue
@@ -4,11 +4,18 @@
 
 <script setup lang="ts">
 import { PropType, computed } from "vue";
-import type { JsonValue } from "./SharedJsonViewer.vue";
+import type { JsonData } from "./SharedJsonViewer.vue";
 
 const props = defineProps({
 	data: {
-		type: [Object, String, Number] as PropType<JsonValue>,
+		type: [
+			String,
+			Number,
+			Boolean,
+			Object,
+			Array,
+			null,
+		] as PropType<JsonData>,
 		required: true,
 	},
 });