Merge branch '439145-hide-exposed-artifacts-widget-when-no-artifacts' into 'master'

Hide exposed artifacts when there are none

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/143698



Merged-by: Kushal Pandya <kushal@gitlab.com>
Approved-by: Andrei Zubov <azubov@gitlab.com>
Approved-by: Veethika Mishra <6115425-veethika@users.noreply.gitlab.com>
Approved-by: Kushal Pandya <kushal@gitlab.com>
Reviewed-by: Andrei Zubov <azubov@gitlab.com>
Co-authored-by: Miranda Fluharty <mfluharty@gitlab.com>

app/assets/javascripts/vue_merge_request_widget/components/artifacts_list_app.vue

@@ -20,6 +20,9 @@ export default {
   computed: {
     ...mapState(['artifacts', 'isLoading', 'hasError']),
     ...mapGetters(['title']),
+    hasArtifacts() {
+      return this.artifacts.length > 0;
+    },
   },
   created() {
     this.setEndpoint(this.endpoint);
@@ -31,7 +34,12 @@ export default {
 };
 </script>
 <template>
-  <mr-collapsible-extension :title="title" :is-loading="isLoading" :has-error="hasError">
+  <mr-collapsible-extension
+    v-if="isLoading || hasArtifacts || hasError"
+    :title="title"
+    :is-loading="isLoading"
+    :has-error="hasError"
+  >
     <artifacts-list :artifacts="artifacts" />
   </mr-collapsible-extension>
 </template>

spec/frontend/vue_merge_request_widget/components/artifacts_list_app_spec.js

@@ -57,7 +57,6 @@ describe('Merge Requests Artifacts list app', () => {
     beforeEach(() => {
       createComponent();
       store.dispatch('requestArtifacts');
-      return nextTick();
     });
 
     it('renders a loading icon', () => {
@@ -84,7 +83,6 @@ describe('Merge Requests Artifacts list app', () => {
         data: artifacts,
         status: HTTP_STATUS_OK,
       });
-      return nextTick();
     });
 
     it('renders a title with the number of artifacts', () => {
@@ -107,12 +105,27 @@ describe('Merge Requests Artifacts list app', () => {
     });
   });
 
+  describe('with 0 artifacts', () => {
+    beforeEach(() => {
+      createComponent();
+      mock.onGet(FAKE_ENDPOINT).reply(HTTP_STATUS_OK, [], {});
+      store.dispatch('receiveArtifactsSuccess', {
+        data: [],
+        status: HTTP_STATUS_OK,
+      });
+    });
+
+    it('does not render', () => {
+      expect(findTitle().exists()).toBe(false);
+      expect(findButtons().exists()).toBe(false);
+    });
+  });
+
   describe('with error', () => {
     beforeEach(() => {
       createComponent();
       mock.onGet(FAKE_ENDPOINT).reply(HTTP_STATUS_INTERNAL_SERVER_ERROR, {}, {});
       store.dispatch('receiveArtifactsError');
-      return nextTick();
     });
 
     it('renders the error state', () => {