Draft: Add Diff component to CodeQuality findings Drawer

What does this MR do and why?

Solves: #399910 (closed)

It adds a component displaying the relevant source code to the CodeQuality Findings Drawer. This feature is currently behind a flag and blocked by the missing Backend Implementation, to reproduce use the attached patch.

Screenshots or screen recordings

Screenshot

How to set up and validate locally

Patch for mocked data:

diff --git a/ee/app/assets/javascripts/diffs/store/actions.js b/ee/app/assets/javascripts/diffs/store/actions.js
index adb6b16a13f8..fa6f12e73ca9 100644
--- a/ee/app/assets/javascripts/diffs/store/actions.js
+++ b/ee/app/assets/javascripts/diffs/store/actions.js
@@ -40,6 +40,69 @@ 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) => {
+            // codeclimate
+            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';
+            // everything below is not part of the code-climate report and needs to be computed in the BE
+            e['blob'] = {
+              __typename: 'SnippetBlob',
+              binary: false,
+              name: 'snippetfile1.txt',
+              path: 'snippetfile1.txt',
+              rawPath: '/-/snippets/21/raw/main/snippetfile1.txt',
+              size: 4,
+              externalStorage: null,
+              renderedAsText: true,
+              simpleViewer: {
+                __typename: 'SnippetBlobViewer',
+                collapsed: false,
+                renderError: null,
+                tooLarge: false,
+                type: 'simple',
+                fileType: 'text',
+              },
+              richViewer: null,
+            };
+            e['activeViewer'] = {
+              __typename: 'SnippetBlobViewer',
+              collapsed: false,
+              renderError: null,
+              tooLarge: false,
+              type: 'simple',
+              fileType: 'text',
+            };
+            e[
+              'blobContent'
+            ] = `<span id="LC1" class="line" lang="plaintext">function init() {</span> <span id="LC2" class="line" lang="plaintext">    debugger;</span>
+            <span id="LC3" class="line" lang="plaintext">    let x = 5;</span>
+            <span id="LC4" class="line" lang="plaintext">    return what;</span>
+            <span id="LC5" class="line" lang="plaintext">    let y = 2;</span>
+            <span id="LC6" class="line" lang="plaintext"></span>
+            <span id="LC7" class="line" lang="plaintext">    return x*y;</span>
+            <span id="LC8" class="line" lang="plaintext">}</span>
+            <span id="LC9" class="line" lang="plaintext"></span>
+            <span id="LC10" class="line" lang="plaintext">init();</span>`;
+            return e;
+          });
+        });
+
         commit(types.SET_CODEQUALITY_DATA, data);
 
         dispatch('stopCodequalityPolling');

1. apply patch
2. Enable the code_quality_inline_drawer feature flag.
3. Clone this project or any project with codequality enabled.
4. 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.

• I have evaluated the MR acceptance checklist for this MR.