Skip to content

Use selected syntax highlighting theme in code block component

What does this MR do?

For #334007 (closed)

This MR adds the necessary classes to our <code-block /> component to make it use the syntax highlighting theme that the user has selected.

Screenshots or Screencasts (strongly suggested)

where this component is used before (in dark mode) 🙈 after 🌈
1️⃣ pipeline unit test report modal test_case_details.vue grouptesting Screen_Shot_2021-08-24_at_15.42.15 Screen_Recording_2021-08-24_at_15.36.36 (all themes)
1️⃣ unit test report MR widget modal grouped_test_report/components/modal.vue grouptesting Screen_Shot_2021-08-24_at_15.41.57 Screen_Recording_2021-08-24_at_15.32.41 (all themes)
2️⃣ install kubernetes agent modal clusters_list/components/install_agent_modal.vue ~"group::configure" Screen_Shot_2021-08-24_at_16.11.23 Screen_Shot_2021-08-24_at_16.10.39 (solarized dark theme)
3️⃣ vulnerability modal vulnerability_details.vue / vulnerability_detail_section.vue groupthreat insights Screen_Recording_2021-08-26_at_14.16.44 Screen_Recording_2021-08-26_at_14.15.19 (solarized dark theme)
3️⃣ vulnerability page vulnerability_details.vue / vulnerability_detail_section.vue groupthreat insights Screen_Recording_2021-08-26_at_14.32.00 Screen_Recording_2021-08-26_at_14.36.17 (solarized dark theme)
3️⃣ generic code type for report items generic_report/types/code.vue groupthreat insights Screen_Shot_2021-08-26_at_17.49.56 Screen_Shot_2021-08-26_at_17.50.46 (solarized dark theme)

How to setup and validate locally (strongly suggested)

For 1️⃣ unit test reports (grouptesting):

  1. set up unit test reports for a project, or here's a test project
  2. open a merge request that changes unit test results, and make sure that a trace is included in one of the changed results
  3. ensure that pipelines ran for the base and head commits of the merge request
  4. navigate to the merge request, expand the unit test report summary widget, and click on the changed test case that includes a trace to open the modal (grouped_test_report/components/modal.vue)
  5. navigate from the merge request to the pipeline that generated the results, find the changed test suite/case that includes a trace, click the button next to the case to open the modal (test_case_details.vue)
  6. a <code-block />s is used for the system output generated by the test case (if available)

For 2️⃣ install agent modal (~"group::configure"):

  1. have a premium or higher license loaded
  2. install KAS and start to create an agent record OR apply this patch to get to the modal without setting anything up 😅
  3. navigate to your project -> infrastructure -> kubernetes clusters and select the GitLab Agent managed clusters tab at the top
  4. click the Integrate with the GitLab Agent button to open the modal
  5. a <code-block /> is used to display the command to run to integrate with the GitLab agent

For 3️⃣ vulnerability details and generic report code type component (groupthreat insights):

  1. clone this project
  2. run a pipeline for the default branch
  3. find the DAST X-Frame-Options Header Not Set vulnerability in one of the following places:
  • navigate to the pipeline, select the Security tab, and click on the vulnerability to open the vulnerability details modal
  • navigate to project -> Security & Compliance -> Vulnerability Report and click on the name of the vulnerability to go to the vulnerability page
  1. <code-block />s are used for the request, expected response, actual response, stack trace snippet, and any generic code-type fields (if they exist for the vulnerability)

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Edited by Miranda Fluharty

Merge request reports