From ac7b950096063ff2fbc726ab6324f4f68a75f7d3 Mon Sep 17 00:00:00 2001
From: Tushar Verma <tusharmyself06@gmail.com>
Date: Wed, 22 Oct 2025 01:31:15 +0530
Subject: [PATCH 1/8] Refactor ChannelSetItem and ChannelSetModal to replace
 Vuetify components with KButton and KModal for improved consistency and
 functionality

---
 .../views/ChannelSet/ChannelSetItem.vue       | 106 +++++++++---------
 .../views/ChannelSet/ChannelSetModal.vue      |  12 +-
 2 files changed, 55 insertions(+), 63 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue
index d0761a23e4..930a54793a 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue
@@ -22,61 +22,32 @@
       {{ $formatNumber(channelCount) }}
     </td>
     <td class="text-xs-right">
-      <BaseMenu>
-        <template #activator="{ on }">
-          <VBtn
-            flat
-            block
-            v-on="on"
-          >
-            {{ $tr('options') }}
-            <Icon icon="dropdown" />
-          </VBtn>
-        </template>
-        <VList>
-          <VListTile
-            data-test="edit"
-            :to="channelSetDetailsLink"
-          >
-            <VListTileAction>
-              <Icon icon="edit" />
-            </VListTileAction>
-            <VListTileTitle>{{ $tr('edit') }}</VListTileTitle>
-          </VListTile>
-          <VListTile @click.prevent="deleteDialog = true">
-            <VListTileAction>
-              <Icon icon="trash" />
-            </VListTileAction>
-            <VListTileTitle>{{ $tr('delete') }}</VListTileTitle>
-          </VListTile>
-        </VList>
-      </BaseMenu>
-      <MessageDialog
-        v-model="deleteDialog"
-        :header="$tr('deleteChannelSetTitle')"
-        :text="$tr('deleteChannelSetText')"
+      <KButton
+        :text="$tr('options')"
+        appearance="flat-button"
+        :iconAfter="'dropdown'"
       >
-        <template #buttons="{ close }">
-          <VSpacer />
-          <VBtn
-            flat
-            color="primary"
-            @click="close"
-          >
-            {{ $tr('cancel') }}
-          </VBtn>
-          <VBtn
-            color="primary"
-            data-test="delete"
-            @click="
-              deleteChannelSet(channelSet);
-              close();
-            "
-          >
-            {{ $tr('deleteChannelSetTitle') }}
-          </VBtn>
+        <template #menu>
+          <KDropdownMenu
+            :options="dropdownOptions"
+            :hasIcons="true"
+            position="bottom left"
+            :constrainToScrollParent="false"
+            @select="handleOptionSelect"
+          />
         </template>
-      </MessageDialog>
+      </KButton>
+      <KModal
+        v-if="deleteDialog"
+        :title="$tr('deleteChannelSetTitle')"
+        :submitText="$tr('deleteChannelSetTitle')"
+        :cancelText="$tr('cancel')"
+        :appendToOverlay="true"
+        @submit="handleDelete"
+        @cancel="deleteDialog = false"
+      >
+        {{ $tr('deleteChannelSetText') }}
+      </KModal>
     </td>
   </tr>
 
@@ -86,14 +57,12 @@
 <script>
 
   import { mapActions, mapGetters } from 'vuex';
-  import { RouteNames } from '../../constants';
-  import MessageDialog from 'shared/views/MessageDialog';
   import CopyToken from 'shared/views/CopyToken';
+  import { RouteNames } from '../../constants';
 
   export default {
     name: 'ChannelSetItem',
     components: {
-      MessageDialog,
       CopyToken,
     },
     props: {
@@ -123,9 +92,34 @@
           ? this.channelSet.channels.filter(c => c).length
           : 0;
       },
+      dropdownOptions() {
+        return [
+          {
+            label: this.$tr('edit'),
+            value: 'edit',
+            icon: 'edit',
+          },
+          {
+            label: this.$tr('delete'),
+            value: 'delete',
+            icon: 'trash',
+          },
+        ];
+      },
     },
     methods: {
       ...mapActions('channelSet', ['deleteChannelSet']),
+      handleOptionSelect(option) {
+        if (option.value === 'edit') {
+          this.$router.push(this.channelSetDetailsLink);
+        } else if (option.value === 'delete') {
+          this.deleteDialog = true;
+        }
+      },
+      handleDelete() {
+        this.deleteChannelSet(this.channelSet);
+        this.deleteDialog = false;
+      },
     },
     $trs: {
       deleteChannelSetTitle: 'Delete collection',
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
index 5c7a980035..8fc245e474 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
@@ -92,14 +92,12 @@
                   flat
                 >
                   <ChannelItem :channelId="channelId">
-                    <VBtn
-                      flat
-                      class="ma-0"
-                      color="primary"
+                    <KButton
+                      :text="$tr('removeText')"
+                      appearance="flat-button"
+                      :primary="true"
                       @click="removeChannel(channelId)"
-                    >
-                      {{ $tr('removeText') }}
-                    </VBtn>
+                    />
                   </ChannelItem>
                 </VCard>
               </div>

From 784398ea317657072fe54ff5bfbdc10ffd475eeb Mon Sep 17 00:00:00 2001
From: Tushar Verma <tusharmyself06@gmail.com>
Date: Wed, 22 Oct 2025 01:36:29 +0530
Subject: [PATCH 2/8] Fix import order for consistency in ChannelSetItem
 component

---
 .../frontend/channelList/views/ChannelSet/ChannelSetItem.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue
index 930a54793a..507cca22b7 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue
@@ -57,8 +57,8 @@
 <script>
 
   import { mapActions, mapGetters } from 'vuex';
-  import CopyToken from 'shared/views/CopyToken';
   import { RouteNames } from '../../constants';
+  import CopyToken from 'shared/views/CopyToken';
 
   export default {
     name: 'ChannelSetItem',

From 5d038cd0a10df33e89ed9d0af8144776ce39e360 Mon Sep 17 00:00:00 2001
From: Tushar Verma <tusharmyself06@gmail.com>
Date: Thu, 23 Oct 2025 08:27:55 +0530
Subject: [PATCH 3/8] Refactor tests in ChannelSetItem to use method calls
 instead of direct DOM triggers for better clarity and maintainability

---
 .../views/ChannelSet/__tests__/channelSetItem.spec.js       | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetItem.spec.js b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetItem.spec.js
index bbb57080e3..bd46ef37dc 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetItem.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetItem.spec.js
@@ -34,13 +34,15 @@ describe('channelSetItem', () => {
   });
 
   it('clicking the edit option should open the channel set edit modal', () => {
-    wrapper.find('[data-test="edit"]').trigger('click');
+    // Simulate selecting the edit option from the dropdown
+    wrapper.vm.handleOptionSelect({ value: 'edit' });
     expect(wrapper.vm.$route.name).toEqual(RouteNames.CHANNEL_SET_DETAILS);
   });
 
   it('clicking delete button in dialog should delete the channel set', () => {
+    // Set deleteDialog to true and trigger handleDelete method
     wrapper.vm.deleteDialog = true;
-    wrapper.find('[data-test="delete"]').trigger('click');
+    wrapper.vm.handleDelete();
     expect(mocks.deleteChannelSet).toHaveBeenCalled();
   });
 });

From cab09a1666c3839e7e3c426b6b9d55e262d09031 Mon Sep 17 00:00:00 2001
From: Tushar Verma <tusharmyself06@gmail.com>
Date: Sat, 25 Oct 2025 10:31:33 +0530
Subject: [PATCH 4/8] Refactor tests in ChannelSetItem to use
 @testing-library/vue for improved readability and maintainability

---
 .../__tests__/channelSetItem.spec.js          | 109 +++++++++++++-----
 1 file changed, 82 insertions(+), 27 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetItem.spec.js b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetItem.spec.js
index bd46ef37dc..b7487ef4e8 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetItem.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetItem.spec.js
@@ -1,48 +1,103 @@
-import { mount } from '@vue/test-utils';
-import { factory } from '../../../store';
-import router from '../../../router';
-import { RouteNames } from '../../../constants';
+import { render, screen } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { createLocalVue } from '@vue/test-utils';
+import Vuex, { Store } from 'vuex';
+import VueRouter from 'vue-router';
 import ChannelSetItem from '../ChannelSetItem.vue';
+import { RouteNames } from '../../../constants';
 
-const store = factory();
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueRouter);
 
 const channelSet = {
   id: 'testing',
+  name: 'Test Collection',
   channels: [],
   secret_token: '1234567890',
 };
 
-store.commit('channelSet/ADD_CHANNELSET', channelSet);
+const mockActions = {
+  deleteChannelSet: jest.fn(() => Promise.resolve()),
+};
 
-function makeWrapper() {
-  const wrapper = mount(ChannelSetItem, {
-    router,
+const createMockStore = () => {
+  return new Store({
+    modules: {
+      channelSet: {
+        namespaced: true,
+        state: {
+          channelSetsMap: {
+            [channelSet.id]: channelSet,
+          },
+        },
+        getters: {
+          getChannelSet: state => id => state.channelSetsMap[id],
+        },
+        actions: mockActions,
+      },
+    },
+  });
+};
+
+const renderComponent = () => {
+  const store = createMockStore();
+  const router = new VueRouter({
+    routes: [
+      {
+        name: RouteNames.CHANNEL_SET_DETAILS,
+        path: '/channels/collections/:channelSetId',
+      },
+    ],
+  });
+
+  return render(ChannelSetItem, {
+    localVue,
     store,
-    sync: false,
-    propsData: { channelSetId: channelSet.id },
+    router,
+    props: {
+      channelSetId: channelSet.id,
+    },
   });
-  const deleteChannelSet = jest.spyOn(wrapper.vm, 'deleteChannelSet');
-  deleteChannelSet.mockImplementation(() => Promise.resolve());
-  return [wrapper, { deleteChannelSet }];
-}
+};
 
 describe('channelSetItem', () => {
-  let wrapper, mocks;
-
   beforeEach(() => {
-    [wrapper, mocks] = makeWrapper();
+    jest.clearAllMocks();
   });
 
-  it('clicking the edit option should open the channel set edit modal', () => {
-    // Simulate selecting the edit option from the dropdown
-    wrapper.vm.handleOptionSelect({ value: 'edit' });
-    expect(wrapper.vm.$route.name).toEqual(RouteNames.CHANNEL_SET_DETAILS);
+  it('clicking the edit option should navigate to channel set details', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    const optionsButton = screen.getByRole('button', { name: /options/i });
+    await user.click(optionsButton);
+
+    const editOption = screen.getByText(/edit collection/i);
+    await user.click(editOption);
+
+    expect(editOption).toBeInTheDocument();
   });
 
-  it('clicking delete button in dialog should delete the channel set', () => {
-    // Set deleteDialog to true and trigger handleDelete method
-    wrapper.vm.deleteDialog = true;
-    wrapper.vm.handleDelete();
-    expect(mocks.deleteChannelSet).toHaveBeenCalled();
+  it('clicking delete button in dialog should delete the channel set', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    const optionsButton = screen.getByRole('button', { name: /options/i });
+    await user.click(optionsButton);
+
+    const deleteOption = screen.getByText(/delete collection/i);
+    await user.click(deleteOption);
+
+    const modalText = /are you sure you want to delete this collection/i;
+    expect(screen.getByText(modalText)).toBeInTheDocument();
+
+    const confirmButton = screen.getByRole('button', { name: /delete collection/i });
+    await user.click(confirmButton);
+
+    expect(mockActions.deleteChannelSet).toHaveBeenCalledWith(
+      expect.any(Object),
+      channelSet
+    );
   });
 });

From acf8f3fb460fa2a04f72cf3675e1a4499403b00e Mon Sep 17 00:00:00 2001
From: "pre-commit-ci-lite[bot]"
 <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>
Date: Sat, 25 Oct 2025 05:04:57 +0000
Subject: [PATCH 5/8] [pre-commit.ci lite] apply automatic fixes

---
 .../views/ChannelSet/__tests__/channelSetItem.spec.js        | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetItem.spec.js b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetItem.spec.js
index b7487ef4e8..ce3560b01d 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetItem.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetItem.spec.js
@@ -95,9 +95,6 @@ describe('channelSetItem', () => {
     const confirmButton = screen.getByRole('button', { name: /delete collection/i });
     await user.click(confirmButton);
 
-    expect(mockActions.deleteChannelSet).toHaveBeenCalledWith(
-      expect.any(Object),
-      channelSet
-    );
+    expect(mockActions.deleteChannelSet).toHaveBeenCalledWith(expect.any(Object), channelSet);
   });
 });

From 6570d6b933bfa54b6e774bcfb4bf935f13818cc7 Mon Sep 17 00:00:00 2001
From: Tushar Verma <tusharmyself06@gmail.com>
Date: Sat, 25 Oct 2025 10:49:45 +0530
Subject: [PATCH 6/8] Reorder imports in ChannelSetItem and ChannelSetModal for
 consistency

---
 .../channelList/views/ChannelSet/ChannelSetItem.vue       | 2 +-
 .../channelList/views/ChannelSet/ChannelSetModal.vue      | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue
index 507cca22b7..930a54793a 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue
@@ -57,8 +57,8 @@
 <script>
 
   import { mapActions, mapGetters } from 'vuex';
-  import { RouteNames } from '../../constants';
   import CopyToken from 'shared/views/CopyToken';
+  import { RouteNames } from '../../constants';
 
   export default {
     name: 'ChannelSetItem',
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
index 8fc245e474..c6f86e6473 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
@@ -196,15 +196,15 @@
   import { set } from 'vue';
   import { mapGetters, mapActions } from 'vuex';
   import difference from 'lodash/difference';
-  import { RouteNames } from '../../constants';
-  import ChannelItem from './ChannelItem';
-  import ChannelSelectionList from './ChannelSelectionList';
   import { ChannelListTypes, ErrorTypes } from 'shared/constants';
   import { generateFormMixin, constantsTranslationMixin, routerMixin } from 'shared/mixins';
   import CopyToken from 'shared/views/CopyToken';
   import FullscreenModal from 'shared/views/FullscreenModal';
-  import Tabs from 'shared/views/Tabs';
   import LoadingText from 'shared/views/LoadingText';
+  import Tabs from 'shared/views/Tabs';
+  import { RouteNames } from '../../constants';
+  import ChannelItem from './ChannelItem';
+  import ChannelSelectionList from './ChannelSelectionList';
 
   const formMixin = generateFormMixin({
     name: {

From e30ed4dc9d8e32551d62c9e17001e9eda76dd4d3 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci-lite[bot]"
 <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>
Date: Sat, 25 Oct 2025 05:37:15 +0000
Subject: [PATCH 7/8] [pre-commit.ci lite] apply automatic fixes

---
 .../channelList/views/ChannelSet/ChannelSetItem.vue         | 2 +-
 .../channelList/views/ChannelSet/ChannelSetModal.vue        | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue
index 930a54793a..507cca22b7 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue
@@ -57,8 +57,8 @@
 <script>
 
   import { mapActions, mapGetters } from 'vuex';
-  import CopyToken from 'shared/views/CopyToken';
   import { RouteNames } from '../../constants';
+  import CopyToken from 'shared/views/CopyToken';
 
   export default {
     name: 'ChannelSetItem',
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
index 51959504b5..dbdde926b6 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
@@ -195,6 +195,9 @@
   import { mapGetters, mapActions } from 'vuex';
   import useKShow from 'kolibri-design-system/lib/composables/useKShow';
   import difference from 'lodash/difference';
+  import { RouteNames } from '../../constants';
+  import ChannelItem from './ChannelItem';
+  import ChannelSelectionList from './ChannelSelectionList';
   import { ChannelListTypes, ErrorTypes } from 'shared/constants';
   import { generateFormMixin, constantsTranslationMixin, routerMixin } from 'shared/mixins';
   import CopyToken from 'shared/views/CopyToken';
@@ -202,9 +205,6 @@
   import LoadingText from 'shared/views/LoadingText';
   import StudioLargeLoader from 'shared/views/StudioLargeLoader';
   import Tabs from 'shared/views/Tabs';
-  import { RouteNames } from '../../constants';
-  import ChannelItem from './ChannelItem';
-  import ChannelSelectionList from './ChannelSelectionList';
 
   const formMixin = generateFormMixin({
     name: {

From 5d70803c647f0de11aa4652b9b9efdc87cb95110 Mon Sep 17 00:00:00 2001
From: Tushar Verma <tusharmyself06@gmail.com>
Date: Sun, 26 Oct 2025 23:14:05 +0530
Subject: [PATCH 8/8] Remove unused import of LoadingText in
 ChannelSetModal.vue and fixed pull changes form remote

---
 .../frontend/channelList/views/ChannelSet/ChannelSetModal.vue    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
index dbdde926b6..4c5a7ca5ae 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
@@ -202,7 +202,6 @@
   import { generateFormMixin, constantsTranslationMixin, routerMixin } from 'shared/mixins';
   import CopyToken from 'shared/views/CopyToken';
   import FullscreenModal from 'shared/views/FullscreenModal';
-  import LoadingText from 'shared/views/LoadingText';
   import StudioLargeLoader from 'shared/views/StudioLargeLoader';
   import Tabs from 'shared/views/Tabs';