From 971dc6a9261506757ea3990a883a98d6ac375a30 Mon Sep 17 00:00:00 2001 From: Christian Date: Tue, 6 May 2025 08:56:50 -0600 Subject: [PATCH 01/16] Maximizable code editor --- .../src/components/MaximizableCodeEditor.vue | 168 ++++++++++++++++++ .../messages2/SagaDiagram/SagaUpdateNode.vue | 11 +- 2 files changed, 170 insertions(+), 9 deletions(-) create mode 100644 src/Frontend/src/components/MaximizableCodeEditor.vue diff --git a/src/Frontend/src/components/MaximizableCodeEditor.vue b/src/Frontend/src/components/MaximizableCodeEditor.vue new file mode 100644 index 000000000..892e77faa --- /dev/null +++ b/src/Frontend/src/components/MaximizableCodeEditor.vue @@ -0,0 +1,168 @@ + + + + + diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue index 8cbb54675..b41a37c2a 100644 --- a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue +++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue @@ -4,7 +4,7 @@ import MessageDataBox from "./MessageDataBox.vue"; import SagaOutgoingTimeoutMessage from "./SagaOutgoingTimeoutMessage.vue"; import SagaOutgoingMessage from "./SagaOutgoingMessage.vue"; import DiffViewer from "@/components/messages2/DiffViewer.vue"; -import CodeEditor from "@/components/CodeEditor.vue"; +import MaximizableCodeEditor from "@/components/MaximizableCodeEditor.vue"; import { useSagaDiagramStore } from "@/stores/SagaDiagramStore"; import { ref, watch, computed } from "vue"; import { EditorView } from "@codemirror/view"; @@ -35,13 +35,6 @@ const monospaceTheme = EditorView.baseTheme({ }, }); -// Define types for JSON values and properties -type JsonValue = string | number | boolean | null | JsonObject | JsonArray; -interface JsonObject { - [key: string]: JsonValue; -} -type JsonArray = Array; - const props = defineProps<{ update: SagaUpdateViewModel; showMessageData?: boolean; @@ -206,7 +199,7 @@ const hasStateChanges = computed(() => {
- +
From 1b813e24184f8c4b52ee1eb9ac13bd5d946b44ea Mon Sep 17 00:00:00 2001 From: Christian Date: Tue, 6 May 2025 17:01:42 -0600 Subject: [PATCH 02/16] do not affect other cm instances --- .../src/components/MaximizableCodeEditor.vue | 4 ++-- .../messages2/SagaDiagram/SagaUpdateNode.vue | 13 ++++--------- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/src/Frontend/src/components/MaximizableCodeEditor.vue b/src/Frontend/src/components/MaximizableCodeEditor.vue index 892e77faa..7bf4ee12a 100644 --- a/src/Frontend/src/components/MaximizableCodeEditor.vue +++ b/src/Frontend/src/components/MaximizableCodeEditor.vue @@ -58,7 +58,7 @@ onBeforeUnmount(() => { diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts b/src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts index d2f7d07ca..97ce52bda 100644 --- a/src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts +++ b/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: { + 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", diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingMessage.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingMessage.vue index ec4766a4c..65ba33c9f 100644 --- a/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingMessage.vue +++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingMessage.vue @@ -27,11 +27,11 @@ const props = defineProps<{ }" > -

{{ message.MessageFriendlyTypeName }}

+

{{ message.FriendlyTypeName }}

{{ message.FormattedTimeSent }}
- +
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue index 0f5658924..fae0ea52f 100644 --- a/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue +++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue @@ -66,11 +66,11 @@ watch( }" > -

{{ message.MessageFriendlyTypeName }}

+

{{ message.FriendlyTypeName }}

{{ message.FormattedTimeSent }}
- +
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue index 9fc8d7e29..c9b3a8d76 100644 --- a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue +++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue @@ -151,7 +151,7 @@ const hasStateChanges = computed(() => { :data-message-id="update.InitiatingMessage.IsSagaTimeoutMessage ? update.MessageId : ''" > -

{{ update.InitiatingMessage.MessageType }}

+

{{ update.InitiatingMessage.FriendlyTypeName }}

{{ update.InitiatingMessage.FormattedMessageTimestamp }}
@@ -176,7 +176,7 @@ const hasStateChanges = computed(() => {
- +
@@ -194,7 +194,7 @@ const hasStateChanges = computed(() => {
- +
From 49554777fb2dd077e73b76376222babb2237df95 Mon Sep 17 00:00:00 2001 From: Christian Date: Tue, 6 May 2025 20:26:36 -0600 Subject: [PATCH 06/16] improved loading of the body - and formatted xml Inspired by the one in MessageStore. Potential removal of duplication a --- .../messages2/SagaDiagram/MessageDataBox.vue | 43 +++++----- .../SagaDiagram/SagaDiagramParser.ts | 9 +- src/Frontend/src/stores/DataContainer.ts | 10 +++ src/Frontend/src/stores/MessageStore.ts | 8 +- src/Frontend/src/stores/SagaDiagramStore.ts | 82 ++++++------------- 5 files changed, 65 insertions(+), 87 deletions(-) create mode 100644 src/Frontend/src/stores/DataContainer.ts diff --git a/src/Frontend/src/components/messages2/SagaDiagram/MessageDataBox.vue b/src/Frontend/src/components/messages2/SagaDiagram/MessageDataBox.vue index 95c274187..4a1c2316b 100644 --- a/src/Frontend/src/components/messages2/SagaDiagram/MessageDataBox.vue +++ b/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(() => { - const type = props.messageData.type?.toLowerCase(); - return (type === "xml" ? "xml" : "json") as CodeLanguage; -}); +const body = computed(() => props.messageData.body.data.value || ""); @@ -104,6 +95,14 @@ const editorLanguage = computed(() => { font-style: italic; } +.message-data-box-text--unsupported { + display: inline-block; + width: 100%; + text-align: center; + color: #8a6d3b; + font-style: italic; +} + .message-data-loading { display: flex; justify-content: center; diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts b/src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts index 97ce52bda..9fe649c63 100644 --- a/src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts +++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts @@ -171,8 +171,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, + }, }; } diff --git a/src/Frontend/src/stores/DataContainer.ts b/src/Frontend/src/stores/DataContainer.ts new file mode 100644 index 000000000..80a0983e8 --- /dev/null +++ b/src/Frontend/src/stores/DataContainer.ts @@ -0,0 +1,10 @@ +/** + * A container for data with loading states. + * Used to track loading, error, and not found states for data fetched from APIs. + */ +export interface DataContainer { + loading?: boolean; + failed_to_load?: boolean; + not_found?: boolean; + data: T; +} diff --git a/src/Frontend/src/stores/MessageStore.ts b/src/Frontend/src/stores/MessageStore.ts index 808e5a935..c3d1ee19d 100644 --- a/src/Frontend/src/stores/MessageStore.ts +++ b/src/Frontend/src/stores/MessageStore.ts @@ -11,13 +11,7 @@ import moment from "moment/moment"; import { parse, stringify } from "lossless-json"; import xmlFormat from "xml-formatter"; import { useArchiveMessage, useRetryMessages, useUnarchiveMessage } from "@/composables/serviceFailedMessage"; - -interface DataContainer { - loading?: boolean; - failed_to_load?: boolean; - not_found?: boolean; - data: T; -} +import { DataContainer } from "./DataContainer"; interface Model { id?: string; diff --git a/src/Frontend/src/stores/SagaDiagramStore.ts b/src/Frontend/src/stores/SagaDiagramStore.ts index 388a0f1ca..5fe665008 100644 --- a/src/Frontend/src/stores/SagaDiagramStore.ts +++ b/src/Frontend/src/stores/SagaDiagramStore.ts @@ -3,12 +3,13 @@ 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"; +import { DataContainer } from "./DataContainer"; 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(null); @@ -87,67 +88,38 @@ export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => { async function fetchSagaMessageData(message: SagaMessage): Promise { 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(" Date: Wed, 7 May 2025 18:27:09 -0600 Subject: [PATCH 07/16] changing the size of the maximized pop-up --- src/Frontend/src/components/MaximizableCodeEditor.vue | 4 ++-- src/Frontend/src/components/messages2/DiffViewer.vue | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Frontend/src/components/MaximizableCodeEditor.vue b/src/Frontend/src/components/MaximizableCodeEditor.vue index 8645d23f7..188c22e05 100644 --- a/src/Frontend/src/components/MaximizableCodeEditor.vue +++ b/src/Frontend/src/components/MaximizableCodeEditor.vue @@ -155,8 +155,8 @@ onBeforeUnmount(() => { .maximize-modal-content { background-color: white; - width: calc(100% - 40px); - height: calc(100% - 40px); + width: 95vw; + height: 90vh; border-radius: 4px; overflow: hidden; display: flex; diff --git a/src/Frontend/src/components/messages2/DiffViewer.vue b/src/Frontend/src/components/messages2/DiffViewer.vue index 5deb14fd6..5a2ee45a5 100644 --- a/src/Frontend/src/components/messages2/DiffViewer.vue +++ b/src/Frontend/src/components/messages2/DiffViewer.vue @@ -166,8 +166,8 @@ onBeforeUnmount(() => { .maximize-modal-content { background-color: white; - width: calc(100% - 40px); - height: calc(100% - 40px); + width: 95vw; + height: 90vh; border-radius: 4px; overflow: hidden; display: flex; From 3145dbf707dcc4bbe3d138de265e5af663e5a67a Mon Sep 17 00:00:00 2001 From: Christian Date: Wed, 7 May 2025 22:38:33 -0600 Subject: [PATCH 08/16] rebase --- .../src/components/messages2/SagaDiagram/SagaDiagramParser.ts | 2 +- src/Frontend/src/stores/SagaDiagramStore.ts | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts b/src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts index 9fe649c63..437c4a8b3 100644 --- a/src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts +++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts @@ -16,7 +16,7 @@ export interface InitiatingMessageViewModel { IsSagaTimeoutMessage: boolean; FormattedMessageTimestamp: string; IsEventMessage: boolean; - MessageData: SagaMessageDataItem[]; + MessageData: SagaMessageData; HasRelatedTimeoutRequest?: boolean; MessageId: string; } diff --git a/src/Frontend/src/stores/SagaDiagramStore.ts b/src/Frontend/src/stores/SagaDiagramStore.ts index 5fe665008..a76cf79b8 100644 --- a/src/Frontend/src/stores/SagaDiagramStore.ts +++ b/src/Frontend/src/stores/SagaDiagramStore.ts @@ -6,6 +6,7 @@ import Message from "@/resources/Message"; import { parse, stringify } from "lossless-json"; import xmlFormat from "xml-formatter"; import { DataContainer } from "./DataContainer"; +import { useMessageStore } from "./MessageStore"; export interface SagaMessageData { message_id: string; @@ -24,11 +25,8 @@ export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => { const scrollToTimeoutRequest = ref(false); const scrollToTimeout = ref(false); const MessageBodyEndpoint = "messages/{0}/body"; - - // Get message store to watch for changes const messageStore = useMessageStore(); - // Watch for message_id changes in the MessageStore and update selectedMessageId watch( () => messageStore.state.data.message_id, (newMessageId) => { From afdb9a08ac1fa13d286d78415dde4a1969ec9cce Mon Sep 17 00:00:00 2001 From: Christian Date: Wed, 7 May 2025 23:05:08 -0600 Subject: [PATCH 09/16] Handle the display of empty bodies --- .../messages2/SagaDiagram/MessageDataBox.vue | 5 +--- src/Frontend/src/stores/SagaDiagramStore.ts | 25 +++++++++++++++---- 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/src/Frontend/src/components/messages2/SagaDiagram/MessageDataBox.vue b/src/Frontend/src/components/messages2/SagaDiagram/MessageDataBox.vue index 4a1c2316b..59be97c5b 100644 --- a/src/Frontend/src/components/messages2/SagaDiagram/MessageDataBox.vue +++ b/src/Frontend/src/components/messages2/SagaDiagram/MessageDataBox.vue @@ -42,10 +42,7 @@ const body = computed(() => props.messageData.body.data.value || "");
An error occurred while retrieving the message data
-
- Message body not found -
-
+
Empty
diff --git a/src/Frontend/src/stores/SagaDiagramStore.ts b/src/Frontend/src/stores/SagaDiagramStore.ts index a76cf79b8..bbd06884b 100644 --- a/src/Frontend/src/stores/SagaDiagramStore.ts +++ b/src/Frontend/src/stores/SagaDiagramStore.ts @@ -105,11 +105,13 @@ export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => { result.body.data.content_type = contentType ?? "text/plain"; result.body.data.value = await response.text(); - if (contentType === "application/json") { - result.body.data.value = stringify(parse(result.body.data.value), null, 2) ?? result.body.data.value; - } - if (contentType === "text/xml") { - result.body.data.value = xmlFormat(result.body.data.value, { indentation: " ", collapseContent: true }); + if (contentType === "application/json" && result.body.data.value) { + // Only format non-empty JSON objects + result.body.data.value = result.body.data.value !== "{}" ? (stringify(parse(result.body.data.value), null, 2) ?? result.body.data.value) : ""; + } else if (contentType === "text/xml" && result.body.data.value) { + // Format XML if it has content in the root element + const xmlRootElement = getContentOfXmlRootElement(result.body.data.value); + result.body.data.value = xmlRootElement ? xmlFormat(result.body.data.value, { indentation: " ", collapseContent: true }) : ""; } } catch { result.body.failed_to_load = true; @@ -120,6 +122,19 @@ export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => { return result; } + function getContentOfXmlRootElement(xml: string): string { + const parser = new DOMParser(); + const doc = parser.parseFromString(xml, "text/xml"); + const rootElement = doc.documentElement; + if (rootElement) { + const rootElementText = rootElement.textContent; + if (rootElementText) { + return rootElementText; + } + } + return ""; + } + async function getAuditMessages(sagaId: string) { try { const response = await useFetchFromServiceControl(`messages/search?q=${sagaId}`); From fc00a8dd29a4fc27b0d4642bf9515ac863d26ad1 Mon Sep 17 00:00:00 2001 From: Christian Date: Thu, 8 May 2025 00:32:59 -0600 Subject: [PATCH 10/16] taking custom css outside of maximizableCodeEditor --- .../src/components/MaximizableCodeEditor.vue | 31 ++++------------- .../messages2/SagaDiagram/MessageDataBox.vue | 33 +++++++++++-------- .../messages2/SagaDiagram/SagaUpdateNode.vue | 13 +++++++- 3 files changed, 38 insertions(+), 39 deletions(-) diff --git a/src/Frontend/src/components/MaximizableCodeEditor.vue b/src/Frontend/src/components/MaximizableCodeEditor.vue index 188c22e05..ed87c7fd8 100644 --- a/src/Frontend/src/components/MaximizableCodeEditor.vue +++ b/src/Frontend/src/components/MaximizableCodeEditor.vue @@ -65,17 +65,17 @@ onBeforeUnmount(() => {
- - -
@@ -121,25 +121,6 @@ onBeforeUnmount(() => { opacity: 1; } -:deep(.wrapper.maximazable-code-editor--inline-instance) { - border: none; - border-radius: 0; - margin-top: 0; -} - -:deep(.wrapper.maximazable-code-editor--inline-instance .toolbar) { - border: none; - border-radius: 0; - background-color: transparent; - padding: 0; - margin-bottom: 0; -} - -:deep(.wrapper.maximazable-code-editor--inline-instance .cm-editor) { - /* Override any borders from the default theme */ - border: none; -} - .maximize-modal { position: fixed; top: 0; diff --git a/src/Frontend/src/components/messages2/SagaDiagram/MessageDataBox.vue b/src/Frontend/src/components/messages2/SagaDiagram/MessageDataBox.vue index 59be97c5b..802898d46 100644 --- a/src/Frontend/src/components/messages2/SagaDiagram/MessageDataBox.vue +++ b/src/Frontend/src/components/messages2/SagaDiagram/MessageDataBox.vue @@ -4,20 +4,8 @@ import { storeToRefs } from "pinia"; import LoadingSpinner from "@/components/LoadingSpinner.vue"; import MaximizableCodeEditor from "@/components/MaximizableCodeEditor.vue"; import { computed } from "vue"; -import { EditorView } from "@codemirror/view"; import parseContentType from "@/composables/contentTypeParser"; -const messageDataBoxTheme = EditorView.baseTheme({ - ".maximazable-code-editor--inline-instance .cm-editor": { - fontFamily: "monospace", - fontSize: "0.75rem", - backgroundColor: "#ffffff", - }, - ".maximazable-code-editor--inline-instance .cm-scroller": { - backgroundColor: "#ffffff", - }, -}); - const props = defineProps<{ messageData: SagaMessageData; maximizedTitle?: string; @@ -46,7 +34,7 @@ const body = computed(() => props.messageData.body.data.value || ""); Empty
- +
Message body cannot be displayed because content type "{{ messageData.body.data.content_type }}" is not supported. @@ -110,4 +98,23 @@ const body = computed(() => props.messageData.body.data.value || ""); padding: 1rem; justify-content: center; } +.message-data-box-content :deep(.wrapper.maximazable-code-editor--inline-instance) { + border: none; + border-radius: 0; + margin-top: 0; + font-size: 0.75rem; +} + +.message-data-box-content :deep(.wrapper.maximazable-code-editor--inline-instance .toolbar) { + border: none; + border-radius: 0; + background-color: transparent; + padding: 0; + margin-bottom: 0; +} + +.message-data-box-content :deep(.wrapper.maximazable-code-editor--inline-instance .cm-editor) { + /* Override any borders from the default theme */ + border: none; +} diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue index c9b3a8d76..306d749be 100644 --- a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue +++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue @@ -369,7 +369,6 @@ const hasStateChanges = computed(() => { padding: 0.2rem; background-color: #ffffff; border: solid 1px #cccccc; - font-size: 0.75rem; } .message-data--active { @@ -428,7 +427,19 @@ const hasStateChanges = computed(() => { border: none; background-color: #f2f2f2; margin-top: 0; + font-size: 0.75rem; } +.json-container :deep(.wrapper.maximazable-code-editor--inline-instance .toolbar) { + border: none; + border-radius: 0; + background-color: transparent; + padding: 0; + margin-bottom: 0; +} + +/* :deep(.maximazable-code-editor--inline-instance .cm-scroller) { + background-color: #f2f2f2; +} */ .no-changes-message { padding: 1rem; From 1616afaec9907e6a000900057f25312d177e8a62 Mon Sep 17 00:00:00 2001 From: Christian Date: Thu, 8 May 2025 00:44:07 -0600 Subject: [PATCH 11/16] Update src/Frontend/src/components/MaximizableCodeEditor.vue Co-authored-by: John Simons --- src/Frontend/src/components/MaximizableCodeEditor.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Frontend/src/components/MaximizableCodeEditor.vue b/src/Frontend/src/components/MaximizableCodeEditor.vue index ed87c7fd8..38904f78c 100644 --- a/src/Frontend/src/components/MaximizableCodeEditor.vue +++ b/src/Frontend/src/components/MaximizableCodeEditor.vue @@ -85,7 +85,7 @@ onBeforeUnmount(() => {
{{ modalTitle }} -
From 475f3f5b13241d6096dfe14628e95bbc201d523d Mon Sep 17 00:00:00 2001 From: Christian Date: Thu, 8 May 2025 01:07:58 -0600 Subject: [PATCH 12/16] Update src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue Co-authored-by: Phil Bastian <155411597+PhilBastian@users.noreply.github.com> --- .../src/components/messages2/SagaDiagram/SagaUpdateNode.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue index 306d749be..2a46f5616 100644 --- a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue +++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue @@ -194,7 +194,7 @@ const hasStateChanges = computed(() => {
- +
From 7dda80d314ccda7d4168d6066350db26ec92be8d Mon Sep 17 00:00:00 2001 From: Christian Date: Thu, 8 May 2025 00:42:41 -0600 Subject: [PATCH 13/16] adding tippy --- src/Frontend/src/components/MaximizableCodeEditor.vue | 2 +- .../SagaDiagram/SagaOutgoingTimeoutMessage.vue | 2 +- .../messages2/SagaDiagram/SagaUpdateNode.vue | 11 ++++++++++- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/Frontend/src/components/MaximizableCodeEditor.vue b/src/Frontend/src/components/MaximizableCodeEditor.vue index 38904f78c..91cf615d3 100644 --- a/src/Frontend/src/components/MaximizableCodeEditor.vue +++ b/src/Frontend/src/components/MaximizableCodeEditor.vue @@ -72,7 +72,7 @@ onBeforeUnmount(() => {