Merge branch 'jnnkl-download-dropdown-refactor' into 'master'

Reintroduce text on Pipeline Widget dropdown

See merge request gitlab-org/gitlab!63980

app/assets/javascripts/vue_shared/security_reports/components/artifact_downloads/merge_request_artifact_download.vue

@@ -76,6 +76,7 @@ export default {
 
 <template>
   <security-report-download-dropdown
+    :title="s__('SecurityReports|Download results')"
     :artifacts="reportArtifacts"
     :loading="isLoadingReportArtifacts"
   />

app/assets/javascripts/vue_shared/security_reports/components/security_report_download_dropdown.vue

@@ -21,6 +21,16 @@ export default {
       required: false,
       default: false,
     },
+    text: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   methods: {
     artifactText({ name }) {
@@ -35,7 +45,8 @@ export default {
 <template>
   <gl-dropdown
     v-gl-tooltip
-    :text="s__('SecurityReports|Download results')"
+    :text="text"
+    :title="title"
     :loading="loading"
     icon="download"
     size="small"

app/assets/javascripts/vue_shared/security_reports/security_reports_app.vue

@@ -200,6 +200,7 @@ export default {
 
     <template #action-buttons>
       <security-report-download-dropdown
+        :text="s__('SecurityReports|Download results')"
         :artifacts="reportArtifacts"
         :loading="isLoadingReportArtifacts"
       />
@@ -228,6 +229,7 @@ export default {
 
     <template #action-buttons>
       <security-report-download-dropdown
+        :text="s__('SecurityReports|Download results')"
         :artifacts="reportArtifacts"
         :loading="isLoadingReportArtifacts"
       />

ee/app/assets/javascripts/vue_shared/security_reports/components/artifact_downloads/pipeline_artifact_download.vue

@@ -78,6 +78,7 @@ export default {
   <div>
     <slot name="label"></slot>
     <security-report-download-dropdown
+      :text="s__('SecurityReports|Download results')"
       :artifacts="reportArtifacts"
       :loading="isLoadingReportArtifacts"
     />

ee/spec/frontend/vue_shared/security_reports/components/artifact_downloads/pipeline_artifact_download_spec.js

@@ -8,7 +8,7 @@ import {
 } from 'ee/vue_shared/security_reports/constants';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import {
-  expectedDownloadDropdownProps,
+  expectedDownloadDropdownPropsWithText,
   securityReportPipelineDownloadPathsQueryResponse,
 } from 'jest/vue_shared/security_reports/mock_data';
 import createFlash from '~/flash';
@@ -80,7 +80,7 @@ describe('Pipeline artifact Download', () => {
     });
 
     it('renders the download dropdown', () => {
-      expect(findDownloadDropdown().props()).toEqual(expectedDownloadDropdownProps);
+      expect(findDownloadDropdown().props()).toEqual(expectedDownloadDropdownPropsWithText);
     });
   });
 

spec/frontend/vue_shared/components/security_reports/artifact_downloads/merge_request_artifact_download_spec.js

@@ -3,7 +3,7 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import {
-  expectedDownloadDropdownProps,
+  expectedDownloadDropdownPropsWithTitle,
   securityReportMergeRequestDownloadPathsQueryResponse,
 } from 'jest/vue_shared/security_reports/mock_data';
 import createFlash from '~/flash';
@@ -80,7 +80,7 @@ describe('Merge request artifact Download', () => {
     });
 
     it('renders the download dropdown', () => {
-      expect(findDownloadDropdown().props()).toEqual(expectedDownloadDropdownProps);
+      expect(findDownloadDropdown().props()).toEqual(expectedDownloadDropdownPropsWithTitle);
     });
   });
 

spec/frontend/vue_shared/security_reports/components/security_report_download_dropdown_spec.js

@@ -40,14 +40,13 @@ describe('SecurityReportDownloadDropdown component', () => {
       expect(findDropdown().props('loading')).toBe(false);
     });
 
-    it('renders a dropdown items for each artifact', () => {
+    it('renders a dropdown item for each artifact', () => {
       artifacts.forEach((artifact, i) => {
         const item = findDropdownItems().at(i);
         expect(item.text()).toContain(artifact.name);
-        expect(item.attributes()).toMatchObject({
-          href: artifact.path,
-          download: expect.any(String),
-        });
+
+        expect(item.element.getAttribute('href')).toBe(artifact.path);
+        expect(item.element.getAttribute('download')).toBeDefined();
       });
     });
   });
@@ -61,4 +60,32 @@ describe('SecurityReportDownloadDropdown component', () => {
       expect(findDropdown().props('loading')).toBe(true);
     });
   });
+
+  describe('given title props', () => {
+    beforeEach(() => {
+      createComponent({ artifacts: [], loading: true, title: 'test title' });
+    });
+
+    it('should render title', () => {
+      expect(findDropdown().attributes('title')).toBe('test title');
+    });
+
+    it('should not render text', () => {
+      expect(findDropdown().text().trim()).toBe('');
+    });
+  });
+
+  describe('given text props', () => {
+    beforeEach(() => {
+      createComponent({ artifacts: [], loading: true, text: 'test text' });
+    });
+
+    it('should not render title', () => {
+      expect(findDropdown().props().title).not.toBeDefined();
+    });
+
+    it('should render text', () => {
+      expect(findDropdown().props().text).toContain('test text');
+    });
+  });
 });

spec/frontend/vue_shared/security_reports/mock_data.js

@@ -581,9 +581,18 @@ export const secretDetectionArtifacts = [
   },
 ];
 
-export const expectedDownloadDropdownProps = {
+export const expectedDownloadDropdownPropsWithTitle = {
   loading: false,
   artifacts: [...secretDetectionArtifacts, ...sastArtifacts],
+  text: '',
+  title: 'Download results',
+};
+
+export const expectedDownloadDropdownPropsWithText = {
+  loading: false,
+  artifacts: [...secretDetectionArtifacts, ...sastArtifacts],
+  title: '',
+  text: 'Download results',
 };
 
 /**

spec/frontend/vue_shared/security_reports/security_reports_app_spec.js

@@ -8,7 +8,7 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import { trimText } from 'helpers/text_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import {
-  expectedDownloadDropdownProps,
+  expectedDownloadDropdownPropsWithText,
   securityReportMergeRequestDownloadPathsQueryNoArtifactsResponse,
   securityReportMergeRequestDownloadPathsQueryResponse,
   sastDiffSuccessMock,
@@ -99,7 +99,7 @@ describe('Security reports app', () => {
     });
 
     it('renders the download dropdown', () => {
-      expect(findDownloadDropdown().props()).toEqual(expectedDownloadDropdownProps);
+      expect(findDownloadDropdown().props()).toEqual(expectedDownloadDropdownPropsWithText);
     });
 
     it('renders the expected message', () => {
@@ -203,7 +203,7 @@ describe('Security reports app', () => {
           });
 
           it('renders the download dropdown', () => {
-            expect(findDownloadDropdown().props()).toEqual(expectedDownloadDropdownProps);
+            expect(findDownloadDropdown().props()).toEqual(expectedDownloadDropdownPropsWithText);
           });
         });
 
@@ -225,7 +225,7 @@ describe('Security reports app', () => {
           });
 
           it('renders the download dropdown', () => {
-            expect(findDownloadDropdown().props()).toEqual(expectedDownloadDropdownProps);
+            expect(findDownloadDropdown().props()).toEqual(expectedDownloadDropdownPropsWithText);
           });
         });
 
@@ -247,7 +247,7 @@ describe('Security reports app', () => {
           });
 
           it('renders the download dropdown', () => {
-            expect(findDownloadDropdown().props()).toEqual(expectedDownloadDropdownProps);
+            expect(findDownloadDropdown().props()).toEqual(expectedDownloadDropdownPropsWithText);
           });
         });