Replaces tab navigation with TabsLayout component

Replaces the custom tab navigation in the message view with a reusable TabsLayout component.

This change improves code maintainability and reduces duplication by centralizing the tab layout logic.
The tabs are now dynamically generated based on the message context, such as whether it's an error or if MassTransit is connected.

Author: johnsimons

src/Frontend/src/components/TabsLayout.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref, type Component, type DefineComponent } from "vue";
+
+interface Tab {
+  text: string;
+  component: Component | DefineComponent;
+}
+
+const props = defineProps<{ tabs: Tab[] }>();
+const activePanel = ref(0);
+const activeComponent = ref(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/messages/MessageView2.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, watch } from "vue";
 import { RouterLink, useRoute } from "vue-router";
 import NoData from "../NoData.vue";
 import TimeSince from "../TimeSince.vue";
@@ -16,10 +16,10 @@ import RetryMessageButton from "@/components/messages/RetryMessageButton.vue";
 import EditAndRetryButton from "@/components/messages/EditAndRetryButton.vue";
 import ExportMessageButton from "@/components/messages/ExportMessageButton.vue";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
+import TabsLayout from "@/components/TabsLayout.vue";
 import { storeToRefs } from "pinia";
 import MetadataLabel from "@/components/messages/MetadataLabel.vue";
 
-const panel = ref<number>(1);
 const route = useRoute();
 const id = computed(() => route.params.id as string);
 const messageId = computed(() => route.params.messageId as string);
@@ -29,10 +29,6 @@ const isMassTransitConnected = useIsMassTransitConnected();
 const store = useMessageViewStore();
 const { state } = storeToRefs(store);
 
-function togglePanel(panelNum: number) {
-  panel.value = panelNum;
-}
-
 watch(
   [id, messageId],
   async ([newId, newMessageId], [oldId, oldMessageId]) => {
@@ -49,8 +45,33 @@ watch(
   { immediate: true }
 );
 
-onMounted(() => {
-  togglePanel(isError.value ? 1 : 2);
+const tabs = computed(() => {
+  const currentTabs = [
+    {
+      text: "Message body",
+      component: BodyView,
+    },
+    {
+      text: "Headers",
+      component: HeadersView,
+    },
+  ];
+
+  if (isError.value) {
+    currentTabs.unshift({
+      text: "Stacktrace",
+      component: StackTraceView,
+    });
+  }
+
+  if (!isMassTransitConnected.value) {
+    currentTabs.push({
+      text: "Flow Diagram",
+      component: FlowDiagram,
+    });
+  }
+
+  return currentTabs;
 });
 </script>
 
@@ -117,16 +138,7 @@ onMounted(() => {
           </div>
           <div class="row">
             <div class="col-sm-12 no-side-padding">
-              <div class="nav tabs msg-tabs">
-                <h5 v-if="isError" :class="{ active: panel === 1 }" class="nav-item" @click.prevent="togglePanel(1)"><a href="#">Stacktrace</a></h5>
-                <h5 :class="{ active: panel === 2 }" class="nav-item" @click.prevent="togglePanel(2)"><a href="#">Message body</a></h5>
-                <h5 :class="{ active: panel === 3 }" class="nav-item" @click.prevent="togglePanel(3)"><a href="#">Headers</a></h5>
-                <h5 v-if="!isMassTransitConnected" :class="{ active: panel === 4 }" class="nav-item" @click.prevent="togglePanel(4)"><a href="#">Flow Diagram</a></h5>
-              </div>
-              <StackTraceView v-if="isError && panel === 1" />
-              <BodyView v-if="panel === 2" />
-              <HeadersView v-if="panel === 3" />
-              <FlowDiagram v-if="panel === 4" />
+              <TabsLayout :tabs="tabs" />
             </div>
           </div>
         </template>