1 files changed, 64 insertions, 0 deletions
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..6f8ddd01df8
--- /dev/null
+++ b/app/assets/javascripts/reports/accessibility_report/grouped_accessibility_reports_app.vue
@@ -0,0 +1,64 @@
+<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: {
+    endpoint: {
+      type: String,
+      required: true,
+    },
+  },
+  componentNames,
+  computed: {
+    ...mapGetters([
+      'summaryStatus',
+      'groupedSummaryText',
+      'shouldRenderIssuesList',
+      'unresolvedIssues',
+      'resolvedIssues',
+      'newIssues',
+    ]),
+  },
+  created() {
+    this.setEndpoint(this.endpoint);
+
+    this.fetchReport();
+  },
+  methods: {
+    ...mapActions(['fetchReport', 'setEndpoint']),
+  },
+};
+</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>