From e7b0899b53c2d9806f8bae738715e698d501d2a3 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Wed, 30 Apr 2025 10:28:27 +1000
Subject: [PATCH 1/2] Fix reset original body

A few small other fixes
---
 src/Frontend/src/components/CodeEditor.vue    | 14 ++++-
 .../failedmessages/EditRetryDialog2.vue       | 59 ++++++++++---------
 .../messages2/EditAndRetryButton.vue          |  4 +-
 .../messages2/FlowDiagram/FlowDiagram.vue     |  4 +-
 .../messages2/RetryMessageButton.vue          |  2 +-
 src/Frontend/src/stores/MessageStore.ts       | 18 +++---
 .../src/stores/SequenceDiagramStore.ts        |  8 +--
 7 files changed, 60 insertions(+), 49 deletions(-)

diff --git a/src/Frontend/src/components/CodeEditor.vue b/src/Frontend/src/components/CodeEditor.vue
index 15d825466..7894aee13 100644
--- a/src/Frontend/src/components/CodeEditor.vue
+++ b/src/Frontend/src/components/CodeEditor.vue
@@ -51,8 +51,12 @@ const extensions = computed(() => {
 
 <template>
   <div class="wrapper" :aria-label="ariaLabel" :class="css">
-    <div v-if="props.showCopyToClipboard" class="toolbar">
-      <CopyToClipboard :value="code" />
+    <div v-if="props.showCopyToClipboard || $slots.toolbarLeft || $slots.toolbarRight" class="toolbar">
+      <div><slot name="toolbarLeft"></slot></div>
+      <div>
+        <slot name="toolbarRight"></slot>
+        <CopyToClipboard class="clipboard" v-if="props.showCopyToClipboard" :value="code" />
+      </div>
     </div>
     <CodeMirror v-model="code" :extensions="extensions" :basic="props.showGutter" :minimal="!props.showGutter" :readonly="props.readOnly" :gutter="!props.readOnly" :wrap="true"></CodeMirror>
   </div>
@@ -76,6 +80,10 @@ const extensions = computed(() => {
   margin-bottom: 0.5rem;
   display: flex;
   flex-direction: row;
-  justify-content: end;
+  justify-content: space-between;
+  align-items: center;
+}
+.clipboard {
+  margin-left: 0.5rem;
 }
 </style>
diff --git a/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue b/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue
index 76c5283eb..b74911b94 100644
--- a/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue
+++ b/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue
@@ -9,6 +9,7 @@ import CodeEditor from "@/components/CodeEditor.vue";
 import { useMessageStore } from "@/stores/MessageStore";
 import { storeToRefs } from "pinia";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
+import debounce from "lodash/debounce";
 
 interface HeaderWithEditing extends Header {
   isLocked: boolean;
@@ -41,28 +42,32 @@ const localMessage = ref<LocalMessageState>({
   isBodyEmpty: false,
   isContentTypeSupported: false,
   bodyContentType: undefined,
-  bodyUnavailable: true,
+  bodyUnavailable: false,
   isEvent: false,
   retried: false,
   headers: [],
   messageBody: "",
 });
-let origMessageBody: string;
-
 const showEditAndRetryConfirmation = ref(false);
 const showCancelConfirmation = ref(false);
 const showEditRetryGenericError = ref(false);
 const store = useMessageStore();
 const { state, headers, body, edit_and_retry_config } = storeToRefs(store);
 const id = computed(() => state.value.data.id ?? "");
-const messageBody = computed(() => body.value.data.value);
+const uneditedMessageBody = computed(() => body.value.data.value ?? "");
+const regExToPruneLineEndings = new RegExp(/[\n\r]*/, "g");
+const debounceBodyUpdate = debounce((value: string) => {
+  const newValue = value.replaceAll(regExToPruneLineEndings, "");
+  localMessage.value.isBodyChanged = newValue !== uneditedMessageBody.value.replaceAll(regExToPruneLineEndings, "");
+  localMessage.value.isBodyEmpty = newValue === "";
+}, 1000);
 
-watch(messageBody, (newValue) => {
-  if (newValue !== origMessageBody) {
-    localMessage.value.isBodyChanged = true;
+watch(
+  () => localMessage.value.messageBody,
+  (newValue) => {
+    debounceBodyUpdate(newValue);
   }
-  localMessage.value.isBodyEmpty = newValue === "";
-});
+);
 
 function close() {
   emit("cancel");
@@ -87,7 +92,7 @@ function confirmCancel() {
 }
 
 function resetBodyChanges() {
-  localMessage.value.messageBody = origMessageBody;
+  localMessage.value.messageBody = uneditedMessageBody.value;
   localMessage.value.isBodyChanged = false;
 }
 
@@ -113,7 +118,6 @@ function initializeMessageBodyAndHeaders() {
     return header?.value;
   }
 
-  origMessageBody = body.value.data.value ?? "";
   const local = <LocalMessageState>{
     isBodyChanged: false,
     isBodyEmpty: false,
@@ -211,15 +215,22 @@ onMounted(() => {
                           </tr>
                         </tbody>
                       </table>
-                      <div role="tabpanel" v-if="panel === 2 && !localMessage.bodyUnavailable" style="height: calc(100% - 260px)">
-                        <div style="margin-top: 1.25rem">
-                          <LoadingSpinner v-if="body.loading" />
-                          <CodeEditor v-else aria-label="message body" :read-only="!localMessage.isContentTypeSupported" v-model="localMessage.messageBody" :language="localMessage.language" :show-gutter="true"></CodeEditor>
+                      <template v-if="panel === 2">
+                        <div role="tabpanel" v-if="!localMessage.bodyUnavailable">
+                          <div style="margin-top: 1.25rem">
+                            <LoadingSpinner v-if="body.loading" />
+                            <CodeEditor v-else aria-label="message body" :read-only="!localMessage.isContentTypeSupported" v-model="localMessage.messageBody" :language="localMessage.language" :show-gutter="true">
+                              <template #toolbarLeft>
+                                <span class="empty-error" v-if="localMessage.isBodyEmpty"><i class="fa fa-exclamation-triangle"></i> Message body cannot be empty</span>
+                              </template>
+                              <template #toolbarRight>
+                                <button v-if="localMessage.isBodyChanged" type="button" class="btn btn-secondary btn-sm" @click="resetBodyChanges"><i class="fa fa-undo"></i> Reset changes</button>
+                              </template>
+                            </CodeEditor>
+                          </div>
                         </div>
-                        <span class="empty-error" v-if="localMessage.isBodyEmpty"><i class="fa fa-exclamation-triangle"></i> Message body cannot be empty</span>
-                        <span class="reset-body" v-if="localMessage.isBodyChanged"><i class="fa fa-undo" v-tippy="`Reset changes`"></i> <a @click="resetBodyChanges()" href="javascript:void(0)">Reset changes</a></span>
-                        <div class="alert alert-info" v-if="panel === 2 && localMessage.bodyUnavailable">{{ localMessage.bodyUnavailable }}</div>
-                      </div>
+                        <div role="tabpanel" class="alert alert-info" v-else>{{ localMessage.bodyUnavailable }}</div>
+                      </template>
                     </div>
                   </div>
                 </div>
@@ -267,14 +278,6 @@ onMounted(() => {
   margin-right: 20px;
 }
 
-.modal-msg-editor .reset-body {
-  color: #00a3c4;
-  font-weight: bold;
-  text-align: left;
-  margin-top: 15px;
-  display: inline-block;
-}
-
 .modal-msg-editor .reset-body a:hover {
   cursor: pointer;
 }
@@ -284,8 +287,6 @@ onMounted(() => {
 }
 
 .modal-msg-editor .empty-error {
-  float: right;
-  margin-top: 15px;
   color: #ce4844;
   font-weight: bold;
 }
diff --git a/src/Frontend/src/components/messages2/EditAndRetryButton.vue b/src/Frontend/src/components/messages2/EditAndRetryButton.vue
index 7a658bc84..95dd87d67 100644
--- a/src/Frontend/src/components/messages2/EditAndRetryButton.vue
+++ b/src/Frontend/src/components/messages2/EditAndRetryButton.vue
@@ -9,12 +9,12 @@ import { storeToRefs } from "pinia";
 import { FailedMessageStatus } from "@/resources/FailedMessage";
 
 const store = useMessageStore();
-const { state } = storeToRefs(store);
+const { state, edit_and_retry_config } = storeToRefs(store);
 const isConfirmDialogVisible = ref(false);
 
 const failureStatus = computed(() => state.value.data.failure_status);
 const isDisabled = computed(() => failureStatus.value.retried || failureStatus.value.archived || failureStatus.value.resolved);
-const isVisible = computed(() => store.edit_and_retry_config.enabled && state.value.data.status !== MessageStatus.Successful && state.value.data.status !== MessageStatus.ResolvedSuccessfully);
+const isVisible = computed(() => edit_and_retry_config.value.enabled && state.value.data.status !== MessageStatus.Successful && state.value.data.status !== MessageStatus.ResolvedSuccessfully);
 const handleConfirm = async () => {
   isConfirmDialogVisible.value = false;
 
diff --git a/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue b/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
index cbdfd2be9..614fe30ab 100644
--- a/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
+++ b/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
@@ -23,12 +23,12 @@ enum MessageType {
 }
 
 const store = useMessageStore();
-const { state } = storeToRefs(store);
+const { state, conversationData } = storeToRefs(store);
 
 async function getConversation(conversationId: string) {
   await store.loadConversation(conversationId);
 
-  return store.conversationData.data;
+  return conversationData.value.data;
 }
 
 class SagaInvocation {
diff --git a/src/Frontend/src/components/messages2/RetryMessageButton.vue b/src/Frontend/src/components/messages2/RetryMessageButton.vue
index b95d60f32..8c75a2fa6 100644
--- a/src/Frontend/src/components/messages2/RetryMessageButton.vue
+++ b/src/Frontend/src/components/messages2/RetryMessageButton.vue
@@ -14,7 +14,7 @@ const isConfirmDialogVisible = ref(false);
 
 const failureStatus = computed(() => state.value.data.failure_status);
 const isDisabled = computed(() => failureStatus.value.retried || failureStatus.value.archived || failureStatus.value.resolved);
-const isVisible = computed(() => store.edit_and_retry_config.enabled && state.value.data.status !== MessageStatus.Successful && state.value.data.status !== MessageStatus.ResolvedSuccessfully);
+const isVisible = computed(() => state.value.data.status !== MessageStatus.Successful && state.value.data.status !== MessageStatus.ResolvedSuccessfully);
 
 const handleConfirm = async () => {
   isConfirmDialogVisible.value = false;
diff --git a/src/Frontend/src/stores/MessageStore.ts b/src/Frontend/src/stores/MessageStore.ts
index b36c98ff4..808e5a935 100644
--- a/src/Frontend/src/stores/MessageStore.ts
+++ b/src/Frontend/src/stores/MessageStore.ts
@@ -1,5 +1,5 @@
-import { acceptHMRUpdate, defineStore } from "pinia";
-import { reactive, ref } from "vue";
+import { acceptHMRUpdate, defineStore, storeToRefs } from "pinia";
+import { computed, reactive, ref } from "vue";
 import Header from "@/resources/Header";
 import type EndpointDetails from "@/resources/EndpointDetails";
 import FailedMessage, { ExceptionDetails, FailedMessageStatus } from "@/resources/FailedMessage";
@@ -75,8 +75,12 @@ export const useMessageStore = defineStore("MessageStore", () => {
   const editRetryStore = useEditRetryStore();
   const configStore = useConfigurationStore();
 
-  editRetryStore.loadConfig();
-  configStore.loadConfig();
+  const { config: edit_and_retry_config } = storeToRefs(editRetryStore);
+  const { configuration } = storeToRefs(configStore);
+  const error_retention_period = computed(() => moment.duration(configuration.value?.data_retention?.error_retention_period).asHours());
+
+  // eslint-disable-next-line promise/catch-or-return,promise/prefer-await-to-then,promise/valid-params
+  Promise.all([editRetryStore.loadConfig(), configStore.loadConfig()]).then();
 
   function reset() {
     state.data = { failure_metadata: {}, failure_status: {}, dialog_status: {}, invoked_saga: {} };
@@ -126,7 +130,7 @@ export const useMessageStore = defineStore("MessageStore", () => {
       state.loading = false;
     }
 
-    const countdown = moment(state.data.failure_metadata.last_modified).add(error_retention_period, "hours");
+    const countdown = moment(state.data.failure_metadata.last_modified).add(error_retention_period.value, "hours");
     state.data.failure_status.delete_soon = countdown < moment();
     state.data.failure_metadata.deleted_in = countdown.format();
   }
@@ -298,13 +302,11 @@ export const useMessageStore = defineStore("MessageStore", () => {
     return exportString;
   }
 
-  const error_retention_period = moment.duration(configStore.configuration?.data_retention?.error_retention_period).asHours();
-
   return {
     headers,
     body,
     state,
-    edit_and_retry_config: editRetryStore.config,
+    edit_and_retry_config,
     reset,
     loadMessage,
     loadFailedMessage,
diff --git a/src/Frontend/src/stores/SequenceDiagramStore.ts b/src/Frontend/src/stores/SequenceDiagramStore.ts
index 259490dcc..228e3de31 100644
--- a/src/Frontend/src/stores/SequenceDiagramStore.ts
+++ b/src/Frontend/src/stores/SequenceDiagramStore.ts
@@ -27,7 +27,7 @@ export const Endpoint_Width = 260;
 
 export const useSequenceDiagramStore = defineStore("SequenceDiagramStore", () => {
   const messageStore = useMessageStore();
-  const { state } = storeToRefs(messageStore);
+  const { state, conversationData } = storeToRefs(messageStore);
   const router = useRouter();
 
   const startX = ref(Endpoint_Width / 2);
@@ -43,11 +43,11 @@ export const useSequenceDiagramStore = defineStore("SequenceDiagramStore", () =>
   const selectedId = computed(() => `${state.value.data.message_type ?? ""}(${state.value.data.id})`);
 
   watch(
-    () => messageStore.conversationData.data,
+    () => conversationData,
     (conversationData) => {
-      if (conversationData.length) {
+      if (conversationData.value.data.length) {
         startX.value = Endpoint_Width / 2;
-        const model = new ModelCreator(conversationData);
+        const model = new ModelCreator(conversationData.value.data);
         endpoints.value = model.endpoints;
         handlers.value = model.handlers;
         routes.value = model.routes;

From 648cacfff2aecf2f6ef94de38920b33e80f6612a Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Fri, 2 May 2025 10:42:24 +1000
Subject: [PATCH 2/2] Reduce dedup length so that dealy to disable button is
 minimal

---
 src/Frontend/src/components/failedmessages/EditRetryDialog2.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue b/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue
index b74911b94..5b1a38134 100644
--- a/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue
+++ b/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue
@@ -60,7 +60,7 @@ const debounceBodyUpdate = debounce((value: string) => {
   const newValue = value.replaceAll(regExToPruneLineEndings, "");
   localMessage.value.isBodyChanged = newValue !== uneditedMessageBody.value.replaceAll(regExToPruneLineEndings, "");
   localMessage.value.isBodyEmpty = newValue === "";
-}, 1000);
+}, 100);
 
 watch(
   () => localMessage.value.messageBody,