fix(ui): fix swagger ui styling

Added the same swagger css as the apiman manager ui to ensure the same look and feel.
Furthermore, changed the background color of the curl response.

Author: BastianGem

angular.json

@@ -43,13 +43,11 @@
               "src/themes/default.scss",
               "node_modules/swagger-ui/dist/swagger-ui.css",
               "node_modules/simplebar/dist/simplebar.min.css",
-              "node_modules/prismjs/themes/prism.css",
               "node_modules/material-icons/iconfont/filled.css"
             ],
             "scripts": [
               "node_modules/marked/marked.min.js",
-              "node_modules/simplebar/dist/simplebar.min.js",
-              "node_modules/prismjs/prism.js"
+              "node_modules/simplebar/dist/simplebar.min.js"
             ]
           },
           "configurations": {

package-lock.json

@@ -28,6 +28,7 @@
     "@ngx-translate/core": "14.0.0",
     "@ngx-translate/http-loader": "7.0.0",
     "@swimlane/ngx-charts": "20.1.0",
+    "@types/prismjs": "^1.26.0",
     "json5": "2.2.1",
     "keycloak-angular": "9.1.0",
     "keycloak-js": "16.1.1",

package.json

@@ -1,3 +1,21 @@
+/*!
+ * Copyright 2022 Scheer PAS Schweiz AG
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  imitations under the License.
+ */
+
+@import "~prismjs/themes/prism.css";
+
 #markdown-container {
   max-height: 50vh;
   padding-left: 1%;

src/app/components/api-markdown-description/api-markdown-description.component.scss

@@ -1,12 +1,41 @@
-import { Component, Input, OnInit } from '@angular/core';
+/*
+ * Copyright 2022 Scheer PAS Schweiz AG
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  imitations under the License.
+ */
+
+import {
+  AfterViewInit,
+  Component,
+  Input,
+  OnInit,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
+import * as Prism from 'prismjs';
+import 'prismjs/components';
 
 @Component({
   selector: 'app-api-markdown-description',
   templateUrl: './api-markdown-description.component.html',
-  styleUrls: ['./api-markdown-description.component.scss']
+  styleUrls: ['./api-markdown-description.component.scss'],
+  // Enable a ShadowRoot to apply styles in a isolated manner
+  // This is necessary to apply prism styling and syntax highlighting.
+  encapsulation: ViewEncapsulation.ShadowDom
 })
-export class ApiMarkdownDescriptionComponent implements OnInit {
+export class ApiMarkdownDescriptionComponent implements OnInit, AfterViewInit {
+  @ViewChild('markdown-container') markdownContainer!: ParentNode;
   @Input() markdownText = '';
 
   constructor(private translator: TranslateService) {}
@@ -18,4 +47,9 @@ export class ApiMarkdownDescriptionComponent implements OnInit {
       ) as string;
     }
   }
+
+  // Activate syntax highlighting as soon as the page is rendered to avoid initialize errors
+  ngAfterViewInit(): void {
+    Prism.highlightAllUnder(this.markdownContainer);
+  }
 }

src/app/components/api-markdown-description/api-markdown-description.component.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2022 Scheer PAS Schweiz AG
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  imitations under the License.
+ */
+.swagger-ui .wrapper {
+  max-width: none !important;
+}
+
+.swagger-ui .info {
+  margin: 0 !important;
+}

src/assets/swagger-custom-styles.css

@@ -19,6 +19,7 @@
 @import "@angular/material/theming";
 @import "src/themes/default";
 @import "src/themes/custom";
+@import "assets/swagger-custom-styles.css";
 @include mat.core;
 
 /***** THEMING *****/
@@ -317,13 +318,3 @@ a {
   width: initial;
   overflow: hidden;
 }
-
-// Overwrite some swagger css properties
-// We have to use the global css file and the !important property, otherwise it won't work
-.wrapper {
-  max-width: none !important;
-}
-
-.info {
-  margin: 0 !important;
-}