[Remove Vuetify from Studio] Channel details in Channels - content

contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelDetails.vue

@@ -59,7 +59,7 @@
             flat
             class="px-5"
           >
-            <DetailsPanel
+            <StudioDetailsPanel
               v-if="channel && details"
               :details="channelWithDetails"
               :loading="loading"
@@ -87,7 +87,7 @@
   import { RouteNames } from '../../constants';
   import ChannelActionsDropdown from './ChannelActionsDropdown';
   import ChannelSharing from 'shared/views/channel/ChannelSharing';
-  import DetailsPanel from 'shared/views/details/DetailsPanel';
+  import StudioDetailsPanel from 'shared/views/details/StudioDetailsPanel';
   import { routerMixin } from 'shared/mixins';
   import LoadingText from 'shared/views/LoadingText';
   import FullscreenModal from 'shared/views/FullscreenModal';
@@ -96,7 +96,7 @@
   export default {
     name: 'ChannelDetails',
     components: {
-      DetailsPanel,
+      StudioDetailsPanel,
       LoadingText,
       FullscreenModal,
       ChannelSharing,

contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue

@@ -131,9 +131,9 @@
 <script>
 
   import { mapActions, mapGetters } from 'vuex';
+  import StudioChip from 'shared/views/StudioChip';
   import ExpandableList from 'shared/views/ExpandableList';
   import { generateFormMixin } from 'shared/mixins';
-  import StudioChip from 'shared/views/StudioChip';
 
   const formMixin = generateFormMixin({
     subject: { required: true },

contentcuration/contentcuration/frontend/shared/utils/icons.js

@@ -0,0 +1,22 @@
+import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
+
+const EMPTY = '_empty';
+const CONTENT_KIND_ICONS = {
+  [ContentKindsNames.TOPIC]: 'topic',
+  [ContentKindsNames.TOPIC + EMPTY]: 'emptyTopic',
+  [ContentKindsNames.VIDEO]: 'video',
+  [ContentKindsNames.AUDIO]: 'audio',
+  [ContentKindsNames.SLIDESHOW]: 'slideshow',
+  [ContentKindsNames.EXERCISE]: 'exercise',
+  [ContentKindsNames.DOCUMENT]: 'document',
+  [ContentKindsNames.HTML5]: 'html5',
+  [ContentKindsNames.ZIM]: 'html5',
+};
+
+export function getContentKindIcon(kind, isEmpty = false) {
+  const icon = (isEmpty ? [kind + EMPTY] : []).concat([kind]).find(k => k in CONTENT_KIND_ICONS);
+  if (!icon) {
+    throw new Error(`Icon not found for content kind: ${kind}`);
+  }
+  return CONTENT_KIND_ICONS[icon];
+}

contentcuration/contentcuration/frontend/shared/views/__tests__/StudioDetailsPanel.spec.js

@@ -0,0 +1,118 @@
+import { render, screen } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import ContentLevels from 'kolibri-constants/labels/Levels';
+import Categories from 'kolibri-constants/labels/Subjects';
+import StudioDetailsPanel from '../details/StudioDetailsPanel.vue';
+
+const renderComponent = (props = {}) => {
+  return render(StudioDetailsPanel, {
+    props,
+    routes: new VueRouter(),
+  });
+};
+
+describe('StudioDetailsPanel', () => {
+  const fullChannel = {
+    name: 'Complete Channel',
+    description: 'A fully populated channel',
+    thumbnail_url: 'https://example.com/thumb.jpg',
+    published: true,
+    version: 2,
+    primary_token: 'abc12345',
+    language: 'en',
+    created: '2025-01-15T10:00:00Z',
+    last_published: '2025-01-20T15:30:00Z',
+    resource_count: 42,
+    resource_size: 1024000000,
+    kind_count: [],
+    levels: [ContentLevels.LOWER_PRIMARY, ContentLevels.UPPER_PRIMARY],
+    categories: [Categories.MATHEMATICS, Categories.SCIENCES],
+    includes: { coach_content: 1, exercises: 1 },
+    tags: [{ tag_name: 'science' }, { tag_name: 'math' }],
+    languages: [],
+    accessible_languages: [],
+    authors: ['Author One', 'Author Two'],
+    providers: [],
+    aggregators: [],
+    licenses: [],
+    copyright_holders: [],
+    original_channels: [],
+    sample_nodes: [],
+  };
+
+  const minimalChannel = {
+    name: 'Minimal Channel',
+    description: '',
+    thumbnail_url: null,
+    published: false,
+    version: null,
+    primary_token: null,
+    language: null,
+    created: null,
+    last_published: null,
+    resource_count: 0,
+    resource_size: 0,
+    kind_count: [],
+    levels: [],
+    categories: [],
+    includes: { coach_content: 0, exercises: 0 },
+    tags: [],
+    languages: [],
+    accessible_languages: [],
+    authors: [],
+    providers: [],
+    aggregators: [],
+    licenses: [],
+    copyright_holders: [],
+    original_channels: [],
+    sample_nodes: [],
+  };
+
+  it('renders channel header with name and description', () => {
+    renderComponent({ details: fullChannel, loading: false });
+
+    expect(screen.getByText('Complete Channel')).toBeInTheDocument();
+    expect(screen.getByText('A fully populated channel')).toBeInTheDocument();
+  });
+
+  describe('published channel with full data', () => {
+    beforeEach(() => {
+      renderComponent({ details: fullChannel, loading: false });
+    });
+
+    it('displays published status and version', () => {
+      expect(screen.getByText('Published on')).toBeInTheDocument();
+      expect(screen.getByText('Published version')).toBeInTheDocument();
+    });
+
+    it('displays translated levels and categories', () => {
+      expect(screen.getByText('Lower primary')).toBeInTheDocument();
+      expect(screen.getByText('Upper primary')).toBeInTheDocument();
+      expect(screen.getByText('Mathematics')).toBeInTheDocument();
+      expect(screen.getByText('Sciences')).toBeInTheDocument();
+    });
+
+    it('displays resource count and metadata', () => {
+      expect(screen.getByText('42')).toBeInTheDocument();
+      expect(screen.getByText('Author One')).toBeInTheDocument();
+      expect(screen.getByText('Author Two')).toBeInTheDocument();
+      expect(screen.getByText('science')).toBeInTheDocument();
+      expect(screen.getByText('math')).toBeInTheDocument();
+    });
+  });
+
+  describe('unpublished channel with missing data', () => {
+    beforeEach(() => {
+      renderComponent({ details: minimalChannel, loading: false });
+    });
+
+    it('displays unpublished status', () => {
+      expect(screen.getByText('Unpublished')).toBeInTheDocument();
+    });
+
+    it('shows placeholder text for empty fields', () => {
+      const placeholders = screen.getAllByText('---');
+      expect(placeholders.length).toBeGreaterThan(0);
+    });
+  });
+});

contentcuration/contentcuration/frontend/shared/views/__tests__/StudioDetailsRow.spec.js

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import StudioDetailsRow from '../details/StudioDetailsRow.vue';
+
+const renderComponent = (props = {}, slots = {}) => {
+  return render(StudioDetailsRow, {
+    props,
+    slots,
+    routes: new VueRouter(),
+  });
+};
+
+describe('StudioDetailsRow', () => {
+  it('renders label and text value', () => {
+    renderComponent({
+      label: 'Channel size',
+      text: '1.5 GB',
+    });
+
+    expect(screen.getByText('Channel size')).toBeInTheDocument();
+    expect(screen.getByText('1.5 GB')).toBeInTheDocument();
+  });
+
+  it('renders slot content', () => {
+    renderComponent({ label: 'Authors' }, { default: '<div>Author One, Author Two</div>' });
+
+    expect(screen.getByText('Authors')).toBeInTheDocument();
+    expect(screen.getByText('Author One, Author Two')).toBeInTheDocument();
+  });
+
+  it('displays tooltip when definition is provided', () => {
+    renderComponent({
+      label: 'Resources for coaches',
+      text: '5',
+      definition: 'Resources only visible to coaches',
+    });
+
+    expect(screen.getByLabelText('Resources only visible to coaches')).toBeInTheDocument();
+  });
+});

contentcuration/contentcuration/frontend/shared/views/channel/ChannelCatalogPrint.vue

@@ -8,7 +8,7 @@
       :channelList="channelList"
       :style="pageStyle"
     />
-    <DetailsPanel
+    <StudioDetailsPanel
       v-for="channelWithDetails in channelList"
       :key="channelWithDetails.id"
       ref="details"
@@ -25,15 +25,15 @@
 
 <script>
 
-  import DetailsPanel from '../details/DetailsPanel.vue';
+  import StudioDetailsPanel from '../details/StudioDetailsPanel';
   import { fitToScale, generatePdf } from '../../utils/helpers';
   import ChannelCatalogFrontPage from './ChannelCatalogFrontPage';
 
   export default {
     name: 'ChannelCatalogPrint',
     components: {
       ChannelCatalogFrontPage,
-      DetailsPanel,
+      StudioDetailsPanel,
     },
     provide: {
       printing: true,

contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue

@@ -4,7 +4,10 @@
     <template #header>
       <span class="notranslate">{{ channel ? channel.name : '' }}</span>
     </template>
-    <StudioLargeLoader v-if="show('channelDetails', loading, 500)" />
+    <StudioLargeLoader
+      v-if="show('channelDetails', loading, 500)"
+      :style="{ marginTop: '160px' }"
+    />
     <div v-else-if="channel">
       <div
         class="download-button-container"
@@ -24,7 +27,7 @@
           </template>
         </KButton>
       </div>
-      <DetailsPanel
+      <StudioDetailsPanel
         v-if="channel && details"
         class="channel-details-wrapper"
         :details="channelWithDetails"
@@ -43,15 +46,15 @@
   import useKShow from 'kolibri-design-system/lib/composables/useKShow';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import { channelExportMixin } from './mixins';
-  import DetailsPanel from 'shared/views/details/DetailsPanel.vue';
+  import StudioDetailsPanel from 'shared/views/details/StudioDetailsPanel.vue';
   import StudioLargeLoader from 'shared/views/StudioLargeLoader';
   import StudioImmersiveModal from 'shared/views/StudioImmersiveModal';
   import { routerMixin } from 'shared/mixins';
 
   export default {
     name: 'ChannelDetailsModal',
     components: {
-      DetailsPanel,
+      StudioDetailsPanel,
       StudioLargeLoader,
       StudioImmersiveModal,
     },