Let the repository description support the markdown format.

Signed-off-by: FangyuanCheng <fangyuanc@vmware.com>

src/portal/lib/src/repository/repository.component.html

@@ -24,13 +24,15 @@
       <form #repoInfoForm="ngForm">
         <div id="info-edit-button">
           <button class="btn btn-sm" [disabled]="editing || !hasProjectAdminRole " (click)="editInfo()" ><clr-icon shape="pencil" size="16"></clr-icon>&nbsp;{{'BUTTON.EDIT' | translate}}</button>
+          <img [src]="'../../../src/images/markdown.png'" class="markdown">
+          <span>{{ 'REPOSITORY.MARKDOWN' | translate }}</span>
         </div>
         <div *ngIf="!editing">
           <div *ngIf="!hasInfo()" class="no-info-div">
             <p>{{'REPOSITORY.NO_INFO' | translate }}<p>
           </div>
           <div *ngIf="hasInfo()" class="info-div">
-            <pre class="info-pre">{{ imageInfo }}</pre>
+            <div class="info-pre" [innerHTML]="imageInfo | markdown"></div>
           </div>
         </div>
         <div *ngIf="editing">

src/portal/lib/src/repository/repository.component.scss

@@ -47,6 +47,12 @@
 #info-edit-button {
   margin-top: 0px;
   margin-bottom: 12px;
+  font-size: 12px;
+  .markdown {
+    width: 20px;
+    margin-right: 10px;
+    margin-left: 10px;
+  }
 }
 
 #images-container {

src/portal/src/i18n/lang/en-us-lang.json

@@ -478,7 +478,8 @@
         "ACTION": "ACTION",
         "DEPLOY": "DEPLOY",
         "ADDITIONAL_INFO": "Add Additional Info",
-        "REPO_NAME": "Repository"
+        "REPO_NAME": "Repository",
+        "MARKDOWN": "Styling with Markdown is supported"
     },
     "HELM_CHART": {
         "HELMCHARTS": "Charts",

src/portal/src/i18n/lang/es-es-lang.json

@@ -476,7 +476,8 @@
         "ACTION": "ACTION",
         "DEPLOY": "DEPLOY",
         "ADDITIONAL_INFO": "Add Additional Info",
-        "REPO_NAME": "Repository"
+        "REPO_NAME": "Repository",
+        "MARKDOWN": "Styling with Markdown is supported"
     },
     "HELM_CHART": {
         "HELMCHARTS": "Charts",

src/portal/src/i18n/lang/fr-fr-lang.json

@@ -454,7 +454,8 @@
         "ACTION": "ACTION",
         "DEPLOY": "DEPLOY",
         "ADDITIONAL_INFO": "Add Additional Info",
-        "REPO_NAME": "Repository"
+        "REPO_NAME": "Repository",
+        "MARKDOWN": "Styling with Markdown is supported"
     },
     "HELM_CHART": {
         "HELMCHARTS": "Charts",

src/portal/src/i18n/lang/pt-br-lang.json

@@ -473,7 +473,8 @@
         "ADD_LABELS": "Adicionar labels",
         "ACTION": "AÇÃO",
         "DEPLOY": "DEPLOY",
-        "ADDITIONAL_INFO": "Adicionar informação adicional"
+        "ADDITIONAL_INFO": "Adicionar informação adicional",
+        "MARKDOWN": "Styling with Markdown is supported"
     },
     "HELM_CHART": {
         "HELMCHARTS": "Charts",

src/portal/src/i18n/lang/zh-cn-lang.json

@@ -476,7 +476,8 @@
         "ACTION": "操作",
         "DEPLOY": "部署",
         "ADDITIONAL_INFO": "添加信息",
-        "REPO_NAME": "镜像仓库"
+        "REPO_NAME": "镜像仓库",
+        "MARKDOWN": "支持使用Markdown进行样式设置"
     },
     "HELM_CHART": {
         "HELMCHARTS": "Charts",