From ccad558cd572a339f8dfd017eee1b28903d3d939 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Thu, 22 Feb 2024 08:24:26 -0500
Subject: [PATCH 1/5] New command palette arrangement, and responsive design

---
 .../pages/Channels/ChannelTable.vue           |   1 +
 .../frontend/administration/router.js         |   2 +-
 .../channelEdit/views/CurrentTopicView.vue    | 378 ++++++++++--------
 .../channelList/views/ChannelListIndex.vue    |   1 +
 .../frontend/shared/vuex/session/index.js     |   1 +
 package.json                                  |   2 +-
 yarn.lock                                     |   6 +-
 7 files changed, 217 insertions(+), 174 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue
index b4185d8a85..1ada815bdf 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue
@@ -204,6 +204,7 @@
       },
     },
     mounted() {
+      console.log('AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA');
       this.updateTabTitle('Channels - Administration');
     },
     methods: {
diff --git a/contentcuration/contentcuration/frontend/administration/router.js b/contentcuration/contentcuration/frontend/administration/router.js
index 207445f11d..f99475a08f 100644
--- a/contentcuration/contentcuration/frontend/administration/router.js
+++ b/contentcuration/contentcuration/frontend/administration/router.js
@@ -1,6 +1,6 @@
 import VueRouter from 'vue-router';
 import { RouteNames } from './constants';
-import ChannelTable from './pages/Channels/ChannelTable';
+import ChannelTable from './pages/Channels/ChannelTable.vue';
 import ChannelDetails from './pages/Channels/ChannelDetails';
 import UserTable from './pages/Users/UserTable';
 import UserDetails from './pages/Users/UserDetails';
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue b/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
index 135f071228..41ff2d9e1c 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
@@ -27,6 +27,32 @@
           </span>
         </template>
       </Breadcrumbs>
+      <Menu
+        v-if="!loadingAncestors"
+        class="pa-1"
+      >
+        <template #activator="{ on }">
+          <IconButton
+            icon="list"
+            :text="$tr('viewModeTooltip')"
+            v-on="on"
+          />
+        </template>
+        <VList>
+          <VListTile
+            v-for="mode in viewModes"
+            :key="mode"
+            @click="setViewMode(mode), trackViewMode(mode)"
+          >
+            <VListTileAction style="min-width: 32px;">
+              <Icon v-if="mode === viewMode">
+                check
+              </Icon>
+            </VListTileAction>
+            <VListTileTitle>{{ $tr(mode) }}</VListTileTitle>
+          </VListTile>
+        </VList>
+      </Menu>
     </VToolbar>
 
     <!-- Topic actions -->
@@ -39,94 +65,48 @@
           :label="selected.length ? '' : $tr('selectAllLabel')"
         />
       </div>
-      <VSlideXTransition>
-        <div v-if="selected.length">
-          <IconButton
-            v-if="canEdit"
-            icon="edit"
-            :text="$tr('editSelectedButton')"
-            data-test="edit-selected-btn"
-            @click="editNodes(selected)"
-          />
-          <IconButton
-            icon="clipboard"
-            :text="$tr('copySelectedButton')"
-            data-test="copy-selected-to-clipboard-btn"
-            @click="copyToClipboard(selected)"
-          />
-          <IconButton
-            v-if="canEdit"
-            icon="move"
-            :text="$tr('moveSelectedButton')"
-            data-test="move-selected-btn"
-            @click="openMoveModal"
-          />
-          <IconButton
-            v-if="canEdit"
-            icon="copy"
-            :text="$tr('duplicateSelectedButton')"
-            data-test="duplicate-selected-btn"
-            @click="duplicateNodes(selected)"
-          />
-          <IconButton
-            v-if="canEdit"
-            icon="remove"
-            :text="$tr('deleteSelectedButton')"
-            data-test="delete-selected-btn"
-            @click="removeNodes(selected)"
-          />
-          <IconButton
-            v-if="canEdit"
-            icon="language"
-            :text="$tr('editLanguageButton')"
-            data-test="change-langugage-btn"
-            @click="editLanguage(selected)"
-          />
-          <IconButton
-            v-if="canEdit"
-            icon="categories"
-            :text="$tr('editCategoriesButton')"
-            data-test="change-categories-btn"
-            @click="editCategories(selected)"
-          />
-          <IconButton
-            v-if="canEdit"
-            icon="lesson"
-            :text="$tr('editWhatIsNeededButton')"
-            data-test="change-resources-neded-btn"
-            @click="editResourcesNeeded(selected)"
-          />
-          <IconButton
-            v-if="canEdit"
-            icon="levels"
-            :text="$tr('editLevelsButton')"
-            data-test="change-levels-btn"
-            @click="editLevels(selected)"
-          />
-          <IconButton
-            v-if="canEdit && !isTopicSelected"
-            icon="activities"
-            :text="$tr('editLearningActivitiesButton')"
-            data-test="change-learning-activities-btn"
-            @click="editLearningActivities(selected)"
-          />
-          <IconButton
-            v-if="canEdit && !isTopicSelected"
-            icon="attribution"
-            :text="$tr('editSourceButton')"
-            data-test="change-learning-activities-btn"
-            @click="editSource(selected)"
-          />
-          <IconButton
-            v-if="canEdit && !isTopicSelected"
-            icon="audience"
-            :text="$tr('editAudienceButton')"
-            data-test="change-audience-btn"
-            @click="editAudience(selected)"
-          />
-        </div>
-
-      </VSlideXTransition>
+      <div
+        v-show="selected.length"
+        v-if="$vuetify.breakpoint.mdAndUp"
+        class="no-shrink px-1"
+      >
+        {{ selectionText }}
+      </div>
+      <div v-if="selected.length" class="command-palette-wrapper">
+        <KListWithOverflow
+          :items="commandPaletteOptions"
+          :appearanceOverrides="{ justifyContent: 'flex-end' }"
+        >
+          <template #item="{ item }">
+            <KIconButton
+              :icon="item.icon"
+              :tooltip="item.label"
+              :disabled="item.disabled"
+              :data-test="item.dataTest"
+              @click="item.onClick()"
+            />
+          </template>
+          <template #more="{ overflowItems }">
+            <KIconButton
+              tooltip="More"
+              icon="optionsVertical"
+              appearance="flat-button"
+              :primary="false"
+            >
+              <template #menu>
+                <KDropdownMenu
+                  :options="overflowItems"
+                />
+              </template>
+            </KIconButton>
+          </template>
+          <template #divider>
+            <div class="divider-wrapper">
+              <div :style="dividerStyle"></div>
+            </div>
+          </template>
+        </KListWithOverflow>
+      </div>
 
       <MoveModal
         ref="moveModal"
@@ -134,40 +114,8 @@
         :moveNodeIds="selected"
         @target="moveNodes"
       />
-
-      <VSpacer />
-
-      <VFadeTransition>
-        <div v-show="selected.length" v-if="$vuetify.breakpoint.mdAndUp" class="px-1">
-          {{ selectionText }}
-        </div>
-      </VFadeTransition>
-
+      <VSpacer v-if="!selected.length" />
       <VToolbarItems v-if="!loadingAncestors">
-        <Menu class="pa-1">
-          <template #activator="{ on }">
-            <IconButton
-              icon="list"
-              :text="$tr('viewModeTooltip')"
-              v-on="on"
-            />
-          </template>
-          <VList>
-            <VListTile
-              v-for="mode in viewModes"
-              :key="mode"
-              @click="setViewMode(mode), trackViewMode(mode)"
-            >
-              <VListTileAction style="min-width: 32px;">
-                <Icon v-if="mode === viewMode">
-                  check
-                </Icon>
-              </VListTileAction>
-              <VListTileTitle>{{ $tr(mode) }}</VListTileTitle>
-            </VListTile>
-          </VList>
-        </Menu>
-
         <Menu v-if="canEdit">
           <template #activator="{ on }">
             <VBtn color="primary" class="ml-2" style="height: 32px;" v-on="on">
@@ -391,6 +339,117 @@
           }
         },
       },
+      commandPaletteOptions() {
+        const groupedOptions = [
+          [
+            {
+              label: this.$tr('editSelectedButton'),
+              icon: 'edit',
+              onClick: () => this.editNodes(this.selected),
+              condition: this.canEdit,
+              dataTest: 'edit-selected-btn',
+            },
+            {
+              label: this.$tr('moveSelectedButton'),
+              icon: 'move',
+              onClick: () => this.openMoveModal(),
+              condition: this.canEdit,
+              dataTest: 'move-selected-btn',
+            },
+            {
+              label: this.$tr('copySelectedButton'),
+              icon: 'clipboard',
+              onClick: () => this.copyToClipboard(this.selected),
+              condition: true,
+              dataTest: 'copy-selected-to-clipboard-btn',
+            },
+            {
+              label: this.$tr('duplicateSelectedButton'),
+              icon: 'copy',
+              onClick: () => this.duplicateNodes(this.selected),
+              condition: this.canEdit,
+              dataTest: 'duplicate-selected-btn',
+            },
+            {
+              label: this.$tr('deleteSelectedButton'),
+              icon: 'remove',
+              onClick: () => this.removeNodes(this.selected),
+              condition: this.canEdit,
+              dataTest: 'delete-selected-btn',
+            },
+          ],
+          [
+            {
+              label: this.$tr('editLanguageButton'),
+              icon: 'language',
+              onClick: () => this.quickEditModalFactory(QuickEditModals.LANGUAGE),
+              condition: this.canEdit,
+              dataTest: 'change-langugage-btn',
+            },
+          ],
+          [
+            {
+              label: this.$tr('editCategoriesButton'),
+              icon: 'categories',
+              onClick: () => this.quickEditModalFactory(QuickEditModals.CATEGORIES),
+              condition: this.canEdit,
+              dataTest: 'change-categories-btn',
+            },
+            {
+              label: this.$tr('editLevelsButton'),
+              icon: 'levels',
+              onClick: () => this.quickEditModalFactory(QuickEditModals.LEVELS),
+              condition: this.canEdit,
+              dataTest: 'change-levels-btn',
+            },
+            {
+              label: this.$tr('editLearningActivitiesButton'),
+              icon: 'activities',
+              onClick: () => this.quickEditModalFactory(QuickEditModals.LEARNING_ACTIVITIES),
+              condition: this.canEdit,
+              disabled: this.isTopicSelected,
+              dataTest: 'change-learning-activities-btn',
+            },
+          ],
+          [
+            {
+              label: this.$tr('editSourceButton'),
+              icon: 'attribution',
+              onClick: () => this.quickEditModalFactory(QuickEditModals.SOURCE),
+              condition: this.canEdit,
+              disabled: this.isTopicSelected,
+              dataTest: 'change-learning-activities-btn',
+            },
+            {
+              label: this.$tr('editAudienceButton'),
+              icon: 'audience',
+              onClick: () => this.quickEditModalFactory(QuickEditModals.AUDIENCE),
+              condition: this.canEdit,
+              disabled: this.isTopicSelected,
+              dataTest: 'change-audience-btn',
+            },
+            {
+              label: this.$tr('editWhatIsNeededButton'),
+              icon: 'lesson',
+              onClick: () => this.quickEditModalFactory(QuickEditModals.WHAT_IS_NEEDED),
+              condition: this.canEdit,
+              dataTest: 'change-resources-neded-btn',
+            },
+          ],
+        ];
+
+        const filteredOptions = groupedOptions
+          .filter(group => group.some(option => option.condition))
+          .map(group => group.filter(option => option.condition));
+
+        // Flatten the array with a divider between each group
+        return filteredOptions.reduce((acc, group, index) => {
+          if (index > 0) {
+            acc.push({ type: 'divider' });
+          }
+          return acc.concat(group);
+        }, []);
+      },
       height() {
         return this.hasStagingTree ? 'calc(100vh - 224px)' : 'calc(100vh - 160px)';
       },
@@ -448,6 +507,13 @@
           ? DropEffect.COPY
           : DropEffect.MOVE;
       },
+      dividerStyle() {
+        return {
+          height: '100%',
+          backgroundColor: this.$themeTokens.fineLine,
+          width: '1px',
+        };
+      },
     },
     watch: {
       topicId: {
@@ -548,54 +614,15 @@
           },
         });
       },
-      editLanguage(nodeIds) {
-        this.trackClickEvent('Edit language');
-        this.openQuickEditModal({
-          modal: QuickEditModals.LANGUAGE,
-          nodeIds,
-        });
-      },
-      editCategories(nodeIds) {
-        this.trackClickEvent('Edit categories');
-        this.openQuickEditModal({
-          modal: QuickEditModals.CATEGORIES,
-          nodeIds,
-        });
-      },
-      editResourcesNeeded(nodeIds) {
-        this.trackClickEvent('Edit what is needed');
-        this.openQuickEditModal({
-          modal: QuickEditModals.WHAT_IS_NEEDED,
-          nodeIds,
-        });
-      },
-      editLevels(nodeIds) {
-        this.trackClickEvent('Edit levels');
-        this.openQuickEditModal({
-          modal: QuickEditModals.LEVELS,
-          nodeIds,
-        });
-      },
-      editLearningActivities(nodeIds) {
-        this.trackClickEvent('Edit learning activities');
-        this.openQuickEditModal({
-          modal: QuickEditModals.LEARNING_ACTIVITIES,
-          nodeIds,
-        });
-      },
-      editAudience(nodeIds) {
-        this.trackClickEvent('Edit audience');
-        this.openQuickEditModal({
-          modal: QuickEditModals.AUDIENCE,
-          nodeIds,
-        });
-      },
-      editSource(nodeIds) {
-        this.trackClickEvent('Edit source');
-        this.openQuickEditModal({
-          modal: QuickEditModals.SOURCE,
-          nodeIds,
-        });
+      quickEditModalFactory(modal) {
+        return () => {
+          this.openQuickEditModal({
+            modal,
+            nodeIds: this.selected,
+          });
+          const trackActionLabel = modal.replace(/_/g, ' ').toLowerCase();
+          this.trackClickEvent(`Edit ${trackActionLabel}`);
+        };
       },
       treeLink(params) {
         return {
@@ -878,4 +905,17 @@
   .fade-transition-leave-active {
     transition-duration: 0.1s
   }
+
+  .divider-wrapper {
+    padding: 8px 12px;
+  }
+  .command-palette-wrapper {
+    min-width: 0;
+    flex-grow: 1;
+    padding-right: 4px;
+  }
+  .no-shrink {
+    flex-shrink: 0;
+  }
+
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index 16cdf100f7..ee6704373b 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -150,6 +150,7 @@
         return RouteToListTypeMapping[this.$route.name];
       },
       toolbarHeight() {
+        console.log('loggedIn', this.loggedIn);
         return this.loggedIn && !this.isFAQPage ? 112 : 64;
       },
       contentOffset() {
diff --git a/contentcuration/contentcuration/frontend/shared/vuex/session/index.js b/contentcuration/contentcuration/frontend/shared/vuex/session/index.js
index b0a2b10a05..3a448b18fb 100644
--- a/contentcuration/contentcuration/frontend/shared/vuex/session/index.js
+++ b/contentcuration/contentcuration/frontend/shared/vuex/session/index.js
@@ -61,6 +61,7 @@ export default {
       return state.currentUser.id;
     },
     loggedIn(state) {
+      console.log('state.currentUser', JSON.stringify(state.currentUser));
       return (
         state.currentUser && state.currentUser.id !== undefined && state.currentUser.id !== null
       );
diff --git a/package.json b/package.json
index 613b3e98b0..b43dcd7531 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "jspdf": "https://github.com/parallax/jsPDF.git#b7a1d8239c596292ce86dafa77f05987bcfa2e6e",
     "jszip": "^3.10.1",
     "kolibri-constants": "^0.2.0",
-    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#293bca18c08b6ba5d3756fec4794f8ddcfa44bb9",
+    "kolibri-design-system": "https://github.com/AlexVelezLl/kolibri-design-system#5d39375ed20e4e86d397c94a2176219668186370",
     "lodash": "^4.17.21",
     "material-icons": "0.3.1",
     "mutex-js": "^1.1.5",
diff --git a/yarn.lock b/yarn.lock
index 774643af7d..74e3b24cfd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9116,9 +9116,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/learningequality/kolibri-design-system#293bca18c08b6ba5d3756fec4794f8ddcfa44bb9":
-  version "3.0.0"
-  resolved "https://github.com/learningequality/kolibri-design-system#293bca18c08b6ba5d3756fec4794f8ddcfa44bb9"
+"kolibri-design-system@https://github.com/AlexVelezLl/kolibri-design-system#5d39375ed20e4e86d397c94a2176219668186370":
+  version "3.0.1"
+  resolved "https://github.com/AlexVelezLl/kolibri-design-system#5d39375ed20e4e86d397c94a2176219668186370"
   dependencies:
     "@vue/composition-api" "^1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"

From ad5ce7013804221ae3551183b8ddb5814aa09d73 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Tue, 27 Feb 2024 15:41:52 -0500
Subject: [PATCH 2/5] Update KListWithOverflow

---
 .../channelEdit/views/CurrentTopicView.vue        | 15 ++++++++-------
 .../contentcuration/frontend/shared/app.js        |  2 ++
 package.json                                      |  3 ++-
 yarn.lock                                         |  4 ++--
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue b/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
index 41ff2d9e1c..90487970b9 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
@@ -96,6 +96,7 @@
               <template #menu>
                 <KDropdownMenu
                   :options="overflowItems"
+                  @select="(option) => option.onClick()"
                 />
               </template>
             </KIconButton>
@@ -382,7 +383,7 @@
             {
               label: this.$tr('editLanguageButton'),
               icon: 'language',
-              onClick: () => this.quickEditModalFactory(QuickEditModals.LANGUAGE),
+              onClick: this.quickEditModalFactory(QuickEditModals.LANGUAGE),
               condition: this.canEdit,
               dataTest: 'change-langugage-btn',
             },
@@ -391,21 +392,21 @@
             {
               label: this.$tr('editCategoriesButton'),
               icon: 'categories',
-              onClick: () => this.quickEditModalFactory(QuickEditModals.CATEGORIES),
+              onClick: this.quickEditModalFactory(QuickEditModals.CATEGORIES),
               condition: this.canEdit,
               dataTest: 'change-categories-btn',
             },
             {
               label: this.$tr('editLevelsButton'),
               icon: 'levels',
-              onClick: () => this.quickEditModalFactory(QuickEditModals.LEVELS),
+              onClick: this.quickEditModalFactory(QuickEditModals.LEVELS),
               condition: this.canEdit,
               dataTest: 'change-levels-btn',
             },
             {
               label: this.$tr('editLearningActivitiesButton'),
               icon: 'activities',
-              onClick: () => this.quickEditModalFactory(QuickEditModals.LEARNING_ACTIVITIES),
+              onClick: this.quickEditModalFactory(QuickEditModals.LEARNING_ACTIVITIES),
               condition: this.canEdit,
               disabled: this.isTopicSelected,
               dataTest: 'change-learning-activities-btn',
@@ -415,7 +416,7 @@
             {
               label: this.$tr('editSourceButton'),
               icon: 'attribution',
-              onClick: () => this.quickEditModalFactory(QuickEditModals.SOURCE),
+              onClick: this.quickEditModalFactory(QuickEditModals.SOURCE),
               condition: this.canEdit,
               disabled: this.isTopicSelected,
               dataTest: 'change-learning-activities-btn',
@@ -423,7 +424,7 @@
             {
               label: this.$tr('editAudienceButton'),
               icon: 'audience',
-              onClick: () => this.quickEditModalFactory(QuickEditModals.AUDIENCE),
+              onClick: this.quickEditModalFactory(QuickEditModals.AUDIENCE),
               condition: this.canEdit,
               disabled: this.isTopicSelected,
               dataTest: 'change-audience-btn',
@@ -431,7 +432,7 @@
             {
               label: this.$tr('editWhatIsNeededButton'),
               icon: 'lesson',
-              onClick: () => this.quickEditModalFactory(QuickEditModals.WHAT_IS_NEEDED),
+              onClick: this.quickEditModalFactory(QuickEditModals.WHAT_IS_NEEDED),
               condition: this.canEdit,
               dataTest: 'change-resources-neded-btn',
             },
diff --git a/contentcuration/contentcuration/frontend/shared/app.js b/contentcuration/contentcuration/frontend/shared/app.js
index ae2121b243..98f113ae0b 100644
--- a/contentcuration/contentcuration/frontend/shared/app.js
+++ b/contentcuration/contentcuration/frontend/shared/app.js
@@ -106,6 +106,7 @@ import {
 } from 'vuetify/lib/directives';
 import VueIntl from 'vue-intl';
 import Croppa from 'vue-croppa';
+import VueCompositionApi from '@vue/composition-api';
 import { Workbox, messageSW } from 'workbox-window';
 import KThemePlugin from 'kolibri-design-system/lib/KThemePlugin';
 import trackInputModality from 'kolibri-design-system/lib/styles/trackInputModality';
@@ -158,6 +159,7 @@ if (process.env.NODE_ENV !== 'production') {
 Vue.use(Croppa);
 Vue.use(VueIntl);
 Vue.use(VueRouter);
+Vue.use(VueCompositionApi);
 Vue.use(Vuetify, {
   components: {
     // Explicitly register used Vuetify components globally
diff --git a/package.json b/package.json
index b43dcd7531..142c15dcb0 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
   "dependencies": {
     "@sentry/vue": "^7.11.1",
     "@toast-ui/editor": "^2.3.1",
+    "@vue/composition-api": "^1.7.2",
     "ajv": "^8.12.0",
     "axios": "^1.6.2",
     "broadcast-channel": "^5.1.0",
@@ -72,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#5d39375ed20e4e86d397c94a2176219668186370",
+    "kolibri-design-system": "https://github.com/AlexVelezLl/kolibri-design-system#7971ea4b49b7f1c817d80aaa01286e630801d3c2",
     "lodash": "^4.17.21",
     "material-icons": "0.3.1",
     "mutex-js": "^1.1.5",
diff --git a/yarn.lock b/yarn.lock
index 74e3b24cfd..b13ebff71d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9116,9 +9116,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#5d39375ed20e4e86d397c94a2176219668186370":
+"kolibri-design-system@https://github.com/AlexVelezLl/kolibri-design-system#086b5c3f1f109234d1ad4b521651fbc88f04c54c":
   version "3.0.1"
-  resolved "https://github.com/AlexVelezLl/kolibri-design-system#5d39375ed20e4e86d397c94a2176219668186370"
+  resolved "https://github.com/AlexVelezLl/kolibri-design-system#086b5c3f1f109234d1ad4b521651fbc88f04c54c"
   dependencies:
     "@vue/composition-api" "^1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"

From 9c803595f755d155123e2d9a5b843d3c61d14761 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Tue, 27 Feb 2024 15:56:13 -0500
Subject: [PATCH 3/5] Options conditional rendering

---
 .../frontend/channelEdit/views/CurrentTopicView.vue      | 9 ++++++---
 yarn.lock                                                | 4 ++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue b/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
index 90487970b9..dcb6159f1c 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
@@ -407,7 +407,7 @@
               label: this.$tr('editLearningActivitiesButton'),
               icon: 'activities',
               onClick: this.quickEditModalFactory(QuickEditModals.LEARNING_ACTIVITIES),
-              condition: this.canEdit,
+              condition: this.canEdit && this.isResourceSelected,
               disabled: this.isTopicSelected,
               dataTest: 'change-learning-activities-btn',
             },
@@ -417,7 +417,7 @@
               label: this.$tr('editSourceButton'),
               icon: 'attribution',
               onClick: this.quickEditModalFactory(QuickEditModals.SOURCE),
-              condition: this.canEdit,
+              condition: this.canEdit && this.isResourceSelected,
               disabled: this.isTopicSelected,
               dataTest: 'change-learning-activities-btn',
             },
@@ -425,7 +425,7 @@
               label: this.$tr('editAudienceButton'),
               icon: 'audience',
               onClick: this.quickEditModalFactory(QuickEditModals.AUDIENCE),
-              condition: this.canEdit,
+              condition: this.canEdit && this.isResourceSelected,
               disabled: this.isTopicSelected,
               dataTest: 'change-audience-btn',
             },
@@ -463,6 +463,9 @@
       isTopicSelected() {
         return this.selectedNodes.some(node => node.kind === ContentKindsNames.TOPIC);
       },
+      isResourceSelected() {
+        return this.selectedNodes.some(node => node.kind !== ContentKindsNames.TOPIC);
+      },
       ancestors() {
         return this.getContentNodeAncestors(this.topicId, true).map(ancestor => {
           return {
diff --git a/yarn.lock b/yarn.lock
index b13ebff71d..f2142f37d0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9116,9 +9116,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#086b5c3f1f109234d1ad4b521651fbc88f04c54c":
+"kolibri-design-system@https://github.com/AlexVelezLl/kolibri-design-system#7971ea4b49b7f1c817d80aaa01286e630801d3c2":
   version "3.0.1"
-  resolved "https://github.com/AlexVelezLl/kolibri-design-system#086b5c3f1f109234d1ad4b521651fbc88f04c54c"
+  resolved "https://github.com/AlexVelezLl/kolibri-design-system#7971ea4b49b7f1c817d80aaa01286e630801d3c2"
   dependencies:
     "@vue/composition-api" "^1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"

From cb16a1798b892916c16400905f58b395f75fa18f Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Thu, 29 Feb 2024 11:53:05 -0500
Subject: [PATCH 4/5] Install new KDS commit

---
 package.json | 2 +-
 yarn.lock    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 142c15dcb0..db262c100d 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#7971ea4b49b7f1c817d80aaa01286e630801d3c2",
+    "kolibri-design-system": "https://github.com/AlexVelezLl/kolibri-design-system#2ecd75b2a96a71f4fce5a6f1c7a6092f06f6547f",
     "lodash": "^4.17.21",
     "material-icons": "0.3.1",
     "mutex-js": "^1.1.5",
diff --git a/yarn.lock b/yarn.lock
index f2142f37d0..7b45d3c5ec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9116,9 +9116,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#7971ea4b49b7f1c817d80aaa01286e630801d3c2":
+"kolibri-design-system@https://github.com/AlexVelezLl/kolibri-design-system#2ecd75b2a96a71f4fce5a6f1c7a6092f06f6547f":
   version "3.0.1"
-  resolved "https://github.com/AlexVelezLl/kolibri-design-system#7971ea4b49b7f1c817d80aaa01286e630801d3c2"
+  resolved "https://github.com/AlexVelezLl/kolibri-design-system#2ecd75b2a96a71f4fce5a6f1c7a6092f06f6547f"
   dependencies:
     "@vue/composition-api" "^1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"

From f1924c2e9f38d6a5abe92ed950f15a0522823a8b Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Thu, 29 Feb 2024 12:00:32 -0500
Subject: [PATCH 5/5] Self code review

---
 .../frontend/administration/pages/Channels/ChannelTable.vue     | 1 -
 .../contentcuration/frontend/administration/router.js           | 2 +-
 .../frontend/channelList/views/ChannelListIndex.vue             | 1 -
 .../contentcuration/frontend/shared/vuex/session/index.js       | 1 -
 4 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue
index 1ada815bdf..b4185d8a85 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue
@@ -204,7 +204,6 @@
       },
     },
     mounted() {
-      console.log('AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA');
       this.updateTabTitle('Channels - Administration');
     },
     methods: {
diff --git a/contentcuration/contentcuration/frontend/administration/router.js b/contentcuration/contentcuration/frontend/administration/router.js
index f99475a08f..207445f11d 100644
--- a/contentcuration/contentcuration/frontend/administration/router.js
+++ b/contentcuration/contentcuration/frontend/administration/router.js
@@ -1,6 +1,6 @@
 import VueRouter from 'vue-router';
 import { RouteNames } from './constants';
-import ChannelTable from './pages/Channels/ChannelTable.vue';
+import ChannelTable from './pages/Channels/ChannelTable';
 import ChannelDetails from './pages/Channels/ChannelDetails';
 import UserTable from './pages/Users/UserTable';
 import UserDetails from './pages/Users/UserDetails';
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index ee6704373b..16cdf100f7 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -150,7 +150,6 @@
         return RouteToListTypeMapping[this.$route.name];
       },
       toolbarHeight() {
-        console.log('loggedIn', this.loggedIn);
         return this.loggedIn && !this.isFAQPage ? 112 : 64;
       },
       contentOffset() {
diff --git a/contentcuration/contentcuration/frontend/shared/vuex/session/index.js b/contentcuration/contentcuration/frontend/shared/vuex/session/index.js
index 3a448b18fb..b0a2b10a05 100644
--- a/contentcuration/contentcuration/frontend/shared/vuex/session/index.js
+++ b/contentcuration/contentcuration/frontend/shared/vuex/session/index.js
@@ -61,7 +61,6 @@ export default {
       return state.currentUser.id;
     },
     loggedIn(state) {
-      console.log('state.currentUser', JSON.stringify(state.currentUser));
       return (
         state.currentUser && state.currentUser.id !== undefined && state.currentUser.id !== null
       );