Fixes UI glitch on cards in collections

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

@@ -1,6 +1,6 @@
 <template>
 
-  <VLayout v-if="channel" align-center wrap class="pa-2">
+  <VLayout v-if="channel" align-center wrap class="pa-2" @click="handleClick">
     <VFlex class="pa-2" xs12 sm4 md3 lg2>
       <Thumbnail :src="channel.thumbnail_url" />
     </VFlex>
@@ -47,6 +47,11 @@
         return this.getChannel(this.channelId);
       },
     },
+    methods: {
+      handleClick() {
+        this.$emit('click', this.channelId);
+      },
+    },
     $trs: {
       versionText: 'Version {version}',
     },

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

@@ -21,15 +21,20 @@
           hover
           class="list-card-hover px-3"
         >
-          <Checkbox
-            v-model="selectedChannels"
-            color="primary"
-            :data-test="`checkbox-${channel.id}`"
-            :value="channel.id"
-            class="channel ma-0"
-          >
-            <ChannelItem :channelId="channel.id" />
-          </Checkbox>
+          <VLayout align-center row>
+            <Checkbox
+              v-model="selectedChannels"
+              color="primary"
+              :data-test="`checkbox-${channel.id}`"
+              :value="channel.id"
+              class="channel ma-0"
+            />
+            <ChannelItem
+              :channelId="channel.id"
+              :data-test="`channel-item-${channel.id}`"
+              @click="handleSelectChannel"
+            />
+          </VLayout>
         </VCard>
       </template>
     </template>
@@ -112,6 +117,11 @@
     },
     methods: {
       ...mapActions('channel', ['loadChannelList']),
+      handleSelectChannel(channelId) {
+        this.selectedChannels = this.selectedChannels.includes(channelId)
+          ? this.selectedChannels.filter(id => id !== channelId)
+          : [...this.selectedChannels, channelId];
+      },
     },
     $trs: {
       searchText: 'Search for a channel',

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

@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import Vuex from 'vuex';
 import ChannelSelectionList from '../ChannelSelectionList';
 import { ChannelListTypes } from 'shared/constants';
 
@@ -25,6 +26,25 @@ const publicChannel = {
   published: true,
 };
 
+const getters = {
+  channels: jest.fn(() => [editChannel, editChannel2, publicChannel]),
+  getChannel: jest.fn(() => () => editChannel),
+};
+
+const actions = {
+  loadChannelList: jest.fn(() => Promise.resolve()),
+};
+
+const store = new Vuex.Store({
+  modules: {
+    channel: {
+      namespaced: true,
+      getters,
+      actions,
+    },
+  },
+});
+
 function makeWrapper() {
   return mount(ChannelSelectionList, {
     sync: false,
@@ -41,9 +61,7 @@ function makeWrapper() {
         return Promise.resolve();
       },
     },
-    stubs: {
-      ChannelItem: true,
-    },
+    store,
   });
 }
 
@@ -77,4 +95,17 @@ describe('channelSelectionList', () => {
     expect(wrapper.vm.listChannels.find(c => c.id === editChannel.id)).toBeTruthy();
     expect(wrapper.vm.listChannels.find(c => c.id === editChannel2.id)).toBeFalsy();
   });
+  it('should select channels when the channel card has been clicked', () => {
+    wrapper.setData({ loading: false });
+    wrapper.find(`[data-test="channel-item-${editChannel.id}"]`).trigger('click');
+    expect(wrapper.emitted('input')[0][0]).toEqual([editChannel.id]);
+  });
+  it('should deselect channels when the channel card has been clicked', () => {
+    wrapper.setData({ loading: false });
+    wrapper.find(`[data-test="channel-item-${editChannel.id}"]`).element.click(); // Check the channel
+    wrapper.find(`[data-test="channel-item-${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
+  });
 });