add markdown support to banner message

Signed-off-by: Ankur Kothiwal <[email protected]>
goharbor · Mar 6, 2025 · bd42cb4 · bd42cb4
1 parent 4565907
commit bd42cb4
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/src/portal/src/app/app.module.ts b/src/portal/src/app/app.module.ts
@@ -16,6 +16,7 @@ import {
     NgModule,
     APP_INITIALIZER,
     CUSTOM_ELEMENTS_SCHEMA,
+    SecurityContext,
 } from '@angular/core';
 import { AppComponent } from './app.component';
 import { InterceptHttpService } from './services/intercept-http.service';
@@ -40,6 +41,7 @@ import {
 import { ErrorHandler } from './shared/units/error-handler';
 import { MessageHandlerService } from './shared/services/message-handler.service';
 import { HarborTranslateLoaderService } from './services/harbor-translate-loader.service';
+import { MarkdownModule } from 'ngx-markdown';
 
 function initConfig(
     configService: AppConfigService,
@@ -76,6 +78,7 @@ class MyMissingTranslationHandler implements MissingTranslationHandler {
         HttpClientModule,
         HarborRoutingModule,
         CookieModule.forRoot(),
+        MarkdownModule.forRoot({ sanitize: SecurityContext.HTML }),
     ],
     providers: [
         AppConfigService,

diff --git a/src/portal/src/app/shared/components/app-level-alerts/app-level-alerts.component.html b/src/portal/src/app/shared/components/app-level-alerts/app-level-alerts.component.html
@@ -6,9 +6,9 @@
         [(clrAlertClosed)]="bannerMessageClosed"
         [clrAlertClosable]="getBannerMessageClosable()">
         <clr-alert-item>
-            <span class="alert-text banner-message">{{
-                getBannerMessage()
-            }}</span>
+            <span class="alert-text banner-message">
+                <markdown [data]="getBannerMessage()"></markdown>
+            </span>
         </clr-alert-item>
     </clr-alert>
     <clr-alert

diff --git a/src/portal/src/app/shared/components/app-level-alerts/app-level-alerts.component.scss b/src/portal/src/app/shared/components/app-level-alerts/app-level-alerts.component.scss
@@ -18,4 +18,14 @@
 .banner-message {
   min-width: 0;
   word-break: break-word;
+
+  ::ng-deep :is(markdown) * {
+    color: inherit !important;
+    margin: 0;
+    display: inline;
+
+    &[href] {
+      text-decoration: underline;
+    }
+  }
 }