A few changes based on feedback

johnsimons · johnsimons · commit 4f6a6a7ec857 · 2025-04-09T16:05:19.000+10:00
diff --git a/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue b/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue
@@ -6,7 +6,7 @@ import type Header from "@/resources/Header";
 import parseContentType from "@/composables/contentTypeParser";
 import { CodeLanguage } from "@/components/codeEditorTypes";
 import CodeEditor from "@/components/CodeEditor.vue";
-import { useMessageViewStore } from "@/stores/MessageViewStore";
+import { useMessageStore } from "@/stores/MessageStore";
 import { storeToRefs } from "pinia";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 
@@ -52,7 +52,7 @@ let origMessageBody: string;
 const showEditAndRetryConfirmation = ref(false);
 const showCancelConfirmation = ref(false);
 const showEditRetryGenericError = ref(false);
-const store = useMessageViewStore();
+const store = useMessageStore();
 const { state, headers, body, edit_and_retry_config } = storeToRefs(store);
 const id = computed(() => state.value.data.id ?? "");
 const messageBody = computed(() => body.value.data.value);
@@ -123,7 +123,7 @@ async function retryEditedMessage() {
 
 function initializeMessageBodyAndHeaders() {
   origMessageBody = body.value.data.value ?? "";
-  localMessage.value = {
+  const local = <LocalMessageState>{
     isBodyChanged: false,
     isBodyEmpty: false,
     isContentTypeSupported: false,
@@ -134,17 +134,15 @@ function initializeMessageBodyAndHeaders() {
     headers: headers.value.data.map((header: Header) => ({ ...header })) as HeaderWithEditing[],
     messageBody: body.value.data.value ?? "",
   };
-  localMessage.value.isBodyEmpty = false;
-  localMessage.value.isBodyChanged = false;
 
   const contentType = getContentType();
-  localMessage.value.bodyContentType = contentType;
+  local.bodyContentType = contentType;
   const parsedContentType = parseContentType(contentType);
-  localMessage.value.isContentTypeSupported = parsedContentType.isSupported;
-  localMessage.value.language = parsedContentType.language;
+  local.isContentTypeSupported = parsedContentType.isSupported;
+  local.language = parsedContentType.language;
 
   const messageIntent = getMessageIntent();
-  localMessage.value.isEvent = messageIntent === "Publish";
+  local.isEvent = messageIntent === "Publish";
 
   for (let index = 0; index < headers.value.data.length; index++) {
     const header: HeaderWithEditing = headers.value.data[index] as HeaderWithEditing;
@@ -160,13 +158,14 @@ function initializeMessageBodyAndHeaders() {
       header.isSensitive = true;
     }
 
-    localMessage.value.headers[index] = header;
+    local.headers[index] = header;
   }
+
+  localMessage.value = local;
 }
 
 function togglePanel(panelNum: number) {
   panel.value = panelNum;
-  return false;
 }
 
 onMounted(() => {
diff --git a/src/Frontend/src/components/messages2/BodyView.vue b/src/Frontend/src/components/messages2/BodyView.vue
@@ -2,11 +2,11 @@
 import { computed, watch } from "vue";
 import CodeEditor from "@/components/CodeEditor.vue";
 import parseContentType from "@/composables/contentTypeParser";
-import { useMessageViewStore } from "@/stores/MessageViewStore";
+import { useMessageStore } from "@/stores/MessageStore";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import { storeToRefs } from "pinia";
 
-const store = useMessageViewStore();
+const store = useMessageStore();
 const { body: bodyState, state } = storeToRefs(store);
 
 watch(
diff --git a/src/Frontend/src/components/messages2/DeleteMessageButton.vue b/src/Frontend/src/components/messages2/DeleteMessageButton.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
-import { useMessageViewStore } from "@/stores/MessageViewStore";
+import { useMessageStore } from "@/stores/MessageStore";
 import { computed, ref } from "vue";
 import { showToastAfterOperation } from "@/composables/toast";
 import { TYPE } from "vue-toastification";
 import { MessageStatus } from "@/resources/Message";
 import { storeToRefs } from "pinia";
 import { FailedMessageStatus } from "@/resources/FailedMessage";
 
-const store = useMessageViewStore();
+const store = useMessageStore();
 const { state } = storeToRefs(store);
 const isConfirmDialogVisible = ref(false);
 
diff --git a/src/Frontend/src/components/messages2/EditAndRetryButton.vue b/src/Frontend/src/components/messages2/EditAndRetryButton.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useMessageViewStore } from "@/stores/MessageViewStore";
+import { useMessageStore } from "@/stores/MessageStore";
 import { computed, ref } from "vue";
 import { showToastAfterOperation } from "@/composables/toast";
 import { TYPE } from "vue-toastification";
@@ -8,7 +8,7 @@ import { MessageStatus } from "@/resources/Message";
 import { storeToRefs } from "pinia";
 import { FailedMessageStatus } from "@/resources/FailedMessage";
 
-const store = useMessageViewStore();
+const store = useMessageStore();
 const { state } = storeToRefs(store);
 const isConfirmDialogVisible = ref(false);
 
diff --git a/src/Frontend/src/components/messages2/ExportMessageButton.vue b/src/Frontend/src/components/messages2/ExportMessageButton.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { useMessageViewStore } from "@/stores/MessageViewStore";
+import { useMessageStore } from "@/stores/MessageStore";
 import { useDownloadFileFromString } from "@/composables/fileDownloadCreator";
 import { showToastAfterOperation } from "@/composables/toast";
 import { TYPE } from "vue-toastification";
 import { ref } from "vue";
 
-const store = useMessageViewStore();
+const store = useMessageStore();
 const executing = ref(false);
 
 async function exportMessage() {
diff --git a/src/Frontend/src/components/messages2/FlowDiagram.vue b/src/Frontend/src/components/messages2/FlowDiagram.vue
@@ -6,7 +6,7 @@ import routeLinks from "@/router/routeLinks";
 import Message from "@/resources/Message";
 import { NServiceBusHeaders } from "@/resources/Header";
 import { Controls } from "@vue-flow/controls";
-import { useMessageViewStore } from "@/stores/MessageViewStore";
+import { useMessageStore } from "@/stores/MessageStore";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import { storeToRefs } from "pinia";
 
@@ -40,8 +40,8 @@ interface MappedMessage {
 const nodeSpacingX = 300;
 const nodeSpacingY = 200;
 
-const store = useMessageViewStore();
-const { state } = storeToRefs(useMessageViewStore());
+const store = useMessageStore();
+const { state } = storeToRefs(useMessageStore());
 
 async function getConversation(conversationId: string) {
   await store.loadConversation(conversationId);
diff --git a/src/Frontend/src/components/messages2/HeadersView.vue b/src/Frontend/src/components/messages2/HeadersView.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import CopyToClipboard from "@/components/CopyToClipboard.vue";
 import { computed, ref } from "vue";
-import { useMessageViewStore } from "@/stores/MessageViewStore";
+import { useMessageStore } from "@/stores/MessageStore";
 import { storeToRefs } from "pinia";
 
-const { headers } = storeToRefs(useMessageViewStore());
+const { headers } = storeToRefs(useMessageStore());
 
 const hoverStates = ref<Record<number, boolean>>({});
 const searchTerm = ref<string>("");
diff --git a/src/Frontend/src/components/messages2/MessageView.vue b/src/Frontend/src/components/messages2/MessageView.vue
@@ -9,7 +9,7 @@ import { useIsMassTransitConnected } from "@/composables/useIsMassTransitConnect
 import BodyView from "@/components/messages2/BodyView.vue";
 import HeadersView from "@/components/messages2/HeadersView.vue";
 import StackTraceView from "@/components/messages2/StacktraceView.vue";
-import { useMessageViewStore } from "@/stores/MessageViewStore";
+import { useMessageStore } from "@/stores/MessageStore";
 import DeleteMessageButton from "@/components/messages2/DeleteMessageButton.vue";
 import RestoreMessageButton from "@/components/messages2/RestoreMessageButton.vue";
 import RetryMessageButton from "@/components/messages2/RetryMessageButton.vue";
@@ -25,7 +25,7 @@ const id = computed(() => route.params.id as string);
 const messageId = computed(() => route.params.messageId as string);
 const isError = computed(() => messageId.value === undefined);
 const isMassTransitConnected = useIsMassTransitConnected();
-const store = useMessageViewStore();
+const store = useMessageStore();
 const { state } = storeToRefs(store);
 const tabs = computed(() => {
   const currentTabs = [
diff --git a/src/Frontend/src/components/messages2/RestoreMessageButton.vue b/src/Frontend/src/components/messages2/RestoreMessageButton.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
-import { useMessageViewStore } from "@/stores/MessageViewStore";
+import { useMessageStore } from "@/stores/MessageStore";
 import { computed, ref } from "vue";
 import { showToastAfterOperation } from "@/composables/toast";
 import { TYPE } from "vue-toastification";
 import { storeToRefs } from "pinia";
 import { FailedMessageStatus } from "@/resources/FailedMessage";
 
-const store = useMessageViewStore();
+const store = useMessageStore();
 const { state } = storeToRefs(store);
 const isConfirmDialogVisible = ref(false);
 
diff --git a/src/Frontend/src/components/messages2/RetryMessageButton.vue b/src/Frontend/src/components/messages2/RetryMessageButton.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
-import { useMessageViewStore } from "@/stores/MessageViewStore";
+import { useMessageStore } from "@/stores/MessageStore";
 import { computed, ref } from "vue";
 import { showToastAfterOperation } from "@/composables/toast";
 import { TYPE } from "vue-toastification";
 import { MessageStatus } from "@/resources/Message";
 import { storeToRefs } from "pinia";
 import { FailedMessageStatus } from "@/resources/FailedMessage";
 
-const store = useMessageViewStore();
+const store = useMessageStore();
 const { state } = storeToRefs(store);
 const isConfirmDialogVisible = ref(false);
 
diff --git a/src/Frontend/src/components/messages2/StacktraceView.vue b/src/Frontend/src/components/messages2/StacktraceView.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import CodeEditor from "@/components/CodeEditor.vue";
-import { useMessageViewStore } from "@/stores/MessageViewStore";
+import { useMessageStore } from "@/stores/MessageStore";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import { storeToRefs } from "pinia";
 
-const { state } = storeToRefs(useMessageViewStore());
+const { state } = storeToRefs(useMessageStore());
 </script>
 
 <template>
diff --git a/src/Frontend/src/stores/MessageStore.ts b/src/Frontend/src/stores/MessageStore.ts
@@ -60,7 +60,7 @@ interface Model {
   }>;
 }
 
-export const useMessageViewStore = defineStore("MessageViewStore", () => {
+export const useMessageStore = defineStore("MessageStore", () => {
   const headers = ref<DataContainer<Header[]>>({ data: [] });
   const body = ref<DataContainer<{ value?: string; content_type?: string }>>({ data: {} });
   const state = reactive<DataContainer<Model>>({ data: { failure_metadata: {}, failure_status: {}, dialog_status: {} } });
@@ -78,7 +78,6 @@ export const useMessageViewStore = defineStore("MessageViewStore", () => {
   }
 
   async function loadFailedMessage(id: string) {
-    state.data.id = id;
     state.loading = true;
     state.failed_to_load = false;
     state.not_found = false;
@@ -308,7 +307,7 @@ export const useMessageViewStore = defineStore("MessageViewStore", () => {
 });
 
 if (import.meta.hot) {
-  import.meta.hot.accept(acceptHMRUpdate(useMessageViewStore, import.meta.hot));
+  import.meta.hot.accept(acceptHMRUpdate(useMessageStore, import.meta.hot));
 }
 
-export type MessageViewStore = ReturnType<typeof useMessageViewStore>;
+export type MessageStore = ReturnType<typeof useMessageStore>;
