Issue 5449 show license audit and special permissions checks

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

@@ -17,6 +17,7 @@
         <div class="box-icon">
           <KIcon
             :icon="icon"
+            :color="iconColor"
             :style="{ fontSize: '18px' }"
           />
         </div>
@@ -63,6 +64,8 @@
         switch (props.kind) {
           case 'warning':
             return paletteTheme.red.v_100;
+          case 'success':
+            return paletteTheme.green.v_100;
           case 'info':
             return paletteTheme.grey.v_100;
           default:
@@ -73,6 +76,8 @@
         switch (props.kind) {
           case 'warning':
             return paletteTheme.red.v_300;
+          case 'success':
+            return paletteTheme.green.v_300;
           case 'info':
             return 'transparent';
           default:
@@ -83,6 +88,8 @@
         switch (props.kind) {
           case 'warning':
             return 'error';
+          case 'success':
+            return 'circleCheckmark';
           case 'info':
             return 'infoOutline';
           default:
@@ -91,27 +98,36 @@
       });
 
       const titleColor = computed(() => {
-        return props.kind === 'warning' ? paletteTheme.red.v_600 : tokensTheme.text;
+        if (props.kind === 'warning') return paletteTheme.red.v_600;
+        if (props.kind === 'success') return paletteTheme.green.v_600;
+        return tokensTheme.text;
       });
 
       const descriptionColor = computed(() => {
         return props.kind === 'warning' ? paletteTheme.grey.v_800 : tokensTheme.text;
       });
 
+      const iconColor = computed(() => {
+        if (props.kind === 'warning') return paletteTheme.red.v_600;
+        if (props.kind === 'success') return paletteTheme.green.v_600;
+        return tokensTheme.text;
+      });
+
       return {
         boxBackgroundColor,
         boxBorderColor,
         titleColor,
         descriptionColor,
         icon,
+        iconColor,
       };
     },
     props: {
       kind: {
         type: String,
         required: false,
         default: 'info',
-        validator: value => ['warning', 'info'].includes(value),
+        validator: value => ['warning', 'success', 'info'].includes(value),
       },
       loading: {
         type: Boolean,

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

@@ -0,0 +1,58 @@
+<template>
+
+  <Box
+    kind="success"
+    data-test="compatible-licenses-notice"
+  >
+    <template #title>
+      {{ licenseCheckPassed$() }}
+    </template>
+    <template #description>
+      {{ descriptionText }}
+    </template>
+  </Box>
+
+</template>
+
+
+<script>
+
+  import { computed } from 'vue';
+  import Box from './Box.vue';
+  import { formatLicenseNames } from './composables/useLicenseNames';
+  import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
+
+  export default {
+    name: 'CompatibleLicensesNotice',
+    components: {
+      Box,
+    },
+    setup(props) {
+      const { licenseCheckPassed$, compatibleLicensesDescription$ } = communityChannelsStrings;
+      const includedLicenseNames = computed(() => {
+        return formatLicenseNames(props.licenses, {
+          excludes: ['Special Permissions'],
+        });
+      });
+
+      const descriptionText = computed(() => {
+        return compatibleLicensesDescription$({
+          licenseNames: includedLicenseNames.value,
+        });
+      });
+
+      return {
+        licenseCheckPassed$,
+        descriptionText,
+      };
+    },
+    props: {
+      licenses: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+    },
+  };
+
+</script>

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

@@ -0,0 +1,54 @@
+<template>
+
+  <Box
+    kind="warning"
+    data-test="invalid-licenses-notice"
+  >
+    <template #title>
+      {{ incompatibleLicensesDetected$() }}
+    </template>
+    <template #description>
+      {{ descriptionText }}
+    </template>
+  </Box>
+
+</template>
+
+
+<script>
+
+  import { computed } from 'vue';
+  import Box from './Box.vue';
+  import { formatLicenseNames } from './composables/useLicenseNames';
+  import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
+
+  export default {
+    name: 'InvalidLicensesNotice',
+    components: {
+      Box,
+    },
+    setup(props) {
+      const { incompatibleLicensesDetected$, incompatibleLicensesDescription$ } =
+        communityChannelsStrings;
+      const invalidLicenseNames = computed(() => formatLicenseNames(props.invalidLicenses));
+
+      const descriptionText = computed(() => {
+        return incompatibleLicensesDescription$({
+          licenseNames: invalidLicenseNames.value,
+        });
+      });
+
+      return {
+        incompatibleLicensesDetected$,
+        descriptionText,
+      };
+    },
+    props: {
+      invalidLicenses: {
+        type: Array,
+        required: true,
+      },
+    },
+  };
+
+</script>

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

@@ -0,0 +1,198 @@
+<template>
+
+  <div data-test="special-permissions-list">
+    <div class="header-section">
+      <div class="title">
+        {{ specialPermissionsDetected$() }}
+      </div>
+      <div class="description">
+        {{ confirmDistributionRights$() }}
+      </div>
+    </div>
+
+    <div
+      v-if="isLoading"
+      class="loader-wrapper"
+    >
+      <KCircularLoader />
+    </div>
+
+    <template v-else-if="currentPagePermissions.length > 0">
+      <div class="permissions-box">
+        <KCheckbox
+          v-for="permission in currentPagePermissions"
+          :key="permission.id"
+          :checked="value.includes(permission.id)"
+          :label="permission.description"
+          class="permission-checkbox"
+          @change="togglePermission(permission.id)"
+        />
+      </div>
+
+      <div
+        v-if="totalPages > 1"
+        class="pagination"
+      >
+        <KButton
+          :disabled="currentPage === 1"
+          appearance="flat-button"
+          class="nav-button"
+          icon="chevronLeft"
+          @click="previousPage"
+        >
+          {{ previousPageAction$() }}
+        </KButton>
+        <span class="page-indicator">
+          {{ pageIndicator$({ currentPage, totalPages }) }}
+        </span>
+        <KButton
+          :disabled="currentPage === totalPages"
+          appearance="flat-button"
+          class="nav-button"
+          iconAfter="chevronRight"
+          @click="nextPage"
+        >
+          {{ nextPageAction$() }}
+        </KButton>
+      </div>
+    </template>
+  </div>
+
+</template>
+
+
+<script>
+
+  import { computed, watch } from 'vue';
+  import { useSpecialPermissions } from './composables/useSpecialPermissions';
+  import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
+
+  export default {
+    name: 'SpecialPermissionsList',
+    components: {},
+    setup(props, { emit }) {
+      const {
+        specialPermissionsDetected$,
+        confirmDistributionRights$,
+        previousPageAction$,
+        nextPageAction$,
+        pageIndicator$,
+      } = communityChannelsStrings;
+
+      const {
+        permissions,
+        currentPagePermissions,
+        isLoading,
+        currentPage,
+        totalPages,
+        nextPage,
+        previousPage,
+      } = useSpecialPermissions(props.permissionIds);
+
+      function togglePermission(permissionId) {
+        const currentChecked = [...props.value];
+        const index = currentChecked.indexOf(permissionId);
+        if (index === -1) {
+          currentChecked.push(permissionId);
+        } else {
+          currentChecked.splice(index, 1);
+        }
+        emit('input', currentChecked);
+      }
+
+      const allChecked = computed(() => {
+        return permissions.value.every(p => props.value.includes(p.id));
+      });
+
+      watch(
+        allChecked,
+        val => {
+          emit('update:allChecked', val);
+        },
+        { immediate: true },
+      );
+
+      return {
+        currentPagePermissions,
+        isLoading,
+        currentPage,
+        totalPages,
+        togglePermission,
+        nextPage,
+        previousPage,
+        specialPermissionsDetected$,
+        confirmDistributionRights$,
+        previousPageAction$,
+        nextPageAction$,
+        pageIndicator$,
+      };
+    },
+    props: {
+      permissionIds: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+      value: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+    },
+    emits: ['input', 'update:allChecked'],
+  };
+
+</script>
+
+
+<style scoped lang="scss">
+
+  .header-section {
+    margin-bottom: 8px;
+  }
+
+  .title {
+    margin-bottom: 4px;
+    font-weight: bold;
+  }
+
+  .description {
+    margin-bottom: 12px;
+    font-size: 14px;
+  }
+
+  .permissions-box {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 16px;
+    background-color: v-bind('$themePalette.grey.v_100');
+    border: 1px solid v-bind('$themePalette.grey.v_200');
+    border-radius: 4px;
+  }
+
+  .permission-checkbox {
+    margin: 0;
+    font-size: 14px;
+  }
+
+  .pagination {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 8px;
+    margin-top: 8px;
+  }
+
+  .page-indicator {
+    font-size: 14px;
+    color: v-bind('$themeTokens.text');
+  }
+
+  .loader-wrapper {
+    display: flex;
+    justify-content: center;
+    padding: 20px;
+  }
+
+</style>