Changes from @leipert s review

- Removes SVG paths from the dashboard app
- Adds getters for error states

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

 <script>
-import { mapActions, mapState } from 'vuex';
+import { mapActions, mapState, mapGetters } from 'vuex';
 import Pagination from '~/vue_shared/components/pagination_links.vue';
 import SecurityDashboardTableRow from './security_dashboard_table_row.vue';
 
@@ -10,19 +10,11 @@ export default {
     SecurityDashboardTableRow,
   },
   computed: {
-    ...mapState('vulnerabilities', [
-      'vulnerabilities',
-      'pageInfo',
-      'isLoadingVulnerabilities',
-      'errorLoadingVulnerabilities',
-      'errorLoadingVulnerabilitiesCount',
-    ]),
+    ...mapState('vulnerabilities', ['vulnerabilities', 'pageInfo', 'isLoadingVulnerabilities']),
+    ...mapGetters('vulnerabilities', ['dashboardListError']),
     showPagination() {
       return this.pageInfo && this.pageInfo.total;
     },
-    showError() {
-      return this.errorLoadingVulnerabilities && !this.errorLoadingVulnerabilitiesCount;
-    },
   },
   created() {
     this.fetchVulnerabilities();
@@ -61,7 +53,7 @@ export default {
     
     <div class="flash-container">
       <div 
-        v-if="showError" 
+        v-if="dashboardListError" 
         class="flash-alert">
         <div class="flash-text container-fluid container-limited limit-container-width">
           {{ s__('Security Dashboard|Error fetching the vulnerability list. Please check your network connection and try again.') }}

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

@@ -11,24 +11,18 @@ export default {
     VulnerabilityCount,
   },
   computed: {
-    ...mapGetters('vulnerabilities', ['vulnerabilitiesCountBySeverity']),
-    ...mapState('vulnerabilities', [
-      'isLoadingVulnerabilitiesCount',
-      'errorLoadingVulnerabilitiesCount',
-      'errorLoadingVulnerabilities',
+    ...mapGetters('vulnerabilities', [
+      'vulnerabilitiesCountBySeverity',
+      'dashboardCountError',
+      'dashboardError',
     ]),
+    ...mapState('vulnerabilities', ['isLoadingVulnerabilitiesCount']),
     counts() {
       return SEVERITIES.map(severity => {
         const count = this.vulnerabilitiesCountBySeverity(severity);
         return { severity, count };
       });
     },
-    dashboardError() {
-      return this.errorLoadingVulnerabilitiesCount && this.errorLoadingVulnerabilities;
-    },
-    countError() {
-      return this.errorLoadingVulnerabilitiesCount && !this.errorLoadingVulnerabilities;
-    },
   },
 };
 </script>
@@ -61,7 +55,7 @@ export default {
 
     <div class="flash-container">
       <div 
-        v-if="countError" 
+        v-if="dashboardCountError"
         class="flash-alert">
         <div class="flash-text container-fluid container-limited limit-container-width">
           {{ s__('Security Dashboard|Error fetching the vulnerability counts. Please check your network connection and try again.') }}

ee/app/assets/javascripts/security_dashboard/index.js

@@ -15,8 +15,6 @@ export default () => {
       return createElement('group-security-dashboard-app', {
         props: {
           dashboardDocumentation: el.dataset.dashboardDocumentation,
-          errorStateSvgPath: el.dataset.errorStateSvgPath,
-          emptyStateSvgPath: el.dataset.emptyStateSvgPath,
           vulnerabilitiesEndpoint: el.dataset.vulnerabilitiesEndpoint,
           vulnerabilitiesCountEndpoint: el.dataset.vulnerabilitiesSummaryEndpoint,
         },

ee/app/assets/javascripts/security_dashboard/store/modules/vulnerabilities/getters.js

@@ -8,5 +8,11 @@ export const vulnerabilitiesCountByReportType = state => type => {
   const counts = state.vulnerabilitiesCount[type];
   return counts ? Object.values(counts).reduce(sum, 0) : 0;
 };
+export const dashboardError = state =>
+  state.errorLoadingVulnerabilities && state.errorLoadingVulnerabilitiesCount;
+export const dashboardListError = state =>
+  state.errorLoadingVulnerabilities && !state.errorLoadingVulnerabilitiesCount;
+export const dashboardCountError = state =>
+  !state.errorLoadingVulnerabilities && state.errorLoadingVulnerabilitiesCount;
 
 export default () => {};

ee/app/views/groups/security/dashboard/show.html.haml

@@ -3,6 +3,4 @@
 
 #js-group-security-dashboard{ data: { vulnerabilities_endpoint: group_security_vulnerabilities_path(@group),
   vulnerabilities_summary_endpoint: summary_group_security_vulnerabilities_path(@group),
-  dashboard_documentation: help_page_path('user/group/security_dashboard'),
-  empty_state_svg_path: image_path('illustrations/security-dashboard-empty-state.svg'),
-  error_state_svg_path: image_path('illustrations/security-dashboard-api-error-empty-state.svg') } }
+  dashboard_documentation: help_page_path('user/group/security_dashboard') } }

ee/spec/javascripts/security_dashboard/store/vulnerabilities/getters_spec.js

@@ -48,4 +48,57 @@ describe('vulnerabilities module getters', () => {
       expect(result).toBe(0);
     });
   });
+
+  describe('dashboardError', () => {
+    it('should return true when both error states exist', () => {
+      const errorLoadingVulnerabilities = true;
+      const errorLoadingVulnerabilitiesCount = true;
+      const state = { errorLoadingVulnerabilities, errorLoadingVulnerabilitiesCount };
+      const result = getters.dashboardError(state);
+
+      expect(result).toBe(true);
+    });
+  });
+
+  describe('dashboardCountError', () => {
+    it('should return true if the count error exists', () => {
+      const state = {
+        errorLoadingVulnerabilitiesCount: true,
+      };
+      const result = getters.dashboardCountError(state);
+
+      expect(result).toBe(true);
+    });
+
+    it('should return false if the list error exists as well', () => {
+      const state = {
+        errorLoadingVulnerabilities: true,
+        errorLoadingVulnerabilitiesCount: true,
+      };
+      const result = getters.dashboardCountError(state);
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('dashboardListError', () => {
+    it('should return true when the list error exists', () => {
+      const state = {
+        errorLoadingVulnerabilities: true,
+      };
+      const result = getters.dashboardListError(state);
+
+      expect(result).toBe(true);
+    });
+
+    it('should return false if the count error exists as well', () => {
+      const state = {
+        errorLoadingVulnerabilities: true,
+        errorLoadingVulnerabilitiesCount: true,
+      };
+      const result = getters.dashboardListError(state);
+
+      expect(result).toBe(false);
+    });
+  });
 });