improved loading of the body - and formatted xml

Inspired by the one in MessageStore. Potential removal of duplication

Author: cquirosj

src/Frontend/src/components/messages2/SagaDiagram/MessageDataBox.vue

@@ -4,9 +4,8 @@ import { storeToRefs } from "pinia";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import MaximizableCodeEditor from "@/components/MaximizableCodeEditor.vue";
 import { computed } from "vue";
-import { CodeLanguage } from "@/components/codeEditorTypes";
-import { parse, stringify } from "lossless-json";
 import { EditorView } from "@codemirror/view";
+import parseContentType from "@/composables/contentTypeParser";
 
 const messageDataBoxTheme = EditorView.baseTheme({
   ".maximazable-code-editor--inline-instance .cm-editor": {
@@ -31,37 +30,29 @@ const modalTitle = computed(() => {
 const sagaDiagramStore = useSagaDiagramStore();
 const { messageDataLoading } = storeToRefs(sagaDiagramStore);
 
-const formattedData = computed(() => {
-  if (props.messageData.type === "json" && props.messageData.data) {
-    try {
-      // Parse and then stringify with indentation to ensure proper formatting
-      const parsed = parse(props.messageData.data);
-      return stringify(parsed, null, 2);
-    } catch {
-      return props.messageData.data;
-    }
-  }
-  return props.messageData.data;
-});
+const contentType = computed(() => parseContentType(props.messageData.body.data.content_type));
 
-const editorLanguage = computed<CodeLanguage>(() => {
-  const type = props.messageData.type?.toLowerCase();
-  return (type === "xml" ? "xml" : "json") as CodeLanguage;
-});
+const body = computed(() => props.messageData.body.data.value || "");
 </script>
 
 <template>
   <div v-if="messageDataLoading" class="message-data-loading">
     <LoadingSpinner />
   </div>
-  <div v-else-if="messageData.error" class="message-data-box message-data-box-error">
+  <div v-else-if="messageData.body.failed_to_load" class="message-data-box message-data-box-error">
     <span class="message-data-box-text--error">An error occurred while retrieving the message data</span>
   </div>
-  <div v-else-if="!messageDataLoading && messageData.data === ''" class="message-data-box">
+  <div v-else-if="messageData.body.not_found" class="message-data-box message-data-box-error">
+    <span class="message-data-box-text--error">Message body not found</span>
+  </div>
+  <div v-else-if="!messageDataLoading && !messageData.body.data.value" class="message-data-box">
     <span class="message-data-box-text--empty">Empty</span>
   </div>
-  <div v-else class="message-data-box message-data-box-content">
-    <MaximizableCodeEditor :model-value="formattedData || ''" :language="editorLanguage" :read-only="true" :show-gutter="false" :modalTitle="modalTitle" :extensions="[messageDataBoxTheme]" />
+  <div v-else-if="contentType.isSupported" class="message-data-box message-data-box-content">
+    <MaximizableCodeEditor :model-value="body" :language="contentType.language" :readOnly="true" :showGutter="false" :modalTitle="modalTitle" :extensions="[messageDataBoxTheme]" />
+  </div>
+  <div v-else class="message-data-box message-data-box-error">
+    <div class="alert alert-warning">Message body cannot be displayed because content type "{{ messageData.body.data.content_type }}" is not supported.</div>
   </div>
 </template>
 

src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts

@@ -152,8 +152,11 @@ function findMessageData(messagesData: SagaMessageData[], messageId: string): Sa
 function createEmptyMessageData(): SagaMessageData {
   return {
     message_id: "",
-    data: "",
-    type: "json",
-    error: false,
+    body: {
+      data: {},
+      loading: false,
+      failed_to_load: false,
+      not_found: false,
+    },
   };
 }

src/Frontend/src/stores/SagaDiagramStore.ts

@@ -3,12 +3,19 @@ import { ref, watch } from "vue";
 import { SagaHistory, SagaMessage } from "@/resources/SagaHistory";
 import { useFetchFromServiceControl } from "@/composables/serviceServiceControlUrls";
 import Message from "@/resources/Message";
+import { parse, stringify } from "lossless-json";
+import xmlFormat from "xml-formatter";
+
+interface DataContainer<T> {
+  loading?: boolean;
+  failed_to_load?: boolean;
+  not_found?: boolean;
+  data: T;
+}
 
 export interface SagaMessageData {
   message_id: string;
-  data: string;
-  type: "json" | "xml";
-  error: boolean;
+  body: DataContainer<{ value?: string; content_type?: string }>;
 }
 export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => {
   const sagaHistory = ref<SagaHistory | null>(null);
@@ -71,67 +78,38 @@ export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => {
 
   async function fetchSagaMessageData(message: SagaMessage): Promise<SagaMessageData> {
     const bodyUrl = (message.body_url ?? formatUrl(MessageBodyEndpoint, message.message_id)).replace(/^\//, "");
+    const result: SagaMessageData = {
+      message_id: message.message_id,
+      body: { data: {} },
+    };
 
-    try {
-      const response = await useFetchFromServiceControl(bodyUrl, { cache: "no-store" });
+    result.body.loading = true;
+    result.body.failed_to_load = false;
 
-      // Treat 404 as empty data, not as an error
+    try {
+      const response = await useFetchFromServiceControl(bodyUrl);
       if (response.status === 404) {
-        return {
-          message_id: message.message_id,
-          data: "",
-          type: "json",
-          error: false,
-        };
-      }
-
-      // Handle other non-OK responses as errors
-      if (!response.ok) {
-        error.value = `HTTP error! status: ${response.status}`;
-        return {
-          message_id: message.message_id,
-          data: "",
-          type: "json",
-          error: true,
-        };
+        result.body.not_found = true;
+        return result;
       }
 
-      const body = await response.text();
+      const contentType = response.headers.get("content-type");
+      result.body.data.content_type = contentType ?? "text/plain";
+      result.body.data.value = await response.text();
 
-      if (!body) {
-        return {
-          message_id: message.message_id,
-          data: "",
-          type: "json",
-          error: false,
-        };
+      if (contentType === "application/json") {
+        result.body.data.value = stringify(parse(result.body.data.value), null, 2) ?? result.body.data.value;
       }
-
-      // Determine the content type
-      if (body.trim().startsWith("<?xml")) {
-        return {
-          message_id: message.message_id,
-          data: body,
-          type: "xml",
-          error: false,
-        };
-      } else {
-        return {
-          message_id: message.message_id,
-          data: body,
-          type: "json",
-          error: false,
-        };
+      if (contentType === "text/xml") {
+        result.body.data.value = xmlFormat(result.body.data.value, { indentation: "  ", collapseContent: true });
       }
-    } catch (e) {
-      error.value = e instanceof Error ? e.message : "Unknown error occurred";
-      return {
-        message_id: message.message_id,
-        data: "",
-        type: "json",
-        error: true,
-      };
+    } catch {
+      result.body.failed_to_load = true;
+    } finally {
+      result.body.loading = false;
     }
+
+    return result;
   }
 
   async function getAuditMessages(sagaId: string) {