From 927793a38f3142fed9b999d6870ba023cac0d0f5 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Fri, 1 Mar 2024 13:47:16 -0500
Subject: [PATCH 01/11] Add multi support for expandable select

---
 .../components/edit/DetailsTabView.vue        |  2 +-
 .../contentNodeFields}/LevelsOptions.vue      | 19 ++++--
 .../shared/views/form/ExpandableSelect.vue    | 60 ++++++++++++++++---
 3 files changed, 68 insertions(+), 13 deletions(-)
 rename contentcuration/contentcuration/frontend/{channelEdit/components/edit => shared/views/contentNodeFields}/LevelsOptions.vue (82%)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
index 5586573aa5..8107d800a8 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
@@ -376,7 +376,7 @@
   import SubtitlesList from '../../views/files/supplementaryLists/SubtitlesList';
   import { isImportedContent, isDisableSourceEdits, importedChannelLink } from '../../utils';
   import AccessibilityOptions from './AccessibilityOptions.vue';
-  import LevelsOptions from './LevelsOptions.vue';
+  import LevelsOptions from 'shared/views/contentNodeFields/LevelsOptions';
   import ResourcesNeededOptions from './ResourcesNeededOptions.vue';
   import LearningActivityOptions from './LearningActivityOptions.vue';
   import CategoryOptions from './CategoryOptions.vue';
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/LevelsOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
similarity index 82%
rename from contentcuration/contentcuration/frontend/channelEdit/components/edit/LevelsOptions.vue
rename to contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
index 9dea958af7..e41d0a91cf 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/LevelsOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <DropdownWrapper>
+  <!-- <DropdownWrapper>
     <template #default="{ attach, menuProps }">
       <VSelect
         ref="level"
@@ -16,8 +16,15 @@
         :attach="attach"
       />
     </template>
-  </DropdownWrapper>
+  </DropdownWrapper> -->
 
+  <ExpandableSelect
+    v-model="level"
+    multiple
+    :expanded="expanded"
+    :options="levels"
+    :label="translateMetadataString('level')"
+  />
 </template>
 
 <script>
@@ -25,17 +32,21 @@
   import camelCase from 'lodash/camelCase';
   import { ContentLevels } from 'shared/constants';
   import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
-  import DropdownWrapper from 'shared/views/form/DropdownWrapper';
+  import ExpandableSelect from 'shared/views/form/ExpandableSelect';
 
   export default {
     name: 'LevelsOptions',
-    components: { DropdownWrapper },
+    components: { ExpandableSelect },
     mixins: [constantsTranslationMixin, metadataTranslationMixin],
     props: {
       value: {
         type: Array,
         default: () => [],
       },
+      expanded: {
+        type: Boolean,
+        default: false,
+      },
     },
     computed: {
       level: {
diff --git a/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue b/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue
index 266f25e7a8..2b68706c15 100644
--- a/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue
@@ -17,6 +17,10 @@
         :rules="rules"
         :menu-props="menuProps"
         :attach="attach"
+        :chips="multiple"
+        :multiple="multiple"
+        :clearable="multiple"
+        :deletableChips="multiple"
         @focus="$emit('focus')"
       />
     </template>
@@ -25,16 +29,33 @@
     v-else
     :class="disabled ? 'disabled' : ''"
   >
-    <h5>
+    <h5 v-if="!hideLabel">
       {{ label }}
     </h5>
-    <KRadioButton
-      v-for="duration in options"
-      :key="duration.value"
-      v-model="valueModel"
-      :buttonValue="duration.value"
-      :label="duration.text"
-    />
+    <slot name="prepend-options"/>
+    <div :style="optionsListStyle">
+      <template v-if="!multiple">
+        <KRadioButton
+          v-for="option in options"
+          :key="option.value"
+          v-model="valueModel"
+          :buttonValue="option.value"
+          :label="option.text"
+        />
+      </template>
+      <template v-else>
+        <KCheckbox
+          v-for="option in options"
+          :key="option.value"
+          :label="option.text"
+          :checked="isCheckboxSelected(option.value)"
+          :indeterminate="isCheckboxIndeterminate(option.value)"
+          data-test="option-checkbox"
+          @change="value => setOption(option.value, value)"
+        />
+      </template>
+    </div>
+
   </div>
 
 </template>
@@ -67,6 +88,11 @@
         required: false,
         default: '',
       },
+      hideLabel: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
       rules: {
         type: Array,
         required: false,
@@ -84,6 +110,10 @@
         type: Boolean,
         default: false,
       },
+      multiple: {
+        type: Boolean,
+        default: false,
+      },
     },
     computed: {
       valueModel: {
@@ -104,6 +134,20 @@
           return getInvalidText(this.rules, this.valueModel);
         }
       },
+      isCheckboxSelected(value) {
+        return this.valueModel[value] === true;
+      },
+      isCheckboxIndeterminate(value) {
+        return this.valueModel[value] !== true && this.valueModel[value] !== false;
+      },
+      setOption(optionId, value) {
+        if (value) {
+          this.valueModel = { ...this.valueModel, [optionId]: true };
+        } else {
+          const newValueModel = { ...this.valueModel };
+          delete newValueModel[optionId];
+        }
+      },
     },
   };
 

From 794941d63e5d66cee5f3f73c9d10a4bc1992e2a9 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Fri, 1 Mar 2024 16:07:18 -0500
Subject: [PATCH 02/11] Add shared Category Options

---
 .../QuickEditModal/EditBooleanMapModal.vue    |  27 +-
 .../QuickEditModal/EditCategoriesModal.vue    |  12 +-
 .../QuickEditModal/EditLevelsModal.vue        |   7 +-
 .../components/edit/CategoryOptions.vue       | 221 -----------
 .../components/edit/DetailsTabView.vue        |   2 +-
 .../contentNodeFields/CategoryOptions.vue     | 369 ++++++++++++++++++
 .../views/contentNodeFields/LevelsOptions.vue |  41 +-
 .../shared/views/form/ExpandableSelect.vue    |   5 +-
 8 files changed, 427 insertions(+), 257 deletions(-)
 delete mode 100644 contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
index cd0db25dcd..c5ca200909 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
@@ -11,7 +11,26 @@
     <p data-test="resources-selected-message">
       {{ $tr('resourcesSelected', { count: nodeIds.length }) }}
     </p>
-    <VAutocomplete
+    <component
+      v-model="selectedValues"
+      expanded
+      hideLabel
+      :is="inputComponent"
+      :nodeIds="nodeIds"
+    >
+      <template #prependOptions v-if="isDescendantsUpdatable && isTopicSelected">
+        <KCheckbox
+          :checked="updateDescendants"
+          data-test="update-descendants-checkbox"
+          :label="$tr('updateDescendantsCheckbox')"
+          @change="(value) => { updateDescendants = value }"
+        />
+        <hr
+          :style="dividerStyle"
+        >
+      </template>
+    </component>
+    <!-- <VAutocomplete
       v-if="showAutocomplete"
       :value="autocompleteValues"
       :items="autocompleteOptions"
@@ -78,7 +97,7 @@
     </div>
     <span v-if="error" class="red--text">
       {{ error }}
-    </span>
+    </span> -->
   </KModal>
 
 </template>
@@ -158,6 +177,10 @@
         type: Array,
         default: () => [],
       },
+      inputComponent: {
+        type: Object,
+        required: true,
+      },
     },
     data() {
       return {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCategoriesModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCategoriesModal.vue
index 2dfa876768..0556fe7d85 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCategoriesModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCategoriesModal.vue
@@ -11,10 +11,7 @@
     :autocompleteLabel="$tr('selectCategory')"
     :emptyText="$tr('emptyCategoriesSearch')"
     :confirmationMessage="$tr('editedCategories', { count: nodeIds.length })"
-    :optionsListStyle="{
-      height: '250px',
-      overflowY: 'auto',
-    }"
+    :inputComponent="CategoryOptionsComponent"
     @close="close"
   />
 
@@ -27,10 +24,12 @@
   import EditBooleanMapModal from './EditBooleanMapModal.vue';
   import { metadataTranslationMixin } from 'shared/mixins';
   import { getSortedCategories } from 'shared/utils/helpers';
+  import CategoryOptions from 'shared/views/contentNodeFields/CategoryOptions';
 
   export default {
     name: 'EditCategoriesModal',
     components: {
+      CategoryOptions,
       EditBooleanMapModal,
     },
     mixins: [metadataTranslationMixin],
@@ -52,6 +51,11 @@
         label: this.translateMetadataString(camelCase(category)),
       }));
     },
+    computed: {
+      CategoryOptionsComponent() {
+        return CategoryOptions;
+      },
+    },
     methods: {
       close() {
         this.$emit('close');
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLevelsModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLevelsModal.vue
index 092b854a93..ba6f6cf2e9 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLevelsModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLevelsModal.vue
@@ -5,7 +5,7 @@
     isDescendantsUpdatable
     :title="$tr('editLevelsTitle')"
     :nodeIds="nodeIds"
-    :options="levelsOptions"
+    :inputComponent="LevelsOptionsComponent"
     :confirmationMessage="$tr('editedLevels', { count: nodeIds.length })"
     @close="close"
   />
@@ -19,11 +19,13 @@
   import EditBooleanMapModal from './EditBooleanMapModal';
   import { ContentLevels } from 'shared/constants';
   import { metadataTranslationMixin } from 'shared/mixins';
+  import LevelsOptions from 'shared/views/contentNodeFields/LevelsOptions';
 
   export default {
     name: 'EditLevelsModal',
     components: {
       EditBooleanMapModal,
+      LevelsOptions,
     },
     mixins: [metadataTranslationMixin],
     props: {
@@ -44,6 +46,9 @@
           value,
         }));
       },
+      LevelsOptionsComponent() {
+        return LevelsOptions;
+      },
     },
     methods: {
       close() {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
deleted file mode 100644
index b14c11a839..0000000000
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
+++ /dev/null
@@ -1,221 +0,0 @@
-<template>
-
-  <DropdownWrapper>
-    <template #default="{ attach, menuProps }">
-      <VAutocomplete
-        :value="selected"
-        :items="categoriesList"
-        :searchInput.sync="categoryText"
-        :label="translateMetadataString('category')"
-        box
-        clearable
-        chips
-        deletableChips
-        multiple
-        item-value="value"
-        item-text="text"
-        :menu-props="{ ...menuProps, zIndex: 4 }"
-        :attach="attach"
-        @click:clear="$nextTick(() => removeAll())"
-      >
-        <template #selection="data">
-          <VTooltip bottom lazy>
-            <template #activator="{ on, attrs }">
-              <VChip v-bind="attrs" close v-on="on" @input="remove(data.item.value)">
-                {{ data.item.text }}
-              </VChip>
-            </template>
-            <div>
-              <div>{{ tooltipHelper(data.item.value) }}</div>
-            </div>
-          </VTooltip>
-        </template>
-
-        <template #no-data>
-          <VListTile v-if="categoryText && categoryText.trim()">
-            <VListTileContent>
-              <VListTileTitle>
-                {{ $tr('noCategoryFoundText', { text: categoryText.trim() }) }}
-              </VListTileTitle>
-            </VListTileContent>
-          </VListTile>
-        </template>
-
-        <template #item="{ item }">
-          <VListTile
-            :value="isSelected(item.value)"
-            :class="{ parentOption: !item.value.includes('.') }"
-            @mousedown.prevent
-            @click="() => !isSelected(item.value) ? add(item.value) : remove(item.value)"
-          >
-            <KCheckbox
-              :checked="isSelected(item.value)"
-              :label="item.text"
-              :value="item.value"
-              style="margin-top: 10px"
-              :style="treeItemStyle(item)"
-              :ripple="false"
-            />
-          </VListTile>
-        </template>
-      </VAutocomplete>
-    </template>
-  </DropdownWrapper>
-
-</template>
-
-<script>
-
-  import camelCase from 'lodash/camelCase';
-  import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
-  import { Categories, CategoriesLookup } from 'shared/constants';
-  import DropdownWrapper from 'shared/views/form/DropdownWrapper';
-
-  const availablePaths = {};
-  const categoriesObj = {};
-  const dropdown = [];
-
-  Object.assign(availablePaths, CategoriesLookup);
-
-  /*
-   * This is used to create the categories object from which the dropdown list is generated
-   * and is the same as this to make sure the order in Kolibri and Studio are the same:
-   * https://github.com/learningequality/kolibri/blob/develop/kolibri/plugins/learn/assets/
-   *   src/views/CategorySearchModal/CategorySearchOptions.vue#L73
-   */
-  for (const subjectKey of Object.entries(Categories)
-    .sort((a, b) => a[1].length - b[1].length)
-    .map(a => a[0])) {
-    const ids = Categories[subjectKey].split('.');
-
-    let path = '';
-    let nested = categoriesObj;
-    for (const fragment of ids) {
-      path += fragment;
-      if (availablePaths[path]) {
-        const nestedKey = CategoriesLookup[path];
-        if (!nested[nestedKey]) {
-          nested[nestedKey] = {
-            value: path,
-            nested: {},
-          };
-        }
-        nested = nested[nestedKey].nested;
-        path += '.';
-      } else {
-        break;
-      }
-    }
-  }
-
-  const flattenCategories = obj => {
-    Object.keys(obj).forEach(key => {
-      if (key !== 'value' && key !== 'nested') {
-        dropdown.push({
-          text: key,
-          value: obj[key]['value'],
-        });
-      }
-      if (typeof obj[key] === 'object') {
-        flattenCategories(obj[key]);
-      }
-    });
-    return dropdown;
-  };
-
-  flattenCategories(categoriesObj);
-
-  export default {
-    name: 'CategoryOptions',
-    components: { DropdownWrapper },
-    mixins: [constantsTranslationMixin, metadataTranslationMixin],
-    props: {
-      value: {
-        type: Array,
-        default: () => [],
-      },
-    },
-    data() {
-      return {
-        categoryText: null,
-      };
-    },
-    computed: {
-      categoriesList() {
-        return dropdown.map(category => {
-          return {
-            ...category,
-            text: this.translateMetadataString(camelCase(category.text)),
-            level: this.findDepth(Categories[category.text]),
-          };
-        });
-      },
-      selected: {
-        get() {
-          return this.value;
-        },
-        set(value) {
-          this.$emit('input', value);
-        },
-      },
-      nested() {
-        return !this.categoryText;
-      },
-      isSelected() {
-        return value => this.selected.some(v => v.startsWith(value));
-      },
-    },
-    methods: {
-      treeItemStyle(item) {
-        const rule = this.$isRTL ? 'paddingRight' : 'paddingLeft';
-        return this.nested ? { [rule]: `${item.level * 24}px` } : {};
-      },
-      add(value) {
-        this.selected = [...this.selected, value];
-      },
-      remove(value) {
-        this.selected = this.selected.filter(i => !i.startsWith(value));
-      },
-      removeAll() {
-        this.selected = [];
-      },
-      tooltipHelper(id) {
-        return this.displayFamilyTree(dropdown, id)
-          .map(node => this.translateMetadataString(camelCase(node.text)))
-          .join(' - ');
-      },
-      findDepth(val) {
-        return val.split('.').length - 1;
-      },
-      displayFamilyTree(nodes, id) {
-        return nodes.filter(node => this.findFamilyTreeIds(id).includes(node.value));
-      },
-      /**
-       * @param {String} id The id of the selected category
-       * @returns {Array} An array of all ids of the family beginning with the selected category
-       */
-      findFamilyTreeIds(id) {
-        const family = [];
-        let familyMember = id;
-        while (familyMember) {
-          family.push(familyMember);
-          familyMember = familyMember.includes('.')
-            ? familyMember.substring(0, familyMember.lastIndexOf('.'))
-            : null;
-        }
-        return family;
-      },
-    },
-    $trs: {
-      noCategoryFoundText: 'Category not found',
-    },
-  };
-
-</script>
-<style lang="less" scoped>
-
-  .parentOption:not(:first-child) {
-    border-top: 1px solid rgba(0, 0, 0, 0.12);
-  }
-
-</style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
index 8107d800a8..00c895911f 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
@@ -379,7 +379,7 @@
   import LevelsOptions from 'shared/views/contentNodeFields/LevelsOptions';
   import ResourcesNeededOptions from './ResourcesNeededOptions.vue';
   import LearningActivityOptions from './LearningActivityOptions.vue';
-  import CategoryOptions from './CategoryOptions.vue';
+  import CategoryOptions from 'shared/views/contentNodeFields/CategoryOptions';
   import CompletionOptions from 'shared/views/contentNodeFields/CompletionOptions';
   import {
     getTitleValidators,
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
new file mode 100644
index 0000000000..95e0b42b76
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
@@ -0,0 +1,369 @@
+<template>
+
+  <div>
+    <DropdownWrapper>
+      <template #default="{ attach, menuProps }">
+        <VAutocomplete
+          :value="autocompleteValues"
+          :items="autocompleteOptions"
+          :searchInput.sync="categoryText"
+          :label="translateMetadataString('category')"
+          box
+          clearable
+          chips
+          deletableChips
+          multiple
+          item-value="value"
+          item-text="text"
+          :menu-props="{ ...menuProps, zIndex: 4 }"
+          :attach="attach"
+          @click:clear="$nextTick(() => removeAll())"
+        >
+          <template #selection="data">
+            <VTooltip bottom lazy>
+              <template #activator="{ on, attrs }">
+                <VChip v-bind="attrs" close v-on="on" @input="remove(data.item.value)">
+                  {{ data.item.text }}
+                </VChip>
+              </template>
+              <div>
+                <div>{{ tooltipHelper(data.item.value) }}</div>
+              </div>
+            </VTooltip>
+          </template>
+
+          <template #no-data>
+            <VListTile v-if="categoryText && categoryText.trim()">
+              <VListTileContent>
+                <VListTileTitle>
+                  {{ $tr('noCategoryFoundText', { text: categoryText.trim() }) }}
+                </VListTileTitle>
+              </VListTileContent>
+            </VListTile>
+          </template>
+
+          <template #item="{ item }">
+            <VListTile
+              :value="isSelected(item.value)"
+              :class="{ parentOption: !item.value.includes('.') }"
+              @mousedown.prevent
+              @click="onChange(item.value)"
+            >
+              <KCheckbox
+                :checked="isSelected(item.value)"
+                :label="item.text"
+                :value="item.value"
+                style="margin-top: 10px"
+                :style="treeItemStyle(item)"
+                :ripple="false"
+              />
+            </VListTile>
+          </template>
+        </VAutocomplete>
+      </template>
+    </DropdownWrapper>
+
+    <slot name="prependOptions" />
+    
+    <div class="checkbox-list-wrapper" v-if="expanded">
+      <KCheckbox
+        v-for="option in filteredCategories"
+        :key="option.value"
+        data-test="option-checkbox"
+        :label="option.text"
+        :style="treeItemStyle(option)"
+        :checked="isSelected(option.value)"
+        :indeterminate="isCheckboxIndeterminate(option.value)"
+        @change="onChange(option.value)"
+      />
+      <p
+        v-if="!filteredCategories.length"
+        :style="{ color: $themeTokens.annotation }"
+      >
+        {{ emptyText || $tr('emptyOptionsSearch') }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+
+  import camelCase from 'lodash/camelCase';
+  import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
+  import { Categories, CategoriesLookup } from 'shared/constants';
+  import DropdownWrapper from 'shared/views/form/DropdownWrapper';
+
+  const availablePaths = {};
+  const categoriesObj = {};
+  const dropdown = [];
+
+  Object.assign(availablePaths, CategoriesLookup);
+
+  /*
+   * This is used to create the categories object from which the dropdown list is generated
+   * and is the same as this to make sure the order in Kolibri and Studio are the same:
+   * https://github.com/learningequality/kolibri/blob/develop/kolibri/plugins/learn/assets/
+   *   src/views/CategorySearchModal/CategorySearchOptions.vue#L73
+   */
+  for (const subjectKey of Object.entries(Categories)
+    .sort((a, b) => a[1].length - b[1].length)
+    .map(a => a[0])) {
+    const ids = Categories[subjectKey].split('.');
+
+    let path = '';
+    let nested = categoriesObj;
+    for (const fragment of ids) {
+      path += fragment;
+      if (availablePaths[path]) {
+        const nestedKey = CategoriesLookup[path];
+        if (!nested[nestedKey]) {
+          nested[nestedKey] = {
+            value: path,
+            nested: {},
+          };
+        }
+        nested = nested[nestedKey].nested;
+        path += '.';
+      } else {
+        break;
+      }
+    }
+  }
+
+  const flattenCategories = obj => {
+    Object.keys(obj).forEach(key => {
+      if (key !== 'value' && key !== 'nested') {
+        dropdown.push({
+          text: key,
+          value: obj[key]['value'],
+        });
+      }
+      if (typeof obj[key] === 'object') {
+        flattenCategories(obj[key]);
+      }
+    });
+    return dropdown;
+  };
+
+  flattenCategories(categoriesObj);
+
+  const MIXED = 'mixed';
+
+  export default {
+    name: 'CategoryOptions',
+    components: { DropdownWrapper },
+    mixins: [constantsTranslationMixin, metadataTranslationMixin],
+    props: {
+      value: {
+        type: Array | Object,
+        default: () => [],
+      },
+      nodeIds: {
+        type: Array,
+        default: () => [],
+      },
+      expanded: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        categoryText: null,
+      };
+    },
+    computed: {
+      categoriesList() {
+        return dropdown.map(category => {
+          return {
+            ...category,
+            text: this.translateMetadataString(camelCase(category.text)),
+            level: this.findDepth(Categories[category.text]),
+          };
+        });
+      },
+      selected: {
+        get() {
+          return this.value;
+        },
+        set(value) {
+          this.$emit('input', value);
+        },
+      },
+      autocompleteOptions() {
+        const options =  [...this.categoriesList];
+        if (!Array.isArray(this.selected)){
+          options.unshift({
+            value: MIXED,
+            label: this.$tr('mixedLabel'),
+            undeletable: true,
+          });
+        }
+        return options;
+      },
+      autocompleteValues() {
+        if (Array.isArray(this.selected)) {
+          return this.selected;
+        }
+        const selectedValues = Object.entries(this.selected)
+          .filter(entry => entry[1] === true) // no mixed values
+          .map(([key]) => key);
+        if (Object.values(this.selected).some(value => value !== true)) {
+          selectedValues.push(MIXED);
+        }
+        return selectedValues;
+      },
+      nested() {
+        return !this.categoryText;
+      },
+      filteredCategories() {
+        const searchQuery = this.categoryText?.trim().toLowerCase();
+        if (!searchQuery) {
+          return this.categoriesList;
+        }
+        return this.categoriesList.filter(option => option.text.toLowerCase().includes(searchQuery));
+      },
+    },
+    methods: {
+      treeItemStyle(item) {
+        const rule = this.$isRTL ? 'paddingRight' : 'paddingLeft';
+        return this.nested ? { [rule]: `${item.level * 24}px` } : {};
+      },
+      add(value) {
+        this.selected = [...this.selected, value];
+      },
+      remove(value) {
+        this.selected = this.selected.filter(i => !i.startsWith(value));
+      },
+      removeAll() {
+        this.selected = [];
+      },
+      tooltipHelper(id) {
+        return this.displayFamilyTree(dropdown, id)
+          .map(node => this.translateMetadataString(camelCase(node.text)))
+          .join(' - ');
+      },
+      findDepth(val) {
+        return val.split('.').length - 1;
+      },
+      displayFamilyTree(nodes, id) {
+        return nodes.filter(node => this.findFamilyTreeIds(id).includes(node.value));
+      },
+      /**
+       * @param {String} id The id of the selected category
+       * @returns {Array} An array of all ids of the family beginning with the selected category
+       */
+      findFamilyTreeIds(id) {
+        const family = [];
+        let familyMember = id;
+        while (familyMember) {
+          family.push(familyMember);
+          familyMember = familyMember.includes('.')
+            ? familyMember.substring(0, familyMember.lastIndexOf('.'))
+            : null;
+        }
+        return family;
+      },
+      isSelected(value) {
+        if (Array.isArray(this.selected)) {
+          return this.selected.some(v => v.startsWith(value));
+        }
+        // If not, this.selected is a boolean map
+
+        // If the value is truthy (true or an array of nodeIds) then
+        // it is selected just if it is true (not an array)
+        if (this.selected[value]) {
+          return this.selected[value] === true;
+        }
+
+        return this.isCheckboxSelectedByChildren(value);
+      },
+      /**
+       * Returns true if the given option should be selected thanks to its children.
+       * An option will be selected thanks to its children if:
+       * * One of the children is selected
+       * * It has several indeterminate children, but by joining all the contentNodes of the
+       *   child options, together they constitute the same array of selected contentNodes.
+       */
+      isCheckboxSelectedByChildren(optionId) {
+        if (!this.nodeIds || !this.nodeIds.length) {
+          return false;
+        }
+        const childrenOptions = Object.keys(this.selected)
+          .filter(selectedValue => selectedValue.startsWith(optionId))
+          .map(selectedValue => this.selected[selectedValue]);
+
+        if (childrenOptions.length === 0) {
+          return false; // No childen options
+        } else if (childrenOptions.length === 1) {
+          // just one child option, the value is deterrmined by if it is selected
+          return childrenOptions[0] === true;
+        }
+
+        // Here multiple children are selected or indeterminate
+        if (childrenOptions.some(value => value === true)) {
+          // if some child value is selected for all nodes, then the parent option is selected
+          return true;
+        }
+
+        // Here all children options are mixed, we need to check if together
+        // the parent option is common for all nodes
+        const nodeIds = new Set();
+        childrenOptions.forEach(valueNodeIds => {
+          valueNodeIds.forEach(nodeId => nodeIds.add(nodeId));
+        });
+        return nodeIds.size === this.nodeIds.length;
+      },
+      isCheckboxIndeterminate(optionId) {
+        if (Array.isArray(this.selected)) {
+          return false;
+        }
+        if (this.selected[optionId]) {
+          return this.selected[optionId] !== true;
+        }
+        return (
+          Object.keys(this.selected).some(selectedValue =>
+            selectedValue.startsWith(optionId)
+          ) && !this.isSelected(optionId)
+        );
+      },
+      onChange(optionId) {
+        if (Array.isArray(this.selected)) {
+          if (this.isSelected(optionId)) {
+            this.selected = this.selected.filter(v => !v.startsWith(optionId));
+          } else {
+            this.selected = [...this.selected, optionId];
+          }
+          return;
+        }
+        if (this.isSelected(optionId)) {
+          const newSelected = { ...this.selected };
+          Object.keys(this.selected)
+            .filter(selectedValue => selectedValue.startsWith(optionId))
+            .forEach(selectedValue => {
+              delete newSelected[selectedValue];
+            });
+          this.selected = newSelected;
+        } else {
+          this.selected = { ...this.selected, [optionId]: true };
+        }
+      },
+    },
+    $trs: {
+      noCategoryFoundText: 'Category not found',
+    },
+  };
+
+</script>
+<style lang="less" scoped>
+
+  .parentOption:not(:first-child) {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+  }
+
+  .checkbox-list-wrapper {
+    height: 250px;
+    overflow-y: auto;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
index e41d0a91cf..234808ac2c 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
@@ -1,38 +1,25 @@
 <template>
 
-  <!-- <DropdownWrapper>
-    <template #default="{ attach, menuProps }">
-      <VSelect
-        ref="level"
-        v-model="level"
-        :items="levels"
-        box
-        chips
-        clearable
-        :label="translateMetadataString('level')"
-        multiple
-        deletableChips
-        :menu-props="menuProps"
-        :attach="attach"
-      />
-    </template>
-  </DropdownWrapper> -->
+  <div>
+    <slot name="prependOptions" />
+    <ExpandableSelect
+      v-model="level"
+      multiple
+      :expanded="expanded"
+      :options="levels"
+      :hideLabel="hideLabel"
+      :label="translateMetadataString('level')"
+    />
+  </div>
 
-  <ExpandableSelect
-    v-model="level"
-    multiple
-    :expanded="expanded"
-    :options="levels"
-    :label="translateMetadataString('level')"
-  />
 </template>
 
 <script>
 
   import camelCase from 'lodash/camelCase';
   import { ContentLevels } from 'shared/constants';
-  import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
   import ExpandableSelect from 'shared/views/form/ExpandableSelect';
+  import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
 
   export default {
     name: 'LevelsOptions',
@@ -47,6 +34,10 @@
         type: Boolean,
         default: false,
       },
+      hideLabel: {
+        type: Boolean,
+        default: false,
+      },
     },
     computed: {
       level: {
diff --git a/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue b/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue
index 2b68706c15..e04db4b278 100644
--- a/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue
@@ -32,8 +32,7 @@
     <h5 v-if="!hideLabel">
       {{ label }}
     </h5>
-    <slot name="prepend-options"/>
-    <div :style="optionsListStyle">
+    <div>
       <template v-if="!multiple">
         <KRadioButton
           v-for="option in options"
@@ -138,7 +137,7 @@
         return this.valueModel[value] === true;
       },
       isCheckboxIndeterminate(value) {
-        return this.valueModel[value] !== true && this.valueModel[value] !== false;
+        return this.valueModel[value] && this.valueModel[value] !== true;
       },
       setOption(optionId, value) {
         if (value) {

From 9130015e18f7cf6d4b53b5df4e1831ff6827f998 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Fri, 1 Mar 2024 17:25:03 -0500
Subject: [PATCH 03/11] Add categories options support

---
 .../QuickEditModal/EditBooleanMapModal.vue    | 278 +--------------
 .../QuickEditModal/EditCategoriesModal.vue    |  11 +-
 .../QuickEditModal/EditLevelsModal.vue        |  14 -
 .../components/edit/DetailsTabView.vue        |   2 +-
 .../edit/__tests__/categoryOptions.spec.js    | 331 ------------------
 .../contentNodeFields/CategoryOptions.vue     | 205 +++++------
 .../views/contentNodeFields/LevelsOptions.vue |   2 +-
 .../__tests__/categoryOptions.spec.js         |  75 ++++
 .../__tests__/levelsOptions.spec.js           |   0
 9 files changed, 169 insertions(+), 749 deletions(-)
 delete mode 100644 contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/categoryOptions.spec.js
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js
 rename contentcuration/contentcuration/frontend/{channelEdit/components/edit => shared/views/contentNodeFields}/__tests__/levelsOptions.spec.js (100%)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
index c5ca200909..7ee36fea15 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
@@ -12,13 +12,13 @@
       {{ $tr('resourcesSelected', { count: nodeIds.length }) }}
     </p>
     <component
+      :is="inputComponent"
       v-model="selectedValues"
       expanded
       hideLabel
-      :is="inputComponent"
       :nodeIds="nodeIds"
     >
-      <template #prependOptions v-if="isDescendantsUpdatable && isTopicSelected">
+      <template v-if="isDescendantsUpdatable && isTopicSelected" #prependOptions>
         <KCheckbox
           :checked="updateDescendants"
           data-test="update-descendants-checkbox"
@@ -30,74 +30,6 @@
         >
       </template>
     </component>
-    <!-- <VAutocomplete
-      v-if="showAutocomplete"
-      :value="autocompleteValues"
-      :items="autocompleteOptions"
-      :searchInput.sync="searchQuery"
-      :label="autocompleteLabel"
-      box
-      clearable
-      chips
-      deletableChips
-      multiple
-      item-value="value"
-      item-text="label"
-      data-test="options-autocomplete"
-      :menu-props="{ height: 0, maxHeight: 0 } /* hide menu */"
-      @input="autocompleteInputUpdate"
-    >
-      <template #selection="data">
-        <VTooltip top lazy>
-          <template #activator="{ on, attrs }">
-            <VChip
-              v-bind="attrs"
-              :close="!data.item.undeletable"
-              data-test="option-chip"
-              v-on="on"
-              @input="setOption(data.item.value, false)"
-            >
-              {{ data.item.label }}
-            </VChip>
-          </template>
-          <div>
-            <div>{{ tooltipText(data.item.value) }}</div>
-          </div>
-        </VTooltip>
-      </template>
-    </VAutocomplete>
-    <template v-if="isDescendantsUpdatable && isTopicSelected">
-      <KCheckbox
-        :checked="updateDescendants"
-        data-test="update-descendants-checkbox"
-        :label="$tr('updateDescendantsCheckbox')"
-        @change="(value) => { updateDescendants = value }"
-      />
-      <hr
-        :style="dividerStyle"
-      >
-    </template>
-    <div :style="optionsListStyle">
-      <KCheckbox
-        v-for="option in filteredOptions"
-        :key="option.value"
-        data-test="option-checkbox"
-        :label="option.label"
-        :style="treeItemStyle(option.value)"
-        :checked="isCheckboxSelected(option.value)"
-        :indeterminate="isCheckboxIndeterminate(option.value)"
-        @change="value => setOption(option.value, value)"
-      />
-      <p
-        v-if="!filteredOptions.length"
-        :style="{ color: $themeTokens.annotation }"
-      >
-        {{ emptyText || $tr('emptyOptionsSearch') }}
-      </p>
-    </div>
-    <span v-if="error" class="red--text">
-      {{ error }}
-    </span> -->
   </KModal>
 
 </template>
@@ -109,8 +41,6 @@
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
   import { getInvalidText } from 'shared/utils/validation';
 
-  const MIXED = 'mixed';
-
   export default {
     name: 'EditBooleanMapModal',
     props: {
@@ -122,53 +52,14 @@
         type: String,
         required: true,
       },
-      options: {
-        type: Array,
-        required: true,
-      },
       title: {
         type: String,
         required: true,
       },
-      showAutocomplete: {
-        type: Boolean,
-        default: false,
-      },
-      autocompleteLabel: {
-        type: String,
-        default: '',
-      },
-      showHierarchy: {
-        type: Boolean,
-        default: false,
-      },
-      /**
-       * If the options are hierarchical, this function should return true if the first value
-       * is a sublevel of the second value
-       */
-      isSubLevel: {
-        type: Function,
-        default: (value1, value2) => value1.startsWith(value2),
-      },
-      /**
-       * If the options are hierarchical, this function should return the level of the option
-       */
-      getLevel: {
-        type: Function,
-        default: value => value.split('.').length,
-      },
       isDescendantsUpdatable: {
         type: Boolean,
         default: false,
       },
-      optionsListStyle: {
-        type: Object,
-        default: () => ({}),
-      },
-      emptyText: {
-        type: String,
-        default: '',
-      },
       confirmationMessage: {
         type: String,
         required: true,
@@ -185,7 +76,6 @@
     data() {
       return {
         updateDescendants: false,
-        searchQuery: '',
         error: '',
         /**
          * selectedValues is an object with the following structure:
@@ -207,19 +97,6 @@
       isTopicSelected() {
         return this.nodes.some(node => node.kind === ContentKindsNames.TOPIC);
       },
-      filteredOptions() {
-        const searchQuery = this.searchQuery?.trim().toLowerCase();
-        if (!this.searchQuery) {
-          return this.options;
-        }
-        return this.options.filter(option => option.label.toLowerCase().includes(searchQuery));
-      },
-      flatList() {
-        if (!this.showHierarchy) {
-          return true;
-        }
-        return this.searchQuery && this.searchQuery.trim().length > 0;
-      },
       dividerStyle() {
         return {
           border: 0,
@@ -227,25 +104,6 @@
           margin: '1em 0',
         };
       },
-      autocompleteOptions() {
-        return [
-          {
-            value: MIXED,
-            label: this.$tr('mixedLabel'),
-            undeletable: true,
-          },
-          ...this.options,
-        ];
-      },
-      autocompleteValues() {
-        const selectedValues = Object.entries(this.selectedValues)
-          .filter(entry => entry[1] === true) // no mixed values
-          .map(([key]) => key);
-        if (Object.values(this.selectedValues).some(value => value !== true)) {
-          selectedValues.push(MIXED);
-        }
-        return selectedValues;
-      },
     },
     created() {
       const optionsNodes = {};
@@ -272,68 +130,6 @@
       close() {
         this.$emit('close');
       },
-      isCheckboxSelected(optionId) {
-        // If the value is truthy (true or an array of nodeIds) then
-        // it is selected just if it is true (not an array)
-        if (this.selectedValues[optionId]) {
-          return this.selectedValues[optionId] === true;
-        }
-        // If we dont want to show a hierarchy, then we dont need to
-        // look further
-        if (!this.showHierarchy) {
-          return false;
-        }
-
-        // If we are showing a hierarchy, then we need to check its children
-        return this.isCheckboxSelectedByChildren(optionId);
-      },
-      /**
-       * Returns true if the given option should be selected thanks to its children.
-       * An option will be selected thanks to your children if:
-       * * One of the children is selected
-       * * It has several indeterminate children, but by joining all the contentNodes of the
-       *   child options, together they constitute the same array of selected contentNodes.
-       */
-      isCheckboxSelectedByChildren(optionId) {
-        const childrenOptions = Object.keys(this.selectedValues)
-          .filter(selectedValue => this.isSubLevel(selectedValue, optionId))
-          .map(selectedValue => this.selectedValues[selectedValue]);
-
-        if (childrenOptions.length === 0) {
-          return false; // No childen options
-        } else if (childrenOptions.length === 1) {
-          // just one child option, the value is deterrmined by if it is selected
-          return childrenOptions[0] === true;
-        }
-
-        // Here multiple children are selected or indeterminate
-        if (childrenOptions.some(value => value === true)) {
-          // if some child value is selected for all nodes, then the parent option is selected
-          return true;
-        }
-
-        // Here all children options are mixed, we need to check if together
-        // the parent option is common for all nodes
-        const nodeIds = new Set();
-        childrenOptions.forEach(valueNodeIds => {
-          valueNodeIds.forEach(nodeId => nodeIds.add(nodeId));
-        });
-        return nodeIds.size === this.nodeIds.length;
-      },
-      isCheckboxIndeterminate(optionId) {
-        if (this.selectedValues[optionId]) {
-          return this.selectedValues[optionId] !== true;
-        }
-        if (!this.showHierarchy) {
-          return false;
-        }
-
-        return (
-          Object.keys(this.selectedValues).some(selectedValue =>
-            this.isSubLevel(selectedValue, optionId)
-          ) && !this.isCheckboxSelected(optionId)
-        );
-      },
       validate() {
         if (this.validators && this.validators.length) {
           this.error = getInvalidText(
@@ -373,72 +169,6 @@
         this.$store.dispatch('showSnackbarSimple', this.confirmationMessage || '');
         this.close();
       },
-      setOption(optionId, value) {
-        if (value) {
-          this.selectedValues = {
-            ...this.selectedValues,
-            [optionId]: true,
-          };
-        } else {
-          const newSelectedValues = { ...this.selectedValues };
-
-          if (this.showHierarchy) {
-            // Remove all children values
-            Object.keys(this.selectedValues).forEach(selectedValue => {
-              if (this.isSubLevel(selectedValue, optionId)) {
-                delete newSelectedValues[selectedValue];
-              }
-            });
-          } else {
-            delete newSelectedValues[optionId];
-          }
-
-          this.selectedValues = newSelectedValues;
-        }
-        this.validate();
-      },
-      autocompleteInputUpdate(selected) {
-        const newSelectedValues = {};
-        selected.forEach(optionId => {
-          newSelectedValues[optionId] = true;
-        });
-        this.selectedValues = newSelectedValues;
-        this.validate();
-      },
-      treeItemStyle(optionId) {
-        if (this.flatList) {
-          return {};
-        }
-        const rule = this.$isRTL ? 'paddingRight' : 'paddingLeft';
-        const level = this.getLevel(optionId);
-        return { [rule]: `${level * 24}px` };
-      },
-      tooltipText(optionId) {
-        if (optionId === MIXED) {
-          return this.$tr('mixedLabel');
-        }
-        const option = this.options.find(option => option.value === optionId);
-        if (!option) {
-          return '';
-        }
-        if (!this.showHierarchy) {
-          return option.label || '';
-        }
-        let currentOption = optionId;
-        let text = option.label || '';
-        const level = this.getLevel(optionId);
-        for (let i = level - 1; i > 0; i--) {
-          const parentOption = this.options.find(
-            option =>
-              this.isSubLevel(currentOption, option.value) && this.getLevel(option.value) === i
-          );
-          if (parentOption) {
-            text = `${parentOption.label} - ${text}`;
-            currentOption = parentOption.value;
-          }
-        }
-        return text;
-      },
     },
     $trs: {
       saveAction: 'Save',
@@ -447,12 +177,10 @@
         '{count, number, integer} {count, plural, one {resource} other {resources}} selected',
       updateDescendantsCheckbox:
         'Apply to all resources and folders nested within the selected folders',
-      mixedLabel: 'Mixed',
-      emptyOptionsSearch: 'No options matches the search',
     },
   };
 
 </script>
 
 <style scoped>
-</style>
\ No newline at end of file
+</style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCategoriesModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCategoriesModal.vue
index 0556fe7d85..23ce120f06 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCategoriesModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCategoriesModal.vue
@@ -29,7 +29,6 @@
   export default {
     name: 'EditCategoriesModal',
     components: {
-      CategoryOptions,
       EditBooleanMapModal,
     },
     mixins: [metadataTranslationMixin],
@@ -44,6 +43,11 @@
         categoriesOptions: [],
       };
     },
+    computed: {
+      CategoryOptionsComponent() {
+        return CategoryOptions;
+      },
+    },
     created() {
       const categories = getSortedCategories();
       this.categoriesOptions = Object.entries(categories).map(([id, category]) => ({
@@ -51,11 +55,6 @@
         label: this.translateMetadataString(camelCase(category)),
       }));
     },
-    computed: {
-      CategoryOptionsComponent() {
-        return CategoryOptions;
-      },
-    },
     methods: {
       close() {
         this.$emit('close');
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLevelsModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLevelsModal.vue
index ba6f6cf2e9..04b0bcc53f 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLevelsModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLevelsModal.vue
@@ -15,9 +15,7 @@
 
 <script>
 
-  import camelCase from 'lodash/camelCase';
   import EditBooleanMapModal from './EditBooleanMapModal';
-  import { ContentLevels } from 'shared/constants';
   import { metadataTranslationMixin } from 'shared/mixins';
   import LevelsOptions from 'shared/views/contentNodeFields/LevelsOptions';
 
@@ -25,7 +23,6 @@
     name: 'EditLevelsModal',
     components: {
       EditBooleanMapModal,
-      LevelsOptions,
     },
     mixins: [metadataTranslationMixin],
     props: {
@@ -35,17 +32,6 @@
       },
     },
     computed: {
-      levelsOptions() {
-        const replaceTranslationMap = {
-          PROFESSIONAL: 'specializedProfessionalTraining',
-          WORK_SKILLS: 'allLevelsWorkSkills',
-          BASIC_SKILLS: 'allLevelsBasicSkills',
-        };
-        return Object.entries(ContentLevels).map(([key, value]) => ({
-          label: this.translateMetadataString(replaceTranslationMap[key] || camelCase(key)),
-          value,
-        }));
-      },
       LevelsOptionsComponent() {
         return LevelsOptions;
       },
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
index 00c895911f..cbf1214349 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
@@ -376,9 +376,9 @@
   import SubtitlesList from '../../views/files/supplementaryLists/SubtitlesList';
   import { isImportedContent, isDisableSourceEdits, importedChannelLink } from '../../utils';
   import AccessibilityOptions from './AccessibilityOptions.vue';
-  import LevelsOptions from 'shared/views/contentNodeFields/LevelsOptions';
   import ResourcesNeededOptions from './ResourcesNeededOptions.vue';
   import LearningActivityOptions from './LearningActivityOptions.vue';
+  import LevelsOptions from 'shared/views/contentNodeFields/LevelsOptions';
   import CategoryOptions from 'shared/views/contentNodeFields/CategoryOptions';
   import CompletionOptions from 'shared/views/contentNodeFields/CompletionOptions';
   import {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/categoryOptions.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/categoryOptions.spec.js
deleted file mode 100644
index c8a82a30e8..0000000000
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/categoryOptions.spec.js
+++ /dev/null
@@ -1,331 +0,0 @@
-import Vue from 'vue';
-import Vuetify from 'vuetify';
-import { shallowMount } from '@vue/test-utils';
-import CategoryOptions from '../CategoryOptions.vue';
-
-Vue.use(Vuetify);
-
-const testDropdown = [
-  {
-    text: 'DAILY_LIFE',
-    value: 'PbGoe2MV',
-  },
-  {
-    text: 'CURRENT_EVENTS',
-    value: 'PbGoe2MV.J7CU1IxN',
-  },
-  {
-    text: 'DIVERSITY',
-    value: 'PbGoe2MV.EHcbjuKq',
-  },
-  {
-    text: 'ENTREPRENEURSHIP',
-    value: 'PbGoe2MV.kyxTNsRS',
-  },
-  {
-    text: 'ENVIRONMENT',
-    value: 'PbGoe2MV.tS7WKnZ7',
-  },
-  {
-    text: 'FINANCIAL_LITERACY',
-    value: 'PbGoe2MV.HGIc9sZq',
-  },
-  {
-    text: 'MEDIA_LITERACY',
-    value: 'PbGoe2MV.UOTL#KIV',
-  },
-  {
-    text: 'MENTAL_HEALTH',
-    value: 'PbGoe2MV.d8&gCo2N',
-  },
-  {
-    text: 'PUBLIC_HEALTH',
-    value: 'PbGoe2MV.kivAZaeX',
-  },
-  {
-    text: 'FOR_TEACHERS',
-    value: 'ziJ6PCuU',
-  },
-  {
-    text: 'GUIDES',
-    value: 'ziJ6PCuU.RLfhp37t',
-  },
-  {
-    text: 'LESSON_PLANS',
-    value: 'ziJ6PCuU.lOBPr5ix',
-  },
-  {
-    text: 'FOUNDATIONS',
-    value: 'BCG3&slG',
-  },
-  {
-    text: 'DIGITAL_LITERACY',
-    value: 'BCG3&slG.wZ3EAedB',
-  },
-  {
-    text: 'FOUNDATIONS_LOGIC_AND_CRITICAL_THINKING',
-    value: 'BCG3&slG.0&d0qTqS',
-  },
-  {
-    text: 'LEARNING_SKILLS',
-    value: 'BCG3&slG.fP2j70bj',
-  },
-  {
-    text: 'LITERACY',
-    value: 'BCG3&slG.HLo9TbNq',
-  },
-  {
-    text: 'NUMERACY',
-    value: 'BCG3&slG.Tsyej9ta',
-  },
-  {
-    text: 'SCHOOL',
-    value: 'd&WXdXWF',
-  },
-  {
-    text: 'ARTS',
-    value: 'd&WXdXWF.5QAjgfv7',
-  },
-  {
-    text: 'DANCE',
-    value: 'd&WXdXWF.5QAjgfv7.BUMJJBnS',
-  },
-  {
-    text: 'DRAMA',
-    value: 'd&WXdXWF.5QAjgfv7.XsWznP4o',
-  },
-  {
-    text: 'MUSIC',
-    value: 'd&WXdXWF.5QAjgfv7.u0aKjT4i',
-  },
-  {
-    text: 'VISUAL_ART',
-    value: 'd&WXdXWF.5QAjgfv7.4LskOFXj',
-  },
-  {
-    text: 'COMPUTER_SCIENCE',
-    value: 'd&WXdXWF.e#RTW9E#',
-  },
-  {
-    text: 'MECHANICAL_ENGINEERING',
-    value: 'd&WXdXWF.e#RTW9E#.8ZoaPsVW',
-  },
-  {
-    text: 'PROGRAMMING',
-    value: 'd&WXdXWF.e#RTW9E#.CfnlTDZ#',
-  },
-  {
-    text: 'WEB_DESIGN',
-    value: 'd&WXdXWF.e#RTW9E#.P7s8FxQ8',
-  },
-  {
-    text: 'HISTORY',
-    value: 'd&WXdXWF.zWtcJ&F2',
-  },
-  {
-    text: 'LANGUAGE_LEARNING',
-    value: 'd&WXdXWF.JDUfJNXc',
-  },
-  {
-    text: 'MATHEMATICS',
-    value: 'd&WXdXWF.qs0Xlaxq',
-  },
-  {
-    text: 'ALGEBRA',
-    value: 'd&WXdXWF.qs0Xlaxq.0t5msbL5',
-  },
-  {
-    text: 'ARITHMETIC',
-    value: 'd&WXdXWF.qs0Xlaxq.nG96nHDc',
-  },
-  {
-    text: 'CALCULUS',
-    value: 'd&WXdXWF.qs0Xlaxq.8rJ57ht6',
-  },
-  {
-    text: 'GEOMETRY',
-    value: 'd&WXdXWF.qs0Xlaxq.lb7ELcK5',
-  },
-  {
-    text: 'STATISTICS',
-    value: 'd&WXdXWF.qs0Xlaxq.jNm15RLB',
-  },
-  {
-    text: 'READING_AND_WRITING',
-    value: 'd&WXdXWF.kHKJ&PbV',
-  },
-  {
-    text: 'LITERATURE',
-    value: 'd&WXdXWF.kHKJ&PbV.DJLBbaEk',
-  },
-  {
-    text: 'LOGIC_AND_CRITICAL_THINKING',
-    value: 'd&WXdXWF.kHKJ&PbV.YMBXStib',
-  },
-  {
-    text: 'READING_COMPREHENSION',
-    value: 'd&WXdXWF.kHKJ&PbV.r7RxB#9t',
-  },
-  {
-    text: 'WRITING',
-    value: 'd&WXdXWF.kHKJ&PbV.KFJOCr&6',
-  },
-  {
-    text: 'SCIENCES',
-    value: 'd&WXdXWF.i1IdaNwr',
-  },
-  {
-    text: 'ASTRONOMY',
-    value: 'd&WXdXWF.i1IdaNwr.mjSF4QlF',
-  },
-  {
-    text: 'BIOLOGY',
-    value: 'd&WXdXWF.i1IdaNwr.uErN4PdS',
-  },
-  {
-    text: 'CHEMISTRY',
-    value: 'd&WXdXWF.i1IdaNwr.#r5ocgid',
-  },
-  {
-    text: 'EARTH_SCIENCE',
-    value: 'd&WXdXWF.i1IdaNwr.zbDzxDE7',
-  },
-  {
-    text: 'PHYSICS',
-    value: 'd&WXdXWF.i1IdaNwr.r#wbt#jF',
-  },
-  {
-    text: 'SOCIAL_SCIENCES',
-    value: 'd&WXdXWF.K80UMYnW',
-  },
-  {
-    text: 'ANTHROPOLOGY',
-    value: 'd&WXdXWF.K80UMYnW.ViBlbQR&',
-  },
-  {
-    text: 'CIVIC_EDUCATION',
-    value: 'd&WXdXWF.K80UMYnW.F863vKiF',
-  },
-  {
-    text: 'POLITICAL_SCIENCE',
-    value: 'd&WXdXWF.K80UMYnW.K72&pITr',
-  },
-  {
-    text: 'SOCIOLOGY',
-    value: 'd&WXdXWF.K80UMYnW.75WBu1ZS',
-  },
-  {
-    text: 'WORK',
-    value: 'l7DsPDlm',
-  },
-  {
-    text: 'PROFESSIONAL_SKILLS',
-    value: 'l7DsPDlm.#N2VymZo',
-  },
-  {
-    text: 'TECHNICAL_AND_VOCATIONAL_TRAINING',
-    value: 'l7DsPDlm.ISEXeZt&',
-  },
-  {
-    text: 'INDUSTRY_AND_SECTOR_SPECIFIC',
-    value: 'l7DsPDlm.ISEXeZt&.pRvOzJTE',
-  },
-  {
-    text: 'SKILLS_TRAINING',
-    value: 'l7DsPDlm.ISEXeZt&.&1WpYE&n',
-  },
-  {
-    text: 'TOOLS_AND_SOFTWARE_TRAINING',
-    value: 'l7DsPDlm.ISEXeZt&.1JfIbP&N',
-  },
-];
-
-describe('CategoryOptions', () => {
-  it('smoke test', () => {
-    const wrapper = shallowMount(CategoryOptions);
-    expect(wrapper.isVueInstance()).toBe(true);
-  });
-  it('emits expected data', () => {
-    const wrapper = shallowMount(CategoryOptions);
-    const value = 'string';
-    wrapper.vm.$emit('input', value);
-
-    expect(wrapper.emitted().input).toBeTruthy();
-    expect(wrapper.emitted().input.length).toBe(1);
-    expect(wrapper.emitted().input[0]).toEqual([value]);
-  });
-  const expectedFamilyTree = [
-    { text: 'SCHOOL', value: 'd&WXdXWF' },
-    { text: 'ARTS', value: 'd&WXdXWF.5QAjgfv7' },
-    { text: 'DANCE', value: 'd&WXdXWF.5QAjgfv7.BUMJJBnS' },
-  ];
-
-  describe('display', () => {
-    it('has a tooltip that displays the tree for value of an item', () => {
-      const wrapper = shallowMount(CategoryOptions);
-      const item = 'd&WXdXWF.5QAjgfv7.BUMJJBnS'; // 'Dance'
-      const expectedToolTip = 'School - Arts - Dance';
-
-      expect(wrapper.vm.tooltipHelper(item)).toEqual(expectedToolTip);
-    });
-    it(`dropdown has 'levels' key necessary to display the nested structure of categories`, () => {
-      const wrapper = shallowMount(CategoryOptions);
-      const dropdown = wrapper.vm.categoriesList;
-      const everyCategoryHasLevelsKey = dropdown.every(item => 'level' in item);
-
-      expect(everyCategoryHasLevelsKey).toBeTruthy();
-    });
-  });
-
-  describe('nested family structure', () => {
-    it('can display all the ids of family tree of an item', () => {
-      const wrapper = shallowMount(CategoryOptions);
-      const item = 'd&WXdXWF.5QAjgfv7.BUMJJBnS'; //'Dance'
-      const expectedFamilyTreeIds = expectedFamilyTree.map(item => item.value);
-
-      expect(wrapper.vm.findFamilyTreeIds(item).sort()).toEqual(expectedFamilyTreeIds.sort());
-    });
-    it('can display array of objects of family tree of an item', () => {
-      const wrapper = shallowMount(CategoryOptions);
-      const item = 'd&WXdXWF.5QAjgfv7.BUMJJBnS'; //'Dance'
-
-      expect(wrapper.vm.displayFamilyTree(testDropdown, item)).toEqual(expectedFamilyTree);
-    });
-  });
-
-  describe('interactions', () => {
-    it('when user checks an item, that is emitted to the parent component', () => {
-      const wrapper = shallowMount(CategoryOptions);
-      const item = 'abcd';
-      wrapper.vm.$emit = jest.fn();
-      wrapper.vm.add(item);
-
-      expect(wrapper.vm.$emit.mock.calls[0][0]).toBe('input');
-      expect(wrapper.vm.$emit.mock.calls[0][1]).toEqual([item]);
-    });
-    it('when user unchecks an item, that is emitted to the parent component', () => {
-      const wrapper = shallowMount(CategoryOptions);
-      const item = 'defj';
-      wrapper.vm.$emit = jest.fn();
-      wrapper.vm.remove(item);
-
-      expect(wrapper.vm.$emit.mock.calls[0][0]).toBe('input');
-      expect(wrapper.vm.$emit.mock.calls[0][1]).toEqual([]);
-    });
-  });
-
-  describe('close button on chip interactions', () => {
-    it('in the autocomplete bar, the chip is removed when user clicks on its close button', () => {
-      const wrapper = shallowMount(CategoryOptions, {
-        data() {
-          return { selected: ['remove me', 'abc', 'def', 'abc.'] };
-        },
-      });
-      const originalChipsLength = wrapper.vm.selected.length;
-      wrapper.vm.remove('remove me');
-      const chips = wrapper.vm.selected;
-
-      expect(chips.length).toEqual(originalChipsLength - 1);
-    });
-  });
-});
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
index 95e0b42b76..7526bf1866 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
@@ -15,19 +15,29 @@
           multiple
           item-value="value"
           item-text="text"
-          :menu-props="{ ...menuProps, zIndex: 4 }"
+          :menu-props="{
+            ...menuProps,
+            zIndex: 4,
+            height: expanded ? 0 : 'auto',
+            maxHeight: expanded ? 0 : 300,
+          }"
           :attach="attach"
           @click:clear="$nextTick(() => removeAll())"
         >
           <template #selection="data">
             <VTooltip bottom lazy>
               <template #activator="{ on, attrs }">
-                <VChip v-bind="attrs" close v-on="on" @input="remove(data.item.value)">
+                <VChip
+                  v-bind="attrs"
+                  :close="!data.item.undeletable"
+                  v-on="on"
+                  @input="remove(data.item.value)"
+                >
                   {{ data.item.text }}
                 </VChip>
               </template>
               <div>
-                <div>{{ tooltipHelper(data.item.value) }}</div>
+                <div>{{ tooltipText(data.item.value) }}</div>
               </div>
             </VTooltip>
           </template>
@@ -63,9 +73,9 @@
       </template>
     </DropdownWrapper>
 
-    <slot name="prependOptions" />
-    
-    <div class="checkbox-list-wrapper" v-if="expanded">
+    <slot name="prependOptions"></slot>
+
+    <div v-if="expanded" class="checkbox-list-wrapper">
       <KCheckbox
         v-for="option in filteredCategories"
         :key="option.value"
@@ -80,72 +90,19 @@
         v-if="!filteredCategories.length"
         :style="{ color: $themeTokens.annotation }"
       >
-        {{ emptyText || $tr('emptyOptionsSearch') }}
+        {{ $tr('noCategoryFoundText') }}
       </p>
     </div>
   </div>
+
 </template>
 
 <script>
 
   import camelCase from 'lodash/camelCase';
-  import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
-  import { Categories, CategoriesLookup } from 'shared/constants';
+  import { getSortedCategories } from 'shared/utils/helpers';
   import DropdownWrapper from 'shared/views/form/DropdownWrapper';
-
-  const availablePaths = {};
-  const categoriesObj = {};
-  const dropdown = [];
-
-  Object.assign(availablePaths, CategoriesLookup);
-
-  /*
-   * This is used to create the categories object from which the dropdown list is generated
-   * and is the same as this to make sure the order in Kolibri and Studio are the same:
-   * https://github.com/learningequality/kolibri/blob/develop/kolibri/plugins/learn/assets/
-   *   src/views/CategorySearchModal/CategorySearchOptions.vue#L73
-   */
-  for (const subjectKey of Object.entries(Categories)
-    .sort((a, b) => a[1].length - b[1].length)
-    .map(a => a[0])) {
-    const ids = Categories[subjectKey].split('.');
-
-    let path = '';
-    let nested = categoriesObj;
-    for (const fragment of ids) {
-      path += fragment;
-      if (availablePaths[path]) {
-        const nestedKey = CategoriesLookup[path];
-        if (!nested[nestedKey]) {
-          nested[nestedKey] = {
-            value: path,
-            nested: {},
-          };
-        }
-        nested = nested[nestedKey].nested;
-        path += '.';
-      } else {
-        break;
-      }
-    }
-  }
-
-  const flattenCategories = obj => {
-    Object.keys(obj).forEach(key => {
-      if (key !== 'value' && key !== 'nested') {
-        dropdown.push({
-          text: key,
-          value: obj[key]['value'],
-        });
-      }
-      if (typeof obj[key] === 'object') {
-        flattenCategories(obj[key]);
-      }
-    });
-    return dropdown;
-  };
-
-  flattenCategories(categoriesObj);
+  import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
 
   const MIXED = 'mixed';
 
@@ -155,7 +112,7 @@
     mixins: [constantsTranslationMixin, metadataTranslationMixin],
     props: {
       value: {
-        type: Array | Object,
+        type: [Array, Object],
         default: () => [],
       },
       nodeIds: {
@@ -174,13 +131,12 @@
     },
     computed: {
       categoriesList() {
-        return dropdown.map(category => {
-          return {
-            ...category,
-            text: this.translateMetadataString(camelCase(category.text)),
-            level: this.findDepth(Categories[category.text]),
-          };
-        });
+        const categories = getSortedCategories();
+        return Object.entries(categories).map(([id, category]) => ({
+          value: id,
+          text: this.translateMetadataString(camelCase(category)),
+          level: this.findDepth(id),
+        }));
       },
       selected: {
         get() {
@@ -191,11 +147,12 @@
         },
       },
       autocompleteOptions() {
-        const options =  [...this.categoriesList];
-        if (!Array.isArray(this.selected)){
-          options.unshift({
+        const options = [...this.categoriesList];
+        if (!Array.isArray(this.selected)) {
+          // Just boolean maps can have indeterminate values
+          options.push({
             value: MIXED,
-            label: this.$tr('mixedLabel'),
+            text: this.$tr('mixedLabel'),
             undeletable: true,
           });
         }
@@ -206,7 +163,7 @@
           return this.selected;
         }
         const selectedValues = Object.entries(this.selected)
-          .filter(entry => entry[1] === true) // no mixed values
+          .filter(entry => entry[1] === true) // no mixed values for boolean maps
           .map(([key]) => key);
         if (Object.values(this.selected).some(value => value !== true)) {
           selectedValues.push(MIXED);
@@ -221,7 +178,9 @@
         if (!searchQuery) {
           return this.categoriesList;
         }
-        return this.categoriesList.filter(option => option.text.toLowerCase().includes(searchQuery));
+        return this.categoriesList.filter(option =>
+          option.text.toLowerCase().includes(searchQuery)
+        );
       },
     },
     methods: {
@@ -230,40 +189,57 @@
         return this.nested ? { [rule]: `${item.level * 24}px` } : {};
       },
       add(value) {
-        this.selected = [...this.selected, value];
+        if (Array.isArray(this.selected)) {
+          this.selected = [...this.selected, value];
+          return;
+        }
+        this.selected = { ...this.selected, [value]: true };
       },
       remove(value) {
-        this.selected = this.selected.filter(i => !i.startsWith(value));
+        if (Array.isArray(this.selected)) {
+          this.selected = this.selected.filter(i => !i.startsWith(value));
+          return;
+        }
+        const newSelected = { ...this.selected };
+        Object.keys(this.selected)
+          .filter(selectedValue => selectedValue.startsWith(value))
+          .forEach(selectedValue => {
+            delete newSelected[selectedValue];
+          });
+        this.selected = newSelected;
       },
       removeAll() {
-        this.selected = [];
+        if (Array.isArray(this.selected)) {
+          this.selected = [];
+          return;
+        }
+        this.selected = {};
       },
-      tooltipHelper(id) {
-        return this.displayFamilyTree(dropdown, id)
-          .map(node => this.translateMetadataString(camelCase(node.text)))
-          .join(' - ');
+      tooltipText(optionId) {
+        if (optionId === MIXED) {
+          return this.$tr('mixedLabel');
+        }
+        const option = this.categoriesList.find(option => option.value === optionId);
+        if (!option) {
+          return '';
+        }
+        let currentOption = optionId;
+        let text = option.text || '';
+        const level = option.level;
+        for (let i = level - 1; i >= 0; i--) {
+          const parentOption = this.categoriesList.find(
+            option => currentOption.startsWith(option.value) && option.level === i
+          );
+          if (parentOption) {
+            text = `${parentOption.text} - ${text}`;
+            currentOption = parentOption.value;
+          }
+        }
+        return text;
       },
       findDepth(val) {
         return val.split('.').length - 1;
       },
-      displayFamilyTree(nodes, id) {
-        return nodes.filter(node => this.findFamilyTreeIds(id).includes(node.value));
-      },
-      /**
-       * @param {String} id The id of the selected category
-       * @returns {Array} An array of all ids of the family beginning with the selected category
-       */
-      findFamilyTreeIds(id) {
-        const family = [];
-        let familyMember = id;
-        while (familyMember) {
-          family.push(familyMember);
-          familyMember = familyMember.includes('.')
-            ? familyMember.substring(0, familyMember.lastIndexOf('.'))
-            : null;
-        }
-        return family;
-      },
       isSelected(value) {
         if (Array.isArray(this.selected)) {
           return this.selected.some(v => v.startsWith(value));
@@ -315,6 +291,7 @@
         return nodeIds.size === this.nodeIds.length;
       },
       isCheckboxIndeterminate(optionId) {
+        // Just boolean maps can have indeterminate values
         if (Array.isArray(this.selected)) {
           return false;
         }
@@ -322,35 +299,21 @@
           return this.selected[optionId] !== true;
         }
         return (
-          Object.keys(this.selected).some(selectedValue =>
-            selectedValue.startsWith(optionId)
-          ) && !this.isSelected(optionId)
+          Object.keys(this.selected).some(selectedValue => selectedValue.startsWith(optionId)) &&
+          !this.isSelected(optionId)
         );
       },
       onChange(optionId) {
-        if (Array.isArray(this.selected)) {
-          if (this.isSelected(optionId)) {
-            this.selected = this.selected.filter(v => !v.startsWith(optionId));
-          } else {
-            this.selected = [...this.selected, optionId];
-          }
-          return;
-        }
         if (this.isSelected(optionId)) {
-          const newSelected = { ...this.selected };
-          Object.keys(this.selected)
-            .filter(selectedValue => selectedValue.startsWith(optionId))
-            .forEach(selectedValue => {
-              delete newSelected[selectedValue];
-            });
-          this.selected = newSelected;
+          this.remove(optionId);
         } else {
-          this.selected = { ...this.selected, [optionId]: true };
+          this.add(optionId);
         }
       },
     },
     $trs: {
       noCategoryFoundText: 'Category not found',
+      mixedLabel: 'Mixed',
     },
   };
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
index 234808ac2c..3fcfc2a554 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
@@ -1,7 +1,7 @@
 <template>
 
   <div>
-    <slot name="prependOptions" />
+    <slot name="prependOptions"></slot>
     <ExpandableSelect
       v-model="level"
       multiple
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js
new file mode 100644
index 0000000000..6990329da2
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js
@@ -0,0 +1,75 @@
+import Vue from 'vue';
+import Vuetify from 'vuetify';
+import { shallowMount } from '@vue/test-utils';
+import CategoryOptions from '../CategoryOptions.vue';
+
+Vue.use(Vuetify);
+
+describe('CategoryOptions', () => {
+  it('smoke test', () => {
+    const wrapper = shallowMount(CategoryOptions);
+    expect(wrapper.isVueInstance()).toBe(true);
+  });
+  it('emits expected data', () => {
+    const wrapper = shallowMount(CategoryOptions);
+    const value = 'string';
+    wrapper.vm.$emit('input', value);
+
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(wrapper.emitted().input.length).toBe(1);
+    expect(wrapper.emitted().input[0]).toEqual([value]);
+  });
+
+  describe('display', () => {
+    it('has a tooltip that displays the tree for value of an item', () => {
+      const wrapper = shallowMount(CategoryOptions);
+      const item = 'd&WXdXWF.5QAjgfv7.BUMJJBnS'; // 'Dance'
+      const expectedToolTip = 'School - Arts - Dance';
+
+      expect(wrapper.vm.tooltipText(item)).toEqual(expectedToolTip);
+    });
+    it(`dropdown has 'levels' key necessary to display the nested structure of categories`, () => {
+      const wrapper = shallowMount(CategoryOptions);
+      const dropdown = wrapper.vm.categoriesList;
+      const everyCategoryHasLevelsKey = dropdown.every(item => 'level' in item);
+
+      expect(everyCategoryHasLevelsKey).toBeTruthy();
+    });
+  });
+
+  describe('interactions', () => {
+    it('when user checks an item, that is emitted to the parent component', () => {
+      const wrapper = shallowMount(CategoryOptions);
+      const item = 'abcd';
+      wrapper.vm.$emit = jest.fn();
+      wrapper.vm.add(item);
+
+      expect(wrapper.vm.$emit.mock.calls[0][0]).toBe('input');
+      expect(wrapper.vm.$emit.mock.calls[0][1]).toEqual([item]);
+    });
+    it('when user unchecks an item, that is emitted to the parent component', () => {
+      const wrapper = shallowMount(CategoryOptions);
+      const item = 'defj';
+      wrapper.vm.$emit = jest.fn();
+      wrapper.vm.remove(item);
+
+      expect(wrapper.vm.$emit.mock.calls[0][0]).toBe('input');
+      expect(wrapper.vm.$emit.mock.calls[0][1]).toEqual([]);
+    });
+  });
+
+  describe('close button on chip interactions', () => {
+    it('in the autocomplete bar, the chip is removed when user clicks on its close button', () => {
+      const wrapper = shallowMount(CategoryOptions, {
+        data() {
+          return { selected: ['remove me', 'abc', 'def', 'abc.'] };
+        },
+      });
+      const originalChipsLength = wrapper.vm.selected.length;
+      wrapper.vm.remove('remove me');
+      const chips = wrapper.vm.selected;
+
+      expect(chips.length).toEqual(originalChipsLength - 1);
+    });
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/levelsOptions.spec.js b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/levelsOptions.spec.js
similarity index 100%
rename from contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/levelsOptions.spec.js
rename to contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/levelsOptions.spec.js

From 767b2c6dffdca1564343399e65f44022818e0363 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 4 Mar 2024 10:28:15 -0500
Subject: [PATCH 04/11] Add learning activities options

---
 .../QuickEditModal/EditBooleanMapModal.vue    |  8 ++++
 .../EditLearningActivitiesModal.vue           | 14 +++---
 .../components/edit/DetailsTabView.vue        |  4 +-
 .../LearningActivityOptions.vue               | 43 ++++++++++---------
 .../ResourcesNeededOptions.vue                |  0
 .../shared/views/form/ExpandableSelect.vue    |  1 +
 6 files changed, 39 insertions(+), 31 deletions(-)
 rename contentcuration/contentcuration/frontend/{channelEdit/components/edit => shared/views/contentNodeFields}/LearningActivityOptions.vue (68%)
 rename contentcuration/contentcuration/frontend/{channelEdit/components/edit => shared/views/contentNodeFields}/ResourcesNeededOptions.vue (100%)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
index 7ee36fea15..e2d2ffa5e4 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
@@ -30,6 +30,9 @@
         >
       </template>
     </component>
+    <span v-if="error" class="red--text">
+      {{ error }}
+    </span>
   </KModal>
 
 </template>
@@ -170,6 +173,11 @@
         this.close();
       },
     },
+    watch: {
+      selectedValues() {
+        this.validate();
+      }
+    },
     $trs: {
       saveAction: 'Save',
       cancelAction: 'Cancel',
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLearningActivitiesModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLearningActivitiesModal.vue
index 4f8ae55f82..96733650da 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLearningActivitiesModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLearningActivitiesModal.vue
@@ -5,8 +5,8 @@
     isDescendantsUpdatable
     :title="$tr('editLearningActivitiesTitle')"
     :nodeIds="nodeIds"
-    :options="learningActivitiesOptions"
     :validators="learningActivityValidators"
+    :inputComponent="LearningActivityOptionsComponent"
     :confirmationMessage="$tr('editedLearningActivities', { count: nodeIds.length })"
     @close="close"
   />
@@ -16,11 +16,10 @@
 
 <script>
 
-  import camelCase from 'lodash/camelCase';
   import EditBooleanMapModal from './EditBooleanMapModal';
-  import { LearningActivities } from 'shared/constants';
   import { metadataTranslationMixin } from 'shared/mixins';
   import { getLearningActivityValidators } from 'shared/utils/validation';
+  import LearningActivityOptions from 'shared/views/contentNodeFields/LearningActivityOptions';
 
   export default {
     name: 'EditLearningActivitiesModal',
@@ -35,15 +34,12 @@
       },
     },
     computed: {
-      learningActivitiesOptions() {
-        return Object.entries(LearningActivities).map(([key, value]) => ({
-          label: this.translateMetadataString(camelCase(key)),
-          value,
-        }));
-      },
       learningActivityValidators() {
         return getLearningActivityValidators();
       },
+      LearningActivityOptionsComponent() {
+        return LearningActivityOptions;
+      },
     },
     methods: {
       close() {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
index cbf1214349..56ec783e32 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
@@ -376,11 +376,11 @@
   import SubtitlesList from '../../views/files/supplementaryLists/SubtitlesList';
   import { isImportedContent, isDisableSourceEdits, importedChannelLink } from '../../utils';
   import AccessibilityOptions from './AccessibilityOptions.vue';
-  import ResourcesNeededOptions from './ResourcesNeededOptions.vue';
-  import LearningActivityOptions from './LearningActivityOptions.vue';
   import LevelsOptions from 'shared/views/contentNodeFields/LevelsOptions';
   import CategoryOptions from 'shared/views/contentNodeFields/CategoryOptions';
   import CompletionOptions from 'shared/views/contentNodeFields/CompletionOptions';
+  import LearningActivityOptions from 'shared/views/contentNodeFields/LearningActivityOptions';
+  import ResourcesNeededOptions from 'shared/views/contentNodeFields/ResourcesNeededOptions';
   import {
     getTitleValidators,
     getCopyrightHolderValidators,
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/LearningActivityOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
similarity index 68%
rename from contentcuration/contentcuration/frontend/channelEdit/components/edit/LearningActivityOptions.vue
rename to contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
index 3ffd37968c..f8d718d301 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/LearningActivityOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
@@ -1,23 +1,18 @@
 <template>
 
-  <DropdownWrapper>
-    <template #default="{ attach, menuProps }">
-      <VSelect
-        v-model="learningActivity"
-        :items="learningActivities"
-        :disabled="disabled"
-        box
-        chips
-        clearable
-        :label="translateMetadataString('learningActivity')"
-        multiple
-        deletableChips
-        :menu-props="menuProps"
-        :rules="learningActivityRules"
-        :attach="attach"
-      />
-    </template>
-  </DropdownWrapper>
+  <div>
+    <slot name="prependOptions"></slot>
+    <ExpandableSelect
+      v-model="learningActivity"
+      multiple
+      :disabled="disabled"
+      :expanded="expanded"
+      :options="learningActivities"
+      :hideLabel="hideLabel"
+      :rules="learningActivityRules"
+      :label="translateMetadataString('learningActivity')"
+    />
+  </div>
 
 </template>
 
@@ -27,11 +22,11 @@
   import { LearningActivities } from 'shared/constants';
   import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
   import { getLearningActivityValidators, translateValidator } from 'shared/utils/validation';
-  import DropdownWrapper from 'shared/views/form/DropdownWrapper';
+  import ExpandableSelect from 'shared/views/form/ExpandableSelect';
 
   export default {
     name: 'LearningActivityOptions',
-    components: { DropdownWrapper },
+    components: { ExpandableSelect },
     mixins: [constantsTranslationMixin, metadataTranslationMixin],
     props: {
       value: {
@@ -42,6 +37,14 @@
         type: Boolean,
         default: false,
       },
+      expanded: {
+        type: Boolean,
+        default: false,
+      },
+      hideLabel: {
+        type: Boolean,
+        default: false,
+      },
     },
     computed: {
       learningActivity: {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/ResourcesNeededOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue
similarity index 100%
rename from contentcuration/contentcuration/frontend/channelEdit/components/edit/ResourcesNeededOptions.vue
rename to contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue
diff --git a/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue b/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue
index e04db4b278..74cc6bb90a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue
@@ -145,6 +145,7 @@
         } else {
           const newValueModel = { ...this.valueModel };
           delete newValueModel[optionId];
+          this.valueModel = newValueModel;
         }
       },
     },

From 7c26aa04e75c1eef0dda74e71501b3830a6e9ca0 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 4 Mar 2024 11:36:22 -0500
Subject: [PATCH 05/11] Add ResourcesNeeded Options

---
 .../QuickEditModal/EditBooleanMapModal.vue    | 10 ++--
 .../EditResourcesNeededModal.vue              | 13 ++---
 .../LearningActivityOptions.vue               |  4 +-
 .../views/contentNodeFields/LevelsOptions.vue |  2 +-
 .../ResourcesNeededOptions.vue                | 55 ++++++++++---------
 .../__tests__/learningActivityOptions.spec.js |  0
 .../__tests__/resourcesNeededOptions.spec.js  |  0
 .../shared/views/form/ExpandableSelect.vue    | 14 ++++-
 8 files changed, 55 insertions(+), 43 deletions(-)
 rename contentcuration/contentcuration/frontend/{channelEdit/components/edit => shared/views/contentNodeFields}/__tests__/learningActivityOptions.spec.js (100%)
 rename contentcuration/contentcuration/frontend/{channelEdit/components/edit => shared/views/contentNodeFields}/__tests__/resourcesNeededOptions.spec.js (100%)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
index e2d2ffa5e4..ad93043127 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
@@ -108,6 +108,11 @@
         };
       },
     },
+    watch: {
+      selectedValues() {
+        this.validate();
+      },
+    },
     created() {
       const optionsNodes = {};
 
@@ -173,11 +178,6 @@
         this.close();
       },
     },
-    watch: {
-      selectedValues() {
-        this.validate();
-      }
-    },
     $trs: {
       saveAction: 'Save',
       cancelAction: 'Cancel',
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditResourcesNeededModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditResourcesNeededModal.vue
index c281e7a111..658baefa3d 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditResourcesNeededModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditResourcesNeededModal.vue
@@ -5,8 +5,8 @@
     isDescendantsUpdatable
     :title="$tr('editResourcesNeededTitle')"
     :nodeIds="nodeIds"
-    :options="resourcesOptions"
     :confirmationMessage="$tr('editedResourcesNeeded', { count: nodeIds.length })"
+    :inputComponent="ResourcesNeededOptionsComponent"
     @close="close"
   />
 
@@ -16,15 +16,13 @@
 <script>
 
   import EditBooleanMapModal from './EditBooleanMapModal';
-  import { ResourcesNeededTypes, ResourcesNeededOptions } from 'shared/constants';
-  import { metadataTranslationMixin } from 'shared/mixins';
+  import ResourcesNeededOptions from 'shared/views/contentNodeFields/ResourcesNeededOptions';
 
   export default {
     name: 'EditResourcesNeededModal',
     components: {
       EditBooleanMapModal,
     },
-    mixins: [metadataTranslationMixin],
     props: {
       nodeIds: {
         type: Array,
@@ -32,11 +30,8 @@
       },
     },
     computed: {
-      resourcesOptions() {
-        return ResourcesNeededOptions.map(key => ({
-          label: this.translateMetadataString(key),
-          value: ResourcesNeededTypes[key],
-        }));
+      ResourcesNeededOptionsComponent() {
+        return ResourcesNeededOptions;
       },
     },
     methods: {
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
index f8d718d301..4ea96eb78d 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
@@ -20,9 +20,9 @@
 
   import camelCase from 'lodash/camelCase';
   import { LearningActivities } from 'shared/constants';
+  import ExpandableSelect from 'shared/views/form/ExpandableSelect';
   import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
   import { getLearningActivityValidators, translateValidator } from 'shared/utils/validation';
-  import ExpandableSelect from 'shared/views/form/ExpandableSelect';
 
   export default {
     name: 'LearningActivityOptions',
@@ -30,7 +30,7 @@
     mixins: [constantsTranslationMixin, metadataTranslationMixin],
     props: {
       value: {
-        type: Array,
+        type: [Array, Object],
         default: () => [],
       },
       disabled: {
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
index 3fcfc2a554..4b17cd0b82 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
@@ -27,7 +27,7 @@
     mixins: [constantsTranslationMixin, metadataTranslationMixin],
     props: {
       value: {
-        type: Array,
+        type: [Array, Object],
         default: () => [],
       },
       expanded: {
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue
index e10ddb3913..595713e49e 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue
@@ -1,42 +1,43 @@
 <template>
 
-  <DropdownWrapper>
-    <template #default="{ attach, menuProps }">
-      <VSelect
-        ref="need"
-        v-model="need"
-        :items="resources"
-        box
-        chips
-        :label="$tr('resourcesNeededLabel')"
-        multiple
-        deletableChips
-        clearable
-        :menu-props="menuProps"
-        :attach="attach"
-        :hint="hint"
-        persistent-hint
-      />
-    </template>
-  </DropdownWrapper>
+  <div>
+    <slot name="prependOptions"></slot>
+    <ExpandableSelect
+      v-model="need"
+      multiple
+      :expanded="expanded"
+      :options="resources"
+      :hideLabel="hideLabel"
+      :label="$tr('resourcesNeededLabel')"
+      :hint="hint"
+    />
+  </div>
 
 </template>
 
 <script>
 
+  import ExpandableSelect from 'shared/views/form/ExpandableSelect';
   import { ResourcesNeededTypes, ResourcesNeededOptions } from 'shared/constants';
   import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
-  import DropdownWrapper from 'shared/views/form/DropdownWrapper';
 
   export default {
     name: 'ResourcesNeededOptions',
-    components: { DropdownWrapper },
+    components: { ExpandableSelect },
     mixins: [constantsTranslationMixin, metadataTranslationMixin],
     props: {
       value: {
-        type: Array,
+        type: [Array, Object],
         default: () => [],
       },
+      expanded: {
+        type: Boolean,
+        default: false,
+      },
+      hideLabel: {
+        type: Boolean,
+        default: false,
+      },
     },
     computed: {
       need: {
@@ -54,9 +55,13 @@
         }));
       },
       hint() {
-        return this.value && this.value.includes(ResourcesNeededTypes.OTHER_SUPPLIES)
-          ? this.$tr('furtherExplanation')
-          : '';
+        if (Array.isArray(this.value) && this.value.includes(ResourcesNeededTypes.OTHER_SUPPLIES)) {
+          return this.$tr('furtherExplanation');
+        }
+        if (this.value && this.value[ResourcesNeededTypes.OTHER_SUPPLIES]) {
+          return this.$tr('furtherExplanation');
+        }
+        return '';
       },
     },
     $trs: {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/learningActivityOptions.spec.js b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/learningActivityOptions.spec.js
similarity index 100%
rename from contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/learningActivityOptions.spec.js
rename to contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/learningActivityOptions.spec.js
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/resourcesNeededOptions.spec.js b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/resourcesNeededOptions.spec.js
similarity index 100%
rename from contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/resourcesNeededOptions.spec.js
rename to contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/resourcesNeededOptions.spec.js
diff --git a/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue b/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue
index 74cc6bb90a..778e8fda42 100644
--- a/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue
@@ -21,6 +21,8 @@
         :multiple="multiple"
         :clearable="multiple"
         :deletableChips="multiple"
+        :hint="hint"
+        :persistent-hint="!!hint"
         @focus="$emit('focus')"
       />
     </template>
@@ -54,6 +56,12 @@
         />
       </template>
     </div>
+    <p
+      v-if="hint"
+      :style="{ color: $themeTokens.annotation }"
+    >
+      {{ hint }}
+    </p>
 
   </div>
 
@@ -69,7 +77,7 @@
     components: { DropdownWrapper },
     props: {
       value: {
-        type: String,
+        type: [String, Object, Array],
         required: false,
         default: '',
       },
@@ -113,6 +121,10 @@
         type: Boolean,
         default: false,
       },
+      hint: {
+        type: String,
+        default: '',
+      },
     },
     computed: {
       valueModel: {

From 6d4d498dc1ee5131d09a83392b1ae0dbd7c6745e Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 4 Mar 2024 11:36:34 -0500
Subject: [PATCH 06/11] fix tests

---
 .../__tests__/EditBooleanMapModal.spec.js     | 351 +-----------------
 1 file changed, 15 insertions(+), 336 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js
index aaeb12708b..ac3a247854 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js
@@ -1,8 +1,11 @@
 import Vuex from 'vuex';
 import { mount } from '@vue/test-utils';
+import camelCase from 'lodash/camelCase';
 import EditBooleanMapModal from '../EditBooleanMapModal';
-import { Categories } from 'shared/constants';
+import { metadataTranslationMixin } from 'shared/mixins';
 import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
+import { Categories } from 'shared/constants';
+import CategoryOptions from 'shared/views/contentNodeFields/CategoryOptions';
 
 let nodes;
 
@@ -16,9 +19,12 @@ const CheckboxValue = {
   INDETERMINATE: 'INDETERMINATE',
 };
 
+const { translateMetadataString } = metadataTranslationMixin.methods;
+
 const categoriesLookup = {};
 Object.entries(Categories).forEach(([key, value]) => {
-  categoriesLookup[key] = value;
+  const newKey = translateMetadataString(camelCase(key));
+  categoriesLookup[newKey] = value;
 });
 
 const getOptionsValues = wrapper => {
@@ -39,14 +45,6 @@ const getOptionsValues = wrapper => {
   return categories;
 };
 
-const getOptionsChips = wrapper => {
-  const chips = wrapper.findAll('[data-test="option-chip"]');
-  return chips.wrappers.map(chip => {
-    const [{ text } = {}] = chip.vm.$slots.default || [];
-    return categoriesLookup[text.trim()] || text.trim();
-  });
-};
-
 const findOptionCheckbox = (wrapper, category) => {
   const checkboxes = wrapper.findAll('[data-test="option-checkbox"]');
   return checkboxes.wrappers.find(checkbox => {
@@ -61,7 +59,12 @@ const options = Object.entries(Categories).map(([key, value]) => {
     value,
   };
 });
-const makeWrapper = ({ nodeIds, field = 'categories', ...restOptions }) => {
+const makeWrapper = ({
+  nodeIds,
+  field = 'categories',
+  inputComponent = CategoryOptions,
+  ...restOptions
+}) => {
   return mount(EditBooleanMapModal, {
     store,
     propsData: {
@@ -69,6 +72,7 @@ const makeWrapper = ({ nodeIds, field = 'categories', ...restOptions }) => {
       options,
       title: 'Edit Categories',
       field,
+      inputComponent,
       autocompleteLabel: 'Select option',
       confirmationMessage: 'edited',
       ...restOptions,
@@ -151,27 +155,6 @@ describe('EditBooleanMapModal', () => {
         expect(foundationsValue).toBe(CheckboxValue.CHECKED);
       });
 
-      test('checkbox options should be selected depending on the options set for a single node - learner_needs', () => {
-        nodes['node1'].learner_needs = {
-          [Categories.DAILY_LIFE]: true,
-          [Categories.FOUNDATIONS]: true,
-        };
-
-        const wrapper = makeWrapper({ nodeIds: ['node1'], field: 'learner_needs' });
-
-        const optionsValues = getOptionsValues(wrapper);
-        const {
-          [Categories.DAILY_LIFE]: dailyLifeValue,
-          [Categories.FOUNDATIONS]: foundationsValue,
-          ...otheroptionsValues
-        } = optionsValues;
-        expect(
-          Object.values(otheroptionsValues).every(value => value === CheckboxValue.UNCHECKED)
-        ).toBeTruthy();
-        expect(dailyLifeValue).toBe(CheckboxValue.CHECKED);
-        expect(foundationsValue).toBe(CheckboxValue.CHECKED);
-      });
-
       test('checkbox option should be checked if all nodes have the same option set', () => {
         nodes['node1'].categories = {
           [Categories.DAILY_LIFE]: true,
@@ -212,233 +195,6 @@ describe('EditBooleanMapModal', () => {
         expect(dailyLifeValue).toBe(CheckboxValue.CHECKED);
         expect(foundationsValue).toBe(CheckboxValue.INDETERMINATE);
       });
-
-      describe('Showing hierarchy', () => {
-        test('just root categories should be selected depending on the categories set for a single node', () => {
-          nodes['node1'].categories = {
-            [Categories.DAILY_LIFE]: true, // root categories
-            [Categories.FOUNDATIONS]: true,
-          };
-
-          const wrapper = makeWrapper({ nodeIds: ['node1'], showHierarchy: true });
-
-          const optionsValues = getOptionsValues(wrapper);
-          const {
-            [Categories.DAILY_LIFE]: dailyLifeValue,
-            [Categories.FOUNDATIONS]: foundationsValue,
-            ...otheroptionsValues
-          } = optionsValues;
-          expect(
-            Object.values(otheroptionsValues).every(value => value === CheckboxValue.UNCHECKED)
-          ).toBeTruthy();
-          expect(dailyLifeValue).toBe(CheckboxValue.CHECKED);
-          expect(foundationsValue).toBe(CheckboxValue.CHECKED);
-        });
-
-        test('parent categories should be selected depending on the categories set for a single node when showing hierarchy', () => {
-          nodes['node1'].categories = {
-            [Categories.DIVERSITY]: true, // Daily Life -> Diversity
-          };
-
-          const wrapper = makeWrapper({ nodeIds: ['node1'], showHierarchy: true });
-
-          const optionsValues = getOptionsValues(wrapper);
-          const {
-            [Categories.DAILY_LIFE]: dailyLifeValue,
-            [Categories.DIVERSITY]: diversityValue,
-            ...otheroptionsValues
-          } = optionsValues;
-
-          expect(
-            Object.values(otheroptionsValues).every(value => value === CheckboxValue.UNCHECKED)
-          ).toBeTruthy();
-          expect(dailyLifeValue).toBe(CheckboxValue.CHECKED);
-          expect(diversityValue).toBe(CheckboxValue.CHECKED);
-        });
-
-        test('parent categories should not be selected when not showing hierarchy', () => {
-          nodes['node1'].categories = {
-            [Categories.DIVERSITY]: true, // Daily Life -> Diversity
-          };
-
-          const wrapper = makeWrapper({ nodeIds: ['node1'], showHierarchy: false });
-
-          const optionsValues = getOptionsValues(wrapper);
-          const { [Categories.DIVERSITY]: diversityValue, ...otheroptionsValues } = optionsValues;
-
-          expect(
-            Object.values(otheroptionsValues).every(value => value === CheckboxValue.UNCHECKED)
-          ).toBeTruthy();
-          expect(diversityValue).toBe(CheckboxValue.CHECKED);
-        });
-
-        test('parent checkbox category should be indeterminate if not all nodes have the same parent categories set', () => {
-          nodes['node1'].categories = {
-            [Categories.DIVERSITY]: true, // Daily Life -> Diversity
-          };
-
-          const wrapper = makeWrapper({ nodeIds: ['node1', 'node2'], showHierarchy: true });
-
-          const optionsValues = getOptionsValues(wrapper);
-          const {
-            [Categories.DAILY_LIFE]: dailyLifeValue,
-            [Categories.DIVERSITY]: diversityValue,
-          } = optionsValues;
-          expect(dailyLifeValue).toBe(CheckboxValue.INDETERMINATE);
-          expect(diversityValue).toBe(CheckboxValue.INDETERMINATE);
-        });
-
-        test('multiple parent checkbox categories should be indeterminate if not all nodes have the same parent categories set', () => {
-          nodes['node1'].categories = {
-            [Categories.DIVERSITY]: true, // Daily Life -> Diversity
-          };
-          nodes['node2'].categories = {
-            [Categories.GUIDES]: true, // For teachers -> Guides
-          };
-
-          const wrapper = makeWrapper({ nodeIds: ['node1', 'node2'], showHierarchy: true });
-
-          const optionsValues = getOptionsValues(wrapper);
-          const {
-            [Categories.DAILY_LIFE]: dailyLifeValue,
-            [Categories.FOR_TEACHERS]: forTeachersValue,
-          } = optionsValues;
-          expect(dailyLifeValue).toBe(CheckboxValue.INDETERMINATE);
-          expect(forTeachersValue).toBe(CheckboxValue.INDETERMINATE);
-        });
-
-        test('parent checkbox category should be checked if all nodes have the same parent categories set', () => {
-          nodes['node1'].categories = {
-            [Categories.DIVERSITY]: true, // Daily Life -> Diversity
-          };
-          nodes['node2'].categories = {
-            [Categories.CURRENT_EVENTS]: true, // Daily Life -> Current Events
-          };
-
-          const wrapper = makeWrapper({ nodeIds: ['node1', 'node2'], showHierarchy: true });
-
-          const optionsValues = getOptionsValues(wrapper);
-          const {
-            [Categories.DAILY_LIFE]: dailyLifeValue,
-            [Categories.DIVERSITY]: diversityValue,
-            [Categories.CURRENT_EVENTS]: currentEventsValue,
-          } = optionsValues;
-          expect(diversityValue).toBe(CheckboxValue.INDETERMINATE);
-          expect(currentEventsValue).toBe(CheckboxValue.INDETERMINATE);
-          expect(dailyLifeValue).toBe(CheckboxValue.CHECKED);
-        });
-      });
-    });
-
-    describe('Showing autocomplete', () => {
-      test('no chip should be displayed if nodes does not have options set', () => {
-        const wrapper = makeWrapper({ nodeIds: ['node1'], showAutocomplete: true });
-
-        const categoriesChips = getOptionsChips(wrapper);
-        expect(categoriesChips.length).toBe(0);
-      });
-
-      test('should render selected options chips if showing autocomplete - categories', () => {
-        nodes['node1'].categories = {
-          [Categories.DAILY_LIFE]: true,
-          [Categories.FOUNDATIONS]: true,
-        };
-
-        const wrapper = makeWrapper({ nodeIds: ['node1'], showAutocomplete: true });
-
-        const categoriesChips = getOptionsChips(wrapper);
-        expect(categoriesChips.length).toBe(2);
-        expect(categoriesChips).toContain(Categories.DAILY_LIFE);
-        expect(categoriesChips).toContain(Categories.FOUNDATIONS);
-      });
-
-      test('should render selected options chips  if showing autocomplete - learner_needs', () => {
-        nodes['node1'].learner_needs = {
-          [Categories.DAILY_LIFE]: true,
-          [Categories.FOUNDATIONS]: true,
-        };
-
-        const wrapper = makeWrapper({
-          nodeIds: ['node1'],
-          field: 'learner_needs',
-          showAutocomplete: true,
-        });
-
-        const categoriesChips = getOptionsChips(wrapper);
-        expect(categoriesChips.length).toBe(2);
-        expect(categoriesChips).toContain(Categories.DAILY_LIFE);
-        expect(categoriesChips).toContain(Categories.FOUNDATIONS);
-      });
-
-      test('should not render selected options chips if not showing autocomplete', () => {
-        nodes['node1'].categories = {
-          [Categories.DAILY_LIFE]: true,
-          [Categories.FOUNDATIONS]: true,
-        };
-
-        const wrapper = makeWrapper({ nodeIds: ['node1'], showAutocomplete: false });
-
-        const categoriesChips = getOptionsChips(wrapper);
-        expect(categoriesChips.length).toBe(0);
-      });
-
-      test('should not render parent category chips even though showing hierarchy', () => {
-        nodes['node1'].categories = {
-          [Categories.DIVERSITY]: true, // Daily Life -> Diversity
-        };
-
-        const wrapper = makeWrapper({
-          nodeIds: ['node1'],
-          showAutocomplete: true,
-          showHierarchy: true,
-        });
-
-        const categoriesChips = getOptionsChips(wrapper);
-        expect(categoriesChips.length).toBe(1);
-        expect(categoriesChips).toContain(Categories.DIVERSITY);
-      });
-
-      test('should render "Mixed" chip if there are mixed options set', () => {
-        nodes['node1'].categories = {
-          [Categories.DAILY_LIFE]: true,
-          [Categories.FOUNDATIONS]: true,
-        };
-
-        const wrapper = makeWrapper({ nodeIds: ['node1', 'node2'], showAutocomplete: true });
-
-        const categoriesChips = getOptionsChips(wrapper);
-        expect(categoriesChips.length).toBe(1);
-        expect(categoriesChips).toContain('Mixed');
-      });
-
-      test('should filter options based on autocomplete search query', () => {
-        const searchQuery = 'drama';
-
-        const wrapper = makeWrapper({ nodeIds: ['node1'], showAutocomplete: true });
-        const animationFrameId = requestAnimationFrame(() => {
-          wrapper.find('[data-test="options-autocomplete"]').setValue(searchQuery);
-
-          const categoriesOptions = wrapper.findAll('[data-test="option-checkbox"]');
-          categoriesOptions.wrappers.forEach(checkbox => {
-            const { label } = checkbox.vm.$props || {};
-            expect(label.toLowerCase()).toContain(searchQuery);
-          });
-          cancelAnimationFrame(animationFrameId);
-        });
-      });
-
-      test('should flatten options if autocomplete search query is not empty', () => {
-        const wrapper = makeWrapper({ nodeIds: ['node1'], showAutocomplete: true });
-        const animationFrameId = requestAnimationFrame(() => {
-          wrapper.find('[data-test="options-autocomplete"]').setValue('a');
-
-          const categoriesOptions = wrapper.findAll('[data-test="option-checkbox"]');
-          categoriesOptions.wrappers.forEach(checkbox => {
-            expect(checkbox.element.style.paddingLeft).toBeFalsy();
-          });
-          cancelAnimationFrame(animationFrameId);
-        });
-      });
     });
   });
 
@@ -458,55 +214,6 @@ describe('EditBooleanMapModal', () => {
     expect(resourcesCounter.text()).toContain('4');
   });
 
-  test('should display hierarchy of options using more padding on each child level if showing hierarchy', () => {
-    const wrapper = makeWrapper({ nodeIds: ['node1'], showHierarchy: true });
-
-    const categoriesOptions = wrapper.findAll('[data-test="option-checkbox"]');
-    let schoolPadding;
-    let socialSciencesPadding; // school -> social sciences
-    let anthropologyPadding; // school -> social sciences -> anthropology
-    categoriesOptions.wrappers.forEach(checkbox => {
-      const { label } = checkbox.vm.$props || {};
-      const padding = checkbox.element.style.paddingLeft;
-      const paddingNumber = parseInt(padding.replace('px', ''));
-      if (label === 'SCHOOL') {
-        schoolPadding = paddingNumber;
-      } else if (label === 'SOCIAL_SCIENCES') {
-        socialSciencesPadding = paddingNumber;
-      } else if (label === 'ANTHROPOLOGY') {
-        anthropologyPadding = paddingNumber;
-      }
-    });
-
-    expect(schoolPadding).toBeLessThan(socialSciencesPadding);
-    expect(socialSciencesPadding).toBeLessThan(anthropologyPadding);
-  });
-
-  test('should not display hierarchy of options if not showing hierarchy', () => {
-    const wrapper = makeWrapper({ nodeIds: ['node1'], showHierarchy: false });
-
-    const categoriesOptions = wrapper.findAll('[data-test="option-checkbox"]');
-    let schoolPadding;
-    let socialSciencesPadding; // school -> social sciences
-    let anthropologyPadding; // school -> social sciences -> anthropology
-    categoriesOptions.wrappers.forEach(checkbox => {
-      const { label } = checkbox.vm.$props || {};
-      const padding = checkbox.element.style.paddingLeft;
-      const paddingNumber = parseInt(padding.replace('px', ''));
-      if (label === 'school') {
-        schoolPadding = paddingNumber;
-      } else if (label === 'socialSciences') {
-        socialSciencesPadding = paddingNumber;
-      } else if (label === 'anthropology') {
-        anthropologyPadding = paddingNumber;
-      }
-    });
-
-    expect(schoolPadding).toBeFalsy();
-    expect(socialSciencesPadding).toBeFalsy();
-    expect(anthropologyPadding).toBeFalsy();
-  });
-
   describe('Submit', () => {
     test('should call updateContentNode with the right options on success submit - categories', () => {
       const wrapper = makeWrapper({ nodeIds: ['node1', 'node2'] });
@@ -536,34 +243,6 @@ describe('EditBooleanMapModal', () => {
       });
     });
 
-    test('should call updateContentNode with the right options on success submit - learner_needs', () => {
-      const wrapper = makeWrapper({ nodeIds: ['node1', 'node2'] });
-
-      const schoolCheckbox = findOptionCheckbox(wrapper, Categories.SCHOOL);
-      schoolCheckbox.element.click();
-      const sociologyCheckbox = findOptionCheckbox(wrapper, Categories.SOCIOLOGY);
-      sociologyCheckbox.element.click();
-
-      const animationFrameId = requestAnimationFrame(() => {
-        wrapper.find('[data-test="edit-booleanMap-modal"]').vm.$emit('submit');
-        expect(contentNodeActions.updateContentNode).toHaveBeenCalledWith(expect.anything(), {
-          id: 'node1',
-          learner_needs: {
-            [Categories.SCHOOL]: true,
-            [Categories.SOCIOLOGY]: true,
-          },
-        });
-        expect(contentNodeActions.updateContentNode).toHaveBeenCalledWith(expect.anything(), {
-          id: 'node2',
-          learner_needs: {
-            [Categories.SCHOOL]: true,
-            [Categories.SOCIOLOGY]: true,
-          },
-        });
-        cancelAnimationFrame(animationFrameId);
-      });
-    });
-
     test('should emit close event on success submit', () => {
       const wrapper = makeWrapper({ nodeIds: ['node1'] });
 

From 7943411e9463cef8d1ecf2d1ee8c895bc78c2935 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Wed, 6 Mar 2024 07:06:59 -0500
Subject: [PATCH 07/11] Add comments

---
 .../QuickEditModal/EditBooleanMapModal.vue    | 13 ++++++++
 .../QuickEditModal/EditCategoriesModal.vue    | 30 +------------------
 .../EditLearningActivitiesModal.vue           |  9 +-----
 .../QuickEditModal/EditLevelsModal.vue        |  9 +-----
 .../EditResourcesNeededModal.vue              |  7 +----
 .../contentNodeFields/CategoryOptions.vue     | 14 +++++++++
 .../LearningActivityOptions.vue               | 10 +++++++
 .../views/contentNodeFields/LevelsOptions.vue | 10 +++++++
 .../ResourcesNeededOptions.vue                | 10 +++++++
 9 files changed, 61 insertions(+), 51 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
index ad93043127..9339bf2969 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
@@ -40,6 +40,11 @@
 
 <script>
 
+  /**
+   * EditBooleanMapModal
+   * This component is a modal responsible for reusing the logic of saving
+   * the edition of a boolean map field for multiple nodes.
+   */
   import { mapGetters, mapActions } from 'vuex';
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
   import { getInvalidText } from 'shared/utils/validation';
@@ -71,6 +76,14 @@
         type: Array,
         default: () => [],
       },
+      /**
+       * inputComponent is a component that will be used to render the input(s)
+       * that will be used to edit the boolean map field.
+       * It should be a component that accepts a v-model prop and a nodeIds prop.
+       *
+       * The v-model prop should support an object with the same structure as the
+       * `this.selectedValues` data property.
+       */
       inputComponent: {
         type: Object,
         required: true,
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCategoriesModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCategoriesModal.vue
index 23ce120f06..83a3975346 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCategoriesModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCategoriesModal.vue
@@ -1,18 +1,13 @@
 <template>
 
   <EditBooleanMapModal
-    showHierarchy
-    showAutocomplete
     field="categories"
     isDescendantsUpdatable
     :title="$tr('editCategories')"
     :nodeIds="nodeIds"
-    :options="categoriesOptions"
-    :autocompleteLabel="$tr('selectCategory')"
-    :emptyText="$tr('emptyCategoriesSearch')"
     :confirmationMessage="$tr('editedCategories', { count: nodeIds.length })"
     :inputComponent="CategoryOptionsComponent"
-    @close="close"
+    @close="() => $emit('close')"
   />
 
 </template>
@@ -20,10 +15,7 @@
 
 <script>
 
-  import camelCase from 'lodash/camelCase';
   import EditBooleanMapModal from './EditBooleanMapModal.vue';
-  import { metadataTranslationMixin } from 'shared/mixins';
-  import { getSortedCategories } from 'shared/utils/helpers';
   import CategoryOptions from 'shared/views/contentNodeFields/CategoryOptions';
 
   export default {
@@ -31,41 +23,21 @@
     components: {
       EditBooleanMapModal,
     },
-    mixins: [metadataTranslationMixin],
     props: {
       nodeIds: {
         type: Array,
         required: true,
       },
     },
-    data() {
-      return {
-        categoriesOptions: [],
-      };
-    },
     computed: {
       CategoryOptionsComponent() {
         return CategoryOptions;
       },
     },
-    created() {
-      const categories = getSortedCategories();
-      this.categoriesOptions = Object.entries(categories).map(([id, category]) => ({
-        value: id,
-        label: this.translateMetadataString(camelCase(category)),
-      }));
-    },
-    methods: {
-      close() {
-        this.$emit('close');
-      },
-    },
     $trs: {
       editCategories: 'Edit Categories',
       editedCategories:
         'Edited categories for {count, number, integer} {count, plural, one {resource} other {resources}}',
-      selectCategory: 'Select / Type Category',
-      emptyCategoriesSearch: 'No categories matches the search',
     },
   };
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLearningActivitiesModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLearningActivitiesModal.vue
index 96733650da..0ce3e6acd6 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLearningActivitiesModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLearningActivitiesModal.vue
@@ -8,7 +8,7 @@
     :validators="learningActivityValidators"
     :inputComponent="LearningActivityOptionsComponent"
     :confirmationMessage="$tr('editedLearningActivities', { count: nodeIds.length })"
-    @close="close"
+    @close="() => $emit('close')"
   />
 
 </template>
@@ -17,7 +17,6 @@
 <script>
 
   import EditBooleanMapModal from './EditBooleanMapModal';
-  import { metadataTranslationMixin } from 'shared/mixins';
   import { getLearningActivityValidators } from 'shared/utils/validation';
   import LearningActivityOptions from 'shared/views/contentNodeFields/LearningActivityOptions';
 
@@ -26,7 +25,6 @@
     components: {
       EditBooleanMapModal,
     },
-    mixins: [metadataTranslationMixin],
     props: {
       nodeIds: {
         type: Array,
@@ -41,11 +39,6 @@
         return LearningActivityOptions;
       },
     },
-    methods: {
-      close() {
-        this.$emit('close');
-      },
-    },
     $trs: {
       editLearningActivitiesTitle: 'Edit Learning Activities',
       editedLearningActivities:
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLevelsModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLevelsModal.vue
index 04b0bcc53f..6e83919baf 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLevelsModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLevelsModal.vue
@@ -7,7 +7,7 @@
     :nodeIds="nodeIds"
     :inputComponent="LevelsOptionsComponent"
     :confirmationMessage="$tr('editedLevels', { count: nodeIds.length })"
-    @close="close"
+    @close="() => $emit('close')"
   />
 
 </template>
@@ -16,7 +16,6 @@
 <script>
 
   import EditBooleanMapModal from './EditBooleanMapModal';
-  import { metadataTranslationMixin } from 'shared/mixins';
   import LevelsOptions from 'shared/views/contentNodeFields/LevelsOptions';
 
   export default {
@@ -24,7 +23,6 @@
     components: {
       EditBooleanMapModal,
     },
-    mixins: [metadataTranslationMixin],
     props: {
       nodeIds: {
         type: Array,
@@ -36,11 +34,6 @@
         return LevelsOptions;
       },
     },
-    methods: {
-      close() {
-        this.$emit('close');
-      },
-    },
     $trs: {
       editLevelsTitle: 'What Levels',
       editedLevels:
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditResourcesNeededModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditResourcesNeededModal.vue
index 658baefa3d..4fc5cefcb5 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditResourcesNeededModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditResourcesNeededModal.vue
@@ -7,7 +7,7 @@
     :nodeIds="nodeIds"
     :confirmationMessage="$tr('editedResourcesNeeded', { count: nodeIds.length })"
     :inputComponent="ResourcesNeededOptionsComponent"
-    @close="close"
+    @close="() => $emit('close')"
   />
 
 </template>
@@ -34,11 +34,6 @@
         return ResourcesNeededOptions;
       },
     },
-    methods: {
-      close() {
-        this.$emit('close');
-      },
-    },
     $trs: {
       editResourcesNeededTitle: 'What will you need?',
       editedResourcesNeeded:
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
index 7526bf1866..2b42489a5b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
@@ -111,10 +111,24 @@
     components: { DropdownWrapper },
     mixins: [constantsTranslationMixin, metadataTranslationMixin],
     props: {
+      /**
+       * It can receive a value as an array of strings of the selected categories, or
+       * an object with the following structure:
+       * {
+       *  [categoryId]: true | [nodeId1, nodeId2, ...]
+       * }
+       * If the value is true, it means that the option is selected for all nodes
+       * If the value is an array of nodeIds, it means that the option is selected
+       * just for those nodes
+       */
       value: {
         type: [Array, Object],
         default: () => [],
       },
+      /**
+       * An array of nodeIds that we are editing. If none, we will asume that we
+       * are editing just one node
+       */
       nodeIds: {
         type: Array,
         default: () => [],
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
index 4ea96eb78d..4f3a0ca2ac 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
@@ -29,6 +29,16 @@
     components: { ExpandableSelect },
     mixins: [constantsTranslationMixin, metadataTranslationMixin],
     props: {
+      /**
+       * It can receive a value as an array of strings of the selected learning activities, or
+       * an object with the following structure:
+       * {
+       *  [learningActivityId]: true | [nodeId1, nodeId2, ...]
+       * }
+       * If the value is true, it means that the option is selected for all nodes
+       * If the value is an array of nodeIds, it means that the option is selected
+       * just for those nodes
+       */
       value: {
         type: [Array, Object],
         default: () => [],
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
index 4b17cd0b82..f54e2166a7 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
@@ -26,6 +26,16 @@
     components: { ExpandableSelect },
     mixins: [constantsTranslationMixin, metadataTranslationMixin],
     props: {
+      /**
+       * It can receive a value as an array of strings of the selected levels, or
+       * an object with the following structure:
+       * {
+       *  [levelId]: true | [nodeId1, nodeId2, ...]
+       * }
+       * If the value is true, it means that the option is selected for all nodes
+       * If the value is an array of nodeIds, it means that the option is selected
+       * just for those nodes
+       */
       value: {
         type: [Array, Object],
         default: () => [],
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue
index 595713e49e..d647d954b3 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue
@@ -26,6 +26,16 @@
     components: { ExpandableSelect },
     mixins: [constantsTranslationMixin, metadataTranslationMixin],
     props: {
+      /**
+       * It can receive a value as an array of strings of the selected resouces needed, or
+       * an object with the following structure:
+       * {
+       *  [resourceNeededId]: true | [nodeId1, nodeId2, ...]
+       * }
+       * If the value is true, it means that the option is selected for all nodes
+       * If the value is an array of nodeIds, it means that the option is selected
+       * just for those nodes
+       */
       value: {
         type: [Array, Object],
         default: () => [],

From 6d1577b34a99a08cfceca96e21cc66abc28c1528 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Tue, 12 Mar 2024 15:35:45 -0500
Subject: [PATCH 08/11] Removing options components as prop

---
 .../QuickEditModal/EditBooleanMapModal.vue    | 32 +++++++++++--------
 .../QuickEditModal/EditCategoriesModal.vue    | 19 +++++++----
 .../EditLearningActivitiesModal.vue           | 16 +++++++---
 .../QuickEditModal/EditLevelsModal.vue        | 19 +++++++----
 .../EditResourcesNeededModal.vue              | 19 +++++++----
 .../contentNodeFields/CategoryOptions.vue     |  2 --
 .../LearningActivityOptions.vue               | 23 ++++++-------
 .../views/contentNodeFields/LevelsOptions.vue | 19 +++++------
 .../ResourcesNeededOptions.vue                | 21 ++++++------
 9 files changed, 94 insertions(+), 76 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
index 9339bf2969..1452d578cd 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
@@ -11,25 +11,31 @@
     <p data-test="resources-selected-message">
       {{ $tr('resourcesSelected', { count: nodeIds.length }) }}
     </p>
+    <template v-if="isDescendantsUpdatable && isTopicSelected">
+      <KCheckbox
+        :checked="updateDescendants"
+        data-test="update-descendants-checkbox"
+        :label="$tr('updateDescendantsCheckbox')"
+        @change="(value) => { updateDescendants = value }"
+      />
+      <hr
+        :style="dividerStyle"
+      >
+    </template>
+    <slot
+      name="input"
+      :value="selectedValues"
+      :inputHandler="(value) => { selectedValues = value }"
+    ></slot>
+
     <component
       :is="inputComponent"
       v-model="selectedValues"
       expanded
       hideLabel
       :nodeIds="nodeIds"
-    >
-      <template v-if="isDescendantsUpdatable && isTopicSelected" #prependOptions>
-        <KCheckbox
-          :checked="updateDescendants"
-          data-test="update-descendants-checkbox"
-          :label="$tr('updateDescendantsCheckbox')"
-          @change="(value) => { updateDescendants = value }"
-        />
-        <hr
-          :style="dividerStyle"
-        >
-      </template>
-    </component>
+    />
+
     <span v-if="error" class="red--text">
       {{ error }}
     </span>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCategoriesModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCategoriesModal.vue
index 83a3975346..2d2d474e1e 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCategoriesModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCategoriesModal.vue
@@ -6,9 +6,18 @@
     :title="$tr('editCategories')"
     :nodeIds="nodeIds"
     :confirmationMessage="$tr('editedCategories', { count: nodeIds.length })"
-    :inputComponent="CategoryOptionsComponent"
     @close="() => $emit('close')"
-  />
+  >
+    <template #input="{ value, inputHandler }">
+      <CategoryOptions
+        expanded
+        hideLabel
+        :value="value"
+        :nodeIds="nodeIds"
+        @input="inputHandler"
+      />
+    </template>
+  </EditBooleanMapModal>
 
 </template>
 
@@ -21,6 +30,7 @@
   export default {
     name: 'EditCategoriesModal',
     components: {
+      CategoryOptions,
       EditBooleanMapModal,
     },
     props: {
@@ -29,11 +39,6 @@
         required: true,
       },
     },
-    computed: {
-      CategoryOptionsComponent() {
-        return CategoryOptions;
-      },
-    },
     $trs: {
       editCategories: 'Edit Categories',
       editedCategories:
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLearningActivitiesModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLearningActivitiesModal.vue
index 0ce3e6acd6..5bb3e1ed1e 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLearningActivitiesModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLearningActivitiesModal.vue
@@ -9,7 +9,17 @@
     :inputComponent="LearningActivityOptionsComponent"
     :confirmationMessage="$tr('editedLearningActivities', { count: nodeIds.length })"
     @close="() => $emit('close')"
-  />
+  >
+    <template #input="{ value, inputHandler }">
+      <LearningActivityOptions
+        expanded
+        hideLabel
+        :value="value"
+        :nodeIds="nodeIds"
+        @input="inputHandler"
+      />
+    </template>
+  </EditBooleanMapModal>
 
 </template>
 
@@ -24,6 +34,7 @@
     name: 'EditLearningActivitiesModal',
     components: {
       EditBooleanMapModal,
+      LearningActivityOptions,
     },
     props: {
       nodeIds: {
@@ -35,9 +46,6 @@
       learningActivityValidators() {
         return getLearningActivityValidators();
       },
-      LearningActivityOptionsComponent() {
-        return LearningActivityOptions;
-      },
     },
     $trs: {
       editLearningActivitiesTitle: 'Edit Learning Activities',
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLevelsModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLevelsModal.vue
index 6e83919baf..060465ef05 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLevelsModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLevelsModal.vue
@@ -5,10 +5,19 @@
     isDescendantsUpdatable
     :title="$tr('editLevelsTitle')"
     :nodeIds="nodeIds"
-    :inputComponent="LevelsOptionsComponent"
     :confirmationMessage="$tr('editedLevels', { count: nodeIds.length })"
     @close="() => $emit('close')"
-  />
+  >
+    <template #input="{ value, inputHandler }">
+      <LevelsOptions
+        expanded
+        hideLabel
+        :value="value"
+        :nodeIds="nodeIds"
+        @input="inputHandler"
+      />
+    </template>
+  </EditBooleanMapModal>
 
 </template>
 
@@ -21,6 +30,7 @@
   export default {
     name: 'EditLevelsModal',
     components: {
+      LevelsOptions,
       EditBooleanMapModal,
     },
     props: {
@@ -29,11 +39,6 @@
         required: true,
       },
     },
-    computed: {
-      LevelsOptionsComponent() {
-        return LevelsOptions;
-      },
-    },
     $trs: {
       editLevelsTitle: 'What Levels',
       editedLevels:
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditResourcesNeededModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditResourcesNeededModal.vue
index 4fc5cefcb5..abc4fc4a62 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditResourcesNeededModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditResourcesNeededModal.vue
@@ -6,9 +6,18 @@
     :title="$tr('editResourcesNeededTitle')"
     :nodeIds="nodeIds"
     :confirmationMessage="$tr('editedResourcesNeeded', { count: nodeIds.length })"
-    :inputComponent="ResourcesNeededOptionsComponent"
     @close="() => $emit('close')"
-  />
+  >
+    <template #input="{ value, inputHandler }">
+      <ResourcesNeededOptions
+        expanded
+        hideLabel
+        :value="value"
+        :nodeIds="nodeIds"
+        @input="inputHandler"
+      />
+    </template>
+  </EditBooleanMapModal>
 
 </template>
 
@@ -22,6 +31,7 @@
     name: 'EditResourcesNeededModal',
     components: {
       EditBooleanMapModal,
+      ResourcesNeededOptions,
     },
     props: {
       nodeIds: {
@@ -29,11 +39,6 @@
         required: true,
       },
     },
-    computed: {
-      ResourcesNeededOptionsComponent() {
-        return ResourcesNeededOptions;
-      },
-    },
     $trs: {
       editResourcesNeededTitle: 'What will you need?',
       editedResourcesNeeded:
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
index 2b42489a5b..81a2feb13a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
@@ -73,8 +73,6 @@
       </template>
     </DropdownWrapper>
 
-    <slot name="prependOptions"></slot>
-
     <div v-if="expanded" class="checkbox-list-wrapper">
       <KCheckbox
         v-for="option in filteredCategories"
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
index 4f3a0ca2ac..87df61a893 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
@@ -1,18 +1,15 @@
 <template>
 
-  <div>
-    <slot name="prependOptions"></slot>
-    <ExpandableSelect
-      v-model="learningActivity"
-      multiple
-      :disabled="disabled"
-      :expanded="expanded"
-      :options="learningActivities"
-      :hideLabel="hideLabel"
-      :rules="learningActivityRules"
-      :label="translateMetadataString('learningActivity')"
-    />
-  </div>
+  <ExpandableSelect
+    v-model="learningActivity"
+    multiple
+    :disabled="disabled"
+    :expanded="expanded"
+    :options="learningActivities"
+    :hideLabel="hideLabel"
+    :rules="learningActivityRules"
+    :label="translateMetadataString('learningActivity')"
+  />
 
 </template>
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
index f54e2166a7..7ae9b148cb 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
@@ -1,16 +1,13 @@
 <template>
 
-  <div>
-    <slot name="prependOptions"></slot>
-    <ExpandableSelect
-      v-model="level"
-      multiple
-      :expanded="expanded"
-      :options="levels"
-      :hideLabel="hideLabel"
-      :label="translateMetadataString('level')"
-    />
-  </div>
+  <ExpandableSelect
+    v-model="level"
+    multiple
+    :expanded="expanded"
+    :options="levels"
+    :hideLabel="hideLabel"
+    :label="translateMetadataString('level')"
+  />
 
 </template>
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue
index d647d954b3..828315c360 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue
@@ -1,17 +1,14 @@
 <template>
 
-  <div>
-    <slot name="prependOptions"></slot>
-    <ExpandableSelect
-      v-model="need"
-      multiple
-      :expanded="expanded"
-      :options="resources"
-      :hideLabel="hideLabel"
-      :label="$tr('resourcesNeededLabel')"
-      :hint="hint"
-    />
-  </div>
+  <ExpandableSelect
+    v-model="need"
+    multiple
+    :expanded="expanded"
+    :options="resources"
+    :hideLabel="hideLabel"
+    :label="$tr('resourcesNeededLabel')"
+    :hint="hint"
+  />
 
 </template>
 

From 6db61a0f2ee6f78c1b6b0fcb08c2f1d42fee9d83 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Thu, 14 Mar 2024 08:40:49 -0500
Subject: [PATCH 09/11] Simplifying boolean maps values

---
 .../QuickEditModal/EditBooleanMapModal.vue    | 39 ++-------
 .../EditLearningActivitiesModal.vue           |  1 -
 .../__tests__/EditBooleanMapModal.spec.js     |  2 -
 .../components/edit/DetailsTabView.vue        | 79 +++++++++++++++----
 .../contentNodeFields/CategoryOptions.vue     | 69 ++++++----------
 .../LearningActivityOptions.vue               | 20 ++---
 .../views/contentNodeFields/LevelsOptions.vue | 18 +++--
 .../ResourcesNeededOptions.vue                | 18 +++--
 .../shared/views/form/ExpandableSelect.vue    | 67 +++++++++++++---
 9 files changed, 180 insertions(+), 133 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
index 1452d578cd..ce815a5a32 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
@@ -28,14 +28,6 @@
       :inputHandler="(value) => { selectedValues = value }"
     ></slot>
 
-    <component
-      :is="inputComponent"
-      v-model="selectedValues"
-      expanded
-      hideLabel
-      :nodeIds="nodeIds"
-    />
-
     <span v-if="error" class="red--text">
       {{ error }}
     </span>
@@ -82,18 +74,6 @@
         type: Array,
         default: () => [],
       },
-      /**
-       * inputComponent is a component that will be used to render the input(s)
-       * that will be used to edit the boolean map field.
-       * It should be a component that accepts a v-model prop and a nodeIds prop.
-       *
-       * The v-model prop should support an object with the same structure as the
-       * `this.selectedValues` data property.
-       */
-      inputComponent: {
-        type: Object,
-        required: true,
-      },
     },
     data() {
       return {
@@ -102,11 +82,9 @@
         /**
          * selectedValues is an object with the following structure:
          * {
-         *  [optionId]: true | [nodeId1, nodeId2, ...]
+         *  [optionId]: [nodeId1, nodeId2, ...]
          * }
-         * If the value is true, it means that the option is selected for all nodes
-         * If the value is an array of nodeIds, it means that the option is selected
-         * just for those nodes
+         * Where nodeIds is the id of the nodes that have the option selected
          */
         selectedValues: {},
       };
@@ -144,13 +122,7 @@
           });
       });
 
-      Object.entries(optionsNodes).forEach(([key, nodeIds]) => {
-        if (nodeIds.length === this.nodeIds.length) {
-          this.selectedValues[key] = true;
-        } else {
-          this.selectedValues[key] = nodeIds;
-        }
-      });
+      this.selectedValues = optionsNodes;
     },
     methods: {
       ...mapActions('contentNode', ['updateContentNode', 'updateContentNodeDescendants']),
@@ -161,7 +133,8 @@
         if (this.validators && this.validators.length) {
           this.error = getInvalidText(
             this.validators,
-            Object.keys(this.selectedValues).filter(key => this.selectedValues[key] === true)
+            Object.keys(this.selectedValues)
+              .filter(key => this.selectedValues[key].length === this.nodes.length)
           );
         } else {
           this.error = '';
@@ -177,7 +150,7 @@
           this.nodes.map(node => {
             const fieldValue = {};
             Object.entries(this.selectedValues).forEach(([key, value]) => {
-              if (value === true || value.includes(node.id)) {
+              if (value.includes(node.id)) {
                 fieldValue[key] = true;
               }
             });
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLearningActivitiesModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLearningActivitiesModal.vue
index 5bb3e1ed1e..790de6c081 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLearningActivitiesModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLearningActivitiesModal.vue
@@ -6,7 +6,6 @@
     :title="$tr('editLearningActivitiesTitle')"
     :nodeIds="nodeIds"
     :validators="learningActivityValidators"
-    :inputComponent="LearningActivityOptionsComponent"
     :confirmationMessage="$tr('editedLearningActivities', { count: nodeIds.length })"
     @close="() => $emit('close')"
   >
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js
index ac3a247854..05dc9be933 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js
@@ -62,7 +62,6 @@ const options = Object.entries(Categories).map(([key, value]) => {
 const makeWrapper = ({
   nodeIds,
   field = 'categories',
-  inputComponent = CategoryOptions,
   ...restOptions
 }) => {
   return mount(EditBooleanMapModal, {
@@ -72,7 +71,6 @@ const makeWrapper = ({
       options,
       title: 'Edit Categories',
       field,
-      inputComponent,
       autocompleteLabel: 'Select option',
       confirmationMessage: 'edited',
       ...restOptions,
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
index 56ec783e32..6323cca0ca 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
@@ -65,6 +65,7 @@
                 ref="learning_activities"
                 v-model="contentLearningActivities"
                 :disabled="anyIsTopic"
+                :nodeIds="nodeIds"
                 @focus="trackClick('Learning activities')"
               />
               <!-- Level -->
@@ -72,6 +73,7 @@
                 v-if="oneSelected"
                 ref="contentLevel"
                 v-model="contentLevel"
+                :nodeIds="nodeIds"
                 @focus="trackClick('Levels dropdown')"
               />
               <!-- What you will need -->
@@ -79,6 +81,7 @@
                 v-if="oneSelected"
                 ref="resourcesNeeded"
                 v-model="resourcesNeeded"
+                :nodeIds="nodeIds"
                 @focus="trackClick('What you will need')"
               />
               <!-- Tags -->
@@ -111,7 +114,12 @@
             </VFlex>
           </VLayout>
           <!-- Category -->
-          <CategoryOptions v-if="oneSelected" ref="categories" v-model="categories" />
+          <CategoryOptions
+            v-if="oneSelected"
+            ref="categories"
+            v-model="categories"
+            :nodeIds="nodeIds"
+          />
         </VFlex>
       </VLayout>
 
@@ -434,14 +442,10 @@
   }
 
   /**
-   * This function is used to generate getter/setters for new metadata fields that are boolean maps:
-   * - `grade_levels` (sometimes referred to as `content_levels`)
-   * - `learner_needs` (resources needed)
+   * This function is used to generate getter/setters having its value as
+   * an array for metadata fields that are boolean maps:
    * - `accessibility_labels` (accessibility options)
-   * - `learning_activities` (learning activities)
-   * - `categories` (categories)
    */
-
   function generateNestedNodesGetterSetter(key) {
     return {
       get() {
@@ -475,6 +479,42 @@
     };
   }
 
+  /**
+   * This function is used to generate getter/setters having its value as
+   * an object for metadata fields that are boolean maps:
+   * - `grade_levels` (sometimes referred to as `content_levels`)
+   * - `learner_needs` (resources needed)
+   * - `learning_activities` (learning activities)
+   * - `categories` (categories)
+   */
+  function generateNestedNodesGetterSetterObject(key) {
+    return {
+      get() {
+        const value = {};
+        for (const node of this.nodes) {
+          const diffTrackerNode = this.diffTracker[node.id] || {};
+          const currentValue = diffTrackerNode[key] || node[key] || {};
+          Object.entries(currentValue).forEach(([option, optionValue]) => {
+            if (optionValue) {
+              value[option] = value[option] || [];
+              value[option].push(node.id);
+            }
+          });
+        }
+        return value;
+      },
+      set(value) {
+        const newMap = {};
+        for (const option in value) {
+          if (value[option].length === this.nodes.length) {
+            newMap[option] = true;
+          }
+        }
+        this.update({ [key]: newMap });
+      },
+    };
+  }
+
   export default {
     name: 'DetailsTabView',
     components: {
@@ -584,24 +624,31 @@
       role: generateGetterSetter('role_visibility'),
       language: generateGetterSetter('language'),
       accessibility: generateNestedNodesGetterSetter('accessibility_labels'),
-      contentLevel: generateNestedNodesGetterSetter('grade_levels'),
-      resourcesNeeded: generateNestedNodesGetterSetter('learner_needs'),
+      contentLevel: generateNestedNodesGetterSetterObject('grade_levels'),
+      resourcesNeeded: generateNestedNodesGetterSetterObject('learner_needs'),
       forBeginners: {
         get() {
-          return this.resourcesNeeded.includes(ResourcesNeededTypes.FOR_BEGINNERS);
+          const value = this.resourcesNeeded[ResourcesNeededTypes.FOR_BEGINNERS];
+          return (
+            value &&
+            value.length === this.nodes.length
+          );
         },
         set(value) {
           if (value) {
-            this.resourcesNeeded = [...this.resourcesNeeded, ResourcesNeededTypes.FOR_BEGINNERS];
+            this.resourcesNeeded = {
+              ...this.resourcesNeeded,
+              [ResourcesNeededTypes.FOR_BEGINNERS]: this.nodeIds,
+            };
           } else {
-            this.resourcesNeeded = this.resourcesNeeded.filter(
-              r => r !== ResourcesNeededTypes.FOR_BEGINNERS
-            );
+            const newMap = { ...this.resourcesNeeded };
+            delete newMap[ResourcesNeededTypes.FOR_BEGINNERS];
+            this.resourcesNeeded = newMap;
           }
         },
       },
-      contentLearningActivities: generateNestedNodesGetterSetter('learning_activities'),
-      categories: generateNestedNodesGetterSetter('categories'),
+      contentLearningActivities: generateNestedNodesGetterSetterObject('learning_activities'),
+      categories: generateNestedNodesGetterSetterObject('categories'),
       license() {
         return this.getValueFromNodes('license');
       },
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
index 81a2feb13a..9488d93626 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
@@ -110,18 +110,15 @@
     mixins: [constantsTranslationMixin, metadataTranslationMixin],
     props: {
       /**
-       * It can receive a value as an array of strings of the selected categories, or
-       * an object with the following structure:
+       * This prop receives an object with the following structure:
        * {
-       *  [categoryId]: true | [nodeId1, nodeId2, ...]
+       *  [categoryId]: [nodeId1, nodeId2, ...]
        * }
-       * If the value is true, it means that the option is selected for all nodes
-       * If the value is an array of nodeIds, it means that the option is selected
-       * just for those nodes
+       * Where nodeId is the id of the node that has the category selected
        */
       value: {
-        type: [Array, Object],
-        default: () => [],
+        type: Object,
+        required: true,
       },
       /**
        * An array of nodeIds that we are editing. If none, we will asume that we
@@ -160,7 +157,7 @@
       },
       autocompleteOptions() {
         const options = [...this.categoriesList];
-        if (!Array.isArray(this.selected)) {
+        if (this.expanded) {
           // Just boolean maps can have indeterminate values
           options.push({
             value: MIXED,
@@ -171,13 +168,14 @@
         return options;
       },
       autocompleteValues() {
-        if (Array.isArray(this.selected)) {
-          return this.selected;
-        }
         const selectedValues = Object.entries(this.selected)
-          .filter(entry => entry[1] === true) // no mixed values for boolean maps
+          .filter(entry => entry[1].length === this.nodeIds.length)
           .map(([key]) => key);
-        if (Object.values(this.selected).some(value => value !== true)) {
+        if (
+          this.expanded &&
+          Object.values(this.selected)
+            .some(value => value.length < this.nodeIds.length)
+        ) {
           selectedValues.push(MIXED);
         }
         return selectedValues;
@@ -201,17 +199,12 @@
         return this.nested ? { [rule]: `${item.level * 24}px` } : {};
       },
       add(value) {
-        if (Array.isArray(this.selected)) {
-          this.selected = [...this.selected, value];
-          return;
-        }
-        this.selected = { ...this.selected, [value]: true };
+        this.selected = {
+          ...this.selected,
+          [value]: this.nodeIds,
+        };
       },
       remove(value) {
-        if (Array.isArray(this.selected)) {
-          this.selected = this.selected.filter(i => !i.startsWith(value));
-          return;
-        }
         const newSelected = { ...this.selected };
         Object.keys(this.selected)
           .filter(selectedValue => selectedValue.startsWith(value))
@@ -221,10 +214,6 @@
         this.selected = newSelected;
       },
       removeAll() {
-        if (Array.isArray(this.selected)) {
-          this.selected = [];
-          return;
-        }
         this.selected = {};
       },
       tooltipText(optionId) {
@@ -253,15 +242,12 @@
         return val.split('.').length - 1;
       },
       isSelected(value) {
-        if (Array.isArray(this.selected)) {
-          return this.selected.some(v => v.startsWith(value));
-        }
-        // If not, this.selected is a boolean map
-
         // If the value is truthy (true or an array of nodeIds) then
         // it is selected just if it is true (not an array)
-        if (this.selected[value]) {
-          return this.selected[value] === true;
+        if (
+          this.selected[value] &&
+          this.selected[value].length === this.nodeIds.length) {
+          return true;
         }
 
         return this.isCheckboxSelectedByChildren(value);
@@ -274,9 +260,6 @@
        *   child options, together they constitute the same array of selected contentNodes.
        */
       isCheckboxSelectedByChildren(optionId) {
-        if (!this.nodeIds || !this.nodeIds.length) {
-          return false;
-        }
         const childrenOptions = Object.keys(this.selected)
           .filter(selectedValue => selectedValue.startsWith(optionId))
           .map(selectedValue => this.selected[selectedValue]);
@@ -285,11 +268,11 @@
           return false; // No childen options
         } else if (childrenOptions.length === 1) {
           // just one child option, the value is deterrmined by if it is selected
-          return childrenOptions[0] === true;
+          return childrenOptions[0].length === this.nodeIds.length;
         }
 
         // Here multiple children are selected or indeterminate
-        if (childrenOptions.some(value => value === true)) {
+        if (childrenOptions.some(value => value.length === this.nodeIds.length)) {
           // if some child value is selected for all nodes, then the parent option is selected
           return true;
         }
@@ -303,12 +286,8 @@
         return nodeIds.size === this.nodeIds.length;
       },
       isCheckboxIndeterminate(optionId) {
-        // Just boolean maps can have indeterminate values
-        if (Array.isArray(this.selected)) {
-          return false;
-        }
-        if (this.selected[optionId]) {
-          return this.selected[optionId] !== true;
+        if (this.selected[optionId] && this.selected[optionId].length < this.nodeIds.length) {
+          return true;
         }
         return (
           Object.keys(this.selected).some(selectedValue => selectedValue.startsWith(optionId)) &&
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
index 87df61a893..836cf8590a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
@@ -9,6 +9,7 @@
     :hideLabel="hideLabel"
     :rules="learningActivityRules"
     :label="translateMetadataString('learningActivity')"
+    :availableItems="nodeIds"
   />
 
 </template>
@@ -27,18 +28,15 @@
     mixins: [constantsTranslationMixin, metadataTranslationMixin],
     props: {
       /**
-       * It can receive a value as an array of strings of the selected learning activities, or
-       * an object with the following structure:
+       * This prop receives an object with the following structure:
        * {
-       *  [learningActivityId]: true | [nodeId1, nodeId2, ...]
+       *  [learningActivityId]: [nodeId1, nodeId2, ...]
        * }
-       * If the value is true, it means that the option is selected for all nodes
-       * If the value is an array of nodeIds, it means that the option is selected
-       * just for those nodes
+       * Where nodeId is the id of the node that has the learning activity selected
        */
       value: {
-        type: [Array, Object],
-        default: () => [],
+        type: Object,
+        required: true
       },
       disabled: {
         type: Boolean,
@@ -52,6 +50,10 @@
         type: Boolean,
         default: false,
       },
+      nodeIds: {
+        type: Array,
+        required: true,
+      },
     },
     computed: {
       learningActivity: {
@@ -59,7 +61,7 @@
           if (!this.disabled) {
             return this.value;
           }
-          return null;
+          return {};
         },
         set(value) {
           if (!this.disabled) {
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
index 7ae9b148cb..e300b281a0 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
@@ -7,6 +7,7 @@
     :options="levels"
     :hideLabel="hideLabel"
     :label="translateMetadataString('level')"
+    :availableItems="nodeIds"
   />
 
 </template>
@@ -24,18 +25,15 @@
     mixins: [constantsTranslationMixin, metadataTranslationMixin],
     props: {
       /**
-       * It can receive a value as an array of strings of the selected levels, or
-       * an object with the following structure:
+       * This prop receives an object with the following structure:
        * {
-       *  [levelId]: true | [nodeId1, nodeId2, ...]
+       *  [levelId]: [nodeId1, nodeId2, ...]
        * }
-       * If the value is true, it means that the option is selected for all nodes
-       * If the value is an array of nodeIds, it means that the option is selected
-       * just for those nodes
+       * Where nodeId is the id of the node that has the level selected
        */
       value: {
-        type: [Array, Object],
-        default: () => [],
+        type: Object,
+        required: true,
       },
       expanded: {
         type: Boolean,
@@ -45,6 +43,10 @@
         type: Boolean,
         default: false,
       },
+      nodeIds: {
+        type: Array,
+        required: true,
+      },
     },
     computed: {
       level: {
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue
index 828315c360..8585ed7911 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue
@@ -8,6 +8,7 @@
     :hideLabel="hideLabel"
     :label="$tr('resourcesNeededLabel')"
     :hint="hint"
+    :availableItems="nodeIds"
   />
 
 </template>
@@ -24,18 +25,15 @@
     mixins: [constantsTranslationMixin, metadataTranslationMixin],
     props: {
       /**
-       * It can receive a value as an array of strings of the selected resouces needed, or
-       * an object with the following structure:
+       * This prop receives an object with the following structure:
        * {
-       *  [resourceNeededId]: true | [nodeId1, nodeId2, ...]
+       *  [resourceId]: [nodeId1, nodeId2, ...]
        * }
-       * If the value is true, it means that the option is selected for all nodes
-       * If the value is an array of nodeIds, it means that the option is selected
-       * just for those nodes
+       * Where nodeId is the id of the node that has the resource selected
        */
       value: {
-        type: [Array, Object],
-        default: () => [],
+        type: Object,
+        required: true,
       },
       expanded: {
         type: Boolean,
@@ -45,6 +43,10 @@
         type: Boolean,
         default: false,
       },
+      nodeIds: {
+        type: Array,
+        required: true,
+      },
     },
     computed: {
       need: {
diff --git a/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue b/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue
index 778e8fda42..32a56edfd8 100644
--- a/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue
@@ -7,7 +7,7 @@
   >
     <template #default="{ attach, menuProps }">
       <VSelect
-        v-model="valueModel"
+        v-model="selectInputValueModel"
         box
         :disabled="disabled"
         :placeholder="placeholder"
@@ -49,8 +49,8 @@
           v-for="option in options"
           :key="option.value"
           :label="option.text"
-          :checked="isCheckboxSelected(option.value)"
-          :indeterminate="isCheckboxIndeterminate(option.value)"
+          :checked="isSelected(option.value)"
+          :indeterminate="isIndeterminate(option.value)"
           data-test="option-checkbox"
           @change="value => setOption(option.value, value)"
         />
@@ -76,15 +76,31 @@
     name: 'ExpandableSelect',
     components: { DropdownWrapper },
     props: {
+      /**
+       * It can receive a value as a string for single select or an object with
+       * the following structure for multiple select:
+       * {
+       *   [optionId]: [itemId1, itemId2, ...]
+       * }
+       * where itemId is the id of the item that has the option selected
+       */
       value: {
-        type: [String, Object, Array],
-        required: false,
-        default: '',
+        type: [String, Object],
+        required: true,
       },
       options: {
         type: Array,
         required: true,
       },
+      /**
+       * If the select is multiple, this prop is required, and it
+       * represents the available items that can have the options selected
+       */
+      availableItems: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
       placeholder: {
         type: String,
         required: false,
@@ -135,6 +151,26 @@
           this.$emit('input', value);
         },
       },
+      selectInputValueModel: {
+        get() {
+          if (this.multiple) {
+            return Object.keys(this.valueModel)
+              .filter(key => this.valueModel[key].length === this.availableItems.length);
+          }
+          return this.valueModel;
+        },
+        set(value) {
+          if (this.multiple) {
+            const newValueModel = {};
+            value.forEach(optionId => {
+              newValueModel[optionId] = this.availableItems;
+            });
+            this.valueModel = newValueModel;
+          } else {
+            this.valueModel = value;
+          }
+        },
+      }
     },
     methods: {
       /**
@@ -145,15 +181,24 @@
           return getInvalidText(this.rules, this.valueModel);
         }
       },
-      isCheckboxSelected(value) {
-        return this.valueModel[value] === true;
+      isSelected(value) {
+        if (!this.valueModel[value]) {
+          return false;
+        }
+        return this.valueModel[value].length === this.availableItems.length;
       },
-      isCheckboxIndeterminate(value) {
-        return this.valueModel[value] && this.valueModel[value] !== true;
+      isIndeterminate(value) {
+        if (!this.valueModel[value]) {
+          return false;
+        }
+        return this.valueModel[value].length < this.availableItems.length;
       },
       setOption(optionId, value) {
         if (value) {
-          this.valueModel = { ...this.valueModel, [optionId]: true };
+          this.valueModel = {
+            ...this.valueModel,
+            [optionId]: this.availableItems,
+          };
         } else {
           const newValueModel = { ...this.valueModel };
           delete newValueModel[optionId];

From 5b199fff9948b13280400f35ddf19e8026cc7015 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Thu, 14 Mar 2024 10:03:55 -0500
Subject: [PATCH 10/11] Fix tests

---
 .../__tests__/EditBooleanMapModal.spec.js     | 12 ++++++
 .../__tests__/categoryOptions.spec.js         | 41 +++++++++++--------
 .../__tests__/learningActivityOptions.spec.js | 27 ++++++++----
 .../__tests__/levelsOptions.spec.js           | 31 +++++++++-----
 .../__tests__/resourcesNeededOptions.spec.js  | 39 +++++++++++-------
 5 files changed, 101 insertions(+), 49 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js
index 05dc9be933..4da8eb3fee 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js
@@ -75,6 +75,18 @@ const makeWrapper = ({
       confirmationMessage: 'edited',
       ...restOptions,
     },
+    scopedSlots: {
+      input: function (props) {
+        return this.$createElement(CategoryOptions, {
+          props: {
+            ...props,
+            expanded: true,
+            hideLabel: true,
+            nodeIds,
+          }
+        });
+      }
+    }
   });
 };
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js
index 6990329da2..5e9807323e 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js
@@ -5,13 +5,22 @@ import CategoryOptions from '../CategoryOptions.vue';
 
 Vue.use(Vuetify);
 
+function makeWrapper({ value = {}, nodeIds = ["node1"] } = {}) {
+  return shallowMount(CategoryOptions, {
+    propsData: {
+      value,
+      nodeIds,
+    },
+  });
+};
+
 describe('CategoryOptions', () => {
   it('smoke test', () => {
-    const wrapper = shallowMount(CategoryOptions);
+    const wrapper = makeWrapper();
     expect(wrapper.isVueInstance()).toBe(true);
   });
   it('emits expected data', () => {
-    const wrapper = shallowMount(CategoryOptions);
+    const wrapper = makeWrapper();
     const value = 'string';
     wrapper.vm.$emit('input', value);
 
@@ -22,14 +31,14 @@ describe('CategoryOptions', () => {
 
   describe('display', () => {
     it('has a tooltip that displays the tree for value of an item', () => {
-      const wrapper = shallowMount(CategoryOptions);
+      const wrapper = makeWrapper();
       const item = 'd&WXdXWF.5QAjgfv7.BUMJJBnS'; // 'Dance'
       const expectedToolTip = 'School - Arts - Dance';
 
       expect(wrapper.vm.tooltipText(item)).toEqual(expectedToolTip);
     });
     it(`dropdown has 'levels' key necessary to display the nested structure of categories`, () => {
-      const wrapper = shallowMount(CategoryOptions);
+      const wrapper = makeWrapper();
       const dropdown = wrapper.vm.categoriesList;
       const everyCategoryHasLevelsKey = dropdown.every(item => 'level' in item);
 
@@ -39,37 +48,37 @@ describe('CategoryOptions', () => {
 
   describe('interactions', () => {
     it('when user checks an item, that is emitted to the parent component', () => {
-      const wrapper = shallowMount(CategoryOptions);
+      const wrapper = makeWrapper();
       const item = 'abcd';
       wrapper.vm.$emit = jest.fn();
       wrapper.vm.add(item);
 
       expect(wrapper.vm.$emit.mock.calls[0][0]).toBe('input');
-      expect(wrapper.vm.$emit.mock.calls[0][1]).toEqual([item]);
+      expect(wrapper.vm.$emit.mock.calls[0][1]).toEqual({ abcd: ["node1"] });
     });
     it('when user unchecks an item, that is emitted to the parent component', () => {
-      const wrapper = shallowMount(CategoryOptions);
+      const wrapper = makeWrapper();
       const item = 'defj';
       wrapper.vm.$emit = jest.fn();
       wrapper.vm.remove(item);
 
       expect(wrapper.vm.$emit.mock.calls[0][0]).toBe('input');
-      expect(wrapper.vm.$emit.mock.calls[0][1]).toEqual([]);
+      expect(wrapper.vm.$emit.mock.calls[0][1]).toEqual({});
     });
   });
 
   describe('close button on chip interactions', () => {
-    it('in the autocomplete bar, the chip is removed when user clicks on its close button', () => {
-      const wrapper = shallowMount(CategoryOptions, {
-        data() {
-          return { selected: ['remove me', 'abc', 'def', 'abc.'] };
-        },
+    it('in the autocomplete bar, the chip is removed when user clicks on its close button', async () => {
+      const wrapper = makeWrapper({
+        value: {
+          'remove me': ['node1'],
+          'keep me': ['node1'],
+        }
       });
-      const originalChipsLength = wrapper.vm.selected.length;
+      const originalChipsLength = Object.keys(wrapper.vm.selected).length;
       wrapper.vm.remove('remove me');
-      const chips = wrapper.vm.selected;
 
-      expect(chips.length).toEqual(originalChipsLength - 1);
+      expect(wrapper.emitted().input.length).toEqual(originalChipsLength - 1);
     });
   });
 });
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/learningActivityOptions.spec.js b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/learningActivityOptions.spec.js
index 1dffac7921..9724b55ecb 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/learningActivityOptions.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/learningActivityOptions.spec.js
@@ -6,10 +6,11 @@ import { LearningActivities } from 'shared/constants';
 
 Vue.use(Vuetify);
 
-function makeWrapper(value) {
+function makeWrapper({ value = {}, nodeIds = ['node1'] } = {}) {
   return mount(LearningActivityOptions, {
     propsData: {
       value,
+      nodeIds,
     },
   });
 }
@@ -21,7 +22,7 @@ describe('LearningActivityOptions', () => {
   });
 
   it('number of items in the dropdown should be equal to number of items available in ', async () => {
-    const wrapper = makeWrapper([]);
+    const wrapper = makeWrapper();
     await wrapper.find('.v-input__slot').trigger('click');
 
     const numberOfDropdownItems = Object.keys(LearningActivities).length;
@@ -32,27 +33,35 @@ describe('LearningActivityOptions', () => {
 
   describe('updating state', () => {
     it('should update learning_activity field with new values received from a parent', () => {
-      const learningActivity = ['activity_1', 'activity_2'];
-      const wrapper = makeWrapper(learningActivity);
+      const learningActivity = {
+        activity_1: ['node1'],
+        activity_2: ['node1'],
+      };
+      const wrapper = makeWrapper({ value: learningActivity, nodeIds: ["node1"] });
       const dropdown = wrapper.find({ name: 'v-select' });
 
-      expect(dropdown.props('value')).toEqual(learningActivity);
+      expect(dropdown.props('value')).toEqual(['activity_1', 'activity_2']);
 
       wrapper.setProps({
-        value: ['activity_4'],
+        value: {
+          activity_4: ['node1'],
+        }
       });
       expect(dropdown.props('value')).toEqual(['activity_4']);
     });
 
     it('should emit new input values', () => {
-      const learningActivity = ['activity_1', 'activity_2', 'activity_3'];
-      const wrapper = makeWrapper({});
+      const learningActivity = ['activity_1', 'activity_2'];
+      const wrapper = makeWrapper();
       const dropdown = wrapper.find({ name: 'v-select' });
       dropdown.vm.$emit('input', learningActivity);
 
       return Vue.nextTick().then(() => {
         const emittedLevels = wrapper.emitted('input').pop()[0];
-        expect(emittedLevels).toEqual(learningActivity);
+        expect(emittedLevels).toEqual({
+          activity_1: ['node1'],
+          activity_2: ['node1'],
+        });
       });
     });
   });
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/levelsOptions.spec.js b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/levelsOptions.spec.js
index 9fab21ed16..efdd659703 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/levelsOptions.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/levelsOptions.spec.js
@@ -6,10 +6,11 @@ import { ContentLevels } from 'shared/constants';
 
 Vue.use(Vuetify);
 
-function makeWrapper(value) {
+function makeWrapper({ value = {}, nodeIds = ['node1'] } = {}) {
   return mount(LevelsOptions, {
     propsData: {
       value,
+      nodeIds,
     },
   });
 }
@@ -22,7 +23,7 @@ describe('LevelsOptions', () => {
   });
 
   it('number of items in the dropdown should be equal to number of items available in ContentLevels', async () => {
-    const wrapper = makeWrapper([]);
+    const wrapper = makeWrapper();
     await wrapper.find('.v-input__slot').trigger('click');
 
     const numberOfAvailableLevels = Object.keys(ContentLevels).length;
@@ -33,27 +34,37 @@ describe('LevelsOptions', () => {
 
   describe('updating state', () => {
     it('should update levels field with new values received from a parent', () => {
-      const levels = ['abc', 'gefo'];
-      const wrapper = makeWrapper(levels);
+      const value = {
+        abc: ['node1'],
+        gefo: ['node1'],
+      };
+      const wrapper = makeWrapper({ value, nodeIds: ["node1"] });
       const dropdown = wrapper.find({ name: 'v-select' });
 
-      expect(dropdown.props('value')).toEqual(levels);
+      expect(dropdown.props('value')).toEqual(['abc', 'gefo']);
 
       wrapper.setProps({
-        value: ['def'],
+        value: {
+          def: ['node1'],
+        }
       });
       expect(dropdown.props('value')).toEqual(['def']);
     });
 
     it('should emit new input values', () => {
-      const levels = ['abc', 'gefo', '8hw'];
-      const wrapper = makeWrapper({});
+      const value = {
+        abc: ['node1'],
+      };
+      const wrapper = makeWrapper({ value, nodeIds: ["node1"] });
       const dropdown = wrapper.find({ name: 'v-select' });
-      dropdown.vm.$emit('input', levels);
+      dropdown.vm.$emit('input', ['abc', 'gefo']);
 
       return Vue.nextTick().then(() => {
         const emittedLevels = wrapper.emitted('input').pop()[0];
-        expect(emittedLevels).toEqual(levels);
+        expect(emittedLevels).toEqual({
+          abc: ['node1'],
+          gefo: ['node1'],
+        });
       });
     });
   });
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/resourcesNeededOptions.spec.js b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/resourcesNeededOptions.spec.js
index 0fc09b1598..e9c6f4e856 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/resourcesNeededOptions.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/resourcesNeededOptions.spec.js
@@ -5,44 +5,55 @@ import ResourcesNeededOptions from '../ResourcesNeededOptions.vue';
 
 Vue.use(Vuetify);
 
-function makeWrapper(value) {
+function makeWrapper({ value = {}, nodeIds = ['node1'] } = {}) {
   return mount(ResourcesNeededOptions, {
     propsData: {
       value,
+      nodeIds,
     },
   });
 }
 
 describe('ResourcesNeededOptions', () => {
   it('smoke test', () => {
-    const wrapper = shallowMount(ResourcesNeededOptions);
+    const wrapper = makeWrapper();
 
     expect(wrapper.isVueInstance()).toBe(true);
   });
 
   describe('updating state', () => {
     it('should update resources field with new values received from a parent', () => {
-      const resourcesNeeded = ['person', 'book'];
-      const wrapper = makeWrapper(resourcesNeeded);
+      const value = {
+        person: ['node1'],
+        book: ['node1'],
+      };
+      const wrapper = makeWrapper({ value, nodeIds: ["node1"] });
       const dropdown = wrapper.find({ name: 'v-select' });
 
-      expect(dropdown.props('value')).toEqual(resourcesNeeded);
+      expect(dropdown.props('value')).toEqual(['person', 'book']);
 
       wrapper.setProps({
-        value: ['cat'],
+        value: {
+          train: ['node1'],
+        }
       });
-      expect(dropdown.props('value')).toEqual(['cat']);
+      expect(dropdown.props('value')).toEqual(['train']);
     });
 
-    it('should emit new input values', () => {
-      const resourcesNeeded = ['person', 'book', 'train'];
-      const wrapper = makeWrapper([]);
+    it('should emit new input values', async () => {
+      const resourcesNeeded = {
+        person: ['node1'],
+      };
+      const wrapper = makeWrapper({ value: resourcesNeeded, nodeIds: ["node1"] });
       const dropdown = wrapper.find({ name: 'v-select' });
-      dropdown.vm.$emit('input', resourcesNeeded);
+      dropdown.vm.$emit('input', ['person', 'book']);
 
-      return Vue.nextTick().then(() => {
-        const emittedLevels = wrapper.emitted('input').pop()[0];
-        expect(emittedLevels).toEqual(resourcesNeeded);
+      await wrapper.vm.$nextTick();
+
+      const emittedLevels = wrapper.emitted('input').pop()[0];
+      expect(emittedLevels).toEqual({
+        person: ['node1'],
+        book: ['node1'],
       });
     });
   });

From feded9ccc16a0da656d79e208ca81bf84ce35b8a Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Thu, 14 Mar 2024 10:07:42 -0500
Subject: [PATCH 11/11] Lint files

---
 .../QuickEditModal/EditBooleanMapModal.vue         |  5 +++--
 .../__tests__/EditBooleanMapModal.spec.js          | 14 +++++---------
 .../channelEdit/components/edit/DetailsTabView.vue |  5 +----
 .../views/contentNodeFields/CategoryOptions.vue    |  7 ++-----
 .../contentNodeFields/LearningActivityOptions.vue  |  2 +-
 .../__tests__/categoryOptions.spec.js              |  8 ++++----
 .../__tests__/learningActivityOptions.spec.js      |  4 ++--
 .../__tests__/levelsOptions.spec.js                |  6 +++---
 .../__tests__/resourcesNeededOptions.spec.js       |  8 ++++----
 .../shared/views/form/ExpandableSelect.vue         |  7 ++++---
 10 files changed, 29 insertions(+), 37 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
index ce815a5a32..334bd3807d 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
@@ -133,8 +133,9 @@
         if (this.validators && this.validators.length) {
           this.error = getInvalidText(
             this.validators,
-            Object.keys(this.selectedValues)
-              .filter(key => this.selectedValues[key].length === this.nodes.length)
+            Object.keys(this.selectedValues).filter(
+              key => this.selectedValues[key].length === this.nodes.length
+            )
           );
         } else {
           this.error = '';
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js
index 4da8eb3fee..576b6639bb 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js
@@ -59,11 +59,7 @@ const options = Object.entries(Categories).map(([key, value]) => {
     value,
   };
 });
-const makeWrapper = ({
-  nodeIds,
-  field = 'categories',
-  ...restOptions
-}) => {
+const makeWrapper = ({ nodeIds, field = 'categories', ...restOptions }) => {
   return mount(EditBooleanMapModal, {
     store,
     propsData: {
@@ -76,17 +72,17 @@ const makeWrapper = ({
       ...restOptions,
     },
     scopedSlots: {
-      input: function (props) {
+      input: function(props) {
         return this.$createElement(CategoryOptions, {
           props: {
             ...props,
             expanded: true,
             hideLabel: true,
             nodeIds,
-          }
+          },
         });
-      }
-    }
+      },
+    },
   });
 };
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
index 6323cca0ca..30980840ea 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
@@ -629,10 +629,7 @@
       forBeginners: {
         get() {
           const value = this.resourcesNeeded[ResourcesNeededTypes.FOR_BEGINNERS];
-          return (
-            value &&
-            value.length === this.nodes.length
-          );
+          return value && value.length === this.nodes.length;
         },
         set(value) {
           if (value) {
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
index 9488d93626..032a720873 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
@@ -173,8 +173,7 @@
           .map(([key]) => key);
         if (
           this.expanded &&
-          Object.values(this.selected)
-            .some(value => value.length < this.nodeIds.length)
+          Object.values(this.selected).some(value => value.length < this.nodeIds.length)
         ) {
           selectedValues.push(MIXED);
         }
@@ -244,9 +243,7 @@
       isSelected(value) {
         // If the value is truthy (true or an array of nodeIds) then
         // it is selected just if it is true (not an array)
-        if (
-          this.selected[value] &&
-          this.selected[value].length === this.nodeIds.length) {
+        if (this.selected[value] && this.selected[value].length === this.nodeIds.length) {
           return true;
         }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
index 836cf8590a..ce1f49b8b8 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
@@ -36,7 +36,7 @@
        */
       value: {
         type: Object,
-        required: true
+        required: true,
       },
       disabled: {
         type: Boolean,
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js
index 5e9807323e..4cfa9baa2b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js
@@ -5,14 +5,14 @@ import CategoryOptions from '../CategoryOptions.vue';
 
 Vue.use(Vuetify);
 
-function makeWrapper({ value = {}, nodeIds = ["node1"] } = {}) {
+function makeWrapper({ value = {}, nodeIds = ['node1'] } = {}) {
   return shallowMount(CategoryOptions, {
     propsData: {
       value,
       nodeIds,
     },
   });
-};
+}
 
 describe('CategoryOptions', () => {
   it('smoke test', () => {
@@ -54,7 +54,7 @@ describe('CategoryOptions', () => {
       wrapper.vm.add(item);
 
       expect(wrapper.vm.$emit.mock.calls[0][0]).toBe('input');
-      expect(wrapper.vm.$emit.mock.calls[0][1]).toEqual({ abcd: ["node1"] });
+      expect(wrapper.vm.$emit.mock.calls[0][1]).toEqual({ abcd: ['node1'] });
     });
     it('when user unchecks an item, that is emitted to the parent component', () => {
       const wrapper = makeWrapper();
@@ -73,7 +73,7 @@ describe('CategoryOptions', () => {
         value: {
           'remove me': ['node1'],
           'keep me': ['node1'],
-        }
+        },
       });
       const originalChipsLength = Object.keys(wrapper.vm.selected).length;
       wrapper.vm.remove('remove me');
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/learningActivityOptions.spec.js b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/learningActivityOptions.spec.js
index 9724b55ecb..c3767d3c8a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/learningActivityOptions.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/learningActivityOptions.spec.js
@@ -37,7 +37,7 @@ describe('LearningActivityOptions', () => {
         activity_1: ['node1'],
         activity_2: ['node1'],
       };
-      const wrapper = makeWrapper({ value: learningActivity, nodeIds: ["node1"] });
+      const wrapper = makeWrapper({ value: learningActivity, nodeIds: ['node1'] });
       const dropdown = wrapper.find({ name: 'v-select' });
 
       expect(dropdown.props('value')).toEqual(['activity_1', 'activity_2']);
@@ -45,7 +45,7 @@ describe('LearningActivityOptions', () => {
       wrapper.setProps({
         value: {
           activity_4: ['node1'],
-        }
+        },
       });
       expect(dropdown.props('value')).toEqual(['activity_4']);
     });
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/levelsOptions.spec.js b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/levelsOptions.spec.js
index efdd659703..f306d1b50b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/levelsOptions.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/levelsOptions.spec.js
@@ -38,7 +38,7 @@ describe('LevelsOptions', () => {
         abc: ['node1'],
         gefo: ['node1'],
       };
-      const wrapper = makeWrapper({ value, nodeIds: ["node1"] });
+      const wrapper = makeWrapper({ value, nodeIds: ['node1'] });
       const dropdown = wrapper.find({ name: 'v-select' });
 
       expect(dropdown.props('value')).toEqual(['abc', 'gefo']);
@@ -46,7 +46,7 @@ describe('LevelsOptions', () => {
       wrapper.setProps({
         value: {
           def: ['node1'],
-        }
+        },
       });
       expect(dropdown.props('value')).toEqual(['def']);
     });
@@ -55,7 +55,7 @@ describe('LevelsOptions', () => {
       const value = {
         abc: ['node1'],
       };
-      const wrapper = makeWrapper({ value, nodeIds: ["node1"] });
+      const wrapper = makeWrapper({ value, nodeIds: ['node1'] });
       const dropdown = wrapper.find({ name: 'v-select' });
       dropdown.vm.$emit('input', ['abc', 'gefo']);
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/resourcesNeededOptions.spec.js b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/resourcesNeededOptions.spec.js
index e9c6f4e856..cc0757a09b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/resourcesNeededOptions.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/resourcesNeededOptions.spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import Vuetify from 'vuetify';
-import { shallowMount, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import ResourcesNeededOptions from '../ResourcesNeededOptions.vue';
 
 Vue.use(Vuetify);
@@ -27,7 +27,7 @@ describe('ResourcesNeededOptions', () => {
         person: ['node1'],
         book: ['node1'],
       };
-      const wrapper = makeWrapper({ value, nodeIds: ["node1"] });
+      const wrapper = makeWrapper({ value, nodeIds: ['node1'] });
       const dropdown = wrapper.find({ name: 'v-select' });
 
       expect(dropdown.props('value')).toEqual(['person', 'book']);
@@ -35,7 +35,7 @@ describe('ResourcesNeededOptions', () => {
       wrapper.setProps({
         value: {
           train: ['node1'],
-        }
+        },
       });
       expect(dropdown.props('value')).toEqual(['train']);
     });
@@ -44,7 +44,7 @@ describe('ResourcesNeededOptions', () => {
       const resourcesNeeded = {
         person: ['node1'],
       };
-      const wrapper = makeWrapper({ value: resourcesNeeded, nodeIds: ["node1"] });
+      const wrapper = makeWrapper({ value: resourcesNeeded, nodeIds: ['node1'] });
       const dropdown = wrapper.find({ name: 'v-select' });
       dropdown.vm.$emit('input', ['person', 'book']);
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue b/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue
index 32a56edfd8..127eeabd7a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue
@@ -154,8 +154,9 @@
       selectInputValueModel: {
         get() {
           if (this.multiple) {
-            return Object.keys(this.valueModel)
-              .filter(key => this.valueModel[key].length === this.availableItems.length);
+            return Object.keys(this.valueModel).filter(
+              key => this.valueModel[key].length === this.availableItems.length
+            );
           }
           return this.valueModel;
         },
@@ -170,7 +171,7 @@
             this.valueModel = value;
           }
         },
-      }
+      },
     },
     methods: {
       /**