Add latest changes from gitlab-org/gitlab@master

8 files changed, 156 insertions, 5 deletions

diff --git a/app/assets/javascripts/reports/accessibility_report/components/accessibility_issue_body.vue b/app/assets/javascripts/reports/accessibility_report/components/accessibility_issue_body.vue
index 256b0e33e79..653dcced98b 100644
--- a/app/assets/javascripts/reports/accessibility_report/components/accessibility_issue_body.vue
+++ b/app/assets/javascripts/reports/accessibility_report/components/accessibility_issue_body.vue
@@ -45,10 +45,19 @@ export default {
       >
         {{ s__('AccessibilityReport|New') }}
       </div>
-      {{ issue.name }}
-      <gl-link ref="accessibility-issue-learn-more" :href="learnMoreUrl" target="_blank">{{
-        s__('AccessibilityReport|Learn More')
-      }}</gl-link>
+      <div>
+        {{
+          sprintf(
+            s__(
+              'AccessibilityReport|The accessibility scanning found an error of the following type: %{code}',
+            ),
+            { code: issue.code },
+          )
+        }}
+        <gl-link ref="accessibility-issue-learn-more" :href="learnMoreUrl" target="_blank">{{
+          s__('AccessibilityReport|Learn More')
+        }}</gl-link>
+      </div>
       {{ sprintf(s__('AccessibilityReport|Message: %{message}'), { message: issue.message }) }}
     </div>
   </div>
diff --git a/app/assets/javascripts/reports/accessibility_report/grouped_accessibility_reports_app.vue b/app/assets/javascripts/reports/accessibility_report/grouped_accessibility_reports_app.vue
new file mode 100644
index 00000000000..8f1d7f063ad
--- /dev/null
+++ b/app/assets/javascripts/reports/accessibility_report/grouped_accessibility_reports_app.vue
@@ -0,0 +1,71 @@
+<script>
+import { mapActions, mapGetters } from 'vuex';
+import { componentNames } from '~/reports/components/issue_body';
+import ReportSection from '~/reports/components/report_section.vue';
+import IssuesList from '~/reports/components/issues_list.vue';
+import createStore from './store';
+
+export default {
+  name: 'GroupedAccessibilityReportsApp',
+  store: createStore(),
+  components: {
+    ReportSection,
+    IssuesList,
+  },
+  props: {
+    baseEndpoint: {
+      type: String,
+      required: true,
+    },
+    headEndpoint: {
+      type: String,
+      required: true,
+    },
+  },
+  componentNames,
+  computed: {
+    ...mapGetters([
+      'summaryStatus',
+      'groupedSummaryText',
+      'shouldRenderIssuesList',
+      'unresolvedIssues',
+      'resolvedIssues',
+      'newIssues',
+    ]),
+  },
+  created() {
+    this.setEndpoints({
+      baseEndpoint: this.baseEndpoint,
+      headEndpoint: this.headEndpoint,
+    });
+
+    this.fetchReport();
+  },
+  methods: {
+    ...mapActions(['fetchReport', 'setEndpoints']),
+  },
+};
+</script>
+<template>
+  <report-section
+    :status="summaryStatus"
+    :success-text="groupedSummaryText"
+    :loading-text="groupedSummaryText"
+    :error-text="groupedSummaryText"
+    :has-issues="shouldRenderIssuesList"
+    class="mr-widget-section grouped-security-reports mr-report"
+  >
+    <template #body>
+      <div class="mr-widget-grouped-section report-block">
+        <issues-list
+          v-if="shouldRenderIssuesList"
+          :unresolved-issues="unresolvedIssues"
+          :new-issues="newIssues"
+          :resolved-issues="resolvedIssues"
+          :component="$options.componentNames.AccessibilityIssueBody"
+          class="report-block-group-list"
+        />
+      </div>
+    </template>
+  </report-section>
+</template>
diff --git a/app/assets/javascripts/reports/accessibility_report/store/actions.js b/app/assets/javascripts/reports/accessibility_report/store/actions.js
index f145b352e7d..8033259c222 100644
--- a/app/assets/javascripts/reports/accessibility_report/store/actions.js
+++ b/app/assets/javascripts/reports/accessibility_report/store/actions.js
@@ -3,6 +3,9 @@ import * as types from './mutation_types';
 import { parseAccessibilityReport, compareAccessibilityReports } from './utils';
 import { s__ } from '~/locale';
 
+export const setEndpoints = ({ commit }, { baseEndpoint, headEndpoint }) =>
+  commit(types.SET_ENDPOINTS, { baseEndpoint, headEndpoint });
+
 export const fetchReport = ({ state, dispatch, commit }) => {
   commit(types.REQUEST_REPORT);
 
diff --git a/app/assets/javascripts/reports/accessibility_report/store/getters.js b/app/assets/javascripts/reports/accessibility_report/store/getters.js
new file mode 100644
index 00000000000..6ce2eb27c87
--- /dev/null
+++ b/app/assets/javascripts/reports/accessibility_report/store/getters.js
@@ -0,0 +1,60 @@
+import { LOADING, ERROR, SUCCESS, STATUS_FAILED } from '../../constants';
+import { s__, n__ } from '~/locale';
+
+export const groupedSummaryText = state => {
+  if (state.isLoading) {
+    return s__('Reports|Accessibility scanning results are being parsed');
+  }
+
+  if (state.hasError) {
+    return s__('Reports|Accessibility scanning failed loading results');
+  }
+
+  const numberOfResults =
+    (state.report?.summary?.errors || 0) + (state.report?.summary?.warnings || 0);
+  if (numberOfResults === 0) {
+    return s__('Reports|Accessibility scanning detected no issues for the source branch only');
+  }
+
+  return n__(
+    'Reports|Accessibility scanning detected %d issue for the source branch only',
+    'Reports|Accessibility scanning detected %d issues for the source branch only',
+    numberOfResults,
+  );
+};
+
+export const summaryStatus = state => {
+  if (state.isLoading) {
+    return LOADING;
+  }
+
+  if (state.hasError || state.status === STATUS_FAILED) {
+    return ERROR;
+  }
+
+  return SUCCESS;
+};
+
+export const shouldRenderIssuesList = state =>
+  Object.values(state.report).some(x => Array.isArray(x) && x.length > 0);
+
+export const unresolvedIssues = state => [
+  ...state.report.existing_errors,
+  ...state.report.existing_warnings,
+  ...state.report.existing_notes,
+];
+
+export const resolvedIssues = state => [
+  ...state.report.resolved_errors,
+  ...state.report.resolved_warnings,
+  ...state.report.resolved_notes,
+];
+
+export const newIssues = state => [
+  ...state.report.new_errors,
+  ...state.report.new_warnings,
+  ...state.report.new_notes,
+];
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};
diff --git a/app/assets/javascripts/reports/accessibility_report/store/index.js b/app/assets/javascripts/reports/accessibility_report/store/index.js
index c1413499802..047964260ad 100644
--- a/app/assets/javascripts/reports/accessibility_report/store/index.js
+++ b/app/assets/javascripts/reports/accessibility_report/store/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 import * as actions from './actions';
+import * as getters from './getters';
 import mutations from './mutations';
 import state from './state';
 
@@ -9,6 +10,7 @@ Vue.use(Vuex);
 export default initialState =>
   new Vuex.Store({
     actions,
+    getters,
     mutations,
     state: state(initialState),
   });
diff --git a/app/assets/javascripts/reports/accessibility_report/store/mutation_types.js b/app/assets/javascripts/reports/accessibility_report/store/mutation_types.js
index 381736bbd38..af6bc0fcd9d 100644
--- a/app/assets/javascripts/reports/accessibility_report/store/mutation_types.js
+++ b/app/assets/javascripts/reports/accessibility_report/store/mutation_types.js
@@ -1,3 +1,5 @@
+export const SET_ENDPOINTS = 'SET_ENDPOINTS';
+
 export const REQUEST_REPORT = 'REQUEST_REPORT';
 export const RECEIVE_REPORT_SUCCESS = 'RECEIVE_REPORT_SUCCESS';
 export const RECEIVE_REPORT_ERROR = 'RECEIVE_REPORT_ERROR';
diff --git a/app/assets/javascripts/reports/accessibility_report/store/mutations.js b/app/assets/javascripts/reports/accessibility_report/store/mutations.js
index 66cf9f3d69d..a6e08744e9d 100644
--- a/app/assets/javascripts/reports/accessibility_report/store/mutations.js
+++ b/app/assets/javascripts/reports/accessibility_report/store/mutations.js
@@ -1,6 +1,10 @@
 import * as types from './mutation_types';
 
 export default {
+  [types.SET_ENDPOINTS](state, { baseEndpoint, headEndpoint }) {
+    state.baseEndpoint = baseEndpoint;
+    state.headEndpoint = headEndpoint;
+  },
   [types.REQUEST_REPORT](state) {
     state.isLoading = true;
   },
diff --git a/app/assets/javascripts/reports/components/report_section.vue b/app/assets/javascripts/reports/components/report_section.vue
index 20b0c52dbda..68956fc6d2b 100644
--- a/app/assets/javascripts/reports/components/report_section.vue
+++ b/app/assets/javascripts/reports/components/report_section.vue
@@ -167,7 +167,7 @@ export default {
     <div class="media">
       <status-icon :status="statusIconName" :size="24" class="align-self-center" />
       <div class="media-body d-flex flex-align-self-center align-items-center">
-        <div class="js-code-text code-text">
+        <div data-testid="report-section-code-text" class="js-code-text code-text">
           <div>
             {{ headerText }}
             <slot :name="slotName"></slot>