Skip to content

Add Drawer from CodeQuality Inline-diff findings

Jannik Lehmann requested to merge jnnkl-codequality-inline-drawer into master

What does this MR do and why?

This MR is meant to solve: #393046 (closed)

  • Introducing the new code_quality_inline_drawer feature flag
  • Creating a shareable findings-drawer component
  • Adding the logic to open it from the CodeQuality Inline Diffs

However, this MR is currently blocked by a missing feature (#393045 (closed)). For efficiency purposes, the BE response was mocked, and all data shown in the example is fake data from the attached patch. Despite this setback, we should still proceed with reviewing and merging this MR because all changes are hidden behind the flag introduced by this MR.

Patch to mock BE response

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');

Screenshots or screen recordings

With code_quality_inline_drawer flag off:

no visual changes
Screenshot_2023-03-23_at_15.18.10

With code_quality_inline_drawer flag on:

before after
Screenshot_2023-03-17_at_12.50.37 Screenshot_2023-03-14_at_21.57.39
Demo Video
2023-03-17_12-36-10

Follow up Issue for Diff Component: #399910 (closed)

How to set up and validate locally

  1. Enable the code_quality_inline_drawer feature flag.
  2. Clone this project or any project with codequality enabled.
  3. Recreate this MR or any other change that introduces a deterioration to codequality in the diff.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Jannik Lehmann

Merge request reports