Make Community Library more consistent with Kolibri Library page

Author: AlexVelezLl

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/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 }) }}
@@ -543,18 +543,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/__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/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',
   },

contentcuration/kolibri_public/views.py

@@ -201,7 +201,7 @@ class ChannelMetadataViewSet(ReadOnlyValuesViewset):
     }
 
     def get_queryset(self):
-        return models.ChannelMetadata.objects.all()
+        return models.ChannelMetadata.objects.all().order_by("name")
 
     def consolidate(self, items, queryset):
         # Only keep a single item for every channel ID, to get rid of possible