Use channelVersion objects instead of special permission ids

contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/composables/useSpecialPermissions.js

@@ -5,10 +5,10 @@ const ITEMS_PER_PAGE = 3;
 
 /**
  * Composable that fetches and paginates audited special-permissions licenses
- * for a given set of permission IDs.
+ * for a given channel version ID.
  *
- * @param {Array<string|number>|import('vue').Ref<Array<string|number>>} permissionIds
- *   A list (or ref to a list) of special-permissions license IDs to fetch.
+ * @param {string|number|import('vue').Ref<string|number>|null} channelVersionId
+ *   The ChannelVersion ID to fetch special permissions for via ManyToMany relationship.
  *
  * @returns {{
  *   permissions: import('vue').Ref<Array<Object>>,
@@ -23,7 +23,7 @@ const ITEMS_PER_PAGE = 3;
  *   Reactive state for the fetched, flattened permissions and pagination
  *   helpers used by `SpecialPermissionsList.vue`.
  */
-export function useSpecialPermissions(channelVersionId, permissionIds) {
+export function useSpecialPermissions(channelVersionId) {
   const permissions = ref([]);
   const isLoading = ref(false);
   const error = ref(null);
@@ -39,30 +39,24 @@ export function useSpecialPermissions(channelVersionId, permissionIds) {
     return permissions.value.slice(start, end);
   });
 
-  async function fetchPermissions(versionId, ids) {
+  async function fetchPermissions(versionId) {
     isLoading.value = true;
     error.value = null;
     permissions.value = [];
 
     try {
-      let response = [];
       if (versionId) {
-        response = await AuditedSpecialPermissionsLicense.fetchCollection({
+        const response = await AuditedSpecialPermissionsLicense.fetchCollection({
           channel_version: versionId,
           distributable: false,
         });
-      } else if (ids && ids.length > 0) {
-        response = await AuditedSpecialPermissionsLicense.fetchCollection({
-          by_ids: ids.join(','),
-          distributable: false,
-        });
-      }
 
-      permissions.value = response.map(permission => ({
-        id: permission.id,
-        description: permission.description,
-        distributable: permission.distributable,
-      }));
+        permissions.value = response.map(permission => ({
+          id: permission.id,
+          description: permission.description,
+          distributable: permission.distributable,
+        }));
+      }
     } catch (err) {
       error.value = err;
       permissions.value = [];
@@ -84,9 +78,9 @@ export function useSpecialPermissions(channelVersionId, permissionIds) {
   }
 
   watch(
-    [() => unref(channelVersionId), () => unref(permissionIds)],
-    ([versionId, ids]) => {
-      fetchPermissions(versionId, ids);
+    () => unref(channelVersionId),
+    versionId => {
+      fetchPermissions(versionId);
     },
     { immediate: true },
   );

contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue

@@ -161,10 +161,9 @@
               :licenses="includedLicenses"
             />
             <SpecialPermissionsList
-              v-if="licenseAuditIsFinished && specialPermissions.length > 0"
+              v-if="licenseAuditIsFinished && channelVersionId"
               v-model="checkedSpecialPermissions"
-              :channel-version-id="versionDetail && versionDetail.id"
-              :permission-ids="specialPermissions"
+              :channel-version-id="channelVersionId"
               @update:allChecked="allSpecialPermissionsChecked = $event"
             />
             <div class="country-area">
@@ -431,11 +430,17 @@
         return channelVersion;
       });
 
+      const channelVersionId = computed(() => {
+        if (versionDetail.value?.id) {
+          return versionDetail.value.id;
+        }
+        return null;
+      });
+
       const {
         isLoading: licenseAuditIsLoading,
         isFinished: licenseAuditIsFinished,
         invalidLicenses,
-        specialPermissions,
         includedLicenses,
         checkAndTriggerAudit: checkAndTriggerLicenseAudit,
       } = useLicenseAudit(props.channel, currentChannelVersion);
@@ -574,6 +579,7 @@
         isCurrentVersionAlreadySubmitted,
         canBeEdited,
         displayedVersion,
+        channelVersionId,
         canBeSubmitted,
         publishedDataIsLoading,
         publishedDataIsFinished,
@@ -582,7 +588,6 @@
         licenseAuditIsLoading,
         licenseAuditIsFinished,
         invalidLicenses,
-        specialPermissions,
         includedLicenses,
         onSubmit,
         // Translation functions

contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/licenseCheck/SpecialPermissionsList.vue

@@ -87,7 +87,7 @@
         totalPages,
         nextPage,
         previousPage,
-      } = useSpecialPermissions(props.channelVersionId, props.permissionIds);
+      } = useSpecialPermissions(props.channelVersionId);
 
       function togglePermission(permissionId) {
         const currentChecked = [...props.value];
@@ -133,11 +133,6 @@
         required: false,
         default: null,
       },
-      permissionIds: {
-        type: Array,
-        required: false,
-        default: () => [],
-      },
       value: {
         type: Array,
         required: false,

contentcuration/contentcuration/frontend/shared/styles/main.scss

@@ -1,5 +1,5 @@
 @import '~material-icons/iconfont/material-icons.css';
-@import '~kolibri-design-system/lib/styles/common';
+@import '~kolibri-design-system/lib/styles/definitions';
 
 @font-face {
   font-family: 'Noto Sans';