Adding ability to load successfully processed messages using the common MessageView component

src/Frontend/src/components/EventLogItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useRoute, useRouter } from "vue-router";
+import { useRouter } from "vue-router";
 import TimeSince from "../components/TimeSince.vue";
 import type EventLogItem from "@/resources/EventLogItem";
 // eslint-disable-next-line no-duplicate-imports
@@ -8,7 +8,6 @@ import routeLinks from "@/router/routeLinks";
 
 defineProps<{ eventLogItem: EventLogItem }>();
 const router = useRouter();
-const route = useRoute();
 
 function navigateToEvent(eventLogItem: EventLogItem) {
   switch (eventLogItem.category) {
@@ -27,7 +26,7 @@ function navigateToEvent(eventLogItem: EventLogItem) {
     case "MessageFailures":
       if (eventLogItem.related_to?.length && eventLogItem.related_to[0].search("message") > 0) {
         const messageId = eventLogItem.related_to[0].substring(9);
-        router.push({ path: routeLinks.messages.message.link(messageId), query: { back: route.path } });
+        router.push({ path: routeLinks.messages.failedMessage.link(messageId) });
       } else {
         router.push(routeLinks.failedMessage.root);
       }

src/Frontend/src/components/LoadingSpinner.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="text-center">
+    <div class="spinner-border" role="status">
+      <span class="visually-hidden">Loading...</span>
+    </div>
+  </div>
+</template>

src/Frontend/src/components/TabsLayout.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref, type Component, type DefineComponent, shallowRef } from "vue";
+
+interface Tab {
+  text: string;
+  component: Component | DefineComponent;
+}
+
+const props = defineProps<{ tabs: Tab[] }>();
+const activePanel = ref(0);
+const activeComponent = shallowRef(props.tabs[0].component);
+
+function togglePanel(panelIndex: number) {
+  activePanel.value = panelIndex;
+  activeComponent.value = props.tabs[panelIndex].component;
+}
+</script>
+
+<template>
+  <div class="nav tabs msg-tabs">
+    <h5 :class="{ active: activePanel === index }" class="nav-item" @click.prevent="togglePanel(index)" v-for="(tab, index) in props.tabs" :key="tab.text">
+      <a href="#">{{ tab.text }}</a>
+    </h5>
+  </div>
+  <keep-alive>
+    <component v-bind:is="activeComponent"></component>
+  </keep-alive>
+</template>
+
+<style scoped></style>

src/Frontend/src/components/audit/AuditList.vue

@@ -2,7 +2,6 @@
 import routeLinks from "@/router/routeLinks";
 import { ColumnNames, useAuditStore } from "@/stores/AuditStore";
 import { storeToRefs } from "pinia";
-import { useRoute } from "vue-router";
 import SortableColumn from "../SortableColumn.vue";
 import { MessageStatus } from "@/resources/Message";
 import moment from "moment";
@@ -11,7 +10,6 @@ import RefreshConfig from "../RefreshConfig.vue";
 import ItemsPerPage from "../ItemsPerPage.vue";
 import PaginationStrip from "../PaginationStrip.vue";
 
-const route = useRoute();
 const store = useAuditStore();
 const { messages, sortByInstances, itemsPerPage, selectedPage, totalCount } = storeToRefs(store);
 
@@ -101,7 +99,10 @@ function formatDotNetTimespan(timespan: string) {
               <template #content>
                 <p :style="{ overflowWrap: 'break-word' }">{{ message.message_id }}</p>
               </template>
-              <RouterLink class="hackToPreventSafariFromShowingTooltip" aria-label="details-link" :to="{ path: routeLinks.messages.message.link(message.id), query: { back: route.path } }">
+              <RouterLink v-if="message.status === MessageStatus.Successful" class="hackToPreventSafariFromShowingTooltip" aria-label="details-link" :to="{ path: routeLinks.messages.successMessage.link(message.message_id, message.id) }">
+                {{ message.message_id }}
+              </RouterLink>
+              <RouterLink v-else class="hackToPreventSafariFromShowingTooltip" aria-label="details-link" :to="{ path: routeLinks.messages.failedMessage.link(message.id) }">
                 {{ message.message_id }}
               </RouterLink>
             </tippy>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from "vue";
-import { useRetryEditedMessage } from "../../composables/serviceFailedMessage";
+import { useRetryEditedMessage } from "@/composables/serviceFailedMessage";
 import MessageHeader from "./EditMessageHeader.vue";
 import { EditAndRetryConfig } from "@/resources/Configuration";
 import type Header from "@/resources/Header";
@@ -65,11 +65,7 @@ watch(messageBody, (newValue) => {
   if (newValue !== origMessageBody) {
     localMessage.value.isBodyChanged = true;
   }
-  if (newValue === "") {
-    localMessage.value.isBodyEmpty = true;
-  } else {
-    localMessage.value.isBodyEmpty = false;
-  }
+  localMessage.value.isBodyEmpty = newValue === "";
 });
 
 function close() {