refac: change Checkbox to be a wrapper around KCheckbox instead of VCheckbox

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/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/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>

contentcuration/contentcuration/frontend/shared/views/form/__tests__/contentDefaults.spec.js

@@ -25,10 +25,14 @@ function updateFieldValues(keys, fields, contentDefaults) {
     const field = fields.filter(f => f.contains(selector)).at(0);
     const input = field.find(`.v-input ${selector}`);
 
-    if (input.is('[type="checkbox"]')) {
-      input.setChecked(contentDefaults[key]);
-    } else {
+    if (input.exists()) {
+      // The element is a Vuetify input
       input.setValue(contentDefaults[key]);
+    } else {
+      // The element is a KDS checkbox
+      if (field.props('inputValue') !== contentDefaults[key]) {
+        field.find('input').element.click();
+      }
     }
   });
 }
@@ -86,6 +90,7 @@ function updateFormValues(wrapper, contentDefaults) {
   }
 
   const checkboxes = wrapper.findAll({ name: 'Checkbox' });
+  expect(checkboxes.length).toEqual(4);
   updateFieldValues(
     [
       'auto_derive_audio_thumbnail',
@@ -94,7 +99,8 @@ function updateFormValues(wrapper, contentDefaults) {
       'auto_derive_video_thumbnail',
     ],
     checkboxes,
-    contentDefaults
+    contentDefaults,
+    'inputValue'
   );
 }
 

yarn.lock

@@ -14256,4 +14256,4 @@ yargs@^17.3.1:
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
-  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==