Add the right side of 'code flow' that including code viewer

What does this MR do and why?

Add the right side of 'code flow' that including code viewer

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before	After
Screen_Recording_2024-06-10_at_15.43.33	Screen_Recording_2024-07-07_at_14.45.03

How to set up and validate locally

1. Upload a GitLab Ultimate license
2. Enable the feature flag (echo "Feature.enable(:vulnerability_code_flow)" | rails c)
3. Clone the code flow project and run his pipeline to display vulnerabilities
4. Navigate to the project => Secure => Vulnerability report => Select the first vulnerability to navigate to the vulnerability details page
5. Apply the following patch to show the new features

Patch

diff --git a/ee/app/assets/javascripts/vulnerabilities/components/vulnerability.vue b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability.vue
index ca4110274476..319e8f7180ae 100644
--- a/ee/app/assets/javascripts/vulnerabilities/components/vulnerability.vue
+++ b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability.vue
@@ -56,6 +56,7 @@ export default {
       },
     },
     showCodeFlowTabs() {
+      return true
       return (
         this.glFeatures.vulnerabilityCodeFlow && !isEmpty(this.vulnerability.details.codeFlows)
       );
diff --git a/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_details.vue b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_details.vue
index bfbc47e4c041..72fd47398163 100644
--- a/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_details.vue
+++ b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_details.vue
@@ -221,6 +221,7 @@ export default {
       return this.vulnerability.location?.file && this.vulnerability.location?.startLine;
     },
     showCodeFlowButton() {
+      return true
       return (
         this.glFeatures.vulnerabilityCodeFlow && !isEmpty(this.vulnerability.details.codeFlows)
       );

6. Navigate to code flow tab
7. Verify code viewer appears with highlighted lines
8. Go through the steps using the up and down buttons and verify that the highlight has changed
9. Change theme and verify the highlight colors change

Related to #469653 (closed) and #458062

changed milestone to %17.3

added Category:SAST Lightz processing & display Oxeye integration devopssecure groupstatic analysis sectionsec typefeature workflowready for review + 1 deleted label

assigned to @ccharnolevsky

added pipelinetier-3 label

added frontend label

	2 Warnings
	This merge request is quite big (1080 lines changed), please consider splitting it into multiple merge requests.
	This merge request contains lines with testid selectors. Please ensure e2e:package-and-test job is run.

	1 Message
	CHANGELOG missing: If this merge request needs a changelog entry, add the Changelog trailer to the commit message you want to add to the changelog. If this merge request doesn't need a CHANGELOG entry, feel free to ignore this message.

testid selectors

The following changed lines in this MR contain testid selectors:

ee/app/assets/javascripts/vulnerabilities/components/code_flow/code_flow_file_viewer.vue

+            data-testid="collapse-file"

If the e2e:package-and-test job in the qa stage has run automatically, please ensure the tests are passing. If the job has not run, please start the manual:e2e-test-pipeline-generate job in the prepare stage and ensure the tests in follow-up:e2e:package-and-test-ee pipeline are passing.

For the list of known failures please refer to the latest pipeline triage issue.

If your changes are under a feature flag, please check our Testing with feature flags documentation for instructions.

Reviewer roulette

Category	Reviewer	Maintainer
frontend	@agulina (UTC+2)	@ntepluhina (UTC+2)

Please refer to documentation page for guidance on how you can benefit from the Reviewer Roulette, or use the GitLab Review Workload Dashboard to find other available reviewers.

Tailwind CSS

Legacy CSS utility classes

The following files contain legacy CSS utility classes:

• ee/app/assets/javascripts/vulnerabilities/components/code_flow/code_flow_steps_section.vue
  • gl-text-overflow-ellipsis - Tailwind CSS equivalent: gl-text-ellipsis

We are in the process of migrating our CSS utility classes to Tailwind CSS. The above CSS utility classes do not comply with Tailwind CSS naming conventions. Please use the Tailwind CSS equivalent if it is available. For more information see Tailwind CSS developer documentation.

If the Tailwind CSS equivalent is not available, it is okay to use the legacy CSS utility class for now. The Tailwind CSS equivalent will be made available when the corresponding migration issue in &13521 (closed) is completed.

If a legacy CSS utility class is listed above but you did not change it in this MR it is okay to leave for now. If it is a small or simple MR, feel free to leave the code better than you found it and migrate those legacy CSS utility classes to Tailwind CSS.

If needed, you can retry the danger-review job that generated this comment.

Generated by Danger

added 2560 commits

• 73340109...428af4df - 2554 commits from branch 469653-vulnerability-code-flow-P4
• 1bdbed0a - Add the left side of 'code flow' that including description and steps
• 3189c0fa - Disable feature flag
• cee19a8c - Update 'vulnerability_file_contents' with new highlighted component
• 886deb1f - move functions
• 6bddec26 - Add the right side of 'code flow' that including code viewer
• 8ca0ce23 - Import file

Compare with previous version

mentioned in merge request !158512 (merged)

mentioned in merge request !158521 (merged)

added 782 commits

• 8ca0ce23...3c8a5e8b - 775 commits from branch 469653-vulnerability-code-flow-P4
• 075a37eb - Add the left side of 'code flow' that including description and steps
• 2e73754a - Disable feature flag
• 747f4982 - Add the left side of 'code flow' that including description and steps
• 410ef95c - Disable feature flag
• 833ab9b7 - Update 'vulnerability_file_contents' with new highlighted component
• 2362c5db - move functions
• 70749625 - Add the right side of 'code flow' that including code viewer

Compare with previous version

E2E Test Result Summary

allure-report-publisher generated test report!

e2e-test-on-gdk: test report for b761bf46

expand test summary

+------------------------------------------------------------------+
|                          suites summary                          |
+-------------+--------+--------+---------+-------+-------+--------+
|             | passed | failed | skipped | flaky | total | result |
+-------------+--------+--------+---------+-------+-------+--------+
| Plan        | 74     | 0      | 2       | 0     | 76    | ✅     |
| Govern      | 69     | 0      | 0       | 0     | 69    | ✅     |
| Verify      | 43     | 0      | 2       | 0     | 45    | ✅     |
| Package     | 16     | 0      | 15      | 0     | 31    | ✅     |
| Create      | 127    | 0      | 12      | 0     | 139   | ✅     |
| Data Stores | 30     | 0      | 1       | 0     | 31    | ✅     |
| Analytics   | 2      | 0      | 0       | 0     | 2     | ✅     |
| Release     | 5      | 0      | 0       | 0     | 5     | ✅     |
| Monitor     | 8      | 0      | 0       | 0     | 8     | ✅     |
| Secure      | 1      | 0      | 0       | 0     | 1     | ✅     |
| Fulfillment | 1      | 0      | 0       | 0     | 1     | ✅     |
| Manage      | 0      | 0      | 1       | 0     | 1     | ➖     |
+-------------+--------+--------+---------+-------+-------+--------+
| Total       | 376    | 0      | 33      | 0     | 409   | ✅     |
+-------------+--------+--------+---------+-------+-------+--------+

added 9 commits

• b3566c25 - 1 commit from branch 469653-vulnerability-code-flow-P4
• 3bf6d774 - Add the left side of 'code flow' that including description and steps
• 0b29d84a - Disable feature flag
• 9d0e5188 - Add the left side of 'code flow' that including description and steps
• 9c89a2a7 - Disable feature flag
• 39fc2319 - Update 'vulnerability_file_contents' with new highlighted component
• e1bdc5e8 - move functions
• acb694f6 - Add the right side of 'code flow' that including code viewer
• 51d70f87 - Coloring changes

Compare with previous version

added 1 commit

• eac93591 - Update translate file

Compare with previous version

@aalakkad can you review this? and assign me as the maintainer if it looks good? Thanks

requested review from @aalakkad

deleted the 469653-vulnerability-code-flow-P4 branch. This merge request now targets the master branch

removed review request for @aalakkad

added 799 commits

• eac93591...80e4e126 - 788 commits from branch master
• 935cde71 - 1 earlier commit
• f25bbcf3 - CR changes
• fd594aee - Add the left side of 'code flow' that including description and steps
• 2c0ba398 - Disable feature flag
• b2a1b401 - Add the left side of 'code flow' that including description and steps
• 9a7357a8 - Disable feature flag
• c3ebaee5 - Update 'vulnerability_file_contents' with new highlighted component
• 29bc1143 - move functions
• 0dc6f8af - Add the right side of 'code flow' that including code viewer
• 9fedc161 - Coloring changes
• 21f1fab4 - Update translate file

Compare with previous version

added 1 commit

• f7e4e371 - CR changes

Compare with previous version

requested review from @aalakkad

approved this merge request

requested review from @aturinske and removed review request for @aalakkad

added pipeline:mr-approved label

requested review from @mfangman

changed the description

changed the description

mentioned in issue #474433 (closed)

Hi @ccharnolevsky, I’ve been trying to review this MR, but I’m having trouble getting a runner to execute the security scans. My local GDK isn’t working, and I’ve also had no luck with GitPod and GDK-in-a-box.

I’ll continue troubleshooting the runner issue so I can review your work live, but screenshots of the code flow for each syntax highlighting theme could be a suitable alternative. If you have any tips or resources to help me set up a runner and review a tainted data vulnerability in the GDK, I’d greatly appreciate it. Thanks!

requested review from @djadmin and removed review request for @aturinske

added 1 commit

• 8ea55db2 - CR changes

Compare with previous version

added 1 commit

• d6a8b73b - fix pipeline error

Compare with previous version

added 1 commit

• 93a7105c - Add the left side of 'code flow' that including description and steps

Compare with previous version

added 1 commit

• c3e58770 - fix pipeline error

Compare with previous version

added 1 commit

• 600345d3 - Add the left side of 'code flow' that including description and steps

Compare with previous version

cc @or-gal

approved this merge request

removed review request for @mfangman

mentioned in merge request !158904 (merged)

mentioned in issue #475010 (closed)

mentioned in issue #475012 (closed)

mentioned in issue #475022 (closed)

added 1 commit

• cdcad787 - CR changes + fix pipeline failure

Compare with previous version

requested review from @djadmin

resolved all threads

approved this merge request

Great work, @ccharnolevsky! I really appreciate you considering all the review feedback and creating follow-up issues.

resolved all threads

added 1303 commits

• cdcad787...f2729d71 - 1301 commits from branch master
• 9f2796b1 - Add the left side of 'code flow' that including description and steps
• b761bf46 - CR changes + fix pipeline failure

Compare with previous version

enabled automatic add to merge train when checks pass

started a merge train

merged

mentioned in commit 57eeba34

added workflowstaging-canary label and removed workflowready for review label

added workflowcanary label and removed workflowstaging-canary label

added workflowstaging label and removed workflowcanary label

added workflowproduction label and removed workflowstaging label

added workflowpost-deploy-db-production label and removed workflowproduction label

added releasedcandidate label

added releasedpublished label and removed releasedcandidate label

mentioned in merge request !173342 (merged)

mentioned in merge request !176597 (closed)