Skip to content

Update frontend to use code quality refactor changes

This is a ~backstage issue that was scoped of from https://gitlab.com/gitlab-org/gitlab-ee/issues/7125, as that was only going to be a back-end refactor. This issue tackles the UX and FE part of that backend refactor: https://gitlab.com/gitlab-org/gitlab-ee/issues/7125#note_94712866 (UI representation of code quality within the mr widget), whereas https://gitlab.com/gitlab-org/gitlab-ee/issues/2526 is a product vision feature that is built on top of this refactor and tackles only displaying code quality remarks inside diffs.

Problem/Potential value

  • Code quality may or may not be grouped with unit tests
  • Supporting multiple code quality libraries (such as GOFMT) and exposing these in the UI

Proposal

initial 2 proposal

Grouped together with the unit tests

  • Refactor code quality under “test summary” (follow similar data and UI pattern)
  • Rename “Test summary” to “Code verification summary”
  • Summary copy accommodates for more than just JUnit tests now, by showing inline mini summaries
  • Modal includes:
    • file/code line ref
    • description
    • description url ref
    • Create issue

mr-widget_copy

mr-widget

modal

Show code quality a separate section that is also expandable

  • Refactor code quality similar to “test summary” but keeps it separate. (Subsections such as gofmt are now shown)
  • Keeping a lot of the current copy the same as it is now.
  • Modal includes:
    • file/code line ref
    • description
    • description url ref
    • Create issue

mr-widget_copy

mr-widget

modal

Solution

This is actually the same steps when we worked on the JUnit test report. We extend code_quality keyword in gitlab-ci.yml, implement the parser for the code quality JSON (i.e. Code Climate's JSON), and present it to Frontend.

Expected tasks:

  1. Extend code_quality keyword in gitlab-ci.yml. We don't need to change GitLab-runner because It's already supported multiple artifacts.

  2. Persist code_quality artifacts. We just add code_quality to enum file_type. Also, we need to adjust scope :with_test_reports and erase_test_reports! for the new kind of report-type artifacts.

  3. Implement Parser::CodeQuality to parse the Code Climate JSON. This is a totally new implementation, thus it would be harder than other tasks. After we parsed, we put the results into existing Reports::TestReports structure, which means we don't need to do anything for upstream functions. We need to extend file_location params for the code quality specific attributes.

  4. Introduce the new API merge_requests/*/code_quality. Add expose :code_quality_path in merge_request_widget_entity.rb. It's exactly the same convention as the test report.

  5. FE re-use the existing logic of JUnit test report since the presented results are the same convention with it. It's already sub-grouped by job name.

  6. https://gitlab.com/gitlab-org/gitlab-ce/issues/51006 for showing Create Issue button

  7. Docs change as usual

  8. Announce the deprecation of [the old code quality integration]((https://docs.gitlab.com/ee/user/project/merge_requests/code_quality.html). We also don't touch it until 12.0 when we remove the feature.

Show code quality a separate section that is also expandable

  • Refactor code quality similar to “test summary” but keeps it separate. (Subsections such as gofmt are now shown)
  • Keeping a lot of the current copy the same as it is now.
  • Modal includes:
    • file/code line ref
    • description
    • description url ref
    • Create issue

mr-widget_copy

mr-widget

modal

Edited by Jason Yavorsky