Handling ignored EditRetry

Author: Christian

src/Frontend/src/components/failedmessages/EditIgnoredDialog.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+  close: [];
+}>();
+
+function closeDialog() {
+  emit("close");
+}
+</script>
+
+<template>
+  <section name="edit_ignored_dialog">
+    <div class="modal" style="z-index: 1050; display: block" role="dialog" aria-label="edit ignored">
+      <div class="modal-mask">
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="modal-header">
+              <div class="modal-title">
+                <h3>Edit Ignored</h3>
+              </div>
+            </div>
+            <div class="modal-body">
+              <p>This message retry was ignored because there had been another edit.</p>
+            </div>
+            <div class="modal-footer">
+              <button class="btn btn-primary" @click="closeDialog()">Ok</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+@import "@/components/modal.css";
+</style>

src/Frontend/src/components/failedmessages/EditRetryDialog.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from "vue";
-import { useRetryEditedMessage } from "@/composables/serviceFailedMessage";
 import MessageHeader from "./EditMessageHeader.vue";
 import type Header from "@/resources/Header";
 import parseContentType from "@/composables/contentTypeParser";
@@ -105,7 +104,7 @@ function removeHeadersMarkedAsRemoved() {
 async function retryEditedMessage() {
   removeHeadersMarkedAsRemoved();
   try {
-    await useRetryEditedMessage(id.value, localMessage);
+    await store.retryEditedMessage(id.value, localMessage);
     localMessage.value.retried = true;
     return emit("confirm");
   } catch {

src/Frontend/src/components/messages/EditAndRetryButton.vue

@@ -4,24 +4,31 @@ import { computed, ref } from "vue";
 import { useShowToast } from "@/composables/toast";
 import { TYPE } from "vue-toastification";
 import EditRetryDialog from "@/components/failedmessages/EditRetryDialog.vue";
+import EditIgnoredDialog from "@/components/failedmessages/EditIgnoredDialog.vue";
 import { MessageStatus } from "@/resources/Message";
 import { storeToRefs } from "pinia";
 import { FailedMessageStatus } from "@/resources/FailedMessage";
 import FAIcon from "@/components/FAIcon.vue";
 import { faPencil } from "@fortawesome/free-solid-svg-icons";
 
 const store = useMessageStore();
-const { state, edit_and_retry_config } = storeToRefs(store);
+const { state, edit_and_retry_config, editRetryResponse } = storeToRefs(store);
 const isConfirmDialogVisible = ref(false);
+const isEditIgnoredDialogVisible = 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(() => edit_and_retry_config.value.enabled && state.value.data.status !== MessageStatus.Successful && state.value.data.status !== MessageStatus.ResolvedSuccessfully);
+
 const handleConfirm = async () => {
   isConfirmDialogVisible.value = false;
 
-  const message = `Retrying the edited message ${state.value.data.id} ...`;
-  useShowToast(TYPE.INFO, "Info", message);
+  if (editRetryResponse.value?.edit_ignored) {
+    isEditIgnoredDialogVisible.value = true;
+  } else {
+    const message = `Retrying the edited message ${state.value.data.id} ...`;
+    useShowToast(TYPE.INFO, "Info", message);
+  }
   await store.pollForNextUpdate(FailedMessageStatus.Resolved);
 };
 
@@ -36,6 +43,7 @@ async function openDialog() {
     <button type="button" class="btn btn-default" aria-label="Edit & retry" :disabled="isDisabled" @click="openDialog"><FAIcon :icon="faPencil" class="icon" /> Edit & retry</button>
     <Teleport to="#modalDisplay">
       <EditRetryDialog v-if="isConfirmDialogVisible" @cancel="isConfirmDialogVisible = false" @confirm="handleConfirm"></EditRetryDialog>
+      <EditIgnoredDialog v-if="isEditIgnoredDialogVisible" @close="isEditIgnoredDialogVisible = false"></EditIgnoredDialog>
     </Teleport>
   </template>
 </template>

src/Frontend/src/composables/serviceFailedMessage.ts

@@ -2,6 +2,7 @@ import { usePatchToServiceControl, usePostToServiceControl } from "./serviceServ
 import type { Ref } from "vue";
 import { useIsSupported } from "@/composables/serviceSemVer";
 import { environment } from "@/composables/serviceServiceControl";
+import type EditRetryResponse from "@/resources/EditRetryResponse";
 
 export async function useUnarchiveMessage(ids: string[]) {
   const response = await usePatchToServiceControl("errors/unarchive/", ids);
@@ -28,7 +29,7 @@ export async function useRetryEditedMessage(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     headers: any[];
   }>
-) {
+): Promise<EditRetryResponse> {
   let headers = editedMessage.value.headers;
   if (useIsSupported(environment.sc_version, "5.2.0")) {
     headers = editedMessage.value.headers.reduce(
@@ -49,4 +50,6 @@ export async function useRetryEditedMessage(
   if (!response.ok) {
     throw new Error(response.statusText);
   }
+
+  return (await response.json()) as EditRetryResponse;
 }

src/Frontend/src/resources/EditRetryResponse.ts

@@ -0,0 +1,3 @@
+export default interface EditRetryResponse {
+  edit_ignored: boolean;
+}

src/Frontend/src/stores/MessageStore.ts

@@ -1,5 +1,5 @@
 import { acceptHMRUpdate, defineStore, storeToRefs } from "pinia";
-import { computed, reactive, ref } from "vue";
+import { computed, reactive, ref, type Ref } from "vue";
 import Header from "@/resources/Header";
 import type EndpointDetails from "@/resources/EndpointDetails";
 import FailedMessage, { ExceptionDetails, FailedMessageStatus } from "@/resources/FailedMessage";
@@ -10,8 +10,9 @@ import Message, { MessageStatus } from "@/resources/Message";
 import moment from "moment/moment";
 import { parse, stringify } from "lossless-json";
 import xmlFormat from "xml-formatter";
-import { useArchiveMessage, useRetryMessages, useUnarchiveMessage } from "@/composables/serviceFailedMessage";
+import { useArchiveMessage, useRetryMessages, useUnarchiveMessage, useRetryEditedMessage } from "@/composables/serviceFailedMessage";
 import { DataContainer } from "./DataContainer";
+import type EditRetryResponse from "@/resources/EditRetryResponse";
 
 interface Model {
   id?: string;
@@ -63,6 +64,7 @@ export const useMessageStore = defineStore("MessageStore", () => {
   const headers = ref<DataContainer<Header[]>>({ data: [] });
   const body = ref<DataContainer<{ value?: string; content_type?: string; no_content?: boolean }>>({ data: {} });
   const state = reactive<DataContainer<Model>>({ data: { failure_metadata: {}, failure_status: {}, dialog_status: {}, invoked_saga: {} } });
+  const editRetryResponse = ref<EditRetryResponse | null>(null);
   let bodyLoadedId = "";
   let conversationLoadedId = "";
   const conversationData = ref<DataContainer<Message[]>>({ data: [] });
@@ -83,6 +85,7 @@ export const useMessageStore = defineStore("MessageStore", () => {
     bodyLoadedId = "";
     conversationLoadedId = "";
     conversationData.value.data = [];
+    editRetryResponse.value = null;
   }
 
   async function loadFailedMessage(id: string) {
@@ -248,6 +251,18 @@ export const useMessageStore = defineStore("MessageStore", () => {
     }
   }
 
+  async function retryEditedMessage(
+    id: string,
+    editedMessage: Ref<{
+      messageBody: string;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      headers: any[];
+    }>
+  ): Promise<void> {
+    const response = await useRetryEditedMessage(id, editedMessage);
+    editRetryResponse.value = response;
+  }
+
   async function pollForNextUpdate(status: FailedMessageStatus) {
     if (!state.data.id) {
       return;
@@ -307,6 +322,7 @@ export const useMessageStore = defineStore("MessageStore", () => {
     body,
     state,
     edit_and_retry_config,
+    editRetryResponse,
     reset,
     loadMessage,
     loadFailedMessage,
@@ -318,6 +334,7 @@ export const useMessageStore = defineStore("MessageStore", () => {
     retryMessage,
     conversationData,
     pollForNextUpdate,
+    retryEditedMessage,
   };
 });