Passing message type to maximized title

Author: cquirosj

src/Frontend/src/components/MaximizableCodeEditor.vue

@@ -13,15 +13,13 @@ withDefaults(
     language?: CodeLanguage;
     readOnly?: boolean;
     showGutter?: boolean;
-    showCopyToClipboard?: boolean;
     ariaLabel?: string;
     extensions?: Extension[];
     modalTitle?: string;
   }>(),
   {
     readOnly: false,
     showGutter: false,
-    showCopyToClipboard: false,
     extensions: () => [],
     modalTitle: "Code View",
   }
@@ -72,16 +70,7 @@ onBeforeUnmount(() => {
         <img :src="DiffMaximizeIcon" alt="Maximize" width="14" height="14" />
       </button>
 
-      <CodeEditor
-        class="maximazable-code-editor--inline-instance"
-        v-model="modelValue"
-        :language="language"
-        :read-only="readOnly"
-        :show-gutter="showGutter"
-        :show-copy-to-clipboard="showCopyToClipboard"
-        :aria-label="ariaLabel"
-        :extensions="extensions"
-      >
+      <CodeEditor class="maximazable-code-editor--inline-instance" v-model="modelValue" :language="language" :read-only="readOnly" :show-gutter="showGutter" :show-copy-to-clipboard="false" :aria-label="ariaLabel" :extensions="extensions">
         <template #toolbarLeft>
           <slot name="toolbarLeft"></slot>
         </template>
@@ -151,7 +140,6 @@ onBeforeUnmount(() => {
   border: none;
 }
 
-/* Modal styles copied from DiffViewer */
 .maximize-modal {
   position: fixed;
   top: 0;

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

@@ -21,8 +21,13 @@ const messageDataBoxTheme = EditorView.baseTheme({
 
 const props = defineProps<{
   messageData: SagaMessageData;
+  maximizedTitle?: string;
 }>();
 
+const modalTitle = computed(() => {
+  return props.maximizedTitle ? `Message Data - ${props.maximizedTitle}` : "Message Data";
+});
+
 const sagaDiagramStore = useSagaDiagramStore();
 const { messageDataLoading } = storeToRefs(sagaDiagramStore);
 
@@ -39,7 +44,6 @@ const formattedData = computed(() => {
   return props.messageData.data;
 });
 
-// Ensure language is properly typed as CodeLanguage
 const editorLanguage = computed<CodeLanguage>(() => {
   const type = props.messageData.type?.toLowerCase();
   return (type === "xml" ? "xml" : "json") as CodeLanguage;
@@ -51,13 +55,13 @@ const editorLanguage = computed<CodeLanguage>(() => {
     <LoadingSpinner />
   </div>
   <div v-else-if="messageData.error" class="message-data-box message-data-box-error">
-    <span class="message-data-box-text--error">An error occurred while parsing the message data</span>
+    <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">
     <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="Message Data" :extensions="[messageDataBoxTheme]" />
+    <MaximizableCodeEditor :model-value="formattedData || ''" :language="editorLanguage" :read-only="true" :show-gutter="false" :modalTitle="modalTitle" :extensions="[messageDataBoxTheme]" />
   </div>
 </template>
 

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

@@ -5,14 +5,14 @@ import { getTimeoutFriendly } from "@/composables/deliveryDelayParser";
 
 export interface SagaMessageViewModel {
   MessageId: string;
-  MessageFriendlyTypeName: string;
+  FriendlyTypeName: string;
   FormattedTimeSent: string;
   Data: SagaMessageData;
   IsEventMessage: boolean;
   IsCommandMessage: boolean;
 }
 export interface InitiatingMessageViewModel {
-  MessageType: string;
+  FriendlyTypeName: string;
   IsSagaTimeoutMessage: boolean;
   FormattedMessageTimestamp: string;
   IsEventMessage: boolean;
@@ -97,7 +97,7 @@ export function parseSagaUpdates(sagaHistory: SagaHistory | null, messagesData:
           HasTimeout: hasTimeout,
           TimeoutSeconds: timeoutSeconds,
           TimeoutFriendly: getTimeoutFriendly(delivery_delay),
-          MessageFriendlyTypeName: typeToName(msg.message_type || ""),
+          FriendlyTypeName: typeToName(msg.message_type || ""),
           Data: messageData,
           IsEventMessage: isEventMessage,
           IsCommandMessage: !isEventMessage,
@@ -132,8 +132,8 @@ export function parseSagaUpdates(sagaHistory: SagaHistory | null, messagesData:
         Status: update.status,
         StatusDisplay: update.status === "new" ? "Saga Initiated" : "Saga Updated",
         InitiatingMessage: <InitiatingMessageViewModel>{
+          FriendlyTypeName: typeToName(update.initiating_message?.message_type || "Unknown Message") || "",
           MessageId: update.initiating_message?.message_id || "",
-          MessageType: typeToName(update.initiating_message?.message_type || "Unknown Message") || "",
           FormattedMessageTimestamp: `${initiatingMessageTimestamp.toLocaleDateString()} ${initiatingMessageTimestamp.toLocaleTimeString()}`,
           MessageData: initiatingMessageData,
           IsEventMessage: update.initiating_message?.intent === "Publish",

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

@@ -27,11 +27,11 @@ const props = defineProps<{
     }"
   >
     <img class="saga-icon saga-icon--side-cell" :src="message.IsEventMessage ? EventIcon : CommandIcon" :alt="message.IsEventMessage ? 'Event' : 'Command'" />
-    <h2 class="message-title">{{ message.MessageFriendlyTypeName }}</h2>
+    <h2 class="message-title">{{ message.FriendlyTypeName }}</h2>
     <div class="timestamp">{{ message.FormattedTimeSent }}</div>
   </div>
   <div v-if="showMessageData" class="message-data message-data--active">
-    <MessageDataBox :messageData="message.Data" />
+    <MessageDataBox :messageData="message.Data" :maximizedTitle="message.FriendlyTypeName" />
   </div>
 </template>
 

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

@@ -66,11 +66,11 @@ watch(
         }"
       >
         <img class="saga-icon saga-icon--side-cell" :src="TimeoutIcon" alt="" />
-        <h2 class="message-title" aria-label="timeout message type">{{ message.MessageFriendlyTypeName }}</h2>
+        <h2 class="message-title" aria-label="timeout message type">{{ message.FriendlyTypeName }}</h2>
         <div class="timestamp" aria-label="timeout message timestamp">{{ message.FormattedTimeSent }}</div>
       </div>
       <div v-if="showMessageData" class="message-data message-data--active">
-        <MessageDataBox :messageData="message.Data" />
+        <MessageDataBox :messageData="message.Data" :maximizedTitle="message.FriendlyTypeName" />
       </div>
     </div>
   </div>

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

@@ -151,7 +151,7 @@ const hasStateChanges = computed(() => {
           :data-message-id="update.InitiatingMessage.IsSagaTimeoutMessage ? update.MessageId : ''"
         >
           <img class="saga-icon saga-icon--side-cell" :src="update.InitiatingMessage.IsSagaTimeoutMessage ? TimeoutIcon : update.InitiatingMessage.IsEventMessage ? EventIcon : CommandIcon" alt="" />
-          <h2 class="message-title" aria-label="initiating message type">{{ update.InitiatingMessage.MessageType }}</h2>
+          <h2 class="message-title" aria-label="initiating message type">{{ update.InitiatingMessage.FriendlyTypeName }}</h2>
           <div class="timestamp" aria-label="initiating message timestamp">{{ update.InitiatingMessage.FormattedMessageTimestamp }}</div>
         </div>
       </div>
@@ -176,7 +176,7 @@ const hasStateChanges = computed(() => {
       <div class="cell cell--side cell--left-border cell--aling-top">
         <div v-if="showMessageData" class="message-data message-data--active">
           <!-- Generic message data box -->
-          <MessageDataBox v-if="update.InitiatingMessage.MessageType" :messageData="update.InitiatingMessage.MessageData" />
+          <MessageDataBox v-if="update.InitiatingMessage" :messageData="update.InitiatingMessage.MessageData" :maximizedTitle="update.InitiatingMessage.FriendlyTypeName" />
         </div>
       </div>
 
@@ -194,7 +194,7 @@ const hasStateChanges = computed(() => {
 
             <!-- Initial state display -->
             <div v-else-if="update.IsFirstNode" class="json-container json-container--first-node">
-              <MaximizableCodeEditor :model-value="sagaUpdateStateChanges.formattedState || ''" language="json" :showCopyToClipboard="false" :showGutter="false" modalTitle="Saga Initialized" :extensions="[monospaceTheme]" />
+              <MaximizableCodeEditor :model-value="sagaUpdateStateChanges.formattedState || ''" language="json" :showGutter="false" modalTitle="Saga Initialized" :extensions="[monospaceTheme]" />
             </div>
 
             <!-- No changes message -->