Wip/mk/display message on warning (#11705)

app/gui/src/project-view/components/visualizations/JSONVisualization/JsonErrorWidget.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const props = defineProps<{
+  data: unknown
+}>()
+</script>
+
+<template>
+  <span class="JsonErrorWidget" v-text="props.data" />
+</template>
+
+<style scoped>
+.JsonErrorWidget {
+  padding: 8px;
+  padding-inline-start: 0;
+}
+</style>

app/gui/src/project-view/components/visualizations/JSONVisualization/JsonValueWidget.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import JsonArrayWidget from '@/components/visualizations/JSONVisualization/JsonArrayWidget.vue'
+import JsonErrorWidget from '@/components/visualizations/JSONVisualization/JsonErrorWidget.vue'
 import JsonObjectWidget from '@/components/visualizations/JSONVisualization/JsonObjectWidget.vue'
 import JsonPrimitiveWidget from '@/components/visualizations/JSONVisualization/JsonPrimitiveWidget.vue'
 
@@ -10,8 +11,12 @@ const emit = defineEmits<{
 </script>
 
 <template>
+  <JsonErrorWidget
+    v-if="props.data && typeof props.data === 'object' && '_to_js_object_error_' in props.data"
+    :data="props.data._to_js_object_error_"
+  />
   <JsonArrayWidget
-    v-if="Array.isArray(props.data)"
+    v-else-if="Array.isArray(props.data)"
     :data="props.data"
     @createProjection="emit('createProjection', $event)"
   />

app/gui/src/project-view/components/visualizations/WarningsVisualization.vue

@@ -20,17 +20,47 @@ const removeWarnings = computed(() =>
 </script>
 
 <script setup lang="ts">
-type Data = string[]
+type Error = {
+  type?: string
+  content?: {
+    argument_name?: string
+    call_location?: string
+    constructor?: string
+    function_name?: string
+    type?: string
+  }
+  message?: string
+}
 
-const props = defineProps<{ data: Data }>()
+type Warning = string[]
 
+type Data = Error | Warning
+
+const props = defineProps<{ data: Data }>()
 const config = useVisualizationConfig()
 
+const messages = computed(() => {
+  const data = props.data
+  if (Array.isArray(data)) {
+    return data
+  }
+  if (typeof data === 'object' && data !== null && 'message' in data) {
+    return [data.message]
+  }
+  return []
+})
+
+const isRemoveWarningsDisabled = computed(() =>
+  Array.isArray(props.data) ?
+    messages.value.length === 0
+  : typeof props.data === 'object' && props.data !== null && 'message' in props.data,
+)
+
 config.setToolbar([
   {
     icon: 'not_exclamation',
     title: 'Remove Warnings',
-    disabled: () => props.data.length === 0,
+    disabled: isRemoveWarningsDisabled,
     onClick: () => config.createNodes({ content: removeWarnings.value, commit: true }),
     dataTestid: 'remove-warnings-button',
   },
@@ -40,8 +70,8 @@ config.setToolbar([
 <template>
   <div class="WarningsVisualization">
     <ul>
-      <li v-if="props.data.length === 0">There are no warnings.</li>
-      <li v-for="(warning, index) in props.data" :key="index" v-text="warning"></li>
+      <li v-if="messages.length === 0">There are no warnings.</li>
+      <li v-for="(warning, index) in messages" :key="index" v-text="warning"></li>
     </ul>
   </div>
 </template>