From 789809d6113ce2af2220ed137efa08817eddc916 Mon Sep 17 00:00:00 2001
From: Tushar Verma <tusharmyself06@gmail.com>
Date: Fri, 19 Dec 2025 12:04:05 +0530
Subject: [PATCH 01/10] added StudioCatalogList.vue following past PRs

---
 .../views/Channel/StudioCatalogList.vue       | 331 ++++++++++++++++++
 1 file changed, 331 insertions(+)
 create mode 100644 contentcuration/contentcuration/frontend/channelList/views/Channel/StudioCatalogList.vue

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioCatalogList.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioCatalogList.vue
new file mode 100644
index 0000000000..56df318604
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioCatalogList.vue
@@ -0,0 +1,331 @@
+<template>
+
+  <div>
+    <CatalogFilters />
+    <ToolBar
+      v-show="offline"
+      dense
+      clipped-left
+      absolute
+    >
+      <OfflineText />
+    </ToolBar>
+    <div
+      class="catalog-content"
+      :style="{ marginTop: offline ? '48px' : '0', padding: windowIsSmall ? '0' : '16px' }"
+    >
+      <LoadingText v-if="loading" />
+      <div
+        v-else
+        class="list-wrapper"
+      >
+        <div class="results-header">
+          <h1 class="results-title">
+            {{ $tr('resultsText', { count: page.count }) }}
+          </h1>
+          <KButton
+            v-if="page.count && !selecting"
+            :text="$tr('selectChannels')"
+            data-test="select"
+            appearance="basic-link"
+            @click="setSelection(true)"
+          />
+          <KCheckbox
+            v-else-if="selecting"
+            :checked="selectAll"
+            :indeterminate="isIndeterminate"
+            :label="$tr('selectAll')"
+            data-test="select-all"
+            @change="toggleSelectAll"
+          />
+        </div>
+
+        <KCardGrid
+          layout="1-1-1"
+          :skeletonsConfig="[
+            {
+              breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+              orientation: 'vertical',
+              count: 3,
+            },
+          ]"
+        >
+          <StudioChannelCard
+            v-for="channel in channels"
+            :key="channel.id"
+            :channel="channel"
+            :selectable="selecting"
+            :selected="isChannelSelected(channel.id)"
+            @toggle-selection="handleSelectionToggle"
+          />
+        </KCardGrid>
+
+        <!-- Pagination -->
+        <div class="pagination-wrapper">
+          <Pagination
+            :pageNumber="page.page_number"
+            :totalPages="page.total_pages"
+          />
+        </div>
+      </div>
+    </div>
+
+    <BottomBar
+      v-if="selecting"
+      data-test="toolbar"
+    >
+      <div>
+        {{ $tr('channelSelectionCount', { count: selectedCount }) }}
+      </div>
+      <div class="spacer"></div>
+      <div>
+        <KButton
+          :text="$tr('cancelButton')"
+          data-test="cancel"
+          appearance="flat-button"
+          @click="setSelection(false)"
+        />
+      </div>
+      <KButton
+        :text="$tr('downloadButton')"
+        primary
+        data-test="download-button"
+        iconAfter="dropup"
+      >
+        <template #menu>
+          <KDropdownMenu
+            primary
+            :options="[
+              { label: $tr('downloadPDF'), value: 'pdf' },
+              { label: $tr('downloadCSV'), value: 'csv' },
+            ]"
+            appearance="raised-button"
+            @select="selectDownloadOption"
+          />
+        </template>
+      </KButton>
+    </BottomBar>
+  </div>
+
+</template>
+
+
+<script>
+
+  import { mapActions, mapGetters, mapState } from 'vuex';
+  import debounce from 'lodash/debounce';
+  import difference from 'lodash/difference';
+  import isEqual from 'lodash/isEqual';
+  import sortBy from 'lodash/sortBy';
+  import union from 'lodash/union';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import { RouteNames } from '../../constants';
+  import CatalogFilters from './CatalogFilters';
+  import StudioChannelCard from './components/StudioChannelCard';
+  import { constantsTranslationMixin } from 'shared/mixins';
+  import { channelExportMixin } from 'shared/views/channel/mixins';
+  import BottomBar from 'shared/views/BottomBar';
+  import LoadingText from 'shared/views/LoadingText';
+  import OfflineText from 'shared/views/OfflineText';
+  import Pagination from 'shared/views/Pagination';
+  import ToolBar from 'shared/views/ToolBar';
+
+  export default {
+    name: 'StudioCatalogList',
+    components: {
+      StudioChannelCard,
+      LoadingText,
+      CatalogFilters,
+      Pagination,
+      BottomBar,
+      ToolBar,
+      OfflineText,
+    },
+    mixins: [channelExportMixin, constantsTranslationMixin],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
+    data() {
+      return {
+        loading: true,
+        loadError: false,
+        selecting: false,
+        previousQuery: this.$route.query,
+        excluded: [],
+      };
+    },
+    computed: {
+      ...mapGetters('channel', ['getChannels']),
+      ...mapState('channelList', ['page']),
+      ...mapState({
+        offline: state => !state.connection.online,
+      }),
+      selectAll: {
+        get() {
+          return this.selected.length === this.channels.length;
+        },
+        set(value) {
+          this.selected = value ? this.page.results : [];
+        },
+      },
+      selected: {
+        get() {
+          return difference(this.page.results, this.excluded);
+        },
+        set(selected) {
+          this.excluded = union(
+            this.excluded.filter(id => !selected.includes(id)),
+            difference(this.page.results, selected),
+          );
+        },
+      },
+      isIndeterminate() {
+        return this.selected.length > 0 && this.selected.length < this.channels.length;
+      },
+      debouncedSearch() {
+        return debounce(this.loadCatalog, 1000);
+      },
+      channels() {
+        return sortBy(this.getChannels(this.page.results), 'name');
+      },
+      selectedCount() {
+        return this.page.count - this.excluded.length;
+      },
+    },
+    watch: {
+      $route(to) {
+        if (!isEqual(to.query, this.previousQuery) && to.name === RouteNames.CATALOG_ITEMS) {
+          this.loading = true;
+          this.debouncedSearch();
+
+          const ignoreDefaults = { page: 0 };
+          const toQuery = { ...to.query, ...ignoreDefaults };
+          const fromQuery = { ...this.previousQuery, ...ignoreDefaults };
+          if (!isEqual(toQuery, fromQuery)) {
+            this.setSelection(false);
+          }
+        }
+        this.previousQuery = { ...to.query };
+      },
+    },
+    mounted() {
+      this.loadCatalog();
+    },
+    methods: {
+      ...mapActions('channelList', ['searchCatalog']),
+      isChannelSelected(channelId) {
+        return this.selected.includes(channelId);
+      },
+      handleSelectionToggle(channelId) {
+        const currentlySelected = this.selected;
+        if (currentlySelected.includes(channelId)) {
+          this.selected = currentlySelected.filter(id => id !== channelId);
+        } else {
+          this.selected = [...currentlySelected, channelId];
+        }
+      },
+      toggleSelectAll() {
+        this.selectAll = !this.selectAll;
+      },
+      loadCatalog() {
+        this.loading = true;
+        const params = {
+          ...this.$route.query,
+        };
+        return this.searchCatalog(params)
+          .then(() => {
+            this.loading = false;
+          })
+          .catch(() => {
+            this.loadError = true;
+            this.loading = false;
+          });
+      },
+      setSelection(selecting) {
+        this.selecting = selecting;
+        if (!selecting) {
+          this.excluded = [];
+        }
+      },
+      downloadCSV() {
+        this.$store.dispatch('showSnackbar', { text: this.$tr('downloadingMessage') });
+        const params = {
+          excluded: this.excluded.slice(0),
+          ...this.$route.query,
+        };
+        this.setSelection(false);
+        return this.downloadChannelsCSV(params);
+      },
+      downloadPDF() {
+        this.$store.dispatch('showSnackbar', { text: this.$tr('downloadingMessage') });
+        const params = {
+          excluded: this.excluded.slice(0),
+          ...this.$route.query,
+        };
+        this.setSelection(false);
+        return this.downloadChannelsPDF(params);
+      },
+      selectDownloadOption(option) {
+        if (option.value === 'pdf') {
+          this.downloadPDF();
+        } else if (option.value === 'csv') {
+          this.downloadCSV();
+        }
+      },
+    },
+    $trs: {
+      resultsText: '{count, plural,\n =1 {# result found}\n other {# results found}}',
+      selectChannels: 'Download a summary of selected channels',
+      cancelButton: 'Cancel',
+      downloadButton: 'Download',
+      downloadCSV: 'Download CSV',
+      downloadPDF: 'Download PDF',
+      downloadingMessage: 'Download started',
+      channelSelectionCount:
+        '{count, plural,\n =1 {# channel selected}\n other {# channels selected}}',
+      selectAll: 'Select all',
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .catalog-content {
+    width: 100%;
+  }
+
+  .list-wrapper {
+    max-width: 1080px;
+    padding: 16px 0;
+    margin: 0 auto;
+  }
+
+  .results-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+  }
+
+  .results-title {
+    margin: 0 0 8px 4px;
+    font-size: 24px;
+    font-weight: bold;
+  }
+
+  .pagination-wrapper {
+    display: flex;
+    justify-content: center;
+    padding: 16px 0 72px;
+  }
+
+  .spacer {
+    flex: 1;
+  }
+
+</style>

From 40e62b039caf7e71913f1fb9ed5647d4b8d0499e Mon Sep 17 00:00:00 2001
From: Tushar Verma <tusharmyself06@gmail.com>
Date: Fri, 19 Dec 2025 12:13:23 +0530
Subject: [PATCH 02/10] fixed UI for select button

---
 .../views/Channel/StudioCatalogList.vue            | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioCatalogList.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioCatalogList.vue
index 56df318604..c6598699f0 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioCatalogList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioCatalogList.vue
@@ -23,6 +23,8 @@
           <h1 class="results-title">
             {{ $tr('resultsText', { count: page.count }) }}
           </h1>
+        </div>
+        <div class="selection-controls">
           <KButton
             v-if="page.count && !selecting"
             :text="$tr('selectChannels')"
@@ -306,18 +308,20 @@
   }
 
   .results-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 16px;
+    margin-bottom: 8px;
   }
 
   .results-title {
-    margin: 0 0 8px 4px;
+    margin: 0 0 0 4px;
     font-size: 24px;
     font-weight: bold;
   }
 
+  .selection-controls {
+    margin-bottom: 16px;
+    margin-left: 8px;
+  }
+
   .pagination-wrapper {
     display: flex;
     justify-content: center;

From a4d96a3f86c059c10695abf40274643b920ca4b7 Mon Sep 17 00:00:00 2001
From: Tushar Verma <tusharmyself06@gmail.com>
Date: Fri, 19 Dec 2025 12:14:02 +0530
Subject: [PATCH 03/10] fixed import in router for StudioCatalogList

---
 .../contentcuration/frontend/channelList/router.js            | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/router.js b/contentcuration/contentcuration/frontend/channelList/router.js
index ebf39a4736..905c64338d 100644
--- a/contentcuration/contentcuration/frontend/channelList/router.js
+++ b/contentcuration/contentcuration/frontend/channelList/router.js
@@ -4,7 +4,7 @@ import StudioStarredChannels from './views/Channel/StudioStarredChannels.vue';
 import StudioViewOnlyChannels from './views/Channel/StudioViewOnlyChannels.vue';
 import ChannelSetList from './views/ChannelSet/ChannelSetList';
 import ChannelSetModal from './views/ChannelSet/ChannelSetModal';
-import CatalogList from './views/Channel/CatalogList';
+import StudioCatalogList from './views/Channel/StudioCatalogList';
 import { RouteNames } from './constants';
 import CatalogFAQ from './views/Channel/CatalogFAQ';
 import ChannelModal from 'shared/views/channel/ChannelModal';
@@ -66,7 +66,7 @@ const router = new VueRouter({
     {
       name: RouteNames.CATALOG_ITEMS,
       path: '/public',
-      component: CatalogList,
+      component: StudioCatalogList,
     },
     {
       name: RouteNames.CATALOG_DETAILS,

From 1823d792285c2f87e75a2c36f54cdc19718955c1 Mon Sep 17 00:00:00 2001
From: Tushar Verma <tusharmyself06@gmail.com>
Date: Fri, 19 Dec 2025 12:14:42 +0530
Subject: [PATCH 04/10] Added Checkbox in StudioChannalCaard with select slot

---
 .../Channel/components/StudioChannelCard.vue  | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/components/StudioChannelCard.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/components/StudioChannelCard.vue
index c0cd7271cf..c554f674aa 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/components/StudioChannelCard.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/components/StudioChannelCard.vue
@@ -14,6 +14,17 @@
     data-testid="card"
     @click="goToChannelRoute()"
   >
+    <template
+      v-if="selectable"
+      #select
+    >
+      <KCheckbox
+        :checked="selected"
+        :ariaLabel="$tr('selectChannel', { name: channel.name })"
+        data-test="checkbox"
+        @change="$emit('toggle-selection', channel.id)"
+      />
+    </template>
     <template #thumbnailPlaceholder>
       <KIcon
         :color="$themePalette.grey.v_400"
@@ -164,6 +175,14 @@
         type: Object,
         required: true,
       },
+      selectable: {
+        type: Boolean,
+        default: false,
+      },
+      selected: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
@@ -328,6 +347,7 @@
       lastPublished: 'Published {last_published}',
       lastUpdated: 'Updated {updated}',
       details: 'Details',
+      selectChannel: 'Select {name}',
       viewContent: 'View channel on Kolibri',
       goToWebsite: 'Go to source website',
       editChannel: 'Edit channel details',

From b27335eae6eb46a2625182657a1ce1d0a7d619b5 Mon Sep 17 00:00:00 2001
From: Tushar Verma <tusharmyself06@gmail.com>
Date: Fri, 19 Dec 2025 12:15:11 +0530
Subject: [PATCH 05/10] changes unit tests frron test-utils to vue testing
 library

---
 .../Channel/__tests__/catalogList.spec.js     | 376 ++++++++++--------
 1 file changed, 203 insertions(+), 173 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogList.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogList.spec.js
index 32c9de6843..b6fdcc8f83 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogList.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogList.spec.js
@@ -1,201 +1,231 @@
-import { mount } from '@vue/test-utils';
-import { factory } from '../../../store';
-import router from '../../../router';
+import { render, screen, fireEvent } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import { Store } from 'vuex';
+import StudioCatalogList from '../StudioCatalogList';
 import { RouteNames } from '../../../constants';
-import CatalogList from '../CatalogList';
 
-const store = factory();
+const mockChannels = [
+  {
+    id: 'channel-1',
+    name: 'Testing Channel 1',
+    description: 'First test channel',
+    thumbnail: null,
+    thumbnail_encoding: {},
+    language: 'en',
+    public: false,
+    version: 0,
+    last_published: null,
+    deleted: false,
+    source_url: 'https://example.com',
+    demo_server_url: 'https://demo.com',
+    edit: true,
+    view: true,
+    modified: '2025-12-19T10:00:00Z',
+    primary_token: null,
+    count: 10,
+    unpublished_changes: true,
+    thumbnail_url: null,
+    published: false,
+    publishing: false,
+    bookmark: false,
+  },
+  {
+    id: 'channel-2',
+    name: 'Testing Channel 2',
+    description: 'Second test channel',
+    thumbnail: null,
+    thumbnail_encoding: {},
+    language: 'es',
+    public: false,
+    version: 0,
+    last_published: null,
+    deleted: false,
+    source_url: 'https://example.com',
+    demo_server_url: 'https://demo.com',
+    edit: true,
+    view: true,
+    modified: '2025-12-19T10:00:00Z',
+    primary_token: null,
+    count: 20,
+    unpublished_changes: false,
+    thumbnail_url: null,
+    published: true,
+    publishing: false,
+    bookmark: false,
+  },
+];
+
+const router = new VueRouter({
+  routes: [
+    { name: RouteNames.CATALOG_ITEMS, path: '/catalog' },
+    { name: RouteNames.CATALOG_DETAILS, path: '/catalog/:channelId/details' },
+    { name: 'CHANNEL_EDIT', path: '/:channelId/:tab' },
+  ],
+});
 
 router.push({ name: RouteNames.CATALOG_ITEMS });
 
-const results = ['channel-1', 'channel-2'];
-
-function makeWrapper(computed = {}) {
-  const loadCatalog = jest.spyOn(CatalogList.methods, 'loadCatalog');
-  loadCatalog.mockImplementation(() => Promise.resolve());
-
-  const downloadCSV = jest.spyOn(CatalogList.methods, 'downloadCSV');
-  const downloadPDF = jest.spyOn(CatalogList.methods, 'downloadPDF');
+function renderComponent(customStore = null) {
+  const searchCatalog = jest.fn().mockResolvedValue();
+
+  const store =
+    customStore ||
+    new Store({
+      modules: {
+        channel: {
+          namespaced: true,
+          getters: {
+            getChannels: () => ids => {
+              return ids.map(id => mockChannels.find(c => c.id === id)).filter(Boolean);
+            },
+          },
+          actions: {
+            deleteChannel: jest.fn(),
+            removeViewer: jest.fn(),
+          },
+        },
+        channelList: {
+          namespaced: true,
+          state: {
+            page: {
+              count: mockChannels.length,
+              results: mockChannels.map(c => c.id),
+              page_number: 1,
+              total_pages: 1,
+            },
+          },
+          actions: {
+            searchCatalog,
+          },
+        },
+      },
+      state: {
+        connection: {
+          online: true,
+        },
+        session: {
+          currentUser: {
+            id: 'user-1',
+          },
+        },
+      },
+      actions: {
+        showSnackbar: jest.fn(),
+        showSnackbarSimple: jest.fn(),
+      },
+    });
 
-  const wrapper = mount(CatalogList, {
-    router,
+  return render(StudioCatalogList, {
     store,
-    computed: {
-      page() {
-        return {
-          count: results.length,
-          results,
-        };
-      },
-      ...computed,
-    },
+    routes: router,
     stubs: {
-      CatalogFilters: true,
+      CatalogFilters: {
+        template: '<div data-testid="catalog-filters">Filters</div>',
+      },
+      Pagination: {
+        template: '<div data-testid="pagination">Pagination</div>',
+        props: ['pageNumber', 'totalPages'],
+      },
     },
   });
-  return [wrapper, { loadCatalog, downloadCSV, downloadPDF }];
 }
 
-describe('catalogFilterBar', () => {
-  let wrapper, mocks;
-
-  beforeEach(async () => {
-    [wrapper, mocks] = makeWrapper();
-    await wrapper.setData({ loading: false });
+describe('StudioCatalogList', () => {
+  it('renders catalog channels', async () => {
+    renderComponent();
+    const cards = await screen.findAllByTestId('card');
+    expect(cards.length).toBe(2);
   });
 
-  it('should call loadCatalog on mount', () => {
-    [wrapper, mocks] = makeWrapper();
-    expect(mocks.loadCatalog).toHaveBeenCalled();
+  it('shows results count', async () => {
+    renderComponent();
+    expect(await screen.findByText(/2 results found/i)).toBeInTheDocument();
   });
 
-  describe('on query change', () => {
-    const searchCatalogMock = jest.fn();
-
-    beforeEach(() => {
-      router.replace({ query: {} }).catch(() => {});
-      searchCatalogMock.mockReset();
-      [wrapper, mocks] = makeWrapper({
-        debouncedSearch() {
-          return searchCatalogMock;
+  it('shows empty state when no channels found', async () => {
+    const emptyStore = new Store({
+      modules: {
+        channel: {
+          namespaced: true,
+          getters: {
+            getChannels: () => () => [],
+          },
+          actions: {
+            deleteChannel: jest.fn(),
+            removeViewer: jest.fn(),
+          },
+        },
+        channelList: {
+          namespaced: true,
+          state: {
+            page: {
+              count: 0,
+              results: [],
+              page_number: 1,
+              total_pages: 0,
+            },
+          },
+          actions: {
+            searchCatalog: jest.fn().mockResolvedValue(),
+          },
+        },
+      },
+      state: {
+        connection: {
+          online: true,
         },
-      });
+        session: {
+          currentUser: {
+            id: 'user-1',
+          },
+        },
+      },
+      actions: {
+        showSnackbar: jest.fn(),
+        showSnackbarSimple: jest.fn(),
+      },
     });
 
-    it('should call debouncedSearch', async () => {
-      const keywords = 'search catalog test';
-      router.push({ query: { keywords } }).catch(() => {});
-      await wrapper.vm.$nextTick();
-      expect(searchCatalogMock).toHaveBeenCalled();
-    });
+    renderComponent(emptyStore);
+    const cards = screen.queryAllByTestId('card');
+    expect(cards.length).toBe(0);
+    expect(await screen.findByText(/0 results found/i)).toBeInTheDocument();
+  });
 
-    it('should reset excluded if a filter changed', async () => {
-      const keywords = 'search reset test';
-      await wrapper.setData({ excluded: ['item 1'] });
-      router.push({ query: { keywords } }).catch(() => {});
-      await wrapper.vm.$nextTick();
-      expect(wrapper.vm.excluded).toEqual([]);
-    });
+  describe('selection mode', () => {
+    it('shows select all checkbox when entering selection mode', async () => {
+      renderComponent();
 
-    it('should keep excluded if page number changed', async () => {
-      await wrapper.setData({ excluded: ['item 1'] });
-      router
-        .push({
-          query: {
-            ...wrapper.vm.$route.query,
-            page: 2,
-          },
-        })
-        .catch(() => {});
-      await wrapper.vm.$nextTick();
-      expect(wrapper.vm.excluded).toEqual(['item 1']);
-    });
-  });
+      // Initially no select-all checkbox
+      expect(screen.queryByLabelText(/select all/i)).not.toBeInTheDocument();
 
-  describe('download workflow', () => {
-    describe('toggling selection mode', () => {
-      it('checkboxes and toolbar should be hidden if selecting is false', () => {
-        expect(wrapper.findComponent('[data-test="checkbox"]').exists()).toBe(false);
-        expect(wrapper.findComponent('[data-test="toolbar"]').exists()).toBe(false);
-      });
-
-      it('should activate when select button is clicked', async () => {
-        await wrapper.findComponent('[data-test="select"]').trigger('click');
-        expect(wrapper.vm.selecting).toBe(true);
-      });
-
-      it('clicking cancel should exit selection mode', async () => {
-        await wrapper.setData({ selecting: true });
-        await wrapper.findComponent('[data-test="cancel"]').trigger('click');
-        expect(wrapper.vm.selecting).toBe(false);
-      });
-
-      it('excluded should reset when selection mode is exited', async () => {
-        await wrapper.setData({ selecting: true, excluded: ['item-1', 'item-2'] });
-        wrapper.vm.setSelection(false);
-        expect(wrapper.vm.excluded).toHaveLength(0);
-      });
-    });
+      // Click select button
+      const selectButton = await screen.findByText(/download a summary of selected channels/i);
+      await fireEvent.click(selectButton);
 
-    describe('selecting channels', () => {
-      const excluded = ['item-1'];
-
-      beforeEach(async () => {
-        await wrapper.setData({
-          selecting: true,
-          excluded,
-        });
-      });
-
-      it('selecting all should select all items on the page', async () => {
-        await wrapper.setData({ excluded: excluded.concat(results) });
-        wrapper.vm.selectAll = true;
-        expect(wrapper.vm.excluded).toEqual(excluded);
-        expect(wrapper.vm.selected).toEqual(results);
-      });
-
-      it('deselecting all should select all items on the page', () => {
-        wrapper.vm.selectAll = false;
-        expect(wrapper.vm.excluded).toEqual(excluded.concat(results));
-        expect(wrapper.vm.selected).toEqual([]);
-      });
-
-      it('selecting a channel should remove it from excluded', async () => {
-        await wrapper.setData({ excluded: excluded.concat(results) });
-        wrapper.vm.selected = [results[0]];
-        expect(wrapper.vm.excluded).toEqual(excluded.concat([results[1]]));
-        expect(wrapper.vm.selected).toEqual([results[0]]);
-      });
-
-      it('deselecting a channel should add it to excluded', () => {
-        wrapper.vm.selected = [results[0]];
-        expect(wrapper.vm.excluded).toEqual(excluded.concat([results[1]]));
-        expect(wrapper.vm.selected).toEqual([results[0]]);
-      });
+      // Select-all checkbox should appear
+      expect(await screen.findByLabelText(/select all/i)).toBeInTheDocument();
+
+      // Toolbar with count should appear
+      expect(await screen.findByText(/2 channels selected/i)).toBeInTheDocument();
     });
 
-    describe('download csv', () => {
-      let downloadChannelsCSV;
-      const excluded = ['item-1', 'item-2'];
-
-      beforeEach(async () => {
-        await wrapper.setData({ selecting: true, excluded });
-        downloadChannelsCSV = jest.spyOn(wrapper.vm, 'downloadChannelsCSV');
-        downloadChannelsCSV.mockImplementation(() => Promise.resolve());
-      });
-
-      it('clicking download CSV should call downloadCSV', async () => {
-        mocks.downloadCSV.mockImplementationOnce(() => Promise.resolve());
-        await wrapper.findComponent('[data-test="download-button"]').trigger('click');
-        const menuOptions = wrapper.findAll('.ui-menu-option-content');
-        await menuOptions.at(1).trigger('click');
-        expect(mocks.downloadCSV).toHaveBeenCalled();
-      });
-
-      it('clicking download PDF should call downloadPDF', async () => {
-        mocks.downloadPDF.mockImplementationOnce(() => Promise.resolve());
-        await wrapper.findComponent('[data-test="download-button"]').trigger('click');
-        const menuOptions = wrapper.findAll('.ui-menu-option-content');
-        await menuOptions.at(0).trigger('click');
-        expect(mocks.downloadPDF).toHaveBeenCalled();
-      });
-
-      it('downloadCSV should call downloadChannelsCSV with current parameters', async () => {
-        const keywords = 'Download csv keywords test';
-        router.replace({ query: { keywords } });
-        await wrapper.vm.downloadCSV();
-        expect(downloadChannelsCSV.mock.calls[0][0].keywords).toBe(keywords);
-      });
-
-      it('downloadCSV should call downloadChannelsCSV with list of excluded items', async () => {
-        await wrapper.vm.downloadCSV();
-        expect(downloadChannelsCSV.mock.calls[0][0].excluded).toEqual(excluded);
-      });
-
-      it('downloadCSV should exit selection mode', async () => {
-        await wrapper.vm.downloadCSV();
-        expect(wrapper.vm.selecting).toBe(false);
-      });
+    it('exits selection mode when cancel is clicked', async () => {
+      renderComponent();
+
+      // Enter selection mode
+      const selectButton = await screen.findByText(/download a summary of selected channels/i);
+      await fireEvent.click(selectButton);
+
+      // Verify we're in selection mode
+      expect(await screen.findByLabelText(/select all/i)).toBeInTheDocument();
+
+      // Click cancel
+      const cancelButton = await screen.findByText(/cancel/i);
+      await fireEvent.click(cancelButton);
+
+      // Selection UI should disappear
+      expect(screen.queryByLabelText(/select all/i)).not.toBeInTheDocument();
     });
   });
 });

From 41585fc1754b7d7dee8a440818423ac253902a23 Mon Sep 17 00:00:00 2001
From: Tushar Verma <tusharmyself06@gmail.com>
Date: Fri, 19 Dec 2025 21:04:25 +0530
Subject: [PATCH 06/10] update import for CatalogList component in router

---
 .../contentcuration/frontend/channelList/router.js            | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/router.js b/contentcuration/contentcuration/frontend/channelList/router.js
index 905c64338d..ebf39a4736 100644
--- a/contentcuration/contentcuration/frontend/channelList/router.js
+++ b/contentcuration/contentcuration/frontend/channelList/router.js
@@ -4,7 +4,7 @@ import StudioStarredChannels from './views/Channel/StudioStarredChannels.vue';
 import StudioViewOnlyChannels from './views/Channel/StudioViewOnlyChannels.vue';
 import ChannelSetList from './views/ChannelSet/ChannelSetList';
 import ChannelSetModal from './views/ChannelSet/ChannelSetModal';
-import StudioCatalogList from './views/Channel/StudioCatalogList';
+import CatalogList from './views/Channel/CatalogList';
 import { RouteNames } from './constants';
 import CatalogFAQ from './views/Channel/CatalogFAQ';
 import ChannelModal from 'shared/views/channel/ChannelModal';
@@ -66,7 +66,7 @@ const router = new VueRouter({
     {
       name: RouteNames.CATALOG_ITEMS,
       path: '/public',
-      component: StudioCatalogList,
+      component: CatalogList,
     },
     {
       name: RouteNames.CATALOG_DETAILS,

From 850c003bfe08ca4652a0d4b1f84661f78ca28339 Mon Sep 17 00:00:00 2001
From: Tushar Verma <tusharmyself06@gmail.com>
Date: Fri, 19 Dec 2025 21:04:37 +0530
Subject: [PATCH 07/10] replace Checkbox with KCheckbox and update selection
 logic in CatalogList

---
 .../channelList/views/Channel/CatalogList.vue | 65 ++++++++++++-------
 1 file changed, 41 insertions(+), 24 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
index 00a741531d..f17d4e9304 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
@@ -39,34 +39,36 @@
             appearance="basic-link"
             @click="setSelection(true)"
           />
-          <Checkbox
+          <KCheckbox
             v-else-if="selecting"
-            v-model="selectAll"
-            class="mb-4 mx-2"
+            :checked="selectAll"
+            :indeterminate="isIndeterminate"
             :label="$tr('selectAll')"
             data-test="select-all"
-            :indeterminate="selected.length > 0 && selected.length < channels.length"
+            class="mb-4 mx-2"
+            @change="toggleSelectAll"
           />
         </VFlex>
         <VFlex xs12>
-          <VLayout
-            v-for="item in channels"
-            :key="item.id"
-            align-center
+          <KCardGrid
+            layout="1-1-1"
+            :skeletonsConfig="[
+              {
+                breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+                orientation: 'vertical',
+                count: 3,
+              },
+            ]"
           >
-            <Checkbox
-              v-show="selecting"
-              v-model="selected"
-              class="mx-2"
-              :value="item.id"
-              data-test="checkbox"
+            <StudioChannelCard
+              v-for="channel in channels"
+              :key="channel.id"
+              :channel="channel"
+              :selectable="selecting"
+              :selected="isChannelSelected(channel.id)"
+              @toggle-selection="handleSelectionToggle"
             />
-            <ChannelItem
-              :channelId="item.id"
-              :detailsRouteName="detailsRouteName"
-              style="flex-grow: 1; width: 100%"
-            />
-          </VLayout>
+          </KCardGrid>
         </VFlex>
         <VFlex
           xs12
@@ -130,11 +132,10 @@
   import union from 'lodash/union';
   import { RouteNames } from '../../constants';
   import CatalogFilters from './CatalogFilters';
-  import ChannelItem from './ChannelItem';
+  import StudioChannelCard from './components/StudioChannelCard';
   import LoadingText from 'shared/views/LoadingText';
   import Pagination from 'shared/views/Pagination';
   import BottomBar from 'shared/views/BottomBar';
-  import Checkbox from 'shared/views/form/Checkbox';
   import ToolBar from 'shared/views/ToolBar';
   import OfflineText from 'shared/views/OfflineText';
   import { constantsTranslationMixin } from 'shared/mixins';
@@ -143,12 +144,11 @@
   export default {
     name: 'CatalogList',
     components: {
-      ChannelItem,
+      StudioChannelCard,
       LoadingText,
       CatalogFilters,
       Pagination,
       BottomBar,
-      Checkbox,
       ToolBar,
       OfflineText,
     },
@@ -213,6 +213,9 @@
       selectedCount() {
         return this.page.count - this.excluded.length;
       },
+      isIndeterminate() {
+        return this.selected.length > 0 && this.selected.length < this.channels.length;
+      },
     },
     watch: {
       $route(to) {
@@ -236,6 +239,20 @@
     },
     methods: {
       ...mapActions('channelList', ['searchCatalog']),
+      isChannelSelected(channelId) {
+        return this.selected.includes(channelId);
+      },
+      handleSelectionToggle(channelId) {
+        const currentlySelected = this.selected;
+        if (currentlySelected.includes(channelId)) {
+          this.selected = currentlySelected.filter(id => id !== channelId);
+        } else {
+          this.selected = [...currentlySelected, channelId];
+        }
+      },
+      toggleSelectAll() {
+        this.selectAll = !this.selectAll;
+      },
       loadCatalog() {
         this.loading = true;
         const params = {

From fe88025c86f2818009a7b06bd462c54391ad87ec Mon Sep 17 00:00:00 2001
From: Tushar Verma <tusharmyself06@gmail.com>
Date: Fri, 19 Dec 2025 21:04:45 +0530
Subject: [PATCH 08/10] remove StudioCatalogList component and its associated
 styles

---
 .../views/Channel/StudioCatalogList.vue       | 335 ------------------
 1 file changed, 335 deletions(-)
 delete mode 100644 contentcuration/contentcuration/frontend/channelList/views/Channel/StudioCatalogList.vue

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioCatalogList.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioCatalogList.vue
deleted file mode 100644
index c6598699f0..0000000000
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioCatalogList.vue
+++ /dev/null
@@ -1,335 +0,0 @@
-<template>
-
-  <div>
-    <CatalogFilters />
-    <ToolBar
-      v-show="offline"
-      dense
-      clipped-left
-      absolute
-    >
-      <OfflineText />
-    </ToolBar>
-    <div
-      class="catalog-content"
-      :style="{ marginTop: offline ? '48px' : '0', padding: windowIsSmall ? '0' : '16px' }"
-    >
-      <LoadingText v-if="loading" />
-      <div
-        v-else
-        class="list-wrapper"
-      >
-        <div class="results-header">
-          <h1 class="results-title">
-            {{ $tr('resultsText', { count: page.count }) }}
-          </h1>
-        </div>
-        <div class="selection-controls">
-          <KButton
-            v-if="page.count && !selecting"
-            :text="$tr('selectChannels')"
-            data-test="select"
-            appearance="basic-link"
-            @click="setSelection(true)"
-          />
-          <KCheckbox
-            v-else-if="selecting"
-            :checked="selectAll"
-            :indeterminate="isIndeterminate"
-            :label="$tr('selectAll')"
-            data-test="select-all"
-            @change="toggleSelectAll"
-          />
-        </div>
-
-        <KCardGrid
-          layout="1-1-1"
-          :skeletonsConfig="[
-            {
-              breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
-              orientation: 'vertical',
-              count: 3,
-            },
-          ]"
-        >
-          <StudioChannelCard
-            v-for="channel in channels"
-            :key="channel.id"
-            :channel="channel"
-            :selectable="selecting"
-            :selected="isChannelSelected(channel.id)"
-            @toggle-selection="handleSelectionToggle"
-          />
-        </KCardGrid>
-
-        <!-- Pagination -->
-        <div class="pagination-wrapper">
-          <Pagination
-            :pageNumber="page.page_number"
-            :totalPages="page.total_pages"
-          />
-        </div>
-      </div>
-    </div>
-
-    <BottomBar
-      v-if="selecting"
-      data-test="toolbar"
-    >
-      <div>
-        {{ $tr('channelSelectionCount', { count: selectedCount }) }}
-      </div>
-      <div class="spacer"></div>
-      <div>
-        <KButton
-          :text="$tr('cancelButton')"
-          data-test="cancel"
-          appearance="flat-button"
-          @click="setSelection(false)"
-        />
-      </div>
-      <KButton
-        :text="$tr('downloadButton')"
-        primary
-        data-test="download-button"
-        iconAfter="dropup"
-      >
-        <template #menu>
-          <KDropdownMenu
-            primary
-            :options="[
-              { label: $tr('downloadPDF'), value: 'pdf' },
-              { label: $tr('downloadCSV'), value: 'csv' },
-            ]"
-            appearance="raised-button"
-            @select="selectDownloadOption"
-          />
-        </template>
-      </KButton>
-    </BottomBar>
-  </div>
-
-</template>
-
-
-<script>
-
-  import { mapActions, mapGetters, mapState } from 'vuex';
-  import debounce from 'lodash/debounce';
-  import difference from 'lodash/difference';
-  import isEqual from 'lodash/isEqual';
-  import sortBy from 'lodash/sortBy';
-  import union from 'lodash/union';
-  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
-  import { RouteNames } from '../../constants';
-  import CatalogFilters from './CatalogFilters';
-  import StudioChannelCard from './components/StudioChannelCard';
-  import { constantsTranslationMixin } from 'shared/mixins';
-  import { channelExportMixin } from 'shared/views/channel/mixins';
-  import BottomBar from 'shared/views/BottomBar';
-  import LoadingText from 'shared/views/LoadingText';
-  import OfflineText from 'shared/views/OfflineText';
-  import Pagination from 'shared/views/Pagination';
-  import ToolBar from 'shared/views/ToolBar';
-
-  export default {
-    name: 'StudioCatalogList',
-    components: {
-      StudioChannelCard,
-      LoadingText,
-      CatalogFilters,
-      Pagination,
-      BottomBar,
-      ToolBar,
-      OfflineText,
-    },
-    mixins: [channelExportMixin, constantsTranslationMixin],
-    setup() {
-      const { windowIsSmall } = useKResponsiveWindow();
-      return {
-        windowIsSmall,
-      };
-    },
-    data() {
-      return {
-        loading: true,
-        loadError: false,
-        selecting: false,
-        previousQuery: this.$route.query,
-        excluded: [],
-      };
-    },
-    computed: {
-      ...mapGetters('channel', ['getChannels']),
-      ...mapState('channelList', ['page']),
-      ...mapState({
-        offline: state => !state.connection.online,
-      }),
-      selectAll: {
-        get() {
-          return this.selected.length === this.channels.length;
-        },
-        set(value) {
-          this.selected = value ? this.page.results : [];
-        },
-      },
-      selected: {
-        get() {
-          return difference(this.page.results, this.excluded);
-        },
-        set(selected) {
-          this.excluded = union(
-            this.excluded.filter(id => !selected.includes(id)),
-            difference(this.page.results, selected),
-          );
-        },
-      },
-      isIndeterminate() {
-        return this.selected.length > 0 && this.selected.length < this.channels.length;
-      },
-      debouncedSearch() {
-        return debounce(this.loadCatalog, 1000);
-      },
-      channels() {
-        return sortBy(this.getChannels(this.page.results), 'name');
-      },
-      selectedCount() {
-        return this.page.count - this.excluded.length;
-      },
-    },
-    watch: {
-      $route(to) {
-        if (!isEqual(to.query, this.previousQuery) && to.name === RouteNames.CATALOG_ITEMS) {
-          this.loading = true;
-          this.debouncedSearch();
-
-          const ignoreDefaults = { page: 0 };
-          const toQuery = { ...to.query, ...ignoreDefaults };
-          const fromQuery = { ...this.previousQuery, ...ignoreDefaults };
-          if (!isEqual(toQuery, fromQuery)) {
-            this.setSelection(false);
-          }
-        }
-        this.previousQuery = { ...to.query };
-      },
-    },
-    mounted() {
-      this.loadCatalog();
-    },
-    methods: {
-      ...mapActions('channelList', ['searchCatalog']),
-      isChannelSelected(channelId) {
-        return this.selected.includes(channelId);
-      },
-      handleSelectionToggle(channelId) {
-        const currentlySelected = this.selected;
-        if (currentlySelected.includes(channelId)) {
-          this.selected = currentlySelected.filter(id => id !== channelId);
-        } else {
-          this.selected = [...currentlySelected, channelId];
-        }
-      },
-      toggleSelectAll() {
-        this.selectAll = !this.selectAll;
-      },
-      loadCatalog() {
-        this.loading = true;
-        const params = {
-          ...this.$route.query,
-        };
-        return this.searchCatalog(params)
-          .then(() => {
-            this.loading = false;
-          })
-          .catch(() => {
-            this.loadError = true;
-            this.loading = false;
-          });
-      },
-      setSelection(selecting) {
-        this.selecting = selecting;
-        if (!selecting) {
-          this.excluded = [];
-        }
-      },
-      downloadCSV() {
-        this.$store.dispatch('showSnackbar', { text: this.$tr('downloadingMessage') });
-        const params = {
-          excluded: this.excluded.slice(0),
-          ...this.$route.query,
-        };
-        this.setSelection(false);
-        return this.downloadChannelsCSV(params);
-      },
-      downloadPDF() {
-        this.$store.dispatch('showSnackbar', { text: this.$tr('downloadingMessage') });
-        const params = {
-          excluded: this.excluded.slice(0),
-          ...this.$route.query,
-        };
-        this.setSelection(false);
-        return this.downloadChannelsPDF(params);
-      },
-      selectDownloadOption(option) {
-        if (option.value === 'pdf') {
-          this.downloadPDF();
-        } else if (option.value === 'csv') {
-          this.downloadCSV();
-        }
-      },
-    },
-    $trs: {
-      resultsText: '{count, plural,\n =1 {# result found}\n other {# results found}}',
-      selectChannels: 'Download a summary of selected channels',
-      cancelButton: 'Cancel',
-      downloadButton: 'Download',
-      downloadCSV: 'Download CSV',
-      downloadPDF: 'Download PDF',
-      downloadingMessage: 'Download started',
-      channelSelectionCount:
-        '{count, plural,\n =1 {# channel selected}\n other {# channels selected}}',
-      selectAll: 'Select all',
-    },
-  };
-
-</script>
-
-
-<style lang="scss" scoped>
-
-  .catalog-content {
-    width: 100%;
-  }
-
-  .list-wrapper {
-    max-width: 1080px;
-    padding: 16px 0;
-    margin: 0 auto;
-  }
-
-  .results-header {
-    margin-bottom: 8px;
-  }
-
-  .results-title {
-    margin: 0 0 0 4px;
-    font-size: 24px;
-    font-weight: bold;
-  }
-
-  .selection-controls {
-    margin-bottom: 16px;
-    margin-left: 8px;
-  }
-
-  .pagination-wrapper {
-    display: flex;
-    justify-content: center;
-    padding: 16px 0 72px;
-  }
-
-  .spacer {
-    flex: 1;
-  }
-
-</style>

From 0635b3edfa9c0b4223fc854bca20cbb92cafd3b6 Mon Sep 17 00:00:00 2001
From: Tushar Verma <tusharmyself06@gmail.com>
Date: Fri, 19 Dec 2025 21:04:55 +0530
Subject: [PATCH 09/10]  rename StudioCatalogList to CatalogList in tests

---
 .../channelList/views/Channel/__tests__/catalogList.spec.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogList.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogList.spec.js
index b6fdcc8f83..e80dc113af 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogList.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogList.spec.js
@@ -1,7 +1,7 @@
 import { render, screen, fireEvent } from '@testing-library/vue';
 import VueRouter from 'vue-router';
 import { Store } from 'vuex';
-import StudioCatalogList from '../StudioCatalogList';
+import CatalogList from '../CatalogList';
 import { RouteNames } from '../../../constants';
 
 const mockChannels = [
@@ -115,7 +115,7 @@ function renderComponent(customStore = null) {
       },
     });
 
-  return render(StudioCatalogList, {
+  return render(CatalogList, {
     store,
     routes: router,
     stubs: {
@@ -130,7 +130,7 @@ function renderComponent(customStore = null) {
   });
 }
 
-describe('StudioCatalogList', () => {
+describe('CatalogList', () => {
   it('renders catalog channels', async () => {
     renderComponent();
     const cards = await screen.findAllByTestId('card');

From c5ceb6173c945fb088bfd4bd6b231505362f3d06 Mon Sep 17 00:00:00 2001
From: Tushar Verma <tusharmyself06@gmail.com>
Date: Fri, 19 Dec 2025 21:10:42 +0530
Subject: [PATCH 10/10] remove unused detailsRouteName

---
 .../frontend/channelList/views/Channel/CatalogList.vue         | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
index f17d4e9304..7f3b1a923b 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
@@ -202,9 +202,6 @@
       debouncedSearch() {
         return debounce(this.loadCatalog, 1000);
       },
-      detailsRouteName() {
-        return RouteNames.CATALOG_DETAILS;
-      },
       channels() {
         // Sort again by the same ordering used on the backend - name.
         // Have to do this because of how we are getting the object data via getChannels.