Merge pull request #5758 from Swoyamjeetcodes/feat/5746-remove-vuetify-filter-bar

[Remove Vuetify from Studio] Content library filter bar

Author: bjester

contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterBar.vue

@@ -1,17 +1,20 @@
 <template>
 
-  <VContainer class="pa-4">
-    <div v-if="currentFilters.length">
-      <VChip
+  <div class="catalog-filter-bar">
+    <div
+      v-if="currentFilters.length"
+      class="catalog-filter-bar-content"
+    >
+      <StudioChip
         v-for="(filter, index) in currentFilters"
         :key="`catalog-filter-${index}`"
         close
-        class="ma-1"
+        class="catalog-filter-chip"
         :data-test="`filter-chip-${index}`"
-        @input="filter.onclose"
+        @close="filter.onclose"
       >
         {{ filter.text }}
-      </VChip>
+      </StudioChip>
       <KButton
         v-if="currentFilters.length"
         class="clear-link"
@@ -21,7 +24,7 @@
         @click="clearFilters"
       />
     </div>
-  </VContainer>
+  </div>
 
 </template>
 
@@ -30,6 +33,7 @@
 
   import flatten from 'lodash/flatten'; // Tests fail with native Array.flat() method
   import { catalogFilterMixin } from './mixins';
+  import StudioChip from 'shared/views/StudioChip';
   import { constantsTranslationMixin } from 'shared/mixins';
 
   /**
@@ -45,6 +49,9 @@
 
   export default {
     name: 'CatalogFilterBar',
+    components: {
+      StudioChip,
+    },
     mixins: [constantsTranslationMixin, catalogFilterMixin],
     computed: {
       currentFilters() {
@@ -129,17 +136,20 @@
     width: 100%;
   }
 
-  .container {
+  .catalog-filter-bar {
     max-width: 1128px;
+    padding: 16px;
     margin: 0 auto;
   }
 
-  .v-card {
-    cursor: pointer;
+  .catalog-filter-bar-content {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
 
-    &:hover {
-      background-color: var(--v-grey-lighten4);
-    }
+  .catalog-filter-chip {
+    margin: 4px;
   }
 
   .clear-link {

contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFilterBar.spec.js

@@ -16,7 +16,9 @@ const query = {
 async function closeChipByText(user, text) {
   const chip = await screen.findByText(text);
 
-  const closeButton = chip.closest('[data-test^="filter-chip"]').querySelector('.v-chip__close');
+  const closeButton = chip
+    .closest('[data-test^="filter-chip"]')
+    .querySelector('[data-test="remove-chip"]');
 
   expect(closeButton).toBeTruthy();
   await user.click(closeButton);