[Remove Vuetify from Studio] Delete, restore, and visibility confirmation dialogs in admin channel actions

contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue

@@ -1,54 +1,25 @@
 <template>
 
   <div>
-    <ConfirmationDialog
-      v-model="restoreDialog"
-      title="Restore channel"
-      :text="`Are you sure you want to restore ${name} and make it active again?`"
-      data-test="confirm-restore"
-      confirmButtonText="Restore"
-      @confirm="restoreHandler"
-    />
+    <KModal
+      v-if="activeDialog"
+      :title="dialogConfig.title"
+      :submitText="dialogConfig.submitText"
+      cancelText="Cancel"
+      :data-test="dialogConfig.testId"
+      @submit="handleSubmit"
+      @cancel="activeDialog = null"
+    >
+      <p>{{ dialogConfig.message }}</p>
+    </KModal>
 
-    <ConfirmationDialog
-      v-model="makePublicDialog"
-      title="Make channel public"
-      :text="`All users will be able to view and import content from ${name}.`"
-      data-test="confirm-public"
-      confirmButtonText="Make public"
-      @confirm="makePublicHandler"
-    />
-    <ConfirmationDialog
-      v-model="makePrivateDialog"
-      title="Make channel private"
-      :text="`Only users with view-only or edit permissions will be able to access ${name}.`"
-      data-test="confirm-private"
-      confirmButtonText="Make private"
-      @confirm="makePrivateHandler"
-    />
-    <ConfirmationDialog
-      v-model="deleteDialog"
-      title="Permanently delete channel"
-      :text="`Are you sure you want to permanently delete ${name}?  This can not be undone.`"
-      data-test="confirm-delete"
-      confirmButtonText="Delete permanently"
-      @confirm="deleteHandler"
-    />
-    <ConfirmationDialog
-      v-model="softDeleteDialog"
-      title="Permanently delete channel"
-      :text="`Are you sure you want to delete ${name}?`"
-      data-test="confirm-softdelete"
-      confirmButtonText="Delete"
-      @confirm="softDeleteHandler"
-    />
     <BaseMenu>
       <template #activator="{ on }">
         <VBtn
           v-bind="$attrs"
           v-on="on"
         >
-          actions
+          Actions
           <Icon
             icon="dropdown"
             class="ml-1"
@@ -59,13 +30,13 @@
         <template v-if="channel.deleted">
           <VListTile
             data-test="restore"
-            @click="restoreDialog = true"
+            @click="openDialog('restore')"
           >
             <VListTileTitle>Restore</VListTileTitle>
           </VListTile>
           <VListTile
             data-test="delete"
-            @click="deleteDialog = true"
+            @click="openDialog('permanentDelete')"
           >
             <VListTileTitle>Delete permanently</VListTileTitle>
           </VListTile>
@@ -92,21 +63,21 @@
           <VListTile
             v-if="channel.public"
             data-test="private"
-            @click="makePrivateDialog = true"
+            @click="openDialog('makePrivate')"
           >
             <VListTileTitle>Make private</VListTileTitle>
           </VListTile>
           <VListTile
             v-else
             data-test="public"
-            @click="makePublicDialog = true"
+            @click="openDialog('makePublic')"
           >
             <VListTileTitle>Make public</VListTileTitle>
           </VListTile>
           <VListTile
             v-if="!channel.public"
             data-test="softdelete"
-            @click="softDeleteDialog = true"
+            @click="openDialog('softDelete')"
           >
             <VListTileTitle>Delete channel</VListTileTitle>
           </VListTile>
@@ -121,15 +92,11 @@
 <script>
 
   import { mapActions, mapGetters } from 'vuex';
-  import ConfirmationDialog from '../../components/ConfirmationDialog';
   import { RouteNames } from '../../constants';
   import { channelExportMixin } from 'shared/views/channel/mixins';
 
   export default {
     name: 'ChannelActionsDropdown',
-    components: {
-      ConfirmationDialog,
-    },
     mixins: [channelExportMixin],
     props: {
       channelId: {
@@ -138,11 +105,7 @@
       },
     },
     data: () => ({
-      deleteDialog: false,
-      makePublicDialog: false,
-      makePrivateDialog: false,
-      restoreDialog: false,
-      softDeleteDialog: false,
+      activeDialog: null,
     }),
     computed: {
       ...mapGetters('channel', ['getChannel']),
@@ -160,13 +123,62 @@
           },
         };
       },
+      dialogConfig() {
+        const configs = {
+          restore: {
+            title: 'Restore channel',
+            submitText: 'Restore',
+            message: `Are you sure you want to restore ${this.name} and make it active again?`,
+            testId: 'confirm-restore',
+            handler: this.restoreHandler,
+          },
+          makePublic: {
+            title: 'Make channel public',
+            submitText: 'Make public',
+            message: `All users will be able to view and import content from ${this.name}.`,
+            testId: 'confirm-public',
+            handler: this.makePublicHandler,
+          },
+          makePrivate: {
+            title: 'Make channel private',
+            submitText: 'Make private',
+            message: `Only users with view-only or edit permissions will be able to access ${this.name}.`,
+            testId: 'confirm-private',
+            handler: this.makePrivateHandler,
+          },
+          permanentDelete: {
+            title: 'Permanently delete channel',
+            submitText: 'Delete permanently',
+            message: `Are you sure you want to permanently delete ${this.name}? This can not be undone.`,
+            testId: 'confirm-delete',
+            handler: this.deleteHandler,
+          },
+          softDelete: {
+            title: 'Delete channel',
+            submitText: 'Delete',
+            message: `Are you sure you want to delete ${this.name}?`,
+            testId: 'confirm-softdelete',
+            handler: this.softDeleteHandler,
+          },
+        };
+        return configs[this.activeDialog] || {};
+      },
     },
     methods: {
       ...mapActions('channelAdmin', [
         'getAdminChannelListDetails',
         'deleteChannel',
         'updateChannel',
       ]),
+      openDialog(type) {
+        this.activeDialog = type;
+      },
+      handleSubmit() {
+        if (this.dialogConfig.handler) {
+          this.dialogConfig.handler();
+        }
+        this.activeDialog = null;
+      },
       async downloadPDF() {
         this.$store.dispatch('showSnackbarSimple', 'Generating PDF...');
         const channelList = await this.getAdminChannelListDetails([this.channel.id]);
@@ -178,7 +190,6 @@
         return this.generateChannelsCSV(channelList);
       },
       restoreHandler() {
-        this.restoreDialog = false;
         this.updateChannel({
           id: this.channelId,
           deleted: false,
@@ -187,7 +198,6 @@
         });
       },
       softDeleteHandler() {
-        this.softDeleteDialog = false;
         this.updateChannel({
           id: this.channelId,
           deleted: true,
@@ -196,14 +206,12 @@
         });
       },
       deleteHandler() {
-        this.deleteDialog = false;
         this.$emit('deleted');
         return this.deleteChannel(this.channelId).then(() => {
           this.$store.dispatch('showSnackbarSimple', 'Channel deleted permanently');
         });
       },
       makePublicHandler() {
-        this.makePublicDialog = false;
         this.updateChannel({
           id: this.channelId,
           isPublic: true,
@@ -212,7 +220,6 @@
         });
       },
       makePrivateHandler() {
-        this.makePrivateDialog = false;
         this.updateChannel({
           id: this.channelId,
           isPublic: false,