Re-introduce back link

Author: johnsimons

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

@@ -9,9 +9,11 @@ import { useFormatTime } from "@/composables/formatter";
 import RefreshConfig from "../RefreshConfig.vue";
 import ItemsPerPage from "../ItemsPerPage.vue";
 import PaginationStrip from "../PaginationStrip.vue";
+import { useRoute } from "vue-router";
 
 const store = useAuditStore();
 const { messages, sortByInstances, itemsPerPage, selectedPage, totalCount } = storeToRefs(store);
+const route = useRoute();
 
 function statusToName(messageStatus: MessageStatus) {
   switch (messageStatus) {
@@ -99,10 +101,15 @@ function formatDotNetTimespan(timespan: string) {
               <template #content>
                 <p :style="{ overflowWrap: 'break-word' }">{{ message.message_id }}</p>
               </template>
-              <RouterLink v-if="message.status === MessageStatus.Successful" class="hackToPreventSafariFromShowingTooltip" aria-label="details-link" :to="{ path: routeLinks.messages.successMessage.link(message.message_id, message.id) }">
+              <RouterLink
+                v-if="message.status === MessageStatus.Successful"
+                class="hackToPreventSafariFromShowingTooltip"
+                aria-label="details-link"
+                :to="{ path: routeLinks.messages.successMessage.link(message.message_id, message.id), query: { back: route.path } }"
+              >
                 {{ message.message_id }}
               </RouterLink>
-              <RouterLink v-else class="hackToPreventSafariFromShowingTooltip" aria-label="details-link" :to="{ path: routeLinks.messages.failedMessage.link(message.id) }">
+              <RouterLink v-else class="hackToPreventSafariFromShowingTooltip" aria-label="details-link" :to="{ path: routeLinks.messages.failedMessage.link(message.id), query: { back: route.path } }">
                 {{ message.message_id }}
               </RouterLink>
             </tippy>

src/Frontend/src/components/messages2/FlowDiagram.vue

@@ -9,6 +9,7 @@ import { Controls } from "@vue-flow/controls";
 import { useMessageStore } from "@/stores/MessageStore";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import { storeToRefs } from "pinia";
+import { useRoute } from "vue-router";
 
 enum MessageType {
   Event = "Event message",
@@ -42,6 +43,7 @@ const nodeSpacingY = 200;
 
 const store = useMessageStore();
 const { state } = storeToRefs(store);
+const route = useRoute();
 
 async function getConversation(conversationId: string) {
   await store.loadConversation(conversationId);
@@ -203,8 +205,8 @@ function typeIcon(type: MessageType) {
             <i class="fa" :class="typeIcon(data.type)" :title="data.type" />
             <div class="lead right-side-ellipsis" :title="data.nodeName">
               <strong>
-                <RouterLink v-if="data.isError" :to="{ path: routeLinks.messages.failedMessage.link(data.id) }">{{ data.nodeName }}</RouterLink>
-                <RouterLink v-else :to="{ path: routeLinks.messages.successMessage.link(data.messageId, data.id) }">{{ data.nodeName }}</RouterLink>
+                <RouterLink v-if="data.isError" :to="{ path: routeLinks.messages.failedMessage.link(data.id), query: { back: route.path } }">{{ data.nodeName }}</RouterLink>
+                <RouterLink v-else :to="{ path: routeLinks.messages.successMessage.link(data.messageId, data.id), query: { back: route.path } }">{{ data.nodeName }}</RouterLink>
               </strong>
             </div>
             <span class="time-sent">

src/Frontend/src/components/messages2/MessageView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, watch } from "vue";
-import { RouterLink, useRoute } from "vue-router";
+import { computed, onMounted, ref, watch } from "vue";
+import { RouterLink, useRoute, useRouter } from "vue-router";
 import NoData from "../NoData.vue";
 import TimeSince from "../TimeSince.vue";
 import FlowDiagram from "./FlowDiagram.vue";
@@ -28,6 +28,7 @@ const isError = computed(() => messageId.value === undefined);
 const isMassTransitConnected = useIsMassTransitConnected();
 const store = useMessageStore();
 const { state } = storeToRefs(store);
+const backLink = ref<string>(routeLinks.failedMessage.failedMessages.link);
 const tabs = computed(() => {
   const currentTabs = [
     {
@@ -76,6 +77,13 @@ watch(
   },
   { immediate: true }
 );
+
+onMounted(() => {
+  const back = useRouter().currentRoute.value.query.back as string;
+  if (back) {
+    backLink.value = back;
+  }
+});
 </script>
 
 <template>
@@ -88,6 +96,7 @@ watch(
         <template v-else>
           <div class="row">
             <div class="col-sm-12 no-side-padding">
+              <RouterLink :to="backLink"><i class="fa fa-chevron-left"></i> Back</RouterLink>
               <div class="active break group-title">
                 <h1 class="message-type-title">{{ state.data.message_type }}</h1>
               </div>
@@ -111,7 +120,7 @@ watch(
                 <template v-if="state.data.failure_metadata.edited">
                   <MetadataLabel tooltip="Message was edited" type="info" text="Edited" />
                   <span v-if="state.data.failure_metadata.edit_of" class="metadata metadata-link">
-                    <i class="fa fa-history"></i> <RouterLink :to="{ path: routeLinks.messages.failedMessage.link(state.data.failure_metadata.edit_of) }">View previous version</RouterLink>
+                    <i class="fa fa-history"></i> <RouterLink :to="{ path: routeLinks.messages.failedMessage.link(state.data.failure_metadata.edit_of), query: { back: backLink } }">View previous version</RouterLink>
                   </span>
                 </template>
                 <span v-if="state.data.failure_metadata.time_of_failure" class="metadata"><i class="fa fa-clock-o"></i> Failed: <time-since :date-utc="state.data.failure_metadata.time_of_failure"></time-since></span>