Display status reason as subheading

Backend returns a reason for the status
Why not put it underneath the error message in the widget

app/assets/javascripts/reports/codequality_report/grouped_codequality_reports_app.vue

@@ -44,7 +44,7 @@ export default {
   },
   componentNames,
   computed: {
-    ...mapState(['newIssues', 'resolvedIssues']),
+    ...mapState(['newIssues', 'resolvedIssues', 'hasError', 'statusReason']),
     ...mapGetters([
       'hasCodequalityIssues',
       'codequalityStatus',
@@ -88,5 +88,7 @@ export default {
     :popover-options="codequalityPopover"
     :show-report-section-status-icon="false"
     class="js-codequality-widget mr-widget-border-top mr-report"
-  />
+  >
+    <template v-if="hasError" #sub-heading>{{ statusReason }}</template>
+  </report-section>
 </template>

app/assets/javascripts/reports/codequality_report/store/actions.js

@@ -16,7 +16,7 @@ export const fetchReports = ({ state, dispatch, commit }, diffFeatureFlagEnabled
           resolvedIssues: parseCodeclimateMetrics(data.resolved_errors, state.baseBlobPath),
         });
       })
-      .catch(() => dispatch('receiveReportsError'));
+      .catch((error) => dispatch('receiveReportsError', error));
   }
   if (!state.basePath) {
     return dispatch('receiveReportsError');
@@ -36,6 +36,6 @@ export const receiveReportsSuccess = ({ commit }, data) => {
   commit(types.RECEIVE_REPORTS_SUCCESS, data);
 };
 
-export const receiveReportsError = ({ commit }) => {
-  commit(types.RECEIVE_REPORTS_ERROR);
+export const receiveReportsError = ({ commit }, error) => {
+  commit(types.RECEIVE_REPORTS_ERROR, error);
 };

app/assets/javascripts/reports/codequality_report/store/mutations.js

@@ -14,12 +14,14 @@ export default {
   },
   [types.RECEIVE_REPORTS_SUCCESS](state, data) {
     state.hasError = false;
+    state.statusReason = '';
     state.isLoading = false;
     state.newIssues = data.newIssues;
     state.resolvedIssues = data.resolvedIssues;
   },
-  [types.RECEIVE_REPORTS_ERROR](state) {
+  [types.RECEIVE_REPORTS_ERROR](state, error) {
     state.isLoading = false;
     state.hasError = true;
+    state.statusReason = error?.response?.data?.status_reason;
   },
 };

app/assets/javascripts/reports/codequality_report/store/state.js

@@ -8,6 +8,7 @@ export default () => ({
 
   isLoading: false,
   hasError: false,
+  statusReason: '',
 
   newIssues: [],
   resolvedIssues: [],