Modify label filter issue and add stick label to image case

src/ui_ng/lib/src/create-edit-label/create-edit-label.component.ts

@@ -68,7 +68,8 @@ export class CreateEditLabelComponent implements OnInit, OnDestroy {
     ngOnInit(): void {
         this.nameChecker.debounceTime(500).subscribe((name: string) => {
             this.checkOnGoing = true;
-            toPromise<Label[]>(this.labelService.getLabels(this.scope, this.projectId, name))
+            let labelName = this.currentForm.controls['name'].value;
+            toPromise<Label[]>(this.labelService.getLabels(this.scope, this.projectId, labelName))
                 .then(targets => {
                     if (targets && targets.length) {
                         this.isLabelNameExist = true;

src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.ts

@@ -157,7 +157,7 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
                 // if input value exit in project list
                 let pro = res.find((data: any) => data.name === name);
                 if (!pro) {
-                  this.noProjectInfo = 'REPLICATION.PROJECT_NOT_EXIST_INFO';
+                  this.noProjectInfo = 'REPLICATION.NO_PROJECT_INFO';
                   this.noSelectedProject = true;
                 } else {
                   this.noProjectInfo = '';
@@ -165,12 +165,12 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
                   this.setProject([pro])
                 }
               } else {
-                this.noProjectInfo = 'REPLICATION.PROJECT_NOT_EXIST_INFO';
+                this.noProjectInfo = 'REPLICATION.NO_PROJECT_INFO';
                 this.noSelectedProject = true;
               }
             }).catch((error: any) => {
               this.errorHandler.error(error);
-              this.noProjectInfo = 'REPLICATION.PROJECT_NOT_EXIST_INFO';
+              this.noProjectInfo = 'REPLICATION.NO_PROJECT_INFO';
               this.noSelectedProject = true;
               });
         });

src/ui_ng/lib/src/label-piece/label-piece.component.ts

@@ -30,6 +30,7 @@ import {Label} from "../service/interface";
 
 export class LabelPieceComponent implements OnInit {
     @Input() label: Label;
+    @Input() labelWidth: number;
 
     ngOnInit(): void {
     }

src/ui_ng/lib/src/label-piece/label-piece.template.ts

@@ -3,7 +3,7 @@
  */
 
 export const LABEL_PIEICE_TEMPLATE: string = `
-<label class="label" [ngStyle]="{'background-color': label.color}">
+<label class="label" [ngStyle]="{'background-color': label.color}" [style.max-width.px]="labelWidth">
     <clr-icon *ngIf="label.scope=='p'" shape="organization"></clr-icon>
     <clr-icon *ngIf="label.scope=='g'" shape="administrator"></clr-icon>
      {{label.name}}
@@ -11,7 +11,12 @@ export const LABEL_PIEICE_TEMPLATE: string = `
 `;
 
 export const LABEL_PIEICE_STYLES: string = `
-   .label{border: none; color:#222;padding-top:2px; max-width:140px;}
+   .label{border: none; color:#222;
-   .label clr-icon{ margin-right: 3px; display:block;}
+      display: inline-block;
+      justify-content: flex-start;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: .875rem;}
+   .label clr-icon{ margin-right: 3px;}
    .btn-group .dropdown-menu clr-icon{display:block;}
 `;

src/ui_ng/lib/src/tag/tag.component.html.ts

@@ -15,7 +15,7 @@ export const TAG_TEMPLATE = `
 <div class="row" style="position:relative;">
   <div>
     <div class="row flex-items-xs-right rightPos">
-      <div class='filterLabelPiece' [style.left.px]='filterLabelPieceWidth' ><hbr-label-piece [hidden]='!filterOneLabel' [label]="filterOneLabel"></hbr-label-piece></div>
+      <div class='filterLabelPiece' [style.left.px]='filterLabelPieceWidth' ><hbr-label-piece [hidden]='!filterOneLabel' [label]="filterOneLabel"  [labelWidth]="130"></hbr-label-piece></div>
       <div class="flex-xs-middle">
       <hbr-filter *ngIf="withAdmiral" [withDivider]="true" filterPlaceholder="{{'TAG.FILTER_FOR_TAGS' | translate}}" (filter)="doSearchTagNames($event)" [currentValue]="lastFilteredTagName"></hbr-filter>
         <clr-dropdown *ngIf="!withAdmiral">
@@ -23,12 +23,12 @@ export const TAG_TEMPLATE = `
             <clr-dropdown-menu clrPosition="bottom-left" *clrIfOpen>
                 <div style='display:grid'>
                     <label class="dropdown-header">{{'REPOSITORY.FILTER_BY_LABEL' | translate}}</label>
-                    <div class="form-group"><input type="text" placeholder="Filter labels" #labelNamePiece (keyup)="handleInputFilter(labelNamePiece.value)"></div>
+                    <div class="form-group"><input type="text" placeholder="Filter labels" [(ngModel)]= "filterName" (keyup)="handleInputFilter()"></div>
-                    <div [hidden]='imageFilterLabels.length'>{{'LABEL.NO_LABELS' | translate }}</div>
+                    <div [hidden]='imageFilterLabels.length' style="padding-left:10px;">{{'LABEL.NO_LABELS' | translate }}</div>
                     <div [hidden]='!imageFilterLabels.length' style='max-height:300px;overflow-y: auto;'>
                         <button type="button" class="dropdown-item" *ngFor='let label of imageFilterLabels' (click)="label.iconsShow = true; filterLabel(label)">
                             <clr-icon shape="check" class='pull-left' [hidden]='!label.iconsShow'></clr-icon>
-                            <div class='labelDiv'><hbr-label-piece [label]="label.label"></hbr-label-piece></div>
+                            <div class='labelDiv'><hbr-label-piece [label]="label.label"  [labelWidth]="130"></hbr-label-piece></div>
                             <clr-icon shape="times-circle" class='pull-right' [hidden]='!label.iconsShow'  (click)="$event.stopPropagation(); label.iconsShow = false; unFilterLabel(label)"></clr-icon>
                         </button>
                     </div>
@@ -49,12 +49,12 @@ export const TAG_TEMPLATE = `
                     <clr-dropdown-menu clrPosition="bottom-left" *clrIfOpen>
                     <div style='display:grid'>
                         <label class="dropdown-header">{{'REPOSITORY.ADD_TO_IMAGE' | translate}}</label>
-                        <div class="form-group"><input type="text" placeholder="Filter labels" #stickLabelNamePiece (keyup)="handleStickInputFilter(stickLabelNamePiece.value)"></div>
+                        <div class="form-group"><input type="text" placeholder="Filter labels" [(ngModel)]="stickName" (keyup)="handleStickInputFilter()"></div>
-                        <div [hidden]='imageStickLabels.length'>{{'LABEL.NO_LABELS' | translate }}</div>
+                        <div [hidden]='imageStickLabels.length' style="padding-left:10px;">{{'LABEL.NO_LABELS' | translate }}</div>
                         <div [hidden]='!imageStickLabels.length' style='max-height:300px;overflow-y: auto;'>
                             <button type="button" class="dropdown-item" *ngFor='let label of imageStickLabels' (click)="selectLabel(label); label.iconsShow = true">
                                 <clr-icon shape="check" class='pull-left' [hidden]='!label.iconsShow'></clr-icon>
-                                <div class='labelDiv'><hbr-label-piece [label]="label.label"></hbr-label-piece></div>
+                                <div class='labelDiv'><hbr-label-piece [label]="label.label"  [labelWidth]="130"></hbr-label-piece></div>
                                 <clr-icon shape="times-circle" class='pull-right' [hidden]='!label.iconsShow'  (click)="$event.stopPropagation(); unSelectLabel(label); label.iconsShow = false"></clr-icon>
                             </button>
                         </div>
@@ -96,7 +96,7 @@ export const TAG_TEMPLATE = `
           <clr-dg-cell style="width: 160px;">{{t.created | date: 'short'}}</clr-dg-cell>
           <clr-dg-cell style="width: 80px;" *ngIf="!withClair">{{t.docker_version}}</clr-dg-cell>
           <clr-dg-cell *ngIf="!withAdmiral" style="width: 140px;">
-            <hbr-label-piece *ngIf="t.labels?.length" [label]="t.labels[0]"></hbr-label-piece>
+            <hbr-label-piece *ngIf="t.labels?.length" [label]="t.labels[0]" [labelWidth]="90"> </hbr-label-piece>
             <div class="signpost-item" [hidden]="t.labels?.length<=1">
                 <div class="trigger-item">
                     <clr-signpost>

src/ui_ng/lib/src/tag/tag.component.ts

@@ -111,7 +111,8 @@ export class TagComponent implements OnInit, AfterViewInit {
   labelNameFilter: Subject<string> = new Subject<string> ();
   stickLabelNameFilter: Subject<string> = new Subject<string> ();
   filterOnGoing: boolean;
-
+  stickName = ''
+  filterName = '';
   initFilter = {
     name: '',
     description: '',
@@ -159,12 +160,12 @@ export class TagComponent implements OnInit, AfterViewInit {
         .debounceTime(500)
         .distinctUntilChanged()
         .subscribe((name: string) => {
-          if (name && name.length) {
+          if (this.filterName.length) {
             this.filterOnGoing = true;
             this.imageFilterLabels = [];
 
             this.imageLabels.forEach(data => {
-              if (data.label.name.indexOf(name) !== -1) {
+              if (data.label.name.indexOf(this.filterName) !== -1) {
                 this.imageFilterLabels.push(data);
               }
             })
@@ -178,12 +179,12 @@ export class TagComponent implements OnInit, AfterViewInit {
         .debounceTime(500)
         .distinctUntilChanged()
         .subscribe((name: string) => {
-          if (name && name.length) {
+          if (this.stickName.length) {
             this.filterOnGoing = true;
             this.imageStickLabels = [];
 
             this.imageLabels.forEach(data => {
-              if (data.label.name.indexOf(name) !== -1) {
+              if (data.label.name.indexOf(this.stickName) !== -1) {
                 this.imageStickLabels.push(data);
               }
             })
@@ -385,17 +386,17 @@ export class TagComponent implements OnInit, AfterViewInit {
     }
   }
 
-  handleInputFilter($event: string) {
+  handleInputFilter() {
-    if ($event && $event.length) {
+    if (this.filterName.length) {
-      this.labelNameFilter.next($event);
+      this.labelNameFilter.next(this.filterName);
     }else {
       this.imageFilterLabels = clone(this.imageLabels);
     }
   }
 
-  handleStickInputFilter($event: string) {
+  handleStickInputFilter() {
-    if ($event && $event.length) {
+    if (this.stickName.length) {
-      this.stickLabelNameFilter.next($event);
+      this.stickLabelNameFilter.next(this.stickName);
     }else {
       this.imageStickLabels = clone(this.imageLabels);
     }

src/ui_ng/package.json

@@ -31,7 +31,7 @@
         "clarity-icons": "^0.10.17",
         "clarity-ui": "^0.10.27",
         "core-js": "^2.4.1",
-        "harbor-ui": "0.6.62",
+        "harbor-ui": "0.6.63",
         "intl": "^1.2.5",
         "mutationobserver-shim": "^0.3.2",
         "ngx-cookie": "^1.0.0",

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

@@ -417,7 +417,7 @@
         "IMAGE": "Images",
         "LABELS": "Labels",
         "ADD_TO_IMAGE": "Add labels to this image",
-        "FILTER_BY_LABEL": "Filter projects by label",
+        "FILTER_BY_LABEL": "Filter images by label",
         "ADD_LABELS": "Add labels",
         "ACTION": "ACTION",
         "DEPLOY": "DEPLOY",

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

@@ -417,8 +417,8 @@
         "IMAGE": "Imágenes",
         "LABELS": "Labels",
         "ADD_TO_IMAGE": "Add labels to this image",
+        "FILTER_BY_LABEL": "Filter images by label",
         "ADD_LABELS": "Add labels",
-        "FILTER_BY_LABEL": "Filter projects by label",
         "ACTION": "ACTION",
         "DEPLOY": "DEPLOY",
         "ADDITIONAL_INFO": "Add Additional Info"

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

@@ -368,6 +368,10 @@
         "NOTARY_IS_UNDETERMINED": "Ne peut pas déterminer la signature de ce tag.",
         "PLACEHOLDER": "Nous ne trouvons aucun dépôt !",
         "IMAGE": "Images",
+        "LABELS": "Labels",
+        "ADD_TO_IMAGE": "Add labels to this image",
+        "FILTER_BY_LABEL": "Filter images by label",
+        "ADD_LABELS": "Add labels",
         "ACTION": "ACTION",
         "DEPLOY": "DEPLOY",
         "ADDITIONAL_INFO": "Add Additional Info"

src/ui_ng/src/styles.css

@@ -48,3 +48,20 @@
     transform: rotate(-90deg);
 }
 .datagrid-spinner{margin-top: 24px;}
+
+/* set overflow bar style */
+::-webkit-scrollbar {
+    width: 8px;background:transparent;
+}
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background: #ccc;
+    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.5);
+}
+::-webkit-scrollbar-thumb:window-inactive {
+    background: rgba(255,0,0,0.4);
+}

tests/resources/Harbor-Pages/Project.robot

@@ -215,4 +215,12 @@ Edit Repo Info
     Page Should Contain  test_description_info
     Capture Page Screenshot  RepoInfo.png
 
-
+Add Labels To Tag
+    [Arguments]  ${tagName}  ${labelName}
+    Click Element  xpath=//clr-dg-row[contains(.,"${tagName}")]//label
+    Sleep  1
+    Click Element  xpath=//clr-dg-action-bar//clr-dropdown//button
+    Sleep  1
+    Click Element  xpath=//clr-dropdown//div//label[contains(.,"${labelName}")]
+    Sleep  3
+    Page Should Contain Element  xpath=//clr-dg-row//label[contains(.,"${labelName}")]

tests/robot-cases/Group11-Nightly/Nightly.robot

@@ -266,6 +266,52 @@ Test Case - Edit Token Expire
     Modify Token Expiration  30
     Close Browser
 
+Test Case - Create A New Labels
+    Init Chrome Driver
+    ${d}=    Get Current Date
+    Sign In Harbor  ${HARBOR_URL}  ${HARBOR_ADMIN}  ${HARBOR_PASSWORD}
+    Switch To System Labels
+    Create New Labels  label_${d}
+    Close Browser
+
+Test Case - Update Label
+   Init Chrome Driver
+   ${d}=    Get Current Date
+
+   Sign In Harbor  ${HARBOR_URL}  ${HARBOR_ADMIN}  ${HARBOR_PASSWORD}
+   Switch To System Labels
+   Create New Labels  label_${d}
+   Sleep  3
+   ${d1}=    Get Current Date
+   Update A Label  label_${d}
+   Close Browser
+
+Test Case - Delete Label
+    Init Chrome Driver
+    ${d}=    Get Current Date
+    Sign In Harbor  ${HARBOR_URL}  ${HARBOR_ADMIN}  ${HARBOR_PASSWORD}
+    Switch To System Labels
+    Create New Labels  label_${d}
+    Sleep  3
+    Delete A Label
+    Close Browser
+
+TestCase - Add Labels To A Repo
+    Init Chrome Driver
+    ${d}=   Get Current Date    result_format=%m%s
+    Create An New User  ${HARBOR_URL}  test${d}  test${d}@vmware.com  test${d}  Test1@34  harbor
+    Create An New Project  project${d}
+    Push Image  ${ip}  test${d}  Test1@34  project${d}  vmware/photon:1.0
+    Sleep  2
+    #Add labels
+    Switch To System Labels
+    Create New Labels  label_${d}
+    Sleep  2
+    Go Into Project  project${d}
+    Go Into Repo  project${d}/vmware/photon
+    Add Labels To Tag  1.0  label_${d}
+    Close Browser
+
 Test Case - Scan A Tag In The Repo
     Init Chrome Driver
     ${d}=  get current date  result_format=%m%s