[Remove Vuetify from Studio] Cards in View-only channels changes

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);

contentcuration/contentcuration/frontend/channelList/router.js

@@ -1,15 +1,14 @@
 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';
 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,

contentcuration/contentcuration/frontend/channelList/views/Channel/StudioViewOnlyChannels.vue

@@ -0,0 +1,74 @@
+<template>
+
+  <div class="studio-channels">
+    <div
+      class="channels-body"
+      :style="{ maxWidth: maxWidthStyle }"
+    >
+      <p
+        v-if="!listChannels.length && !loading"
+        class="no-channels"
+      >
+        {{ $tr('noChannelsFound') }}
+      </p>
+      <KCardGrid
+        layout="1-1-1"
+        :loading="loading"
+        :skeletonsConfig="[
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            orientation: 'vertical',
+            count: 3,
+          },
+        ]"
+        class="cards"
+      >
+        <StudioChannelCard
+          v-for="channel in listChannels"
+          :key="channel.id"
+          :channel="channel"
+        />
+      </KCardGrid>
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  import { useChannelList } from '../../composables/useChannelList';
+  import StudioChannelCard from './components/StudioChannelCard';
+  import { ChannelListTypes } from 'shared/constants';
+
+  export default {
+    name: 'StudioStarredChannels',
+    components: {
+      StudioChannelCard,
+    },
+    setup() {
+      const { loading, listChannels, maxWidthStyle } = useChannelList({
+        listType: ChannelListTypes.VIEW_ONLY,
+        sortFields: ['modified'],
+        orderFields: ['desc'],
+      });
+
+      return {
+        loading,
+        listChannels,
+        maxWidthStyle,
+      };
+    },
+    $trs: {
+      noChannelsFound: 'No channels found',
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  @import './styles/StudioChannels';
+
+</style>

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);
+  });
+});

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');
         }