From 2422248ea8a209bc675659aa0601b78372a18886 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 25 Mar 2024 07:05:58 -0500
Subject: [PATCH 1/7] Replace contentNodeOPtions with KDropdown

---
 .../components/ContentNodeEditListItem.vue    | 34 ++++++--------
 .../components/ContentNodeOptions.vue         | 41 ++++++++++++-----
 .../components/StudioTree/StudioTree.vue      | 22 ++++------
 .../channelEdit/views/CurrentTopicView.vue    | 44 ++++++++-----------
 yarn.lock                                     |  8 ++--
 5 files changed, 74 insertions(+), 75 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
index 3794cf7dd9..5d2fa8c495 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
@@ -49,10 +49,10 @@
         <template #actions-end>
           <VListTileAction class="action-icon px-1" @click.stop>
             <transition name="fade">
-              <IconButton
+              <KIconButton
                 icon="rename"
                 size="small"
-                :text="$tr('editTooltip')"
+                :tooltip="$tr('editTooltip')"
                 :disabled="copying"
                 @click.stop
                 @click="editTitleDescription()"
@@ -60,19 +60,17 @@
             </transition>
           </VListTileAction>
           <VListTileAction :aria-hidden="!active" class="action-icon px-1">
-            <Menu v-model="activated">
-              <template #activator="{ on }">
-                <IconButton
-                  icon="optionsVertical"
-                  :text="$tr('optionsTooltip')"
-                  size="small"
-                  :disabled="copying"
-                  v-on="on"
-                  @click.stop
-                />
+            <KIconButton
+              icon="optionsVertical"
+              size="small"
+              :tooltip="$tr('optionsTooltip')"
+              :disabled="copying"
+              @click.stop
+            >
+              <template #menu>
+                <ContentNodeOptions v-if="!copying" :nodeId="nodeId" />
               </template>
-              <ContentNodeOptions v-if="!copying && activated" :nodeId="nodeId" />
-            </Menu>
+            </KIconButton>
           </VListTileAction>
         </template>
 
@@ -94,6 +92,7 @@
 
         <template #context-menu="{ showContextMenu, positionX, positionY }">
           <ContentNodeContextMenu
+            v-if="false"
             :show="showContextMenu"
             :positionX="positionX"
             :positionY="positionY"
@@ -164,11 +163,6 @@
         default: false,
       },
     },
-    data() {
-      return {
-        activated: false,
-      };
-    },
     computed: {
       ...mapGetters('currentChannel', ['canEdit']),
       ...mapGetters('contentNode', [
@@ -186,7 +180,7 @@
         },
       },
       active() {
-        return this.selected || this.activated || this.previewing;
+        return this.selected || this.previewing;
       },
       contentNode() {
         return this.getContentNode(this.nodeId);
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue
index ad50a809f8..714bf0e838 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue
@@ -1,6 +1,10 @@
 <template>
 
-  <div
+  <KDropdownMenu
+    :options="menuOptions"
+    @select="onSelect"
+  />
+  <!-- <div
     style="max-height: 80vh"
   >
     <VList ref="optionsList">
@@ -37,7 +41,7 @@
       :moveNodeIds="[nodeId]"
       @target="moveNode"
     />
-  </div>
+  </div> -->
 
 </template>
 
@@ -197,6 +201,14 @@
           .filter(group => group.some(option => option.condition))
           .map(group => group.filter(option => option.condition));
       },
+      menuOptions() {
+        return this.groupedOptions.reduce((acc, group, idx) => {
+          if (idx > 0) {
+            acc.push({ type: 'divider' });
+          }
+          return acc.concat(group);
+        });
+      },
       editLink() {
         return {
           name: RouteNames.CONTENTNODE_DETAILS,
@@ -243,13 +255,13 @@
       ]),
       ...mapActions('clipboard', ['copy']),
       async focusFirstOption() {
-        const { optionsList } = this.$refs;
-        const firstOption = optionsList.$el.querySelector('a');
-        let tries = 0;
-        while (document.activeElement !== firstOption && tries++ < 20) {
-          await new Promise(resolve => setTimeout(resolve, 0));
-          firstOption.focus();
-        }
+        // const { optionsList } = this.$refs;
+        // const firstOption = optionsList.$el.querySelector('a');
+        // let tries = 0;
+        // while (document.activeElement !== firstOption && tries++ < 20) {
+        //   await new Promise(resolve => setTimeout(resolve, 0));
+        //   firstOption.focus();
+        // }
       },
       checkTabBoundaries($event) {
         const optionsList = this.$refs.optionsList;
@@ -264,6 +276,14 @@
           this.$destroy();
         }
       },
+      onSelect(option) {
+        if (option.onClick) {
+          option.onClick();
+        }
+        if (option.to) {
+          this.$router.push(option.to);
+        }
+      },
       newTopicNode() {
         this.trackAction('New topic');
         const nodeData = {
@@ -309,8 +329,7 @@
         return () => {};
       },
       quickEditModalFactory(modal) {
-        return $event => {
-          $event.preventDefault();
+        return () => {
           this.setQuickEditModal({
             modal,
             nodeIds: [this.nodeId],
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue b/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
index 162a5b9107..80d49904d0 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
@@ -121,24 +121,19 @@
                         size="15"
                         width="2"
                       />
-                      <Menu
+                      <KIconButton
                         v-else
-                        v-model="showMenu"
-                        data-test="editMenu"
+                        icon="optionsVertical"
+                        :tooltip="$tr('optionsTooltip')"
+                        @click.stop
                       >
-                        <template #activator="{ on }">
-                          <IconButton
-                            icon="optionsVertical"
-                            :text="$tr('optionsTooltip')"
-                            v-on="on"
-                            @click.stop
-                          />
+                        <template #menu>
+                          <ContentNodeOptions :nodeId="nodeId" />
                         </template>
-                        <ContentNodeOptions v-if="showMenu" :nodeId="nodeId" />
-                      </Menu>
+                      </KIconButton>
                     </VFlex>
                     <ContentNodeContextMenu
-                      v-if="allowEditing && !copying"
+                      v-if="allowEditing && !copying && false"
                       :show="showContextMenu"
                       :positionX="positionX"
                       :positionY="positionY"
@@ -258,7 +253,6 @@
         draggableSize: 5,
         draggableExpanded: false,
         debouncedLoad: null,
-        showMenu: false,
       };
     },
     computed: {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue b/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
index b34e38ec7e..2a32170eac 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
@@ -11,16 +11,15 @@
             <VFlex class="font-weight-bold text-truncate" shrink :class="getTitleClass(item)">
               {{ getTitle(item) }}
             </VFlex>
-            <Menu v-if="item.displayNodeOptions" v-model="breadcrumbsMenu">
-              <template #activator="{ on }">
-                <IconButton
-                  icon="dropdown"
-                  :text="$tr('optionsButton')"
-                  v-on="on"
-                />
+            <KIconButton
+              v-if="item.displayNodeOptions"
+              icon="dropdown"
+              :tooltip="$tr('optionsButton')"
+            >
+              <template #menu>
+                <ContentNodeOptions v-if="node" :nodeId="topicId" />
               </template>
-              <ContentNodeOptions v-if="node && breadcrumbsMenu" :nodeId="topicId" />
-            </Menu>
+            </KIconButton>
           </VLayout>
           <span v-else class="grey--text" :class="getTitleClass(item)">
             {{ getTitle(item) }}
@@ -195,23 +194,18 @@
             :text="$tr('editButton')"
             @click="editNodes([detailNodeId])"
           />
-          <Menu v-model="resourceDrawerMenu">
-            <template #activator="{ on }">
-              <IconButton
-                size="small"
-                icon="optionsVertical"
-                :text="$tr('optionsButton')"
-                v-on="on"
+          <KIconButton
+            icon="optionsVertical"
+            :tooltip="$tr('optionsButton')"
+          >
+            <template #menu>
+              <ContentNodeOptions
+                hideEditLink
+                hideDetailsLink
+                :nodeId="detailNodeId"
               />
             </template>
-            <ContentNodeOptions
-              v-if="resourceDrawerMenu"
-              :nodeId="detailNodeId"
-              hideDetailsLink
-              hideEditLink
-              @removed="closePanel"
-            />
-          </Menu>
+          </KIconButton>
         </template>
         <template v-else #actions>
           <IconButton
@@ -287,8 +281,6 @@
         loadingAncestors: false,
         elevated: false,
         moveModalOpen: false,
-        breadcrumbsMenu: false,
-        resourceDrawerMenu: false,
       };
     },
     computed: {
diff --git a/yarn.lock b/yarn.lock
index ba58c16c08..cda908bac7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3496,17 +3496,17 @@ anymatch@^3.0.3, anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-"aphrodite@git+https://github.com/learningequality/aphrodite.git":
+"aphrodite@https://github.com/learningequality/aphrodite.git":
   version "2.2.3"
-  resolved "git+https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
+  resolved "https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
   dependencies:
     asap "^2.0.3"
     inline-style-prefixer "^4.0.2"
     string-hash "^1.1.3"
 
-"aphrodite@https://github.com/learningequality/aphrodite.git":
+"aphrodite@https://github.com/learningequality/aphrodite/":
   version "2.2.3"
-  resolved "https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
+  resolved "https://github.com/learningequality/aphrodite/#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
   dependencies:
     asap "^2.0.3"
     inline-style-prefixer "^4.0.2"

From 42f0c0d52fb6a58435de576c76b581e31b6b1859 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 25 Mar 2024 09:23:51 -0500
Subject: [PATCH 2/7] Move moveModal and clean COntentNodeOptions

---
 .../components/ContentNodeEditListItem.vue    |   7 +-
 .../components/ContentNodeOptions.vue         | 108 +++---------------
 .../views/TreeView/TreeViewBase.vue           |  37 +++++-
 .../channelEdit/vuex/contentNode/actions.js   |   4 +
 .../channelEdit/vuex/contentNode/getters.js   |   6 +
 package.json                                  |   2 +-
 yarn.lock                                     |   5 +-
 7 files changed, 64 insertions(+), 105 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
index 5d2fa8c495..7742a76173 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
@@ -91,11 +91,8 @@
         </template>
 
         <template #context-menu="{ showContextMenu, positionX, positionY }">
-          <ContentNodeContextMenu
-            v-if="false"
-            :show="showContextMenu"
-            :positionX="positionX"
-            :positionY="positionY"
+          <ContentNodeOptions
+            isContextMenu
             :nodeId="nodeId"
           />
         </template>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue
index 714bf0e838..29eb0a8944 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue
@@ -1,47 +1,10 @@
 <template>
 
   <KDropdownMenu
+    :isContextMenu="isContextMenu"
     :options="menuOptions"
-    @select="onSelect"
+    @select="handleSelect"
   />
-  <!-- <div
-    style="max-height: 80vh"
-  >
-    <VList ref="optionsList">
-      <template
-        v-for="(group, groupIndex) in groupedOptions"
-      >
-        <VListTile
-          v-for="(option, index) in group"
-          :key="groupIndex + '-' + index"
-          class="options-list-item"
-          ripple
-          :to="option.to"
-          tabindex="0"
-          @click="option.onClick($event)"
-          @keydown.enter="option.onClick($event)"
-          @keydown.tab="checkTabBoundaries($event)"
-        >
-          <VListTileTitle>
-            {{ option.label }}
-          </VListTileTitle>
-        </VListTile>
-        <VDivider
-          v-if="groupIndex < groupedOptions.length - 1"
-          :key="groupIndex + '-divider'"
-          class="divider"
-        />
-      </template>
-    </VList>
-
-    <MoveModal
-      v-if="moveModalOpen"
-      ref="moveModal"
-      v-model="moveModalOpen"
-      :moveNodeIds="[nodeId]"
-      @target="moveNode"
-    />
-  </div> -->
 
 </template>
 
@@ -49,15 +12,11 @@
 
   import { mapActions, mapGetters } from 'vuex';
   import { RouteNames, TabNames, QuickEditModals } from '../constants';
-  import MoveModal from './move/MoveModal';
   import { withChangeTracker } from 'shared/data/changes';
   import { RELATIVE_TREE_POSITIONS } from 'shared/data/constants';
 
   export default {
     name: 'ContentNodeOptions',
-    components: {
-      MoveModal,
-    },
     props: {
       nodeId: {
         type: String,
@@ -71,11 +30,10 @@
         type: Boolean,
         default: false,
       },
-    },
-    data() {
-      return {
-        moveModalOpen: false,
-      };
+      isContextMenu: {
+        type: Boolean,
+        default: false,
+      },
     },
     computed: {
       ...mapGetters('currentChannel', ['canEdit', 'trashId']),
@@ -117,7 +75,8 @@
               label: this.$tr('move'),
               onClick: $event => {
                 $event.stopPropagation();
-                this.moveModalOpen = true;
+                this.trackAction('Move');
+                this.setMoveNodesIds([this.nodeId]);
               },
               condition: this.canEdit,
             },
@@ -228,22 +187,6 @@
         };
       },
     },
-    watch: {
-      moveModalOpen(open) {
-        if (open) {
-          this.trackAction('Move');
-        }
-      },
-    },
-    beforeMount() {
-      this.lastFocus = document.activeElement;
-    },
-    mounted() {
-      this.focusFirstOption();
-    },
-    destroyed() {
-      this.lastFocus && this.lastFocus.focus();
-    },
     methods: {
       ...mapActions(['showSnackbar', 'clearSnackbar']),
       ...mapActions('contentNode', [
@@ -252,33 +195,12 @@
         'copyContentNode',
         'waitForCopyingStatus',
         'setQuickEditModal',
+        'setMoveNodesIds',
       ]),
       ...mapActions('clipboard', ['copy']),
-      async focusFirstOption() {
-        // const { optionsList } = this.$refs;
-        // const firstOption = optionsList.$el.querySelector('a');
-        // let tries = 0;
-        // while (document.activeElement !== firstOption && tries++ < 20) {
-        //   await new Promise(resolve => setTimeout(resolve, 0));
-        //   firstOption.focus();
-        // }
-      },
-      checkTabBoundaries($event) {
-        const optionsList = this.$refs.optionsList;
-        const options = optionsList.$el.querySelectorAll('a');
-        const index = Array.from(options).indexOf($event.target);
-        if (
-          (index === 0 && $event.shiftKey) ||
-          (index === options.length - 1 && !$event.shiftKey)
-        ) {
-          // destroy component
-          $event.preventDefault();
-          this.$destroy();
-        }
-      },
-      onSelect(option) {
+      handleSelect(option, $event) {
         if (option.onClick) {
-          option.onClick();
+          option.onClick($event);
         }
         if (option.to) {
           this.$router.push(option.to);
@@ -301,11 +223,6 @@
           });
         });
       },
-      moveNode(target) {
-        return this.moveContentNodes({ id__in: [this.nodeId], parent: target }).then(
-          this.$refs.moveModal.moveComplete
-        );
-      },
       getRemoveNodeRedirect() {
         // Returns a callback to do appropriate post-removal navigation
         const { detailNodeId, nodeId } = this.$route.params;
@@ -329,7 +246,8 @@
         return () => {};
       },
       quickEditModalFactory(modal) {
-        return () => {
+        return $event => {
+          $event.preventDefault();
           this.setQuickEditModal({
             modal,
             nodeIds: [this.nodeId],
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
index 5ae645c37d..07dcccf1ec 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
@@ -228,6 +228,12 @@
     <AboutLicensesModal
       v-if="isAboutLicensesModalOpen"
     />
+    <MoveModal
+      ref="moveModal"
+      v-model="moveModalDialog"
+      :moveNodeIds="moveNodeIds"
+      @target="moveNodes"
+    />
     <MessageDialog
       v-model="showDeleteModal"
       :header="$tr('deleteTitle')"
@@ -317,6 +323,7 @@
   import ProgressModal from '../progress/ProgressModal';
   import PublishModal from '../../components/publish/PublishModal';
   import QuickEditModal from '../../components/QuickEditModal';
+  import MoveModal from '../../components/move/MoveModal';
   import SavingIndicator from '../../components/edit/SavingIndicator';
   import { DraggableRegions, DraggableUniverses, RouteNames } from '../../constants';
   import MainNavigationDrawer from 'shared/views/MainNavigationDrawer';
@@ -348,6 +355,7 @@
       DraggablePlaceholder,
       MessageDialog,
       SavingIndicator,
+      MoveModal,
       QuickEditModal,
       AboutLicensesModal,
     },
@@ -374,7 +382,10 @@
         offline: state => !state.connection.online,
       }),
       ...mapGetters(['isAboutLicensesModalOpen']),
-      ...mapGetters('contentNode', ['getContentNode']),
+      ...mapGetters('contentNode', [
+        'getContentNode',
+        'getMoveNodesIds',
+      ]),
       ...mapGetters('currentChannel', ['currentChannel', 'canEdit', 'canManage', 'rootId']),
       rootNode() {
         return this.getContentNode(this.rootId);
@@ -473,9 +484,28 @@
       dropEffect() {
         return DropEffect.COPY;
       },
+      moveNodeIds() {
+        return this.getMoveNodesIds();
+      },
+      moveModalDialog: {
+        get() {
+          return (
+            this.moveNodeIds && this.moveNodeIds.length > 0
+          )
+        },
+        set(value) {
+          if (!value) {
+            this.setMoveNodesIds([]);
+          }
+        },
+      },
     },
     methods: {
       ...mapActions('channel', ['deleteChannel']),
+      ...mapActions('contentNode', [
+        'setMoveNodesIds',
+        'moveContentNodes',
+      ]),
       handleDelete() {
         this.deleteChannel(this.currentChannel.id).then(() => {
           localStorage.snackbar = this.$tr('channelDeletedSnackbar');
@@ -497,6 +527,11 @@
         this.showPublishModal = true;
         this.trackClickEvent('Publish');
       },
+      moveNodes(target) {
+        return this.moveContentNodes({ id__in: [this.nodeId], parent: target }).then(
+          this.$refs.moveModal.moveComplete
+        );
+      },
       trackClickEvent(eventLabel) {
         this.$analytics.trackClick('channel_editor_toolbar', eventLabel);
       },
diff --git a/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/actions.js b/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/actions.js
index fb83c910c4..7fa000d427 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/actions.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/actions.js
@@ -546,6 +546,10 @@ export async function checkSavingProgress(
   return Boolean(query);
 }
 
+export function setMoveNodesIds(context, ids) {
+  context.commit('SET_MOVE_NODES', ids);
+}
+
 export function setQuickEditModal(context, open) {
   context.commit('SET_QUICK_EDIT_MODAL', open);
 }
diff --git a/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/getters.js b/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/getters.js
index b6567221f0..e635c86adb 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/getters.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/getters.js
@@ -357,3 +357,9 @@ export function getQuickEditModalOpen(state) {
     return state.quickEditModalOpen;
   };
 }
+
+export function getMoveNodesIds(state) {
+  return function() {
+    return state.moveNodes;
+  }
+}
diff --git a/package.json b/package.json
index c538549924..8adcf0d23f 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
     "jspdf": "https://github.com/parallax/jsPDF.git#b7a1d8239c596292ce86dafa77f05987bcfa2e6e",
     "jszip": "^3.10.1",
     "kolibri-constants": "^0.2.0",
-    "kolibri-design-system": "3.1.0",
+    "kolibri-design-system": "https://github.com/AlexVelezLl/kolibri-design-system.git#8b8808f35a330e0e25103720ea63f42154f6e678",
     "lodash": "^4.17.21",
     "material-icons": "0.3.1",
     "mutex-js": "^1.1.5",
diff --git a/yarn.lock b/yarn.lock
index cda908bac7..d7cd14d55e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9123,10 +9123,9 @@ kolibri-constants@^0.2.0:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.0.tgz#47c9d773894e23251ba5ac4db420822e45603142"
   integrity sha512-WYDMGDzB9gNxRbpX1O2cGe1HrJvLvSZGwMuAv6dqrxJgPf7iO+Hi40/1CXjHM7nk5CRt+hn5bqnMzCBmj1omPA==
 
-kolibri-design-system@3.1.0:
+"kolibri-design-system@https://github.com/AlexVelezLl/kolibri-design-system.git#8b8808f35a330e0e25103720ea63f42154f6e678":
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-3.1.0.tgz#b8cfeeba3c41b0d2c43b4098732367e6732763a8"
-  integrity sha512-Xynv24J0uKJFQvhTgbOOWZdRRUMO3NSsobCCrD6R6lvzUqCEqcrJTLgK0ls6LX0MZu2dzxMGA0riLZx4qwikJw==
+  resolved "https://github.com/AlexVelezLl/kolibri-design-system.git#8b8808f35a330e0e25103720ea63f42154f6e678"
   dependencies:
     "@vue/composition-api" "^1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"

From 7b8fd0864b81fe8bdf558e3869c105d9a7d6a849 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 25 Mar 2024 15:33:15 -0500
Subject: [PATCH 3/7] use KDropdownMenu as context menu

---
 .../components/ContentNodeContextMenu.vue     |  60 -----
 .../components/ContentNodeEditListItem.vue    |   4 +-
 .../components/ContentNodeListItem/index.vue  |   8 +-
 .../components/ContentNodeOptions.vue         |   6 +-
 .../components/StudioTree/StudioTree.vue      | 247 +++++++++---------
 .../views/TreeView/TreeViewBase.vue           |  14 +-
 .../channelEdit/vuex/contentNode/getters.js   |   2 +-
 7 files changed, 128 insertions(+), 213 deletions(-)
 delete mode 100644 contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeContextMenu.vue

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeContextMenu.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeContextMenu.vue
deleted file mode 100644
index ea742b88eb..0000000000
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeContextMenu.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-
-  <Menu v-model="value" :position-x="positionX" :position-y="positionY" absolute>
-    <VCard>
-      <slot v-if="value">
-        <ContentNodeOptions :nodeId="nodeId" :hideDetailsLink="hideDetailsLink" />
-      </slot>
-    </VCard>
-  </Menu>
-
-</template>
-
-<script>
-
-  import ContentNodeOptions from './ContentNodeOptions';
-
-  export default {
-    name: 'ContentNodeContextMenu',
-    components: {
-      ContentNodeOptions,
-    },
-    props: {
-      show: {
-        type: Boolean,
-        default: false,
-        required: true,
-      },
-      positionX: {
-        type: Number,
-        default: 0,
-      },
-      positionY: {
-        type: Number,
-        default: 0,
-      },
-      nodeId: {
-        type: String,
-        required: true,
-      },
-      hideDetailsLink: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    computed: {
-      value: {
-        get() {
-          return this.show;
-        },
-        // ignore
-        set() {},
-      },
-    },
-  };
-
-</script>
-
-<style scoped>
-
-</style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
index 7742a76173..9cffd76261 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
@@ -90,7 +90,7 @@
           />
         </template>
 
-        <template #context-menu="{ showContextMenu, positionX, positionY }">
+        <template #context-menu>
           <ContentNodeOptions
             isContextMenu
             :nodeId="nodeId"
@@ -109,7 +109,6 @@
 
   import ContentNodeListItem from './ContentNodeListItem';
   import ContentNodeOptions from './ContentNodeOptions';
-  import ContentNodeContextMenu from './ContentNodeContextMenu';
   import Checkbox from 'shared/views/form/Checkbox';
   import IconButton from 'shared/views/IconButton';
   import DraggableItem from 'shared/views/draggable/DraggableItem';
@@ -125,7 +124,6 @@
       DraggableItem,
       ContentNodeListItem,
       ContentNodeOptions,
-      ContentNodeContextMenu,
       Checkbox,
       IconButton,
     },
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
index d2e7afbaba..d784be7012 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
@@ -2,8 +2,6 @@
 
   <VHover :disabled="copying">
     <template #default="{ hover }">
-      <ContextMenuCloak :disabled="contextMenuDisabled">
-        <template #default="contextMenuProps">
           <DraggableHandle v-bind="draggableHandle">
             <template #default>
               <VListTile
@@ -184,14 +182,10 @@
                   </div>
                   <div class="disabled-overlay"></div>
                 </template>
-                <slot name="context-menu" v-bind="contextMenuProps"></slot>
+                <slot name="context-menu" v-if="!contextMenuDisabled"></slot>
               </VListTile>
-
             </template>
           </DraggableHandle>
-
-        </template>
-      </ContextMenuCloak>
     </template>
   </VHover>
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue
index 29eb0a8944..a00185b700 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue
@@ -4,7 +4,11 @@
     :isContextMenu="isContextMenu"
     :options="menuOptions"
     @select="handleSelect"
-  />
+  >
+    <template #header>
+      <slot name="header" />
+    </template>
+  </KDropdownMenu>
 
 </template>
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue b/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
index 80d49904d0..497e95218d 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
@@ -20,136 +20,129 @@
         @draggableDragLeave="dragLeave"
       >
         <template #default="itemProps">
-          <ContextMenuCloak :disabled="!allowEditing || copying">
-            <template #default="{ showContextMenu, positionX, positionY }">
-              <VFlex
-                v-if="node && !root"
-                tag="v-flex"
-                class="node-item px-1"
-                :class="{
-                  disabled: copying,
-                }"
+          <VFlex
+            v-if="node && !root"
+            tag="v-flex"
+            class="node-item px-1"
+            :class="{
+              disabled: copying,
+            }"
+            :style="{
+              backgroundColor: !root && selected
+                ? $vuetify.theme.greyBackground
+                : 'transparent',
+            }"
+            data-test="item"
+            @click="click"
+          >
+            <DraggableHandle
+              :draggable="draggable"
+              :draggableMetadata="node"
+              :effectAllowed="draggableEffectAllowed"
+            >
+              <VLayout
+                row
+                align-center
+                class="draggable-background"
                 :style="{
-                  backgroundColor: !root && selected
-                    ? $vuetify.theme.greyBackground
-                    : 'transparent',
+                  height: '40px',
+                  backgroundColor: itemProps.isDraggingOver && itemProps.isDropAllowed
+                    ? $vuetify.theme.draggableDropZone
+                    : 'transparent'
                 }"
-                data-test="item"
-                @click="click"
               >
-                <DraggableHandle
-                  :draggable="draggable"
-                  :draggableMetadata="node"
-                  :effectAllowed="draggableEffectAllowed"
+                <div v-if="copying" class="disabled-overlay"></div>
+                <VFlex shrink style="min-width: 28px;" class="text-xs-center">
+                  <VBtn
+                    v-if="showExpansion"
+                    icon
+                    class="ma-0"
+                    data-test="expansionToggle"
+                    :style="{ transform: toggleTransform }"
+                    @click.stop="toggle"
+                  >
+                    <Icon>keyboard_arrow_right</Icon>
+                  </VBtn>
+                </VFlex>
+                <VFlex shrink class="px-1">
+                  <VTooltip :disabled="!hasTitle(node)" bottom open-delay="500" lazy>
+                    <template #activator="{ on }">
+                      <Icon v-on="on">
+                        {{ node.resource_count ? "folder" : "folder_open" }}
+                      </Icon>
+                    </template>
+                    <span>{{ getTitle(node) }}</span>
+                  </VTooltip>
+                </VFlex>
+                <VFlex
+                  class="caption px-1 text-truncate"
+                  :class="getTitleClass(node)"
+                >
+                  <span v-if="hasTitle(node) || !allowEditing" class="content-title">
+                    {{ getTitle(node) }}
+                  </span>
+                  <span v-else class="red--text">
+                    {{ $tr('missingTitle') }}
+                  </span>
+                </VFlex>
+                <VSpacer />
+                <VFlex v-if="canEdit && !copying" shrink>
+                  <ContentNodeValidator
+                    v-if="!node.complete || node.error_count"
+                    :node="node"
+                    hideTitleValidation
+                  />
+                  <ContentNodeChangedIcon v-else :node="node" />
+                </VFlex>
+                <VFlex
+                  v-if="copying"
+                  class="mx-2"
+                  style="width: 24px;"
+                  shrink
                 >
-                  <VLayout
-                    row
-                    align-center
-                    class="draggable-background"
-                    :style="{
-                      height: '40px',
-                      backgroundColor: itemProps.isDraggingOver && itemProps.isDropAllowed
-                        ? $vuetify.theme.draggableDropZone
-                        : 'transparent'
-                    }"
+                  <ContentNodeCopyTaskProgress
+                    class="progress-loader"
+                    :node="node"
+                    size="24"
+                    showTooltip
+                  />
+                </VFlex>
+                <VFlex
+                  v-if="allowEditing && !copying"
+                  style="width: 40px;"
+                  shrink
+                >
+                  <VProgressCircular
+                    v-if="loading"
+                    class="mx-3"
+                    indeterminate
+                    size="15"
+                    width="2"
+                  />
+                  <KIconButton
+                    v-else
+                    icon="optionsVertical"
+                    :tooltip="$tr('optionsTooltip')"
+                    @click.stop
                   >
-                    <div v-if="copying" class="disabled-overlay"></div>
-                    <VFlex shrink style="min-width: 28px;" class="text-xs-center">
-                      <VBtn
-                        v-if="showExpansion"
-                        icon
-                        class="ma-0"
-                        data-test="expansionToggle"
-                        :style="{ transform: toggleTransform }"
-                        @click.stop="toggle"
-                      >
-                        <Icon>keyboard_arrow_right</Icon>
-                      </VBtn>
-                    </VFlex>
-                    <VFlex shrink class="px-1">
-                      <VTooltip :disabled="!hasTitle(node)" bottom open-delay="500" lazy>
-                        <template #activator="{ on }">
-                          <Icon v-on="on">
-                            {{ node.resource_count ? "folder" : "folder_open" }}
-                          </Icon>
-                        </template>
-                        <span>{{ getTitle(node) }}</span>
-                      </VTooltip>
-                    </VFlex>
-                    <VFlex
-                      class="caption px-1 text-truncate"
-                      :class="getTitleClass(node)"
-                    >
-                      <span v-if="hasTitle(node) || !allowEditing" class="content-title">
-                        {{ getTitle(node) }}
-                      </span>
-                      <span v-else class="red--text">
-                        {{ $tr('missingTitle') }}
-                      </span>
-                    </VFlex>
-                    <VSpacer />
-                    <VFlex v-if="canEdit && !copying" shrink>
-                      <ContentNodeValidator
-                        v-if="!node.complete || node.error_count"
-                        :node="node"
-                        hideTitleValidation
-                      />
-                      <ContentNodeChangedIcon v-else :node="node" />
-                    </VFlex>
-                    <VFlex
-                      v-if="copying"
-                      class="mx-2"
-                      style="width: 24px;"
-                      shrink
-                    >
-                      <ContentNodeCopyTaskProgress
-                        class="progress-loader"
-                        :node="node"
-                        size="24"
-                        showTooltip
-                      />
-                    </VFlex>
-                    <VFlex
-                      v-if="allowEditing && !copying"
-                      style="width: 40px;"
-                      shrink
-                    >
-                      <VProgressCircular
-                        v-if="loading"
-                        class="mx-3"
-                        indeterminate
-                        size="15"
-                        width="2"
-                      />
-                      <KIconButton
-                        v-else
-                        icon="optionsVertical"
-                        :tooltip="$tr('optionsTooltip')"
-                        @click.stop
-                      >
-                        <template #menu>
-                          <ContentNodeOptions :nodeId="nodeId" />
-                        </template>
-                      </KIconButton>
-                    </VFlex>
-                    <ContentNodeContextMenu
-                      v-if="allowEditing && !copying && false"
-                      :show="showContextMenu"
-                      :positionX="positionX"
-                      :positionY="positionY"
-                      :nodeId="nodeId"
-                      data-test="contextMenu"
-                    >
-                      <div class="caption grey--text pt-2 px-3" :class="getTitleClass(node)">
-                        {{ getTitle(node) }}
-                      </div>
+                    <template #menu>
                       <ContentNodeOptions :nodeId="nodeId" />
-                    </ContentNodeContextMenu>
-                  </VLayout>
-                </DraggableHandle>
-              </VFlex>
-            </template>
-          </ContextMenuCloak>
+                    </template>
+                  </KIconButton>
+                </VFlex>
+                <ContentNodeOptions
+                  isContextMenu
+                  :nodeId="nodeId"
+                >
+                  <template #header>
+                    <div class="caption grey--text pt-2 px-3" :class="getTitleClass(node)">
+                      {{ getTitle(node) }}
+                    </div>
+                  </template>
+                </ContentNodeOptions>
+              </VLayout>
+            </DraggableHandle>
+          </VFlex>
         </template>
       </DraggableItem>
       <VFlex v-if="node && (root || hasContent) && !loading && !copying">
@@ -181,12 +174,9 @@
   import ContentNodeOptions from '../ContentNodeOptions';
   import ContentNodeChangedIcon from '../ContentNodeChangedIcon';
   import ContentNodeValidator from '../ContentNodeValidator';
-  import ContentNodeContextMenu from '../ContentNodeContextMenu';
   import ContentNodeCopyTaskProgress from '../../views/progress/ContentNodeCopyTaskProgress';
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
-  import ContextMenuCloak from 'shared/views/ContextMenuCloak';
   import LoadingText from 'shared/views/LoadingText';
-  import IconButton from 'shared/views/IconButton';
   import DraggableCollection from 'shared/views/draggable/DraggableCollection';
   import DraggableItem from 'shared/views/draggable/DraggableItem';
   import DraggableHandle from 'shared/views/draggable/DraggableHandle';
@@ -200,13 +190,10 @@
       DraggableHandle,
       DraggableItem,
       DraggableCollection,
-      ContextMenuCloak,
-      ContentNodeContextMenu,
       ContentNodeOptions,
       ContentNodeChangedIcon,
       ContentNodeValidator,
       LoadingText,
-      IconButton,
       ContentNodeCopyTaskProgress,
     },
     mixins: [titleMixin],
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
index 07dcccf1ec..dd0930bcc9 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
@@ -382,10 +382,7 @@
         offline: state => !state.connection.online,
       }),
       ...mapGetters(['isAboutLicensesModalOpen']),
-      ...mapGetters('contentNode', [
-        'getContentNode',
-        'getMoveNodesIds',
-      ]),
+      ...mapGetters('contentNode', ['getContentNode', 'getMoveNodesIds']),
       ...mapGetters('currentChannel', ['currentChannel', 'canEdit', 'canManage', 'rootId']),
       rootNode() {
         return this.getContentNode(this.rootId);
@@ -489,9 +486,7 @@
       },
       moveModalDialog: {
         get() {
-          return (
-            this.moveNodeIds && this.moveNodeIds.length > 0
-          )
+          return this.moveNodeIds && this.moveNodeIds.length > 0;
         },
         set(value) {
           if (!value) {
@@ -502,10 +497,7 @@
     },
     methods: {
       ...mapActions('channel', ['deleteChannel']),
-      ...mapActions('contentNode', [
-        'setMoveNodesIds',
-        'moveContentNodes',
-      ]),
+      ...mapActions('contentNode', ['setMoveNodesIds', 'moveContentNodes']),
       handleDelete() {
         this.deleteChannel(this.currentChannel.id).then(() => {
           localStorage.snackbar = this.$tr('channelDeletedSnackbar');
diff --git a/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/getters.js b/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/getters.js
index e635c86adb..ba1259cf75 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/getters.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/getters.js
@@ -361,5 +361,5 @@ export function getQuickEditModalOpen(state) {
 export function getMoveNodesIds(state) {
   return function() {
     return state.moveNodes;
-  }
+  };
 }

From b5629e65643fad1b183761ca9535e1434f83d089 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 25 Mar 2024 15:35:57 -0500
Subject: [PATCH 4/7] Lint files

---
 .../components/ContentNodeListItem/index.vue  | 346 +++++++++---------
 .../components/ContentNodeOptions.vue         |   2 +-
 package.json                                  |   2 +-
 3 files changed, 174 insertions(+), 176 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
index d784be7012..5b954814c1 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
@@ -2,190 +2,190 @@
 
   <VHover :disabled="copying">
     <template #default="{ hover }">
-          <DraggableHandle v-bind="draggableHandle">
-            <template #default>
-              <VListTile
-                v-if="node"
-                class="content-list-item pa-0"
-                :class="{
-                  'compact': isCompact,
-                  hover: hover && !copying,
-                  active: (active || hover) && !copying,
-                  disabled: copying,
-                  highlight,
-                }"
-                data-test="content-item"
-                @click="handleTileClick"
+      <DraggableHandle v-bind="draggableHandle">
+        <template #default>
+          <VListTile
+            v-if="node"
+            class="content-list-item pa-0"
+            :class="{
+              'compact': isCompact,
+              hover: hover && !copying,
+              active: (active || hover) && !copying,
+              disabled: copying,
+              highlight,
+            }"
+            data-test="content-item"
+            @click="handleTileClick"
+          >
+            <slot name="actions-start" :hover="hover" class="actions-start-col"></slot>
+            <div
+              class="mx-2 thumbnail-col"
+              :class="{
+                'px-2': !isCompact,
+                'py-4': !isCompact,
+                'py-3': isCompact,
+              }"
+            >
+              <ImageOnlyThumbnail
+                v-bind="thumbnailAttrs"
+                :isTopic="isTopic"
+                :learningActivities="node.learning_activities"
+                :compact="isCompact"
+                :isEmpty="node.total_count === 0"
+              />
+            </div>
+            <VListTileContent
+              class="description-col grow px-2"
+              :class="{
+                'my-4': !isCompact,
+                'my-3': isCompact,
+              }"
+            >
+              <VListTileTitle data-test="title">
+                <VLayout row>
+                  <VFlex shrink class="text-truncate">
+                    <h3
+                      v-if="hasTitle(node) || !canEdit || copying || isNew"
+                      class="notranslate text-truncate"
+                      :class="[
+                        isCompact ? 'font-weight-regular' : '',
+                        getTitleClass(node),
+                      ]"
+                      dir="auto"
+                    >
+                      {{ getTitle(node) }}
+                    </h3>
+                  </VFlex>
+                  <VFlex v-if="!isTopic && isCoach" class="px-1">
+                    <Icon
+                      color="roleVisibilityCoach"
+                      small
+                      style="vertical-align: middle;"
+                    >
+                      local_library
+                    </Icon>
+                  </VFlex>
+                  <VFlex>
+                    <ContentNodeValidator
+                      v-if="canEdit && !copying && !isNew"
+                      :node="node"
+                    />
+                  </VFlex>
+                </VLayout>
+              </VListTileTitle>
+
+              <ToggleText
+                v-show="!isCompact && !comfortable"
+                :text="node.description"
+                data-test="description"
+                notranslate
+                dir="auto"
+                :splitAt="280"
+              />
+
+              <VListTileSubTitle
+                v-if="!isCompact"
+                data-test="subtitle"
+                class="metadata"
               >
-                <slot name="actions-start" :hover="hover" class="actions-start-col"></slot>
-                <div
-                  class="mx-2 thumbnail-col"
-                  :class="{
-                    'px-2': !isCompact,
-                    'py-4': !isCompact,
-                    'py-3': isCompact,
-                  }"
+                <span v-if="subtitle" class="text">{{ subtitle }}</span>
+                <span
+                  v-if="node.categories ? Object.keys(node.categories).length > 0 : null"
+                  class="text"
                 >
-                  <ImageOnlyThumbnail
-                    v-bind="thumbnailAttrs"
-                    :isTopic="isTopic"
-                    :learningActivities="node.learning_activities"
-                    :compact="isCompact"
-                    :isEmpty="node.total_count === 0"
-                  />
-                </div>
-                <VListTileContent
-                  class="description-col grow px-2"
-                  :class="{
-                    'my-4': !isCompact,
-                    'my-3': isCompact,
-                  }"
-                >
-                  <VListTileTitle data-test="title">
-                    <VLayout row>
-                      <VFlex shrink class="text-truncate">
-                        <h3
-                          v-if="hasTitle(node) || !canEdit || copying || isNew"
-                          class="notranslate text-truncate"
-                          :class="[
-                            isCompact ? 'font-weight-regular' : '',
-                            getTitleClass(node),
-                          ]"
-                          dir="auto"
-                        >
-                          {{ getTitle(node) }}
-                        </h3>
-                      </VFlex>
-                      <VFlex v-if="!isTopic && isCoach" class="px-1">
+                  {{ category(node.categories) }}
+                </span>
+                <span v-if="isTopic && node.coach_count">
+                  <!-- for each learning activity -->
+                  <VTooltip bottom lazy>
+                    <template #activator="{ on }">
+                      <div style="display: inline-block;" v-on="on">
                         <Icon
                           color="roleVisibilityCoach"
                           small
-                          style="vertical-align: middle;"
+                          class="mx-1"
+                          style="vertical-align: sub;"
                         >
                           local_library
                         </Icon>
-                      </VFlex>
-                      <VFlex>
-                        <ContentNodeValidator
-                          v-if="canEdit && !copying && !isNew"
-                          :node="node"
-                        />
-                      </VFlex>
-                    </VLayout>
-                  </VListTileTitle>
-
-                  <ToggleText
-                    v-show="!isCompact && !comfortable"
-                    :text="node.description"
-                    data-test="description"
-                    notranslate
-                    dir="auto"
-                    :splitAt="280"
-                  />
-
-                  <VListTileSubTitle
-                    v-if="!isCompact"
-                    data-test="subtitle"
-                    class="metadata"
-                  >
-                    <span v-if="subtitle" class="text">{{ subtitle }}</span>
-                    <span
-                      v-if="node.categories ? Object.keys(node.categories).length > 0 : null"
-                      class="text"
-                    >
-                      {{ category(node.categories) }}
-                    </span>
-                    <span v-if="isTopic && node.coach_count">
-                      <!-- for each learning activity -->
-                      <VTooltip bottom lazy>
-                        <template #activator="{ on }">
-                          <div style="display: inline-block;" v-on="on">
-                            <Icon
-                              color="roleVisibilityCoach"
-                              small
-                              class="mx-1"
-                              style="vertical-align: sub;"
-                            >
-                              local_library
-                            </Icon>
-                            <span v-if="isTopic">
-                              {{ $formatNumber(node.coach_count) }}
-                            </span>
-                          </div>
-                        </template>
-                        <span>
-                          {{ isTopic ?
-                            $tr('hasCoachTooltip', { value: node.coach_count })
-                            : $tr('coachTooltip')
-                          }}
+                        <span v-if="isTopic">
+                          {{ $formatNumber(node.coach_count) }}
                         </span>
-                      </VTooltip>
-                    </span>
-                  </VListTileSubTitle>
-                  <span v-if="!isCompact">
-
-                    <ContentNodeLearningActivityIcon
-                      v-if="!isTopic"
-                      :learningActivities="node.learning_activities"
-                      showEachActivityIcon
-                      includeText
-                      small
-                      chip
-                      class="inline"
-                    />
-                    <span v-if="node.grade_levels">
-                      <span
-                        v-for="(key, index) in Object.keys(node.grade_levels)"
-                        :key="index"
-                        class="small-chip"
-                        :style="{ backgroundColor: $themeTokens.fineLine }"
-                      >
-                        {{ levels(key) }}
-                      </span>
+                      </div>
+                    </template>
+                    <span>
+                      {{ isTopic ?
+                        $tr('hasCoachTooltip', { value: node.coach_count })
+                        : $tr('coachTooltip')
+                      }}
                     </span>
+                  </VTooltip>
+                </span>
+              </VListTileSubTitle>
+              <span v-if="!isCompact">
+
+                <ContentNodeLearningActivityIcon
+                  v-if="!isTopic"
+                  :learningActivities="node.learning_activities"
+                  showEachActivityIcon
+                  includeText
+                  small
+                  chip
+                  class="inline"
+                />
+                <span v-if="node.grade_levels">
+                  <span
+                    v-for="(key, index) in Object.keys(node.grade_levels)"
+                    :key="index"
+                    class="small-chip"
+                    :style="{ backgroundColor: $themeTokens.fineLine }"
+                  >
+                    {{ levels(key) }}
                   </span>
-                </VListTileContent>
-
-                <VListTileContent class="actions-end-col updated">
-                  <ContentNodeChangedIcon v-if="canEdit && !copying" :node="node" />
-                </VListTileContent>
-                <template v-if="!copying">
-                  <VListTileAction class="actions-end-col">
-                    <KIconButton
-                      v-if="isTopic"
-                      :aria-hidden="hover"
-                      data-test="btn-chevron"
-                      icon="chevronRight"
-                      :tooltip="$tr('openTopic')"
-                      size="small"
-                      @click="$emit('topicChevronClick')"
-                    />
-                  </VListTileAction>
-                  <slot name="actions-end" :hover="hover"></slot>
-                </template>
-                <template v-else>
-                  <div class="copying">
-                    <p class="caption pr-3">
-                      <span
-                        class="grey--text"
-                        :style="{ 'cursor': hasCopyingErrored ? 'default' : 'progress' }"
-                      >
-                        {{ copyingMessage }}
-                      </span>
-                      <slot name="copy-fail-retry-action"></slot>
-                    </p>
-                    <ContentNodeCopyTaskProgress
-                      :node="node"
-                      size="30"
-                    />
-                    <slot name="copy-fail-remove-action"></slot>
-                  </div>
-                  <div class="disabled-overlay"></div>
-                </template>
-                <slot name="context-menu" v-if="!contextMenuDisabled"></slot>
-              </VListTile>
+                </span>
+              </span>
+            </VListTileContent>
+
+            <VListTileContent class="actions-end-col updated">
+              <ContentNodeChangedIcon v-if="canEdit && !copying" :node="node" />
+            </VListTileContent>
+            <template v-if="!copying">
+              <VListTileAction class="actions-end-col">
+                <KIconButton
+                  v-if="isTopic"
+                  :aria-hidden="hover"
+                  data-test="btn-chevron"
+                  icon="chevronRight"
+                  :tooltip="$tr('openTopic')"
+                  size="small"
+                  @click="$emit('topicChevronClick')"
+                />
+              </VListTileAction>
+              <slot name="actions-end" :hover="hover"></slot>
+            </template>
+            <template v-else>
+              <div class="copying">
+                <p class="caption pr-3">
+                  <span
+                    class="grey--text"
+                    :style="{ 'cursor': hasCopyingErrored ? 'default' : 'progress' }"
+                  >
+                    {{ copyingMessage }}
+                  </span>
+                  <slot name="copy-fail-retry-action"></slot>
+                </p>
+                <ContentNodeCopyTaskProgress
+                  :node="node"
+                  size="30"
+                />
+                <slot name="copy-fail-remove-action"></slot>
+              </div>
+              <div class="disabled-overlay"></div>
             </template>
-          </DraggableHandle>
+            <slot v-if="!contextMenuDisabled" name="context-menu"></slot>
+          </VListTile>
+        </template>
+      </DraggableHandle>
     </template>
   </VHover>
 
@@ -204,7 +204,6 @@
   import { RolesNames } from 'shared/leUtils/Roles';
   import ImageOnlyThumbnail from 'shared/views/files/ImageOnlyThumbnail';
   import ToggleText from 'shared/views/ToggleText';
-  import ContextMenuCloak from 'shared/views/ContextMenuCloak';
   import DraggableHandle from 'shared/views/draggable/DraggableHandle';
   import { titleMixin, metadataTranslationMixin } from 'shared/mixins';
   import { EffectAllowed } from 'shared/mixins/draggable/constants';
@@ -214,7 +213,6 @@
     name: 'ContentNodeListItem',
     components: {
       DraggableHandle,
-      ContextMenuCloak,
       ImageOnlyThumbnail,
       ContentNodeValidator,
       ContentNodeChangedIcon,
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue
index a00185b700..c8cd119557 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue
@@ -6,7 +6,7 @@
     @select="handleSelect"
   >
     <template #header>
-      <slot name="header" />
+      <slot name="header"></slot>
     </template>
   </KDropdownMenu>
 
diff --git a/package.json b/package.json
index 8adcf0d23f..c35d486a16 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
     "jspdf": "https://github.com/parallax/jsPDF.git#b7a1d8239c596292ce86dafa77f05987bcfa2e6e",
     "jszip": "^3.10.1",
     "kolibri-constants": "^0.2.0",
-    "kolibri-design-system": "https://github.com/AlexVelezLl/kolibri-design-system.git#8b8808f35a330e0e25103720ea63f42154f6e678",
+    "kolibri-design-system": "https://github.com/AlexVelezLl/kolibri-design-system.git#04047be07e8de50d9a31e5e1a2b2eca810495fb8",
     "lodash": "^4.17.21",
     "material-icons": "0.3.1",
     "mutex-js": "^1.1.5",

From fc6f1aa16cde2dff76456e1dd7565ad994430ce0 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 25 Mar 2024 16:40:51 -0500
Subject: [PATCH 5/7] Update yarn lock file

---
 yarn.lock | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index d7cd14d55e..012e5c2f2b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9123,9 +9123,9 @@ kolibri-constants@^0.2.0:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.0.tgz#47c9d773894e23251ba5ac4db420822e45603142"
   integrity sha512-WYDMGDzB9gNxRbpX1O2cGe1HrJvLvSZGwMuAv6dqrxJgPf7iO+Hi40/1CXjHM7nk5CRt+hn5bqnMzCBmj1omPA==
 
-"kolibri-design-system@https://github.com/AlexVelezLl/kolibri-design-system.git#8b8808f35a330e0e25103720ea63f42154f6e678":
+"kolibri-design-system@https://github.com/AlexVelezLl/kolibri-design-system.git#04047be07e8de50d9a31e5e1a2b2eca810495fb8":
   version "3.1.0"
-  resolved "https://github.com/AlexVelezLl/kolibri-design-system.git#8b8808f35a330e0e25103720ea63f42154f6e678"
+  resolved "https://github.com/AlexVelezLl/kolibri-design-system.git#04047be07e8de50d9a31e5e1a2b2eca810495fb8"
   dependencies:
     "@vue/composition-api" "^1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"

From 78ec861d1b04bf4956d719cda5dbb5dff4cef98d Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 25 Mar 2024 16:57:09 -0500
Subject: [PATCH 6/7] Fix StudioTree

---
 .../frontend/channelEdit/components/StudioTree/StudioTree.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue b/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
index 497e95218d..d101e2e624 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
@@ -126,13 +126,15 @@
                     @click.stop
                   >
                     <template #menu>
-                      <ContentNodeOptions :nodeId="nodeId" />
+                      <ContentNodeOptions :nodeId="nodeId" data-test="editMenu" />
                     </template>
                   </KIconButton>
                 </VFlex>
                 <ContentNodeOptions
+                  v-if="allowEditing && !copying"
                   isContextMenu
                   :nodeId="nodeId"
+                  data-test="contextMenu"
                 >
                   <template #header>
                     <div class="caption grey--text pt-2 px-3" :class="getTitleClass(node)">

From effd79dafaa8a17f35863482de459a42899c0cb2 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Fri, 24 May 2024 12:25:56 -0500
Subject: [PATCH 7/7] Update kds reference

---
 package.json |  2 +-
 yarn.lock    | 15 ++++++++-------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index c35d486a16..8822297f40 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
     "jspdf": "https://github.com/parallax/jsPDF.git#b7a1d8239c596292ce86dafa77f05987bcfa2e6e",
     "jszip": "^3.10.1",
     "kolibri-constants": "^0.2.0",
-    "kolibri-design-system": "https://github.com/AlexVelezLl/kolibri-design-system.git#04047be07e8de50d9a31e5e1a2b2eca810495fb8",
+    "kolibri-design-system": "3.3.0",
     "lodash": "^4.17.21",
     "material-icons": "0.3.1",
     "mutex-js": "^1.1.5",
diff --git a/yarn.lock b/yarn.lock
index 012e5c2f2b..cd4d7d936d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3496,17 +3496,17 @@ anymatch@^3.0.3, anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-"aphrodite@https://github.com/learningequality/aphrodite.git":
+"aphrodite@git+https://github.com/learningequality/aphrodite.git":
   version "2.2.3"
-  resolved "https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
+  resolved "git+https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
   dependencies:
     asap "^2.0.3"
     inline-style-prefixer "^4.0.2"
     string-hash "^1.1.3"
 
-"aphrodite@https://github.com/learningequality/aphrodite/":
+"aphrodite@https://github.com/learningequality/aphrodite.git":
   version "2.2.3"
-  resolved "https://github.com/learningequality/aphrodite/#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
+  resolved "https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
   dependencies:
     asap "^2.0.3"
     inline-style-prefixer "^4.0.2"
@@ -9123,9 +9123,10 @@ kolibri-constants@^0.2.0:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.0.tgz#47c9d773894e23251ba5ac4db420822e45603142"
   integrity sha512-WYDMGDzB9gNxRbpX1O2cGe1HrJvLvSZGwMuAv6dqrxJgPf7iO+Hi40/1CXjHM7nk5CRt+hn5bqnMzCBmj1omPA==
 
-"kolibri-design-system@https://github.com/AlexVelezLl/kolibri-design-system.git#04047be07e8de50d9a31e5e1a2b2eca810495fb8":
-  version "3.1.0"
-  resolved "https://github.com/AlexVelezLl/kolibri-design-system.git#04047be07e8de50d9a31e5e1a2b2eca810495fb8"
+kolibri-design-system@3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-3.3.0.tgz#728d9955d27782315fc7e5a49af7fca6f9e88c00"
+  integrity sha512-1X7LJc9LAUXQV2NmcfVVjRW7igezsgcNg/znY8hah0DAzu6OX+tZDn/yEfCwbDhdVkpwzELxjMLZMM5o9aeKgg==
   dependencies:
     "@vue/composition-api" "^1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"