Add Slideshow for SAST and CodeQuality Inline Findings

What does this MR do and why?

This MR adds prev and next button to findings Drawer to slide through multiple Line findings on Inline Findings.

Issue: #417033 (closed)

Screenshots or screen recordings

Before
single-finding_before

Single Finding	multiple findings same type	multiple findings different type
single-finding_before	multiple_findings_same_type	2023-12-11_18-39-06

How to set up and validate locally

1. Enable sast_reports_in_inline_diff
2. Make sure your running an ultimate license or your GDK (how to)
3. Clone this repo: https://gitlab.com/jannik_lehmann/cq-and-sast-test
4. Recreate this MR for SAST & CodeQuality findings: jannik_lehmann/cq-and-sast-test!6 (diffs)
5. Let the pipeline finish and the go checkout the diff page.
6. Apply the patch below to mock multiple findings of different types on the same line

diff --git a/ee/app/assets/javascripts/diffs/components/inline_findings_gutter_icon_dropdown.vue b/ee/app/assets/javascripts/diffs/components/inline_findings_gutter_icon_dropdown.vue
index d5d9d58fdf29..542b0694a4d9 100644
--- a/ee/app/assets/javascripts/diffs/components/inline_findings_gutter_icon_dropdown.vue
+++ b/ee/app/assets/javascripts/diffs/components/inline_findings_gutter_icon_dropdown.vue
@@ -62,6 +62,128 @@ export default {
     groupedFindings() {
       const groupedFindings = [];
 
+
+      this.sast = [
+        {
+          line: 1,
+          description: 'Fake SAST finding 1',
+          severity: 'medium',
+          location: {
+            __typename: 'VulnerabilityLocationSast',
+            file: 'index.js',
+            startLine: '1',
+            endLine: null,
+            vulnerableClass: null,
+            vulnerableMethod: null,
+            blobPath:
+              '/root/another-sast/-/blob/46d73589438a1f972b57cdecc4e4ac8607bb8816/index.js#L1',
+          },
+          foundByPipelineIid: '2',
+          identifiers: [
+            {
+              __typename: 'VulnerabilityIdentifier',
+              externalId: 'eslint.detect-disable-mustache-escape',
+              externalType: 'semgrep_id',
+              name: 'eslint.detect-disable-mustache-escape',
+              url: 'https://semgrep.dev/r/gitlab.eslint.detect-disable-mustache-escape',
+            },
+            {
+              __typename: 'VulnerabilityIdentifier',
+              externalId: '79',
+              externalType: 'cwe',
+              name: 'CWE-79',
+              url: 'https://cwe.mitre.org/data/definitions/79.html',
+            },
+            {
+              __typename: 'VulnerabilityIdentifier',
+              externalId: 'A7:2017',
+              externalType: 'owasp',
+              name: 'A7:2017 - Cross-Site Scripting (XSS)',
+              url: null,
+            },
+            {
+              __typename: 'VulnerabilityIdentifier',
+              externalId: 'detect-disable-mustache-escape',
+              externalType: 'eslint_rule_id',
+              name: 'ESLint rule ID/detect-disable-mustache-escape',
+              url: null,
+            },
+          ],
+          state: 'detected',
+          title: 'Improper neutralization of input during web page generation (XSS)',
+        },
+        {
+          line: 1,
+          description: 'Fake SAST Finding 2\n',
+          severity: 'medium',
+          location: {
+            __typename: 'VulnerabilityLocationSast',
+            file: 'index.js',
+            startLine: '1',
+            endLine: null,
+            vulnerableClass: null,
+            vulnerableMethod: null,
+            blobPath:
+              '/root/another-sast/-/blob/46d73589438a1f972b57cdecc4e4ac8607bb8816/index.js#L1',
+          },
+          foundByPipelineIid: '2',
+          identifiers: [
+            {
+              __typename: 'VulnerabilityIdentifier',
+              externalId: 'eslint.detect-disable-mustache-escape',
+              externalType: 'semgrep_id',
+              name: 'eslint.detect-disable-mustache-escape',
+              url: 'https://semgrep.dev/r/gitlab.eslint.detect-disable-mustache-escape',
+            },
+            {
+              __typename: 'VulnerabilityIdentifier',
+              externalId: '79',
+              externalType: 'cwe',
+              name: 'CWE-79',
+              url: 'https://cwe.mitre.org/data/definitions/79.html',
+            },
+            {
+              __typename: 'VulnerabilityIdentifier',
+              externalId: 'A7:2017',
+              externalType: 'owasp',
+              name: 'A7:2017 - Cross-Site Scripting (XSS)',
+              url: null,
+            },
+            {
+              __typename: 'VulnerabilityIdentifier',
+              externalId: 'detect-disable-mustache-escape',
+              externalType: 'eslint_rule_id',
+              name: 'ESLint rule ID/detect-disable-mustache-escape',
+              url: null,
+            },
+          ],
+          state: 'detected',
+          title: 'Improper neutralization of input during web page generation (XSS)',
+        },
+      ];
+
+      this.codeQuality = [
+        {
+          line: 1,
+          description: 'FAKE CQ Finding 1',
+          severity: 'minor',
+          filePath: 'index.js',
+          webUrl:
+            'http://gdk.test:3000/root/sast-and-cq/-/blob/4d4a7a15c0e28fc11d31a91d115ed1de1d5c82be/noise.rb#L4',
+          engineName: 'rubocop',
+        },
+        {
+          line: 1,
+          description: 'FAKE CQ Finding 2',
+          severity: 'minor',
+          filePath: 'index.js',
+          webUrl:
+            'http://gdk.test:3000/root/sast-and-cq/-/blob/4d4a7a15c0e28fc11d31a91d115ed1de1d5c82be/noise.rb#L4',
+          engineName: 'rubocop',
+        },
+      ];
+
+
       if (this.codeQuality.length > 0) {
         groupedFindings.push({
           name: codeQualityGroupHeading(this.codeQuality),

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.