refactor(ui): use BaseDialog @close event in Device components

Author: luizhf42

ui/src/components/Devices/DeviceAcceptWarning.vue

@@ -2,6 +2,7 @@
   <BaseDialog
     v-if="hasAuthorization"
     v-model="showDialog"
+    @close="close"
     transition="dialog-bottom-transition"
     data-test="device-accept-warning-dialog"
   >
@@ -20,7 +21,7 @@
       <v-card-actions>
         <v-spacer />
 
-        <v-btn variant="text" data-test="close-btn" @click="close()"> Close </v-btn>
+        <v-btn variant="text" data-test="close-btn" @click="close"> Close </v-btn>
       </v-card-actions>
     </v-card>
   </BaseDialog>

ui/src/components/Devices/DeviceActionButton.vue

@@ -24,7 +24,7 @@
         <span data-test="tooltip-text"> You don't have this kind of authorization. </span>
       </v-tooltip>
     </v-list-item>
-    <BaseDialog v-model="showDialog" @click:outside="close" data-test="device-action-dialog">
+    <BaseDialog v-model="showDialog" @close="close" data-test="device-action-dialog">
       <v-card class="bg-v-theme-surface">
         <v-card-title class="text-h5 pa-5 bg-primary">
           {{ capitalizeText(variant) }} {{ capitalizeText(action) }}

ui/src/components/Devices/DeviceChooser.vue

@@ -2,6 +2,7 @@
   <BaseDialog
     v-if="hasAuthorization"
     v-model="showDialog"
+    @close="close"
     data-test="device-chooser-dialog"
   >
     <v-card

ui/src/components/Devices/DeviceRename.vue

@@ -9,7 +9,7 @@
     </div>
   </v-list-item>
 
-  <BaseDialog v-model="showDialog" data-test="device-rename-dialog" @click:outside="close">
+  <BaseDialog v-model="showDialog" data-test="device-rename-dialog" @close="close">
     <v-card class="bg-v-theme-surface" data-test="device-rename-card">
       <v-card-title class="text-h5 pa-5 bg-primary" data-test="text-title">
         Rename Device

ui/tests/components/Devices/DeviceActionButton.spec.ts

@@ -2,7 +2,7 @@ import { setActivePinia, createPinia } from "pinia";
 import { DOMWrapper, mount, VueWrapper } from "@vue/test-utils";
 import { createVuetify } from "vuetify";
 import MockAdapter from "axios-mock-adapter";
-import { expect, describe, it, beforeEach, vi } from "vitest";
+import { expect, describe, it, beforeEach } from "vitest";
 import DeviceActionButton from "@/components/Devices/DeviceActionButton.vue";
 import { router } from "@/router";
 import { devicesApi } from "@/api/http";
@@ -95,14 +95,10 @@ describe("Device Action Button", () => {
     expect(wrapper.vm.showDialog).toBe(true);
   });
 
-  it("Closing dialog sets dialog value to false", async () => {
-    vi.spyOn(console, "warn").mockImplementation((message) => {
-      if (message.includes("click:outside")) return;
-      console.log(message);
-    });
+  it("Closing dialog sets showDialog value to false", async () => {
     wrapper.vm.showDialog = true;
-    const dialogComponent = wrapper.findComponent({ name: "VDialog" });
-    await dialogComponent.vm.$emit("click:outside");
+    const dialogComponent = wrapper.findComponent({ name: "BaseDialog" });
+    await dialogComponent.vm.$emit("close");
     expect(wrapper.vm.showDialog).toBe(false);
   });