Iteration 1: [Frontend Issue] Follow up: Add Diff component with highlighted findings to Drawer
This issue is a follow-up from !114649 (merged).
The CodeQuality findings drawer needs to be improved with a diff-component that highlights the findings.
Example |
---|
relevant UX Screens:
- #388258 (closed)Code_quality_-inline_findings-expanded-_cq_detail_drawer.png
Implementation Plan
- Present
location
Object from CodeQuality artifact in FindingsDrawer matching the UX-Design above - There is no pre-existing GitLab UI component we can use to fulfill the UX-requirements that I'm aware of. The design is based on the repository file view, so it is a good idea to check the implementation to see if we can reuse some components from there.
Screenshot of repository file view |
---|
Patch to mock missing BE implementation (Dummy Data)
diff --git a/ee/app/assets/javascripts/diffs/store/actions.js b/ee/app/assets/javascripts/diffs/store/actions.js
index adb6b16a13f8..e728a29f4416 100644
--- a/ee/app/assets/javascripts/diffs/store/actions.js
+++ b/ee/app/assets/javascripts/diffs/store/actions.js
@@ -40,6 +40,29 @@ export const fetchCodequality = ({ commit, state, dispatch }) => {
successCallback: ({ status, data }) => {
retryCount = 0;
if (status === HTTP_STATUS_OK) {
+ const keys = Object.keys(data.files);
+
+ keys.forEach((key, index) => {
+ data['files'][key].map((e) => {
+ e['engineName'] = 'testengine name';
+ e['categories'] = ['testcategory 1', 'testcategory 2'];
+ e['content'] = {
+ body: `<h2>Duplicated Code</h2>Duplicated code can lead to software that is hard to understand and difficultto change. The Don't Repeat Yourself (DRY) principlestates: Everypiece of knowledge must have a single, unambiguous,authoritative representationwithin a system.When you violate DRY, bugs andmaintenance problems are sureto follow. Duplicated code has a tendency to bothcontinue to replicate and alsoto diverge (leaving bugs as two similarimplementations differ in subtleways).<h2>Tuning</h2><strong>This issue has a mass of 45</strong>.We setuseful threshold defaults for the languages we support but you maywant to adjustthese settings based on your project guidelines.The thresholdconfigurationrepresents the minimum<a href="https://docs.codeclimate.com/docs/duplication#mass" >mass</a>a codeblock must have to be analyzed for duplication. The lower the threshold,themore fine-grained the comparison.If the engine is too easilyreportingduplication, try raising the threshold. If you suspect that the engineisn'tcatching enough duplication, try lowering the threshold. The bestsetting tendsto differ from language to language.See<a href="https://docs.codeclimate.com/docs/duplication" ><code>codeclimate-duplication</code>'s documentation</a>for more information about tuning the mass threshold inyour<code>.codeclimate.yml</code>.## Refactorings<em> <a href="http://sourcemaking.com/refactoring/extract-method">Extract Method</a ></em><a href="http://sourcemaking.com/refactoring/extract-class">Extract Class</a><em> <a href="http://sourcemaking.com/refactoring/form-template-method" >Form Template Method</a ></em><a href="http://sourcemaking.com/refactoring/introduce-null-object" >Introduce Null Object</a><em> <a href="http://sourcemaking.com/refactoring/pull-up-method">Pull Up Method</a ></em><a href="http://sourcemaking.com/refactoring/pull-up-field">Pull Up Field</a><em> <a href="http://sourcemaking.com/refactoring/substitute-algorithm" >Substitute Algorithm</a ></em><h2>Further Reading</h2><a href="http://c2.com/cgi/wiki?DontRepeatYourself" >Don't Repeat Yourself</a>on the C2 Wiki<em> <a href="http://sourcemaking.com/refactoring/duplicated-code" >Duplicated Code</a > on SourceMaking</em><a href="http://www.amazon.com/Refactoring-Improving-Design-Existing-Code/dp/0201485672" >Refactoring: Improving the Design of Existing Code</a>by Martin Fowler. <em>Duplicated Code</em>`,
+ };
+ e['location'] = {
+ path: 'workhorse/config_test.go',
+ lines: { begin: 221, end: 284 },
+ };
+ e['otherLocations'] = [
+ { path: 'testpath', href: 'http://testlink.com' },
+ { path: 'testpath 1', href: 'http://testlink.com' },
+ { path: 'testpath2', href: 'http://testlink.com' },
+ ];
+ e['type'] = 'issue';
+ return e;
+ });
+ });
+
commit(types.SET_CODEQUALITY_DATA, data);
dispatch('stopCodequalityPolling');
Edited by Jannik Lehmann