diff --git a/contentcuration/contentcuration/frontend/channelList/composables/useChannelList.js b/contentcuration/contentcuration/frontend/channelList/composables/useChannelList.js index ce0fbb575f..0a9e628c06 100644 --- a/contentcuration/contentcuration/frontend/channelList/composables/useChannelList.js +++ b/contentcuration/contentcuration/frontend/channelList/composables/useChannelList.js @@ -1,8 +1,6 @@ import { ref, computed, onMounted, getCurrentInstance } from 'vue'; -import { useRouter, useRoute } from 'vue-router/composables'; import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow'; import orderBy from 'lodash/orderBy'; -import { RouteNames } from '../constants'; /** * Composable for channel list functionality @@ -19,9 +17,6 @@ export function useChannelList(options = {}) { const instance = getCurrentInstance(); const store = instance.proxy.$store; - const router = useRouter(); - const route = useRoute(); - const { windowIsMedium, windowIsLarge, windowBreakpoint } = useKResponsiveWindow(); const loading = ref(false); diff --git a/contentcuration/contentcuration/frontend/channelList/router.js b/contentcuration/contentcuration/frontend/channelList/router.js index 02a6703fd5..ebf39a4736 100644 --- a/contentcuration/contentcuration/frontend/channelList/router.js +++ b/contentcuration/contentcuration/frontend/channelList/router.js @@ -1,7 +1,7 @@ import VueRouter from 'vue-router'; -import ChannelList from './views/Channel/ChannelList'; import StudioMyChannels from './views/Channel/StudioMyChannels.vue'; 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'; @@ -9,7 +9,6 @@ import { RouteNames } from './constants'; import CatalogFAQ from './views/Channel/CatalogFAQ'; import ChannelModal from 'shared/views/channel/ChannelModal'; import ChannelDetailsModal from 'shared/views/channel/ChannelDetailsModal'; -import { ChannelListTypes } from 'shared/constants'; const router = new VueRouter({ routes: [ @@ -43,8 +42,7 @@ const router = new VueRouter({ { name: RouteNames.CHANNELS_VIEW_ONLY, path: '/view-only', - component: ChannelList, - props: { listType: ChannelListTypes.VIEW_ONLY }, + component: StudioViewOnlyChannels, }, { name: RouteNames.CHANNEL_DETAILS, diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioViewOnlyChannels.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioViewOnlyChannels.vue new file mode 100644 index 0000000000..8079fdd687 --- /dev/null +++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioViewOnlyChannels.vue @@ -0,0 +1,74 @@ + + + + + + + diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/StudioViewOnlyChannels.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/StudioViewOnlyChannels.spec.js new file mode 100644 index 0000000000..d1bd8361c1 --- /dev/null +++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/StudioViewOnlyChannels.spec.js @@ -0,0 +1,92 @@ +import { render, screen } from '@testing-library/vue'; +import VueRouter from 'vue-router'; +import { Store } from 'vuex'; +import StudioViewOnlyChannels from '../StudioViewOnlyChannels.vue'; + +const mockChannels = [ + { + id: 'a3e4bb9390034181b4f2dd4544b1041b', + name: 'Testing - 2', + description: 'Testing - 2', + thumbnail: null, + thumbnail_encoding: {}, + language: 'ceb', + public: false, + version: 0, + last_published: null, + ricecooker_version: null, + deleted: false, + source_url: '', + demo_server_url: '', + edit: false, + view: true, + modified: '2025-08-06T04:56:20.597463Z', + primary_token: null, + count: 0, + unpublished_changes: true, + thumbnail_url: null, + published: false, + publishing: false, + }, +]; + +const router = new VueRouter({ + routes: [ + { name: 'CHANNEL_DETAILS', path: '/:channelId/details' }, + { name: 'CHANNEL_EDIT', path: '/:channelId/:tab' }, + ], +}); + +function renderComponent(store) { + return render(StudioViewOnlyChannels, { + store, + routes: router, + }); +} + +const store = new Store({ + modules: { + channel: { + namespaced: true, + getters: { + channels: () => { + return mockChannels; + }, + }, + actions: { + loadChannelList: jest.fn(), + createChannel: jest.fn(), + }, + }, + }, +}); + +describe('StudioViewOnlyChannels.vue', () => { + it('renders view only channels', async () => { + renderComponent(store); + const cards = await screen.findAllByTestId('card'); + expect(cards.length).toBe(1); + }); + + it(`Shows 'No channel found' when there are no channels`, async () => { + const store = new Store({ + modules: { + channel: { + namespaced: true, + getters: { + channels: () => { + return []; + }, + }, + actions: { + loadChannelList: jest.fn(), + createChannel: jest.fn(), + }, + }, + }, + }); + renderComponent(store); + const cards = screen.queryAllByTestId('card'); + expect(cards.length).toBe(0); + }); +}); diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/components/StudioChannelCard.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/components/StudioChannelCard.vue index 007331ed5b..c0cd7271cf 100644 --- a/contentcuration/contentcuration/frontend/channelList/views/Channel/components/StudioChannelCard.vue +++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/components/StudioChannelCard.vue @@ -262,6 +262,9 @@ if (!this.channel.published) { options = options.filter(item => item.value !== 'copy'); } + if (!this.channel.edit) { + options = options.filter(item => item.value !== 'edit'); + } if (this.channel.source_url === '') { options = options.filter(item => item.value !== 'source-url'); }