[Remove Vuetify from Studio] Deactivate and delete confirmation dialogs in admin user actions (#5426)

* Updated ConfirmationDialog to KModal and also Updated repective unit test file to handle KModal

* made some changes

* removed i18 strings

* [pre-commit.ci lite] apply automatic fixes

---------

Co-authored-by: pre-commit-ci-lite[bot] <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>

Author: Prashant-thakur77

contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue

@@ -1,25 +1,32 @@
 <template>
 
   <div>
-    <ConfirmationDialog
-      v-model="deleteDialog"
+    <KModal
+      v-if="deleteDialog"
       title="Delete user"
-      :text="`Are you sure you want to permanently delete ${user.name}'s account?`"
-      confirmButtonText="Delete"
+      submitText="Delete"
+      cancelText="Cancel"
       data-test="confirm-delete"
-      @confirm="deleteHandler"
-    />
-    <ConfirmationDialog
-      v-model="deactivateDialog"
+      @submit="deleteHandler"
+      @cancel="deleteDialog = false"
+    >
+      <p>Are you sure you want to permanently delete {{ user.name }}'s account?</p>
+    </KModal>
+
+    <KModal
+      v-if="deactivateDialog"
       title="Deactivate user"
-      :text="
-        `Deactivating ${user.name}'s account will block them from ` +
-          `accessing their account. Are you sure you want to continue?`
-      "
-      confirmButtonText="Deactivate"
+      submitText="Deactivate"
+      cancelText="Cancel"
       data-test="confirm-deactivate"
-      @confirm="deactivateHandler"
-    />
+      @submit="deactivateHandler"
+      @cancel="deactivateDialog = false"
+    >
+      <p>
+        Deactivating {{ user.name }}'s account will block them from accessing their account. Are you
+        sure you want to continue?
+      </p>
+    </KModal>
     <UserPrivilegeModal
       v-model="addAdminPrivilegeDialog"
       header="Add admin privileges"
@@ -106,14 +113,13 @@
 <script>
 
   import { mapActions, mapGetters, mapState } from 'vuex';
-  import ConfirmationDialog from '../../components/ConfirmationDialog';
+
   import EmailUsersDialog from './EmailUsersDialog';
   import UserPrivilegeModal from './UserPrivilegeModal';
 
   export default {
     name: 'UserActionsDropdown',
     components: {
-      ConfirmationDialog,
       EmailUsersDialog,
       UserPrivilegeModal,
     },

contentcuration/contentcuration/frontend/administration/pages/Users/__tests__/userActionsDropdown.spec.js

@@ -71,8 +71,8 @@ describe('userActionsDropdown', () => {
     });
 
     it('confirm delete user should call deleteUser', async () => {
-      wrapper.find('[data-test="confirm-delete"]').vm.$emit('confirm');
-      await wrapper.vm.$nextTick();
+      await wrapper.findComponent('[data-test="delete"]').trigger('click');
+      wrapper.findComponent('[data-test="confirm-delete"]').vm.$emit('submit');
       expect(mocks.deleteUser).toHaveBeenCalledWith(userId);
     });
 
@@ -93,8 +93,8 @@ describe('userActionsDropdown', () => {
     });
 
     it('confirm deactivate should call updateUser with is_active = false', async () => {
-      wrapper.findComponent('[data-test="confirm-deactivate"]').vm.$emit('confirm');
-      await wrapper.vm.$nextTick();
+      await wrapper.findComponent('[data-test="deactivate"]').trigger('click');
+      wrapper.findComponent('[data-test="confirm-deactivate"]').vm.$emit('submit');
       expect(mocks.updateUser).toHaveBeenCalledWith({ id: userId, is_active: false });
     });