From f9ae54628b508b099eb8feadf927897969209f75 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Thu, 17 Mar 2022 16:42:21 -0400
Subject: [PATCH 01/20] Add new metadata details to the text of the resource
 panel

---
 .../channelEdit/components/ResourcePanel.vue  | 114 +++++++++++++++++-
 1 file changed, 111 insertions(+), 3 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
index 28614b8779..7878ddb288 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
@@ -140,6 +140,31 @@
             </span>
           </DetailsRow>
           <DetailsRow :label="$tr('description')" :text="getText('description')" />
+          <DetailsRow
+            :label="translateMetadataString('level')"
+            :text="level(node.level)"
+            notranslate
+          />
+          <DetailsRow
+            :label="translateMetadataString('learningActivity')"
+            :text="learningActivity(node.learning_activities)"
+            notranslate
+          />
+          <DetailsRow
+            :label="translateMetadataString('completion')"
+            :text="completion(node.completion)"
+            notranslate
+          />
+          <DetailsRow
+            :label="translateMetadataString('duration')"
+            :text="duration(node.duration)"
+            notranslate
+          />
+          <DetailsRow
+            :label="translateMetadataString('category')"
+            :text="category(node.categories)"
+            notranslate
+          />
           <DetailsRow :label="$tr('tags')">
             <div v-if="!sortedTags.length">
               {{ defaultText }}
@@ -162,7 +187,11 @@
           </div>
           <DetailsRow :label="$tr('language')" :text="languageName" />
           <DetailsRow v-if="!isTopic" :label="$tr('visibleTo')" :text="roleName" />
-
+          <DetailsRow
+            :label="translateMetadataString('accessibility')"
+            :text="accessibilityOptions(node.accessbility_options)"
+            notranslate
+          />
           <!-- Related resources section -->
           <template v-if="!isTopic">
             <div class="section-header">
@@ -312,8 +341,16 @@
 
   import sortBy from 'lodash/sortBy';
   import { mapActions, mapGetters } from 'vuex';
+  import { camelCase } from 'lodash';
   import { isImportedContent, importedChannelLink } from '../utils';
   import FilePreview from '../views/files/FilePreview';
+  import {
+    CompletionCriteriaModels,
+    ContentLevel,
+    Categories,
+    LearningActivities,
+    AccessibilityCategories,
+  } from '../../shared/constants';
   import AssessmentItemPreview from './AssessmentItemPreview/AssessmentItemPreview';
   import ContentNodeValidator from './ContentNodeValidator';
   import {
@@ -333,7 +370,12 @@
   import Checkbox from 'shared/views/form/Checkbox';
   import Banner from 'shared/views/Banner';
   import Tabs from 'shared/views/Tabs';
-  import { constantsTranslationMixin, fileSizeMixin, titleMixin } from 'shared/mixins';
+  import {
+    constantsTranslationMixin,
+    fileSizeMixin,
+    titleMixin,
+    metadataTranslationMixin,
+  } from 'shared/mixins';
   import { MasteryModelsNames } from 'shared/leUtils/MasteryModels';
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
 
@@ -351,7 +393,7 @@
       Banner,
       Tabs,
     },
-    mixins: [constantsTranslationMixin, fileSizeMixin, titleMixin],
+    mixins: [constantsTranslationMixin, metadataTranslationMixin, fileSizeMixin, titleMixin],
     props: {
       nodeId: {
         type: String,
@@ -554,6 +596,72 @@
       getText(field) {
         return this.node[field] || this.defaultText;
       },
+      matchIdToString(ids) {
+        return ids.map(i => this.translateMetadataString(camelCase(i))).join(', ');
+      },
+      level(level) {
+        const match = Object.keys(ContentLevel).find(k => ContentLevel[k] == level);
+        if (match) {
+          return this.translateMetadataString(camelCase(match));
+        } else {
+          return '-';
+        }
+      },
+      learningActivity(options) {
+        const ids = Object.values(options);
+        const matches = Object.keys(LearningActivities).filter(k =>
+          ids.includes(LearningActivities[k])
+        );
+        if (matches) {
+          return this.matchIdToString(matches);
+        } else {
+          return '-';
+        }
+      },
+      completion(completion) {
+        const match = Object.keys(CompletionCriteriaModels).find(
+          k => CompletionCriteriaModels[k] == completion
+        );
+        if (match) {
+          return this.translateMetadataString(camelCase(match));
+        } else {
+          return '-';
+        }
+      },
+      duration(duration) {
+        const match = Object.keys(CompletionCriteriaModels).find(
+          k => CompletionCriteriaModels[k] == duration
+        );
+        if (match) {
+          return this.translateMetadataString(camelCase(match));
+        } else {
+          return '-';
+        }
+      },
+      accessibilityOptions(options) {
+        if (options) {
+          const ids = Object.values(options);
+          const matches = Object.keys(AccessibilityCategories).filter(k =>
+            ids.includes(AccessibilityCategories[k])
+          );
+          if (matches) {
+            return this.matchIdToString(matches);
+          } else {
+            return '-';
+          }
+        } else {
+          return '-';
+        }
+      },
+      category(options) {
+        const ids = Object.values(options);
+        const matches = Object.keys(Categories).filter(k => ids.includes(Categories[k]));
+        if (matches) {
+          return this.matchIdToString(matches);
+        } else {
+          return '-';
+        }
+      },
       loadNode() {
         // Load related models
         if (this.node) {

From 0cb9a3935cc2e488d6e24db808347b9b7b2e3bec Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Mon, 21 Mar 2022 11:39:55 -0400
Subject: [PATCH 02/20] Remove incorrect references to completion and duration

---
 .../channelEdit/components/ResourcePanel.vue  | 33 ++++++-------------
 1 file changed, 10 insertions(+), 23 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
index 7878ddb288..f08dceb747 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
@@ -152,14 +152,16 @@
           />
           <DetailsRow
             :label="translateMetadataString('completion')"
-            :text="completion(node.completion)"
+            :text="completion()"
             notranslate
           />
           <DetailsRow
             :label="translateMetadataString('duration')"
-            :text="duration(node.duration)"
+            :text="duration()"
             notranslate
           />
+          <div>
+          </div>
           <DetailsRow
             :label="translateMetadataString('category')"
             :text="category(node.categories)"
@@ -345,7 +347,6 @@
   import { isImportedContent, importedChannelLink } from '../utils';
   import FilePreview from '../views/files/FilePreview';
   import {
-    CompletionCriteriaModels,
     ContentLevel,
     Categories,
     LearningActivities,
@@ -612,31 +613,17 @@
         const matches = Object.keys(LearningActivities).filter(k =>
           ids.includes(LearningActivities[k])
         );
-        if (matches) {
+        if (matches && matches.length > 0) {
           return this.matchIdToString(matches);
         } else {
           return '-';
         }
       },
-      completion(completion) {
-        const match = Object.keys(CompletionCriteriaModels).find(
-          k => CompletionCriteriaModels[k] == completion
-        );
-        if (match) {
-          return this.translateMetadataString(camelCase(match));
-        } else {
-          return '-';
-        }
+      completion() {
+        return '-';
       },
-      duration(duration) {
-        const match = Object.keys(CompletionCriteriaModels).find(
-          k => CompletionCriteriaModels[k] == duration
-        );
-        if (match) {
-          return this.translateMetadataString(camelCase(match));
-        } else {
-          return '-';
-        }
+      duration() {
+        return '-';
       },
       accessibilityOptions(options) {
         if (options) {
@@ -656,7 +643,7 @@
       category(options) {
         const ids = Object.values(options);
         const matches = Object.keys(Categories).filter(k => ids.includes(Categories[k]));
-        if (matches) {
+        if (matches && matches.length > 0) {
           return this.matchIdToString(matches);
         } else {
           return '-';

From 8e3a8b1f0e4f2fc04f8aa0ac7f12153c0b6641de Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Thu, 14 Apr 2022 10:49:59 -0400
Subject: [PATCH 03/20] Update display to not show metadata on folders, and
 update strings for exercise completion goals

---
 .../channelEdit/components/ResourcePanel.vue  | 79 +++++++++++++++----
 .../contentcuration/frontend/shared/mixins.js | 10 +--
 2 files changed, 67 insertions(+), 22 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
index f08dceb747..8f7895fa8e 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
@@ -127,42 +127,47 @@
               {{ $formatNumber(assessmentItems.length) }}
             </span>
           </DetailsRow>
-          <DetailsRow
-            v-if="isExercise"
-            :label="$tr('masteryCriteria')"
-          >
-            <span v-if="noMasteryModel" class="red--text">
-              <Icon color="red" small>error</Icon>
-              <span class="mx-1">{{ $tr('noMasteryModelError') }}</span>
-            </span>
-            <span v-else>
-              {{ masteryCriteria }}
-            </span>
-          </DetailsRow>
           <DetailsRow :label="$tr('description')" :text="getText('description')" />
           <DetailsRow
+            v-if="!isTopic"
             :label="translateMetadataString('level')"
             :text="level(node.level)"
             notranslate
           />
           <DetailsRow
+            v-if="!isTopic"
             :label="translateMetadataString('learningActivity')"
             :text="learningActivity(node.learning_activities)"
             notranslate
           />
           <DetailsRow
+            v-if="!isExercise && !isTopic"
             :label="translateMetadataString('completion')"
-            :text="completion()"
+            :text="completion(node.extra_fields)"
             notranslate
           />
           <DetailsRow
+            v-if="isExercise"
+            :label="$tr('completion')"
+          >
+            <span v-if="noMasteryModel" class="red--text">
+              <Icon color="red" small>error</Icon>
+              <span class="mx-1">{{ $tr('noMasteryModelError') }}</span>
+            </span>
+            <span v-else>
+              {{ masteryCriteria }}
+            </span>
+          </DetailsRow>
+          <DetailsRow
+            v-if="!isTopic"
             :label="translateMetadataString('duration')"
-            :text="duration()"
+            :text="duration(node.extra_fields)"
             notranslate
           />
           <div>
           </div>
           <DetailsRow
+          v-if="!isTopic"
             :label="translateMetadataString('category')"
             :text="category(node.categories)"
             notranslate
@@ -190,6 +195,7 @@
           <DetailsRow :label="$tr('language')" :text="languageName" />
           <DetailsRow v-if="!isTopic" :label="$tr('visibleTo')" :text="roleName" />
           <DetailsRow
+            v-if="!isTopic"
             :label="translateMetadataString('accessibility')"
             :text="accessibilityOptions(node.accessbility_options)"
             notranslate
@@ -351,6 +357,7 @@
     Categories,
     LearningActivities,
     AccessibilityCategories,
+    CompletionCriteriaModels,
   } from '../../shared/constants';
   import AssessmentItemPreview from './AssessmentItemPreview/AssessmentItemPreview';
   import ContentNodeValidator from './ContentNodeValidator';
@@ -456,6 +463,7 @@
         return this.contentNodesTotalSize([this.nodeId]);
       },
       isTopic() {
+        console.log(JSON.parse(JSON.stringify(this.node.extra_fields)));
         return this.node && this.node.kind === ContentKindsNames.TOPIC;
       },
       isExercise() {
@@ -600,6 +608,22 @@
       matchIdToString(ids) {
         return ids.map(i => this.translateMetadataString(camelCase(i))).join(', ');
       },
+      toMinutes(duration) {
+        const minutes = Math.round(duration / 60)
+        return this.$tr('duration', { value: minutes})
+      },
+      toExactTimeToComplete(duration) {
+        const minutes = Math.floor(duration / 60)
+        const seconds = duration % minutes
+        return `${minutes}:${seconds}`
+      },
+      toSuggestedDuration(duration) {
+        if (duration < 1860) {
+          return this.$tr('shortActivity')
+        } else {
+          return this.$tr('longActivity')
+        }
+      },
       level(level) {
         const match = Object.keys(ContentLevel).find(k => ContentLevel[k] == level);
         if (match) {
@@ -619,10 +643,25 @@
           return '-';
         }
       },
-      completion() {
+      completion(value) {
+        if (value && value.completion_criteria) {
+          if (value.completion_criteria.model === CompletionCriteriaModels.APPROX_TIME) {
+            return this.toSuggestedDuration(value.suggested_duration)
+          } else if (value.completion_criteria.model === CompletionCriteriaModels.REFERNCE) {
+            return this.$tr('reference')
+          }
+          return this.$tr(camelCase(value.completion_criteria.model))
+        }
         return '-';
       },
-      duration() {
+      duration(value) {
+        if (value && value.completion_criteria) {
+          if (value.completion_criteria.model === CompletionCriteriaModels.TIME) {
+            return this.toExactTimeToComplete(value.completion_criteria.threshold)
+          } else if (value.completion_criteria.model === CompletionCriteriaModels.APPROX_TIME) {
+            return this.toMinutes(value.suggested_duration)
+          }
+        }
         return '-';
       },
       accessibilityOptions(options) {
@@ -675,12 +714,17 @@
     $trs: {
       questions: 'Questions',
       masteryCriteria: 'Mastery criteria',
-      masteryMofN: '{m} out of {n}',
+      masteryMofN: 'Goal: {m} out of {n}',
       details: 'Details',
+      completion: 'Completion',
       showAnswers: 'Show answers',
       questionCount: '{value, number, integer} {value, plural, one {question} other {questions}}',
       description: 'Description',
+      duration: '{value, number, integer} minutes',
+      shortActivity: 'Short activity',
+      longActivity: 'Long activity',
       tags: 'Tags',
+      time: 'Exact time to complete',
       audience: 'Audience',
       language: 'Language',
       visibleTo: 'Visible to',
@@ -701,6 +745,7 @@
       availableFormats: 'Available formats',
       subtitles: 'Captions and subtitles',
       fileSize: 'Size',
+      reference: 'Reference',
 
       // Validation strings
       noLicenseError: 'Missing license',
diff --git a/contentcuration/contentcuration/frontend/shared/mixins.js b/contentcuration/contentcuration/frontend/shared/mixins.js
index 8c64e09d66..b981f14a96 100644
--- a/contentcuration/contentcuration/frontend/shared/mixins.js
+++ b/contentcuration/contentcuration/frontend/shared/mixins.js
@@ -90,11 +90,11 @@ export const constantStrings = createTranslator('ConstantStrings', {
   [ChannelListTypes.VIEW_ONLY]: 'View-only',
   [ChannelListTypes.PUBLIC]: 'Content library',
   [ChannelListTypes.STARRED]: 'Starred',
-  do_all: '100% correct',
-  num_correct_in_a_row_10: '10 in a row',
-  num_correct_in_a_row_2: '2 in a row',
-  num_correct_in_a_row_3: '3 in a row',
-  num_correct_in_a_row_5: '5 in a row',
+  do_all: 'Goal: 100% correct',
+  num_correct_in_a_row_10: 'Goal: 10 in a row',
+  num_correct_in_a_row_2: 'Goal: 2 in a row',
+  num_correct_in_a_row_3: 'Goal: 3 in a row',
+  num_correct_in_a_row_5: 'Goal: 5 in a row',
   m_of_n: 'M of N...',
   do_all_description:
     'Learner must answer all questions in the exercise correctly (not recommended for long exercises)',

From 21dd2dbb1ebaf122efe7f4a78bf31c804a9143db Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Thu, 16 Jun 2022 10:38:52 -0400
Subject: [PATCH 04/20] Fixes to resource panel code for new metadata; update
 ContentNodeIcon to new learning activities icons

---
 .../channelEdit/components/ResourcePanel.vue  | 221 +++++-------------
 .../channelEdit/vuex/contentNode/getters.js   |   5 +
 .../frontend/shared/views/ContentNodeIcon.vue | 137 +++++------
 .../frontend/shared/vuetify/icons.js          |  16 +-
 4 files changed, 143 insertions(+), 236 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
index 8f7895fa8e..515e1e51b0 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
@@ -3,26 +3,19 @@
   <VLayout row wrap @scroll="$emit('scroll', $event)">
     <VFlex xs12>
       <VLayout v-if="!hideNavigation" row>
-        <VFlex v-if="!loading && node">
-          <div class="mb-1">
-            <!-- Slot for elements like "Back" link -->
-            <slot name="navigation"></slot>
-          </div>
-          <ContentNodeIcon :kind="node.kind" includeText />
-        </VFlex>
+        <div v-if="!loading && node" class="mb-1">
+          <!-- Slot for elements like "Back" link -->
+          <slot name="navigation"></slot>
+          <ContentNodeIcon v-if="isTopic" :isTopic="true" includeText chip />
+          <ContentNodeIcon v-else-if="node.learning_activities" :learningActivity="node.learning_activities" includeText
+            chip />
+        </div>
+
         <VSpacer />
-        <VBtn
-          icon
-          flat
-          small
-          color="grey"
-          class="ma-0"
-          @click="$emit('close')"
-        >
+        <VBtn icon flat small color="grey" class="ma-0" @click="$emit('close')">
           <Icon>clear</Icon>
         </VBtn>
       </VLayout>
-      <ContentNodeIcon v-else :kind="node.kind" includeText />
     </VFlex>
     <LoadingText v-if="loading || !node" class="mt-4" />
     <VFlex v-else xs12 class="pb-5">
@@ -55,18 +48,9 @@
       </Tabs>
       <VTabsItems :value="tab" @change="tab = $event">
         <VTabItem value="questions">
-          <Banner
-            :value="!assessmentItems.length"
-            class="my-2"
-            error
-            :text="$tr('noQuestionsError')"
-          />
-          <Banner
-            :value="Boolean(invalidQuestionCount)"
-            class="my-2"
-            error
-            :text="$tr('incompleteQuestionError', { count: invalidQuestionCount })"
-          />
+          <Banner :value="!assessmentItems.length" class="my-2" error :text="$tr('noQuestionsError')" />
+          <Banner :value="Boolean(invalidQuestionCount)" class="my-2" error
+            :text="$tr('incompleteQuestionError', { count: invalidQuestionCount })" />
           <VLayout v-if="assessmentItems.length" justify-space-between align-center class="my-3">
             <VFlex>
               <Checkbox v-model="showAnswers" :label="$tr('showAnswers')" class="ma-0" />
@@ -84,10 +68,7 @@
                   </div>
                 </VFlex>
                 <VFlex>
-                  <AssessmentItemPreview
-                    :item="item"
-                    :detailed="showAnswers"
-                  />
+                  <AssessmentItemPreview :item="item" :detailed="showAnswers" />
                 </VFlex>
               </VLayout>
             </VCardText>
@@ -96,11 +77,8 @@
         </VTabItem>
         <VTabItem value="details">
           <!-- File preview -->
-          <FilePreview
-            v-if="isResource && !isExercise && primaryFiles[0]"
-            :nodeId="nodeId"
-            :fileId="primaryFiles[0].id"
-          />
+          <FilePreview v-if="isResource && !isExercise && primaryFiles[0]" :nodeId="nodeId"
+            :fileId="primaryFiles[0].id" />
           <VCard v-else-if="isResource && !isExercise" class="preview-error" flat>
             <VLayout align-center justify-center fill-height>
               <VTooltip bottom>
@@ -115,10 +93,7 @@
           </VCard>
 
           <!-- Content details -->
-          <DetailsRow
-            v-if="isExercise"
-            :label="$tr('questions')"
-          >
+          <DetailsRow v-if="isExercise" :label="$tr('questions')">
             <span v-if="!assessmentItems.length" class="red--text">
               <Icon color="red" small>error</Icon>
               <span class="mx-1">{{ $tr('noQuestionsError') }}</span>
@@ -128,28 +103,14 @@
             </span>
           </DetailsRow>
           <DetailsRow :label="$tr('description')" :text="getText('description')" />
-          <DetailsRow
-            v-if="!isTopic"
-            :label="translateMetadataString('level')"
-            :text="level(node.level)"
-            notranslate
-          />
-          <DetailsRow
-            v-if="!isTopic"
-            :label="translateMetadataString('learningActivity')"
-            :text="learningActivity(node.learning_activities)"
-            notranslate
-          />
-          <DetailsRow
-            v-if="!isExercise && !isTopic"
-            :label="translateMetadataString('completion')"
-            :text="completion(node.extra_fields)"
-            notranslate
-          />
-          <DetailsRow
-            v-if="isExercise"
-            :label="$tr('completion')"
-          >
+          <DetailsRow v-if="!isTopic" :label="translateMetadataString('level')" :text="level(node.grade_levels)"
+            notranslate />
+          <DetailsRow v-if="!isTopic" :label="translateMetadataString('learningActivity')">
+            <ContentNodeIcon :learningActivity="node.learning_activities" includeText />
+          </DetailsRow>
+          <DetailsRow v-if="!isExercise && !isTopic" :label="translateMetadataString('completion')"
+            :text="completion(node.extra_fields)" notranslate />
+          <DetailsRow v-if="isExercise" :label="$tr('completion')">
             <span v-if="noMasteryModel" class="red--text">
               <Icon color="red" small>error</Icon>
               <span class="mx-1">{{ $tr('noMasteryModelError') }}</span>
@@ -158,31 +119,17 @@
               {{ masteryCriteria }}
             </span>
           </DetailsRow>
-          <DetailsRow
-            v-if="!isTopic"
-            :label="translateMetadataString('duration')"
-            :text="duration(node.extra_fields)"
-            notranslate
-          />
+          <DetailsRow v-if="!isTopic" :label="translateMetadataString('duration')" :text="duration(node.extra_fields)"
+            notranslate />
           <div>
           </div>
-          <DetailsRow
-          v-if="!isTopic"
-            :label="translateMetadataString('category')"
-            :text="category(node.categories)"
-            notranslate
-          />
+          <DetailsRow v-if="!isTopic" :label="translateMetadataString('category')" :text="category(node.categories)"
+            notranslate />
           <DetailsRow :label="$tr('tags')">
             <div v-if="!sortedTags.length">
               {{ defaultText }}
             </div>
-            <VChip
-              v-for="tag in sortedTags"
-              v-else
-              :key="tag"
-              class="notranslate"
-              color="grey lighten-4"
-            >
+            <VChip v-for="tag in sortedTags" v-else :key="tag" class="notranslate" color="grey lighten-4">
               {{ tag }}
             </VChip>
           </DetailsRow>
@@ -194,12 +141,8 @@
           </div>
           <DetailsRow :label="$tr('language')" :text="languageName" />
           <DetailsRow v-if="!isTopic" :label="$tr('visibleTo')" :text="roleName" />
-          <DetailsRow
-            v-if="!isTopic"
-            :label="translateMetadataString('accessibility')"
-            :text="accessibilityOptions(node.accessbility_options)"
-            notranslate
-          />
+          <DetailsRow v-if="!isTopic" :label="translateMetadataString('accessibility')"
+            :text="accessibilityOptions(node.accessibility_labels)" notranslate />
           <!-- Related resources section -->
           <template v-if="!isTopic">
             <div class="section-header">
@@ -209,31 +152,25 @@
               <div v-if="!previousSteps.length">
                 {{ defaultText }}
               </div>
-              <VList v-else dense class="mb-2 pa-0">
-                <VListTile v-for="prerequisite in previousSteps" :key="prerequisite.id">
-                  <VListTileContent>
-                    <VListTileTitle :class="getTitleClass(prerequisite)">
-                      <ContentNodeIcon :kind="prerequisite.kind" class="mr-2" />
-                      {{ getTitle(prerequisite) }}
-                    </VListTileTitle>
-                  </VListTileContent>
-                </VListTile>
-              </VList>
+              <div v-else dense class="mb-2 pa-1">
+                <div v-for="prerequisite in previousSteps" :key="prerequisite.id">
+                  <ContentNodeIcon v-if="prerequisite.learning_activities"
+                    :learningActivity="prerequisite.learning_activities" class="mr-2" />
+                  {{ getTitle(prerequisite) }}
+                </div>
+              </div>
             </DetailsRow>
             <DetailsRow :label="$tr('nextSteps')">
               <div v-if="!nextSteps.length">
                 {{ defaultText }}
               </div>
-              <VList v-else dense class="mb-2 pa-0">
-                <VListTile v-for="postrequisite in nextSteps" :key="postrequisite.id">
-                  <VListTileContent>
-                    <VListTileTitle :class="getTitleClass(postrequisite)">
-                      <ContentNodeIcon :kind="postrequisite.kind" class="mr-2" />
-                      {{ getTitle(postrequisite) }}
-                    </VListTileTitle>
-                  </VListTileContent>
-                </VListTile>
-              </VList>
+              <div v-else dense class="mb-2 pa-1">
+                <div v-for="postrequisite in nextSteps" :key="postrequisite.id">
+                  <ContentNodeIcon v-if="postrequisite.learning_activities"
+                    :learningActivity="postrequisite.learning_activities" class="mr-2" />
+                  {{ getTitle(postrequisite) }}
+                </div>
+              </div>
             </DetailsRow>
           </template>
 
@@ -243,13 +180,8 @@
               {{ $tr('resources') }}
             </div>
             <DetailsRow v-if="isImported && importedChannelLink" :label="$tr('originalChannel')">
-              <ActionLink
-                :text="importedChannelName"
-                :href="importedChannelLink"
-                truncate
-                notranslate
-                target="_blank"
-              />
+              <ActionLink :text="importedChannelName" :href="importedChannelLink" truncate notranslate
+                target="_blank" />
             </DetailsRow>
             <DetailsRow :label="$tr('totalResources')">
               <p>
@@ -259,7 +191,7 @@
                 <VListTile v-for="kind in kindCount" :key="kind.kind">
                   <VListTileContent>
                     <VListTileTitle>
-                      <ContentNodeIcon :kind="kind.kind" class="mr-2" />
+                      <!-- <ContentNodeIcon :learningActivity="kind.learning_activities" class="mr-2" /> -->
                     </VListTileTitle>
                   </VListTileContent>
                 </VListTile>
@@ -273,13 +205,8 @@
               {{ $tr('source') }}
             </div>
             <DetailsRow v-if="isImported && importedChannelLink" :label="$tr('originalChannel')">
-              <ActionLink
-                :text="importedChannelName"
-                :href="importedChannelLink"
-                truncate
-                notranslate
-                target="_blank"
-              />
+              <ActionLink :text="importedChannelName" :href="importedChannelLink" truncate notranslate
+                target="_blank" />
             </DetailsRow>
             <DetailsRow :label="$tr('author')" :text="getText('author')" notranslate />
             <DetailsRow :label="$tr('provider')" :text="getText('provider')" notranslate />
@@ -322,19 +249,10 @@
                   <Icon color="red" small>error</Icon>
                   <span class="mx-1">{{ $tr('noFilesError') }}</span>
                 </span>
-                <ExpandableList
-                  v-else
-                  :noItemsText="defaultText"
-                  :items="availableFormats"
-                  inline
-                />
+                <ExpandableList v-else :noItemsText="defaultText" :items="availableFormats" inline />
               </DetailsRow>
               <DetailsRow v-if="node.kind === 'video'" :label="$tr('subtitles')">
-                <ExpandableList
-                  :noItemsText="defaultText"
-                  :items="subtitleFileLanguages"
-                  inline
-                />
+                <ExpandableList :noItemsText="defaultText" :items="subtitleFileLanguages" inline />
               </DetailsRow>
             </template>
           </template>
@@ -355,7 +273,6 @@
   import {
     ContentLevel,
     Categories,
-    LearningActivities,
     AccessibilityCategories,
     CompletionCriteriaModels,
   } from '../../shared/constants';
@@ -624,18 +541,10 @@
           return this.$tr('longActivity')
         }
       },
-      level(level) {
-        const match = Object.keys(ContentLevel).find(k => ContentLevel[k] == level);
-        if (match) {
-          return this.translateMetadataString(camelCase(match));
-        } else {
-          return '-';
-        }
-      },
-      learningActivity(options) {
-        const ids = Object.values(options);
-        const matches = Object.keys(LearningActivities).filter(k =>
-          ids.includes(LearningActivities[k])
+      level(levels) {
+        const ids = Object.keys(levels);
+        const matches = Object.keys(ContentLevel).filter(k =>
+          ids.includes(ContentLevel[k])
         );
         if (matches && matches.length > 0) {
           return this.matchIdToString(matches);
@@ -665,22 +574,18 @@
         return '-';
       },
       accessibilityOptions(options) {
-        if (options) {
-          const ids = Object.values(options);
-          const matches = Object.keys(AccessibilityCategories).filter(k =>
-            ids.includes(AccessibilityCategories[k])
-          );
-          if (matches) {
-            return this.matchIdToString(matches);
-          } else {
-            return '-';
-          }
+        const ids = Object.keys(options);
+        const matches = Object.keys(AccessibilityCategories).filter(k =>
+          ids.includes(AccessibilityCategories[k])
+        );
+        if (matches && matches.length > 0) {
+          return this.matchIdToString(matches);
         } else {
           return '-';
         }
       },
       category(options) {
-        const ids = Object.values(options);
+        const ids = Object.keys(options);
         const matches = Object.keys(Categories).filter(k => ids.includes(Categories[k]));
         if (matches && matches.length > 0) {
           return this.matchIdToString(matches);
diff --git a/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/getters.js b/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/getters.js
index e4e374062f..6403e1fd22 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/getters.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/getters.js
@@ -157,6 +157,7 @@ function getStepDetail(state, getters, contentNodeId) {
     id: contentNodeId,
     title: '',
     kind: '',
+    learning_activities: '',
     parentTitle: '',
   };
 
@@ -166,8 +167,10 @@ function getStepDetail(state, getters, contentNodeId) {
     return stepDetail;
   }
 
+
   stepDetail.title = node.title;
   stepDetail.kind = node.kind;
+  stepDetail.learning_activities = node.learning_activities;
 
   const parentNodeId = state.contentNodesMap[contentNodeId].parent;
 
@@ -178,6 +181,8 @@ function getStepDetail(state, getters, contentNodeId) {
     }
   }
 
+  console.log(stepDetail)
+
   return stepDetail;
 }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue b/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue
index 874b084810..32e281968c 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue
@@ -1,105 +1,92 @@
 <template>
 
-  <span v-if="icon">
-    <VChip
-      v-if="showColor"
-      label
-      :color="kind"
-      :small="small"
-      :textColor="fontColor"
-      class="ma-0 pa-0"
-      :class="{ iconOnly: !includeText, fillWidth }"
-      :style="{ width: fillWidth ? '100%' : 'unset' }"
-      capture-as-image
-    >
-      <Icon small :color="fontColor" v-bind="$attrs">
-        {{ icon }}
-      </Icon>
-      <span v-if="includeText" class="ml-2">{{ text }}</span>
+  <!-- <span v-if="icon">
+    <VChip v-if="showColor" label color="#efefef" :small="small" :textColor="fontColor" class="ma-0 pa-0"
+      :class="{ iconOnly: !includeText, fillWidth }" :style="{ width: fillWidth ? '100%' : 'unset' }" capture-as-image>
+      <KIcon small color="white" :icon="icon" />
+      <span v-if="includeText" class="ml-2">"hello world"</span>
     </VChip>
     <span v-else capture-as-image>
-      <Icon :color="fontColor" v-bind="$attrs">
-        {{ icon }}
-      </Icon>
-      <span v-if="includeText">{{ text }}</span>
+      <KIcon small color="white" :icon="icon" />
+      <span v-if="includeText">"hello world"</span>
     </span>
-  </span>
+  </span> -->
+  <div v-if="includeText && chip" class="chip">
+    <KLabeledIcon :icon="icon" :label="text" />
+  </div>
+  <div v-else-if="includeText && !chip">
+    <KLabeledIcon :icon="icon" :label="text" />
+  </div>
+  <KIcon v-else :icon="icon" :aria-label="text" />
+
 
 </template>
 
 <script>
 
-  import ContentKinds from 'shared/leUtils/ContentKinds';
-  import { getContentKindIcon } from 'shared/vuetify/icons';
+import { getContentKindIcon } from 'shared/vuetify/icons';
+import { LearningActivities } from '../../shared/constants';
+import { camelCase } from 'lodash';
+import {  metadataTranslationMixin } from 'shared/mixins';
 
   export default {
     name: 'ContentNodeIcon',
+    mixins: [metadataTranslationMixin],
+
     props: {
-      kind: {
-        type: String,
-        validator: value => {
-          return value === 'unsupported' || ContentKinds.has(value);
-        },
-        default: 'unsupported',
-      },
-      includeText: {
-        type: Boolean,
-        default: false,
-      },
-      showColor: {
-        type: Boolean,
-        default: true,
+      learningActivity: {
+        type: Object,
+        required: false,
       },
-      isEmpty: {
+      isTopic: {
         type: Boolean,
         default: false,
       },
-      fillWidth: {
+      includeText: {
         type: Boolean,
         default: false,
       },
-      small: {
+      chip: {
         type: Boolean,
         default: false,
       },
     },
     computed: {
-      fontColor() {
-        return this.showColor ? 'white' : 'grey darken-1';
-      },
       icon() {
-        return getContentKindIcon(this.kind, this.isEmpty);
+        if (this.isTopic) {
+          return 'topic'
+        } else {
+          return getContentKindIcon(this.text);
+        }
       },
       text() {
-        switch (this.kind) {
-          case 'topic':
-            return this.$tr('topic');
-          case 'video':
-            return this.$tr('video');
-          case 'audio':
-            return this.$tr('audio');
-          case 'slideshow':
-            return this.$tr('slideshow');
-          case 'exercise':
-            return this.$tr('exercise');
-          case 'document':
-            return this.$tr('document');
-          case 'html5':
-            return this.$tr('html5');
-          default:
-            return this.$tr('unsupported');
+        if (this.isTopic) {
+          return this.$tr('topic')
+        }
+        return this.learningActivityString(this.learningActivity)
+      }
+    },
+    methods: {
+      matchIdToString(ids) {
+        return ids.map(i => this.translateMetadataString(camelCase(i))).join(', ');
+      },
+      learningActivityString(options) {
+        const ids = Object.keys(options);
+        const matches = Object.keys(LearningActivities).filter(k =>
+          ids.includes(LearningActivities[k])
+        );
+        if (matches && matches.length === 1) {
+          return this.matchIdToString(matches);
+        } else if (matches && matches.length > 1) {
+          return this.$tr('multipleLearningActivities')
+        } else {
+          return '';
         }
       },
     },
     $trs: {
-      topic: 'Folder',
-      video: 'Video',
-      audio: 'Audio',
-      exercise: 'Exercise',
-      document: 'Document',
-      slideshow: 'Slideshow',
-      html5: 'HTML5 App',
-      unsupported: 'Unsupported',
+     multipleLearningActivities: 'Multiple learning activities',
+     topic: 'Folder',
     },
   };
 
@@ -107,11 +94,13 @@
 
 <style lang="less" scoped>
 
-  .iconOnly {
-    /deep/ .v-chip__content {
-      height: 22px;
-      padding: 0 5px;
-    }
+  .chip {
+      background-color: #dedede;
+      display: inline-block;
+        padding: 10px;
+        font-weight: bold;
+        border-radius: 4px;
+        width: unset !important;
   }
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/vuetify/icons.js b/contentcuration/contentcuration/frontend/shared/vuetify/icons.js
index b069c4a8ef..45f2e27e9f 100644
--- a/contentcuration/contentcuration/frontend/shared/vuetify/icons.js
+++ b/contentcuration/contentcuration/frontend/shared/vuetify/icons.js
@@ -6,6 +6,8 @@ import LightBulbIcon from '../views/icons/LightBulbIcon';
 import ViewOnlyIcon from '../views/icons/ViewOnlyIcon';
 import Icon from 'shared/views/Icon';
 import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
+import { camelCase } from 'lodash';
+
 
 Vue.component(Icon.name, Icon);
 
@@ -21,10 +23,16 @@ export const CONTENT_KIND_ICONS = {
   [ContentKindsNames.HTML5]: 'widgets',
 };
 
-export function getContentKindIcon(kind, isEmpty = false) {
-  const icon = (isEmpty ? [kind + EMPTY] : []).concat([kind]).find(k => k in CONTENT_KIND_ICONS);
-  return icon ? CONTENT_KIND_ICONS[icon] : 'error_outline';
-}
+export function getContentKindIcon(activity) {
+
+    if (activity  == 'Explore') {
+      return 'interactShaded';
+    } else if (activity == 'Multiple learning activities') {
+      return 'allActivities';
+    } else {
+      return `${camelCase(activity) + 'Solid'}`;
+  }
+};
 
 // Can use $vuetify.icons.iconName in <Icon> tags
 const customIcons = {

From 4f314edcf208054af227f5e919a36665512c39e0 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Thu, 23 Jun 2022 12:19:52 -0400
Subject: [PATCH 05/20] Finalize updates to Resource Panel for metadata display

---
 .../channelEdit/components/ResourcePanel.vue  | 194 ++++++++++--------
 1 file changed, 104 insertions(+), 90 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
index 515e1e51b0..c29ad9bce6 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
@@ -7,12 +7,23 @@
           <!-- Slot for elements like "Back" link -->
           <slot name="navigation"></slot>
           <ContentNodeIcon v-if="isTopic" :isTopic="true" includeText chip />
-          <ContentNodeIcon v-else-if="node.learning_activities" :learningActivity="node.learning_activities" includeText
-            chip />
+          <ContentNodeIcon
+            v-else-if="hasLearningActivities"
+            :learningActivity="node.learning_activities"
+            includeText
+            chip
+          />
         </div>
 
         <VSpacer />
-        <VBtn icon flat small color="grey" class="ma-0" @click="$emit('close')">
+        <VBtn
+          icon
+          flat
+          small
+          color="grey"
+          class="ma-0"
+          @click="$emit('close')"
+        >
           <Icon>clear</Icon>
         </VBtn>
       </VLayout>
@@ -48,9 +59,18 @@
       </Tabs>
       <VTabsItems :value="tab" @change="tab = $event">
         <VTabItem value="questions">
-          <Banner :value="!assessmentItems.length" class="my-2" error :text="$tr('noQuestionsError')" />
-          <Banner :value="Boolean(invalidQuestionCount)" class="my-2" error
-            :text="$tr('incompleteQuestionError', { count: invalidQuestionCount })" />
+          <Banner
+            :value="!assessmentItems.length"
+            class="my-2"
+            error
+            :text="$tr('noQuestionsError')"
+          />
+          <Banner
+            :value="Boolean(invalidQuestionCount)"
+            class="my-2"
+            error
+            :text="$tr('incompleteQuestionError', { count: invalidQuestionCount })"
+          />
           <VLayout v-if="assessmentItems.length" justify-space-between align-center class="my-3">
             <VFlex>
               <Checkbox v-model="showAnswers" :label="$tr('showAnswers')" class="ma-0" />
@@ -77,8 +97,11 @@
         </VTabItem>
         <VTabItem value="details">
           <!-- File preview -->
-          <FilePreview v-if="isResource && !isExercise && primaryFiles[0]" :nodeId="nodeId"
-            :fileId="primaryFiles[0].id" />
+          <FilePreview
+            v-if="isResource && !isExercise && primaryFiles[0]"
+            :nodeId="nodeId"
+            :fileId="primaryFiles[0].id"
+          />
           <VCard v-else-if="isResource && !isExercise" class="preview-error" flat>
             <VLayout align-center justify-center fill-height>
               <VTooltip bottom>
@@ -103,13 +126,15 @@
             </span>
           </DetailsRow>
           <DetailsRow :label="$tr('description')" :text="getText('description')" />
-          <DetailsRow v-if="!isTopic" :label="translateMetadataString('level')" :text="level(node.grade_levels)"
-            notranslate />
+          <DetailsRow
+            v-if="!isTopic"
+            :label="translateMetadataString('level')"
+            :text="level(node.grade_levels)"
+            notranslate
+          />
           <DetailsRow v-if="!isTopic" :label="translateMetadataString('learningActivity')">
             <ContentNodeIcon :learningActivity="node.learning_activities" includeText />
           </DetailsRow>
-          <DetailsRow v-if="!isExercise && !isTopic" :label="translateMetadataString('completion')"
-            :text="completion(node.extra_fields)" notranslate />
           <DetailsRow v-if="isExercise" :label="$tr('completion')">
             <span v-if="noMasteryModel" class="red--text">
               <Icon color="red" small>error</Icon>
@@ -119,17 +144,23 @@
               {{ masteryCriteria }}
             </span>
           </DetailsRow>
-          <DetailsRow v-if="!isTopic" :label="translateMetadataString('duration')" :text="duration(node.extra_fields)"
-            notranslate />
-          <div>
-          </div>
-          <DetailsRow v-if="!isTopic" :label="translateMetadataString('category')" :text="category(node.categories)"
-            notranslate />
+          <DetailsRow
+            v-if="!isTopic"
+            :label="translateMetadataString('category')"
+            :text="category(node.categories)"
+            notranslate
+          />
           <DetailsRow :label="$tr('tags')">
             <div v-if="!sortedTags.length">
               {{ defaultText }}
             </div>
-            <VChip v-for="tag in sortedTags" v-else :key="tag" class="notranslate" color="grey lighten-4">
+            <VChip
+              v-for="tag in sortedTags"
+              v-else
+              :key="tag"
+              class="notranslate"
+              color="grey lighten-4"
+            >
               {{ tag }}
             </VChip>
           </DetailsRow>
@@ -141,8 +172,12 @@
           </div>
           <DetailsRow :label="$tr('language')" :text="languageName" />
           <DetailsRow v-if="!isTopic" :label="$tr('visibleTo')" :text="roleName" />
-          <DetailsRow v-if="!isTopic" :label="translateMetadataString('accessibility')"
-            :text="accessibilityOptions(node.accessibility_labels)" notranslate />
+          <DetailsRow
+            v-if="!isTopic"
+            :label="translateMetadataString('accessibility')"
+            :text="accessibilityOptions(node.accessibility_labels)"
+            notranslate
+          />
           <!-- Related resources section -->
           <template v-if="!isTopic">
             <div class="section-header">
@@ -154,8 +189,11 @@
               </div>
               <div v-else dense class="mb-2 pa-1">
                 <div v-for="prerequisite in previousSteps" :key="prerequisite.id">
-                  <ContentNodeIcon v-if="prerequisite.learning_activities"
-                    :learningActivity="prerequisite.learning_activities" class="mr-2" />
+                  <ContentNodeIcon
+                    v-if="prerequisite.learning_activities"
+                    :learningActivity="prerequisite.learning_activities"
+                    class="mr-2"
+                  />
                   {{ getTitle(prerequisite) }}
                 </div>
               </div>
@@ -166,8 +204,11 @@
               </div>
               <div v-else dense class="mb-2 pa-1">
                 <div v-for="postrequisite in nextSteps" :key="postrequisite.id">
-                  <ContentNodeIcon v-if="postrequisite.learning_activities"
-                    :learningActivity="postrequisite.learning_activities" class="mr-2" />
+                  <ContentNodeIcon
+                    v-if="postrequisite.learning_activities"
+                    :learningActivity="postrequisite.learning_activities"
+                    class="mr-2"
+                  />
                   {{ getTitle(postrequisite) }}
                 </div>
               </div>
@@ -179,9 +220,17 @@
             <div class="section-header">
               {{ $tr('resources') }}
             </div>
-            <DetailsRow v-if="isImported && importedChannelLink" :label="$tr('originalChannel')">
-              <ActionLink :text="importedChannelName" :href="importedChannelLink" truncate notranslate
-                target="_blank" />
+            <DetailsRow
+              v-if="isImported && importedChannelLink"
+              :label="$tr('originalChannel')"
+            >
+              <ActionLink
+                :text="importedChannelName"
+                :href="importedChannelLink"
+                truncate
+                notranslate
+                target="_blank"
+              />
             </DetailsRow>
             <DetailsRow :label="$tr('totalResources')">
               <p>
@@ -190,9 +239,7 @@
               <VList v-if="node.resource_count" dense class="mb-2 pa-0">
                 <VListTile v-for="kind in kindCount" :key="kind.kind">
                   <VListTileContent>
-                    <VListTileTitle>
-                      <!-- <ContentNodeIcon :learningActivity="kind.learning_activities" class="mr-2" /> -->
-                    </VListTileTitle>
+                    <VListTileTitle />
                   </VListTileContent>
                 </VListTile>
               </VList>
@@ -205,8 +252,13 @@
               {{ $tr('source') }}
             </div>
             <DetailsRow v-if="isImported && importedChannelLink" :label="$tr('originalChannel')">
-              <ActionLink :text="importedChannelName" :href="importedChannelLink" truncate notranslate
-                target="_blank" />
+              <ActionLink
+                :text="importedChannelName"
+                :href="importedChannelLink"
+                truncate
+                notranslate
+                target="_blank"
+              />
             </DetailsRow>
             <DetailsRow :label="$tr('author')" :text="getText('author')" notranslate />
             <DetailsRow :label="$tr('provider')" :text="getText('provider')" notranslate />
@@ -249,7 +301,12 @@
                   <Icon color="red" small>error</Icon>
                   <span class="mx-1">{{ $tr('noFilesError') }}</span>
                 </span>
-                <ExpandableList v-else :noItemsText="defaultText" :items="availableFormats" inline />
+                <ExpandableList
+                  v-else
+                  :noItemsText="defaultText"
+                  :items="availableFormats"
+                  inline
+                />
               </DetailsRow>
               <DetailsRow v-if="node.kind === 'video'" :label="$tr('subtitles')">
                 <ExpandableList :noItemsText="defaultText" :items="subtitleFileLanguages" inline />
@@ -270,12 +327,7 @@
   import { camelCase } from 'lodash';
   import { isImportedContent, importedChannelLink } from '../utils';
   import FilePreview from '../views/files/FilePreview';
-  import {
-    ContentLevel,
-    Categories,
-    AccessibilityCategories,
-    CompletionCriteriaModels,
-  } from '../../shared/constants';
+  import { ContentLevel, Categories, AccessibilityCategories } from '../../shared/constants';
   import AssessmentItemPreview from './AssessmentItemPreview/AssessmentItemPreview';
   import ContentNodeValidator from './ContentNodeValidator';
   import {
@@ -373,6 +425,9 @@
       defaultText() {
         return '-';
       },
+      hasLearningActivities() {
+        return Object.keys(this.node.learning_activities).length > 0;
+      },
       assessmentItems() {
         return this.getAssessmentItems(this.nodeId);
       },
@@ -525,59 +580,22 @@
       matchIdToString(ids) {
         return ids.map(i => this.translateMetadataString(camelCase(i))).join(', ');
       },
-      toMinutes(duration) {
-        const minutes = Math.round(duration / 60)
-        return this.$tr('duration', { value: minutes})
-      },
-      toExactTimeToComplete(duration) {
-        const minutes = Math.floor(duration / 60)
-        const seconds = duration % minutes
-        return `${minutes}:${seconds}`
-      },
-      toSuggestedDuration(duration) {
-        if (duration < 1860) {
-          return this.$tr('shortActivity')
-        } else {
-          return this.$tr('longActivity')
-        }
-      },
       level(levels) {
         const ids = Object.keys(levels);
-        const matches = Object.keys(ContentLevel).filter(k =>
-          ids.includes(ContentLevel[k])
-        );
+        const matches = Object.keys(ContentLevel)
+          .sort()
+          .filter(k => ids.includes(ContentLevel[k]));
         if (matches && matches.length > 0) {
           return this.matchIdToString(matches);
         } else {
           return '-';
         }
       },
-      completion(value) {
-        if (value && value.completion_criteria) {
-          if (value.completion_criteria.model === CompletionCriteriaModels.APPROX_TIME) {
-            return this.toSuggestedDuration(value.suggested_duration)
-          } else if (value.completion_criteria.model === CompletionCriteriaModels.REFERNCE) {
-            return this.$tr('reference')
-          }
-          return this.$tr(camelCase(value.completion_criteria.model))
-        }
-        return '-';
-      },
-      duration(value) {
-        if (value && value.completion_criteria) {
-          if (value.completion_criteria.model === CompletionCriteriaModels.TIME) {
-            return this.toExactTimeToComplete(value.completion_criteria.threshold)
-          } else if (value.completion_criteria.model === CompletionCriteriaModels.APPROX_TIME) {
-            return this.toMinutes(value.suggested_duration)
-          }
-        }
-        return '-';
-      },
       accessibilityOptions(options) {
         const ids = Object.keys(options);
-        const matches = Object.keys(AccessibilityCategories).filter(k =>
-          ids.includes(AccessibilityCategories[k])
-        );
+        const matches = Object.keys(AccessibilityCategories)
+          .sort()
+          .filter(k => ids.includes(AccessibilityCategories[k]));
         if (matches && matches.length > 0) {
           return this.matchIdToString(matches);
         } else {
@@ -586,7 +604,9 @@
       },
       category(options) {
         const ids = Object.keys(options);
-        const matches = Object.keys(Categories).filter(k => ids.includes(Categories[k]));
+        const matches = Object.keys(Categories)
+          .sort()
+          .filter(k => ids.includes(Categories[k]));
         if (matches && matches.length > 0) {
           return this.matchIdToString(matches);
         } else {
@@ -618,18 +638,13 @@
     },
     $trs: {
       questions: 'Questions',
-      masteryCriteria: 'Mastery criteria',
       masteryMofN: 'Goal: {m} out of {n}',
       details: 'Details',
       completion: 'Completion',
       showAnswers: 'Show answers',
       questionCount: '{value, number, integer} {value, plural, one {question} other {questions}}',
       description: 'Description',
-      duration: '{value, number, integer} minutes',
-      shortActivity: 'Short activity',
-      longActivity: 'Long activity',
       tags: 'Tags',
-      time: 'Exact time to complete',
       audience: 'Audience',
       language: 'Language',
       visibleTo: 'Visible to',
@@ -650,7 +665,6 @@
       availableFormats: 'Available formats',
       subtitles: 'Captions and subtitles',
       fileSize: 'Size',
-      reference: 'Reference',
 
       // Validation strings
       noLicenseError: 'Missing license',

From 7af658687ddbff57a88264f6815eb6afb6773944 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Mon, 27 Jun 2022 10:36:39 -0400
Subject: [PATCH 06/20] Add new metadata to tree view; update conditions for
 icon display

---
 .../components/ContentNodeListItem/index.vue  | 177 ++++++++++--------
 .../channelEdit/components/ResourcePanel.vue  |   6 +-
 .../frontend/shared/views/ContentNodeIcon.vue | 105 ++++++-----
 .../frontend/shared/views/ToggleText.vue      |   3 +-
 .../frontend/shared/views/files/Thumbnail.vue | 101 +++-------
 5 files changed, 192 insertions(+), 200 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
index 357af90a18..17d3b13577 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
@@ -6,80 +6,59 @@
         <template #default="contextMenuProps">
           <DraggableHandle v-bind="draggableHandle">
             <template #default>
-              <VListTile
-                v-if="node"
-                class="content-list-item pa-0"
-                :class="{
-                  'compact': isCompact,
-                  hover: hover && !copying,
-                  active: (active || hover) && !copying,
-                  disabled: copying,
-                  highlight,
-                }"
-                data-test="content-item"
-                @click="handleTileClick"
-              >
+              <VListTile v-if="node" class="content-list-item pa-0" :class="{
+                'compact': isCompact,
+                hover: hover && !copying,
+                active: (active || hover) && !copying,
+                disabled: copying,
+                highlight,
+              }" data-test="content-item" @click="handleTileClick">
                 <slot name="actions-start" :hover="hover" class="actions-start-col"></slot>
-                <div
-                  class="mx-2 thumbnail-col"
-                  :class="{
-                    'px-2': !isCompact,
-                    'py-4': !isCompact,
-                    'py-3': isCompact,
-                  }"
-                >
-                  <Thumbnail
-                    v-bind="thumbnailAttrs"
-                    :compact="isCompact"
-                    :isEmpty="node.total_count === 0"
-                  />
+                <div class="mx-2 thumbnail-col" :class="{
+                  'px-2': !isCompact,
+                  'py-4': !isCompact,
+                  'py-3': isCompact,
+                }">
+                  <Thumbnail v-bind="thumbnailAttrs" :isTopic="isTopic" :learningActivity="node.learning_activities"
+                    :compact="isCompact" :isEmpty="node.total_count === 0" />
                 </div>
-                <VListTileContent
-                  class="description-col grow px-2"
-                  :class="{
-                    'my-4': !isCompact,
-                    'my-3': isCompact,
-                  }"
-                >
+                <VListTileContent class="description-col grow px-2" :class="{
+                  'my-4': !isCompact,
+                  'my-3': isCompact,
+                }">
                   <VListTileTitle data-test="title">
                     <VLayout row>
                       <VFlex shrink class="text-truncate">
-                        <h3
-                          v-if="hasTitle(node) || !canEdit || copying || node.isNew"
-                          class="notranslate text-truncate"
+                        <h3 v-if="hasTitle(node) || !canEdit || copying || node.isNew" class="notranslate text-truncate"
                           :class="[
                             isCompact ? 'font-weight-regular' : '',
                             getTitleClass(node),
-                          ]"
-                          dir="auto"
-                        >
+                          ]" dir="auto">
                           {{ getTitle(node) }}
                         </h3>
                       </VFlex>
                       <VFlex>
-                        <ContentNodeValidator
-                          v-if="canEdit && !copying && !node.isNew"
-                          :node="node"
-                        />
+                        <ContentNodeValidator v-if="canEdit && !copying && !node.isNew" :node="node" />
                       </VFlex>
                     </VLayout>
                   </VListTileTitle>
-                  <VListTileSubTitle
-                    v-if="(subtitle || node.coach_content) && !isCompact"
-                    data-test="subtitle"
-                    class="metadata"
-                  >
-                    <span>{{ subtitle }}</span>
+
+                  <ToggleText v-show="!isCompact && !comfortable" :text="node.description" data-test="description"
+                    notranslate dir="auto" :splitAt="280" />
+
+                  <VListTileSubTitle v-if="hasMetadataToDisplay && !isCompact" data-test="subtitle" class="metadata">
+                    <span v-if="subtitle" class="text">{{ subtitle }}</span>
+                    <span v-if="Object.keys(node.categories).length > 0" class=" text">{{ category(node.categories)
+                      }}</span>
                     <span v-if="(isTopic && node.coach_count) || isCoach">
+                      <!-- for each learning activity -->
+
+
                       <VTooltip bottom>
                         <template #activator="{ on }">
                           <div style="display: inline-block;" v-on="on">
-                            <Icon
-                              color="primary"
-                              small
-                              class="mx-1"
-                              style="vertical-align: text-top;"
-                            >local_library</Icon>
+                            <Icon color="primary" small class="mx-1" style="vertical-align: text-top;">local_library
+                            </Icon>
                             <span v-if="isTopic">
                               {{ $formatNumber(node.coach_count) }}
                             </span>
@@ -87,20 +66,21 @@
                         </template>
                         <span>
                           {{ isTopic ?
-                            $tr('hasCoachTooltip', { value: node.coach_count })
-                            : $tr('coachTooltip')
+                          $tr('hasCoachTooltip', { value: node.coach_count })
+                          : $tr('coachTooltip')
                           }}
                         </span>
                       </VTooltip>
                     </span>
                   </VListTileSubTitle>
-                  <ToggleText
-                    v-show="!isCompact && !comfortable"
-                    :text="node.description"
-                    data-test="description"
-                    notranslate
-                    dir="auto"
-                  />
+                  <span v-if="!isCompact">
+                    <ContentNodeIcon :isTopic="isTopic" :learningActivity="node.learning_activities" showEachActivityChip
+                    includeText small chip class="inline" />
+                    <span v-if="node.grade_levels">
+                      <span v-for="(key, index) in Object.keys(node.grade_levels)" :key="index" class="small-chip">{{
+                        levels(key) }}</span>
+                    </span>
+                  </span>
                 </VListTileContent>
 
                 <VListTileContent class="actions-end-col updated">
@@ -108,15 +88,8 @@
                 </VListTileContent>
                 <template v-if="!copying">
                   <VListTileAction class="actions-end-col">
-                    <IconButton
-                      v-if="isTopic"
-                      :aria-hidden="hover"
-                      data-test="btn-chevron"
-                      icon="chevronRight"
-                      :text="$tr('openTopic')"
-                      size="small"
-                      @click="$emit('topicChevronClick')"
-                    />
+                    <IconButton v-if="isTopic" :aria-hidden="hover" data-test="btn-chevron" icon="chevronRight"
+                      :text="$tr('openTopic')" size="small" @click="$emit('topicChevronClick')" />
                   </VListTileAction>
                   <slot name="actions-end" :hover="hover"></slot>
                 </template>
@@ -129,10 +102,7 @@
                   </div>
                   <div class="disabled-overlay"></div>
                 </template>
-                <slot
-                  name="context-menu"
-                  v-bind="contextMenuProps"
-                ></slot>
+                <slot name="context-menu" v-bind="contextMenuProps"></slot>
               </VListTile>
 
             </template>
@@ -159,9 +129,17 @@
   import ToggleText from 'shared/views/ToggleText';
   import ContextMenuCloak from 'shared/views/ContextMenuCloak';
   import DraggableHandle from 'shared/views/draggable/DraggableHandle';
-  import { titleMixin } from 'shared/mixins';
+import { titleMixin, metadataTranslationMixin, } from 'shared/mixins';
   import { COPYING_FLAG, TASK_ID } from 'shared/data/constants';
   import { EffectAllowed } from 'shared/mixins/draggable/constants';
+  import ContentNodeIcon from 'shared/views/ContentNodeIcon';
+import { camelCase, matchesProperty } from 'lodash';
+  import {
+    ContentLevel,
+    Categories,
+  } from '../../../shared/constants';
+import LevelsOptionsVue from '../edit/LevelsOptions.vue';
+
 
   export default {
     name: 'ContentNodeListItem',
@@ -174,8 +152,9 @@
       ContentNodeChangedIcon,
       ToggleText,
       TaskProgress,
+      ContentNodeIcon
     },
-    mixins: [titleMixin],
+  mixins: [titleMixin, metadataTranslationMixin],
     props: {
       node: {
         type: Object,
@@ -238,6 +217,9 @@
       isCoach() {
         return this.node.role_visibility === RolesNames.COACH;
       },
+      hasMetadataToDisplay() {
+        return this.subtitle || this.node.coach_content || Object.keys(this.node.categories).length > 0
+      },
       contextMenuDisabled() {
         return !this.$scopedSlots['context-menu'] || this.copying;
       },
@@ -267,6 +249,24 @@
           this.isTopic ? this.$emit('topicChevronClick') : this.$emit('infoClick');
         }
       },
+      matchIdToString(ids) {
+        return ids.map(i => this.translateMetadataString(camelCase(i))).join(', ');
+      },
+      category(options) {
+        const ids = Object.keys(options);
+        const matches = Object.keys(Categories).sort().filter(k => ids.includes(Categories[k]));
+        if (matches && matches.length > 0) {
+          return this.matchIdToString(matches);
+        }
+        return null;
+      },
+      levels(level) {
+        const match = Object.keys(ContentLevel).find(key => ContentLevel[key] === level);
+        if (match) {
+          return this.translateMetadataString(camelCase(match));
+        }
+        return null;
+      },
     },
     $trs: {
       resources: '{value, number, integer} {value, plural, one {resource} other {resources}}',
@@ -299,6 +299,16 @@
     }
   }
 
+  .inline {
+    display: inline-block;
+  }
+
+  .text {
+    font-size: 12px;
+    margin: 0;
+    display: inline-block;
+  }
+
   .disabled-overlay {
     position: absolute;
     z-index: 1;
@@ -386,4 +396,13 @@
     content: ' • ';
   }
 
+    .small-chip {
+      background-color: #dedede;
+      display: inline-block;
+      padding: 2px 4px;
+      font-size: 10px;
+      border-radius: 4px;
+      margin: 2px;
+    }
+
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
index c29ad9bce6..9c3425fa8f 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
@@ -133,7 +133,7 @@
             notranslate
           />
           <DetailsRow v-if="!isTopic" :label="translateMetadataString('learningActivity')">
-            <ContentNodeIcon :learningActivity="node.learning_activities" includeText />
+            <ContentNodeIcon :learningActivity="node.learning_activities" includeText showEachActivityChip/>
           </DetailsRow>
           <DetailsRow v-if="isExercise" :label="$tr('completion')">
             <span v-if="noMasteryModel" class="red--text">
@@ -192,7 +192,7 @@
                   <ContentNodeIcon
                     v-if="prerequisite.learning_activities"
                     :learningActivity="prerequisite.learning_activities"
-                    class="mr-2"
+                    showEachActivityChip
                   />
                   {{ getTitle(prerequisite) }}
                 </div>
@@ -207,7 +207,7 @@
                   <ContentNodeIcon
                     v-if="postrequisite.learning_activities"
                     :learningActivity="postrequisite.learning_activities"
-                    class="mr-2"
+                    showEachActivityChip
                   />
                   {{ getTitle(postrequisite) }}
                 </div>
diff --git a/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue b/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue
index 32e281968c..c9bec8ae6a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue
@@ -1,23 +1,27 @@
 <template>
 
-  <!-- <span v-if="icon">
-    <VChip v-if="showColor" label color="#efefef" :small="small" :textColor="fontColor" class="ma-0 pa-0"
-      :class="{ iconOnly: !includeText, fillWidth }" :style="{ width: fillWidth ? '100%' : 'unset' }" capture-as-image>
-      <KIcon small color="white" :icon="icon" />
-      <span v-if="includeText" class="ml-2">"hello world"</span>
-    </VChip>
-    <span v-else capture-as-image>
-      <KIcon small color="white" :icon="icon" />
-      <span v-if="includeText">"hello world"</span>
+  <span v-if="includeText">
+    <span v-for="activity in activities" :key="activity">
+        <div v-if="chip" :class="small ? 'small-chip' : 'chip'">
+            <KLabeledIcon :icon="icon(activity)" :label="text(activity)" />
+        </div>
+        <div v-else>
+          <KLabeledIcon :icon="icon(activity)" :label="text(activity)" />
+        </div>
+      </span>
+  </span>
+  <span v-else>
+    <span v-if="showEachActivityChip">
+      <KIcon v-for="activity in activities" :key="activity" :icon="icon(activity)" :aria-label="text(activity)" />
     </span>
-  </span> -->
-  <div v-if="includeText && chip" class="chip">
-    <KLabeledIcon :icon="icon" :label="text" />
-  </div>
-  <div v-else-if="includeText && !chip">
-    <KLabeledIcon :icon="icon" :label="text" />
-  </div>
-  <KIcon v-else :icon="icon" :aria-label="text" />
+    <span v-else-if="activities.length > 1 && !showEachActivityChip">
+      <KIcon :icon="icon('multiple')" :aria-label="text('multiple')" />
+    </span>
+    <span v-else>
+      <KIcon :icon="icon(activities[0])" :aria-label="text(activities[0])" />
+    </span>
+  </span>
+
 
 
 </template>
@@ -38,6 +42,10 @@ import {  metadataTranslationMixin } from 'shared/mixins';
         type: Object,
         required: false,
       },
+      showEachActivityChip: {
+        type: Boolean,
+        default: false,
+      },
       isTopic: {
         type: Boolean,
         default: false,
@@ -50,39 +58,36 @@ import {  metadataTranslationMixin } from 'shared/mixins';
         type: Boolean,
         default: false,
       },
+      small: {
+        type: Boolean,
+        default: false,
+      },
     },
     computed: {
-      icon() {
+      activities() {
+        const ids = Object.keys(this.learningActivity);
+        return Object.keys(LearningActivities).filter(k =>
+          ids.includes(LearningActivities[k])
+        );
+      },
+    },
+    methods: {
+      icon(activity) {
         if (this.isTopic) {
           return 'topic'
         } else {
-          return getContentKindIcon(this.text);
+          console.log(activity)
+          return getContentKindIcon(this.text(activity));
         }
       },
-      text() {
+      text(activity) {
         if (this.isTopic) {
           return this.$tr('topic')
-        }
-        return this.learningActivityString(this.learningActivity)
-      }
-    },
-    methods: {
-      matchIdToString(ids) {
-        return ids.map(i => this.translateMetadataString(camelCase(i))).join(', ');
-      },
-      learningActivityString(options) {
-        const ids = Object.keys(options);
-        const matches = Object.keys(LearningActivities).filter(k =>
-          ids.includes(LearningActivities[k])
-        );
-        if (matches && matches.length === 1) {
-          return this.matchIdToString(matches);
-        } else if (matches && matches.length > 1) {
+        } else if (activity == 'multiple') {
           return this.$tr('multipleLearningActivities')
-        } else {
-          return '';
         }
-      },
+         return this.translateMetadataString(camelCase(activity))
+      }
     },
     $trs: {
      multipleLearningActivities: 'Multiple learning activities',
@@ -95,12 +100,22 @@ import {  metadataTranslationMixin } from 'shared/mixins';
 <style lang="less" scoped>
 
   .chip {
-      background-color: #dedede;
-      display: inline-block;
-        padding: 10px;
-        font-weight: bold;
-        border-radius: 4px;
-        width: unset !important;
+    background-color: #dedede;
+    display: inline-block;
+    padding: 10px;
+    margin: 4px;
+    font-weight: bold;
+    border-radius: 4px;
+    width: unset !important;
   }
 
+
+  .small-chip {
+    background-color: #dedede;
+    display: inline-block;
+    padding: 2px 4px;
+    font-size: 10px;
+    border-radius: 4px;
+    margin: 2px;
+  }
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/ToggleText.vue b/contentcuration/contentcuration/frontend/shared/views/ToggleText.vue
index 5828c28fc0..87c1d295c3 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ToggleText.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ToggleText.vue
@@ -8,8 +8,6 @@
           {{ overflowText }}
         </span>
       </VSlideYTransition>
-    </p>
-    <p class="mt-2">
       <a v-if="overflowText" class="caption toggler" @click.stop.prevent="toggle">
         <span>{{ togglerText }}</span>
         <Icon small>
@@ -101,6 +99,7 @@
     margin: 0;
     word-wrap: break-word;
     white-space: normal;
+    font-size: 12px;
   }
   .toggler {
     color: var(--v-grey-darken1);
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue b/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
index aa862f6340..ad4cee6e76 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
@@ -1,37 +1,15 @@
 <template>
 
   <figure
-    class="thumbnail"
     :class="{
-      [kind]: compact,
+      'thumbnail': !compact,
       'icon-only': compact,
       'nothumbnail': !showThumbnail && !compact,
     }"
     :style="{ 'max-width': maxWidth }"
   >
-    <VLayout
-      v-if="kind && !printing && showKind && !compact"
-      tag="figcaption"
-      row
-      align-center
-      class="caption"
-      :class="kind"
-    >
-      <VFlex shrink class="px-1">
-        <Icon
-          v-if="!compact"
-          dark
-          small
-          :aria-label="kindTitle"
-          v-text="icon"
-        />
-      </VFlex>
-      <VFlex shrink>
-        <span class="caption white--text">{{ kindTitle }}</span>
-      </VFlex>
-    </VLayout>
     <img
-      v-if="showThumbnail"
+      v-if="showThumbnail && !compact"
       :src="thumbnailSrc"
       :alt="$tr('thumbnail', { title: title })"
       :style="{ objectFit }"
@@ -39,30 +17,17 @@
     >
 
     <!-- If printing the default icon, need to set as printable icon -->
-    <div v-else-if="printing" class="printable-icon">
-      <Icon :color="$vuetify.theme[kind]" capture-as-image>
-        {{ icon }}
-      </Icon>
+    <div v-else-if="compact || printing">
+      <ContentNodeIcon
+        v-if="learningActivity"
+        :learningActivity="learningActivity"
+        :isTopic="isTopic"
+      />
     </div>
-
-    <!-- Bury icon within SVG so it's more responsive, since font-size scaling is more difficult -->
-    <svg
-      v-else-if="compact"
-      viewBox="0 0 24 24"
-      :aria-label="kindTitle"
-      class="thumbnail-image"
-    >
-      <text
-        :x="-1"
-        :y="y"
-        fill="#ffffff"
-        class="material-icons notranslate v-icon"
-      >{{ icon }}</text>
-    </svg>
     <svg
       v-else
       viewBox="0 0 24 24"
-      :aria-label="kindTitle"
+      :aria-label="title"
       class="nothumbnail-image"
       :class="$isRTL ? 'rtl-image' : 'ltr-image'"
     >
@@ -71,7 +36,9 @@
         :y="y - 3"
         :fill="$vuetify.theme.greyBorder"
         class="material-icons notranslate v-icon"
-      >image</text>
+      >
+        image
+      </text>
     </svg>
 
   </figure>
@@ -81,10 +48,13 @@
 <script>
 
   import { constantsTranslationMixin, printingMixin } from 'shared/mixins';
-  import { getContentKindIcon } from 'shared/vuetify/icons';
+  import ContentNodeIcon from 'shared/views/ContentNodeIcon';
 
   export default {
     name: 'Thumbnail',
+    components: {
+      ContentNodeIcon,
+    },
     mixins: [constantsTranslationMixin, printingMixin],
     props: {
       src: {
@@ -97,13 +67,17 @@
           return {};
         },
       },
+      learningActivity: {
+        type: Object,
+        required: false,
+      },
       kind: {
         type: String,
         required: false,
       },
-      showKind: {
+      isTopic: {
         type: Boolean,
-        default: true,
+        default: false,
       },
       title: {
         type: String,
@@ -115,10 +89,6 @@
         required: false,
         default: false,
       },
-      isEmpty: {
-        type: Boolean,
-        default: false,
-      },
       maxWidth: {
         type: [Number, String],
         default: 'none',
@@ -138,21 +108,12 @@
       objectFit() {
         return this.kind ? 'cover' : 'contain';
       },
-      icon() {
-        return getContentKindIcon(this.kind, this.isEmpty);
-      },
       thumbnailSrc() {
         return this.encoding && this.encoding.base64 ? this.encoding.base64 : this.src;
       },
       showThumbnail() {
         return this.thumbnailSrc && !this.compact;
       },
-      kindTitle() {
-        if (this.kind) {
-          return this.translateConstant(this.kind);
-        }
-        return '';
-      },
     },
     $trs: {
       thumbnail: '{title} thumbnail',
@@ -169,22 +130,20 @@
     position: relative;
     /* stylelint-disable-next-line  */
     padding-bottom: 100% * 9 / 16;
+    border-radius: 3px;
 
-    &.icon-only {
-      padding-top: 0;
-      padding-bottom: 92%;
-      margin: 0 auto;
-      border-radius: 3px;
-    }
-    &:not(.icon-only) {
-      background-color: white;
-      border: 1px solid var(--v-greyBorder-lighten1);
-    }
     &.nothumbnail {
       background-color: var(--v-greyBackground-base);
     }
   }
 
+  .icon-only {
+    position: relative;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin: 0 auto;
+  }
+
   .caption {
     width: 100%;
     height: @caption-height;

From dacdfc29a2e751d8db0374dda26950b95677b8af Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Wed, 6 Jul 2022 10:10:36 -0400
Subject: [PATCH 07/20] Fix linting errors

---
 .../components/ContentNodeListItem/index.vue  | 178 ++++++++++++------
 .../channelEdit/components/ResourcePanel.vue  |   6 +-
 .../channelEdit/vuex/contentNode/getters.js   |   3 +-
 .../frontend/shared/views/ContentNodeIcon.vue |  61 +++---
 .../frontend/shared/views/ToggleText.vue      |   2 +-
 .../frontend/shared/vuetify/icons.js          |  18 +-
 6 files changed, 166 insertions(+), 102 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
index 17d3b13577..99f7afa8a3 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
@@ -6,50 +6,88 @@
         <template #default="contextMenuProps">
           <DraggableHandle v-bind="draggableHandle">
             <template #default>
-              <VListTile v-if="node" class="content-list-item pa-0" :class="{
-                'compact': isCompact,
-                hover: hover && !copying,
-                active: (active || hover) && !copying,
-                disabled: copying,
-                highlight,
-              }" data-test="content-item" @click="handleTileClick">
+              <VListTile
+                v-if="node"
+                class="content-list-item pa-0"
+                :class="{
+                  'compact': isCompact,
+                  hover: hover && !copying,
+                  active: (active || hover) && !copying,
+                  disabled: copying,
+                  highlight,
+                }"
+                data-test="content-item"
+                @click="handleTileClick"
+              >
                 <slot name="actions-start" :hover="hover" class="actions-start-col"></slot>
-                <div class="mx-2 thumbnail-col" :class="{
-                  'px-2': !isCompact,
-                  'py-4': !isCompact,
-                  'py-3': isCompact,
-                }">
-                  <Thumbnail v-bind="thumbnailAttrs" :isTopic="isTopic" :learningActivity="node.learning_activities"
-                    :compact="isCompact" :isEmpty="node.total_count === 0" />
+                <div
+                  class="mx-2 thumbnail-col"
+                  :class="{
+                    'px-2': !isCompact,
+                    'py-4': !isCompact,
+                    'py-3': isCompact,
+                  }"
+                >
+                  <Thumbnail
+                    v-bind="thumbnailAttrs"
+                    :isTopic="isTopic"
+                    :learningActivity="node.learning_activities"
+                    :compact="isCompact"
+                    :isEmpty="node.total_count === 0"
+                  />
                 </div>
-                <VListTileContent class="description-col grow px-2" :class="{
-                  'my-4': !isCompact,
-                  'my-3': isCompact,
-                }">
+                <VListTileContent
+                  class="description-col grow px-2"
+                  :class="{
+                    'my-4': !isCompact,
+                    'my-3': isCompact,
+                  }"
+                >
                   <VListTileTitle data-test="title">
                     <VLayout row>
                       <VFlex shrink class="text-truncate">
-                        <h3 v-if="hasTitle(node) || !canEdit || copying || node.isNew" class="notranslate text-truncate"
+                        <h3
+                          v-if="hasTitle(node) || !canEdit || copying || node.isNew"
+                          class="notranslate text-truncate"
                           :class="[
                             isCompact ? 'font-weight-regular' : '',
                             getTitleClass(node),
-                          ]" dir="auto">
+                          ]"
+                          dir="auto"
+                        >
                           {{ getTitle(node) }}
                         </h3>
                       </VFlex>
                       <VFlex>
-                        <ContentNodeValidator v-if="canEdit && !copying && !node.isNew" :node="node" />
+                        <ContentNodeValidator
+                          v-if="canEdit && !copying && !node.isNew"
+                          :node="node"
+                        />
                       </VFlex>
                     </VLayout>
                   </VListTileTitle>
 
-                  <ToggleText v-show="!isCompact && !comfortable" :text="node.description" data-test="description"
-                    notranslate dir="auto" :splitAt="280" />
-
-                  <VListTileSubTitle v-if="hasMetadataToDisplay && !isCompact" data-test="subtitle" class="metadata">
+                  <ToggleText
+                    v-show="!isCompact && !comfortable"
+                    :text="node.description"
+                    data-test="description"
+                    notranslate
+                    dir="auto"
+                    :splitAt="280"
+                  />
+
+                  <VListTileSubTitle
+                    v-if="hasMetadataToDisplay && !isCompact"
+                    data-test="subtitle"
+                    class="metadata"
+                  >
                     <span v-if="subtitle" class="text">{{ subtitle }}</span>
-                    <span v-if="Object.keys(node.categories).length > 0" class=" text">{{ category(node.categories)
-                      }}</span>
+                    <span
+                      v-if="Object.keys(node.categories).length > 0"
+                      class="text"
+                    >
+                      {{ category(node.categories) }}
+                    </span>
                     <span v-if="(isTopic && node.coach_count) || isCoach">
                       <!-- for each learning activity -->
 
@@ -57,7 +95,13 @@
                       <VTooltip bottom>
                         <template #activator="{ on }">
                           <div style="display: inline-block;" v-on="on">
-                            <Icon color="primary" small class="mx-1" style="vertical-align: text-top;">local_library
+                            <Icon
+                              color="primary"
+                              small
+                              class="mx-1"
+                              style="vertical-align: text-top;"
+                            >
+                              local_library
                             </Icon>
                             <span v-if="isTopic">
                               {{ $formatNumber(node.coach_count) }}
@@ -66,19 +110,31 @@
                         </template>
                         <span>
                           {{ isTopic ?
-                          $tr('hasCoachTooltip', { value: node.coach_count })
-                          : $tr('coachTooltip')
+                            $tr('hasCoachTooltip', { value: node.coach_count })
+                            : $tr('coachTooltip')
                           }}
                         </span>
                       </VTooltip>
                     </span>
                   </VListTileSubTitle>
                   <span v-if="!isCompact">
-                    <ContentNodeIcon :isTopic="isTopic" :learningActivity="node.learning_activities" showEachActivityChip
-                    includeText small chip class="inline" />
+                    <ContentNodeIcon
+                      :isTopic="isTopic"
+                      :learningActivity="node.learning_activities"
+                      showEachActivityChip
+                      includeText
+                      small
+                      chip
+                      class="inline"
+                    />
                     <span v-if="node.grade_levels">
-                      <span v-for="(key, index) in Object.keys(node.grade_levels)" :key="index" class="small-chip">{{
-                        levels(key) }}</span>
+                      <span
+                        v-for="(key, index) in Object.keys(node.grade_levels)"
+                        :key="index"
+                        class="small-chip"
+                      >
+                        {{ levels(key) }}
+                      </span>
                     </span>
                   </span>
                 </VListTileContent>
@@ -88,8 +144,15 @@
                 </VListTileContent>
                 <template v-if="!copying">
                   <VListTileAction class="actions-end-col">
-                    <IconButton v-if="isTopic" :aria-hidden="hover" data-test="btn-chevron" icon="chevronRight"
-                      :text="$tr('openTopic')" size="small" @click="$emit('topicChevronClick')" />
+                    <IconButton
+                      v-if="isTopic"
+                      :aria-hidden="hover"
+                      data-test="btn-chevron"
+                      icon="chevronRight"
+                      :text="$tr('openTopic')"
+                      size="small"
+                      @click="$emit('topicChevronClick')"
+                    />
                   </VListTileAction>
                   <slot name="actions-end" :hover="hover"></slot>
                 </template>
@@ -119,9 +182,11 @@
 <script>
 
   import { mapActions } from 'vuex';
+  import { camelCase } from 'lodash';
   import ContentNodeValidator from '../ContentNodeValidator';
   import ContentNodeChangedIcon from '../ContentNodeChangedIcon';
   import TaskProgress from '../../views/progress/TaskProgress';
+  import { ContentLevel, Categories } from '../../../shared/constants';
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
   import { RolesNames } from 'shared/leUtils/Roles';
   import Thumbnail from 'shared/views/files/Thumbnail';
@@ -129,17 +194,10 @@
   import ToggleText from 'shared/views/ToggleText';
   import ContextMenuCloak from 'shared/views/ContextMenuCloak';
   import DraggableHandle from 'shared/views/draggable/DraggableHandle';
-import { titleMixin, metadataTranslationMixin, } from 'shared/mixins';
+  import { titleMixin, metadataTranslationMixin } from 'shared/mixins';
   import { COPYING_FLAG, TASK_ID } from 'shared/data/constants';
   import { EffectAllowed } from 'shared/mixins/draggable/constants';
   import ContentNodeIcon from 'shared/views/ContentNodeIcon';
-import { camelCase, matchesProperty } from 'lodash';
-  import {
-    ContentLevel,
-    Categories,
-  } from '../../../shared/constants';
-import LevelsOptionsVue from '../edit/LevelsOptions.vue';
-
 
   export default {
     name: 'ContentNodeListItem',
@@ -152,9 +210,9 @@ import LevelsOptionsVue from '../edit/LevelsOptions.vue';
       ContentNodeChangedIcon,
       ToggleText,
       TaskProgress,
-      ContentNodeIcon
+      ContentNodeIcon,
     },
-  mixins: [titleMixin, metadataTranslationMixin],
+    mixins: [titleMixin, metadataTranslationMixin],
     props: {
       node: {
         type: Object,
@@ -218,7 +276,9 @@ import LevelsOptionsVue from '../edit/LevelsOptions.vue';
         return this.node.role_visibility === RolesNames.COACH;
       },
       hasMetadataToDisplay() {
-        return this.subtitle || this.node.coach_content || Object.keys(this.node.categories).length > 0
+        return (
+          this.subtitle || this.node.coach_content || Object.keys(this.node.categories).length > 0
+        );
       },
       contextMenuDisabled() {
         return !this.$scopedSlots['context-menu'] || this.copying;
@@ -254,7 +314,9 @@ import LevelsOptionsVue from '../edit/LevelsOptions.vue';
       },
       category(options) {
         const ids = Object.keys(options);
-        const matches = Object.keys(Categories).sort().filter(k => ids.includes(Categories[k]));
+        const matches = Object.keys(Categories)
+          .sort()
+          .filter(k => ids.includes(Categories[k]));
         if (matches && matches.length > 0) {
           return this.matchIdToString(matches);
         }
@@ -304,9 +366,9 @@ import LevelsOptionsVue from '../edit/LevelsOptions.vue';
   }
 
   .text {
-    font-size: 12px;
-    margin: 0;
     display: inline-block;
+    margin: 0;
+    font-size: 12px;
   }
 
   .disabled-overlay {
@@ -396,13 +458,13 @@ import LevelsOptionsVue from '../edit/LevelsOptions.vue';
     content: ' • ';
   }
 
-    .small-chip {
-      background-color: #dedede;
-      display: inline-block;
-      padding: 2px 4px;
-      font-size: 10px;
-      border-radius: 4px;
-      margin: 2px;
-    }
+  .small-chip {
+    display: inline-block;
+    padding: 2px 4px;
+    margin: 2px;
+    font-size: 10px;
+    background-color: #dedede;
+    border-radius: 4px;
+  }
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
index 9c3425fa8f..df5027b529 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
@@ -133,7 +133,11 @@
             notranslate
           />
           <DetailsRow v-if="!isTopic" :label="translateMetadataString('learningActivity')">
-            <ContentNodeIcon :learningActivity="node.learning_activities" includeText showEachActivityChip/>
+            <ContentNodeIcon
+              :learningActivity="node.learning_activities"
+              includeText
+              showEachActivityChip
+            />
           </DetailsRow>
           <DetailsRow v-if="isExercise" :label="$tr('completion')">
             <span v-if="noMasteryModel" class="red--text">
diff --git a/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/getters.js b/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/getters.js
index 6403e1fd22..f402f54036 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/getters.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/getters.js
@@ -167,7 +167,6 @@ function getStepDetail(state, getters, contentNodeId) {
     return stepDetail;
   }
 
-
   stepDetail.title = node.title;
   stepDetail.kind = node.kind;
   stepDetail.learning_activities = node.learning_activities;
@@ -181,7 +180,7 @@ function getStepDetail(state, getters, contentNodeId) {
     }
   }
 
-  console.log(stepDetail)
+  console.log(stepDetail);
 
   return stepDetail;
 }
diff --git a/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue b/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue
index c9bec8ae6a..b9821da7e9 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue
@@ -2,17 +2,22 @@
 
   <span v-if="includeText">
     <span v-for="activity in activities" :key="activity">
-        <div v-if="chip" :class="small ? 'small-chip' : 'chip'">
-            <KLabeledIcon :icon="icon(activity)" :label="text(activity)" />
-        </div>
-        <div v-else>
-          <KLabeledIcon :icon="icon(activity)" :label="text(activity)" />
-        </div>
-      </span>
+      <div v-if="chip" :class="small ? 'small-chip' : 'chip'">
+        <KLabeledIcon :icon="icon(activity)" :label="text(activity)" />
+      </div>
+      <div v-else>
+        <KLabeledIcon :icon="icon(activity)" :label="text(activity)" />
+      </div>
+    </span>
   </span>
   <span v-else>
     <span v-if="showEachActivityChip">
-      <KIcon v-for="activity in activities" :key="activity" :icon="icon(activity)" :aria-label="text(activity)" />
+      <KIcon
+        v-for="activity in activities"
+        :key="activity"
+        :icon="icon(activity)"
+        :aria-label="text(activity)"
+      />
     </span>
     <span v-else-if="activities.length > 1 && !showEachActivityChip">
       <KIcon :icon="icon('multiple')" :aria-label="text('multiple')" />
@@ -22,16 +27,14 @@
     </span>
   </span>
 
-
-
 </template>
 
 <script>
 
-import { getContentKindIcon } from 'shared/vuetify/icons';
-import { LearningActivities } from '../../shared/constants';
-import { camelCase } from 'lodash';
-import {  metadataTranslationMixin } from 'shared/mixins';
+  import { camelCase } from 'lodash';
+  import { LearningActivities } from '../../shared/constants';
+  import { getContentKindIcon } from 'shared/vuetify/icons';
+  import { metadataTranslationMixin } from 'shared/mixins';
 
   export default {
     name: 'ContentNodeIcon',
@@ -66,32 +69,30 @@ import {  metadataTranslationMixin } from 'shared/mixins';
     computed: {
       activities() {
         const ids = Object.keys(this.learningActivity);
-        return Object.keys(LearningActivities).filter(k =>
-          ids.includes(LearningActivities[k])
-        );
+        return Object.keys(LearningActivities).filter(k => ids.includes(LearningActivities[k]));
       },
     },
     methods: {
       icon(activity) {
         if (this.isTopic) {
-          return 'topic'
+          return 'topic';
         } else {
-          console.log(activity)
+          console.log(activity);
           return getContentKindIcon(this.text(activity));
         }
       },
       text(activity) {
         if (this.isTopic) {
-          return this.$tr('topic')
+          return this.$tr('topic');
         } else if (activity == 'multiple') {
-          return this.$tr('multipleLearningActivities')
+          return this.$tr('multipleLearningActivities');
         }
-         return this.translateMetadataString(camelCase(activity))
-      }
+        return this.translateMetadataString(camelCase(activity));
+      },
     },
     $trs: {
-     multipleLearningActivities: 'Multiple learning activities',
-     topic: 'Folder',
+      multipleLearningActivities: 'Multiple learning activities',
+      topic: 'Folder',
     },
   };
 
@@ -100,22 +101,22 @@ import {  metadataTranslationMixin } from 'shared/mixins';
 <style lang="less" scoped>
 
   .chip {
-    background-color: #dedede;
     display: inline-block;
+    width: unset !important;
     padding: 10px;
     margin: 4px;
     font-weight: bold;
+    background-color: #dedede;
     border-radius: 4px;
-    width: unset !important;
   }
 
-
   .small-chip {
-    background-color: #dedede;
     display: inline-block;
     padding: 2px 4px;
+    margin: 2px;
     font-size: 10px;
+    background-color: #dedede;
     border-radius: 4px;
-    margin: 2px;
   }
+
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/ToggleText.vue b/contentcuration/contentcuration/frontend/shared/views/ToggleText.vue
index 87c1d295c3..6a5c0eca4b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ToggleText.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ToggleText.vue
@@ -97,9 +97,9 @@
 
   .text {
     margin: 0;
+    font-size: 12px;
     word-wrap: break-word;
     white-space: normal;
-    font-size: 12px;
   }
   .toggler {
     color: var(--v-grey-darken1);
diff --git a/contentcuration/contentcuration/frontend/shared/vuetify/icons.js b/contentcuration/contentcuration/frontend/shared/vuetify/icons.js
index 45f2e27e9f..65959a696d 100644
--- a/contentcuration/contentcuration/frontend/shared/vuetify/icons.js
+++ b/contentcuration/contentcuration/frontend/shared/vuetify/icons.js
@@ -1,13 +1,12 @@
 import Vue from 'vue';
 import vuetifyIcons from 'vuetify/lib/components/Vuetify/mixins/icons';
+import { camelCase } from 'lodash';
 import CollapseAllIcon from '../views/icons/CollapseAllIcon';
 import IndicatorIcon from '../views/icons/IndicatorIcon';
 import LightBulbIcon from '../views/icons/LightBulbIcon';
 import ViewOnlyIcon from '../views/icons/ViewOnlyIcon';
 import Icon from 'shared/views/Icon';
 import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
-import { camelCase } from 'lodash';
-
 
 Vue.component(Icon.name, Icon);
 
@@ -24,15 +23,14 @@ export const CONTENT_KIND_ICONS = {
 };
 
 export function getContentKindIcon(activity) {
-
-    if (activity  == 'Explore') {
-      return 'interactShaded';
-    } else if (activity == 'Multiple learning activities') {
-      return 'allActivities';
-    } else {
-      return `${camelCase(activity) + 'Solid'}`;
+  if (activity == 'Explore') {
+    return 'interactShaded';
+  } else if (activity == 'Multiple learning activities') {
+    return 'allActivities';
+  } else {
+    return `${camelCase(activity) + 'Solid'}`;
   }
-};
+}
 
 // Can use $vuetify.icons.iconName in <Icon> tags
 const customIcons = {

From 36d967222bb8d9509eb89712339a3b7eca0f493e Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Wed, 6 Jul 2022 10:43:09 -0400
Subject: [PATCH 08/20] Rename new ContentNodeIcon to
 ContentNodeLearningActivityIcon and replace original to avoid collisions and
 very broad refactoring

---
 .../components/ContentNodeListItem/index.vue  |   6 +-
 .../channelEdit/components/ResourcePanel.vue  |  14 +-
 .../channelEdit/vuex/contentNode/getters.js   |   2 -
 .../frontend/shared/views/ContentNodeIcon.vue | 141 +++++++++---------
 .../views/ContentNodeLearningActivityIcon.vue | 122 +++++++++++++++
 .../frontend/shared/views/files/Thumbnail.vue |   6 +-
 .../frontend/shared/vuetify/icons.js          |   7 +-
 7 files changed, 209 insertions(+), 89 deletions(-)
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
index 99f7afa8a3..bbfe0721cc 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
@@ -118,7 +118,7 @@
                     </span>
                   </VListTileSubTitle>
                   <span v-if="!isCompact">
-                    <ContentNodeIcon
+                    <ContentNodeLearningActivityIcon
                       :isTopic="isTopic"
                       :learningActivity="node.learning_activities"
                       showEachActivityChip
@@ -197,7 +197,7 @@
   import { titleMixin, metadataTranslationMixin } from 'shared/mixins';
   import { COPYING_FLAG, TASK_ID } from 'shared/data/constants';
   import { EffectAllowed } from 'shared/mixins/draggable/constants';
-  import ContentNodeIcon from 'shared/views/ContentNodeIcon';
+  import ContentNodeLearningActivityIcon from 'shared/views/ContentNodeLearningActivityIcon';
 
   export default {
     name: 'ContentNodeListItem',
@@ -210,7 +210,7 @@
       ContentNodeChangedIcon,
       ToggleText,
       TaskProgress,
-      ContentNodeIcon,
+      ContentNodeLearningActivityIcon,
     },
     mixins: [titleMixin, metadataTranslationMixin],
     props: {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
index df5027b529..23192d430e 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
@@ -6,8 +6,8 @@
         <div v-if="!loading && node" class="mb-1">
           <!-- Slot for elements like "Back" link -->
           <slot name="navigation"></slot>
-          <ContentNodeIcon v-if="isTopic" :isTopic="true" includeText chip />
-          <ContentNodeIcon
+          <ContentNodeLearningActivityIcon v-if="isTopic" :isTopic="true" includeText chip />
+          <ContentNodeLearningActivityIcon
             v-else-if="hasLearningActivities"
             :learningActivity="node.learning_activities"
             includeText
@@ -133,7 +133,7 @@
             notranslate
           />
           <DetailsRow v-if="!isTopic" :label="translateMetadataString('learningActivity')">
-            <ContentNodeIcon
+            <ContentNodeLearningActivityIcon
               :learningActivity="node.learning_activities"
               includeText
               showEachActivityChip
@@ -193,7 +193,7 @@
               </div>
               <div v-else dense class="mb-2 pa-1">
                 <div v-for="prerequisite in previousSteps" :key="prerequisite.id">
-                  <ContentNodeIcon
+                  <ContentNodeLearningActivityIcon
                     v-if="prerequisite.learning_activities"
                     :learningActivity="prerequisite.learning_activities"
                     showEachActivityChip
@@ -208,7 +208,7 @@
               </div>
               <div v-else dense class="mb-2 pa-1">
                 <div v-for="postrequisite in nextSteps" :key="postrequisite.id">
-                  <ContentNodeIcon
+                  <ContentNodeLearningActivityIcon
                     v-if="postrequisite.learning_activities"
                     :learningActivity="postrequisite.learning_activities"
                     showEachActivityChip
@@ -343,7 +343,7 @@
     getNodeMasteryModelMErrors,
     getNodeMasteryModelNErrors,
   } from 'shared/utils/validation';
-  import ContentNodeIcon from 'shared/views/ContentNodeIcon';
+  import ContentNodeLearningActivityIcon from 'shared/views/ContentNodeLearningActivityIcon';
   import LoadingText from 'shared/views/LoadingText';
   import DetailsRow from 'shared/views/details/DetailsRow';
   import ExpandableList from 'shared/views/ExpandableList';
@@ -363,7 +363,7 @@
   export default {
     name: 'ResourcePanel',
     components: {
-      ContentNodeIcon,
+      ContentNodeLearningActivityIcon,
       LoadingText,
       DetailsRow,
       FilePreview,
diff --git a/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/getters.js b/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/getters.js
index f402f54036..755fad055d 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/getters.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/getters.js
@@ -180,8 +180,6 @@ function getStepDetail(state, getters, contentNodeId) {
     }
   }
 
-  console.log(stepDetail);
-
   return stepDetail;
 }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue b/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue
index b9821da7e9..874b084810 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue
@@ -1,29 +1,27 @@
 <template>
 
-  <span v-if="includeText">
-    <span v-for="activity in activities" :key="activity">
-      <div v-if="chip" :class="small ? 'small-chip' : 'chip'">
-        <KLabeledIcon :icon="icon(activity)" :label="text(activity)" />
-      </div>
-      <div v-else>
-        <KLabeledIcon :icon="icon(activity)" :label="text(activity)" />
-      </div>
-    </span>
-  </span>
-  <span v-else>
-    <span v-if="showEachActivityChip">
-      <KIcon
-        v-for="activity in activities"
-        :key="activity"
-        :icon="icon(activity)"
-        :aria-label="text(activity)"
-      />
-    </span>
-    <span v-else-if="activities.length > 1 && !showEachActivityChip">
-      <KIcon :icon="icon('multiple')" :aria-label="text('multiple')" />
-    </span>
-    <span v-else>
-      <KIcon :icon="icon(activities[0])" :aria-label="text(activities[0])" />
+  <span v-if="icon">
+    <VChip
+      v-if="showColor"
+      label
+      :color="kind"
+      :small="small"
+      :textColor="fontColor"
+      class="ma-0 pa-0"
+      :class="{ iconOnly: !includeText, fillWidth }"
+      :style="{ width: fillWidth ? '100%' : 'unset' }"
+      capture-as-image
+    >
+      <Icon small :color="fontColor" v-bind="$attrs">
+        {{ icon }}
+      </Icon>
+      <span v-if="includeText" class="ml-2">{{ text }}</span>
+    </VChip>
+    <span v-else capture-as-image>
+      <Icon :color="fontColor" v-bind="$attrs">
+        {{ icon }}
+      </Icon>
+      <span v-if="includeText">{{ text }}</span>
     </span>
   </span>
 
@@ -31,33 +29,32 @@
 
 <script>
 
-  import { camelCase } from 'lodash';
-  import { LearningActivities } from '../../shared/constants';
+  import ContentKinds from 'shared/leUtils/ContentKinds';
   import { getContentKindIcon } from 'shared/vuetify/icons';
-  import { metadataTranslationMixin } from 'shared/mixins';
 
   export default {
     name: 'ContentNodeIcon',
-    mixins: [metadataTranslationMixin],
-
     props: {
-      learningActivity: {
-        type: Object,
-        required: false,
+      kind: {
+        type: String,
+        validator: value => {
+          return value === 'unsupported' || ContentKinds.has(value);
+        },
+        default: 'unsupported',
       },
-      showEachActivityChip: {
+      includeText: {
         type: Boolean,
         default: false,
       },
-      isTopic: {
+      showColor: {
         type: Boolean,
-        default: false,
+        default: true,
       },
-      includeText: {
+      isEmpty: {
         type: Boolean,
         default: false,
       },
-      chip: {
+      fillWidth: {
         type: Boolean,
         default: false,
       },
@@ -67,32 +64,42 @@
       },
     },
     computed: {
-      activities() {
-        const ids = Object.keys(this.learningActivity);
-        return Object.keys(LearningActivities).filter(k => ids.includes(LearningActivities[k]));
+      fontColor() {
+        return this.showColor ? 'white' : 'grey darken-1';
       },
-    },
-    methods: {
-      icon(activity) {
-        if (this.isTopic) {
-          return 'topic';
-        } else {
-          console.log(activity);
-          return getContentKindIcon(this.text(activity));
-        }
+      icon() {
+        return getContentKindIcon(this.kind, this.isEmpty);
       },
-      text(activity) {
-        if (this.isTopic) {
-          return this.$tr('topic');
-        } else if (activity == 'multiple') {
-          return this.$tr('multipleLearningActivities');
+      text() {
+        switch (this.kind) {
+          case 'topic':
+            return this.$tr('topic');
+          case 'video':
+            return this.$tr('video');
+          case 'audio':
+            return this.$tr('audio');
+          case 'slideshow':
+            return this.$tr('slideshow');
+          case 'exercise':
+            return this.$tr('exercise');
+          case 'document':
+            return this.$tr('document');
+          case 'html5':
+            return this.$tr('html5');
+          default:
+            return this.$tr('unsupported');
         }
-        return this.translateMetadataString(camelCase(activity));
       },
     },
     $trs: {
-      multipleLearningActivities: 'Multiple learning activities',
       topic: 'Folder',
+      video: 'Video',
+      audio: 'Audio',
+      exercise: 'Exercise',
+      document: 'Document',
+      slideshow: 'Slideshow',
+      html5: 'HTML5 App',
+      unsupported: 'Unsupported',
     },
   };
 
@@ -100,23 +107,11 @@
 
 <style lang="less" scoped>
 
-  .chip {
-    display: inline-block;
-    width: unset !important;
-    padding: 10px;
-    margin: 4px;
-    font-weight: bold;
-    background-color: #dedede;
-    border-radius: 4px;
-  }
-
-  .small-chip {
-    display: inline-block;
-    padding: 2px 4px;
-    margin: 2px;
-    font-size: 10px;
-    background-color: #dedede;
-    border-radius: 4px;
+  .iconOnly {
+    /deep/ .v-chip__content {
+      height: 22px;
+      padding: 0 5px;
+    }
   }
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue b/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue
new file mode 100644
index 0000000000..c6bd726a25
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue
@@ -0,0 +1,122 @@
+<template>
+
+  <span v-if="includeText">
+    <span v-for="activity in activities" :key="activity">
+      <div v-if="chip" :class="small ? 'small-chip' : 'chip'">
+        <KLabeledIcon :icon="icon(activity)" :label="text(activity)" />
+      </div>
+      <div v-else>
+        <KLabeledIcon :icon="icon(activity)" :label="text(activity)" />
+      </div>
+    </span>
+  </span>
+  <span v-else>
+    <span v-if="showEachActivityChip">
+      <KIcon
+        v-for="activity in activities"
+        :key="activity"
+        :icon="icon(activity)"
+        :aria-label="text(activity)"
+      />
+    </span>
+    <span v-else-if="activities.length > 1 && !showEachActivityChip">
+      <KIcon :icon="icon('multiple')" :aria-label="text('multiple')" />
+    </span>
+    <span v-else>
+      <KIcon :icon="icon(activities[0])" :aria-label="text(activities[0])" />
+    </span>
+  </span>
+
+</template>
+
+<script>
+
+  import { camelCase } from 'lodash';
+  import { LearningActivities } from '../constants';
+  import { getLearningActivityIcon } from 'shared/vuetify/icons';
+  import { metadataTranslationMixin } from 'shared/mixins';
+
+  export default {
+    name: 'ContentNodeLearningActivityIcon',
+    mixins: [metadataTranslationMixin],
+
+    props: {
+      learningActivity: {
+        type: Object,
+        required: false,
+      },
+      showEachActivityChip: {
+        type: Boolean,
+        default: false,
+      },
+      isTopic: {
+        type: Boolean,
+        default: false,
+      },
+      includeText: {
+        type: Boolean,
+        default: false,
+      },
+      chip: {
+        type: Boolean,
+        default: false,
+      },
+      small: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    computed: {
+      activities() {
+        const ids = Object.keys(this.learningActivity);
+        return Object.keys(LearningActivities).filter(k => ids.includes(LearningActivities[k]));
+      },
+    },
+    methods: {
+      icon(activity) {
+        if (this.isTopic) {
+          return 'topic';
+        } else {
+          console.log(activity);
+          return getLearningActivityIcon(this.text(activity));
+        }
+      },
+      text(activity) {
+        if (this.isTopic) {
+          return this.$tr('topic');
+        } else if (activity == 'multiple') {
+          return this.$tr('multipleLearningActivities');
+        }
+        return this.translateMetadataString(camelCase(activity));
+      },
+    },
+    $trs: {
+      multipleLearningActivities: 'Multiple learning activities',
+      topic: 'Folder',
+    },
+  };
+
+</script>
+
+<style lang="less" scoped>
+
+  .chip {
+    display: inline-block;
+    width: unset !important;
+    padding: 10px;
+    margin: 4px;
+    font-weight: bold;
+    background-color: #dedede;
+    border-radius: 4px;
+  }
+
+  .small-chip {
+    display: inline-block;
+    padding: 2px 4px;
+    margin: 2px;
+    font-size: 10px;
+    background-color: #dedede;
+    border-radius: 4px;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue b/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
index ad4cee6e76..e872945a80 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
@@ -18,7 +18,7 @@
 
     <!-- If printing the default icon, need to set as printable icon -->
     <div v-else-if="compact || printing">
-      <ContentNodeIcon
+      <ContentNodeLearningActivityIcon
         v-if="learningActivity"
         :learningActivity="learningActivity"
         :isTopic="isTopic"
@@ -48,12 +48,12 @@
 <script>
 
   import { constantsTranslationMixin, printingMixin } from 'shared/mixins';
-  import ContentNodeIcon from 'shared/views/ContentNodeIcon';
+  import ContentNodeLearningActivityIcon from 'shared/views/ContentNodeLearningActivityIcon';
 
   export default {
     name: 'Thumbnail',
     components: {
-      ContentNodeIcon,
+      ContentNodeLearningActivityIcon,
     },
     mixins: [constantsTranslationMixin, printingMixin],
     props: {
diff --git a/contentcuration/contentcuration/frontend/shared/vuetify/icons.js b/contentcuration/contentcuration/frontend/shared/vuetify/icons.js
index 65959a696d..5ad894742e 100644
--- a/contentcuration/contentcuration/frontend/shared/vuetify/icons.js
+++ b/contentcuration/contentcuration/frontend/shared/vuetify/icons.js
@@ -22,7 +22,12 @@ export const CONTENT_KIND_ICONS = {
   [ContentKindsNames.HTML5]: 'widgets',
 };
 
-export function getContentKindIcon(activity) {
+export function getContentKindIcon(kind, isEmpty = false) {
+  const icon = (isEmpty ? [kind + EMPTY] : []).concat([kind]).find(k => k in CONTENT_KIND_ICONS);
+  return icon ? CONTENT_KIND_ICONS[icon] : 'error_outline';
+}
+
+export function getLearningActivityIcon(activity) {
   if (activity == 'Explore') {
     return 'interactShaded';
   } else if (activity == 'Multiple learning activities') {

From 843a2b5710bb9f8a9b9946e32a71255434aebeff Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Wed, 6 Jul 2022 11:03:49 -0400
Subject: [PATCH 09/20] Update to use International List Formatting

---
 .../channelEdit/components/ResourcePanel.vue     | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
index 23192d430e..dad0652892 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
@@ -360,6 +360,11 @@
   import { MasteryModelsNames } from 'shared/leUtils/MasteryModels';
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
 
+  const formatter = new Intl.ListFormat(window.languageCode, {
+    style: 'long',
+    type: 'conjunction',
+  });
+
   export default {
     name: 'ResourcePanel',
     components: {
@@ -581,8 +586,9 @@
       getText(field) {
         return this.node[field] || this.defaultText;
       },
-      matchIdToString(ids) {
-        return ids.map(i => this.translateMetadataString(camelCase(i))).join(', ');
+      metadataListText(ids) {
+        const list = ids.map(i => this.translateMetadataString(camelCase(i)));
+        return formatter.format(list);
       },
       level(levels) {
         const ids = Object.keys(levels);
@@ -590,7 +596,7 @@
           .sort()
           .filter(k => ids.includes(ContentLevel[k]));
         if (matches && matches.length > 0) {
-          return this.matchIdToString(matches);
+          return this.metadataListText(matches);
         } else {
           return '-';
         }
@@ -601,7 +607,7 @@
           .sort()
           .filter(k => ids.includes(AccessibilityCategories[k]));
         if (matches && matches.length > 0) {
-          return this.matchIdToString(matches);
+          return this.metadataListText(matches);
         } else {
           return '-';
         }
@@ -612,7 +618,7 @@
           .sort()
           .filter(k => ids.includes(Categories[k]));
         if (matches && matches.length > 0) {
-          return this.matchIdToString(matches);
+          return this.metadataListText(matches);
         } else {
           return '-';
         }

From 8f01d115385c6acfccf3ad4e59bc53b0c7017f01 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Wed, 6 Jul 2022 11:37:27 -0400
Subject: [PATCH 10/20] Fix tests

---
 .../components/ContentNodeListItem/index.spec.js         | 9 +++++----
 .../channelEdit/components/ContentNodeListItem/index.vue | 9 ++-------
 .../shared/views/ContentNodeLearningActivityIcon.vue     | 6 ++++--
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.spec.js
index 0fbea109a4..12bcc72415 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.spec.js
@@ -42,6 +42,11 @@ describe('ContentNodeListItem', () => {
       propsData: {
         node: DOCUMENT_NODE,
       },
+      computed: {
+        hasMetadataToDisplay() {
+          return true
+        }
+      }
     });
   });
   it('smoke test', () => {
@@ -63,10 +68,6 @@ describe('ContentNodeListItem', () => {
     expect(wrapper.contains('[data-test="btn-chevron"]')).toBe(false);
   });
 
-  it("doesn't render a subtitle for a node different from topic and exercise", () => {
-    expect(wrapper.contains('[data-test="subtitle"]')).toBe(false);
-  });
-
   it('emits an event when list item is clicked', () => {
     wrapper.find('[data-test="content-item"]').trigger('click');
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
index bbfe0721cc..39c5086c12 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
@@ -77,13 +77,13 @@
                   />
 
                   <VListTileSubTitle
-                    v-if="hasMetadataToDisplay && !isCompact"
+                    v-if="!isCompact"
                     data-test="subtitle"
                     class="metadata"
                   >
                     <span v-if="subtitle" class="text">{{ subtitle }}</span>
                     <span
-                      v-if="Object.keys(node.categories).length > 0"
+                      v-if="node.categories ? Object.keys(node.categories).length > 0 : null"
                       class="text"
                     >
                       {{ category(node.categories) }}
@@ -275,11 +275,6 @@
       isCoach() {
         return this.node.role_visibility === RolesNames.COACH;
       },
-      hasMetadataToDisplay() {
-        return (
-          this.subtitle || this.node.coach_content || Object.keys(this.node.categories).length > 0
-        );
-      },
       contextMenuDisabled() {
         return !this.$scopedSlots['context-menu'] || this.copying;
       },
diff --git a/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue b/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue
index c6bd726a25..098dab5374 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue
@@ -68,8 +68,10 @@
     },
     computed: {
       activities() {
-        const ids = Object.keys(this.learningActivity);
-        return Object.keys(LearningActivities).filter(k => ids.includes(LearningActivities[k]));
+        if (this.learningActivity) {
+          const ids = Object.keys(this.learningActivity);
+          return Object.keys(LearningActivities).filter(k => ids.includes(LearningActivities[k]));
+        }
       },
     },
     methods: {

From 9696795230ae4a2c9f88603050d58598bb6bc51b Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Wed, 6 Jul 2022 16:53:31 -0400
Subject: [PATCH 11/20] Properly polyfill intl-listformatter to fix tests and
 work across browsers

---
 .../channelEdit/components/ResourcePanel.vue  |  9 +-
 .../views/ContentNodeLearningActivityIcon.vue |  1 -
 package.json                                  |  1 +
 yarn.lock                                     | 85 +++++++++++++++++++
 4 files changed, 90 insertions(+), 6 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
index dad0652892..233440ddf5 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
@@ -329,6 +329,7 @@
   import sortBy from 'lodash/sortBy';
   import { mapActions, mapGetters } from 'vuex';
   import { camelCase } from 'lodash';
+  import { createIntl } from '@formatjs/intl';
   import { isImportedContent, importedChannelLink } from '../utils';
   import FilePreview from '../views/files/FilePreview';
   import { ContentLevel, Categories, AccessibilityCategories } from '../../shared/constants';
@@ -360,9 +361,8 @@
   import { MasteryModelsNames } from 'shared/leUtils/MasteryModels';
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
 
-  const formatter = new Intl.ListFormat(window.languageCode, {
-    style: 'long',
-    type: 'conjunction',
+  const intl = createIntl({
+    locale: window.languageCode || 'en',
   });
 
   export default {
@@ -444,7 +444,6 @@
         return this.contentNodesTotalSize([this.nodeId]);
       },
       isTopic() {
-        console.log(JSON.parse(JSON.stringify(this.node.extra_fields)));
         return this.node && this.node.kind === ContentKindsNames.TOPIC;
       },
       isExercise() {
@@ -588,7 +587,7 @@
       },
       metadataListText(ids) {
         const list = ids.map(i => this.translateMetadataString(camelCase(i)));
-        return formatter.format(list);
+        return intl.formatList(list);
       },
       level(levels) {
         const ids = Object.keys(levels);
diff --git a/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue b/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue
index 098dab5374..b60378fbc7 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue
@@ -79,7 +79,6 @@
         if (this.isTopic) {
           return 'topic';
         } else {
-          console.log(activity);
           return getLearningActivityIcon(this.text(activity));
         }
       },
diff --git a/package.json b/package.json
index c1ff92bb9c..b9ea348b05 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
   },
   "homepage": "https://github.com/learningequality/studio#readme",
   "dependencies": {
+    "@formatjs/intl": "^2.3.1",
     "@sentry/browser": "^5.9.1",
     "@toast-ui/editor": "^2.3.1",
     "ajv": "^8.9.0",
diff --git a/yarn.lock b/yarn.lock
index 4be8cf2398..6140f0401f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1780,6 +1780,76 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
+"@formatjs/ecma402-abstract@1.11.8":
+  version "1.11.8"
+  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.8.tgz#f4015dfb6a837369d94c6ba82455c609e45bce20"
+  integrity sha512-fgLqyWlwmTEuqV/TSLEL/t9JOmHNLFvCdgzXB0jc2w+WOItPCOJ1T0eyN6fQBQKRPfSqqNlu+kWj7ijcOVTVVQ==
+  dependencies:
+    "@formatjs/intl-localematcher" "0.2.28"
+    tslib "2.4.0"
+
+"@formatjs/fast-memoize@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-1.2.4.tgz#4b5ddce9eb7803ff0bd4052387672151a8b7f8a0"
+  integrity sha512-9ARYoLR8AEzXvj2nYrOVHY/h1dDMDWGTnKDLXSISF1uoPakSmfcZuSqjiqZX2wRkEUimPxdwTu/agyozBtZRHA==
+  dependencies:
+    tslib "2.4.0"
+
+"@formatjs/icu-messageformat-parser@2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.4.tgz#f1e32b9937f151c1dd5c30536ce3e920b7f23813"
+  integrity sha512-3PqMvKWV1oyok0BuiXUAHIaotdhdTJw6OICqCZbfUgKT+ZRwRWO4IlCgvXJeCITaKS5p+PY0XXKjf/vUyIpWjQ==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.8"
+    "@formatjs/icu-skeleton-parser" "1.3.10"
+    tslib "2.4.0"
+
+"@formatjs/icu-skeleton-parser@1.3.10":
+  version "1.3.10"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.10.tgz#2f504e56ac80137ee2baad55c7fa0b5dc7f4e4df"
+  integrity sha512-kXJmtLDqFF5aLTf8IxdJXnhrIX1Qb4Qp3a9jqRecGDYfzOa9hMhi9U0nKyhrJJ4cXxBzptcgb+LWkyeHL6nlBQ==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.8"
+    tslib "2.4.0"
+
+"@formatjs/intl-displaynames@6.0.3":
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-6.0.3.tgz#e648a91bccd9fb21519090eaafece3be9d15f480"
+  integrity sha512-Mxh6W1VOlmiEvO/QPBrBQHlXrIn5VxjJWyyEI0V7ZHNGl0ee8AjSlq7vIJG8GodRJqGUuutF6N3OB/6qFv0YWg==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.8"
+    "@formatjs/intl-localematcher" "0.2.28"
+    tslib "2.4.0"
+
+"@formatjs/intl-listformat@7.0.3":
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-7.0.3.tgz#8627969b77849559d148bc9536d0884c2271e6de"
+  integrity sha512-ampNLRGZl/08epHa3i5sRmcHGLneC6JrknexbbgnexYFNSmJ6AbL/dCzgrQzw2Efl+5AZK7UbNFxcDYY3RePvw==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.8"
+    "@formatjs/intl-localematcher" "0.2.28"
+    tslib "2.4.0"
+
+"@formatjs/intl-localematcher@0.2.28":
+  version "0.2.28"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.2.28.tgz#412ea7fefbfc7ed33cd6b43aa304fc14d816e564"
+  integrity sha512-FLsc6Gifs1np/8HnCn/7Q+lHMmenrD5fuDhRT82yj0gi9O19kfaFwjQUw1gZsyILuRyT93GuzdifHj7TKRhBcw==
+  dependencies:
+    tslib "2.4.0"
+
+"@formatjs/intl@^2.3.1":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl/-/intl-2.3.1.tgz#eccd6d03e4db18c256181f235b1d0a7f7aaebf5a"
+  integrity sha512-f06qZ/ukpeN24gc01qFjh3P+r3FU/ikY4yG+fDJu6dPNvpUQzDy98lYogA1dr6ig2UtrnoEk3xncyFPL1e9cZw==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.8"
+    "@formatjs/fast-memoize" "1.2.4"
+    "@formatjs/icu-messageformat-parser" "2.1.4"
+    "@formatjs/intl-displaynames" "6.0.3"
+    "@formatjs/intl-listformat" "7.0.3"
+    intl-messageformat "10.1.1"
+    tslib "2.4.0"
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -10314,6 +10384,16 @@ intl-messageformat@1.3.0, intl-messageformat@^1.3.0:
   dependencies:
     intl-messageformat-parser "1.2.0"
 
+intl-messageformat@10.1.1:
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-10.1.1.tgz#226767e7921fa86cef2cbe4a13911050716720bc"
+  integrity sha512-FeJne2oooYW6shLPbrqyjRX6hTELVrQ90Dn88z7NomLk/xZBCLxLPAkgaYaTQJBRBV78nZ933d8APHHkTQrD9Q==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.8"
+    "@formatjs/fast-memoize" "1.2.4"
+    "@formatjs/icu-messageformat-parser" "2.1.4"
+    tslib "2.4.0"
+
 intl-relativeformat@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/intl-relativeformat/-/intl-relativeformat-1.3.0.tgz#893dc7076fccd380cf091a2300c380fa57ace45b"
@@ -19110,6 +19190,11 @@ tsconfig@^7.0.0:
     strip-bom "^3.0.0"
     strip-json-comments "^2.0.0"
 
+tslib@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
 tslib@^1.10.0, tslib@^1.9.0, tslib@^1.9.3:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"

From b11fec1dae43e41145a749b27039a97eb93f8129 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Wed, 6 Jul 2022 16:55:01 -0400
Subject: [PATCH 12/20] Fix linting, cont.

---
 .../frontend/shared/views/ContentNodeLearningActivityIcon.vue    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue b/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue
index b60378fbc7..969d57f652 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue
@@ -72,6 +72,7 @@
           const ids = Object.keys(this.learningActivity);
           return Object.keys(LearningActivities).filter(k => ids.includes(LearningActivities[k]));
         }
+        return [];
       },
     },
     methods: {

From 26dc7e74c5e0dd9f5c72f8e48aa8367dd284bbc7 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Wed, 6 Jul 2022 17:04:57 -0400
Subject: [PATCH 13/20] Fix linting, cont.

---
 .../components/ContentNodeListItem/index.spec.js            | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.spec.js
index 12bcc72415..b06c1ab666 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.spec.js
@@ -44,9 +44,9 @@ describe('ContentNodeListItem', () => {
       },
       computed: {
         hasMetadataToDisplay() {
-          return true
-        }
-      }
+          return true;
+        },
+      },
     });
   });
   it('smoke test', () => {

From 303a9f13b2403bd1ad2320c788f0370b54d3feca Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Thu, 14 Jul 2022 09:01:34 -0400
Subject: [PATCH 14/20] Code cleanup and light refactoring to implement
 feedback

---
 .../ContentNodeListItem/index.spec.js         |  5 --
 .../channelEdit/components/ResourcePanel.vue  | 56 ++++++++++++++-----
 .../views/ContentNodeLearningActivityIcon.vue | 45 +++++++--------
 3 files changed, 62 insertions(+), 44 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.spec.js
index b06c1ab666..54e1547717 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.spec.js
@@ -42,11 +42,6 @@ describe('ContentNodeListItem', () => {
       propsData: {
         node: DOCUMENT_NODE,
       },
-      computed: {
-        hasMetadataToDisplay() {
-          return true;
-        },
-      },
     });
   });
   it('smoke test', () => {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
index 233440ddf5..063da10a81 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
@@ -9,7 +9,7 @@
           <ContentNodeLearningActivityIcon v-if="isTopic" :isTopic="true" includeText chip />
           <ContentNodeLearningActivityIcon
             v-else-if="hasLearningActivities"
-            :learningActivity="node.learning_activities"
+            :learningActivities="node.learning_activities"
             includeText
             chip
           />
@@ -130,13 +130,12 @@
             v-if="!isTopic"
             :label="translateMetadataString('level')"
             :text="level(node.grade_levels)"
-            notranslate
           />
           <DetailsRow v-if="!isTopic" :label="translateMetadataString('learningActivity')">
             <ContentNodeLearningActivityIcon
-              :learningActivity="node.learning_activities"
+              :learningActivities="node.learning_activities"
               includeText
-              showEachActivityChip
+              showEachActivityIcon
             />
           </DetailsRow>
           <DetailsRow v-if="isExercise" :label="$tr('completion')">
@@ -152,7 +151,6 @@
             v-if="!isTopic"
             :label="translateMetadataString('category')"
             :text="category(node.categories)"
-            notranslate
           />
           <DetailsRow :label="$tr('tags')">
             <div v-if="!sortedTags.length">
@@ -195,8 +193,8 @@
                 <div v-for="prerequisite in previousSteps" :key="prerequisite.id">
                   <ContentNodeLearningActivityIcon
                     v-if="prerequisite.learning_activities"
-                    :learningActivity="prerequisite.learning_activities"
-                    showEachActivityChip
+                    :learningActivities="prerequisite.learning_activities"
+                    showEachActivityIcon
                   />
                   {{ getTitle(prerequisite) }}
                 </div>
@@ -210,8 +208,8 @@
                 <div v-for="postrequisite in nextSteps" :key="postrequisite.id">
                   <ContentNodeLearningActivityIcon
                     v-if="postrequisite.learning_activities"
-                    :learningActivity="postrequisite.learning_activities"
-                    showEachActivityChip
+                    :learningActivities="postrequisite.learning_activities"
+                    showEachActivityIcon
                   />
                   {{ getTitle(postrequisite) }}
                 </div>
@@ -329,7 +327,7 @@
   import sortBy from 'lodash/sortBy';
   import { mapActions, mapGetters } from 'vuex';
   import { camelCase } from 'lodash';
-  import { createIntl } from '@formatjs/intl';
+  import {shouldPolyfill} from '@formatjs/intl-listformat/should-polyfill'
   import { isImportedContent, importedChannelLink } from '../utils';
   import FilePreview from '../views/files/FilePreview';
   import { ContentLevel, Categories, AccessibilityCategories } from '../../shared/constants';
@@ -361,9 +359,36 @@
   import { MasteryModelsNames } from 'shared/leUtils/MasteryModels';
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
 
-  const intl = createIntl({
-    locale: window.languageCode || 'en',
-  });
+  // This is a temporary polyfill work around
+  // vue-intl, which we are using for options such as $formatDate
+  // and $formatTime, had a bug where $formatList was excluded
+  // https://github.com/formatjs/formatjs/issues/3488
+  // it was fixed 11 July 2022, but would require a major version leap
+  // from 3.0.0 to 6.2.9
+  // https://github.com/formatjs/formatjs/releases/tag/vue-intl%406.2.9
+  // in the long term, upgrading would be the better solution, but it
+  // will likely require refacotring and will be a larger project,
+  // outside the scope of this PR
+  async function polyfill(locale) {
+    const unsupportedLocale = shouldPolyfill(locale)
+    // This locale is supported
+    if (!unsupportedLocale) {
+      return
+    }
+    // Load the polyfill 1st BEFORE loading data
+    await import('@formatjs/intl-listformat/polyfill-force')
+    await import(`@formatjs/intl-listformat/locale-data/${unsupportedLocale}`)
+  }
+
+
+  let intl;
+  if (Intl.ListFormat) {
+    intl = new Intl.ListFormat(window.languageCode , { style: 'narrow', type: 'conjunction' });
+  } else  {
+    intl = createIntl({
+      locale: window.languageCode,
+    });
+  }
 
   export default {
     name: 'ResourcePanel',
@@ -435,7 +460,7 @@
         return '-';
       },
       hasLearningActivities() {
-        return Object.keys(this.node.learning_activities).length > 0;
+        return this.node && Object.keys(this.node.learning_activities).length > 0;
       },
       assessmentItems() {
         return this.getAssessmentItems(this.nodeId);
@@ -575,6 +600,7 @@
       },
     },
     mounted() {
+      polyfill(window.languageCode)
       this.loadNode();
       this.tab = this.isExercise ? 'questions' : 'details';
     },
@@ -587,7 +613,7 @@
       },
       metadataListText(ids) {
         const list = ids.map(i => this.translateMetadataString(camelCase(i)));
-        return intl.formatList(list);
+        return intl.format(list);
       },
       level(levels) {
         const ids = Object.keys(levels);
diff --git a/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue b/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue
index 969d57f652..e7df076f43 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue
@@ -1,8 +1,14 @@
 <template>
 
   <span v-if="includeText">
-    <span v-for="activity in activities" :key="activity">
-      <div v-if="chip" :class="small ? 'small-chip' : 'chip'">
+     <!-- if include text is true, use a labeled icon.
+    Currently, for icons containing text, each activity
+     is displayed inidividually if there are multiple -->
+    <span v-for="(activity, index) in activities" :key="index" data-test="labeled-icon">
+      <div v-if="chip"
+        :class="small ? 'small-chip' : 'chip'"
+        :style="{ backgroundColor: $themeTokens.fineLine }"
+      >
         <KLabeledIcon :icon="icon(activity)" :label="text(activity)" />
       </div>
       <div v-else>
@@ -10,21 +16,22 @@
       </div>
     </span>
   </span>
+  <!-- If not text, just use a KIcon -->
   <span v-else>
-    <span v-if="showEachActivityChip">
+    <!-- if multiple learning activities should be displayed with a single icon -->
+    <span v-if="activities.length > 1 && !showEachActivityIcon">
+      <KIcon :icon="icon('multiple')" :aria-label="text('multiple')" data-test="multiple-activities-icon"/>
+    </span>
+    <!--otherwise, display one or more activities individually, each with its own icon -->
+    <span v-else-if="activities.length > 0">
       <KIcon
+        data-test="icon-only"
         v-for="activity in activities"
         :key="activity"
         :icon="icon(activity)"
         :aria-label="text(activity)"
       />
     </span>
-    <span v-else-if="activities.length > 1 && !showEachActivityChip">
-      <KIcon :icon="icon('multiple')" :aria-label="text('multiple')" />
-    </span>
-    <span v-else>
-      <KIcon :icon="icon(activities[0])" :aria-label="text(activities[0])" />
-    </span>
   </span>
 
 </template>
@@ -41,15 +48,11 @@
     mixins: [metadataTranslationMixin],
 
     props: {
-      learningActivity: {
+      learningActivities: {
         type: Object,
         required: false,
       },
-      showEachActivityChip: {
-        type: Boolean,
-        default: false,
-      },
-      isTopic: {
+      showEachActivityIcon: {
         type: Boolean,
         default: false,
       },
@@ -68,8 +71,8 @@
     },
     computed: {
       activities() {
-        if (this.learningActivity) {
-          const ids = Object.keys(this.learningActivity);
+        if (this.learningActivities) {
+          const ids = Object.keys(this.learningActivities);
           return Object.keys(LearningActivities).filter(k => ids.includes(LearningActivities[k]));
         }
         return [];
@@ -77,11 +80,7 @@
     },
     methods: {
       icon(activity) {
-        if (this.isTopic) {
-          return 'topic';
-        } else {
-          return getLearningActivityIcon(this.text(activity));
-        }
+       return getLearningActivityIcon(this.text(activity));
       },
       text(activity) {
         if (this.isTopic) {
@@ -108,7 +107,6 @@
     padding: 10px;
     margin: 4px;
     font-weight: bold;
-    background-color: #dedede;
     border-radius: 4px;
   }
 
@@ -117,7 +115,6 @@
     padding: 2px 4px;
     margin: 2px;
     font-size: 10px;
-    background-color: #dedede;
     border-radius: 4px;
   }
 

From 1fbb387935931031c007be6ea97bba8ad3333615 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Mon, 18 Jul 2022 06:09:46 -0400
Subject: [PATCH 15/20] Revert original Thumbnail.vue, add temporary
 ImageOnlyThumbnail.vue for new work to avoid regressions or collisions

---
 .../components/ContentNodeListItem/index.vue  |  25 +-
 .../frontend/shared/i18n/index.js             |  11 +
 .../shared/views/files/ImageOnlyThumbnail.vue | 239 ++++++++++++++++++
 .../frontend/shared/views/files/Thumbnail.vue | 101 +++++---
 4 files changed, 336 insertions(+), 40 deletions(-)
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/files/ImageOnlyThumbnail.vue

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
index 39c5086c12..ca56f34b8f 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
@@ -28,10 +28,10 @@
                     'py-3': isCompact,
                   }"
                 >
-                  <Thumbnail
+                  <ImageOnlyThumbnail
                     v-bind="thumbnailAttrs"
                     :isTopic="isTopic"
-                    :learningActivity="node.learning_activities"
+                    :learningActivities="node.learning_activities"
                     :compact="isCompact"
                     :isEmpty="node.total_count === 0"
                   />
@@ -118,10 +118,11 @@
                     </span>
                   </VListTileSubTitle>
                   <span v-if="!isCompact">
+
                     <ContentNodeLearningActivityIcon
-                      :isTopic="isTopic"
-                      :learningActivity="node.learning_activities"
-                      showEachActivityChip
+                      v-if="!isTopic"
+                      :learningActivities="node.learning_activities"
+                      showEachActivityIcon
                       includeText
                       small
                       chip
@@ -132,6 +133,7 @@
                         v-for="(key, index) in Object.keys(node.grade_levels)"
                         :key="index"
                         class="small-chip"
+                        :style="{ backgroundColor: $themeTokens.fineLine }"
                       >
                         {{ levels(key) }}
                       </span>
@@ -189,7 +191,7 @@
   import { ContentLevel, Categories } from '../../../shared/constants';
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
   import { RolesNames } from 'shared/leUtils/Roles';
-  import Thumbnail from 'shared/views/files/Thumbnail';
+  import ImageOnlyThumbnail from 'shared/views/files/ImageOnlyThumbnail';
   import IconButton from 'shared/views/IconButton';
   import ToggleText from 'shared/views/ToggleText';
   import ContextMenuCloak from 'shared/views/ContextMenuCloak';
@@ -204,7 +206,7 @@
     components: {
       DraggableHandle,
       ContextMenuCloak,
-      Thumbnail,
+      ImageOnlyThumbnail,
       IconButton,
       ContentNodeValidator,
       ContentNodeChangedIcon,
@@ -304,7 +306,11 @@
           this.isTopic ? this.$emit('topicChevronClick') : this.$emit('infoClick');
         }
       },
-      matchIdToString(ids) {
+      metadataListText(ids) {
+        // an array of values, rather than an internationalized list
+        // is created here (unlike in ResourcePanel), because the values
+        // are used to create one or more individual "chips" to display
+        // rather than a string of text
         return ids.map(i => this.translateMetadataString(camelCase(i))).join(', ');
       },
       category(options) {
@@ -313,7 +319,7 @@
           .sort()
           .filter(k => ids.includes(Categories[k]));
         if (matches && matches.length > 0) {
-          return this.matchIdToString(matches);
+          return this.metadataListText(matches);
         }
         return null;
       },
@@ -458,7 +464,6 @@
     padding: 2px 4px;
     margin: 2px;
     font-size: 10px;
-    background-color: #dedede;
     border-radius: 4px;
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/i18n/index.js b/contentcuration/contentcuration/frontend/shared/i18n/index.js
index 7dd2a57e53..9a7f5b51dc 100644
--- a/contentcuration/contentcuration/frontend/shared/i18n/index.js
+++ b/contentcuration/contentcuration/frontend/shared/i18n/index.js
@@ -3,6 +3,7 @@ import has from 'lodash/has';
 import { languageDirections, defaultLanguage } from 'kolibri-design-system/lib/utils/i18n';
 import importVueIntlLocaleData from 'kolibri-tools/lib/i18n/vue-intl-locale-data';
 import importIntlLocale from 'kolibri-tools/lib/i18n/intl-locale-data';
+import { shouldPolyfill } from '@formatjs/intl-listformat/should-polyfill'
 
 export {
   languageDirections,
@@ -146,6 +147,16 @@ class Translator {
   }
 }
 
+async function polyfill(currentLanguage) {
+  const unsupportedLocale = shouldPolyfill(currentLanguage)
+  // This locale is supported
+  if (!unsupportedLocale) {
+    return
+  }
+  // Load the polyfill 1st BEFORE loading data
+  await import('@formatjs/intl-listformat/polyfill-force')
+  await import(`@formatjs/intl-listformat/locale-data/${unsupportedLocale}`)
+}
 /**
  * Returns a Translator instance.
  * @param {string} nameSpace - The nameSpace of the messages for translation.
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/ImageOnlyThumbnail.vue b/contentcuration/contentcuration/frontend/shared/views/files/ImageOnlyThumbnail.vue
new file mode 100644
index 0000000000..1a4ed68a62
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/files/ImageOnlyThumbnail.vue
@@ -0,0 +1,239 @@
+<template>
+
+  <figure
+    :class="{
+      'thumbnail': !compact,
+      'icon-only': compact,
+      'nothumbnail': !showThumbnail && !compact,
+    }"
+    :style="{ 'max-width': maxWidth }"
+  >
+    <img
+      v-if="showThumbnail && !compact"
+      :src="thumbnailSrc"
+      :alt="$tr('thumbnail', { title: title })"
+      :style="{ objectFit }"
+      class="thumbnail-image"
+    >
+
+    <!-- If printing the default icon, need to set as printable icon -->
+    <div v-else-if="compact || printing">
+      <ContentNodeLearningActivityIcon
+        v-if="learningActivities && !isTopic"
+        :learningActivities="learningActivities"
+      />
+      <KIcon v-else-if="isTopic" :icon="kind" :aria-label="translateConstant(kind)"/>
+    </div>
+    <svg
+      v-else
+      viewBox="0 0 24 24"
+      :aria-label="title"
+      class="nothumbnail-image"
+      :class="$isRTL ? 'rtl-image' : 'ltr-image'"
+    >
+      <text
+        :x="-1"
+        :y="y - 3"
+        :fill="$vuetify.theme.greyBorder"
+        class="material-icons notranslate v-icon"
+      >
+        image
+      </text>
+    </svg>
+
+  </figure>
+
+</template>
+
+<script>
+
+  import { constantsTranslationMixin, printingMixin } from 'shared/mixins';
+  import ContentNodeLearningActivityIcon from 'shared/views/ContentNodeLearningActivityIcon';
+
+  export default {
+    name: 'ImageOnlyThumbnail',
+    components: {
+      ContentNodeLearningActivityIcon,
+    },
+    mixins: [constantsTranslationMixin, printingMixin],
+    props: {
+      src: {
+        type: String,
+        required: false,
+      },
+      encoding: {
+        type: Object,
+        default() {
+          return {};
+        },
+      },
+      learningActivities: {
+        type: Object,
+        required: false,
+      },
+      kind: {
+        type: String,
+        required: false,
+      },
+      isTopic: {
+        type: Boolean,
+        default: false,
+      },
+      title: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      compact: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      maxWidth: {
+        type: [Number, String],
+        default: 'none',
+      },
+    },
+    computed: {
+      y() {
+        switch (this.kind) {
+          case 'exercise':
+            return 28;
+          case 'topic':
+          case 'audio':
+          default:
+            return 26;
+        }
+      },
+      objectFit() {
+        return this.kind ? 'cover' : 'contain';
+      },
+      thumbnailSrc() {
+        return this.encoding && this.encoding.base64 ? this.encoding.base64 : this.src;
+      },
+      showThumbnail() {
+        return this.thumbnailSrc && !this.compact;
+      },
+    },
+    $trs: {
+      thumbnail: '{title} thumbnail',
+    },
+  };
+
+</script>
+
+<style lang="less" scoped>
+
+  @caption-height: 25px;
+
+  .thumbnail {
+    position: relative;
+    /* stylelint-disable-next-line  */
+    padding-bottom: 100% * 9 / 16;
+    border-radius: 3px;
+
+    &.nothumbnail {
+      background-color: var(--v-greyBackground-base);
+    }
+  }
+
+  .icon-only {
+    position: relative;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin: 0 auto;
+  }
+
+  .caption {
+    width: 100%;
+    height: @caption-height;
+    padding: 0 5px;
+    line-height: 11px;
+  }
+
+  .thumbnail-image,
+  .nothumbnail-image {
+    position: absolute;
+    display: block;
+  }
+
+  img.thumbnail-image {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden; // Don't show alt text outside of img boundaries
+
+    .caption + & {
+      height: calc(100% - @caption-height);
+    }
+  }
+
+  @svg-scale: 1.25;
+  @svg-width: 100% * 9 / 16 / @svg-scale;
+  @svg-top: (100% * 9 / 16 / 2) - (@svg-width / 2);
+  svg.thumbnail-image {
+    top: 0;
+    left: 50% - (@svg-width / 4);
+    width: @svg-width / 4;
+    margin: 0 auto;
+    overflow: visible;
+
+    .icon-only & {
+      top: 18%;
+      left: 21%;
+      display: block;
+      width: 55%;
+
+      [dir='rtl'] & {
+        left: -10px;
+      }
+    }
+
+    text {
+      font-size: 1.8em;
+      line-height: 1.8em;
+    }
+  }
+
+  svg.nothumbnail-image {
+    top: 0;
+    width: @svg-width;
+    margin: 0 auto;
+    overflow: visible;
+
+    &.ltr-image {
+      left: 36%;
+    }
+    &.rtl-image {
+      right: 66%;
+    }
+
+    .caption + & {
+      top: calc((@caption-height / 2) + @svg-top);
+    }
+
+    .icon-only & {
+      top: 18%;
+      left: 21%;
+      display: block;
+      width: 55%;
+    }
+
+    text {
+      font-size: 1em;
+      line-height: 1em;
+    }
+  }
+
+  .printable-icon {
+    width: 100%;
+    height: 0;
+    font-size: xx-large;
+    text-align: center;
+    .v-icon {
+      font-size: 300%;
+    }
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue b/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
index e872945a80..aa862f6340 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
@@ -1,15 +1,37 @@
 <template>
 
   <figure
+    class="thumbnail"
     :class="{
-      'thumbnail': !compact,
+      [kind]: compact,
       'icon-only': compact,
       'nothumbnail': !showThumbnail && !compact,
     }"
     :style="{ 'max-width': maxWidth }"
   >
+    <VLayout
+      v-if="kind && !printing && showKind && !compact"
+      tag="figcaption"
+      row
+      align-center
+      class="caption"
+      :class="kind"
+    >
+      <VFlex shrink class="px-1">
+        <Icon
+          v-if="!compact"
+          dark
+          small
+          :aria-label="kindTitle"
+          v-text="icon"
+        />
+      </VFlex>
+      <VFlex shrink>
+        <span class="caption white--text">{{ kindTitle }}</span>
+      </VFlex>
+    </VLayout>
     <img
-      v-if="showThumbnail && !compact"
+      v-if="showThumbnail"
       :src="thumbnailSrc"
       :alt="$tr('thumbnail', { title: title })"
       :style="{ objectFit }"
@@ -17,17 +39,30 @@
     >
 
     <!-- If printing the default icon, need to set as printable icon -->
-    <div v-else-if="compact || printing">
-      <ContentNodeLearningActivityIcon
-        v-if="learningActivity"
-        :learningActivity="learningActivity"
-        :isTopic="isTopic"
-      />
+    <div v-else-if="printing" class="printable-icon">
+      <Icon :color="$vuetify.theme[kind]" capture-as-image>
+        {{ icon }}
+      </Icon>
     </div>
+
+    <!-- Bury icon within SVG so it's more responsive, since font-size scaling is more difficult -->
+    <svg
+      v-else-if="compact"
+      viewBox="0 0 24 24"
+      :aria-label="kindTitle"
+      class="thumbnail-image"
+    >
+      <text
+        :x="-1"
+        :y="y"
+        fill="#ffffff"
+        class="material-icons notranslate v-icon"
+      >{{ icon }}</text>
+    </svg>
     <svg
       v-else
       viewBox="0 0 24 24"
-      :aria-label="title"
+      :aria-label="kindTitle"
       class="nothumbnail-image"
       :class="$isRTL ? 'rtl-image' : 'ltr-image'"
     >
@@ -36,9 +71,7 @@
         :y="y - 3"
         :fill="$vuetify.theme.greyBorder"
         class="material-icons notranslate v-icon"
-      >
-        image
-      </text>
+      >image</text>
     </svg>
 
   </figure>
@@ -48,13 +81,10 @@
 <script>
 
   import { constantsTranslationMixin, printingMixin } from 'shared/mixins';
-  import ContentNodeLearningActivityIcon from 'shared/views/ContentNodeLearningActivityIcon';
+  import { getContentKindIcon } from 'shared/vuetify/icons';
 
   export default {
     name: 'Thumbnail',
-    components: {
-      ContentNodeLearningActivityIcon,
-    },
     mixins: [constantsTranslationMixin, printingMixin],
     props: {
       src: {
@@ -67,17 +97,13 @@
           return {};
         },
       },
-      learningActivity: {
-        type: Object,
-        required: false,
-      },
       kind: {
         type: String,
         required: false,
       },
-      isTopic: {
+      showKind: {
         type: Boolean,
-        default: false,
+        default: true,
       },
       title: {
         type: String,
@@ -89,6 +115,10 @@
         required: false,
         default: false,
       },
+      isEmpty: {
+        type: Boolean,
+        default: false,
+      },
       maxWidth: {
         type: [Number, String],
         default: 'none',
@@ -108,12 +138,21 @@
       objectFit() {
         return this.kind ? 'cover' : 'contain';
       },
+      icon() {
+        return getContentKindIcon(this.kind, this.isEmpty);
+      },
       thumbnailSrc() {
         return this.encoding && this.encoding.base64 ? this.encoding.base64 : this.src;
       },
       showThumbnail() {
         return this.thumbnailSrc && !this.compact;
       },
+      kindTitle() {
+        if (this.kind) {
+          return this.translateConstant(this.kind);
+        }
+        return '';
+      },
     },
     $trs: {
       thumbnail: '{title} thumbnail',
@@ -130,20 +169,22 @@
     position: relative;
     /* stylelint-disable-next-line  */
     padding-bottom: 100% * 9 / 16;
-    border-radius: 3px;
 
+    &.icon-only {
+      padding-top: 0;
+      padding-bottom: 92%;
+      margin: 0 auto;
+      border-radius: 3px;
+    }
+    &:not(.icon-only) {
+      background-color: white;
+      border: 1px solid var(--v-greyBorder-lighten1);
+    }
     &.nothumbnail {
       background-color: var(--v-greyBackground-base);
     }
   }
 
-  .icon-only {
-    position: relative;
-    padding-top: 0;
-    padding-bottom: 0;
-    margin: 0 auto;
-  }
-
   .caption {
     width: 100%;
     height: @caption-height;

From 34effb8da6bc2bbea4ee2fdf9fbd5e19b3bb1725 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Mon, 18 Jul 2022 06:10:43 -0400
Subject: [PATCH 16/20] Add test for new ContentNodeLearningActivityIcon

---
 .../contentNodeLearningActivityIcon.spec.js   | 72 +++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/__tests__/contentNodeLearningActivityIcon.spec.js

diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/contentNodeLearningActivityIcon.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/contentNodeLearningActivityIcon.spec.js
new file mode 100644
index 0000000000..f48e207a1e
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/contentNodeLearningActivityIcon.spec.js
@@ -0,0 +1,72 @@
+import Vue from 'vue';
+import Vuetify from 'vuetify';
+import { mount } from '@vue/test-utils';
+import ContentNodeLearningActivityIcon from '../ContentNodeLearningActivityIcon.vue';
+
+Vue.use(Vuetify);
+
+document.body.setAttribute('data-app', true); // Vuetify prints a warning without this
+
+describe('ContentNodeLearningActivityIcon', () => {
+  let wrapper;
+  // expect(wrapper.find('.v-icon').text()).toContain(kind.icon);
+  describe('labeled icons', () => {
+    wrapper = mount(ContentNodeLearningActivityIcon, {
+      propsData: {
+        learningActivities: {
+          '#j8L0eq3': true,
+        },
+        includeText: true,
+        chip: false,
+      },
+    });
+    it('should display a KLabeledIcon for each activity if includeText is true', () => {
+      expect(wrapper.find('[data-test="labeled-icon"]').exists()).toBe(true);
+      expect(wrapper.find('[data-test="icon-only"]').exists()).toBe(false);
+    });
+  });
+  describe('icon only', () => {
+    it('if there is only one learning activity, it should display the KIcon', () => {
+      wrapper = mount(ContentNodeLearningActivityIcon, {
+        propsData: {
+          learningActivities: {
+            '#j8L0eq3': true,
+          },
+          includeText: false,
+          chip: false,
+        },
+      });
+      expect(wrapper.find('[data-test="icon-only"]').exists()).toBe(true);
+      expect(wrapper.find('[data-test="labeled-icon"]').exists()).toBe(false);
+    });
+    describe('when there is more than one learning activity', () => {
+      it('if showEachActivityIcon is true, it should show a KIcon for each learning activity', () => {
+        wrapper = mount(ContentNodeLearningActivityIcon, {
+          propsData: {
+            learningActivities: {
+              '#j8L0eq3': true,
+              UXADWcXZ: true,
+            },
+            includeText: false,
+            showEachActivityIcon: true,
+          },
+        });
+        expect(wrapper.find('[data-test="multiple-activities-icon"]').exists()).toBe(false);
+        expect(wrapper.find('[data-test="icon-only"]').exists()).toBe(true);
+      });
+    });
+    it('if showEachActivityIcon is false, it should show only the multipleLearningActivity KIcon', () => {
+      wrapper = mount(ContentNodeLearningActivityIcon, {
+        propsData: {
+          learningActivities: {
+            '#j8L0eq3': true,
+            UXADWcXZ: true,
+          },
+          includeText: false,
+          showEachActivityIcon: false,
+        },
+      });
+      expect(wrapper.find('[data-test="multiple-activities-icon"]').exists()).toBe(true);
+    });
+  });
+});

From df352dc3e0c2b313e9eb9c2d00a874a7ebbfc599 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Tue, 2 Aug 2022 16:50:21 -0400
Subject: [PATCH 17/20] Remove Intl formatting polyfill, since the browsers we
 support for studio do not require polyfillin g

---
 .../channelEdit/components/ResourcePanel.vue  | 33 +------------------
 .../frontend/shared/i18n/index.js             | 11 -------
 2 files changed, 1 insertion(+), 43 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
index 063da10a81..55960a0a25 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
@@ -327,7 +327,6 @@
   import sortBy from 'lodash/sortBy';
   import { mapActions, mapGetters } from 'vuex';
   import { camelCase } from 'lodash';
-  import {shouldPolyfill} from '@formatjs/intl-listformat/should-polyfill'
   import { isImportedContent, importedChannelLink } from '../utils';
   import FilePreview from '../views/files/FilePreview';
   import { ContentLevel, Categories, AccessibilityCategories } from '../../shared/constants';
@@ -359,36 +358,7 @@
   import { MasteryModelsNames } from 'shared/leUtils/MasteryModels';
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
 
-  // This is a temporary polyfill work around
-  // vue-intl, which we are using for options such as $formatDate
-  // and $formatTime, had a bug where $formatList was excluded
-  // https://github.com/formatjs/formatjs/issues/3488
-  // it was fixed 11 July 2022, but would require a major version leap
-  // from 3.0.0 to 6.2.9
-  // https://github.com/formatjs/formatjs/releases/tag/vue-intl%406.2.9
-  // in the long term, upgrading would be the better solution, but it
-  // will likely require refacotring and will be a larger project,
-  // outside the scope of this PR
-  async function polyfill(locale) {
-    const unsupportedLocale = shouldPolyfill(locale)
-    // This locale is supported
-    if (!unsupportedLocale) {
-      return
-    }
-    // Load the polyfill 1st BEFORE loading data
-    await import('@formatjs/intl-listformat/polyfill-force')
-    await import(`@formatjs/intl-listformat/locale-data/${unsupportedLocale}`)
-  }
-
-
-  let intl;
-  if (Intl.ListFormat) {
-    intl = new Intl.ListFormat(window.languageCode , { style: 'narrow', type: 'conjunction' });
-  } else  {
-    intl = createIntl({
-      locale: window.languageCode,
-    });
-  }
+  const intl = new Intl.ListFormat(window.languageCode, { style: 'narrow', type: 'conjunction' });
 
   export default {
     name: 'ResourcePanel',
@@ -600,7 +570,6 @@
       },
     },
     mounted() {
-      polyfill(window.languageCode)
       this.loadNode();
       this.tab = this.isExercise ? 'questions' : 'details';
     },
diff --git a/contentcuration/contentcuration/frontend/shared/i18n/index.js b/contentcuration/contentcuration/frontend/shared/i18n/index.js
index 9a7f5b51dc..7dd2a57e53 100644
--- a/contentcuration/contentcuration/frontend/shared/i18n/index.js
+++ b/contentcuration/contentcuration/frontend/shared/i18n/index.js
@@ -3,7 +3,6 @@ import has from 'lodash/has';
 import { languageDirections, defaultLanguage } from 'kolibri-design-system/lib/utils/i18n';
 import importVueIntlLocaleData from 'kolibri-tools/lib/i18n/vue-intl-locale-data';
 import importIntlLocale from 'kolibri-tools/lib/i18n/intl-locale-data';
-import { shouldPolyfill } from '@formatjs/intl-listformat/should-polyfill'
 
 export {
   languageDirections,
@@ -147,16 +146,6 @@ class Translator {
   }
 }
 
-async function polyfill(currentLanguage) {
-  const unsupportedLocale = shouldPolyfill(currentLanguage)
-  // This locale is supported
-  if (!unsupportedLocale) {
-    return
-  }
-  // Load the polyfill 1st BEFORE loading data
-  await import('@formatjs/intl-listformat/polyfill-force')
-  await import(`@formatjs/intl-listformat/locale-data/${unsupportedLocale}`)
-}
 /**
  * Returns a Translator instance.
  * @param {string} nameSpace - The nameSpace of the messages for translation.

From f4547986b82e0c15bbbedc85f5e9162daaa9d5d4 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Tue, 2 Aug 2022 17:09:36 -0400
Subject: [PATCH 18/20] Fix linting errors

---
 .../views/ContentNodeLearningActivityIcon.vue     | 15 ++++++++++-----
 .../shared/views/files/ImageOnlyThumbnail.vue     |  2 +-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue b/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue
index e7df076f43..7bd25c7e2c 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue
@@ -1,11 +1,12 @@
 <template>
 
   <span v-if="includeText">
-     <!-- if include text is true, use a labeled icon.
+    <!-- if include text is true, use a labeled icon.
     Currently, for icons containing text, each activity
      is displayed inidividually if there are multiple -->
     <span v-for="(activity, index) in activities" :key="index" data-test="labeled-icon">
-      <div v-if="chip"
+      <div
+        v-if="chip"
         :class="small ? 'small-chip' : 'chip'"
         :style="{ backgroundColor: $themeTokens.fineLine }"
       >
@@ -20,14 +21,18 @@
   <span v-else>
     <!-- if multiple learning activities should be displayed with a single icon -->
     <span v-if="activities.length > 1 && !showEachActivityIcon">
-      <KIcon :icon="icon('multiple')" :aria-label="text('multiple')" data-test="multiple-activities-icon"/>
+      <KIcon
+        :icon="icon('multiple')"
+        :aria-label="text('multiple')"
+        data-test="multiple-activities-icon"
+      />
     </span>
     <!--otherwise, display one or more activities individually, each with its own icon -->
     <span v-else-if="activities.length > 0">
       <KIcon
-        data-test="icon-only"
         v-for="activity in activities"
         :key="activity"
+        data-test="icon-only"
         :icon="icon(activity)"
         :aria-label="text(activity)"
       />
@@ -80,7 +85,7 @@
     },
     methods: {
       icon(activity) {
-       return getLearningActivityIcon(this.text(activity));
+        return getLearningActivityIcon(this.text(activity));
       },
       text(activity) {
         if (this.isTopic) {
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/ImageOnlyThumbnail.vue b/contentcuration/contentcuration/frontend/shared/views/files/ImageOnlyThumbnail.vue
index 1a4ed68a62..c761c24f5f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/ImageOnlyThumbnail.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/ImageOnlyThumbnail.vue
@@ -22,7 +22,7 @@
         v-if="learningActivities && !isTopic"
         :learningActivities="learningActivities"
       />
-      <KIcon v-else-if="isTopic" :icon="kind" :aria-label="translateConstant(kind)"/>
+      <KIcon v-else-if="isTopic" :icon="kind" :aria-label="translateConstant(kind)" />
     </div>
     <svg
       v-else

From f877b263a172f39a26dec95bf06b6dac4d7dd691 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Tue, 2 Aug 2022 17:55:38 -0400
Subject: [PATCH 19/20] Add Intl.ListFormat constructor to function where it is
 called, rather than stand alone

---
 .../frontend/channelEdit/components/ResourcePanel.vue     | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
index 55960a0a25..529a56af20 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
@@ -358,8 +358,6 @@
   import { MasteryModelsNames } from 'shared/leUtils/MasteryModels';
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
 
-  const intl = new Intl.ListFormat(window.languageCode, { style: 'narrow', type: 'conjunction' });
-
   export default {
     name: 'ResourcePanel',
     components: {
@@ -582,7 +580,11 @@
       },
       metadataListText(ids) {
         const list = ids.map(i => this.translateMetadataString(camelCase(i)));
-        return intl.format(list);
+        const formatter = Intl.ListFormat(window.languageCode, {
+          style: 'narrow',
+          type: 'conjunction',
+        });
+        return formatter.format(list);
       },
       level(levels) {
         const ids = Object.keys(levels);

From 6443cf87ff37bca32582bcd6d5185d3d26a7523f Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Wed, 3 Aug 2022 07:51:23 -0400
Subject: [PATCH 20/20] remove formatjs dependencies that were added for
 intl.listformat polyfilling

---
 package.json |  1 -
 yarn.lock    | 85 ----------------------------------------------------
 2 files changed, 86 deletions(-)

diff --git a/package.json b/package.json
index b9ea348b05..c1ff92bb9c 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,6 @@
   },
   "homepage": "https://github.com/learningequality/studio#readme",
   "dependencies": {
-    "@formatjs/intl": "^2.3.1",
     "@sentry/browser": "^5.9.1",
     "@toast-ui/editor": "^2.3.1",
     "ajv": "^8.9.0",
diff --git a/yarn.lock b/yarn.lock
index 6140f0401f..4be8cf2398 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1780,76 +1780,6 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
-"@formatjs/ecma402-abstract@1.11.8":
-  version "1.11.8"
-  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.8.tgz#f4015dfb6a837369d94c6ba82455c609e45bce20"
-  integrity sha512-fgLqyWlwmTEuqV/TSLEL/t9JOmHNLFvCdgzXB0jc2w+WOItPCOJ1T0eyN6fQBQKRPfSqqNlu+kWj7ijcOVTVVQ==
-  dependencies:
-    "@formatjs/intl-localematcher" "0.2.28"
-    tslib "2.4.0"
-
-"@formatjs/fast-memoize@1.2.4":
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-1.2.4.tgz#4b5ddce9eb7803ff0bd4052387672151a8b7f8a0"
-  integrity sha512-9ARYoLR8AEzXvj2nYrOVHY/h1dDMDWGTnKDLXSISF1uoPakSmfcZuSqjiqZX2wRkEUimPxdwTu/agyozBtZRHA==
-  dependencies:
-    tslib "2.4.0"
-
-"@formatjs/icu-messageformat-parser@2.1.4":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.4.tgz#f1e32b9937f151c1dd5c30536ce3e920b7f23813"
-  integrity sha512-3PqMvKWV1oyok0BuiXUAHIaotdhdTJw6OICqCZbfUgKT+ZRwRWO4IlCgvXJeCITaKS5p+PY0XXKjf/vUyIpWjQ==
-  dependencies:
-    "@formatjs/ecma402-abstract" "1.11.8"
-    "@formatjs/icu-skeleton-parser" "1.3.10"
-    tslib "2.4.0"
-
-"@formatjs/icu-skeleton-parser@1.3.10":
-  version "1.3.10"
-  resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.10.tgz#2f504e56ac80137ee2baad55c7fa0b5dc7f4e4df"
-  integrity sha512-kXJmtLDqFF5aLTf8IxdJXnhrIX1Qb4Qp3a9jqRecGDYfzOa9hMhi9U0nKyhrJJ4cXxBzptcgb+LWkyeHL6nlBQ==
-  dependencies:
-    "@formatjs/ecma402-abstract" "1.11.8"
-    tslib "2.4.0"
-
-"@formatjs/intl-displaynames@6.0.3":
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-6.0.3.tgz#e648a91bccd9fb21519090eaafece3be9d15f480"
-  integrity sha512-Mxh6W1VOlmiEvO/QPBrBQHlXrIn5VxjJWyyEI0V7ZHNGl0ee8AjSlq7vIJG8GodRJqGUuutF6N3OB/6qFv0YWg==
-  dependencies:
-    "@formatjs/ecma402-abstract" "1.11.8"
-    "@formatjs/intl-localematcher" "0.2.28"
-    tslib "2.4.0"
-
-"@formatjs/intl-listformat@7.0.3":
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-7.0.3.tgz#8627969b77849559d148bc9536d0884c2271e6de"
-  integrity sha512-ampNLRGZl/08epHa3i5sRmcHGLneC6JrknexbbgnexYFNSmJ6AbL/dCzgrQzw2Efl+5AZK7UbNFxcDYY3RePvw==
-  dependencies:
-    "@formatjs/ecma402-abstract" "1.11.8"
-    "@formatjs/intl-localematcher" "0.2.28"
-    tslib "2.4.0"
-
-"@formatjs/intl-localematcher@0.2.28":
-  version "0.2.28"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.2.28.tgz#412ea7fefbfc7ed33cd6b43aa304fc14d816e564"
-  integrity sha512-FLsc6Gifs1np/8HnCn/7Q+lHMmenrD5fuDhRT82yj0gi9O19kfaFwjQUw1gZsyILuRyT93GuzdifHj7TKRhBcw==
-  dependencies:
-    tslib "2.4.0"
-
-"@formatjs/intl@^2.3.1":
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl/-/intl-2.3.1.tgz#eccd6d03e4db18c256181f235b1d0a7f7aaebf5a"
-  integrity sha512-f06qZ/ukpeN24gc01qFjh3P+r3FU/ikY4yG+fDJu6dPNvpUQzDy98lYogA1dr6ig2UtrnoEk3xncyFPL1e9cZw==
-  dependencies:
-    "@formatjs/ecma402-abstract" "1.11.8"
-    "@formatjs/fast-memoize" "1.2.4"
-    "@formatjs/icu-messageformat-parser" "2.1.4"
-    "@formatjs/intl-displaynames" "6.0.3"
-    "@formatjs/intl-listformat" "7.0.3"
-    intl-messageformat "10.1.1"
-    tslib "2.4.0"
-
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -10384,16 +10314,6 @@ intl-messageformat@1.3.0, intl-messageformat@^1.3.0:
   dependencies:
     intl-messageformat-parser "1.2.0"
 
-intl-messageformat@10.1.1:
-  version "10.1.1"
-  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-10.1.1.tgz#226767e7921fa86cef2cbe4a13911050716720bc"
-  integrity sha512-FeJne2oooYW6shLPbrqyjRX6hTELVrQ90Dn88z7NomLk/xZBCLxLPAkgaYaTQJBRBV78nZ933d8APHHkTQrD9Q==
-  dependencies:
-    "@formatjs/ecma402-abstract" "1.11.8"
-    "@formatjs/fast-memoize" "1.2.4"
-    "@formatjs/icu-messageformat-parser" "2.1.4"
-    tslib "2.4.0"
-
 intl-relativeformat@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/intl-relativeformat/-/intl-relativeformat-1.3.0.tgz#893dc7076fccd380cf091a2300c380fa57ace45b"
@@ -19190,11 +19110,6 @@ tsconfig@^7.0.0:
     strip-bom "^3.0.0"
     strip-json-comments "^2.0.0"
 
-tslib@2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
-  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
-
 tslib@^1.10.0, tslib@^1.9.0, tslib@^1.9.3:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"