Merge branch 'add-text-export-secdashboard' into 'master'

Add text import button

See merge request gitlab-org/gitlab!38706

ee/app/assets/javascripts/security_dashboard/components/csv_export_button.vue

 <script>
 import { GlPopover, GlIcon, GlLink, GlButton, GlTooltipDirective } from '@gitlab/ui';
-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { formatDate } from '~/lib/utils/datetime_utility';
@@ -29,6 +29,16 @@ export default {
     isPreparingCsvExport: false,
     showPopover: localStorage.getItem(STORAGE_KEY) !== 'true',
   }),
+  computed: {
+    buttonProps() {
+      const { isPreparingCsvExport } = this;
+      return {
+        title: __('Export as CSV'),
+        loading: isPreparingCsvExport,
+        ...(!isPreparingCsvExport ? { icon: 'export' } : {}),
+      };
+    },
+  },
   methods: {
     closePopover() {
       this.showPopover = false;
@@ -66,17 +76,11 @@ export default {
   <gl-button
     ref="csvExportButton"
     v-gl-tooltip.hover
-    class="align-self-center"
-    :title="__('Export as CSV')"
-    :loading="isPreparingCsvExport"
+    class="gl-align-self-center"
+    v-bind="buttonProps"
     @click="initiateCsvExport"
   >
-    <gl-icon
-      v-if="!isPreparingCsvExport"
-      ref="exportIcon"
-      name="export"
-      class="mr-0 gl-display-block"
-    />
+    {{ __('Export') }}
     <gl-popover
       ref="popover"
       :target="() => $refs.csvExportButton.$el"

ee/spec/frontend/security_dashboard/components/csv_export_button_spec.js

@@ -25,7 +25,6 @@ describe('Csv Button Export', () => {
   const findPopoverButton = () => wrapper.find({ ref: 'popoverButton' });
   const findPopover = () => wrapper.find({ ref: 'popover' });
   const findCsvExportButton = () => wrapper.find({ ref: 'csvExportButton' });
-  const findExportIcon = () => wrapper.find({ ref: 'exportIcon' });
 
   const createComponent = () => {
     return shallowMount(CsvExportButton, {
@@ -101,7 +100,7 @@ describe('Csv Button Export', () => {
     });
 
     it('displays the export icon when not loading and the loading icon when loading', () => {
-      expect(findExportIcon().props('name')).toBe('export');
+      expect(findCsvExportButton().props('icon')).toBe('export');
       expect(findCsvExportButton().props('loading')).toBe(false);
 
       wrapper.setData({
@@ -109,7 +108,7 @@ describe('Csv Button Export', () => {
       });
 
       return wrapper.vm.$nextTick(() => {
-        expect(findExportIcon().exists()).toBe(false);
+        expect(findCsvExportButton().props('icon')).toBeFalsy();
         expect(findCsvExportButton().props('loading')).toBe(true);
       });
     });