[Remove Vuetify from Studio] Deactivate and delete confirmation dialogs in admin user actions

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

@@ -1,25 +1,29 @@
 <template>
 
   <div>
-    <ConfirmationDialog
-      v-model="deleteDialog"
-      title="Delete user"
-      :text="`Are you sure you want to permanently delete ${user.name}'s account?`"
-      confirmButtonText="Delete"
+    <KModal
+      v-if="deleteDialog"
+      :title="$tr('deleteUserTitle')"
+      :submitText="$tr('deleteAction')"
+      :cancelText="$tr('cancelAction')"
       data-test="confirm-delete"
-      @confirm="deleteHandler"
-    />
-    <ConfirmationDialog
-      v-model="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"
+      @submit="deleteHandler"
+      @cancel="deleteDialog = false"
+    >
+      <p>{{ $tr('deleteUserMessage', { name: user.name }) }}</p>
+    </KModal>
+
+    <KModal
+      v-if="deactivateDialog"
+      :title="$tr('deactivateUserTitle')"
+      :submitText="$tr('deactivateAction')"
+      :cancelText="$tr('cancelAction')"
       data-test="confirm-deactivate"
-      @confirm="deactivateHandler"
-    />
+      @submit="deactivateHandler"
+      @cancel="deactivateDialog = false"
+    >
+      <p>{{ $tr('deactivateUserMessage', { name: user.name }) }}</p>
+    </KModal>
     <UserPrivilegeModal
       v-model="addAdminPrivilegeDialog"
       header="Add admin privileges"
@@ -106,14 +110,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,
     },
@@ -174,6 +177,16 @@
         });
       },
     },
+    $trs: {
+      deleteUserTitle: 'Delete user',
+      deleteAction: 'Delete',
+      deleteUserMessage: "Are you sure you want to permanently delete {name}'s account?",
+      deactivateUserTitle: 'Deactivate user',
+      deactivateAction: 'Deactivate',
+      deactivateUserMessage:
+        "Deactivating {name}'s account will block them from accessing their account. Are you sure you want to continue?",
+      cancelAction: 'Cancel',
+    },
   };
 
 </script>

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