From bd42cb47b94ff06998374d2b8132bbc6945b4e42 Mon Sep 17 00:00:00 2001
From: Ankur Kothiwal <ankur.kothiwal@cern.com>
Date: Mon, 3 Mar 2025 18:43:14 +0100
Subject: [PATCH] add markdown support to banner message

Signed-off-by: Ankur Kothiwal <ankur.kothiwal@cern.com>
---
 src/portal/src/app/app.module.ts                       |  3 +++
 .../app-level-alerts/app-level-alerts.component.html   |  6 +++---
 .../app-level-alerts/app-level-alerts.component.scss   | 10 ++++++++++
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/portal/src/app/app.module.ts b/src/portal/src/app/app.module.ts
index ba80bcaeb70..caeb4bfe7f8 100644
--- 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
index 4e2555f8a92..e96922a6d6b 100644
--- 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
index be55a680c01..7243aa549c8 100644
--- 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;
+    }
+  }
 }