Merge branch 'mfluharty-full-codequality-report' into 'master'

Add code quality tab with full report to pipeline view

See merge request gitlab-org/gitlab!21527

app/assets/stylesheets/pages/pipelines.scss

@@ -1090,6 +1090,20 @@ button.mini-pipeline-graph-dropdown-toggle {
   }
 }
 
+.codequality-report {
+  .media {
+    padding: $gl-padding;
+  }
+
+  .media-body {
+    flex-direction: row;
+  }
+
+  .report-block-container {
+    height: auto !important;
+  }
+}
+
 .progress-bar.bg-primary {
   background-color: $blue-500 !important;
 }

doc/user/project/merge_requests/code_quality.md

@@ -260,11 +260,16 @@ GitLab.
 
 ## Code Quality reports
 
-Once the Code Quality job has completed, GitLab:
+Once the Code Quality job has completed:
 
-- Checks the generated report.
-- Compares the metrics between the source and target branches.
-- Shows the information right on the merge request.
+- The full list of code quality violations generated by a pipeline is available in the
+  Code Quality tab of the Pipeline Details page.
+- Potential changes to code quality are shown directly in the merge request.
+  The Code Quality widget in the merge request compares the reports from the base and head of the branch,
+  then lists any violations that will be resolved or created when the branch is merged.
+- The full JSON report is available as a
+  [downloadable artifact](../../project/pipelines/job_artifacts.html#downloading-artifacts)
+  for the `code_quality` job.
 
 If multiple jobs in a pipeline generate a code quality artifact, only the artifact from
 the last created job (the job with the largest job ID) is used. To avoid confusion,
@@ -276,6 +281,10 @@ Code Quality job in your `.gitlab-ci.yml` for the very first time.
 Consecutive merge requests will have something to compare to and the Code Quality
 report will be shown properly.
 
+These reports will only be available as long as the Code Quality artifact(s) required to generate
+them are also available. See
+[`artifacts:expire_in`](../../../ci/yaml/README.md#artifactsexpire_in) for more details.
+
 <!-- ## Troubleshooting
 
 Include any troubleshooting steps that you can foresee. If you know beforehand what issues

ee/app/assets/javascripts/codequality_report/codequality_report.vue

+<script>
+import { mapActions, mapState, mapGetters } from 'vuex';
+import reportsMixin from 'ee/vue_shared/security_reports/mixins/reports_mixin';
+import { componentNames } from 'ee/reports/components/issue_body';
+import ReportSection from '~/reports/components/report_section.vue';
+import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
+import { n__, s__, sprintf } from '~/locale';
+
+export default {
+  components: {
+    ReportSection,
+    PaginationLinks,
+  },
+  mixins: [reportsMixin],
+  componentNames,
+  computed: {
+    ...mapState(['isLoadingCodequality', 'loadingCodequalityFailed', 'pageInfo']),
+    ...mapGetters(['codequalityIssues', 'codequalityIssueTotal']),
+    hasCodequalityIssues() {
+      return this.codequalityIssueTotal > 0;
+    },
+    codequalityText() {
+      const text = [];
+      const { codequalityIssueTotal } = this;
+
+      if (codequalityIssueTotal === 0) {
+        return s__('ciReport|No code quality issues found');
+      } else if (codequalityIssueTotal > 0) {
+        return sprintf(s__('ciReport|Found %{issuesWithCount}'), {
+          issuesWithCount: n__(
+            '%d code quality issue',
+            '%d code quality issues',
+            codequalityIssueTotal,
+          ),
+        });
+      }
+
+      return text.join('');
+    },
+    codequalityStatus() {
+      return this.checkReportStatus(this.isLoadingCodequality, this.loadingCodequalityFailed);
+    },
+  },
+  methods: {
+    ...mapActions(['setPage']),
+    translateText(type) {
+      return {
+        error: sprintf(s__('ciReport|Failed to load %{reportName} report'), {
+          reportName: type,
+        }),
+        loading: sprintf(s__('ciReport|Loading %{reportName} report'), {
+          reportName: type,
+        }),
+      };
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <report-section
+      always-open
+      :status="codequalityStatus"
+      :loading-text="translateText('codeclimate').loading"
+      :error-text="translateText('codeclimate').error"
+      :success-text="codequalityText"
+      :unresolved-issues="codequalityIssues"
+      :resolved-issues="[]"
+      :has-issues="hasCodequalityIssues"
+      :component="$options.componentNames.CodequalityIssueBody"
+      class="codequality-report"
+    />
+    <pagination-links
+      :change="setPage"
+      :page-info="pageInfo"
+      class="d-flex justify-content-center prepend-top-default"
+    />
+  </div>
+</template>

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

+import axios from '~/lib/utils/axios_utils';
+import * as types from './mutation_types';
+import createFlash from '~/flash';
+import { s__ } from '~/locale';
+
+import MergeRequestStore from 'ee/vue_merge_request_widget/stores/mr_widget_store';
+
+export const setPage = ({ commit }, page) => commit(types.SET_PAGE, page);
+
+export const requestReport = ({ commit }) => commit(types.REQUEST_REPORT);
+export const receiveReportSuccess = ({ state, commit }, data) => {
+  const parsedIssues = MergeRequestStore.parseCodeclimateMetrics(data, state.blobPath);
+  commit(types.RECEIVE_REPORT_SUCCESS, parsedIssues);
+};
+export const receiveReportError = ({ commit }, error) => commit(types.RECEIVE_REPORT_ERROR, error);
+
+export const fetchReport = ({ state, dispatch }) => {
+  dispatch('requestReport');
+
+  axios
+    .get(state.endpoint)
+    .then(({ data }) => {
+      if (!state.blobPath) throw new Error();
+      dispatch('receiveReportSuccess', data);
+    })
+    .catch(error => {
+      dispatch('receiveReportError', error);
+      createFlash(s__('ciReport|There was an error fetching the codequality report.'));
+    });
+};
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};

ee/app/assets/javascripts/codequality_report/store/getters.js

+export const codequalityIssues = state => {
+  const { page, perPage } = state.pageInfo;
+  const start = (page - 1) * perPage;
+  return state.allCodequalityIssues.slice(start, start + perPage);
+};
+
+export const codequalityIssueTotal = state => state.allCodequalityIssues.length;
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};

ee/app/assets/javascripts/codequality_report/store/index.js

+import Vue from 'vue';
+import Vuex from 'vuex';
+import state from './state';
+import * as actions from './actions';
+import * as getters from './getters';
+import mutations from './mutations';
+
+Vue.use(Vuex);
+
+export default (initialState = {}) =>
+  new Vuex.Store({
+    actions,
+    getters,
+    mutations,
+    state: {
+      ...state(),
+      ...initialState,
+    },
+  });

ee/app/assets/javascripts/codequality_report/store/mutation_types.js

+export const SET_PAGE = 'SET_PAGE';
+export const REQUEST_REPORT = 'REQUEST_REPORT';
+export const RECEIVE_REPORT_SUCCESS = 'RECEIVE_REPORT_SUCCESS';
+export const RECEIVE_REPORT_ERROR = 'RECEIVE_REPORT_ERROR';

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

+import * as types from './mutation_types';
+
+export default {
+  [types.SET_PAGE](state, page) {
+    Object.assign(state, {
+      pageInfo: Object.assign(state.pageInfo, {
+        page,
+      }),
+    });
+  },
+  [types.REQUEST_REPORT](state) {
+    Object.assign(state, { isLoadingCodequality: true });
+  },
+  [types.RECEIVE_REPORT_SUCCESS](state, allCodequalityIssues) {
+    Object.assign(state, {
+      isLoadingCodequality: false,
+      allCodequalityIssues: Object.freeze(allCodequalityIssues),
+      pageInfo: Object.assign(state.pageInfo, {
+        total: allCodequalityIssues.length,
+      }),
+    });
+  },
+  [types.RECEIVE_REPORT_ERROR](state, codeQualityError) {
+    Object.assign(state, {
+      isLoadingCodequality: false,
+      allCodequalityIssues: [],
+      loadingCodequalityFailed: true,
+      codeQualityError,
+      pageInfo: Object.assign(state.pageInfo, {
+        total: 0,
+      }),
+    });
+  },
+};

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

+export default () => ({
+  endpoint: '',
+  allCodequalityIssues: [],
+  isLoadingCodequality: false,
+  loadingCodequalityFailed: false,
+  codeQualityError: null,
+  pageInfo: {
+    page: 1,
+    perPage: 25,
+    total: 0,
+  },
+});

ee/app/assets/javascripts/pages/projects/pipelines/codequality_report/index.js

+// /codequality_report is an alias for show
+import '../show/index';

ee/app/assets/javascripts/pages/projects/pipelines/show/codequality_report.js

+import Vue from 'vue';
+import CodequalityReportApp from 'ee/codequality_report/codequality_report.vue';
+import Translate from '~/vue_shared/translate';
+import createStore from 'ee/codequality_report/store';
+
+Vue.use(Translate);
+
+export default () => {
+  const tabsElement = document.querySelector('.pipelines-tabs');
+  const codequalityTab = document.getElementById('js-pipeline-codequality-report');
+
+  if (tabsElement && codequalityTab) {
+    const fetchReportAction = 'fetchReport';
+    const { codequalityReportDownloadPath, blobPath } = codequalityTab.dataset;
+    const store = createStore({ endpoint: codequalityReportDownloadPath, blobPath });
+
+    const isCodequalityTabActive = Boolean(
+      document.querySelector('.pipelines-tabs > li > a.codequality-tab.active'),
+    );
+
+    if (isCodequalityTabActive) {
+      store.dispatch(fetchReportAction);
+    } else {
+      const tabClickHandler = e => {
+        if (e.target.className === 'codequality-tab') {
+          store.dispatch(fetchReportAction);
+          tabsElement.removeEventListener('click', tabClickHandler);
+        }
+      };
+
+      tabsElement.addEventListener('click', tabClickHandler);
+    }
+
+    // eslint-disable-next-line no-new
+    new Vue({
+      el: codequalityTab,
+      components: {
+        CodequalityReportApp,
+      },
+      store,
+      render: createElement => createElement('codequality-report-app'),
+    });
+  }
+};

ee/app/assets/javascripts/pages/projects/pipelines/show/index.js

@@ -2,10 +2,12 @@ import initPipelineDetails from '~/pipelines/pipeline_details_bundle';
 import initPipelines from '~/pages/projects/pipelines/init_pipelines';
 import initSecurityReport from './security_report';
 import initLicenseReport from './license_report';
+import initCodequalityReport from './codequality_report';
 
 document.addEventListener('DOMContentLoaded', () => {
   initPipelines();
   initPipelineDetails();
   initSecurityReport();
   initLicenseReport();
+  initCodequalityReport();
 });

ee/app/controllers/ee/projects/pipelines_controller.rb

@@ -30,6 +30,10 @@ module EE
           end
         end
       end
+
+      def codequality_report
+        render_show
+      end
     end
   end
 end

ee/app/views/projects/pipelines/_tabs_content.html.haml

@@ -4,6 +4,7 @@
 - license_management_settings_path = can?(current_user, :admin_software_license_policy, project) ? license_management_settings_path(project) : nil
 - licenses_api_path = licenses_project_pipeline_path(project, pipeline) if project.feature_available?(:license_management)
 - vulnerabilities_endpoint_path = expose_path(api_v4_projects_vulnerability_findings_path(id: project.id, params: { pipeline_id: pipeline.id, scope: 'dismissed' }))
+- codequality_report_download_path = pipeline.downloadable_path_for_report_type(:codequality)
 
 - if pipeline.expose_security_dashboard?
   #js-tab-security.build-security.tab-pane
@@ -23,3 +24,8 @@
     license_management_settings_path: license_management_settings_path,
     licenses_api_path: licenses_api_path,
     can_manage_licenses: can?(current_user, :admin_software_license_policy, project).to_s } }
+
+- if codequality_report_download_path
+  #js-tab-codequality.tab-pane
+    #js-pipeline-codequality-report{ data: { codequality_report_download_path: codequality_report_download_path,
+    blob_path: project_blob_path(project, pipeline.ref) } }

ee/app/views/projects/pipelines/_tabs_holder.html.haml

@@ -11,3 +11,8 @@
     = link_to licenses_project_pipeline_path(project, pipeline), data: { target: '#js-tab-licenses', action: 'licenses', toggle: 'tab', qa_selector: 'licenses_tab' }, class: 'licenses-tab' do
       = _("Licenses")
       %span.badge.badge-pill.js-licenses-counter.hidden{ data: { qa_selector: 'licenses_counter' } }
+
+- if pipeline.downloadable_path_for_report_type(:codequality)
+  %li.js-codequality-tab-link
+    = link_to codequality_report_namespace_project_pipeline_path(project.namespace, project, pipeline), data: { target: '#js-tab-codequality', action: 'codequality_report', toggle: 'tab'}, class: 'codequality-tab' do
+      = _('Code Quality')

ee/changelogs/unreleased/mfluharty-full-codequality-report.yml

+---
+title: Add code quality tab to pipeline view
+merge_request: 21527
+author:
+type: added

ee/config/routes/project.rb

@@ -154,6 +154,7 @@ constraints(::Constraints::ProjectUrlConstrainer.new) do
         member do
           get :security
           get :licenses
+          get :codequality_report
         end
       end
 

ee/spec/frontend/codequality_report/codequality_report_spec.js

+import Vuex from 'vuex';
+import CodequalityReportApp from 'ee/codequality_report/codequality_report.vue';
+import { parsedIssues } from './mock_data';
+import { mount, createLocalVue } from '@vue/test-utils';
+
+jest.mock('~/flash');
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('Codequality report app', () => {
+  let wrapper;
+  let store;
+
+  const createComponent = (state = {}, issues = []) => {
+    store = new Vuex.Store({
+      state: {
+        pageInfo: {},
+        ...state,
+      },
+      getters: {
+        codequalityIssues: () => issues,
+        codequalityIssueTotal: () => issues.length,
+      },
+    });
+
+    wrapper = mount(CodequalityReportApp, {
+      localVue,
+      store,
+    });
+  };
+
+  const findStatus = () => wrapper.find('.js-code-text');
+  const findSuccessIcon = () => wrapper.find('.js-ci-status-icon-success');
+  const findWarningIcon = () => wrapper.find('.js-ci-status-icon-warning');
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when loading', () => {
+    beforeEach(() => {
+      createComponent({ isLoadingCodequality: true });
+    });
+
+    it('shows a loading state', () => {
+      expect(findStatus().text()).toBe('Loading codeclimate report');
+    });
+  });
+
+  describe('on error', () => {
+    beforeEach(() => {
+      createComponent({ loadingCodequalityFailed: true });
+    });
+
+    it('shows a warning icon and error message', () => {
+      expect(findWarningIcon().exists()).toBe(true);
+      expect(findStatus().text()).toBe('Failed to load codeclimate report');
+    });
+  });
+
+  describe('when there are codequality issues', () => {
+    beforeEach(() => {
+      createComponent({}, parsedIssues);
+    });
+
+    it('renders the codequality issues', () => {
+      const expectedIssueTotal = parsedIssues.length;
+
+      expect(findWarningIcon().exists()).toBe(true);
+      expect(findStatus().text()).toBe(`Found ${expectedIssueTotal} code quality issues`);
+      expect(wrapper.findAll('.report-block-list-issue').length).toBe(expectedIssueTotal);
+    });
+  });
+
+  describe('when there are no codequality issues', () => {
+    beforeEach(() => {
+      createComponent({}, []);
+    });
+
+    it('shows a message that no codequality issues were found', () => {
+      expect(findSuccessIcon().exists()).toBe(true);
+      expect(findStatus().text()).toBe('No code quality issues found');
+      expect(wrapper.findAll('.report-block-list-issue').length).toBe(0);
+    });
+  });
+});

ee/spec/frontend/codequality_report/mock_data.js

+export const unparsedIssues = [
+  {
+    type: 'issue',
+    check_name: 'similar-code',
+    description: 'Similar blocks of code found in 2 locations. Consider refactoring.',
+    categories: ['Duplication'],
+    location: {
+      path: 'ee/spec/features/admin/geo/admin_geo_projects_spec.rb',
+      lines: {
+        begin: 152,
+        end: 158,
+      },
+    },
+    remediation_points: 230000,
+    other_locations: [
+      {
+        path: 'ee/spec/features/admin/geo/admin_geo_projects_spec.rb',
+        lines: {
+          begin: 134,
+          end: 140,
+        },
+      },
+    ],
+    content: {
+      body:
+        "## Duplicated Code\n\nDuplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:\n\n> Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.\n\nWhen you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).\n\n## Tuning\n\n**This issue has a mass of 29**.\n\nWe set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.\n\nThe threshold configuration represents the minimum [mass](https://docs.codeclimate.com/docs/duplication#mass) a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.\n\nIf the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.\n\nSee [`codeclimate-duplication`'s documentation](https://docs.codeclimate.com/docs/duplication) for more information about tuning the mass threshold in your `.codeclimate.yml`.\n\n## Refactorings\n\n*   [Extract Method](http://sourcemaking.com/refactoring/extract-method)\n*   [Extract Class](http://sourcemaking.com/refactoring/extract-class)\n*   [Form Template Method](http://sourcemaking.com/refactoring/form-template-method)\n*   [Introduce Null Object](http://sourcemaking.com/refactoring/introduce-null-object)\n*   [Pull Up Method](http://sourcemaking.com/refactoring/pull-up-method)\n*   [Pull Up Field](http://sourcemaking.com/refactoring/pull-up-field)\n*   [Substitute Algorithm](http://sourcemaking.com/refactoring/substitute-algorithm)\n\n## Further Reading\n\n*   [Don't Repeat Yourself](http://c2.com/cgi/wiki?DontRepeatYourself) on the C2 Wiki\n*   [Duplicated Code](http://sourcemaking.com/refactoring/duplicated-code) on SourceMaking\n*   [Refactoring: Improving the Design of Existing Code](http://www.amazon.com/Refactoring-Improving-Design-Existing-Code/dp/0201485672) by Martin Fowler. _Duplicated Code_, p76\n",
+    },
+    fingerprint: 'eee6e62c2e1e0eaf901e747c935a7c63',
+    severity: 'minor',
+    engine_name: 'duplication',
+  },
+  {
+    type: 'issue',
+    check_name: 'similar-code',
+    description: 'Similar blocks of code found in 2 locations. Consider refactoring.',
+    categories: ['Duplication'],
+    location: {
+      path: 'ee/spec/finders/geo/lfs_object_registry_finder_spec.rb',
+      lines: {
+        begin: 491,
+        end: 497,
+      },
+    },
+    remediation_points: 230000,
+    other_locations: [
+      {
+        path: 'ee/spec/finders/geo/lfs_object_registry_finder_spec.rb',
+        lines: {
+          begin: 512,
+          end: 518,
+        },
+      },
+    ],
+    content: {
+      body:
+        "## Duplicated Code\n\nDuplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:\n\n> Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.\n\nWhen you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).\n\n## Tuning\n\n**This issue has a mass of 29**.\n\nWe set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.\n\nThe threshold configuration represents the minimum [mass](https://docs.codeclimate.com/docs/duplication#mass) a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.\n\nIf the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.\n\nSee [`codeclimate-duplication`'s documentation](https://docs.codeclimate.com/docs/duplication) for more information about tuning the mass threshold in your `.codeclimate.yml`.\n\n## Refactorings\n\n*   [Extract Method](http://sourcemaking.com/refactoring/extract-method)\n*   [Extract Class](http://sourcemaking.com/refactoring/extract-class)\n*   [Form Template Method](http://sourcemaking.com/refactoring/form-template-method)\n*   [Introduce Null Object](http://sourcemaking.com/refactoring/introduce-null-object)\n*   [Pull Up Method](http://sourcemaking.com/refactoring/pull-up-method)\n*   [Pull Up Field](http://sourcemaking.com/refactoring/pull-up-field)\n*   [Substitute Algorithm](http://sourcemaking.com/refactoring/substitute-algorithm)\n\n## Further Reading\n\n*   [Don't Repeat Yourself](http://c2.com/cgi/wiki?DontRepeatYourself) on the C2 Wiki\n*   [Duplicated Code](http://sourcemaking.com/refactoring/duplicated-code) on SourceMaking\n*   [Refactoring: Improving the Design of Existing Code](http://www.amazon.com/Refactoring-Improving-Design-Existing-Code/dp/0201485672) by Martin Fowler. _Duplicated Code_, p76\n",
+    },
+    fingerprint: '60d0dd59a1cd7e6da18fdeb6c7fdd17f',
+    severity: 'minor',
+    engine_name: 'duplication',
+  },
+  {
+    type: 'issue',
+    check_name: 'similar-code',
+    description: 'Similar blocks of code found in 2 locations. Consider refactoring.',
+    categories: ['Duplication'],
+    location: {
+      path: 'ee/spec/finders/geo/lfs_object_registry_finder_spec.rb',
+      lines: {
+        begin: 512,
+        end: 518,
+      },
+    },
+    remediation_points: 230000,
+    other_locations: [
+      {
+        path: 'ee/spec/finders/geo/lfs_object_registry_finder_spec.rb',
+        lines: {
+          begin: 491,
+          end: 497,
+        },
+      },
+    ],
+    content: {
+      body:
+        "## Duplicated Code\n\nDuplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:\n\n> Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.\n\nWhen you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).\n\n## Tuning\n\n**This issue has a mass of 29**.\n\nWe set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.\n\nThe threshold configuration represents the minimum [mass](https://docs.codeclimate.com/docs/duplication#mass) a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.\n\nIf the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.\n\nSee [`codeclimate-duplication`'s documentation](https://docs.codeclimate.com/docs/duplication) for more information about tuning the mass threshold in your `.codeclimate.yml`.\n\n## Refactorings\n\n*   [Extract Method](http://sourcemaking.com/refactoring/extract-method)\n*   [Extract Class](http://sourcemaking.com/refactoring/extract-class)\n*   [Form Template Method](http://sourcemaking.com/refactoring/form-template-method)\n*   [Introduce Null Object](http://sourcemaking.com/refactoring/introduce-null-object)\n*   [Pull Up Method](http://sourcemaking.com/refactoring/pull-up-method)\n*   [Pull Up Field](http://sourcemaking.com/refactoring/pull-up-field)\n*   [Substitute Algorithm](http://sourcemaking.com/refactoring/substitute-algorithm)\n\n## Further Reading\n\n*   [Don't Repeat Yourself](http://c2.com/cgi/wiki?DontRepeatYourself) on the C2 Wiki\n*   [Duplicated Code](http://sourcemaking.com/refactoring/duplicated-code) on SourceMaking\n*   [Refactoring: Improving the Design of Existing Code](http://www.amazon.com/Refactoring-Improving-Design-Existing-Code/dp/0201485672) by Martin Fowler. _Duplicated Code_, p76\n",
+    },
+    fingerprint: '60d0dd59a1cd7e6da18fdeb6c7fdd17f',
+    severity: 'minor',
+    engine_name: 'duplication',
+  },
+];
+
+export const parsedIssues = [
+  {
+    type: 'issue',
+    check_name: 'similar-code',
+    description: 'Similar blocks of code found in 2 locations. Consider refactoring.',
+    categories: ['Duplication'],
+    location: {
+      path: 'ee/spec/features/admin/geo/admin_geo_projects_spec.rb',
+      lines: { begin: 152, end: 158 },
+    },
+    remediation_points: 230000,
+    other_locations: [
+      {
+        path: 'ee/spec/features/admin/geo/admin_geo_projects_spec.rb',
+        lines: { begin: 134, end: 140 },
+      },
+    ],
+    content: {
+      body:
+        "## Duplicated Code\n\nDuplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:\n\n> Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.\n\nWhen you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).\n\n## Tuning\n\n**This issue has a mass of 29**.\n\nWe set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.\n\nThe threshold configuration represents the minimum [mass](https://docs.codeclimate.com/docs/duplication#mass) a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.\n\nIf the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.\n\nSee [`codeclimate-duplication`'s documentation](https://docs.codeclimate.com/docs/duplication) for more information about tuning the mass threshold in your `.codeclimate.yml`.\n\n## Refactorings\n\n*   [Extract Method](http://sourcemaking.com/refactoring/extract-method)\n*   [Extract Class](http://sourcemaking.com/refactoring/extract-class)\n*   [Form Template Method](http://sourcemaking.com/refactoring/form-template-method)\n*   [Introduce Null Object](http://sourcemaking.com/refactoring/introduce-null-object)\n*   [Pull Up Method](http://sourcemaking.com/refactoring/pull-up-method)\n*   [Pull Up Field](http://sourcemaking.com/refactoring/pull-up-field)\n*   [Substitute Algorithm](http://sourcemaking.com/refactoring/substitute-algorithm)\n\n## Further Reading\n\n*   [Don't Repeat Yourself](http://c2.com/cgi/wiki?DontRepeatYourself) on the C2 Wiki\n*   [Duplicated Code](http://sourcemaking.com/refactoring/duplicated-code) on SourceMaking\n*   [Refactoring: Improving the Design of Existing Code](http://www.amazon.com/Refactoring-Improving-Design-Existing-Code/dp/0201485672) by Martin Fowler. _Duplicated Code_, p76\n",
+    },
+    fingerprint: 'eee6e62c2e1e0eaf901e747c935a7c63',
+    severity: 'minor',
+    engine_name: 'duplication',
+    name: 'Similar blocks of code found in 2 locations. Consider refactoring.',
+    path: 'ee/spec/features/admin/geo/admin_geo_projects_spec.rb',
+    line: 152,
+    urlPath:
+      '/root/test-codequality/blob/feature-branch/ee/spec/features/admin/geo/admin_geo_projects_spec.rb#L152',
+  },
+  {
+    type: 'issue',
+    check_name: 'similar-code',
+    description: 'Similar blocks of code found in 2 locations. Consider refactoring.',
+    categories: ['Duplication'],
+    location: {
+      path: 'ee/spec/finders/geo/lfs_object_registry_finder_spec.rb',
+      lines: { begin: 491, end: 497 },
+    },
+    remediation_points: 230000,
+    other_locations: [
+      {
+        path: 'ee/spec/finders/geo/lfs_object_registry_finder_spec.rb',
+        lines: { begin: 512, end: 518 },
+      },
+    ],
+    content: {
+      body:
+        "## Duplicated Code\n\nDuplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:\n\n> Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.\n\nWhen you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).\n\n## Tuning\n\n**This issue has a mass of 29**.\n\nWe set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.\n\nThe threshold configuration represents the minimum [mass](https://docs.codeclimate.com/docs/duplication#mass) a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.\n\nIf the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.\n\nSee [`codeclimate-duplication`'s documentation](https://docs.codeclimate.com/docs/duplication) for more information about tuning the mass threshold in your `.codeclimate.yml`.\n\n## Refactorings\n\n*   [Extract Method](http://sourcemaking.com/refactoring/extract-method)\n*   [Extract Class](http://sourcemaking.com/refactoring/extract-class)\n*   [Form Template Method](http://sourcemaking.com/refactoring/form-template-method)\n*   [Introduce Null Object](http://sourcemaking.com/refactoring/introduce-null-object)\n*   [Pull Up Method](http://sourcemaking.com/refactoring/pull-up-method)\n*   [Pull Up Field](http://sourcemaking.com/refactoring/pull-up-field)\n*   [Substitute Algorithm](http://sourcemaking.com/refactoring/substitute-algorithm)\n\n## Further Reading\n\n*   [Don't Repeat Yourself](http://c2.com/cgi/wiki?DontRepeatYourself) on the C2 Wiki\n*   [Duplicated Code](http://sourcemaking.com/refactoring/duplicated-code) on SourceMaking\n*   [Refactoring: Improving the Design of Existing Code](http://www.amazon.com/Refactoring-Improving-Design-Existing-Code/dp/0201485672) by Martin Fowler. _Duplicated Code_, p76\n",
+    },
+    fingerprint: '60d0dd59a1cd7e6da18fdeb6c7fdd17f',
+    severity: 'minor',
+    engine_name: 'duplication',
+    name: 'Similar blocks of code found in 2 locations. Consider refactoring.',
+    path: 'ee/spec/finders/geo/lfs_object_registry_finder_spec.rb',
+    line: 491,
+    urlPath:
+      '/root/test-codequality/blob/feature-branch/ee/spec/finders/geo/lfs_object_registry_finder_spec.rb#L491',
+  },
+  {
+    type: 'issue',
+    check_name: 'similar-code',
+    description: 'Similar blocks of code found in 2 locations. Consider refactoring.',
+    categories: ['Duplication'],
+    location: {
+      path: 'ee/spec/finders/geo/lfs_object_registry_finder_spec.rb',
+      lines: { begin: 512, end: 518 },
+    },
+    remediation_points: 230000,
+    other_locations: [
+      {
+        path: 'ee/spec/finders/geo/lfs_object_registry_finder_spec.rb',
+        lines: { begin: 491, end: 497 },
+      },
+    ],
+    content: {
+      body:
+        "## Duplicated Code\n\nDuplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:\n\n> Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.\n\nWhen you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).\n\n## Tuning\n\n**This issue has a mass of 29**.\n\nWe set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.\n\nThe threshold configuration represents the minimum [mass](https://docs.codeclimate.com/docs/duplication#mass) a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.\n\nIf the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.\n\nSee [`codeclimate-duplication`'s documentation](https://docs.codeclimate.com/docs/duplication) for more information about tuning the mass threshold in your `.codeclimate.yml`.\n\n## Refactorings\n\n*   [Extract Method](http://sourcemaking.com/refactoring/extract-method)\n*   [Extract Class](http://sourcemaking.com/refactoring/extract-class)\n*   [Form Template Method](http://sourcemaking.com/refactoring/form-template-method)\n*   [Introduce Null Object](http://sourcemaking.com/refactoring/introduce-null-object)\n*   [Pull Up Method](http://sourcemaking.com/refactoring/pull-up-method)\n*   [Pull Up Field](http://sourcemaking.com/refactoring/pull-up-field)\n*   [Substitute Algorithm](http://sourcemaking.com/refactoring/substitute-algorithm)\n\n## Further Reading\n\n*   [Don't Repeat Yourself](http://c2.com/cgi/wiki?DontRepeatYourself) on the C2 Wiki\n*   [Duplicated Code](http://sourcemaking.com/refactoring/duplicated-code) on SourceMaking\n*   [Refactoring: Improving the Design of Existing Code](http://www.amazon.com/Refactoring-Improving-Design-Existing-Code/dp/0201485672) by Martin Fowler. _Duplicated Code_, p76\n",
+    },
+    fingerprint: '60d0dd59a1cd7e6da18fdeb6c7fdd17f',
+    severity: 'minor',
+    engine_name: 'duplication',
+    name: 'Similar blocks of code found in 2 locations. Consider refactoring.',
+    path: 'ee/spec/finders/geo/lfs_object_registry_finder_spec.rb',
+    line: 512,
+    urlPath:
+      '/root/test-codequality/blob/feature-branch/ee/spec/finders/geo/lfs_object_registry_finder_spec.rb#L512',
+  },
+];

ee/spec/frontend/codequality_report/store/actions_spec.js

+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import * as actions from 'ee/codequality_report/store/actions';
+import * as types from 'ee/codequality_report/store/mutation_types';
+import { TEST_HOST } from 'helpers/test_constants';
+import testAction from 'helpers/vuex_action_helper';
+import createFlash from '~/flash';
+import { unparsedIssues, parsedIssues } from '../mock_data';
+
+jest.mock('~/flash');
+
+describe('Codequality report actions', () => {
+  let mock;
+  let state;
+
+  const endpoint = `${TEST_HOST}/codequality_report.json`;
+  const defaultState = {
+    endpoint,
+  };
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+    state = defaultState;
+  });
+
+  afterEach(() => {
+    mock.restore();
+  });
+
+  describe('setPage', () => {
+    it('sets the page number', done => {
+      testAction(actions.setPage, 12, state, [{ type: types.SET_PAGE, payload: 12 }], [], done);
+    });
+  });
+
+  describe('requestReport', () => {
+    it('sets the loading flag', done => {
+      testAction(actions.requestReport, null, state, [{ type: types.REQUEST_REPORT }], [], done);
+    });
+  });
+
+  describe('receiveReportSuccess', () => {
+    it('parses the list of issues from the report', done => {
+      testAction(
+        actions.receiveReportSuccess,
+        unparsedIssues,
+        { blobPath: '/root/test-codequality/blob/feature-branch', ...state },
+        [{ type: types.RECEIVE_REPORT_SUCCESS, payload: parsedIssues }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('receiveReportError', () => {
+    it('accepts a report error', done => {
+      testAction(
+        actions.receiveReportError,
+        'error',
+        state,
+        [{ type: types.RECEIVE_REPORT_ERROR, payload: 'error' }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('fetchReport', () => {
+    beforeEach(() => {
+      mock.onGet(endpoint).replyOnce(200, unparsedIssues);
+    });
+
+    it('fetches the report', done => {
+      testAction(
+        actions.fetchReport,
+        null,
+        { blobPath: 'blah', ...state },
+        [],
+        [{ type: 'requestReport' }, { type: 'receiveReportSuccess', payload: unparsedIssues }],
+        done,
+      );
+    });
+
+    it('shows a flash message when there is an error', done => {
+      testAction(
+        actions.fetchReport,
+        'error',
+        state,
+        [],
+        [{ type: 'requestReport' }, { type: 'receiveReportError', payload: new Error() }],
+        () => {
+          expect(createFlash).toHaveBeenCalledWith(
+            'There was an error fetching the codequality report.',
+          );
+          done();
+        },
+      );
+    });
+
+    it('shows an error when blob path is missing', done => {
+      testAction(
+        actions.fetchReport,
+        null,
+        state,
+        [],
+        [{ type: 'requestReport' }, { type: 'receiveReportError', payload: new Error() }],
+        () => {
+          expect(createFlash).toHaveBeenCalledWith(
+            'There was an error fetching the codequality report.',
+          );
+          done();
+        },
+      );
+    });
+  });
+});

ee/spec/frontend/codequality_report/store/getters_spec.js

+import * as getters from 'ee/codequality_report/store/getters';
+import { parsedIssues } from '../mock_data';
+
+describe('Codequality report getters', () => {
+  let state;
+
+  const defaultState = {
+    allCodequalityIssues: parsedIssues,
+  };
+
+  beforeEach(() => {
+    state = defaultState;
+  });
+
+  describe('codequalityIssues', () => {
+    it('gets the current page of issues', () => {
+      expect(
+        getters.codequalityIssues({ pageInfo: { page: 1, perPage: 2, total: 3 }, ...state }),
+      ).toEqual(parsedIssues.slice(0, 2));
+      expect(
+        getters.codequalityIssues({ pageInfo: { page: 2, perPage: 2, total: 3 }, ...state }),
+      ).toEqual(parsedIssues.slice(2, 3));
+    });
+  });
+
+  describe('codequalityIssueTotal', () => {
+    it('gets the total number of codequality issues', () => {
+      expect(getters.codequalityIssueTotal(state)).toBe(parsedIssues.length);
+    });
+  });
+});

ee/spec/frontend/codequality_report/store/mutations_spec.js

+import * as types from 'ee/codequality_report/store/mutation_types';
+import mutations from 'ee/codequality_report/store/mutations';
+import { parsedIssues } from '../mock_data';
+
+describe('Codequality report mutations', () => {
+  let state;
+
+  const defaultState = {
+    pageInfo: {},
+  };
+
+  beforeEach(() => {
+    state = defaultState;
+  });
+
+  describe('set page', () => {
+    it('should set page', () => {
+      mutations[types.SET_PAGE](state, 4);
+      expect(state.pageInfo.page).toBe(4);
+    });
+  });
+
+  describe('request report', () => {
+    it('should set the loading flag', () => {
+      mutations[types.REQUEST_REPORT](state);
+      expect(state.isLoadingCodequality).toBe(true);
+    });
+  });
+
+  describe('receive report success', () => {
+    it('should set issue info and clear the loading flag', () => {
+      mutations[types.RECEIVE_REPORT_SUCCESS](state, parsedIssues);
+
+      expect(state.isLoadingCodequality).toBe(false);
+      expect(state.allCodequalityIssues).toBe(parsedIssues);
+      expect(state.pageInfo.total).toBe(parsedIssues.length);
+    });
+  });
+
+  describe('receive report error', () => {
+    it('should set error info and clear the loading flag', () => {
+      mutations[types.RECEIVE_REPORT_ERROR](state, new Error());
+
+      expect(state.isLoadingCodequality).toBe(false);
+      expect(state.loadingCodequalityFailed).toBe(true);
+      expect(state.allCodequalityIssues).toEqual([]);
+      expect(state.codeQualityError).toEqual(new Error());
+      expect(state.pageInfo.total).toBe(0);
+    });
+  });
+});

locale/gitlab.pot

@@ -68,6 +68,11 @@ msgstr ""
 msgid "\"%{path}\" did not exist on \"%{ref}\""
 msgstr ""
 
+msgid "%d code quality issue"
+msgid_plural "%d code quality issues"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "%d comment"
 msgid_plural "%d comments"
 msgstr[0] ""
@@ -4853,6 +4858,9 @@ msgstr ""
 msgid "Code Owners to the merge request changes."
 msgstr ""
 
+msgid "Code Quality"
+msgstr ""
+
 msgid "Code Review"
 msgstr ""
 
@@ -23188,6 +23196,9 @@ msgstr ""
 msgid "ciReport|Fixed:"
 msgstr ""
 
+msgid "ciReport|Found %{issuesWithCount}"
+msgstr ""
+
 msgid "ciReport|Investigate this vulnerability by creating an issue"
 msgstr ""
 
@@ -23206,6 +23217,9 @@ msgstr ""
 msgid "ciReport|No changes to performance metrics"
 msgstr ""
 
+msgid "ciReport|No code quality issues found"
+msgstr ""
+
 msgid "ciReport|Performance metrics"
 msgstr ""
 
@@ -23236,6 +23250,9 @@ msgstr ""
 msgid "ciReport|There was an error dismissing the vulnerability. Please try again."
 msgstr ""
 
+msgid "ciReport|There was an error fetching the codequality report."
+msgstr ""
+
 msgid "ciReport|There was an error reverting the dismissal. Please try again."
 msgstr ""