[Remove Vuetify from Studio] Channel collection options

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

@@ -22,61 +22,32 @@
       {{ $formatNumber(channelCount) }}
     </td>
     <td class="text-xs-right">
-      <BaseMenu>
-        <template #activator="{ on }">
-          <VBtn
-            flat
-            block
-            v-on="on"
-          >
-            {{ $tr('options') }}
-            <Icon icon="dropdown" />
-          </VBtn>
-        </template>
-        <VList>
-          <VListTile
-            data-test="edit"
-            :to="channelSetDetailsLink"
-          >
-            <VListTileAction>
-              <Icon icon="edit" />
-            </VListTileAction>
-            <VListTileTitle>{{ $tr('edit') }}</VListTileTitle>
-          </VListTile>
-          <VListTile @click.prevent="deleteDialog = true">
-            <VListTileAction>
-              <Icon icon="trash" />
-            </VListTileAction>
-            <VListTileTitle>{{ $tr('delete') }}</VListTileTitle>
-          </VListTile>
-        </VList>
-      </BaseMenu>
-      <MessageDialog
-        v-model="deleteDialog"
-        :header="$tr('deleteChannelSetTitle')"
-        :text="$tr('deleteChannelSetText')"
+      <KButton
+        :text="$tr('options')"
+        appearance="flat-button"
+        :iconAfter="'dropdown'"
       >
-        <template #buttons="{ close }">
-          <VSpacer />
-          <VBtn
-            flat
-            color="primary"
-            @click="close"
-          >
-            {{ $tr('cancel') }}
-          </VBtn>
-          <VBtn
-            color="primary"
-            data-test="delete"
-            @click="
-              deleteChannelSet(channelSet);
-              close();
-            "
-          >
-            {{ $tr('deleteChannelSetTitle') }}
-          </VBtn>
+        <template #menu>
+          <KDropdownMenu
+            :options="dropdownOptions"
+            :hasIcons="true"
+            position="bottom left"
+            :constrainToScrollParent="false"
+            @select="handleOptionSelect"
+          />
         </template>
-      </MessageDialog>
+      </KButton>
+      <KModal
+        v-if="deleteDialog"
+        :title="$tr('deleteChannelSetTitle')"
+        :submitText="$tr('deleteChannelSetTitle')"
+        :cancelText="$tr('cancel')"
+        :appendToOverlay="true"
+        @submit="handleDelete"
+        @cancel="deleteDialog = false"
+      >
+        {{ $tr('deleteChannelSetText') }}
+      </KModal>
     </td>
   </tr>
 
@@ -87,13 +58,11 @@
 
   import { mapActions, mapGetters } from 'vuex';
   import { RouteNames } from '../../constants';
-  import MessageDialog from 'shared/views/MessageDialog';
   import CopyToken from 'shared/views/CopyToken';
 
   export default {
     name: 'ChannelSetItem',
     components: {
-      MessageDialog,
       CopyToken,
     },
     props: {
@@ -123,9 +92,34 @@
           ? this.channelSet.channels.filter(c => c).length
           : 0;
       },
+      dropdownOptions() {
+        return [
+          {
+            label: this.$tr('edit'),
+            value: 'edit',
+            icon: 'edit',
+          },
+          {
+            label: this.$tr('delete'),
+            value: 'delete',
+            icon: 'trash',
+          },
+        ];
+      },
     },
     methods: {
       ...mapActions('channelSet', ['deleteChannelSet']),
+      handleOptionSelect(option) {
+        if (option.value === 'edit') {
+          this.$router.push(this.channelSetDetailsLink);
+        } else if (option.value === 'delete') {
+          this.deleteDialog = true;
+        }
+      },
+      handleDelete() {
+        this.deleteChannelSet(this.channelSet);
+        this.deleteDialog = false;
+      },
     },
     $trs: {
       deleteChannelSetTitle: 'Delete collection',

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

@@ -92,14 +92,12 @@
                   flat
                 >
                   <ChannelItem :channelId="channelId">
-                    <VBtn
-                      flat
-                      class="ma-0"
-                      color="primary"
+                    <KButton
+                      :text="$tr('removeText')"
+                      appearance="flat-button"
+                      :primary="true"
                       @click="removeChannel(channelId)"
-                    >
-                      {{ $tr('removeText') }}
-                    </VBtn>
+                    />
                   </ChannelItem>
                 </VCard>
               </div>

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

@@ -34,13 +34,15 @@ describe('channelSetItem', () => {
   });
 
   it('clicking the edit option should open the channel set edit modal', () => {
-    wrapper.find('[data-test="edit"]').trigger('click');
+    // Simulate selecting the edit option from the dropdown
+    wrapper.vm.handleOptionSelect({ value: 'edit' });
     expect(wrapper.vm.$route.name).toEqual(RouteNames.CHANNEL_SET_DETAILS);
   });
 
   it('clicking delete button in dialog should delete the channel set', () => {
+    // Set deleteDialog to true and trigger handleDelete method
     wrapper.vm.deleteDialog = true;
-    wrapper.find('[data-test="delete"]').trigger('click');
+    wrapper.vm.handleDelete();
     expect(mocks.deleteChannelSet).toHaveBeenCalled();
   });
 });