From 08cc3e15f5070591d893961bab073e463206231b Mon Sep 17 00:00:00 2001
From: z-ABYa <189abhish@gmail.com>
Date: Wed, 15 Oct 2025 15:38:33 +0530
Subject: [PATCH 1/5] Removed MessageDialogue in favour of KModal and updated
 required test suite

---
 .../channelEdit/views/trash/TrashModal.vue    | 30 ++++++-------------
 .../views/trash/__tests__/trashModal.spec.js  |  6 ++--
 2 files changed, 13 insertions(+), 23 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
index 00822ee76b..8551f2ea6b 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
@@ -145,28 +145,16 @@
         {{ $tr('deleteButton') }}
       </VBtn>
     </template>
-    <MessageDialog
-      v-model="showConfirmationDialog"
-      :header="$tr('deleteConfirmationHeader', counts)"
-      :text="$tr('deleteConfirmationText')"
+    <KModal
+      v-if="showConfirmationDialog"
+      :title="$tr('deleteConfirmationHeader', counts)"
+      :cancelText="$tr('deleteConfirmationCancelButton')"
+      :submitText="$tr('deleteConfirmationDeleteButton')"
+      @cancel="showConfirmationDialog = false"
+      @submit="deleteNodes"
     >
-      <template #buttons="{ close }">
-        <VBtn
-          flat
-          data-test="closeconfirm"
-          @click="close"
-        >
-          {{ $tr('deleteConfirmationCancelButton') }}
-        </VBtn>
-        <VBtn
-          color="primary"
-          data-test="deleteconfirm"
-          @click="deleteNodes"
-        >
-          {{ $tr('deleteConfirmationDeleteButton') }}
-        </VBtn>
-      </template>
-    </MessageDialog>
+      <p>{{ $tr('deleteConfirmationText') }}</p>
+    </KModal>
     <MoveModal
       v-if="moveModalOpen"
       ref="moveModal"
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js
index aea6e1aa7c..538e65a164 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js
@@ -134,7 +134,8 @@ describe('trashModal', () => {
 
     it('clicking CLOSE on delete confirmation dialog should close the dialog', async () => {
       await wrapper.setData({ showConfirmationDialog: true });
-      await wrapper.findComponent('[data-test="closeconfirm"]').trigger('click');
+      const modal = wrapper.findComponent({ name: 'KModal' });
+      await modal.vm.$emit('cancel');
       expect(wrapper.vm.showConfirmationDialog).toBe(false);
     });
 
@@ -143,7 +144,8 @@ describe('trashModal', () => {
       const deleteContentNodes = jest.spyOn(wrapper.vm, 'deleteContentNodes');
       deleteContentNodes.mockImplementation(() => Promise.resolve());
       await wrapper.setData({ selected, showConfirmationDialog: true });
-      await wrapper.findComponent('[data-test="deleteconfirm"]').trigger('click');
+      const modal = wrapper.findComponent({ name: 'KModal' });
+      await modal.vm.$emit('submit');
       expect(deleteContentNodes).toHaveBeenCalledWith(selected);
     });
   });

From 8f27ec2088008f6ff5822b6d3d54a99d9b368c31 Mon Sep 17 00:00:00 2001
From: z-ABYa <189abhish@gmail.com>
Date: Thu, 23 Oct 2025 16:39:53 +0530
Subject: [PATCH 2/5] fixes linting error

---
 .../frontend/channelEdit/views/trash/TrashModal.vue             | 2 --
 1 file changed, 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
index 8551f2ea6b..fa4fc13ed4 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
@@ -178,7 +178,6 @@
   import { RouteNames } from '../../constants';
   import ContentNodeIcon from 'shared/views/ContentNodeIcon';
   import Checkbox from 'shared/views/form/Checkbox';
-  import MessageDialog from 'shared/views/MessageDialog';
   import LoadingText from 'shared/views/LoadingText';
   import FullscreenModal from 'shared/views/FullscreenModal';
   import { titleMixin, routerMixin } from 'shared/mixins';
@@ -192,7 +191,6 @@
       ContentNodeIcon,
       ResourceDrawer,
       Checkbox,
-      MessageDialog,
       LoadingText,
       FullscreenModal,
       MoveModal,

From 37bf338cc4878383360ee72bb7fd24a7776259cf Mon Sep 17 00:00:00 2001
From: z-ABYa <189abhish@gmail.com>
Date: Wed, 29 Oct 2025 22:45:38 +0530
Subject: [PATCH 3/5] added data-test

---
 .../frontend/channelEdit/views/trash/TrashModal.vue           | 1 +
 .../channelEdit/views/trash/__tests__/trashModal.spec.js      | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
index fa4fc13ed4..6be9d9e62e 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
@@ -146,6 +146,7 @@
       </VBtn>
     </template>
     <KModal
+      data-test="delete-confirmation-dialog"
       v-if="showConfirmationDialog"
       :title="$tr('deleteConfirmationHeader', counts)"
       :cancelText="$tr('deleteConfirmationCancelButton')"
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js
index 538e65a164..b0818ddd4e 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js
@@ -134,7 +134,7 @@ describe('trashModal', () => {
 
     it('clicking CLOSE on delete confirmation dialog should close the dialog', async () => {
       await wrapper.setData({ showConfirmationDialog: true });
-      const modal = wrapper.findComponent({ name: 'KModal' });
+      const modal = wrapper.find('[data-test="delete-confirmation-dialog"]');
       await modal.vm.$emit('cancel');
       expect(wrapper.vm.showConfirmationDialog).toBe(false);
     });
@@ -144,7 +144,7 @@ describe('trashModal', () => {
       const deleteContentNodes = jest.spyOn(wrapper.vm, 'deleteContentNodes');
       deleteContentNodes.mockImplementation(() => Promise.resolve());
       await wrapper.setData({ selected, showConfirmationDialog: true });
-      const modal = wrapper.findComponent({ name: 'KModal' });
+      const modal = wrapper.find('[data-test="delete-confirmation-dialog"]');
       await modal.vm.$emit('submit');
       expect(deleteContentNodes).toHaveBeenCalledWith(selected);
     });

From c31ae2b13374e2a69929a885c2b1d7906bfc2505 Mon Sep 17 00:00:00 2001
From: z-ABYa <189abhish@gmail.com>
Date: Tue, 4 Nov 2025 19:21:47 +0530
Subject: [PATCH 4/5] added data-test to KModal

---
 .../frontend/channelEdit/views/trash/TrashModal.vue         | 2 +-
 .../channelEdit/views/trash/__tests__/trashModal.spec.js    | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
index d56eaf024a..4fe8782773 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
@@ -146,8 +146,8 @@
       </KButtonGroup>
     </template>
     <KModal
-      data-test="delete-confirmation-dialog"
       v-if="showConfirmationDialog"
+      data-test="deleteconfirm"
       :title="$tr('deleteConfirmationHeader', counts)"
       :cancelText="$tr('deleteConfirmationCancelButton')"
       :submitText="$tr('deleteConfirmationDeleteButton')"
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js
index b0818ddd4e..80225b2027 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js
@@ -134,8 +134,7 @@ describe('trashModal', () => {
 
     it('clicking CLOSE on delete confirmation dialog should close the dialog', async () => {
       await wrapper.setData({ showConfirmationDialog: true });
-      const modal = wrapper.find('[data-test="delete-confirmation-dialog"]');
-      await modal.vm.$emit('cancel');
+      await wrapper.findComponent('[data-test="deleteconfirm"]').vm.$emit('cancel');
       expect(wrapper.vm.showConfirmationDialog).toBe(false);
     });
 
@@ -144,8 +143,7 @@ describe('trashModal', () => {
       const deleteContentNodes = jest.spyOn(wrapper.vm, 'deleteContentNodes');
       deleteContentNodes.mockImplementation(() => Promise.resolve());
       await wrapper.setData({ selected, showConfirmationDialog: true });
-      const modal = wrapper.find('[data-test="delete-confirmation-dialog"]');
-      await modal.vm.$emit('submit');
+      await wrapper.findComponent('[data-test="deleteconfirm"]').vm.$emit('submit');
       expect(deleteContentNodes).toHaveBeenCalledWith(selected);
     });
   });

From a6d84e90fcd551071427a2194a7b1a05c8a1eeb0 Mon Sep 17 00:00:00 2001
From: z-ABYa <189abhish@gmail.com>
Date: Tue, 4 Nov 2025 21:17:41 +0530
Subject: [PATCH 5/5] reverted to previous structure

---
 .../channelEdit/views/trash/TrashModal.vue    | 301 +++++++++---------
 1 file changed, 152 insertions(+), 149 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
index 4fe8782773..30204b1fa6 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
@@ -1,170 +1,173 @@
 <template>
 
-  <FullscreenModal
-    v-model="dialog"
-    :header="$tr('trashModalTitle')"
-  >
-    <LoadingText
-      v-if="loading"
-      data-test="loading"
-    />
-    <VContainer
-      v-else-if="!items.length"
-      fluid
-      data-test="empty"
+  <div>
+    <FullscreenModal
+      v-if="!moveModalOpen"
+      v-model="dialog"
+      :header="$tr('trashModalTitle')"
     >
-      <h1 class="font-weight-bold headline mt-4 pt-4 text-xs-center">
-        {{ $tr('trashEmptyText') }}
-      </h1>
-      <p class="mt-3 subheading text-xs-center">
-        {{ $tr('trashEmptySubtext') }}
-      </p>
-    </VContainer>
-    <VContent v-else>
+      <LoadingText
+        v-if="loading"
+        data-test="loading"
+      />
       <VContainer
+        v-else-if="!items.length"
         fluid
-        class="pa-4"
-        data-test="list"
-        style="max-height: calc(100vh - 128px); overflow-y: auto"
+        data-test="empty"
       >
-        <VCard
-          style="width: 100%; max-width: 900px; margin: 0 auto"
-          flat
-          class="pa-2"
+        <h1 class="font-weight-bold headline mt-4 pt-4 text-xs-center">
+          {{ $tr('trashEmptyText') }}
+        </h1>
+        <p class="mt-3 subheading text-xs-center">
+          {{ $tr('trashEmptySubtext') }}
+        </p>
+      </VContainer>
+      <VContent v-else>
+        <VContainer
+          fluid
+          class="pa-4"
+          data-test="list"
+          style="max-height: calc(100vh - 128px); overflow-y: auto"
         >
-          <VDataTable
-            :headers="headers"
-            :items="items"
-            hide-actions
-            must-sort
+          <VCard
+            style="width: 100%; max-width: 900px; margin: 0 auto"
+            flat
+            class="pa-2"
           >
-            <template #headerCell="props">
-              <VLayout
-                v-if="props.header.selectAll"
-                row
-                align-center
-              >
-                <VFlex shrink>
-                  <Checkbox
-                    :inputValue="selected.length === items.length"
-                    :indeterminate="!!selected.length && selected.length !== items.length"
-                    data-test="selectall"
-                    @input="toggleSelectAll"
-                  />
-                </VFlex>
-                <VFlex>
+            <VDataTable
+              :headers="headers"
+              :items="items"
+              hide-actions
+              must-sort
+            >
+              <template #headerCell="props">
+                <VLayout
+                  v-if="props.header.selectAll"
+                  row
+                  align-center
+                >
+                  <VFlex shrink>
+                    <Checkbox
+                      :inputValue="selected.length === items.length"
+                      :indeterminate="!!selected.length && selected.length !== items.length"
+                      data-test="selectall"
+                      @input="toggleSelectAll"
+                    />
+                  </VFlex>
+                  <VFlex>
+                    {{ props.header.text }}
+                  </VFlex>
+                </VLayout>
+                <span v-else>
                   {{ props.header.text }}
-                </VFlex>
-              </VLayout>
-              <span v-else>
-                {{ props.header.text }}
-              </span>
-            </template>
-            <template #items="{ item }">
-              <tr
-                :key="item.id"
-                :style="{ backgroundColor: getItemBackground(item.id) }"
-              >
-                <td>
-                  <VLayout
-                    row
-                    align-center
-                  >
-                    <VFlex shrink>
-                      <Checkbox
-                        v-model="selected"
-                        :value="item.id"
-                        data-test="checkbox"
-                      />
-                    </VFlex>
-                    <VFlex
-                      shrink
-                      class="mx-3"
+                </span>
+              </template>
+              <template #items="{ item }">
+                <tr
+                  :key="item.id"
+                  :style="{ backgroundColor: getItemBackground(item.id) }"
+                >
+                  <td>
+                    <VLayout
+                      row
+                      align-center
                     >
-                      <ContentNodeIcon :kind="item.kind" />
-                    </VFlex>
-                    <VFlex
-                      :class="getTitleClass(item)"
-                      grow
-                    >
-                      <ActionLink
-                        :text="getTitle(item)"
-                        data-test="item"
-                        @click="previewNodeId = item.id"
-                      />
-                    </VFlex>
-                  </VLayout>
-                </td>
-                <td class="text-xs-right">
-                  {{ $formatRelative(item.modified, { now: new Date() }) }}
-                </td>
-              </tr>
-            </template>
-          </VDataTable>
-          <div class="show-more-button-container">
-            <KButton
-              v-if="more"
-              :disabled="moreLoading"
-              @click="loadMore"
-            >
-              {{ showMoreLabel }}
-            </KButton>
-          </div>
-        </VCard>
-      </VContainer>
-      <ResourceDrawer
-        style="margin-top: 64px"
-        :nodeId="previewNodeId"
-        :channelId="currentChannel.id"
-        app
-        @close="previewNodeId = null"
-      />
-    </VContent>
-    <template #bottom>
-      <span
-        v-if="selected.length"
-        class="mr-4 subheading"
-      >
-        {{ getSelectedTopicAndResourceCountText(selected) }}
-      </span>
-      <VSpacer />
-      <KButtonGroup>
-        <KButton
-          appearance="flat-button"
-          :text="$tr('restoreButton')"
-          :disabled="!selected.length"
-          data-test="restore"
-          @click="moveModalOpen = true"
-        />
-        <KButton
-          :primary="true"
-          :text="$tr('deleteButton')"
-          :disabled="!selected.length"
-          data-test="delete"
-          @click="showConfirmationDialog = true"
+                      <VFlex shrink>
+                        <Checkbox
+                          v-model="selected"
+                          :value="item.id"
+                          data-test="checkbox"
+                        />
+                      </VFlex>
+                      <VFlex
+                        shrink
+                        class="mx-3"
+                      >
+                        <ContentNodeIcon :kind="item.kind" />
+                      </VFlex>
+                      <VFlex
+                        :class="getTitleClass(item)"
+                        grow
+                      >
+                        <ActionLink
+                          :text="getTitle(item)"
+                          data-test="item"
+                          @click="previewNodeId = item.id"
+                        />
+                      </VFlex>
+                    </VLayout>
+                  </td>
+                  <td class="text-xs-right">
+                    {{ $formatRelative(item.modified, { now: new Date() }) }}
+                  </td>
+                </tr>
+              </template>
+            </VDataTable>
+            <div class="show-more-button-container">
+              <KButton
+                v-if="more"
+                :disabled="moreLoading"
+                @click="loadMore"
+              >
+                {{ showMoreLabel }}
+              </KButton>
+            </div>
+          </VCard>
+        </VContainer>
+        <ResourceDrawer
+          style="margin-top: 64px"
+          :nodeId="previewNodeId"
+          :channelId="currentChannel.id"
+          app
+          @close="previewNodeId = null"
         />
-      </KButtonGroup>
-    </template>
-    <KModal
-      v-if="showConfirmationDialog"
-      data-test="deleteconfirm"
-      :title="$tr('deleteConfirmationHeader', counts)"
-      :cancelText="$tr('deleteConfirmationCancelButton')"
-      :submitText="$tr('deleteConfirmationDeleteButton')"
-      @cancel="showConfirmationDialog = false"
-      @submit="deleteNodes"
-    >
-      <p>{{ $tr('deleteConfirmationText') }}</p>
-    </KModal>
+      </VContent>
+      <template #bottom>
+        <span
+          v-if="selected.length"
+          class="mr-4 subheading"
+        >
+          {{ getSelectedTopicAndResourceCountText(selected) }}
+        </span>
+        <VSpacer />
+        <KButtonGroup>
+          <KButton
+            appearance="flat-button"
+            :text="$tr('restoreButton')"
+            :disabled="!selected.length"
+            data-test="restore"
+            @click="moveModalOpen = true"
+          />
+          <KButton
+            :primary="true"
+            :text="$tr('deleteButton')"
+            :disabled="!selected.length"
+            data-test="delete"
+            @click="showConfirmationDialog = true"
+          />
+        </KButtonGroup>
+      </template>
+      <KModal
+        v-if="showConfirmationDialog"
+        :title="$tr('deleteConfirmationHeader', counts)"
+        :cancelText="$tr('deleteConfirmationCancelButton')"
+        :submitText="$tr('deleteConfirmationDeleteButton')"
+        data-test="deleteconfirm"
+        @cancel="showConfirmationDialog = false"
+        @submit="deleteNodes"
+      >
+        <p>{{ $tr('deleteConfirmationText') }}</p>
+      </KModal>
+    </FullscreenModal>
     <MoveModal
-      v-if="moveModalOpen"
+      v-else
       ref="moveModal"
       v-model="moveModalOpen"
       :moveNodeIds="selected"
       :movingFromTrash="true"
       @target="moveNodes"
     />
-  </FullscreenModal>
+  </div>
 
 </template>