[Remove Vuetify from Studio] Buttons/links and dropdown in Content library

Author: yeshwanth235

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

@@ -11,10 +11,11 @@
       >
         {{ filter.text }}
       </VChip>
-      <ActionLink
+      <KButton
         v-if="currentFilters.length"
-        class="mx-2"
+        class="clear-link"
         :text="$tr('clearAll')"
+        appearance="basic-link"
         data-test="clear"
         @click="clearFilters"
       />
@@ -140,4 +141,8 @@
     }
   }
 
+  .clear-link {
+    margin: 0 8px;
+  }
+
 </style>

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

@@ -1,14 +1,14 @@
 <template>
 
   <div>
-    <VBtn
+    <KButton
       v-if="$vuetify.breakpoint.xsOnly"
-      color="primary"
-      flat
+      class="drawer-btn"
+      :text="$tr('searchText')"
+      :primary="true"
+      appearance="flat-button"
       @click.stop="drawer = true"
-    >
-      {{ $tr('searchText') }}
-    </VBtn>
+    />
     <CatalogFilterBar />
     <VNavigationDrawer
       v-model="drawer"
@@ -98,11 +98,13 @@
           v-model="subtitles"
           :label="$tr('subtitlesLabel')"
         />
-        <ActionLink
+        <KRouterLink
+          class="qa-link"
           :to="faqLink"
-          target="_blank"
-          class="mt-4"
           :text="$tr('frequentlyAskedQuestionsLink')"
+          appearance="basic-link"
+          iconAfter="openNewTab"
+          target="_blank"
         />
       </VContainer>
       <VFooter
@@ -118,10 +120,10 @@
             contain
             :src="require('shared/images/le-logo.svg')"
           />
-          <ActionLink
-            :text="$tr('copyright', { year: new Date().getFullYear() })"
+          <KExternalLink
             href="https://learningequality.org/"
-            target="_blank"
+            :text="$tr('copyright', { year: new Date().getFullYear() })"
+            openInNewTab
           />
         </div>
       </VFooter>
@@ -255,4 +257,12 @@
     overflow: auto;
   }
 
+  .qa-link {
+    margin-top: 24px;
+  }
+
+  .drawer-btn {
+    margin-top: 10px;
+  }
+
 </style>

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

@@ -32,10 +32,11 @@
           <h1 class="mb-2 ml-1 title">
             {{ $tr('resultsText', { count: page.count }) }}
           </h1>
-          <ActionLink
+          <KButton
             v-if="page.count && !selecting"
             :text="$tr('selectChannels')"
             data-test="select"
+            appearance="basic-link"
             @click="setSelection(true)"
           />
           <Checkbox
@@ -89,42 +90,29 @@
         </div>
         <VSpacer />
         <div>
-          <VBtn
-            flat
+          <KButton
+            :text="$tr('cancelButton')"
             data-test="cancel"
-            class="ma-0"
+            appearance="flat-button"
             @click="setSelection(false)"
-          >
-            {{ $tr('cancelButton') }}
-          </VBtn>
+          />
         </div>
-        <BaseMenu top>
-          <template #activator="{ on }">
-            <VBtn
-              color="primary"
-              class="ma-0 mx-2"
-              v-on="on"
-            >
-              {{ $tr('downloadButton') }}
-              <Icon
-                class="ml-1"
-                icon="dropup"
-                :color="$themeTokens.textInverted"
-              />
-            </VBtn>
-          </template>
-          <VList>
-            <VListTile @click="downloadPDF">
-              <VListTileTitle>{{ $tr('downloadPDF') }}</VListTileTitle>
-            </VListTile>
-            <VListTile
-              data-test="download-csv"
-              @click="downloadCSV"
-            >
-              <VListTileTitle>{{ $tr('downloadCSV') }}</VListTileTitle>
-            </VListTile>
-          </VList>
-        </BaseMenu>
+        <KButton
+          :text="$tr('downloadButton')"
+          :primary="true"
+          data-test="download-button"
+          iconAfter="dropup"
+        >
+          <KDropdownMenu
+            :primary="true"
+            :options="[
+              { label: $tr('downloadPDF'), value: 'pdf' },
+              { label: $tr('downloadCSV'), value: 'csv' },
+            ]"
+            appearance="raised-button"
+            @select="option => selectDownloadOption(option)"
+          />
+        </KButton>
       </BottomBar>
     </VContainer>
   </div>
@@ -286,6 +274,13 @@
         this.setSelection(false);
         return this.downloadChannelsPDF(params);
       },
+      selectDownloadOption(option) {
+        if (option.value === 'pdf') {
+          this.downloadPDF();
+        } else if (option.value === 'csv') {
+          this.downloadCSV();
+        }
+      },
     },
     $trs: {
       resultsText: '{count, plural,\n =1 {# result found}\n other {# results found}}',

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

@@ -15,6 +15,7 @@ function makeWrapper(computed = {}) {
   loadCatalog.mockImplementation(() => Promise.resolve());
 
   const downloadCSV = jest.spyOn(CatalogList.methods, 'downloadCSV');
+  const downloadPDF = jest.spyOn(CatalogList.methods, 'downloadPDF');
 
   const wrapper = mount(CatalogList, {
     router,
@@ -32,7 +33,7 @@ function makeWrapper(computed = {}) {
       CatalogFilters: true,
     },
   });
-  return [wrapper, { loadCatalog, downloadCSV }];
+  return [wrapper, { loadCatalog, downloadCSV, downloadPDF }];
 }
 
 describe('catalogFilterBar', () => {
@@ -165,10 +166,20 @@ describe('catalogFilterBar', () => {
 
       it('clicking download CSV should call downloadCSV', async () => {
         mocks.downloadCSV.mockImplementationOnce(() => Promise.resolve());
-        await wrapper.findComponent('[data-test="download-csv"]').trigger('click');
+        await wrapper.findComponent('[data-test="download-button"]').trigger('click');
+        const menuOptions = wrapper.findAll('.ui-menu-option-content');
+        await menuOptions.at(1).trigger('click');
         expect(mocks.downloadCSV).toHaveBeenCalled();
       });
 
+      it('clicking download PDF should call downloadPDF', async () => {
+        mocks.downloadPDF.mockImplementationOnce(() => Promise.resolve());
+        await wrapper.findComponent('[data-test="download-button"]').trigger('click');
+        const menuOptions = wrapper.findAll('.ui-menu-option-content');
+        await menuOptions.at(0).trigger('click');
+        expect(mocks.downloadPDF).toHaveBeenCalled();
+      });
+
       it('downloadCSV should call downloadChannelsCSV with current parameters', async () => {
         const keywords = 'Download csv keywords test';
         router.replace({ query: { keywords } });