Fix reset original body

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>

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 === "";
+}, 100);
 
-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;
 }

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;
 

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 {

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;

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,

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;