Allow docker build on push to search-recommendations

.github/workflows/containerbuild.yml

@@ -6,6 +6,7 @@ on:
     - unstable
     - hotfixes
     - master
+    - search-recommendations
     tags:
     - 'v*'
   pull_request:

.github/workflows/notify_team_new_comment.yml

@@ -19,9 +19,9 @@ jobs:
     steps:
       - name: Escape title double quotes
         id: escape_title
-        run: |
-          title='${{ github.event.issue.title }}'
-          echo "ISSUE_TITLE=${title//\"/\\\"}" >> "$GITHUB_OUTPUT"
+        env:
+          ISSUE_TITLE: ${{ github.event.issue.title }}
+        run: echo "ISSUE_TITLE=${ISSUE_TITLE//\"/\\\"}" >> "$GITHUB_OUTPUT"
 
       - name: Send message to Slack channel
         env:

contentcuration/contentcuration/frontend/accounts/pages/Create.vue

@@ -132,7 +132,7 @@
         </VSlideYTransition>
 
         <!-- Agreements -->
-        <Checkbox
+        <VCheckbox
           v-model="acceptedAgreement"
           :label="$tr('agreement')"
           required

contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue

@@ -47,7 +47,7 @@
                   v-if="isMultipleSelection"
                   :key="answerIdx"
                   :value="answerIdx"
-                  :input-value="correctAnswersIndices"
+                  :inputValue="correctAnswersIndices"
                   @change="onCorrectAnswersIndicesUpdate"
                 />
               </VFlex>

contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.spec.js

@@ -73,7 +73,7 @@ const checkShowAnswers = wrapper => {
   wrapper
     .find('[data-test="showAnswersCheckbox"]')
     .find('input')
-    .setChecked(true);
+    .element.click();
 };
 
 const getItems = wrapper => {

contentcuration/contentcuration/frontend/channelEdit/components/edit/AccessibilityOptions.vue

@@ -14,7 +14,7 @@
           color="primary"
           :data-test="`checkbox-${accessibilityItem.help}`"
         >
-          <template #label>
+          <template>
             <span class="text-xs-left">{{ accessibilityItem.label }}</span>
             &nbsp;
             <HelpTooltip

contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue

@@ -50,6 +50,7 @@
               app
               style="height: calc(100% - 64px);"
               :minWidth="150"
+              :defaultWidth="250"
               :maxWidth="500"
               @scroll="scroll"
             >

contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue

@@ -41,34 +41,40 @@
       </div>
       <VSlideXTransition>
         <div v-if="selected.length">
-          <IconButton
+          <KIconButton
             v-if="canEdit"
             icon="edit"
             :text="$tr('editSelectedButton')"
             data-test="edit-selected-btn"
             @click="editNodes(selected)"
           />
-          <IconButton
+          <KIconButton
             icon="clipboard"
             :text="$tr('copySelectedButton')"
             data-test="copy-selected-to-clipboard-btn"
             @click="copyToClipboard(selected)"
           />
-          <IconButton
+          <KIconButton
             v-if="canEdit"
             icon="move"
             :text="$tr('moveSelectedButton')"
             data-test="move-selected-btn"
             @click="openMoveModal"
           />
-          <IconButton
+          <KIconButton
             v-if="canEdit"
             icon="copy"
             :text="$tr('duplicateSelectedButton')"
             data-test="duplicate-selected-btn"
             @click="duplicateNodes(selected)"
           />
-          <IconButton
+          <KIconButton
+            v-if="canEdit"
+            icon="sort"
+            :text="$tr('SortAlphabetically')"
+            @click="sortNodes(selected)"
+          />
+          <KIconButton
             v-if="canEdit"
             icon="remove"
             :text="$tr('deleteSelectedButton')"
@@ -435,6 +441,44 @@
       clearSelections() {
         this.selected = [];
       },
+
+      sortNodes(selected) {
+        const selectedNodes = selected.map(id => this.getContentNode(id));
+        const orderedNodes = selectedNodes.sort(this.compareNodeTitles);
+
+        const reversedNodes = orderedNodes.reverse();
+
+        const nodeX = this.findNodeBeforeFirstSelected(orderedNodes, selected);
+
+        const targetParent = this.node.id;
+        const targetNode = nodeX || targetParent;
+        const targetPosition = nodeX
+          ? RELATIVE_TREE_POSITIONS.RIGHT
+          : RELATIVE_TREE_POSITIONS.FIRST_CHILD;
+
+        const nodeIdsToMove = reversedNodes.map(node => String(node.id));
+
+        this.moveContentNodes({
+          id__in: nodeIdsToMove,
+          target: targetNode,
+          position: targetPosition,
+        });
+      },
+
+      findNodeBeforeFirstSelected(nodes, selected) {
+        for (let i = 1; i < nodes.length; i++) {
+          if (selected.includes(nodes[i])) {
+            return nodes[i - 1];
+          }
+        }
+        return null;
+      },
+
+      compareNodeTitles(nodeA, nodeB) {
+        const titleA = nodeA.title.toLowerCase();
+        const titleB = nodeB.title.toLowerCase();
+        return titleA.localeCompare(titleB);
+      },
       updateTitleForPage() {
         let detailTitle;
         const topicTitle = this.getTitle(this.getContentNode(this.topicId));
@@ -707,6 +751,7 @@
     },
     $trs: {
       addTopic: 'New folder',
+      SortAlphabetically: 'Sort alphabetically',
       addExercise: 'New exercise',
       uploadFiles: 'Upload files',
       importFromChannels: 'Import from channels',

contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js

@@ -90,9 +90,12 @@ describe('trashModal', () => {
       wrapper.find('[data-test="item"]').trigger('click');
       expect(wrapper.vm.previewNodeId).toBe(testChildren[0].id);
     });
-    it('checking item in list should set selected', () => {
-      wrapper.find('[data-test="checkbox"]').vm.$emit('change', ['selected']);
-      expect(wrapper.vm.selected).toEqual(['selected']);
+    it('checking item in list should add the item ID to the selected array', () => {
+      wrapper
+        .find('[data-test="checkbox"]')
+        .find('input[type="checkbox"]')
+        .element.click();
+      expect(wrapper.vm.selected).toEqual(['test1']);
     });
     it('checking select all checkbox should check all items', () => {
       wrapper.find('[data-test="selectall"]').vm.$emit('change', true);

contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue

@@ -23,7 +23,7 @@
           <Checkbox
             v-model="selectedChannels"
             color="primary"
-            data-test="checkbox"
+            :data-test="`checkbox-${channel.id}`"
             :value="channel.id"
             class="channel ma-0"
           >

contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSelectionList.spec.js

@@ -60,13 +60,17 @@ describe('channelSelectionList', () => {
   });
   it('should select channels when the channel has been checked', () => {
     wrapper.setData({ loading: false });
-    wrapper.find('[data-test="checkbox"]').vm.$emit('change', [editChannel.id]);
+    wrapper.find(`[data-test="checkbox-${editChannel.id}"]`).element.click();
+
     expect(wrapper.emitted('input')[0][0]).toEqual([editChannel.id]);
   });
   it('should deselect channels when the channel has been unchecked', () => {
     wrapper.setData({ loading: false });
-    wrapper.find('[data-test="checkbox"]').vm.$emit('change', []);
-    expect(wrapper.emitted('input')[0][0]).toEqual([]);
+    wrapper.find(`[data-test="checkbox-${editChannel.id}"]`).element.click(); // Check the channel
+    wrapper.find(`[data-test="checkbox-${editChannel.id}"]`).element.click(); // Uncheck the channel
+
+    expect(wrapper.emitted('input')[0].length).toEqual(1); // Only one event should be emitted (corresponding to the initial check)
+    expect(wrapper.emitted('input')[0][0]).toEqual([editChannel.id]); // The initial check event should be emitted
   });
   it('should filter channels based on the search text', () => {
     wrapper.setData({ loading: false, search: searchWord });

contentcuration/contentcuration/frontend/shared/views/ResizableNavigationDrawer.vue

@@ -37,6 +37,10 @@
         type: Number,
         default: 100,
       },
+      defaultWidth: {
+        type: Number,
+        default: 150,
+      },
       maxWidth: {
         type: Number,
         default: window.innerWidth - 100,
@@ -68,7 +72,7 @@
       const localStorageName = this.localName + '-drawer-width';
       return {
         dragging: false,
-        width: parseFloat(localStorage[localStorageName]) || this.minWidth,
+        width: parseFloat(localStorage[localStorageName]) || this.defaultWidth || this.minWidth,
         localStorageName,
       };
     },

contentcuration/contentcuration/frontend/shared/views/form/Checkbox.vue

@@ -1,21 +1,138 @@
+<template>
+
+  <KCheckbox
+    :value="value"
+    :label="label"
+    :showLabel="showLabel"
+    :indeterminate="indeterminate"
+    :disabled="disabled"
+    :description="description"
+    :checked="isChecked"
+    @change="handleChange"
+  >
+    <slot></slot>
+  </KCheckbox>
+
+</template>
+
 <script>
 
-  import { VCheckbox } from 'vuetify/lib/components/VCheckbox';
+  import KCheckbox from 'kolibri-design-system/lib/KCheckbox';
 
   export default {
     name: 'Checkbox',
-    extends: VCheckbox,
+    components: {
+      KCheckbox,
+    },
+    model: {
+      prop: 'inputValue',
+      event: 'input',
+    },
     props: {
-      /* eslint-disable kolibri/vue-no-unused-properties */
-      color: {
+      /*
+       * The label to show next to the checkbox
+       */
+      label: {
         type: String,
-        default: 'primary',
+        default: null,
       },
-      hideDetails: {
+      /*
+       * Whether to show the label next to the checkbox
+       */
+      showLabel: {
         type: Boolean,
         default: true,
       },
-      /* eslint-enable kolibri/vue-no-unused-properties */
+      /*
+       * The value of the checkbox.
+       * If the checkbox is used with a v-model of array type,
+       * then this value would be added/removed from the array based on the checkbox state.
+       * If the checkbox is used with a v-model of any other type, then the v-model would
+       * be set to this value when the checkbox is checked and set to null when unchecked.
+       */
+      value: {
+        type: [String, Number],
+        default: null,
+      },
+      /*
+       * Whether the checkbox is disabled
+       */
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      /*
+       * The description to show below the checkbox
+       */
+      description: {
+        type: String,
+        default: null,
+      },
+      /*
+       * Whether the checkbox is in indeterminate state
+       */
+      indeterminate: {
+        type: Boolean,
+        default: false,
+      },
+      /*
+       * The reactive state of the checkbox which is used with v-model.
+       * It is changed with the "input" event.
+       * If used as an array, "value" prop is added/removed from it based on the checkbox state.
+       * If used as a boolean, it is set to true when checked and false when unchecked.
+       * If used as any other type, it is set to "value" prop when checked and null when unchecked.
+       */
+      inputValue: {
+        type: [Array, Boolean, Number, String, Object],
+        default: false,
+      },
+    },
+    computed: {
+      isChecked: {
+        get() {
+          if (Array.isArray(this.inputValue)) {
+            return this.inputValue.includes(this.value);
+          }
+
+          if (typeof this.inputValue === 'boolean') {
+            return this.inputValue;
+          }
+
+          return Boolean(this.inputValue);
+        },
+        set(checked) {
+          if (Array.isArray(this.inputValue)) {
+            const index = this.inputValue.indexOf(this.value);
+            if (checked && index === -1) {
+              this.updateInputValue([this.value, ...this.inputValue]);
+            } else if (!checked && index !== -1) {
+              const newInputValue = [...this.inputValue];
+              newInputValue.splice(index, 1);
+              this.updateInputValue(newInputValue);
+            }
+            return;
+          }
+
+          if (typeof this.inputValue === 'boolean') {
+            this.updateInputValue(checked);
+            return;
+          }
+
+          if (checked) {
+            this.updateInputValue(this.value);
+          } else {
+            this.updateInputValue(null);
+          }
+        },
+      },
+    },
+    methods: {
+      handleChange(checked) {
+        this.isChecked = checked;
+      },
+      updateInputValue(newValue) {
+        this.$emit('input', newValue);
+      },
     },
   };
 
@@ -29,4 +146,4 @@
     color: var(--v-text);
   }
 
-</style>
+</style>