Add syntax highlighting to Security Configuration code snippets

ee/app/assets/javascripts/security_configuration/components/configuration_snippet_modal.vue

@@ -4,6 +4,7 @@ import Clipboard from 'clipboard';
 import { getBaseURL, setUrlParams, redirectTo } from '~/lib/utils/url_utility';
 import { sprintf, s__, __ } from '~/locale';
 import { CODE_SNIPPET_SOURCE_URL_PARAM } from '~/pipeline_editor/components/code_snippet_alert/constants';
+import SourceEditor from '~/vue_shared/components/source_editor.vue';
 import { CONFIGURATION_SNIPPET_MODAL_ID } from './constants';
 
 export default {
@@ -12,6 +13,7 @@ export default {
     GlModal,
     GlSprintf,
     GlLink,
+    SourceEditor,
   },
   i18n: {
     helpText: s__(
@@ -46,11 +48,27 @@ export default {
         scanType: this.scanType,
       });
     },
+    editorOptions() {
+      return {
+        readOnly: true,
+        lineNumbers: 'off',
+        folding: false,
+        renderIndentGuides: false,
+        renderLineHighlight: 'none',
+        lineDecorationsWidth: 0,
+        occurrencesHighlight: false,
+        hideCursorInOverviewRuler: true,
+        overviewRulerBorder: false,
+      };
+    },
   },
   methods: {
     show() {
       this.$refs.modal.show();
     },
+    resetEditor() {
+      this.$refs.editor.getEditor().layout();
+    },
     onHide() {
       this.clipboard?.destroy();
     },
@@ -94,6 +112,7 @@ export default {
     :modal-id="$options.CONFIGURATION_SNIPPET_MODAL_ID"
     :title="modalTitle"
     @hide="onHide"
+    @shown="resetEditor"
     @primary="copySnippet"
     @secondary="copySnippet(false)"
   >
@@ -110,6 +129,11 @@ export default {
       </gl-sprintf>
     </p>
 
-    <pre><code data-testid="configuration-modal-yaml-snippet" v-text="yaml"></code></pre>
+    <div
+      class="gl-w-full gl-h-full gl-border-1 gl-border-solid gl-border-gray-100"
+      data-testid="configuration-modal-yaml-snippet"
+    >
+      <source-editor ref="editor" :value="yaml" file-name="*.yml" :editor-options="editorOptions" />
+    </div>
   </gl-modal>
 </template>

ee/app/views/projects/security/api_fuzzing_configuration/show.html.haml

@@ -2,4 +2,7 @@
 - breadcrumb_title _("API Fuzzing Configuration")
 - page_title _("API Fuzzing Configuration")
 
+- content_for :prefetch_asset_tags do
+  - webpack_preload_asset_tag('monaco')
+
 .js-api-fuzzing-configuration{ data: api_fuzzing_configuration_data(@project) }

ee/app/views/projects/security/dast_configuration/show.html.haml

@@ -2,4 +2,7 @@
 - breadcrumb_title _("DAST Configuration")
 - page_title _("DAST Configuration")
 
+- content_for :prefetch_asset_tags do
+  - webpack_preload_asset_tag('monaco')
+
 .js-dast-configuration{ data: dast_configuration_data(@project) }

ee/spec/frontend/security_configuration/components/configuration_snippet_modal_spec.js

@@ -5,6 +5,7 @@ import { merge } from 'lodash';
 import ConfigurationSnippetModal from 'ee/security_configuration/components/configuration_snippet_modal.vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { redirectTo } from '~/lib/utils/url_utility';
+import SourceEditor from '~/vue_shared/components/source_editor.vue';
 import { createApiFuzzingConfigurationMutationResponse } from '../api_fuzzing/mock_data';
 
 jest.mock('clipboard', () =>
@@ -12,13 +13,16 @@ jest.mock('clipboard', () =>
     on: jest.fn().mockImplementation((_event, cb) => cb()),
   })),
 );
-jest.mock('~/lib/utils/url_utility', () => ({
-  redirectTo: jest.fn(),
-  joinPaths: jest.fn(),
-  setUrlFragment: jest.fn(),
-  getBaseURL: jest.fn().mockReturnValue('http://gitlab.local/'),
-  setUrlParams: jest.requireActual('~/lib/utils/url_utility').setUrlParams,
-}));
+
+jest.mock('~/lib/utils/url_utility', () => {
+  const urlUtility = jest.requireActual('~/lib/utils/url_utility');
+
+  return {
+    ...urlUtility,
+    getBaseURL: jest.fn().mockReturnValue('http://gitlab.local/'),
+    redirectTo: jest.fn(),
+  };
+});
 
 const {
   gitlabCiYamlEditPath,
@@ -30,8 +34,8 @@ describe('EE - SecurityConfigurationSnippetModal', () => {
   let wrapper;
 
   const findModal = () => wrapper.find(GlModal);
-  const findYamlSnippet = () => wrapper.findByTestId('configuration-modal-yaml-snippet');
   const helpText = () => wrapper.findByTestId('configuration-modal-help-text');
+  const findEditor = () => wrapper.findComponent(SourceEditor);
 
   const createWrapper = (options) => {
     wrapper = extendedWrapper(
@@ -51,6 +55,7 @@ describe('EE - SecurityConfigurationSnippetModal', () => {
             },
             stubs: {
               GlSprintf,
+              SourceEditor,
             },
           },
           options,
@@ -68,7 +73,12 @@ describe('EE - SecurityConfigurationSnippetModal', () => {
   });
 
   it('renders the YAML snippet', () => {
-    expect(findYamlSnippet().text()).toBe(configurationYaml);
+    expect(findEditor().exists()).toBe(true);
+  });
+
+  it('initializes editor with the provided configuration', () => {
+    const editorComponent = findEditor();
+    expect(editorComponent.vm.getEditor().getValue()).toBe(configurationYaml);
   });
 
   it('renders help text correctly', () => {