Merge pull request #5809 from AlexVelezLl/update-community-library-page

Update community library page

Author: marcellamaki

contentcuration/contentcuration/frontend/channelList/router.js

@@ -6,7 +6,7 @@ import StudioViewOnlyChannels from './views/Channel/StudioViewOnlyChannels';
 import StudioCollectionsTable from './views/ChannelSet/StudioCollectionsTable';
 import ChannelSetModal from './views/ChannelSet/ChannelSetModal';
 import CatalogList from './views/Channel/CatalogList';
-import CommunityLibraryList from './views/Channel/CommunityLibraryList';
+import CommunityLibraryList from './views/Channel/CommunityLibraryList/index.vue';
 import { RouteNames } from './constants';
 import CatalogFAQ from './views/Channel/CatalogFAQ';
 import SubmissionDetailsModal from 'shared/views/communityLibrary/SubmissionDetailsModal/index.vue';

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

@@ -330,10 +330,18 @@
       getDropdownItems(channel) {
         const items = [];
         if (channel.source_url) {
-          items.push({ label: this.$tr('goToWebsite'), icon: 'openNewTab', value: 'source-url' });
+          items.push({
+            label: this.$tr('goToWebsite'),
+            icon: 'openNewTab',
+            value: 'source-url',
+          });
         }
         if (channel.demo_server_url) {
-          items.push({ label: this.$tr('viewContent'), icon: 'openNewTab', value: 'demo-url' });
+          items.push({
+            label: this.$tr('viewContent'),
+            icon: 'openNewTab',
+            value: 'demo-url',
+          });
         }
         return items;
       },
@@ -421,7 +429,7 @@
       },
     },
     $trs: {
-      title: 'Content library',
+      title: 'Kolibri library',
       resultsText: '{count, plural,\n =1 {# result found}\n other {# results found}}',
       selectChannels: 'Download a summary of selected channels',
       cancelButton: 'Cancel',

contentcuration/contentcuration/frontend/channelList/views/Channel/CommunityLibraryList/CommunityLibraryFilters.vue

@@ -16,6 +16,7 @@
       v-model="countriesFilter"
       :label="countryLabel$()"
       :options="countryOptions"
+      :disabled="disabled || !countryOptions.length"
       multiple
       clearable
     />
@@ -24,6 +25,7 @@
       v-model="languagesFilter"
       :label="languagesLabel$()"
       :options="languageOptions"
+      :disabled="disabled || !languageOptions.length"
       multiple
       clearable
     />
@@ -32,6 +34,7 @@
       v-model="categoriesFilter"
       :label="categoriesLabel$()"
       :options="categoryOptions"
+      :disabled="disabled || !categoryOptions.length"
       multiple
       clearable
     />

contentcuration/contentcuration/frontend/channelList/views/Channel/CommunityLibraryList/index.vue

@@ -118,10 +118,10 @@
             />
           </div>
         </div>
-        <div class="list-wrapper">
+        <div>
           <div class="results-header">
             <p
-              v-if="!loading"
+              v-if="!loading && activeFilters.length > 0"
               class="results-text"
             >
               {{ resultsText$({ count }) }}
@@ -203,7 +203,7 @@
 
 <script>
 
-  import { computed, ref, watch } from 'vue';
+  import { computed, onMounted, ref, watch } from 'vue';
   import { useRoute, useRouter } from 'vue-router/composables';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import { themeTokens } from 'kolibri-design-system/lib/styles/theme';
@@ -214,7 +214,7 @@
   import useCommunityChannelsFilters from './useCommunityChannelsFilters';
   import AboutCommunityLibraryModal from './AboutCommunityLibraryModal.vue';
   import ChannelTokenModal from 'shared/views/channel/ChannelTokenModal';
-  import { listPublicChannels } from 'shared/data/public';
+  import { listPublicChannels, getPublicChannelLabels } from 'shared/data/public';
   import useStore from 'shared/composables/useStore';
   import StudioChip from 'shared/views/StudioChip';
   import Pagination from 'shared/views/Pagination';
@@ -277,6 +277,8 @@
       } = communityChannelsStrings;
       const { copyChannelTokenAction$ } = commonStrings;
 
+      const availableLabels = ref(null);
+
       const {
         countriesFilter,
         categoriesFilter,
@@ -285,9 +287,11 @@
         keywordInput,
         clearSearch,
         removeFilterValue,
-      } = useCommunityChannelsFilters();
+      } = useCommunityChannelsFilters({ availableLabels });
 
-      const loading = ref(false);
+      const loadingChannels = ref(false);
+      const loadingLabels = ref(false);
+      const loading = computed(() => loadingChannels.value || loadingLabels.value);
       const loadError = ref(false);
       const channels = ref([]);
       const showFiltersSidePanel = ref(false);
@@ -328,7 +332,7 @@
       });
 
       async function loadCommunityLibrary() {
-        loading.value = true;
+        loadingChannels.value = true;
         loadError.value = false;
         try {
           const response = await listPublicChannels(fetchQueryParams.value);
@@ -343,7 +347,7 @@
           totalPages.value = 0;
           store.dispatch('errors/handleAxiosError', error);
         } finally {
-          loading.value = false;
+          loadingChannels.value = false;
         }
       }
 
@@ -439,6 +443,18 @@
         { immediate: true, deep: true },
       );
 
+      onMounted(async () => {
+        loadingLabels.value = true;
+        try {
+          availableLabels.value = await getPublicChannelLabels({ public: false });
+        } catch {
+          // Silently ignore: filter options will show all values rather than
+          // restricting to those that have channels.
+        } finally {
+          loadingLabels.value = false;
+        }
+      });
+
       return {
         windowIsSmall,
         windowBreakpoint,
@@ -543,18 +559,15 @@
   }
 
   .content-container {
+    max-width: 1080px;
     padding: 16px;
+    margin: 0 auto;
 
     p {
       margin: 8px 0;
     }
   }
 
-  .list-wrapper {
-    max-width: 1080px;
-    margin: 0 auto;
-  }
-
   .results-header {
     margin-bottom: 16px;
   }

contentcuration/contentcuration/frontend/channelList/views/Channel/CommunityLibraryList/useCommunityChannelsFilters.js

@@ -1,4 +1,4 @@
-import { computed, inject, provide } from 'vue';
+import { computed, inject, provide, unref } from 'vue';
 import { useFilter } from 'shared/composables/useFilter';
 import { useKeywordSearch } from 'shared/composables/useKeywordSearch';
 import countriesUtil from 'shared/utils/countries';
@@ -19,43 +19,46 @@ const FILTERS_QUERY_PARAMS = Symbol('filtersQueryParams');
 const REMOVE_FILTER_VALUE = Symbol('removeFilterValue');
 const CLEAR_SEARCH = Symbol('clearSearch');
 
-export default function useCommunityChannelsFilters() {
+export default function useCommunityChannelsFilters({ availableLabels } = {}) {
   const countryFilterMap = computed(() => {
     const [lang] = currentLanguage.split('-');
     const allCountries = countriesUtil.getNames(lang);
+    const _availableLabels = unref(availableLabels);
+    const availableCodes = _availableLabels?.countries
+      ? new Set(_availableLabels.countries.map(c => c.code))
+      : null;
     return Object.fromEntries(
-      Object.entries(allCountries).map(([code, name]) => [
-        code,
-        {
-          label: name,
-          params: { countries: code },
-        },
-      ]),
+      Object.entries(allCountries)
+        .filter(([code]) => !availableCodes || availableCodes.has(code))
+        .map(([code, name]) => [code, { label: name, params: { countries: code } }]),
     );
   });
 
   const languageFilterMap = computed(() => {
+    const _availableLabels = unref(availableLabels);
+    const availableIds = _availableLabels?.languages
+      ? new Set(_availableLabels.languages.map(l => l.id))
+      : null;
     return Object.fromEntries(
-      LanguagesList.map(lang => [
-        lang.id,
-        {
-          label: lang.readable_name,
-          params: { languages: lang.id },
-        },
-      ]),
+      LanguagesList.filter(lang => !availableIds || availableIds.has(lang.id))
+        .sort((a, b) => a.readable_name.localeCompare(b.readable_name))
+        .map(lang => [lang.id, { label: lang.readable_name, params: { languages: lang.id } }]),
     );
   });
 
   const categoryFilterMap = computed(() => {
     const sortedCategories = getSortedCategories();
+    const _availableLabels = unref(availableLabels);
+    const availableCategories = _availableLabels?.categories
+      ? new Set(_availableLabels.categories)
+      : null;
     return Object.fromEntries(
-      Object.entries(sortedCategories).map(([value, name]) => [
-        value,
-        {
-          label: translateMetadataString(name),
-          params: { categories: value },
-        },
-      ]),
+      Object.entries(sortedCategories)
+        .filter(([value]) => !availableCategories || availableCategories.has(value))
+        .map(([value, name]) => [
+          value,
+          { label: translateMetadataString(name), params: { categories: value } },
+        ]),
     );
   });
 
@@ -67,15 +70,10 @@ export default function useCommunityChannelsFilters() {
 
   const {
     filter: languagesFilter,
-    options: _languageOptions,
+    options: languageOptions,
     fetchQueryParams: languagesFetchQueryParams,
   } = useFilter({ name: 'languages', filterMap: languageFilterMap, multi: true });
 
-  const languageOptions = computed(() => {
-    // Sort language options alphabetically by label
-    return _languageOptions.value.sort((a, b) => a.label.localeCompare(b.label));
-  });
-
   const {
     filter: categoriesFilter,
     options: categoryOptions,

contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogList.spec.js

@@ -126,7 +126,7 @@ describe('CatalogList', () => {
   it('shows the visually hidden title and all channel cards in correct semantic structure', async () => {
     renderComponent();
 
-    const title = await screen.findByRole('heading', { name: /content library/i });
+    const title = await screen.findByRole('heading', { name: /kolibri library/i });
     expect(title).toBeInTheDocument();
     expect(title.tagName).toBe('H1');
     expect(title).toHaveClass('visuallyhidden');

contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue

@@ -251,6 +251,8 @@
           title = this.translateConstant('bookmark');
         } else if (routeName === RouteNames.CHANNELS_EDITABLE) {
           title = this.translateConstant('edit');
+        } else if (routeName === RouteNames.COMMUNITY_LIBRARY_ITEMS) {
+          title = this.communityLibraryLabel$();
         }
         // Title changes for other routes are handled by other components, since
         // we can access $tr messages only from within the component.
@@ -264,7 +266,7 @@
     },
     $trs: {
       channelSets: 'Collections',
-      catalog: 'Content Library',
+      catalog: 'Kolibri Library',
       libraryTitle: 'Kolibri Content Library Catalog',
       frequentlyAskedQuestions: 'Frequently asked questions',
     },

contentcuration/contentcuration/frontend/shared/data/public.js

@@ -165,6 +165,22 @@ export function listPublicChannels(params = {}) {
   return client.get(urls.publicchannel_list(), { params }).then(response => response.data);
 }
 
+/**
+ * Get available filter label options for the public channel list.
+ * Returns an object with available values for each filterable field
+ * (categories, languages, countries).
+ *
+ * @param {Object} params
+ * @return {Promise<{
+ *   categories: string[],
+ *   languages: Array<{id: string, lang_name: string}>,
+ *   countries: Array<{code: string, name: string}>
+ * }>}
+ */
+export function getPublicChannelLabels(params = {}) {
+  return client.get(urls.publicchannel_labels(), { params }).then(response => response.data);
+}
+
 /**
  * Get a content node from the public API
  * @param {String} nodeId

contentcuration/contentcuration/frontend/shared/mixins.js

@@ -89,7 +89,7 @@ export const fileStatusMixin = {
 export const constantStrings = createTranslator('ConstantStrings', {
   [ChannelListTypes.EDITABLE]: 'My channels',
   [ChannelListTypes.VIEW_ONLY]: 'View-only',
-  [ChannelListTypes.PUBLIC]: 'Content library',
+  [ChannelListTypes.PUBLIC]: 'Kolibri library',
   [ChannelListTypes.STARRED]: 'Starred',
   do_all: 'Goal: 100% correct',
   num_correct_in_a_row_10: 'Goal: 10 in a row',

contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js

@@ -195,7 +195,7 @@ export const communityChannelsStrings = createTranslator('CommunityChannelsStrin
       'Description of warning shown in the "Submit to Community Library" panel when the channel is not published',
   },
   publicWarningTitle: {
-    message: 'This channel is currently public in the Content Library.',
+    message: 'This channel is currently public in the Kolibri Library.',
     context:
       'Title of warning shown in the "Submit to Community Library" panel when the channel is public',
   },