Merge pull request #10773 from jwangyangls/fix-ui-issue-louis

Fix issue from louis and improve artifact list

src/portal/src/app/log/audit-log.component.html

@@ -1,5 +1,5 @@
 <div class="row">
-    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 log-top">
+    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 reverse-row log-top">
         <div class="row flex-items-xs-right option-right display-f">
             <div class="flex-xs-middle">
                 <button class="btn btn-link" (click)="toggleOptionalName(currentOption)">{{toggleName[currentOption] | translate}}</button>

src/portal/src/app/log/audit-log.component.scss

@@ -26,3 +26,17 @@
 .display-f{
     display: flex;
 }
+.reverse-row {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: baseline;
+}
+.flex-items-xs-right {
+    display: flex;
+    align-items: baseline;
+    ::ng-deep {
+        clr-date-container{
+            margin-top: 0;
+        }
+    }
+}

src/portal/src/app/project/member/member.component.scss

@@ -43,4 +43,8 @@ clr-datagrid {
     padding-top: 0;
 }
 
+.dropdown-header {
+    text-transform: none;
+    font-size: 13px; 
+}
 

src/portal/src/app/project/project-detail/project-detail.component.ts

@@ -84,12 +84,6 @@ export class ProjectDetailComponent implements OnInit, AfterViewInit, OnDestroy
       showTabName: "SCANNER.SCANNER",
       permissions: () => this.hasScannerReadPermission
     },
-    {
-      linkName: "configs",
-      tabLinkInOverflow: false,
-      showTabName: "PROJECT_DETAIL.CONFIG",
-      permissions: () => this.isSessionValid && this.hasConfigurationListPermission
-    },
     {
       linkName: "tag-strategy",
       tabLinkInOverflow: false,
@@ -113,6 +107,12 @@ export class ProjectDetailComponent implements OnInit, AfterViewInit, OnDestroy
       tabLinkInOverflow: false,
       showTabName: "PROJECT_DETAIL.LOGS",
       permissions: () => this.hasLogListPermission
+    },
+    {
+      linkName: "configs",
+      tabLinkInOverflow: false,
+      showTabName: "PROJECT_DETAIL.CONFIG",
+      permissions: () => this.isSessionValid && this.hasConfigurationListPermission
     }
   ];
   previousWindowWidth: number;

src/portal/src/app/project/project.component.scss

@@ -1,6 +1,7 @@
 @import "../../lib/mixin";
 .header-title {
-    margin-top: 0;
+    margin-top: 34px;
+    margin-bottom: -34px;
 }
 
 .option-left {
@@ -21,6 +22,7 @@
 }
 .rightPos {
     @include grid-right-top-pos;
+    margin-top: 28px;
 }
 
 .projectPos {

src/portal/src/app/project/scanner/scanner.component.html

@@ -17,7 +17,6 @@
                 <div class="clr-input-wrapper">
                     <div class="clr-input-wrapper name">
                         <span id="scanner-name" class="scanner-name">{{scanner?.name}}</span>
-                        <button *ngIf="hasCreatePermission && scanners && scanners.length > 0" id="edit-scanner" class="btn btn-primary " (click)="open()">{{'SCANNER.EDIT' | translate}}</button>
                         <span *ngIf="scanner?.disabled" class="label label-warning ml-1">{{'SCANNER.DISABLED' | translate}}</span>
                         <span *ngIf="scanner?.health === 'unhealthy'" class="label label-danger ml-1">{{'SCANNER.UNHEALTHY' | translate}}</span>
                         <span *ngIf="scanner?.health === 'healthy'" class="label label-success ml-1">{{'SCANNER.HEALTHY' | translate}}</span>
@@ -62,7 +61,9 @@
             </div>
         </div>
     </ng-container>
+    <button *ngIf="hasCreatePermission && scanners && scanners.length > 0" id="edit-scanner"  type="button" (click)="open()" class="btn  btn-secondary mt-1">{{'SCANNER.SELECT_SCANNER' | translate}}</button>
 </div>
+
 <clr-modal [clrModalSize]="'xl'" [(clrModalOpen)]="opened" [clrModalStaticBackdrop]="true" [clrModalClosable]="false">
     <h3 class="modal-title">{{'SCANNER.SELECT_SCANNER' | translate}}</h3>
     <div class="modal-body body-format">

src/portal/src/app/project/webhook/add-webhook-form/add-webhook-form.component.html

@@ -48,7 +48,7 @@
       <button type="button" id="new-webhook-continue" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.CONTINUE' | translate}}</button>
       <button type="button" [clrLoading]="checkBtnState" class="btn btn-outline" (click)="onTestEndpoint()" [disabled]="checking || enpointURL.errors">{{'WEBHOOK.TEST_ENDPOINT_BUTTON' | translate}}</button>
   </div>
-  <div class="mt-1" *ngIf="isModify">
+  <div class="mt-1 bottom-btn" *ngIf="isModify">
       <button type="button" [clrLoading]="checkBtnState" class="btn btn-outline" id="webhook-test" (click)="onTestEndpoint()" [disabled]="checking || enpointURL.errors">{{'WEBHOOK.TEST_ENDPOINT_BUTTON' | translate}}</button>
       <button type="button" class="btn btn-outline" id="edit-webhook-cancel" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
       <button type="button" class="btn btn-primary" id="edit-webhook-save" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SAVE' | translate}}</button>

src/portal/src/app/project/webhook/add-webhook-form/add-webhook-form.component.scss

@@ -4,3 +4,7 @@
 .padding-top-3 {
   padding-top: 3px;
 }
+.bottom-btn {
+  text-align: right;
+  margin-right: 3.4rem;
+}

src/portal/src/app/shared/confirmation-dialog/confirmation-dialog.component.html

@@ -1,7 +1,7 @@
 <clr-modal [(clrModalOpen)]="opened" [clrModalClosable]="false" [clrModalStaticBackdrop]="true">
     <h3 class="modal-title confirmation-title">{{dialogTitle}}</h3>
     <div class="modal-body">
-        <div class="confirmation-icon-inline">
+        <div class="confirmation-icon-inline" *ngIf="buttons!==2">
             <clr-icon shape="warning" class="is-warning" size="64"></clr-icon>
         </div>
         <div class="confirmation-content">{{dialogContent}}</div>

src/portal/src/app/shared/new-user-form/new-user-form.component.scss

@@ -8,3 +8,4 @@
     margin-right: 0px !important;
     top: 2px;
 }
+

src/portal/src/app/user/new-user-madal.component.scss

@@ -0,0 +1,10 @@
+::ng-deep {
+  .modal-title {
+    padding-bottom: 0;
+  }
+  .modal-header {
+    .modal-title {
+      padding: 0;
+    }
+  }
+}

src/portal/src/app/user/new-user-modal.component.ts

@@ -24,7 +24,7 @@ import { MessageHandlerService } from '../shared/message-handler/message-handler
 @Component({
     selector: "new-user-modal",
     templateUrl: "new-user-modal.component.html",
-    styleUrls: ['../common.scss']
+    styleUrls: ['../common.scss', "./new-user-madal.component.scss"]
 })
 
 export class NewUserModalComponent {

src/portal/src/css/common.scss

@@ -184,3 +184,4 @@ hbr-tag {
   }
 
 }
+

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

@@ -314,7 +314,7 @@
         "OF": "of",
         "SWITCH_TITLE": "Confirm project members switch",
         "SWITCH_SUMMARY": "Do you want to switch project members {{param}}?",
-        "SET_ROLE": "SET ROLE",
+        "SET_ROLE": "Set Role",
         "REMOVE": "Remove"
     },
     "ROBOT_ACCOUNT": {
@@ -1025,6 +1025,7 @@
         "PULL_TIME": "Pull Time",
         "PUSH_TIME": "Push Time",
         "OF": "of",
+        "ITEMS": "items",
         "ADD_TAG": "ADD TAG",
         "REMOVE_TAG": "REMOVE TAG"
     },

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

@@ -315,7 +315,7 @@
         "OF": "of",
         "SWITCH_TITLE": "Confirm project members switch",
         "SWITCH_SUMMARY": "Do you want to switch project members {{param}}?",
-        "SET_ROLE": "SET ROLE",
+        "SET_ROLE": "Set Role",
         "REMOVE": "Remove"
     },
     "ROBOT_ACCOUNT": {
@@ -1019,6 +1019,7 @@
         "LABELS": "Labels",
         "CREATION": "Tiempo de creación",
         "COMMAND": "Mando",
+        "ITEMS": "items",
         "UPLOADTIME": "Upload Time",
         "NAME": "Name",
         "PULL_TIME": "Pull Time",

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

@@ -306,7 +306,7 @@
         "DELETED_SUCCESS": "Membre supprimé avec succès.",
         "SWITCHED_SUCCESS": "Rôle du membre changé avec succés.",
         "OF": "de",
-        "SET_ROLE": "SET ROLE",
+        "SET_ROLE": "Set Role",
         "REMOVE": "Remove"
     },
     "ROBOT_ACCOUNT": {
@@ -996,6 +996,7 @@
         "PULL_TIME": "Pull Time",
         "PUSH_TIME": "Push Time",
         "OF": "of",
+        "ITEMS": "items",
         "ADD_TAG": "ADD TAG",
         "REMOVE_TAG": "REMOVE TAG"
     },

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

@@ -1017,6 +1017,7 @@
         "PULL_TIME": "Pull Time",
         "PUSH_TIME": "Push Time",
         "OF": "of",
+        "ITEMS": "items",
         "ADD_TAG": "ADD TAG",
         "REMOVE_TAG": "REMOVE TAG"
     },

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

@@ -1024,6 +1024,7 @@
         "PULL_TIME": "Pull Time",
         "PUSH_TIME": "Push Time",
         "OF": "of",
+        "ITEMS": "items",
         "ADD_TAG": "ADD TAG",
         "REMOVE_TAG": "REMOVE TAG"
     },

src/portal/src/images/cnab.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="132px" height="144px" viewBox="0 0 132 144" enable-background="new 0 0 132 144" xml:space="preserve">  <image id="image0" width="132" height="144" x="0" y="0"
+    href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAACQCAMAAAD+3TMYAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
+AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABklBMVEUAAAA3Mqo4Mqo4NKs4
+MarM/2bM/2bM/2bM/2bM/2bN/2nM/2bN/2bN/2nM/2bN/2fO/2fM/2bM/2bQ/2vM/2bM/2fS/2nM
+/2bN/2bO/2vM/2bN/2fQ/2jM/2bM/2fV/2rM/2bN/2bO/23M/2bM/2bV/3HM/2bN/2bP/3DM/2bM
+/2bY/3bM/2bN/2bR/3TM/2bM/2fj/3HM/2bN/2fb/23M/2bN/2bV/4DM/2bM/2f//4DM/2bM/2b/
+/6rM/2bN/2f//4DM/2bN/2b////M/2bN/2fM/2bM/2bM/2bM/2bM/2b/VarqNobpNoToN4TpN4Po
+N4TqQJXqOIXpNoToNoPqN4rvOIfoN4PpNoPoOIXoN4TqQIrpN4TrN4fpN4PqOIXqOIXqOITqOoTo
+NoToNoPrPIY3MarM/2bT3fessuReW73qRIvpOoXrTo/uYprxf6n1m7j6xc7/7+T/8+boNoPpPYfv
+ap/3rMH+6uL819jpN4Pwd6X929r0mLfuYJn94t3rS477zdP4tMUuxLb4s8T///9wvo0QAAAAZnRS
+TlMA+dtAwL48uTe0M6/+Lqr9KqX8JqD7Ipv5H5b4G5H2GIz0FYfyEoLvEH3tDXjqC3PnCW7kB2ng
+BmTdBF/ZA1rVAlXRAVDMS8hGw0EGPXadxN8MYLj1JSCn/Xv2GMcz41Z3Vz7s+Sacrx9IAAAAAWJL
+R0RDZ9ANYgAAAAd0SU1FB+QCEREnOtJJMj4AAAO8SURBVHja7dxnc9pAEIBh2ZDee++9916c3ohx
+70kcO4mUBGxcDnc79YcHmaaC0N7eLsdktN/8AXjm1SHgpLFhQseQHvhTR4gIURHR0Bg+8gjAkzY4
+EIhXoJnGCBEhaBGxWB0g4nH9iJhpUqRQQ8RNkyKFEiJmP4oghRIibj+KIEUQwgqaFZ4Q/hRfoYNH
+rPSE8KfgR6zyhfCl4Ees9oXwpWBHrKkQwpuCHbG2QghvCm7EuoohPCmYEes3VAzhScGM2BgQwp2C
+F7Fpc0AIdwpexJbAEK4UrIit2wJDuFKwIrZXCeFMwYnYsbNKCGcKTsSuqiEcKRgRu/dUDeFIwYjY
+GxKinIIPsW9/SIhyCj7EgdAQpRRsiIOHQkOUUrAhDgNCFFNwIY4cBYQopuBCHAOFKKRgQhw/AQpR
+SIFG+MaFOAkMkU8hjwgap+HUaWCIfAoexBlwiOUULIiz58AhllOwIM5LhLBTcCAuXJQIYafgQFyS
+CpFLwYC4fEUqRC4FA+KqZAjT/EaOuHZdMoRpfidH3JAOAU8BRdy8JR0CngKKuI0IAU4BRNy5iwgB
+TgFE3EOFgKaAIe4/QIWApoAhHiJDAFOAEE2PkCFodrzziMfoEDSb/zbiyVN0CKIUOcQzhRA0KSzr
+ueMv6RA0KSzrhVIIkhTWS7UQJCmsV4ohKFK8Vg1BkeKNcgiic4VaCKrTZuJtc7KlNZVOp0ZGM2Pj
+E5OSoy5oa+/oFK7JTk3P1BTRlfQICo7MbM0Q3T29ImDm5hdqgkj09Ysqk12ELg4Fw8A7ETJLP7gR
+7z+EGYT4+YsXMdgfbsgdkt+ciI8Qgj1jfIghqEEIQAvkegAdi8IRCV8XKMMAYE06VmfoewRjSIS+
+N92z5Dlf/JGaAESfnEGIRXpEt8SCKCyLBXJEj6xBiHlqRFevPGJulhiRlDcIkaFFtHViENkZUkQ7
+xiDENCmiA4eYokQkUEcjdzwmCBHDOIMQ44SIZixijBCBeoPakyFEtGARo4SIVixihBDxCYtIESI+
+YxHp/w1RF4ejLhZmXbxF6+JkpfW0Xbx1QesHWBGh9aO8dBOHzi81JYTOr3clhM4vuuV7ajR+5S8j
+NP74cdxdpO9noAOh7wex8z4rbVsDToS2TRLXHWeK20U0CMWNMyKEMQhH+LcQqRBKm6lkCGMItq38
+d5ITobDBTojAX2qgRKAvupAisJefiBGG8QVxIY4cgbkkyYCwF8ew1MVZHoTk1AUCPREiQkSICBEh
+8q8A/scojAO+IypCRAjv/APqQg4umgliaAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0wMi0xOFQw
+MDozOTo1OC0wNzowMNnr4mMAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDItMThUMDA6Mzk6NTgt
+MDc6MDCotlrfAAAAAElFTkSuQmCC" />
+</svg>

src/portal/src/lib/components/artifact/artifact-list-tab.component.html

@@ -75,7 +75,7 @@
                     <clr-icon shape="shield-check" size="16"></clr-icon>&nbsp;{{'VULNERABILITY.SCAN_NOW' | translate}}
                 </button>
 
-                <clr-dropdown class="btn  btn-link mt-1">
+                <clr-dropdown class="btn  btn-link">
                     <span clrDropdownTrigger id="artifact-list-action" class="btn pl-0">
                         {{'BUTTON.ACTIONS' | translate}}
                         <clr-icon shape="caret down"></clr-icon>
@@ -144,7 +144,7 @@
                 <clr-dg-cell class="truncated flex-max-width">
                     <div class="cell white-normal">
                         <img class="artifact-icon"
-                            [src]="artifact.type==='IMAGE'||artifact.type==='CHART'?'images/artifact-'+artifact.type.toLowerCase()+'.svg':'images/artifact-default.svg'" />
+                            [src]="artifact.type==='IMAGE'||artifact.type==='CHART'||artifact.type ==='CNAB'?'images/artifact-'+artifact.type.toLowerCase()+'.svg':'images/artifact-default.svg'" />
                         &nbsp; &nbsp;
                         <a href="javascript:void(0)" class="max-width-100" (click)="onTagClick(artifact)"
                             title="{{artifact.digest}}">

src/portal/src/lib/components/artifact/artifact-list-tab.component.scss

@@ -52,7 +52,7 @@
   position: absolute;
   z-index: 1;
   right: 35px;
-  margin-top: 20px;
+  margin-top: 34px;
   display: flex;
 }
 

src/portal/src/lib/components/artifact/artifact-list-tab.component.ts

@@ -313,6 +313,11 @@ export class ArtifactListTabComponent implements OnInit, AfterViewInit {
 
     // Pagination
     let params = new HttpParams();
+    params = params.set('with_label', 'true');
+    params = params.set('with_scan_overview', 'true');
+    params = params.set('with_signature', 'true');
+    params = params.set('with_immutable_status', 'true');
+
     if (pageNumber && this.pageSize) {
       params = params.set('page', pageNumber + '').set('page_size', this.pageSize + '');
     }

src/portal/src/lib/components/artifact/artifact-summary.component.ts

@@ -48,6 +48,10 @@ export class ArtifactSummaryComponent implements OnInit {
       repositoryName: this.repositoryName,
       reference: this.artifactDigest,
       projectName: this.projectName,
+      withLabel: true,
+      withScanOverview: true,
+      withSignature: true,
+      withImmutableStatus: true
     }).subscribe(response => {
       this.artifact = response;
     }, error => {

src/portal/src/lib/components/artifact/artifact-tag/artifact-tag.component.html

@@ -33,6 +33,7 @@
         </form>
     </clr-dg-action-bar>
     <clr-dg-column [clrDgField]="'name'">{{'TAG.NAME' | translate}}</clr-dg-column>
+    <clr-dg-column >{{'REPOSITORY.SIGNED' | translate}}</clr-dg-column>
     <clr-dg-column>{{'TAG.PULL_TIME' | translate}}</clr-dg-column>
     <clr-dg-column>{{'TAG.PUSH_TIME' | translate}}</clr-dg-column>
 
@@ -43,6 +44,16 @@
                 <span *ngIf="tag.immutable" class="label label-info ml-8">{{'REPOSITORY.IMMUTABLE' | translate}}</span>
             </div>
         </clr-dg-cell>
+        <clr-dg-cell [ngSwitch]="tag.signature != null">
+            <div class="cell">
+                <clr-icon shape="check-circle" *ngSwitchCase="true" size="20" class="color-green"></clr-icon>
+                <clr-icon shape="times-circle" *ngSwitchCase="false" size="16" class="color-red"></clr-icon>
+                <a href="javascript:void(0)" *ngSwitchDefault role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right">
+                    <clr-icon shape="help" class="color-gray" size="16"></clr-icon>
+                    <span class="tooltip-content">{{'REPOSITORY.NOTARY_IS_UNDETERMINED' | translate}}</span>
+                </a>
+            </div>
+        </clr-dg-cell>
         <clr-dg-cell>{{tag.pull_time !== availableTime? (tag.pull_time | date: 'short') : ""}}</clr-dg-cell>
         <clr-dg-cell>{{tag.push_time | date: 'short'}}</clr-dg-cell>
     </clr-dg-row>

src/portal/src/lib/components/config/project-quotas/project-quotas.component.scss

@@ -4,17 +4,18 @@
   .default-quota-text {
     display: flex;
     align-items: center;
-    text-transform: uppercase;
     font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif;
     .width-10rem {
       width: 15rem;
+      font-size: 15px;
     }
 
     .num-count {
       display: inline-block;
       min-width: 2rem;
       font-weight: 600;
-      font-size: 18px;
+      font-size: 15px;
+      text-transform: uppercase;
     }
   }
 }

src/portal/src/lib/components/config/system/system-settings.component.html

@@ -48,14 +48,14 @@
 
         </clr-input-container>
         <label *ngIf="canDownloadCert" for="certDownloadLink"
-            class="required clr-control-label mt-1">{{'CONFIG.ROOT_CERT' | translate}}
-            <a #certDownloadLink [href]="downloadLink" target="_blank">{{'CONFIG.ROOT_CERT_LINK' | translate}}</a>
+            class="clr-control-label cert-down-label mt-1">{{'CONFIG.ROOT_CERT' | translate}}
             <clr-tooltip>
                 <clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
                 <clr-tooltip-content clrPosition="top-right" clrSize="lg" *clrIfOpen>
                     <span>{{'CONFIG.TOOLTIP.ROOT_CERT_DOWNLOAD' | translate}}</span>
                 </clr-tooltip-content>
             </clr-tooltip>
+            <a #certDownloadLink class="cert-down" [href]="downloadLink" target="_blank">{{'CONFIG.ROOT_CERT_LINK' | translate}}</a>
         </label>
         <clr-checkbox-container *ngIf="!withAdmiral">
             <label id="repo_read_only_lbl" for="repoReadOnly">{{'CONFIG.REPO_READ_ONLY' | translate}}

src/portal/src/lib/components/config/system/system-settings.component.scss

@@ -103,3 +103,13 @@
   cursor: pointer;
   margin: 0;
 }
+
+.cert-down-label {
+  position: relative;
+  .cert-down {
+    position: absolute;
+      left: 240px;
+      top: 50%;
+      transform: translateY(-50%);
+  }
+}

src/portal/src/lib/components/create-edit-endpoint/create-edit-endpoint.component.html

@@ -67,7 +67,7 @@
       <div class="clr-form-control">
         <label for="destination_password" class="clr-control-label">{{ 'DESTINATION.ACCESS_SECRET' | translate }}</label>
         <div class="clr-control-container">
-          <div class="clr-textarea-wrapper">
+          <div class="clr-textarea-wrapper mt-0">
             <input autocomplete="off" class="clr-input" *ngIf="isNormalCredential();else gcr_secret" type="password" placeholder="Access Secret"
               id="destination_password" [disabled]="testOngoing" [readonly]="!editable" [(ngModel)]="target.credential.access_secret"
               size="30" name="access_secret" #access_secret="ngModel">
@@ -80,8 +80,8 @@
       </div>
       <!-- Verify Remote Cert -->
       <clr-checkbox-container>
-        <label id="destination_insecure_checkbox"
-          for="destination_insecure">{{'CONFIG.VERIFY_REMOTE_CERT' | translate }}
+        <label class="destination-insecure-label" id="destination_insecure_checkbox"
+          for="destination_insecure"><span>{{'CONFIG.VERIFY_REMOTE_CERT' | translate }}</span>
           <clr-tooltip>
             <clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
             <clr-tooltip-content clrPosition="top-right" clrSize="md" *clrIfOpen>

src/portal/src/lib/components/create-edit-endpoint/create-edit-endpoint.component.scss

@@ -3,11 +3,6 @@
     font-weight: 400;
   }
 
-  clr-tooltip {
-    top: 3px;
-    position: relative;
-  }
-
   .form-height {
     height: 30px;
   }
@@ -65,3 +60,7 @@
   .endpoint-input {
     padding-right: 21px;
   }
+  .destination-insecure-label {
+    display: flex;
+    align-items: center;
+  }

src/portal/src/lib/components/create-edit-rule/create-edit-rule.component.scss

@@ -287,3 +287,13 @@ clr-modal {
 .select-width {
     min-width:11rem;
 }
+::ng-deep {
+    .modal-title {
+      padding-bottom: 0;
+    }
+    .modal-header {
+      .modal-title {
+        padding: 0;
+      }
+    }
+  }

src/portal/src/lib/components/label-piece/label-piece.component.ts

@@ -34,7 +34,7 @@ export class LabelPieceComponent implements OnInit, OnChanges {
     ngOnChanges(): void {
         if (this.label) {
             let color = this.label.color;
-            if (color === '') {color = '#FFFFFF'; }
+            if (!color) {color = '#FFFFFF'; }
             this.labelColor = LabelColor.find(data => data.color === color);
         }
     }

src/portal/src/lib/components/operation/operation.component.css

@@ -11,7 +11,7 @@
     padding: 8px 5px 8px 10px; border-bottom: 1px solid #ccc;}
 .iconsArea{ flex-shrink: 1;}
 .infoArea{ margin-left: 10px; width: 270px;}
-.eventName{display: block; margin-bottom: -5px;font-size: 16px; color: rgb(11, 127, 189); }
+.eventName{display: block; margin-bottom: -5px;font-size: 16px; }
 .eventErrorInf {display:block; font-size: 12px;color:red;line-height: .6rem;}
 .eventTarget{display: inline-flex; width: 172px; font-size: 12px; flex-shrink:1; overflow: hidden; text-overflow: ellipsis;white-space: nowrap;}
 .eventTime{ float: right; font-size: 12px;}

src/portal/src/lib/components/project-policy-config/project-policy-config.component.html

@@ -60,16 +60,16 @@
             <label for="systemWhitelist" class="clr-control-label">{{'CVE_WHITELIST.CVE_WHITELIST'|translate}}</label>
             <div class="w-100 clr-control-container">
                 <div class="config-subtext">
-                    <div class="mt-05">
+                    <div>
                         <span>{{'CVE_WHITELIST.PRO_WHITELIST_EXPLAIN'|translate}}</span>
                     </div>
-                    <div class="mt-05">
+                    <div>
                         <span>{{'CVE_WHITELIST.PRO_OR_SYS'|translate}}</span>
                     </div>
-                    <div class="mt-05">
+                    <div>
                         <span>{{'CVE_WHITELIST.MERGE_INTO'|translate}}</span>
                     </div>
-                    <div *ngIf="hasExpired" class="mt-05">
+                    <div *ngIf="hasExpired">
                         <span *ngIf="isUseSystemWhitelist()"
                             class="label label-warning">{{'CVE_WHITELIST.WARNING_SYS'|translate}}</span>
                         <span *ngIf="!isUseSystemWhitelist()"

src/portal/src/lib/components/project-policy-config/project-policy-config.component.scss

@@ -75,10 +75,6 @@
   font-weight: 300;
 }
 
-.mt-05 {
-  margin-bottom: 0.5rem;
-}
-
 .col-flex-grow-0 {
   flex-grow: 0;
 }

src/portal/src/lib/components/replication/replication.component.html

@@ -53,24 +53,17 @@
           </div>
         </clr-dg-action-bar>
         <clr-dg-column [clrDgSortBy]="'id'">{{'REPLICATION.ID' | translate}}</clr-dg-column>
+        <clr-dg-column [clrDgField]="'status'">{{'REPLICATION.STATUS' | translate}}</clr-dg-column>
         <clr-dg-column [clrDgField]="'trigger'">{{'REPLICATION.REPLICATION_TRIGGER' | translate}}</clr-dg-column>
         <clr-dg-column [clrDgSortBy]="creationTimeComparator">{{'REPLICATION.CREATION_TIME' | translate}}</clr-dg-column>
         <clr-dg-column>{{'REPLICATION.DURATION' | translate}}</clr-dg-column>
         <clr-dg-column>{{'REPLICATION.SUCCESS_RATE' | translate}}</clr-dg-column>
         <clr-dg-column>{{'REPLICATION.TOTAL' | translate}}</clr-dg-column>
-        <clr-dg-column [clrDgField]="'status'">{{'REPLICATION.STATUS' | translate}}</clr-dg-column>
         <clr-dg-placeholder>{{'REPLICATION.JOB_PLACEHOLDER' | translate }}</clr-dg-placeholder>
         <clr-dg-row *ngFor="let j of jobs" [clrDgItem]="j">
           <clr-dg-cell>
               <a href="javascript:void(0)" (click)="goToLink(j.id)">{{j.id}}</a>
           </clr-dg-cell>
-          <clr-dg-cell>{{j.trigger}}</clr-dg-cell>
-          <clr-dg-cell>{{j.start_time | date: 'short'}}</clr-dg-cell>
-          <clr-dg-cell>{{getDuration(j)}}</clr-dg-cell>
-          <clr-dg-cell>
-            {{(j.succeed > 0 ? j.succeed / j.total : 0) | percent }}
-          </clr-dg-cell>
-          <clr-dg-cell>{{j.total}}</clr-dg-cell>
           <clr-dg-cell>
             {{j.status}}
             <clr-tooltip>
@@ -80,6 +73,13 @@
                 </clr-tooltip-content>
             </clr-tooltip>
           </clr-dg-cell>
+          <clr-dg-cell>{{j.trigger}}</clr-dg-cell>
+          <clr-dg-cell>{{j.start_time | date: 'short'}}</clr-dg-cell>
+          <clr-dg-cell>{{getDuration(j)}}</clr-dg-cell>
+          <clr-dg-cell>
+            {{(j.succeed > 0 ? j.succeed / j.total : 0) | percent }}
+          </clr-dg-cell>
+          <clr-dg-cell>{{j.total}}</clr-dg-cell>
         </clr-dg-row>
         <clr-dg-footer>
           <span *ngIf="showPaginationIndex">{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'REPLICATION.OF' | translate}}</span>

src/portal/src/lib/components/repository-gridview/repository-gridview.component.scss

@@ -2,6 +2,7 @@
 
 .rightPos{
     @include grid-right-top-pos;
+    top: 22px;
 }
 
 .toolbar {

src/portal/src/lib/components/vulnerability-scanning/result-bar-chart-component.html

@@ -16,6 +16,6 @@
         <hbr-result-tip-histogram [scanner]="scanner" [vulnerabilitySummary]="summary"></hbr-result-tip-histogram>
     </div>
     <div *ngIf="otherStatus" class="bar-state">
-        <span class="label">{{'VULNERABILITY.STATE.OTHER_STATUS' | translate}}</span>
+        <span class="label not-scan">{{'VULNERABILITY.STATE.OTHER_STATUS' | translate}}</span>
     </div>
 </div>

src/portal/src/lib/components/vulnerability-scanning/scanning.scss

@@ -2,10 +2,12 @@
     width: 210px;
 }
 .bar-state {
-    text-align: center !important;
     .unknow-text {
         margin-left: -5px;
     }
+    .label {
+        width: 90%;
+    }
 }
 
 .bar-state-chart {
@@ -161,3 +163,9 @@ hr{
 .no-border {
     border: none;
 }
+
+hbr-vulnerability-bar {
+    .label,.not-scan {
+        width: 90%;
+    }
+}

tests/resources/Harbor-Pages/Project_Elements.robot

@@ -55,7 +55,7 @@ ${tag_table_column_size}  xpath=//clr-dg-column//span[contains(.,'Size')]
 ${tag_table_column_vulnerability}  xpath=//clr-dg-column//span[contains(.,'Vulnerability')]
 ${tag_images_btn}  xpath=//hbr-repository//button[contains(.,'Images')]
 ${project_member_action_xpath}  xpath=//*[@id='member-action']
-${project_member_set_role_xpath}  xpath=//clr-dropdown-menu//label[contains(.,'SET ROLE')]
+${project_member_set_role_xpath}  xpath=//clr-dropdown-menu//label[contains(.,'Set Role')]
 ${project_config_public_checkbox}  xpath=//input[@name='public']
 ${project_config_content_trust_checkbox}  xpath=//input[@name='content-trust']
 ${project_config_scan_images_on_push_checkbox}  xpath=//input[@name='scan-image-on-push']