Merge branch '338357-improve-ux-artifacts-dropdown' into 'master'

Add empty artifacts message

See merge request gitlab-org/gitlab!68166

app/assets/javascripts/pipelines/components/pipelines_list/pipeline_multi_actions.vue

@@ -16,6 +16,7 @@ export const i18n = {
   downloadArtifact: __('Download %{name} artifact'),
   artifactSectionHeader: __('Download artifacts'),
   artifactsFetchErrorMessage: s__('Pipelines|Could not load artifacts.'),
+  emptyArtifactsMessage: __('No artifacts found'),
 };
 
 export default {
@@ -99,6 +100,10 @@ export default {
 
     <gl-loading-icon v-if="isLoading" size="sm" />
 
+    <gl-dropdown-item v-if="!artifacts.length" data-testid="artifacts-empty-message">
+      {{ $options.i18n.emptyArtifactsMessage }}
+    </gl-dropdown-item>
+
     <gl-dropdown-item
       v-for="(artifact, i) in artifacts"
       :key="i"

locale/gitlab.pot

@@ -22520,6 +22520,9 @@ msgstr ""
 msgid "No approvers"
 msgstr ""
 
+msgid "No artifacts found"
+msgstr ""
+
 msgid "No assignee"
 msgstr ""
 

spec/frontend/pipelines/pipeline_multi_actions_spec.js

@@ -53,6 +53,7 @@ describe('Pipeline Multi Actions Dropdown', () => {
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findAllArtifactItems = () => wrapper.findAllByTestId(artifactItemTestId);
   const findFirstArtifactItem = () => wrapper.findByTestId(artifactItemTestId);
+  const findEmptyMessage = () => wrapper.findByTestId('artifacts-empty-message');
 
   beforeEach(() => {
     mockAxios = new MockAdapter(axios);
@@ -86,6 +87,7 @@ describe('Pipeline Multi Actions Dropdown', () => {
       createComponent({ mockData: { artifacts } });
 
       expect(findAllArtifactItems()).toHaveLength(artifacts.length);
+      expect(findEmptyMessage().exists()).toBe(false);
     });
 
     it('should render the correct artifact name and path', () => {
@@ -95,6 +97,12 @@ describe('Pipeline Multi Actions Dropdown', () => {
       expect(findFirstArtifactItem().text()).toBe(`Download ${artifacts[0].name} artifact`);
     });
 
+    it('should render empty message when no artifacts are found', () => {
+      createComponent({ mockData: { artifacts: [] } });
+
+      expect(findEmptyMessage().exists()).toBe(true);
+    });
+
     describe('with a failing request', () => {
       it('should render an error message', async () => {
         const endpoint = artifactsEndpoint.replace(artifactsEndpointPlaceholder, pipelineId);