Change to useTemplate for refs

As per https://vuejs.org/guide/essentials/template-refs

Author: johnsimons

src/Frontend/src/components/failedmessages/DeletedMessageGroups.vue

@@ -40,7 +40,6 @@ interface ExtendedFailureGroupView extends FailureGroupView {
 }
 
 let pollingFaster = false;
-const messageGroupList = ref();
 const archiveGroups = ref<ExtendedFailureGroupView[]>([]);
 const undismissedRestoreGroups = ref<ExtendedFailureGroupView[]>([]);
 const loadingData = ref(true);
@@ -68,12 +67,12 @@ function saveDefaultGroupingClassifier(classifier: string) {
   cookies.set("archived_groups_classification", classifier);
 }
 
-function classifierChanged(classifier: string) {
+async function classifierChanged(classifier: string) {
   saveDefaultGroupingClassifier(classifier);
 
   selectedClassifier.value = classifier;
   archiveGroups.value = [];
-  messageGroupList.value = loadArchivedMessageGroups(classifier);
+  await loadArchivedMessageGroups(classifier);
 }
 
 async function getArchiveGroups(classifier: string) {
@@ -304,7 +303,7 @@ onMounted(async () => {
 
         <div class="box-container">
           <div class="messagegrouplist">
-            <div ref="messageGroupList">
+            <div>
               <div class="row">
                 <div class="col-sm-12">
                   <no-data v-if="archiveGroups.length === 0 && !loadingData" title="message groups" message="There are currently no grouped message failures"></no-data>

src/Frontend/src/components/failedmessages/FailedMessageGroups.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, useTemplateRef } from "vue";
 import { licenseStatus } from "../../composables/serviceLicense";
 import { connectionState } from "../../composables/serviceServiceControl";
 import { useTypedFetchFromServiceControl } from "../../composables/serviceServiceControlUrls";
@@ -15,7 +15,7 @@ import getSortFunction from "@/components/getSortFunction";
 
 const selectedClassifier = ref<string>("");
 const classifiers = ref<string[]>([]);
-const messageGroupList = ref<IMessageGroupList>();
+const messageGroupList = useTemplateRef<IMessageGroupList>("messageGroupList");
 const sortMethod = ref<SortOptions<GroupOperation>["sort"]>();
 
 function sortGroups(sort: SortOptions<GroupOperation>) {

src/Frontend/src/components/failedmessages/FailedMessages.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, watch } from "vue";
+import { onMounted, onUnmounted, ref, useTemplateRef, watch } from "vue";
 import { licenseStatus } from "../../composables/serviceLicense";
 import { connectionState } from "../../composables/serviceServiceControl";
 import { useFetchFromServiceControl, usePatchToServiceControl, useTypedFetchFromServiceControl } from "../../composables/serviceServiceControlUrls";
@@ -31,7 +31,7 @@ const totalCount = ref(0);
 const showDelete = ref(false);
 const showConfirmRetryAll = ref(false);
 const showConfirmDeleteAll = ref(false);
-const messageList = ref<IMessageList>();
+const messageList = useTemplateRef<IMessageList>("messageList");
 const messages = ref<ExtendedFailedMessage[]>([]);
 const sortOptions: SortOptions<GroupOperation>[] = [
   {

src/Frontend/src/components/failedmessages/PendingRetries.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, watch } from "vue";
+import { onMounted, onUnmounted, ref, useTemplateRef, watch } from "vue";
 import { licenseStatus } from "../../composables/serviceLicense";
 import { connectionState } from "../../composables/serviceServiceControl";
 import { usePatchToServiceControl, usePostToServiceControl, useTypedFetchFromServiceControl } from "../../composables/serviceServiceControlUrls";
@@ -24,7 +24,7 @@ const perPage = 50;
 const cookies = useCookies().cookies;
 const selectedPeriod = ref("All Pending Retries");
 const endpoints = ref<string[]>([]);
-const messageList = ref<IMessageList>();
+const messageList = useTemplateRef<IMessageList>("messageList");
 const messages = ref<ExtendedFailedMessage[]>([]);
 const selectedQueue = ref("empty");
 const showConfirmRetry = ref(false);