fix(ui): fix UserDelete dialog button behavior

Author: luizhf42

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

@@ -1,4 +1,19 @@
 <template>
+  <v-tooltip
+    location="bottom"
+    :disabled="!showTooltip"
+    text="Remove"
+  >
+    <template #activator="{ props: tooltipProps }">
+      <span
+        v-bind="tooltipProps"
+        role="button"
+      >
+        <slot :open-dialog="openDialog" />
+      </span>
+    </template>
+  </v-tooltip>
+
   <MessageDialog
     v-model="showDialog"
     title="Are you sure?"
@@ -15,6 +30,7 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from "vue";
 import { useRouter } from "vue-router";
 import useUsersStore from "@admin/store/modules/users";
 import useSnackbar from "@/helpers/snackbar";
@@ -24,14 +40,17 @@ import handleError from "@/utils/handleError";
 const props = defineProps<{
   id: string;
   redirect?: boolean;
+  showTooltip?: boolean;
 }>();
 
 const emit = defineEmits(["update"]);
-const showDialog = defineModel<boolean>({ required: true });
+const showDialog = ref(false);
 const router = useRouter();
 const snackbar = useSnackbar();
 const usersStore = useUsersStore();
 
+const openDialog = () => { showDialog.value = true; };
+
 const remove = async () => {
   try {
     await usersStore.deleteUser(props.id);
@@ -46,5 +65,5 @@ const remove = async () => {
   }
 };
 
-defineExpose({ showDialog });
+defineExpose({ showDialog, openDialog, remove });
 </script>

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

@@ -74,23 +74,15 @@
 
           <UserDelete
             :id="item.id"
-            v-model="deleteDialog"
-          />
-          <v-tooltip
-            bottom
-            anchor="bottom"
+            v-slot="{ openDialog }"
+            :show-tooltip="true"
           >
-            <template #activator="{ props }">
-              <v-icon
-                tag="a"
-                dark
-                v-bind="props"
-                icon="mdi-delete"
-                @click="deleteDialog = true"
-              />
-            </template>
-            <span>Remove</span>
-          </v-tooltip>
+            <v-icon
+              icon="mdi-delete"
+              tag="button"
+              @click="openDialog"
+            />
+          </UserDelete>
         </td>
       </tr>
     </template>
@@ -120,7 +112,6 @@ const itemsPerPage = ref(10);
 const loading = ref(false);
 const users = computed(() => usersStore.users as IAdminUser[]);
 const userCount = computed(() => usersStore.usersCount);
-const deleteDialog = ref(false);
 const headers = [
   {
     text: "Name",

ui/admin/src/views/UserDetails.vue

@@ -3,7 +3,7 @@
     <h1>User Details</h1>
   </div>
   <v-card
-    v-if="user && userId"
+    v-if="user.id"
     class="mt-2 border rounded bg-background"
     elevation="0"
   >
@@ -57,15 +57,23 @@
             </div>
           </v-list-item>
 
-          <v-list-item
-            data-test="user-delete-btn"
-            @click="deleteDialog = true"
+          <UserDelete
+            :id="userId"
+            v-slot="{ openDialog }"
+            redirect
           >
-            <div class="d-flex align-center">
-              <v-icon class="mr-2">mdi-delete</v-icon>
-              <v-list-item-title>Delete this user</v-list-item-title>
+            <div>
+              <v-list-item
+                data-test="user-delete-btn"
+                @click="openDialog"
+              >
+                <div class="d-flex align-center">
+                  <v-icon class="mr-2">mdi-delete</v-icon>
+                  <v-list-item-title>Delete this user</v-list-item-title>
+                </div>
+              </v-list-item>
             </div>
-          </v-list-item>
+          </UserDelete>
 
           <div class="px-2 py-1" />
         </v-list>
@@ -229,12 +237,6 @@
   >
     <p class="text-center">Something is wrong, try again!</p>
   </v-card>
-
-  <UserDelete
-    :id="userId"
-    v-model="deleteDialog"
-    redirect
-  />
 </template>
 
 <script setup lang="ts">
@@ -255,7 +257,6 @@ const authStore = useAuthStore();
 
 const userId = computed(() => route.params.id as string);
 const user = ref({} as IAdminUser);
-const deleteDialog = ref(false);
 
 const lastLoginText = computed(() => {
   const value = user.value?.last_login;

ui/admin/tests/unit/components/User/UserDelete/__snapshots__/index.spec.ts.snap

@@ -1,35 +1,95 @@
+import { nextTick } from "vue";
 import { createVuetify } from "vuetify";
-import { DOMWrapper, mount } from "@vue/test-utils";
-import { describe, expect, it, vi } from "vitest";
+import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { createPinia, setActivePinia } from "pinia";
 import useUsersStore from "@admin/store/modules/users";
 import UserDelete from "@admin/components/User/UserDelete.vue";
 import routes from "@admin/router";
 import { SnackbarPlugin } from "@/plugins/snackbar";
 
 describe("User Delete", () => {
+  let wrapper: VueWrapper<InstanceType<typeof UserDelete>>;
   setActivePinia(createPinia());
   const usersStore = useUsersStore();
   usersStore.deleteUser = vi.fn();
   usersStore.fetchUsersList = vi.fn();
 
-  const wrapper = mount(UserDelete, {
-    props: {
-      id: "6256d9e3ea6f26bc595130fa",
-      redirect: false,
-      modelValue: true,
-    },
-    global: { plugins: [createVuetify(), routes, SnackbarPlugin] },
+  const createWrapper = (props = {}, slots = {}) => {
+    return mount(UserDelete, {
+      props: {
+        id: "test-id",
+        ...props,
+      },
+      slots: {
+        default: "<button>Delete</button>",
+        ...slots,
+      },
+      global: { plugins: [createVuetify(), routes, SnackbarPlugin] },
+    });
+  };
+
+  afterEach(() => { wrapper.unmount(); });
+
+  it("Exposes openDialog via slot props", () => {
+    const slotMock = vi.fn();
+    wrapper = createWrapper({}, { default: slotMock });
+
+    expect(slotMock).toHaveBeenCalled();
+    const slotProps = slotMock.mock.calls[0][0];
+    expect(slotProps.openDialog).toBeInstanceOf(Function);
+  });
+
+  it("Shows tooltip text when enabled", () => {
+    wrapper = createWrapper({ showTooltip: true });
+
+    const tooltip = wrapper.findComponent({ name: "VTooltip" });
+    expect(tooltip.props("text")).toBe("Remove");
+  });
+
+  it("Opens dialog when openDialog is called", async () => {
+    const slotMock = vi.fn();
+    wrapper = createWrapper({}, { default: slotMock });
+
+    const slotProps = slotMock.mock.calls[0][0];
+
+    slotProps.openDialog();
+    await nextTick();
+
+    const messageDialog = wrapper.findComponent({ name: "MessageDialog" });
+    expect(messageDialog.props("modelValue")).toBe(true);
+  });
+
+  it("Deletes user on confirm", async () => {
+    wrapper = createWrapper();
+
+    const messageDialog = wrapper.findComponent({ name: "MessageDialog" });
+    await messageDialog.vm.$emit("confirm");
+    await flushPromises();
+
+    expect(usersStore.deleteUser).toHaveBeenCalledWith("test-id");
+    expect(usersStore.fetchUsersList).toHaveBeenCalled();
   });
 
-  it("Renders the component", () => {
-    expect(wrapper.html()).toMatchSnapshot();
-    const dialog = new DOMWrapper(document.body);
-    expect(dialog.html()).toMatchSnapshot();
+  it("Redirects after delete when redirect prop is true", async () => {
+    const pushSpy = vi.spyOn(routes, "push");
+
+    wrapper = createWrapper({ redirect: true });
+
+    const messageDialog = wrapper.findComponent({ name: "MessageDialog" });
+    await messageDialog.vm.$emit("confirm");
+    await flushPromises();
+
+    expect(pushSpy).toHaveBeenCalledWith("/users");
   });
 
-  it("Receives props correctly", () => {
-    expect(wrapper.vm.id).toBe("6256d9e3ea6f26bc595130fa");
-    expect(wrapper.vm.redirect).toBe(false);
+  it("Emits update event after successful deletion", async () => {
+    wrapper = createWrapper();
+
+    const messageDialog = wrapper.findComponent({ name: "MessageDialog" });
+    await messageDialog.vm.$emit("confirm");
+    await flushPromises();
+
+    expect(wrapper.emitted("update")).toBeTruthy();
   });
 });

ui/admin/tests/unit/components/User/UserDelete/index.spec.ts

@@ -41,11 +41,11 @@ exports[`UserList > Renders the component 1`] = `
               <!--teleport start-->
               <!--teleport end-->
               <!---->
-              <!---->
-              <!---->
-              <!----><a class="mdi-delete mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable" role="button" aria-hidden="false" tabindex="0" dark="" aria-describedby="v-tooltip-v-6"></a>
+              <!----><span aria-describedby="v-tooltip-v-6" role="button"><button class="mdi-delete mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable" role="button" aria-hidden="false" tabindex="0"></button></span>
               <!--teleport start-->
               <!--teleport end-->
+              <!---->
+              <!---->
             </td>
           </tr>
         </tbody>