Merge branch '8704-empty-state-shown-when-the-group-security-dashboard-request-fails' into 'master'

Resolve "Empty state shown when the group security dashboard request fails"

Closes #8704

See merge request gitlab-org/gitlab-ee!8703

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

@@ -22,8 +22,22 @@ export default {
     },
   },
   computed: {
-    ...mapState('vulnerabilities', ['vulnerabilities', 'pageInfo', 'isLoadingVulnerabilities']),
+    ...mapState('vulnerabilities', [
+      'errorLoadingVulnerabilities',
+      'errorLoadingVulnerabilitiesCount',
+      'isLoadingVulnerabilities',
+      'pageInfo',
+      'vulnerabilities',
+    ]),
     ...mapGetters('vulnerabilities', ['dashboardListError']),
+    showEmptyState() {
+      return (
+        this.vulnerabilities &&
+        !this.vulnerabilities.length &&
+        !this.errorLoadingVulnerabilities &&
+        !this.errorLoadingVulnerabilitiesCount
+      );
+    },
     showPagination() {
       return this.pageInfo && this.pageInfo.total;
     },
@@ -72,7 +86,7 @@ export default {
       />
 
       <empty-state
-        v-if="!vulnerabilities.length"
+        v-if="showEmptyState"
         :svg-path="emptyStateSvgPath"
         :link="dashboardDocumentation"
       />

ee/changelogs/unreleased/8704-empty-state-shown-when-the-group-security-dashboard-request-fails.yml

+---
+title: Prevents the empty state from showing when the dashboard errors
+merge_request: 8703
+author:
+type: fixed

ee/spec/javascripts/security_dashboard/components/security_dashboard_table_spec.js

@@ -78,4 +78,29 @@ describe('Security Dashboard Table', () => {
         .catch(done.fail);
     });
   });
+
+  describe('on error', () => {
+    beforeEach(() => {
+      mock.onGet(vulnerabilitiesEndpoint).replyOnce(404, []);
+      vm = mountComponentWithStore(Component, { store, props });
+    });
+
+    it('should not render the empty state', done => {
+      waitForPromises()
+        .then(() => {
+          expect(vm.$el.querySelector('.empty-state')).toBeNull();
+          done();
+        })
+        .catch(done.fail);
+    });
+
+    it('should render the error alert', done => {
+      waitForPromises()
+        .then(() => {
+          expect(vm.$el.querySelector('.flash-alert')).not.toBeNull();
+          done();
+        })
+        .catch(done.fail);
+    });
+  });
 });