Merge down hotfixes into unstable

contentcuration/contentcuration/frontend/accounts/pages/Create.vue

@@ -99,15 +99,20 @@
         <h1 class="font-weight-bold my-2 subheading">
           {{ $tr('sourceLabel') }}*
         </h1>
-        <VSelect
-          v-model="form.source"
-          :items="sourceOptions"
-          item-text="label"
-          item-value="id"
-          box
-          menu-props="offsetY"
-          :label="$tr('sourcePlaceholder')"
-        />
+        <DropdownWrapper>
+          <template #default="{ attach, menuProps }">
+            <VSelect
+              v-model="form.source"
+              :items="sourceOptions"
+              item-text="label"
+              item-value="id"
+              box
+              :menu-props="menuProps"
+              :attach="attach"
+              :label="$tr('sourcePlaceholder')"
+            />
+          </template>
+        </DropdownWrapper>
         <VSlideYTransition>
           <TextArea
             v-if="form.source === sources.ORGANIZATION"
@@ -185,10 +190,12 @@
   import Banner from 'shared/views/Banner';
   import Checkbox from 'shared/views/form/Checkbox';
   import { policies } from 'shared/constants';
+  import DropdownWrapper from 'shared/views/form/DropdownWrapper';
 
   export default {
     name: 'Create',
     components: {
+      DropdownWrapper,
       ImmersiveModalLayout,
       TextField,
       EmailField,

contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue

@@ -6,7 +6,14 @@
         {{ value }}
       </div>
     </VChip>
-    <VBtn icon small right data-test="copy" @click="copyToClipboard">
+    <VBtn
+      v-if="clipboardAvailable"
+      icon
+      small
+      right
+      data-test="copy"
+      @click="copyToClipboard"
+    >
       <Icon small>
         content_copy
       </Icon>
@@ -30,11 +37,18 @@
         type: String,
       },
     },
+    computed: {
+      clipboardAvailable() {
+        return Boolean(navigator.clipboard);
+      },
+    },
     methods: {
       copyToClipboard() {
-        navigator.clipboard.writeText(this.value).then(() => {
-          this.$store.dispatch('showSnackbarSimple', this.successMessage);
-        });
+        if (this.clipboardAvailable) {
+          navigator.clipboard.writeText(this.value).then(() => {
+            this.$store.dispatch('showSnackbarSimple', this.successMessage);
+          });
+        }
       },
     },
   };

contentcuration/contentcuration/frontend/administration/components/__tests__/clipboardChip.spec.js

@@ -12,8 +12,14 @@ function makeWrapper() {
 describe('clipboardChip', () => {
   let wrapper;
   beforeEach(() => {
+    navigator.clipboard = {
+      writeText: jest.fn(),
+    };
     wrapper = makeWrapper();
   });
+  afterEach(() => {
+    delete navigator.clipboard;
+  });
   it('should fire a copy operation on button click', () => {
     const copyToClipboard = jest.fn();
     wrapper.setMethods({ copyToClipboard });

contentcuration/contentcuration/frontend/administration/pages/Users/UserStorage.vue

@@ -16,17 +16,20 @@
           :rules="spaceRules"
         />
       </VFlex>
-      <VFlex style="max-width: 75px;">
-        <VSelect
-          v-model="unit"
-          :items="unitOptions"
-          :menuProps="{ offsetY: true }"
-          box
-          single-line
-          required
-          :rules="unitRules"
-        />
-      </VFlex>
+      <DropdownWrapper component="VFlex" style="max-width: 75px;">
+        <template #default="{ attach, menuProps }">
+          <VSelect
+            v-model="unit"
+            :items="unitOptions"
+            :attach="attach"
+            :menuProps="menuProps"
+            box
+            single-line
+            required
+            :rules="unitRules"
+          />
+        </template>
+      </DropdownWrapper>
     </VLayout>
     <VBtn
       v-if="showCancel"
@@ -55,6 +58,7 @@
   import { mapActions } from 'vuex';
   import findLastKey from 'lodash/findLastKey';
   import { ONE_B, ONE_KB, ONE_MB, ONE_GB, ONE_TB } from 'shared/constants';
+  import DropdownWrapper from 'shared/views/form/DropdownWrapper';
 
   const units = {
     ONE_B,
@@ -66,6 +70,7 @@
 
   export default {
     name: 'UserStorage',
+    components: { DropdownWrapper },
     props: {
       value: {
         type: Number,

contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue

@@ -3,18 +3,21 @@
   <Uploader ref="uploader" :presetID="imagePreset">
     <template #default="{ handleFiles }">
       <VLayout>
-        <VFlex xs7 lg5>
-          <VSelect
-            :key="kindSelectKey"
-            :items="kindSelectItems"
-            :value="kind"
-            :label="$tr('questionTypeLabel')"
-            data-test="kindSelect"
-            :menu-props="{ offsetY: true }"
-            box
-            @input="onKindUpdate"
-          />
-        </VFlex>
+        <DropdownWrapper component="VFlex" xs7 lg5>
+          <template #default="{ attach, menuProps }">
+            <VSelect
+              :key="kindSelectKey"
+              :items="kindSelectItems"
+              :value="kind"
+              :label="$tr('questionTypeLabel')"
+              data-test="kindSelect"
+              :menu-props="menuProps"
+              :attach="attach"
+              box
+              @input="onKindUpdate"
+            />
+          </template>
+        </DropdownWrapper>
       </VLayout>
 
       <VLayout>
@@ -115,10 +118,12 @@
   import MarkdownEditor from 'shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor';
   import MarkdownViewer from 'shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer';
   import { FormatPresetsNames } from 'shared/leUtils/FormatPresets';
+  import DropdownWrapper from 'shared/views/form/DropdownWrapper';
 
   export default {
     name: 'AssessmentItemEditor',
     components: {
+      DropdownWrapper,
       ErrorList,
       MarkdownEditor,
       MarkdownViewer,

contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue

@@ -331,8 +331,15 @@
         return null;
       },
       levels(level) {
-        const match = Object.keys(ContentLevel).find(key => ContentLevel[key] === level);
+        let match = Object.keys(ContentLevel).find(key => ContentLevel[key] === level);
         if (match) {
+          if (match === 'PROFESSIONAL') {
+            match = 'specializedProfessionalTraining';
+          } else if (match === 'WORK_SKILLS') {
+            match = 'allLevelsWorkSkills';
+          } else if (match === 'BASIC_SKILLS') {
+            match = 'allLevelsBasicSkills';
+          }
           return this.translateMetadataString(camelCase(match));
         }
         return null;

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

@@ -38,7 +38,7 @@
 <script>
 
   import { mapActions, mapGetters } from 'vuex';
-  import { RouteNames } from '../constants';
+  import { RouteNames, TabNames } from '../constants';
   import MoveModal from './move/MoveModal';
   import { ContentNode } from 'shared/data/resources';
   import { withChangeTracker } from 'shared/data/changes';
@@ -119,6 +119,7 @@
             params: {
               ...this.$route.params,
               detailNodeIds: newId,
+              tab: TabNames.DETAILS,
             },
           });
         });

contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue

@@ -593,7 +593,21 @@
           .sort()
           .filter(k => ids.includes(ContentLevel[k]));
         if (matches && matches.length > 0) {
-          return this.metadataListText(matches);
+          let mappedMatches = [];
+          let newMatch;
+          matches.map(match => {
+            if (match === 'PROFESSIONAL') {
+              newMatch = 'specializedProfessionalTraining';
+            } else if (match === 'WORK_SKILLS') {
+              newMatch = 'allLevelsWorkSkills';
+            } else if (match === 'BASIC_SKILLS') {
+              newMatch = 'allLevelsBasicSkills';
+            } else {
+              newMatch = match;
+            }
+            mappedMatches.push(newMatch);
+          });
+          return this.metadataListText(mappedMatches);
         } else {
           return '-';
         }

contentcuration/contentcuration/frontend/channelEdit/components/edit/AccessibilityOptions.vue

@@ -12,7 +12,7 @@
           :value="accessibilityItem.value"
           :label="accessibilityItem.label"
           color="primary"
-          :data-test="`checkbox-${accessibilityItem.label}`"
+          :data-test="`checkbox-${accessibilityItem.help}`"
         >
           <template #label>
             <span class="text-xs-left">{{ accessibilityItem.label }}</span>
@@ -22,7 +22,7 @@
               :text="$tr(accessibilityItem.help)"
               bottom
               class="px-2"
-              :data-test="`tooltip-${accessibilityItem.label}`"
+              :data-test="`tooltip-${accessibilityItem.help}`"
             />
           </template>
         </Checkbox>
@@ -89,11 +89,11 @@
       /**
        * Strings for the help tooltips
        */
-      altText: `Alternative text is provided for visual content (e.g., via the HTML alt attribute).`,
-      audioDescription: `Audio descriptions are available (e.g., via an HTML5 track element with kind="descriptions")`,
-      highContrast: `Content meets the visual contrast threshold set out in WCAG Success Criteria 1.4.6`,
-      signLanguage: `Synchronized sign language intepretation is available for audio and video content.`,
-      taggedPdf: `The structures in a PDF have been tagged to improve the navigation of the content.`,
+      altText: `Visual elements in the resource have descriptions that can be accessed by screen readers for the benefit of blind learners`,
+      audioDescription: `The resource contains a second narration audio track that provides additional information for the benefit of blind users and those with low vision`,
+      highContrast: `The resource text and visual elements are displayed with high contrast for the benefit of users with low vision`,
+      signLanguage: `Synchronized sign language intepretation is available for audio and video content`,
+      taggedPdf: `The document contains PDF tags that can be accessed by screen readers for the benefit of blind learners`,
       /* eslint-enable kolibri/vue-no-unused-translations */
     },
   };

contentcuration/contentcuration/frontend/channelEdit/components/edit/ActivityDuration.vue

@@ -10,19 +10,22 @@
       </VFlex>
       <VFlex
         v-else-if="selectedDuration === 'shortActivity' || selectedDuration === 'longActivity'"
-        class="activity-duration-container"
         md3
         sm3
       >
-        <VAutocomplete
-          v-model.number="minutes"
-          :step="increments"
-          box
-          :label="$tr('minutesRequired')"
-          :items="availableNumbers"
-          :menu-props="{ offsetY: true, lazy: true, zIndex: 4 }"
-          attach=".activity-duration-container"
-        />
+        <DropdownWrapper>
+          <template #default="{ attach, menuProps }">
+            <VAutocomplete
+              v-model.number="minutes"
+              :step="increments"
+              box
+              :label="$tr('minutesRequired')"
+              :items="availableNumbers"
+              :menu-props="menuProps"
+              :attach="attach"
+            />
+          </template>
+        </DropdownWrapper>
       </VFlex>
       <VFlex v-else md3 sm3>
         <VTextField
@@ -58,6 +61,7 @@
     getActivityDurationValidators,
     translateValidator,
   } from 'shared/utils/validation';
+  import DropdownWrapper from 'shared/views/form/DropdownWrapper';
 
   const SHORT_MIN = 1;
   const SHORT_MAX = 30;
@@ -70,6 +74,7 @@
 
   export default {
     name: 'ActivityDuration',
+    components: { DropdownWrapper },
     props: {
       selectedDuration: {
         type: String,
@@ -183,19 +188,15 @@
     $trs: {
       minutesRequired: 'Minutes',
       optionalLabel:
-        '(Optional) Duration until resource is marked as complete. This value will not be shown to learners.',
+        '(Optional) Time required for the resource to be marked as completed. This value will not be displayed to learners.',
       notOptionalLabel:
-        'Duration until resource is marked as complete. This value will not be shown to learners.',
+        'Time required for the resource to be marked as completed. This value will not be displayed to learners.',
     },
   };
 
 </script>
 <style lang="less" scoped>
 
-  .activity-duration-container {
-    position: relative;
-  }
-
   .defaultUpload {
     margin: 0.8em;
     font-size: 1.2em;