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 |
---|---|---|
test_case_details.vue grouptesting
|
![]() |
Screen_Recording_2021-08-24_at_15.36.36 (all themes) |
grouped_test_report/components/modal.vue grouptesting
|
![]() |
Screen_Recording_2021-08-24_at_15.32.41 (all themes) |
clusters_list/components/install_agent_modal.vue ~"group::configure" |
![]() |
![]() |
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) |
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) |
generic_report/types/code.vue groupthreat insights
|
![]() |
![]() |
How to setup and validate locally (strongly suggested)
For
- set up unit test reports for a project, or here's a test project
- open a merge request that changes unit test results, and make sure that a trace is included in one of the changed results
- ensure that pipelines ran for the base and head commits of the merge request
- 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
) - 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
) - a
<code-block />
s is used for the system output generated by the test case (if available)
For
- have a premium or higher license loaded
-
install KAS and start to create an agent record OR apply this patch to get to the modal without setting anything up
😅 - navigate to your project -> infrastructure -> kubernetes clusters and select the GitLab Agent managed clusters tab at the top
- click the Integrate with the GitLab Agent button to open the modal
- a
<code-block />
is used to display the command to run to integrate with the GitLab agent
For
- clone this project
- run a pipeline for the default branch
- 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
-
<code-block />
s are used for the request, expected response, actual response, stack trace snippet, and any genericcode
-type fields (if they exist for the vulnerability)
Does this MR meet the acceptance criteria?
Conformity
-
I have included changelog trailers, or none are needed. (Does this MR need a changelog?) -
I have self-reviewed this MR per code review guidelines. -
This MR does not harm performance, or I have asked a reviewer to help assess the performance impact. (Merge request performance guidelines) -
I have followed the style guides.
Availability and Testing
-
I have added/updated tests following the Testing Guide, or it's not needed. (Consider all test levels. See the Test Planning Process.)
Edited by Miranda Fluharty