refactor(ui): create standard @close event for BaseDialog

ui/admin/src/components/Instance/SSO/ConfigureSSO.vue

@@ -1,5 +1,5 @@
 <template>
-  <BaseDialog v-model="showDialog" @click:outside="close">
+  <BaseDialog v-model="showDialog" @close="close">
     <v-card>
       <v-card-title class="text-h5 pb-2" data-test="dialog-title">Configure Single Sign-on</v-card-title>
       <v-container>

ui/admin/src/components/Namespace/NamespaceExport.vue

@@ -1,7 +1,7 @@
 <template>
   <v-btn @click="showDialog = true" class="mr-2" data-test="namespaces-export-btn">Export CSV</v-btn>
 
-  <BaseDialog v-model="showDialog" transition="dialog-bottom-transition">
+  <BaseDialog v-model="showDialog" @close="closeDialog" transition="dialog-bottom-transition">
     <v-card>
       <v-card-title class="text-h5 pb-2">Export namespaces data</v-card-title>
       <v-divider />

ui/admin/src/components/User/UserExport.vue

@@ -1,7 +1,7 @@
 <template>
   <v-btn class="mr-6" @click="showDialog = true" v-bind="$attrs">Export CSV</v-btn>
 
-  <BaseDialog v-model="showDialog" transition="dialog-bottom-transition">
+  <BaseDialog v-model="showDialog" @close="closeDialog" transition="dialog-bottom-transition">
     <v-card>
       <v-card-title class="text-h5 pb-2">Export users data</v-card-title>
       <v-divider />

ui/admin/src/components/User/UserFormDialog.vue

@@ -26,7 +26,7 @@
     <span>Edit</span>
   </v-tooltip>
 
-  <BaseDialog v-model="showDialog" @click:outside="close" transition="dialog-bottom-transition">
+  <BaseDialog v-model="showDialog" @close="close" transition="dialog-bottom-transition">
     <v-card>
       <v-card-title class="text-h5 pb-2">{{ titleCard }}</v-card-title>
       <v-divider />

ui/admin/src/components/User/UserResetPassword.vue

@@ -14,7 +14,7 @@
     <span>Enable Local Authentication</span>
   </v-tooltip>
 
-  <BaseDialog v-model="showDialog" @click:outside="close">
+  <BaseDialog v-model="showDialog" @close="close">
     <v-card>
       <v-card-title class="text-h5 pb-2">Enable Local Authentication</v-card-title>
       <v-divider />

ui/src/components/Announcements/AnnouncementsModal.vue

@@ -1,6 +1,7 @@
 <template>
   <BaseDialog
     v-model="showDialog"
+    @close="close"
     scrollable
     persistent
   >

ui/src/components/AuthMFA/MfaDisable.vue

@@ -2,7 +2,7 @@
   <BaseDialog
     v-model="showDialog"
     scrollable
-    @click:outside="close"
+    @close="close"
     data-test="dialog"
   >
     <v-card class="bg-grey-darken-4 bg-v-theme-surface pa-3">

ui/src/components/AuthMFA/MfaSettings.vue

@@ -1,10 +1,10 @@
 <template>
   <BaseDialog
     v-model="showDialog"
+    @close="close"
     scrollable
     transition="dialog-bottom-transition"
     data-test="dialog"
-    @click:outside="close()"
   >
     <v-card class="bg-v-theme-surface content" data-test="card-first-page">
       <v-container>

ui/src/components/AuthMFA/RecoveryHelper.vue

@@ -1,6 +1,7 @@
 <template>
   <BaseDialog
     v-model="showDialog"
+    @close="close"
     transition="dialog-bottom-transition"
     persistent
   >

ui/src/components/BaseDialog.vue

@@ -1,6 +1,7 @@
 <template>
   <v-dialog
     v-model="showDialog"
+    @update:model-value="handleModelValueChange"
     :fullscreen
     :max-width
   >
@@ -24,10 +25,13 @@ const props = defineProps<{
   forceFullscreen?: boolean
 }>();
 
+const emit = defineEmits(["close"]);
 const showDialog = defineModel<boolean>({ required: true });
 const { smAndDown, thresholds } = useDisplay();
 const fullscreen = computed(() => props.forceFullscreen || smAndDown.value);
 const maxWidth = computed(() => fullscreen.value ? undefined : thresholds.value[props.threshold || "sm"]);
 
+const handleModelValueChange = (value: boolean) => { if (!value) emit("close"); };
+
 defineExpose({ fullscreen, maxWidth });
 </script>

ui/src/components/Billing/BillingDialog.vue

@@ -1,8 +1,8 @@
 <template>
   <BaseDialog
     v-model="showCheckoutDialog"
+    @close="resetDialog"
     transition="dialog-bottom-transition"
-    @click:outside="resetDialog"
     data-test="checkout-dialog"
   >
     <v-window v-model="el">

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/src/components/Namespace/NamespaceAdd.vue

@@ -1,5 +1,5 @@
 <template>
-  <BaseDialog v-model="showDialog" @click:outside="close">
+  <BaseDialog v-model="showDialog" @close="close">
     <v-card data-test="namespace-add-card" class="bg-v-theme-surface rounded" rounded>
       <template v-if="!isCommunityVersion">
         <v-card-title class="bg-primary d-flex justify-space-between align-center text-h5 pa-4">

ui/src/components/Namespace/NamespaceEdit.vue

@@ -1,5 +1,5 @@
 <template>
-  <BaseDialog v-model="showDialog" @click:outside="close">
+  <BaseDialog v-model="showDialog" @close="close">
     <v-card data-test="password-change-card" class="bg-v-theme-surface">
       <v-card-title class="text-h5 pa-4 bg-primary" data-test="title">
         Change Connection Announcement

ui/src/components/PrivateKeys/PrivateKeyAdd.vue

@@ -1,5 +1,5 @@
 <template>
-  <BaseDialog v-model="showDialog" transition="dialog-bottom-transition">
+  <BaseDialog v-model="showDialog" @close="close" transition="dialog-bottom-transition">
     <v-card class="bg-v-theme-surface">
       <v-card-title class="text-h5 pa-3 bg-primary" data-test="card-title">
         New Private Key

ui/src/components/PrivateKeys/PrivateKeyEdit.vue

@@ -12,7 +12,7 @@
       </div>
     </v-list-item>
 
-    <BaseDialog v-model="showDialog" transition="dialog-bottom-transition">
+    <BaseDialog v-model="showDialog" @close="close" transition="dialog-bottom-transition">
       <v-card class="bg-v-theme-surface">
         <v-card-title class="text-h5 pa-3 bg-primary">
           Edit Private Key

ui/src/components/PublicKeys/PublicKeyAdd.vue

@@ -21,7 +21,7 @@
       <span> You don't have this kind of authorization. </span>
     </v-tooltip>
 
-    <BaseDialog v-model="showDialog" transition="dialog-bottom-transition">
+    <BaseDialog v-model="showDialog" @close="close" transition="dialog-bottom-transition">
       <v-card class="bg-v-theme-surface">
         <v-card-title class="text-h5 pa-3 bg-primary" data-test="pk-add-title">
           New Public Key

ui/src/components/PublicKeys/PublicKeyEdit.vue

@@ -17,7 +17,7 @@
       </div>
     </v-list-item>
 
-    <BaseDialog v-model="showDialog" transition="dialog-bottom-transition">
+    <BaseDialog v-model="showDialog" @close="close" transition="dialog-bottom-transition">
       <v-card class="bg-v-theme-surface">
         <v-card-title class="text-h5 pa-3 bg-primary" data-test="public-key-edit-title">
           Edit Public Key

ui/src/components/Team/ApiKeys/ApiKeyGenerate.vue

@@ -16,7 +16,7 @@
       <span> You don't have this kind of authorization. </span>
     </v-tooltip>
 
-    <BaseDialog v-model="showDialog" @update:modelValue="(value: boolean) => !value && close()">
+    <BaseDialog v-model="showDialog" @close="close">
       <v-card data-test="api-key-generate-dialog" class="bg-v-theme-surface">
         <v-card-title class="bg-primary">New Api Key</v-card-title>
 

ui/src/components/Team/Member/MemberInvite.vue

@@ -22,7 +22,7 @@
 
     <BaseDialog
       v-model="showDialog"
-      @click:outside="close()"
+      @close="close"
     >
       <v-card
         data-test="namespace-new-member-dialog"

ui/src/components/Terminal/TerminalDialog.vue

@@ -2,20 +2,19 @@
   <BaseDialog
     v-model="showDialog"
     :forceFullscreen="!showLoginForm"
-    @click:outside="close"
-    @keydown.esc="close"
+    @close="close"
   >
     <v-card data-test="terminal-card" class="bg-v-theme-surface">
       <v-card-title
         class="text-h5 pa-4 bg-primary d-flex align-center justify-space-between"
       >
         Terminal
-        <v-icon v-if="!showLoginForm" @click="close()" data-test="close-terminal-btn" size="24">mdi-close</v-icon>
+        <v-icon v-if="!showLoginForm" @click="close" data-test="close-terminal-btn" size="24">mdi-close</v-icon>
       </v-card-title>
 
       <TerminalLoginForm
         v-if="showLoginForm"
-        @submit="(params) => handleSubmit(params)"
+        @submit="handleSubmit"
         @close="close"
       />
       <Terminal

ui/src/components/Terminal/TerminalHelper.vue

@@ -1,5 +1,5 @@
 <template>
-  <BaseDialog v-model="showDialog" @click:outside="clearData" transition="dialog-bottom-transition" data-test="dialog">
+  <BaseDialog v-model="showDialog" @close="close" transition="dialog-bottom-transition" data-test="dialog">
     <v-card class="bg-v-theme-surface">
       <v-card-title class="text-h6 pa-4 bg-primary" data-test="dialog-title">
         Generate a SSH command line
@@ -125,7 +125,7 @@ watch(showDialog, (isOpen) => {
   }
 });
 
-const clearData = () => {
+const close = () => {
   username.value = "";
   showDialog.value = false;
 };

ui/src/components/User/ChangePassword.vue

@@ -1,5 +1,5 @@
 <template>
-  <BaseDialog v-model="showDialog" @click:outside="close">
+  <BaseDialog v-model="showDialog" @close="close">
     <v-card data-test="password-change-card" class="bg-v-theme-surface">
       <v-card-title class="text-h5 pa-4 bg-primary" data-test="title">
         Change Password

ui/src/components/User/PaywallChat.vue

@@ -2,8 +2,6 @@
   <BaseDialog
     v-model="showDialog"
     transition="dialog-bottom-transition"
-    @click:outside="close"
-    @keydown.esc="close"
   >
     <v-card color="background" data-test="card-dialog">
       <v-container>
@@ -39,7 +37,7 @@
           </v-col>
         </v-row>
         <v-card-actions data-test="card-actions">
-          <v-btn @click="close()" class="mt-4" variant="text" data-test="close-btn">
+          <v-btn @click="showDialog = false" class="mt-4" variant="text" data-test="close-btn">
             Close
           </v-btn>
           <v-spacer />
@@ -63,10 +61,6 @@ import BaseDialog from "../BaseDialog.vue";
 
 const showDialog = defineModel({ default: false });
 
-const close = () => {
-  showDialog.value = false;
-};
-
 defineExpose({ showDialog });
 </script>
 

ui/src/components/User/PaywallDialog.vue

@@ -3,8 +3,7 @@
     v-model="showDialog"
     threshold="md"
     transition="dialog-bottom-transition"
-    @click:outside="close"
-    @keydown.esc="close"
+    @close="close"
   >
     <v-card color="background" data-test="card-dialog">
       <v-container class="px-6">

ui/src/components/WebEndpoints/WebEndpointCreate.vue

@@ -1,5 +1,5 @@
 <template>
-  <BaseDialog v-model="showDialog" @click:outside="close()">
+  <BaseDialog v-model="showDialog" @close="close">
     <v-card data-test="tunnel-create-dialog" class="bg-v-theme-surface">
       <v-card-title class="bg-primary" data-test="create-dialog-title">
         Create Device Web Endpoint
@@ -111,7 +111,7 @@
       </v-container>
       <v-card-actions>
         <v-spacer />
-        <v-btn data-test="close-btn" @click="close()"> Close </v-btn>
+        <v-btn data-test="close-btn" @click="close"> Close </v-btn>
         <v-btn :disabled="hasErrors" color="primary" data-test="create-tunnel-btn" @click="addWebEndpoint()">
           Create Web Endpoint
         </v-btn>

ui/src/components/firewall/FirewallRuleAdd.vue

@@ -19,7 +19,7 @@
       <span> You don't have this kind of authorization. </span>
     </v-tooltip>
 
-    <BaseDialog v-model="showDialog" transition="dialog-bottom-transition">
+    <BaseDialog v-model="showDialog" @close="close" transition="dialog-bottom-transition">
       <v-card class="bg-v-theme-surface">
         <v-card-title class="text-h5 pa-3 bg-primary" data-test="firewall-rule-title">
           New Firewall Rule

ui/src/components/firewall/FirewallRuleEdit.vue

@@ -17,7 +17,7 @@
       </div>
     </v-list-item>
 
-    <BaseDialog v-model="showDialog" transition="dialog-bottom-transition">
+    <BaseDialog v-model="showDialog" @close="close" transition="dialog-bottom-transition">
       <v-card class="bg-v-theme-surface">
         <v-card-title class="text-h5 pa-3 bg-primary" data-test="firewall-edit-rule-title">
           Edit Firewall Rule

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);
   });