refactor(ui): streamline dialog structure and inputs

Simplified markup by collapsing multiline tags and aligning props.
Refactored table headers to use a loop with dynamic labels.
Created a function to normalize the new Headers variable logic on tests.
Improved device search behavior and keyboard shortcut handling.
Fixed test selectors to match updated header labeling logic.

Author: luannmoreira

ui/src/components/QuickConnection/QuickConnection.vue

@@ -12,180 +12,167 @@
     >
       Quick Connect
     </v-btn>
+
     <div>
-      <p
-        class="text-caption text-md font-weight-bold text-grey-darken-1 ma-1"
-        data-test="quick-connect-instructions"
-      >
+      <p class="text-caption text-md font-weight-bold text-grey-darken-1 ma-1" data-test="quick-connect-instructions">
         Press <v-chip density="compact" size="small" label>Ctrl+K</v-chip> to Quick Connect!
       </p>
     </div>
-    <v-dialog
-      v-model="dialog"
-      width="1000"
-      transition="dialog-bottom-transition"
-    >
+
+    <v-dialog v-model="dialog" width="1000" transition="dialog-bottom-transition">
       <v-card class="bg-v-theme-surface content" min-height="700" max-height="700">
         <div class="pa-5">
           <v-row>
             <v-col>
               <v-text-field
                 label="Search your online devices!"
-                variant="solo"
+                variant="outlined"
+                bg-color="bg-v-theme-surface"
                 color="primary"
                 single-line
                 hide-details
                 v-model.trim="filter"
-                v-on:keyup="searchDevices"
+                @keyup="searchDevices"
                 prepend-inner-icon="mdi-magnify"
                 density="comfortable"
                 data-test="search-text"
                 autofocus
-                class="shrink mx-1"
+                class="shrink mx-1 mt-2"
               />
+
             </v-col>
           </v-row>
         </div>
+
         <v-card-text class="mt-4 mb-0 pb-1 flex">
           <v-row>
-            <v-col>
-              <p class="text-body-2 mb-2 font-weight-bold text-center" data-test="hostname-header">
-                Hostname
-              </p>
-            </v-col>
-            <v-col>
-              <p class="text-body-2 mb-2 font-weight-bold text-center" data-test="os-header">
-                Operating System
-              </p>
-            </v-col>
-            <v-col>
-              <p class="text-body-2 mb-2 font-weight-bold text-center" data-test="sshid-header">
-                SSHID
-              </p>
-            </v-col>
-            <v-col>
-              <p class="text-body-2 mr-3 font-weight-bold text-center" data-test="tags-header">
-                Tags
+            <v-col
+              v-for="header in headers"
+              :key="header.label"
+            >
+              <p
+                class="text-body-2 mb-2 font-(weight-bold) text-center"
+                :data-test="`${normalizeLabel(header.label)}-header`"
+              >
+                {{ header.label }}
               </p>
             </v-col>
           </v-row>
-          <QuickConnectionList ref="list" />
+
+          <QuickConnectionList ref="listRef" />
         </v-card-text>
+
         <v-card-actions>
           <v-row class="ml-2">
             <v-col>
               <p class="text-body-2 mb-0 font-weight-bold text-grey-darken-1">
-                <v-icon color="#7284D0" data-test="connect-icon">mdi-arrow-u-left-bottom</v-icon>
-                To connect
+                <v-icon color="#7284D0" data-test="connect-icon">mdi-arrow-u-left-bottom</v-icon> To connect
               </p>
             </v-col>
             <v-col>
               <p class="text-body-2 mb-0 font-weight-bold text-grey-darken-1">
                 <v-icon color="#7284D0" data-test="navigate-up-icon">mdi-arrow-up</v-icon>
-                <v-icon color="#7284D0" data-test="navigate-down-icon">mdi-arrow-down</v-icon>
-                To navigate
+                <v-icon color="#7284D0" data-test="navigate-down-icon">mdi-arrow-down</v-icon> To navigate
               </p>
             </v-col>
             <v-col>
-              <p
-                class="text-body-2 font-weight-bold text-grey-darken-1"
-                data-test="copy-sshid-instructions"
-              >
+              <p class="text-body-2 font-weight-bold text-grey-darken-1" data-test="copy-sshid-instructions">
                 Press "Ctrl + C" to copy SSHID
               </p>
             </v-col>
           </v-row>
-          <v-btn variant="text" data-test="close-btn" @click="dialog = !dialog">
-            Close
-          </v-btn>
+
+          <v-btn variant="text" data-test="close-btn" @click="dialog = false">Close</v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-// eslint-disable-next-line import/no-extraneous-dependencies
+import { ref, watch, onUnmounted } from "vue";
 import { useMagicKeys } from "@vueuse/core";
-import { watch, ref, onUnmounted } from "vue";
 import axios, { AxiosError } from "axios";
 import QuickConnectionList from "./QuickConnectionList.vue";
 import { useStore } from "@/store";
 import handleError from "@/utils/handleError";
 
-const list = ref<InstanceType<typeof QuickConnectionList>>();
 const dialog = ref(false);
-const store = useStore();
 const filter = ref("");
-const show = ref(false);
+const listRef = ref<InstanceType<typeof QuickConnectionList> | null>(null);
+const store = useStore();
+
+const headers = [
+  { label: "Hostname" },
+  { label: "Operating System" },
+  { label: "SSHID" },
+  { label: "Tags" },
+];
+
+const normalizeLabel = (label: string) => label.toLowerCase().replace(/\s+/g, "-");
+
+useMagicKeys({
+  passive: false,
+  onEventFired(event) {
+    if (event.ctrlKey && event.key.toLowerCase() === "k" && event.type === "keydown") {
+      event.preventDefault();
+      dialog.value = !dialog.value;
+    } else if ((event.key === "ArrowDown" || event.key === "ArrowUp") && event.type === "keydown") {
+      event.preventDefault();
+      listRef.value?.rootEl?.focus?.();
+    }
+  },
+});
 
 const searchDevices = () => {
   let encodedFilter = "";
 
-  if (filter.value) {
-    const filterToEncodeBase64 = [
+  if (filter.value.trim()) {
+    const filterObj = [
       {
         type: "property",
         params: { name: "name", operator: "contains", value: filter.value },
       },
     ];
-    encodedFilter = btoa(JSON.stringify(filterToEncodeBase64));
+    encodedFilter = btoa(JSON.stringify(filterObj));
   }
 
-  if (dialog.value === false) {
+  if (!dialog.value) {
     encodedFilter = "";
   }
 
-  try {
-    store.dispatch("devices/searchQuickConnection", {
-      page: store.getters["devices/getPage"],
-      perPage: store.getters["devices/getPerPage"],
-      filter: encodedFilter,
-      status: store.getters["devices/getStatus"],
-    });
-  } catch {
+  store.dispatch("devices/searchQuickConnection", {
+    page: store.getters["devices/getPage"],
+    perPage: store.getters["devices/getPerPage"],
+    filter: encodedFilter,
+    status: store.getters["devices/getStatus"],
+  }).catch(() => {
     store.dispatch("snackbar/showSnackbarErrorDefault");
-  }
+  });
 };
 
-watch(dialog, async (value) => {
-  if (!value) return;
+watch(dialog, async (isOpen) => {
+  if (!isOpen) return;
 
   try {
     await store.dispatch("stats/get");
-    show.value = true;
-  } catch (error: unknown) {
-    const axiosError = error as AxiosError;
-    switch (axios.isAxiosError(error)) {
-      case axiosError.response?.status === 403: {
-        store.dispatch("snackbar/showSnackbarErrorAssociation");
-        break; }
-      default: store.dispatch("snackbar/showSnackbarErrorDefault");
+  } catch (err: unknown) {
+    const error = err as AxiosError;
+    if (axios.isAxiosError(error) && error.response?.status === 403) {
+      store.dispatch("snackbar/showSnackbarErrorAssociation");
+    } else {
+      store.dispatch("snackbar/showSnackbarErrorDefault");
     }
     handleError(error);
   }
 });
 
-onUnmounted(async () => {
-  await store.dispatch("devices/setFilter", "");
-});
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const keyboardMacros = useMagicKeys({
-  passive: false,
-  onEventFired(e) {
-    if (e.ctrlKey && e.key === "k" && e.type === "keydown") {
-      e.preventDefault();
-      dialog.value = !dialog.value;
-    } else if ((e.key === "ArrowDown" || e.key === "ArrowUp") && e.type === "keydown") {
-      e.preventDefault();
-      list.value?.rootEl?.focus();
-    }
-  },
+onUnmounted(() => {
+  store.dispatch("devices/setFilter", "");
 });
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .code {
   font-family: monospace;
   font-size: 85%;

ui/src/components/QuickConnection/QuickConnectionList.vue

@@ -10,7 +10,7 @@
       </v-card-title>
       <v-row>
         <v-col class="text-center d-flex justify-center pa-5">
-          <p data-test="no-online-devices-message">No online device was found!</p>
+          <p data-test="no-online-devices-message">There are currently no devices online.</p>
         </v-col>
       </v-row>
     </v-card>

ui/tests/components/QuickConnection/QuickConnection.spec.ts

@@ -131,7 +131,7 @@ describe("Quick Connection", () => {
 
     expect(dialog.find('[data-test="search-text"]').exists()).toBe(true);
     expect(dialog.find('[data-test="hostname-header"]').exists()).toBe(true);
-    expect(dialog.find('[data-test="os-header"]').exists()).toBe(true);
+    expect(dialog.find('[data-test="operating-system-header"]').exists()).toBe(true);
     expect(dialog.find('[data-test="sshid-header"]').exists()).toBe(true);
     expect(dialog.find('[data-test="tags-header"]').exists()).toBe(true);
     expect(dialog.find('[data-test="connect-icon"]').exists()).toBe(true);