From da33378f5911c2bbe5804016db1b704230154bac Mon Sep 17 00:00:00 2001
From: Tushar Verma <tusharmyself06@gmail.com>
Date: Thu, 2 Apr 2026 00:22:10 +0530
Subject: [PATCH 1/3] Replace Vuetify patterns in TreeViewBase with KDS
 components

---
 .../views/TreeView/TreeViewBase.vue           | 410 +++++++++++-------
 .../TreeView/__tests__/TreeViewBase.spec.js   | 114 ++---
 2 files changed, 295 insertions(+), 229 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
index e7739fc4f9..c613963791 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
@@ -17,7 +17,7 @@
         {{ currentChannel.name }}
       </VToolbarTitle>
       <VToolbarItems
-        v-if="$vuetify.breakpoint.smAndUp"
+        v-if="!windowIsSmall"
         class="ml-4"
       >
         <KRouterLink
@@ -60,89 +60,67 @@
         v-if="errorsInChannel && canEdit"
         class="mx-1"
       >
-        <VTooltip
-          bottom
-          lazy
+        <div
+          ref="errorCount"
+          class="amber--text title"
+          style="width: max-content"
+        >
+          {{ $formatNumber(errorsInChannel) }}
+          <KIcon icon="warningIncomplete" />
+        </div>
+        <KTooltip
+          reference="errorCount"
+          :refs="$refs"
+          placement="bottom"
         >
-          <template #activator="{ on }">
-            <div
-              class="amber--text title"
-              style="width: max-content"
-              v-on="on"
-            >
-              {{ $formatNumber(errorsInChannel) }}
-              <KIcon icon="warningIncomplete" />
-            </div>
-          </template>
           <span>{{ $tr('incompleteDescendantsText', { count: errorsInChannel }) }}</span>
-        </VTooltip>
+        </KTooltip>
       </div>
-      <template v-if="$vuetify.breakpoint.smAndUp">
+      <template v-if="!windowIsSmall">
         <span
           v-if="canManage && isRicecooker"
           class="font-weight-bold grey--text subheading"
         >
           {{ $tr('apiGenerated') }}
         </span>
-        <BaseMenu v-if="canShareChannel">
-          <template #activator="{ on }">
-            <KButton
-              hasDropdown
-              class="share-button"
-              v-on="on"
-            >
-              {{ $tr('shareMenuButton') }}
-            </KButton>
+        <KButton
+          v-if="shareMenuOptions.length"
+          :text="$tr('shareMenuButton')"
+          hasDropdown
+          class="share-button"
+        >
+          <template #menu>
+            <KDropdownMenu
+              :options="shareMenuOptions"
+              @select="handleShareMenuSelect"
+            />
           </template>
-          <VList>
-            <VListTile
-              v-if="canSubmitToCommunityLibrary"
-              @click="showSubmitToCommunityLibrarySidePanel = true"
-            >
-              <VListTileTitle>{{ $tr('submitToCommunityLibrary') }}</VListTileTitle>
-            </VListTile>
-            <VListTile
-              v-if="canManage"
-              :to="shareChannelLink"
-              @click="trackClickEvent('Share channel')"
-            >
-              <VListTileTitle>{{ $tr('inviteCollaborators') }}</VListTileTitle>
-            </VListTile>
-            <VListTile
-              v-if="isPublished"
-              @click="showTokenModal = true"
-            >
-              <VListTileTitle>{{ $tr('shareToken') }}</VListTileTitle>
-            </VListTile>
-          </VList>
-        </BaseMenu>
-        <VTooltip
+        </KButton>
+        <!-- Need to wrap in div to enable tooltip when button is disabled -->
+        <div
           v-if="!loading && canManage"
-          bottom
-          attach="body"
-          lazy
+          ref="publishButton"
+          style="height: 100%"
+        >
+          <KButton
+            :text="$tr('publishButton')"
+            :primary="true"
+            appearance="flat-button"
+            class="ma-0"
+            :class="{ disabled: disablePublish }"
+            :disabled="disablePublish"
+            style="height: inherit"
+            @click="publishChannel"
+          />
+        </div>
+        <KTooltip
+          v-if="!loading && canManage"
+          reference="publishButton"
+          :refs="$refs"
+          placement="bottom"
         >
-          <template #activator="{ on }">
-            <!-- Need to wrap in div to enable tooltip when button is disabled -->
-            <div
-              style="height: 100%"
-              v-on="on"
-            >
-              <VBtn
-                color="primary"
-                flat
-                class="ma-0"
-                :class="{ disabled: disablePublish }"
-                :disabled="disablePublish"
-                style="height: inherit"
-                @click.stop="publishChannel"
-              >
-                {{ $tr('publishButton') }}
-              </VBtn>
-            </div>
-          </template>
           <span>{{ publishButtonTooltip }}</span>
-        </VTooltip>
+        </KTooltip>
         <span
           v-else-if="!loading"
           class="font-weight-bold grey--text subheading"
@@ -151,89 +129,19 @@
         </span>
       </template>
       <VToolbarItems>
-        <BaseMenu v-if="showChannelMenu">
-          <template #activator="{ on }">
-            <VBtn
-              flat
-              icon
-              v-on="on"
-            >
-              <Icon
-                icon="optionsHorizontal"
-                style="font-size: 25px"
-              />
-            </VBtn>
+        <KIconButton
+          v-if="channelMenuOptions.length"
+          class="toolbar-icon-btn"
+          icon="optionsHorizontal"
+          :tooltip="$tr('moreOptions')"
+        >
+          <template #menu>
+            <KDropdownMenu
+              :options="channelMenuOptions"
+              @select="handleChannelMenuSelect"
+            />
           </template>
-          <VList>
-            <template v-if="$vuetify.breakpoint.xsOnly">
-              <VListTile
-                v-if="canManage"
-                :disabled="disablePublish"
-                @click="showPublishModal = true"
-              >
-                <VListTileTitle>{{ $tr('publishButton') }}</VListTileTitle>
-              </VListTile>
-              <VListTile :to="viewChannelDetailsLink">
-                <VListTileTitle>{{ $tr('channelDetails') }}</VListTileTitle>
-              </VListTile>
-              <VListTile
-                v-if="canEdit"
-                :to="editChannelLink"
-              >
-                <VListTileTitle>
-                  {{ $tr('editChannel') }}
-                  <Icon
-                    v-if="!currentChannel.language"
-                    class="mx-1"
-                    color="red"
-                    icon="error"
-                    style="vertical-align: baseline"
-                  />
-                </VListTileTitle>
-              </VListTile>
-            </template>
-            <VListTile
-              v-if="currentChannel && currentChannel.draft_token"
-              @click="showPreviewDraftModal = true"
-            >
-              <VListTileTitle>{{ getDraftTokenAction$() }}</VListTileTitle>
-            </VListTile>
-            <VListTile
-              v-if="isPublished"
-              @click="showTokenModal = true"
-            >
-              <VListTileTitle>{{ $tr('getToken') }}</VListTileTitle>
-            </VListTile>
-            <VListTile
-              v-if="canManage"
-              :to="shareChannelLink"
-              @click="trackClickEvent('Share channel')"
-            >
-              <VListTileTitle>{{ $tr('shareChannel') }}</VListTileTitle>
-            </VListTile>
-            <VListTile
-              v-if="canEdit"
-              @click="syncChannel"
-            >
-              <VListTileTitle>{{ $tr('syncChannel') }}</VListTileTitle>
-            </VListTile>
-            <VListTile
-              v-if="canEdit"
-              :to="trashLink"
-              @click="trackClickEvent('Trash')"
-            >
-              <VListTileTitle>{{ $tr('openTrash') }}</VListTileTitle>
-            </VListTile>
-            <VListTile
-              v-if="canEdit"
-              @click="deleteChannelModal"
-            >
-              <VListTileTitle class="red--text">
-                {{ $tr('deleteChannel') }}
-              </VListTileTitle>
-            </VListTile>
-          </VList>
-        </BaseMenu>
+        </KIconButton>
       </VToolbarItems>
       <template #extension>
         <slot name="extension"></slot>
@@ -351,6 +259,7 @@
 <script>
 
   import { mapActions, mapGetters, mapState } from 'vuex';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import PreviewDraftChannelModal from '../../components/modals/PreviewDraftChannelModal.vue';
   import Clipboard from '../../components/Clipboard';
   import SyncResourcesModal from '../sync/SyncResourcesModal';
@@ -376,6 +285,25 @@
   import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
   import { commonStrings } from 'shared/strings/commonStrings';
 
+  // Menu option constants
+  const ShareMenuOptions = {
+    SUBMIT_TO_LIBRARY: 'submit-to-library',
+    INVITE_COLLABORATORS: 'invite-collaborators',
+    SHARE_TOKEN: 'share-token',
+  };
+
+  const ChannelMenuOptions = {
+    PUBLISH: 'publish',
+    VIEW_DETAILS: 'view-details',
+    EDIT_CHANNEL: 'edit-channel',
+    PREVIEW_DRAFT: 'preview-draft',
+    GET_TOKEN: 'get-token',
+    SHARE_CHANNEL: 'share-channel',
+    SYNC: 'sync',
+    TRASH: 'trash',
+    DELETE: 'delete',
+  };
+
   export default {
     name: 'TreeViewBase',
     components: {
@@ -399,8 +327,10 @@
     },
     mixins: [titleMixin],
     setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
       const { getDraftTokenAction$ } = communityChannelsStrings;
       return {
+        windowIsSmall,
         getDraftTokenAction$,
       };
     },
@@ -474,14 +404,6 @@
           return this.$tr('noChangesText');
         }
       },
-      showChannelMenu() {
-        return (
-          !this.loading && (this.$vuetify.breakpoint.xsOnly || this.canManage || this.isPublished)
-        );
-      },
-      canShareChannel() {
-        return this.canManage || this.isPublished;
-      },
       canSubmitToCommunityLibrary() {
         if (!this.currentChannel) {
           return false;
@@ -543,6 +465,111 @@
       dropEffect() {
         return DropEffect.COPY;
       },
+      shareMenuOptions() {
+        const options = [];
+        if (this.canSubmitToCommunityLibrary) {
+          options.push({
+            label: this.$tr('submitToCommunityLibrary'),
+            value: ShareMenuOptions.SUBMIT_TO_LIBRARY,
+          });
+        }
+        if (this.canManage) {
+          options.push({
+            label: this.$tr('inviteCollaborators'),
+            value: ShareMenuOptions.INVITE_COLLABORATORS,
+          });
+        }
+        if (this.isPublished) {
+          options.push({
+            label: this.$tr('shareToken'),
+            value: ShareMenuOptions.SHARE_TOKEN,
+          });
+        }
+        return options;
+      },
+      channelMenuOptions() {
+        const options = [];
+
+        if (this.windowIsSmall) {
+          if (this.canManage) {
+            options.push({
+              label: this.$tr('publishButton'),
+              value: ChannelMenuOptions.PUBLISH,
+              disabled: this.disablePublish,
+            });
+          }
+          options.push({
+            label: this.$tr('channelDetails'),
+            value: ChannelMenuOptions.VIEW_DETAILS,
+          });
+          if (this.canEdit) {
+            let label = this.$tr('editChannel');
+            if (!this.currentChannel.language) {
+              label = `${label} ⚠️`;
+            }
+            options.push({
+              label,
+              value: 'edit-channel',
+            });
+          }
+
+          if (this.canSubmitToCommunityLibrary) {
+            options.push({
+              label: this.$tr('submitToCommunityLibrary'),
+              value: 'submit-to-library',
+            });
+          }
+          if (this.canManage) {
+            options.push({
+              label: this.$tr('inviteCollaborators'),
+              value: 'invite-collaborators',
+            });
+          }
+          if (this.isPublished) {
+            options.push({
+              label: this.$tr('shareToken'),
+              value: 'share-token',
+            });
+          }
+        } else {
+          // Desktop view - show different options
+          if (this.currentChannel && this.currentChannel.draft_token) {
+            options.push({
+              label: this.getDraftTokenAction$(),
+              value: ChannelMenuOptions.PREVIEW_DRAFT,
+            });
+          }
+          if (this.isPublished) {
+            options.push({
+              label: this.$tr('getToken'),
+              value: ChannelMenuOptions.GET_TOKEN,
+            });
+          }
+          if (this.canManage) {
+            options.push({
+              label: this.$tr('shareChannel'),
+              value: ChannelMenuOptions.SHARE_CHANNEL,
+            });
+          }
+        }
+
+        if (this.canEdit) {
+          options.push({
+            label: this.$tr('syncChannel'),
+            value: ChannelMenuOptions.SYNC,
+          });
+          options.push({
+            label: this.$tr('openTrash'),
+            value: ChannelMenuOptions.TRASH,
+          });
+          options.push({
+            label: this.$tr('deleteChannel'),
+            value: ChannelMenuOptions.DELETE,
+          });
+        }
+
+        return options;
+      },
     },
     watch: {
       rootId: {
@@ -611,6 +638,64 @@
       trackClickEvent(eventLabel) {
         this.$analytics.trackClick('channel_editor_toolbar', eventLabel);
       },
+      // Shared handler for common menu options that appear in both Share and Channel menus
+      handleCommonShareOption(value) {
+        switch (value) {
+          case ShareMenuOptions.SUBMIT_TO_LIBRARY:
+            this.showSubmitToCommunityLibrarySidePanel = true;
+            break;
+          case ShareMenuOptions.INVITE_COLLABORATORS:
+            this.trackClickEvent('Share channel');
+            this.$router.push(this.shareChannelLink);
+            break;
+          case ShareMenuOptions.SHARE_TOKEN:
+            this.showTokenModal = true;
+            break;
+        }
+      },
+      handleShareMenuSelect(option) {
+        this.handleCommonShareOption(option.value);
+      },
+      handleChannelMenuSelect(option) {
+        // Check if it's a common share option first
+        if (Object.values(ShareMenuOptions).includes(option.value)) {
+          this.handleCommonShareOption(option.value);
+          return;
+        }
+
+        // Handle channel-specific options
+        switch (option.value) {
+          case ChannelMenuOptions.PUBLISH:
+            this.showPublishSidePanel = true;
+            break;
+          case ChannelMenuOptions.VIEW_DETAILS:
+            this.$router.push(this.viewChannelDetailsLink);
+            break;
+          case ChannelMenuOptions.EDIT_CHANNEL:
+            this.$router.push(this.editChannelLink);
+            break;
+          case ChannelMenuOptions.PREVIEW_DRAFT:
+            this.showPreviewDraftModal = true;
+            break;
+          case ChannelMenuOptions.GET_TOKEN:
+            this.showTokenModal = true;
+            break;
+          case ChannelMenuOptions.SHARE_CHANNEL:
+            this.trackClickEvent('Share channel');
+            this.$router.push(this.shareChannelLink);
+            break;
+          case ChannelMenuOptions.SYNC:
+            this.syncChannel();
+            break;
+          case ChannelMenuOptions.TRASH:
+            this.trackClickEvent('Trash');
+            this.$router.push(this.trashLink);
+            break;
+          case ChannelMenuOptions.DELETE:
+            this.deleteChannelModal();
+            break;
+        }
+      },
     },
     $trs: {
       channelDetails: 'View channel details',
@@ -636,6 +721,9 @@
       inviteCollaborators: 'Invite collaborators',
       shareToken: 'Share token',
 
+      // More options menu
+      moreOptions: 'More options',
+
       channelDeletedSnackbar: 'Channel deleted',
     },
   };
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/__tests__/TreeViewBase.spec.js b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/__tests__/TreeViewBase.spec.js
index 5987cb99d0..5616d08be4 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/__tests__/TreeViewBase.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/__tests__/TreeViewBase.spec.js
@@ -9,6 +9,15 @@ import storeFactory from 'shared/vuex/baseStore';
 import DraggablePlugin from 'shared/vuex/draggablePlugin';
 import { RouteNames as ChannelRouteNames } from 'frontend/channelList/constants';
 
+// Mock useKResponsiveWindow composable
+jest.mock('kolibri-design-system/lib/composables/useKResponsiveWindow', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
+const useKResponsiveWindow =
+  require('kolibri-design-system/lib/composables/useKResponsiveWindow').default;
+
 const localVue = createLocalVue();
 localVue.use(Vuex);
 localVue.use(VueRouter);
@@ -55,8 +64,18 @@ const initWrapper = ({
   getters = GETTERS,
   actions = ACTIONS,
   channelOverrides = {},
-  breakpoint = { smAndUp: true },
+  windowIsSmall = false,
 } = {}) => {
+  // Mock the responsive window composable - return plain values
+  useKResponsiveWindow.mockReturnValue({
+    windowIsSmall,
+    windowIsMedium: false,
+    windowIsLarge: !windowIsSmall,
+    windowHeight: 768,
+    windowWidth: windowIsSmall ? 360 : 1024,
+    windowBreakpoint: windowIsSmall ? 0 : 4,
+  });
+
   const router = new VueRouter({
     routes: [
       {
@@ -113,13 +132,6 @@ const initWrapper = ({
     propsData: {
       loading: false,
     },
-    mocks: {
-      $vuetify: {
-        breakpoint: {
-          smAndUp: breakpoint.smAndUp,
-        },
-      },
-    },
     stubs: {
       ToolBar: {
         template: '<div><slot /><slot name="extension" /></div>',
@@ -127,46 +139,23 @@ const initWrapper = ({
       MainNavigationDrawer: true,
       PublishSidePanel: true,
       SubmitToCommunityLibrarySidePanel: true,
+      ResubmitToCommunityLibraryModal: true,
       ProgressModal: true,
       ChannelTokenModal: true,
+      RemoveChannelModal: true,
       SyncResourcesModal: true,
       Clipboard: true,
       OfflineText: true,
       ContentNodeIcon: true,
       DraggablePlaceholder: true,
-      MessageDialog: true,
       SavingIndicator: true,
       QuickEditModal: true,
-      BaseMenu: {
-        name: 'BaseMenu',
-        template:
-          '<div><slot name="activator" :on="{}" /><div class="menu-content"><slot /></div></div>',
-      },
     },
   });
 };
 
 const getShareButton = wrapper => {
-  const allBaseMenus = wrapper.findAllComponents({ name: 'BaseMenu' });
-  for (let i = 0; i < allBaseMenus.length; i++) {
-    const baseMenu = allBaseMenus.at(i);
-    const shareButton = baseMenu.find('.share-button');
-    if (shareButton.exists()) {
-      return shareButton;
-    }
-  }
-  return { exists: () => false };
-};
-const getShareMenuItems = wrapper => {
-  const allBaseMenus = wrapper.findAllComponents({ name: 'BaseMenu' });
-  for (let i = 0; i < allBaseMenus.length; i++) {
-    const baseMenu = allBaseMenus.at(i);
-    const shareButton = baseMenu.find('.share-button');
-    if (shareButton.exists()) {
-      return baseMenu.findAll('.v-list__tile');
-    }
-  }
-  return { length: 0, wrappers: [] };
+  return wrapper.find('.share-button');
 };
 
 describe('TreeViewBase', () => {
@@ -292,7 +281,7 @@ describe('TreeViewBase', () => {
       getters.currentChannel.canManage = () => true;
       getters.currentChannel.currentChannel = () => createChannel({ published: true });
 
-      const wrapper = initWrapper({ getters, breakpoint: { smAndUp: false } });
+      const wrapper = initWrapper({ getters, windowIsSmall: true });
       expect(getShareButton(wrapper).exists()).toBe(false);
     });
   });
@@ -305,11 +294,10 @@ describe('TreeViewBase', () => {
         createChannel({ published: true, public: false });
 
       const wrapper = initWrapper({ getters });
-      const menuItems = getShareMenuItems(wrapper);
-      const submitItem = menuItems.wrappers.find(item =>
-        item.text().includes('Submit to community library'),
-      );
+      const menuOptions = wrapper.vm.shareMenuOptions;
+      const submitItem = menuOptions.find(item => item.value === 'submit-to-library');
       expect(submitItem).toBeDefined();
+      expect(submitItem.label).toContain('Submit to community library');
     });
 
     it('hides submit to community library when user cannot submit', () => {
@@ -319,10 +307,8 @@ describe('TreeViewBase', () => {
         createChannel({ published: true, public: false });
 
       const wrapper = initWrapper({ getters });
-      const menuItems = getShareMenuItems(wrapper);
-      const submitItem = menuItems.wrappers.find(item =>
-        item.text().includes('Submit to community library'),
-      );
+      const menuOptions = wrapper.vm.shareMenuOptions;
+      const submitItem = menuOptions.find(item => item.value === 'submit-to-library');
       expect(submitItem).toBeUndefined();
     });
 
@@ -333,10 +319,8 @@ describe('TreeViewBase', () => {
         createChannel({ published: true, public: true });
 
       const wrapper = initWrapper({ getters });
-      const menuItems = getShareMenuItems(wrapper);
-      const submitItem = menuItems.wrappers.find(item =>
-        item.text().includes('Submit to community library'),
-      );
+      const menuOptions = wrapper.vm.shareMenuOptions;
+      const submitItem = menuOptions.find(item => item.value === 'submit-to-library');
       expect(submitItem).toBeUndefined();
     });
 
@@ -346,11 +330,10 @@ describe('TreeViewBase', () => {
       getters.currentChannel.currentChannel = () => createChannel({ published: false });
 
       const wrapper = initWrapper({ getters });
-      const menuItems = getShareMenuItems(wrapper);
-      const inviteItem = menuItems.wrappers.find(item =>
-        item.text().includes('Invite collaborators'),
-      );
+      const menuOptions = wrapper.vm.shareMenuOptions;
+      const inviteItem = menuOptions.find(item => item.value === 'invite-collaborators');
       expect(inviteItem).toBeDefined();
+      expect(inviteItem.label).toContain('Invite collaborators');
     });
 
     it('hides invite collaborators when user cannot manage', () => {
@@ -359,10 +342,8 @@ describe('TreeViewBase', () => {
       getters.currentChannel.currentChannel = () => createChannel({ published: true });
 
       const wrapper = initWrapper({ getters });
-      const menuItems = getShareMenuItems(wrapper);
-      const inviteItem = menuItems.wrappers.find(item =>
-        item.text().includes('Invite collaborators'),
-      );
+      const menuOptions = wrapper.vm.shareMenuOptions;
+      const inviteItem = menuOptions.find(item => item.value === 'invite-collaborators');
       expect(inviteItem).toBeUndefined();
     });
 
@@ -372,9 +353,10 @@ describe('TreeViewBase', () => {
       getters.currentChannel.currentChannel = () => createChannel({ published: true });
 
       const wrapper = initWrapper({ getters });
-      const menuItems = getShareMenuItems(wrapper);
-      const tokenItem = menuItems.wrappers.find(item => item.text().includes('Share token'));
+      const menuOptions = wrapper.vm.shareMenuOptions;
+      const tokenItem = menuOptions.find(item => item.value === 'share-token');
       expect(tokenItem).toBeDefined();
+      expect(tokenItem.label).toContain('Share token');
     });
 
     it('hides share token when channel is not published', () => {
@@ -383,8 +365,8 @@ describe('TreeViewBase', () => {
       getters.currentChannel.currentChannel = () => createChannel({ published: false });
 
       const wrapper = initWrapper({ getters });
-      const menuItems = getShareMenuItems(wrapper);
-      const tokenItem = menuItems.wrappers.find(item => item.text().includes('Share token'));
+      const menuOptions = wrapper.vm.shareMenuOptions;
+      const tokenItem = menuOptions.find(item => item.value === 'share-token');
       expect(tokenItem).toBeUndefined();
     });
 
@@ -395,15 +377,11 @@ describe('TreeViewBase', () => {
         createChannel({ published: true, public: false });
 
       const wrapper = initWrapper({ getters });
-      const menuItems = getShareMenuItems(wrapper);
-      expect(menuItems.length).toBe(3);
-      expect(
-        menuItems.wrappers.some(item => item.text().includes('Submit to community library')),
-      ).toBe(true);
-      expect(menuItems.wrappers.some(item => item.text().includes('Invite collaborators'))).toBe(
-        true,
-      );
-      expect(menuItems.wrappers.some(item => item.text().includes('Share token'))).toBe(true);
+      const menuOptions = wrapper.vm.shareMenuOptions;
+      expect(menuOptions.length).toBe(3);
+      expect(menuOptions.some(item => item.value === 'submit-to-library')).toBe(true);
+      expect(menuOptions.some(item => item.value === 'invite-collaborators')).toBe(true);
+      expect(menuOptions.some(item => item.value === 'share-token')).toBe(true);
     });
   });
 });

From 70f3cd60019a271b7e23973dee27b22b2a424eb4 Mon Sep 17 00:00:00 2001
From: Tushar Verma <tusharmyself06@gmail.com>
Date: Sun, 5 Apr 2026 14:51:39 +0530
Subject: [PATCH 2/3] Enhanced channel menu options

---
 .../views/TreeView/TreeViewBase.vue           | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
index c613963791..0b8a159d44 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
@@ -138,6 +138,7 @@
           <template #menu>
             <KDropdownMenu
               :options="channelMenuOptions"
+              :hasIcons="true"
               @select="handleChannelMenuSelect"
             />
           </template>
@@ -410,6 +411,9 @@
         }
         return this.canManage && this.isPublished && !this.currentChannel.public;
       },
+      canShareChannel() {
+        return this.canManage || this.isPublished;
+      },
       viewChannelDetailsLink() {
         return {
           name: ChannelRouteNames.CHANNEL_DETAILS,
@@ -466,6 +470,7 @@
         return DropEffect.COPY;
       },
       shareMenuOptions() {
+        if (!this.canShareChannel) return [];
         const options = [];
         if (this.canSubmitToCommunityLibrary) {
           options.push({
@@ -503,32 +508,32 @@
             value: ChannelMenuOptions.VIEW_DETAILS,
           });
           if (this.canEdit) {
-            let label = this.$tr('editChannel');
+            const editOption = {
+              label: this.$tr('editChannel'),
+              value: ChannelMenuOptions.EDIT_CHANNEL,
+            };
             if (!this.currentChannel.language) {
-              label = `${label} ⚠️`;
+              editOption.icon = 'warningIncomplete';
             }
-            options.push({
-              label,
-              value: 'edit-channel',
-            });
+            options.push(editOption);
           }
 
           if (this.canSubmitToCommunityLibrary) {
             options.push({
               label: this.$tr('submitToCommunityLibrary'),
-              value: 'submit-to-library',
+              value: ShareMenuOptions.SUBMIT_TO_LIBRARY,
             });
           }
           if (this.canManage) {
             options.push({
               label: this.$tr('inviteCollaborators'),
-              value: 'invite-collaborators',
+              value: ShareMenuOptions.INVITE_COLLABORATORS,
             });
           }
           if (this.isPublished) {
             options.push({
               label: this.$tr('shareToken'),
-              value: 'share-token',
+              value: ShareMenuOptions.SHARE_TOKEN,
             });
           }
         } else {

From 21c8cdbd1fb1dcc61c21f9fa065f06b15f392b78 Mon Sep 17 00:00:00 2001
From: Tushar Verma <tusharmyself06@gmail.com>
Date: Sun, 5 Apr 2026 15:06:05 +0530
Subject: [PATCH 3/3] Add loading state check for channel menu options and
 include draft token action

---
 .../frontend/channelEdit/views/TreeView/TreeViewBase.vue  | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
index 0b8a159d44..586818bf05 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
@@ -130,7 +130,7 @@
       </template>
       <VToolbarItems>
         <KIconButton
-          v-if="channelMenuOptions.length"
+          v-if="!loading && channelMenuOptions.length"
           class="toolbar-icon-btn"
           icon="optionsHorizontal"
           :tooltip="$tr('moreOptions')"
@@ -503,6 +503,12 @@
               disabled: this.disablePublish,
             });
           }
+          if (this.currentChannel && this.currentChannel.draft_token) {
+            options.push({
+              label: this.getDraftTokenAction$(),
+              value: ChannelMenuOptions.PREVIEW_DRAFT,
+            });
+          }
           options.push({
             label: this.$tr('channelDetails'),
             value: ChannelMenuOptions.VIEW_DETAILS,