Merge pull request #2330 from Particular/john/back-link

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/FlowDiagram.vue

@@ -9,6 +9,7 @@ import { ControlButton, Controls } from "@vue-flow/controls";
 import { useMessageStore } from "@/stores/MessageStore.ts";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import { storeToRefs } from "pinia";
+import { useRouter } from "vue-router";
 import EndpointDetails from "@/resources/EndpointDetails.ts";
 import { hexToCSSFilter } from "hex-to-css-filter";
 import TextEllipses from "@/components/TextEllipses.vue";
@@ -193,8 +194,14 @@ const nodes = ref<Node[]>([]);
 const edges = ref<DefaultEdge[]>([]);
 const { layout } = useLayout();
 const { fitView } = useVueFlow();
+const backLink = ref<string>(routeLinks.failedMessage.failedMessages.link);
 
 onMounted(async () => {
+  const back = useRouter().currentRoute.value.query.back as string;
+  if (back) {
+    backLink.value = back;
+  }
+
   if (!state.value.data.conversation_id) return;
 
   const messages = await getConversation(state.value.data.conversation_id);
@@ -244,8 +251,8 @@ const errorColor = hexToCSSFilter("#be514a").filter;
             <i class="fa" :class="{ 'pa-flow-timeout': data.isTimeout, 'pa-flow-command': data.isCommand, 'pa-flow-event': data.isEvent }" v-tippy="data.type" />
             <div class="lead">
               <strong>
-                <RouterLink v-if="data.isError" :to="{ path: routeLinks.messages.failedMessage.link(id) }"><TextEllipses style="width: 204px" :text="data.label" ellipses-style="LeftSide" /></RouterLink>
-                <RouterLink v-else :to="{ path: routeLinks.messages.successMessage.link(data.messageId, id) }"><TextEllipses style="width: 204px" :text="data.label" ellipses-style="LeftSide" /></RouterLink>
+                <RouterLink v-if="data.isError" :to="{ path: routeLinks.messages.failedMessage.link(id), query: { back: backLink } }"><TextEllipses style="width: 204px" :text="data.label" ellipses-style="LeftSide" /></RouterLink>
+                <RouterLink v-else :to="{ path: routeLinks.messages.successMessage.link(data.messageId, id), query: { back: backLink } }"><TextEllipses style="width: 204px" :text="data.label" ellipses-style="LeftSide" /></RouterLink>
               </strong>
             </div>
             <i v-if="data.isError" class="fa pa-flow-failed" :style="id !== store.state.data.id ? { filter: errorColor } : {}" />

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/FlowDiagram.vue";
@@ -29,6 +29,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 = [
     {
@@ -78,6 +79,13 @@ watch(
   { immediate: true }
 );
 const endpointColor = hexToCSSFilter("#929E9E").filter;
+
+onMounted(() => {
+  const back = useRouter().currentRoute.value.query.back as string;
+  if (back) {
+    backLink.value = back;
+  }
+});
 </script>
 
 <template>
@@ -89,6 +97,7 @@ const endpointColor = hexToCSSFilter("#929E9E").filter;
         <LoadingOverlay v-if="state.loading ?? false" />
         <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>
@@ -112,7 +121,7 @@ const endpointColor = hexToCSSFilter("#929E9E").filter;
               <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>
@@ -173,10 +182,6 @@ button img {
   width: 17px;
 }
 
-.msg-tabs {
-  margin-bottom: 20px;
-}
-
 .pa-redirect-source {
   background-image: url("@/assets/redirect-source.svg");
   background-position: center;