Requested changes

Author: AlexVelezLl

contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue

@@ -16,7 +16,7 @@
           tabindex="0"
           @click="option.onClick($event)"
           @keydown.enter="option.onClick($event)"
-          @keydown.tab="handleTab($event)"
+          @keydown.tab="checkTabBoundaries($event)"
         >
           <VListTileTitle>
             {{ option.label }}
@@ -253,8 +253,7 @@
           firstOption.focus();
         }
       },
-      handleTab($event) {
-        $event.preventDefault();
+      checkTabBoundaries($event) {
         const optionsList = this.$refs.optionsList;
         const options = optionsList.$el.querySelectorAll('a');
         const index = Array.from(options).indexOf($event.target);
@@ -263,11 +262,9 @@
           (index === options.length - 1 && !$event.shiftKey)
         ) {
           // destroy component
+          $event.preventDefault();
           this.$destroy();
         }
-        const nextIndex = $event.shiftKey ? index - 1 : index + 1;
-        const nextOption = options[nextIndex];
-        nextOption && nextOption.focus();
       },
       newTopicNode() {
         this.trackAction('New topic');
@@ -315,13 +312,13 @@
       },
       quickEditModalFactory(modal) {
         return $event => {
+          $event.preventDefault();
           this.openQuickEditModal({
             modal,
             nodeIds: [this.nodeId],
           });
           const trackActionLabel = modal.replace(/_/g, ' ').toLowerCase();
           this.trackAction(`Edit ${trackActionLabel}`);
-          $event.preventDefault();
         };
       },
       removeNode: withChangeTracker(function(changeTracker) {

contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditAudienceModal.vue

@@ -15,9 +15,8 @@
       <p data-test="multiple-audience-message">
         {{ $tr('multipleAudience') }}
       </p>
-      <hr
-        :style="dividerStyle"
-      >
+      <Divider />
+
     </template>
     <h4 class="modal-subheading">
       {{ $tr('visibleTo') }}
@@ -35,9 +34,8 @@
         :description="rol.description"
       />
     </div>
-    <hr
-      :style="dividerStyle"
-    >
+    <Divider />
+
     <KCheckbox
       :checked="forBeginners"
       data-test="for-beginners-checkbox"
@@ -84,13 +82,6 @@
           description: this.rolesDescription[role],
         }));
       },
-      dividerStyle() {
-        return {
-          border: 0,
-          borderBottom: `1px solid ${this.$themeTokens.fineLine}`,
-          margin: '24px 0',
-        };
-      },
       rolesDescription() {
         return {
           [RolesNames.COACH]: this.$tr('visibleToCoaches'),

contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue

@@ -18,9 +18,7 @@
         :label="$tr('updateDescendantsCheckbox')"
         @change="(value) => { updateDescendants = value }"
       />
-      <hr
-        :style="dividerStyle"
-      >
+      <Divider />
     </template>
     <slot
       name="input"
@@ -97,13 +95,6 @@
       isTopicSelected() {
         return this.nodes.some(node => node.kind === ContentKindsNames.TOPIC);
       },
-      dividerStyle() {
-        return {
-          border: 0,
-          borderBottom: `1px solid ${this.$themeTokens.fineLine}`,
-          margin: '1em 0',
-        };
-      },
     },
     watch: {
       selectedValues() {

contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLanguageModal.vue

@@ -29,9 +29,7 @@
         :label="$tr('updateDescendantsCheckbox')"
         @change="(value) => { updateDescendants = value }"
       />
-      <hr
-        :style="dividerStyle"
-      >
+      <Divider />
     </template>
     <div
       ref="languages"
@@ -96,13 +94,6 @@
           criteria.some(key => lang[key] && lang[key].toLowerCase().includes(searchQuery))
         );
       },
-      dividerStyle() {
-        return {
-          border: 0,
-          borderBottom: `1px solid ${this.$themeTokens.fineLine}`,
-          margin: '1em 0',
-        };
-      },
     },
     created() {
       const languages = [...new Set(this.nodes.map(node => node.language))];
@@ -119,7 +110,7 @@
         );
         const selectedRadio = selectedInput && selectedInput.parentElement;
         if (selectedRadio && selectedRadio.scrollIntoView) {
-          selectedRadio.scrollIntoView();
+          selectedRadio.scrollIntoView({ behavior: 'instant' });
         }
       }
     },

contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue

@@ -911,7 +911,7 @@
       importFromChannels: 'Import from channels',
       addButton: 'Add',
       editButton: 'Edit',
-      editSourceButton: 'Edit source',
+      editSourceButton: 'Edit Source',
       editLevelsButton: 'Edit Levels',
       editLanguageButton: 'Edit Language',
       editAudienceButton: 'Edit Audience',

contentcuration/contentcuration/frontend/shared/utils/helpers.js

@@ -528,18 +528,16 @@ export function getSortedCategories() {
   return categoriesSorted;
 }
 
-export function isAllowedFileType(file) {
+export function isAudioVideoFile(file) {
   if (!file || !file.file_format) {
     return false;
   }
 
-  let allowedFileTypes = [];
-  // add the relevant format presets for audio and video
-  // high res and low res are currently the same, so only one is included
-  allowedFileTypes.push(FormatPresetsMap.get(FormatPresetsNames.HIGH_RES_VIDEO).allowed_formats);
-  allowedFileTypes.push(FormatPresetsMap.get(FormatPresetsNames.AUDIO).allowed_formats);
-  allowedFileTypes = allowedFileTypes.flat();
-  return allowedFileTypes.includes(file.file_format);
+  const videoAllowedFormats = FormatPresetsMap.get(FormatPresetsNames.VIDEO).allowed_formats;
+  const audioAllowedFormats = FormatPresetsMap.get(FormatPresetsNames.AUDIO).allowed_formats;
+  return (
+    videoAllowedFormats.includes(file.file_format) || audioAllowedFormats.includes(file.file_format)
+  );
 }
 
 export function getFileDuration(nodeFiles, kind) {
@@ -553,7 +551,7 @@ export function getFileDuration(nodeFiles, kind) {
 
   // filter for the correct file types,
   // to exclude files such as subtitle or cc
-  const audioVideoFiles = nodeFiles.filter(file => isAllowedFileType(file));
+  const audioVideoFiles = nodeFiles.filter(file => isAudioVideoFile(file));
   // return the last item in the array
   const file = audioVideoFiles[audioVideoFiles.length - 1];
   if (!file || !file.duration) {

contentcuration/contentcuration/frontend/shared/views/Divider.vue

@@ -13,7 +13,7 @@
     props: {
       margin: {
         type: String,
-        default: '1em 0',
+        default: '16px 0',
       },
     },
     computed: {

contentcuration/contentcuration/frontend/shared/views/LicenseDropdown.vue

@@ -132,6 +132,9 @@
       },
       description: {
         get() {
+          if (this.isMixedDescription) {
+            return this.$tr('mixed');
+          }
           return this.value && this.value.license_description;
         },
         set(value) {
@@ -144,6 +147,9 @@
       isMixedLicense() {
         return this.value && this.value.license === nonUniqueValue;
       },
+      isMixedDescription() {
+        return this.value && this.value.license_description === nonUniqueValue;
+      },
       selectedLicense() {
         if (this.isMixedLicense) {
           return null;

contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/index.vue

@@ -107,7 +107,6 @@
   import ActivityDuration from './ActivityDuration';
   import MasteryCriteriaGoal from './MasteryCriteriaGoal';
   import MasteryCriteriaMofNFields from './MasteryCriteriaMofNFields';
-  import Divider from 'shared/views/Divider';
   import {
     nonUniqueValue,
     ContentModalities,
@@ -136,7 +135,6 @@
   export default {
     name: 'CompletionOptions',
     components: {
-      Divider,
       ActivityDuration,
       ExpandableSelect,
       MasteryCriteriaMofNFields,