replace filter with hbr-filter from harbor-ui lib

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

@@ -16,9 +16,7 @@ import {
   Output,
   EventEmitter,
   ViewChild,
-  AfterViewChecked,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef
+  AfterViewChecked
 } from '@angular/core';
 import { NgForm } from '@angular/forms';
 
@@ -43,8 +41,7 @@ const FAKE_PASSWORD = 'rjGcfuRu';
 @Component({
   selector: 'create-edit-endpoint',
   template: CREATE_EDIT_ENDPOINT_TEMPLATE,
-  styles: [CREATE_EDIT_ENDPOINT_STYLE],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  styles: [CREATE_EDIT_ENDPOINT_STYLE]
 })
 export class CreateEditEndpointComponent implements AfterViewChecked {
 
@@ -89,8 +86,7 @@ export class CreateEditEndpointComponent implements AfterViewChecked {
   constructor(
     private endpointService: EndpointService,
     private errorHandler: ErrorHandler,
-    private translateService: TranslateService,
-    private ref: ChangeDetectorRef) { }
+    private translateService: TranslateService) { }
 
   openCreateEditTarget(editable: boolean, targetId?: number | string) {
 

src/ui_ng/lib/src/replication/replication.component.css.ts

@@ -9,7 +9,7 @@ export const REPLICATION_STYLE: string = `
 
 .option-left {
   padding-left: 16px;
-  margin-top: 12px;
+  margin-top: 18px;
 }
 .option-right {
   padding-right: 16px;

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

@@ -1,13 +1,13 @@
 export const REPLICATION_TEMPLATE: string = `
 <div class="row">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-    <div class="row flex-items-xs-between" style="height:24px;">
+    <div class="row flex-items-xs-between" style="height:32px;">
       <div class="flex-xs-middle option-left">
         <button *ngIf="projectId" class="btn btn-link" (click)="openModal()"><clr-icon shape="add"></clr-icon> {{'REPLICATION.REPLICATION_RULE' | translate}}</button>
         <create-edit-rule [projectId]="projectId" (reload)="reloadRules($event)"></create-edit-rule>
       </div>
       <div class="flex-xs-middle option-right">
-        <div class="select" style="float: left; top: 9px;">
+        <div class="select" style="float: left; top: 8px;">
           <select (change)="doFilterRuleStatus($event)">
             <option *ngFor="let r of ruleStatus" value="{{r.key}}">{{r.description | translate}}</option>
           </select>

src/ui_ng/src/app/log/audit-log.component.css

@@ -1,5 +1,11 @@
 .option-right {
-  padding-right: 16px;
-  margin-top: 22px;
-  margin-bottom: 2px;
+    padding-right: 16px;
+}
+
+.refresh-btn {
+    cursor: pointer;
+}
+
+.refresh-btn:hover {
+    color: #007CBB;
 }

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

@@ -1,62 +1,64 @@
 <div class="row">
-  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">  
-    <div class="row flex-items-xs-right option-right">
-      <div class="flex-xs-middle">
-        <button class="btn btn-link" (click)="toggleOptionalName(currentOption)">{{toggleName[currentOption] | translate}}</button>
-        <grid-filter filterPlaceholder='{{"AUDIT_LOG.FILTER_PLACEHOLDER" | translate}}' (filter)="doSearchAuditLogs($event)"></grid-filter>
-        <a href="javascript:void(0)" (click)="refresh()"><clr-icon shape="refresh"></clr-icon></a>
-      </div>
-    </div>
-    <div class="row flex-items-xs-right option-right" [hidden]="currentOption === 0">
-      <clr-dropdown [clrMenuPosition]="'bottom-left'" >
-        <button class="btn btn-link" clrDropdownToggle>
+    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="top:12px;">
+        <div class="row flex-items-xs-right option-right">
+            <div class="flex-xs-middle">
+                <button class="btn btn-link" (click)="toggleOptionalName(currentOption)">{{toggleName[currentOption] | translate}}</button>
+                <hbr-filter [withDivider]="true" filterPlaceholder='{{"AUDIT_LOG.FILTER_PLACEHOLDER" | translate}}' (filter)="doSearchAuditLogs($event)"></hbr-filter>
+                <span class="refresh-btn" (click)="refresh()">
+                    <clr-icon shape="refresh"></clr-icon>
+                </span>
+            </div>
+        </div>
+        <div class="row flex-items-xs-right option-right" [hidden]="currentOption === 0">
+            <clr-dropdown [clrMenuPosition]="'bottom-left'">
+                <button class="btn btn-link" clrDropdownToggle>
           {{'AUDIT_LOG.OPERATIONS' | translate}}
           <clr-icon shape="caret down"></clr-icon>
         </button>
-        <div class="dropdown-menu">
-          <a href="javascript:void(0)" clrDropdownItem *ngFor="let f of filterOptions" (click)="toggleFilterOption(f.key)">
-            <clr-icon shape="check" [hidden]="!f.checked"></clr-icon>
-            <ng-template [ngIf]="!f.checked"><span style="display: inline-block;width: 16px;"></span></ng-template>
-            {{f.description | translate}}
-          </a> 
-        </div>
-      </clr-dropdown>
-      <div class="flex-xs-middle">
-          <clr-icon shape="date"></clr-icon>
-          <label for="fromDateInput" aria-haspopup="true" role="tooltip" [class.invalid]="fromTimeInvalid" class="tooltip tooltip-validation invalid tooltip-sm">
+                <div class="dropdown-menu">
+                    <a href="javascript:void(0)" clrDropdownItem *ngFor="let f of filterOptions" (click)="toggleFilterOption(f.key)">
+                        <clr-icon shape="check" [hidden]="!f.checked"></clr-icon>
+                        <ng-template [ngIf]="!f.checked"><span style="display: inline-block;width: 16px;"></span></ng-template>
+                        {{f.description | translate}}
+                    </a>
+                </div>
+            </clr-dropdown>
+            <div class="flex-xs-middle">
+                <clr-icon shape="date"></clr-icon>
+                <label for="fromDateInput" aria-haspopup="true" role="tooltip" [class.invalid]="fromTimeInvalid" class="tooltip tooltip-validation invalid tooltip-sm">
             <input id="fromDateInput" type="date" #fromTime="ngModel" name="from" [(ngModel)]="queryParam.fromTime" dateValidator placeholder="dd/mm/yyyy" (change)="doSearchByStartTime(fromTime.value)">
             <span *ngIf="fromTimeInvalid" class="tooltip-content">
                {{'AUDIT_LOG.INVALID_DATE' | translate }}
             </span>
           </label>
-          <clr-icon shape="date"></clr-icon>
-          <label for="toDateInput" aria-haspopup="true" role="tooltip" [class.invalid]="toTimeInvalid" class="tooltip tooltip-validation invalid tooltip-sm">
+                <clr-icon shape="date"></clr-icon>
+                <label for="toDateInput" aria-haspopup="true" role="tooltip" [class.invalid]="toTimeInvalid" class="tooltip tooltip-validation invalid tooltip-sm">
             <input id="toDateInput" type="date" #toTime="ngModel" name="to" [(ngModel)]="queryParam.toTime" dateValidator placeholder="dd/mm/yyyy" (change)="doSearchByEndTime(toTime.value)">
             <span *ngIf="toTimeInvalid" class="tooltip-content">
                {{'AUDIT_LOG.INVALID_DATE' | translate }}
             </span>
           </label>
-      </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 datagrid-margin-top ">
+        <clr-datagrid (clrDgRefresh)="retrieve($event)">
+            <clr-dg-column>{{'AUDIT_LOG.USERNAME' | translate}}</clr-dg-column>
+            <clr-dg-column>{{'AUDIT_LOG.REPOSITORY_NAME' | translate}}</clr-dg-column>
+            <clr-dg-column>{{'AUDIT_LOG.TAGS' | translate}}</clr-dg-column>
+            <clr-dg-column>{{'AUDIT_LOG.OPERATION' | translate}}</clr-dg-column>
+            <clr-dg-column>{{'AUDIT_LOG.TIMESTAMP' | translate}}</clr-dg-column>
+            <clr-dg-row *ngFor="let l of auditLogs">
+                <clr-dg-cell>{{l.username}}</clr-dg-cell>
+                <clr-dg-cell>{{l.repo_name}}</clr-dg-cell>
+                <clr-dg-cell>{{l.repo_tag}}</clr-dg-cell>
+                <clr-dg-cell>{{l.operation}}</clr-dg-cell>
+                <clr-dg-cell>{{l.op_time | date: 'short'}}</clr-dg-cell>
+            </clr-dg-row>
+            <clr-dg-footer>
+                {{totalRecordCount}} {{'AUDIT_LOG.ITEMS' | translate}}
+                <clr-dg-pagination [clrDgPageSize]="pageOffset" [clrDgTotalItems]="totalPage"></clr-dg-pagination>
+            </clr-dg-footer>
+        </clr-datagrid>
     </div>
-  </div>
-  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 datagrid-margin-top ">  
-    <clr-datagrid (clrDgRefresh)="retrieve($event)">
-      <clr-dg-column>{{'AUDIT_LOG.USERNAME' | translate}}</clr-dg-column>
-      <clr-dg-column>{{'AUDIT_LOG.REPOSITORY_NAME' | translate}}</clr-dg-column>
-      <clr-dg-column>{{'AUDIT_LOG.TAGS' | translate}}</clr-dg-column>
-      <clr-dg-column>{{'AUDIT_LOG.OPERATION' | translate}}</clr-dg-column>
-      <clr-dg-column>{{'AUDIT_LOG.TIMESTAMP' | translate}}</clr-dg-column>
-      <clr-dg-row *ngFor="let l of auditLogs">
-        <clr-dg-cell>{{l.username}}</clr-dg-cell>
-        <clr-dg-cell>{{l.repo_name}}</clr-dg-cell>
-        <clr-dg-cell>{{l.repo_tag}}</clr-dg-cell>
-        <clr-dg-cell>{{l.operation}}</clr-dg-cell>
-        <clr-dg-cell>{{l.op_time | date: 'short'}}</clr-dg-cell>
-      </clr-dg-row>
-      <clr-dg-footer>
-        {{totalRecordCount}} {{'AUDIT_LOG.ITEMS' | translate}}
-        <clr-dg-pagination [clrDgPageSize]="pageOffset" [clrDgTotalItems]="totalPage"></clr-dg-pagination>
-      </clr-dg-footer>
-    </clr-datagrid>
-  </div>
 </div>

src/ui_ng/src/app/project/member/member.component.css

@@ -1,8 +1,15 @@
 .option-left {
-  padding-left: 16px;
-  margin-top: 24px;
+    padding-left: 16px;
 }
+
 .option-right {
-  padding-right: 16px;
-  margin-top: 18px;
+    padding-right: 16px;
+}
+
+.refresh-btn {
+    cursor: pointer;
+}
+
+.refresh-btn:hover {
+    color: #007CBB;
 }

src/ui_ng/src/app/project/member/member.component.html

@@ -1,15 +1,15 @@
 <div class="row">
-    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="top: 8px;">
         <div class="row flex-items-xs-between">
-            <div class="flex-xs-middle option-left">
+            <div class="flex-xs-middle option-left" style="position: relative; top: 10px;">
                 <button *ngIf="hasProjectAdminRole" class="btn btn-link" (click)="openAddMemberModal()"><clr-icon shape="add"></clr-icon> {{'MEMBER.MEMBER' | translate }}</button>
                 <add-member [projectId]="projectId" (added)="addedMember($event)"></add-member>
             </div>
             <div class="flex-xs-middle option-right">
-                <grid-filter filterPlaceholder='{{"MEMBER.FILTER_PLACEHOLDER" | translate}}' (filter)="doSearch($event)" [currentValue]="searchMember"></grid-filter>
-                <a href="javascript:void(0)" (click)="refresh()">
+                <hbr-filter [withDivider]="true" filterPlaceholder='{{"MEMBER.FILTER_PLACEHOLDER" | translate}}' (filter)="doSearch($event)" [currentValue]="searchMember"></hbr-filter>
+                <span class="refresh-btn" (click)="refresh()">
                     <clr-icon shape="refresh"></clr-icon>
-                </a>
+                </span>
             </div>
         </div>
     </div>

src/ui_ng/src/app/project/project.component.css

@@ -4,10 +4,16 @@
 
 .option-left {
     padding-left: 16px;
-    margin-top: 12px;
 }
 
 .option-right {
     padding-right: 16px;
-    margin-top: 18px;
+}
+
+.refresh-btn {
+    cursor: pointer;
+}
+
+.refresh-btn:hover {
+    color: #007CBB;
 }

src/ui_ng/src/app/project/project.component.html

@@ -6,23 +6,23 @@
                 <statistics-panel></statistics-panel>
             </div>
         </div>
-        <div class="row flex-items-xs-between">
+        <div class="row flex-items-xs-between" style="height:32px;">
             <div class="option-left">
                 <button *ngIf="projectCreationRestriction" class="btn btn-link" (click)="openModal()"><clr-icon shape="add"></clr-icon> {{'PROJECT.PROJECT' | translate}}</button>
                 <create-project (create)="createProject($event)"></create-project>
             </div>
             <div class="option-right">
-                <div class="select" style="float: left;">
+                <div class="select" style="float: left; left:-6px; top:8px;">
                     <select (change)="doFilterProjects($event)">
                     <option value="0" [selected]="currentFilteredType === 0">{{projectTypes[0] | translate}}</option>
                     <option value="1">{{projectTypes[1] | translate}}</option>
                     <option value="2">{{projectTypes[2] | translate}}</option>
                   </select>
                 </div>
-                <grid-filter filterPlaceholder='{{"PROJECT.FILTER_PLACEHOLDER" | translate}}' (filter)="doSearchProjects($event)" [currentValue]="projectName"></grid-filter>
-                <a href="javascript:void(0)" (click)="refresh()">
+                <hbr-filter [withDivider]="true" filterPlaceholder='{{"PROJECT.FILTER_PLACEHOLDER" | translate}}' (filter)="doSearchProjects($event)" [currentValue]="projectName"></hbr-filter>
+                <span class="refresh-btn" (click)="refresh()">
                     <clr-icon shape="refresh"></clr-icon>
-                </a>
+                </span>
             </div>
         </div>
         <list-project [projects]="changedProjects" [filteredType]="projectTypes[currentFilteredType]" (toggle)="toggleProject($event)" (delete)="deleteProject($event)" (paginate)="retrieve($event)"></list-project>

src/ui_ng/src/app/repository/repository.component.html

@@ -1,13 +1,15 @@
 <div class="row">
-  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">  
-    <div class="row flex-items-xs-right option-right">
-      <div class="flex-xs-middle">
-        <grid-filter filterPlaceholder="{{'REPOSITORY.FILTER_FOR_REPOSITORIES' | translate}}" (filter)="doSearchRepoNames($event)"></grid-filter>  
-        <a href="javascript:void(0)" (click)="refresh()"><clr-icon shape="refresh"></clr-icon></a>
-      </div>
+    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+        <div class="row flex-items-xs-right option-right">
+            <div class="flex-xs-middle">
+                <hbr-filter [withDivider]="true" filterPlaceholder="{{'REPOSITORY.FILTER_FOR_REPOSITORIES' | translate}}" (filter)="doSearchRepoNames($event)"></hbr-filter>
+                <a href="javascript:void(0)" (click)="refresh()">
+                    <clr-icon shape="refresh"></clr-icon>
+                </a>
+            </div>
+        </div>
+    </div>
+    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+        <list-repository [projectId]="projectId" [repositories]="changedRepositories" (delete)="deleteRepo($event)" [hasProjectAdminRole]="hasProjectAdminRole" (paginate)="retrieve($event)"></list-repository>
     </div>
-  </div>
-  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">  
-    <list-repository [projectId]="projectId" [repositories]="changedRepositories" (delete)="deleteRepo($event)" [hasProjectAdminRole]="hasProjectAdminRole" (paginate)="retrieve($event)"></list-repository>
-  </div>
 </div>

src/ui_ng/src/app/shared/filter/filter.component.css

@@ -1,4 +0,0 @@
-.filter-icon {
-    position: relative;
-    right: -12px;
-}

src/ui_ng/src/app/shared/filter/filter.component.html

@@ -1,4 +0,0 @@
-<span>
-    <clr-icon shape="filter" size="12" class="is-solid filter-icon"></clr-icon>
-    <input type="text" style="padding-left: 15px;" (keyup)="valueChange()" placeholder="{{placeHolder}}" [(ngModel)]="currentValue"/>
-</span>

src/ui_ng/src/app/shared/filter/filter.component.ts

@@ -1,55 +0,0 @@
-// Copyright (c) 2017 VMware, Inc. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//    http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
-import { Subject } from 'rxjs/Subject';
-import { Observable } from 'rxjs/Observable';
-
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
-
-
-@Component({
-    selector: 'grid-filter',
-    templateUrl: 'filter.component.html',
-    styleUrls: ['filter.component.css']
-})
-
-export class FilterComponent implements OnInit {
-    
-    placeHolder: string = "";
-    filterTerms = new Subject<string>();
-
-    @Output("filter") private filterEvt = new EventEmitter<string>();
-
-    @Input() currentValue: string;
-    @Input("filterPlaceholder")
-    public set flPlaceholder(placeHolder: string) {
-        this.placeHolder = placeHolder;
-    }
-
-    ngOnInit(): void {
-        this.filterTerms
-        .debounceTime(500)
-        //.distinctUntilChanged()
-        .subscribe(terms => {
-            this.filterEvt.emit(terms);
-        });
-        
-    }
-
-    valueChange(): void {
-        //Send out filter terms
-        this.filterTerms.next(this.currentValue.trim());
-    }
-}

src/ui_ng/src/app/shared/shared.module.ts

@@ -20,7 +20,6 @@ import { MessageComponent } from '../global-message/message.component';
 
 import { MessageService } from '../global-message/message.service';
 import { MaxLengthExtValidatorDirective } from './max-length-ext.directive';
-import { FilterComponent } from './filter/filter.component';
 import { TranslateModule } from "@ngx-translate/core";
 
 import { RouterModule } from '@angular/router';
@@ -81,7 +80,6 @@ const uiLibConfig: IServiceConfig = {
   declarations: [
     MessageComponent,
     MaxLengthExtValidatorDirective,
-    FilterComponent,
     ConfirmationDialogComponent,
     NewUserFormComponent,
     InlineAlertComponent,
@@ -101,7 +99,6 @@ const uiLibConfig: IServiceConfig = {
     HarborLibraryModule,
     MessageComponent,
     MaxLengthExtValidatorDirective,
-    FilterComponent,
     TranslateModule,
     ConfirmationDialogComponent,
     NewUserFormComponent,

src/ui_ng/src/app/user/user.component.css

@@ -27,11 +27,15 @@
 
 .refresh-btn {
     position: absolute;
-    right: 2px;
-    top: 12px;
+    right: 6px;
+    top: 17px;
     cursor: pointer;
 }
 
+.refresh-btn:hover {
+    color: #007CBB;
+}
+
 .hide-create {
     visibility: hidden !important;
 }

src/ui_ng/src/app/user/user.component.html

@@ -5,7 +5,7 @@
             <span>
         <button [class.hide-create]="!canCreateUser" type="submit" class="btn btn-link custom-add-button" (click)="addNewUser()"><clr-icon shape="add"></clr-icon>  {{'USER.ADD_ACTION' | translate}}</button>
       </span>
-            <grid-filter class="filter-pos" filterPlaceholder='{{"USER.FILTER_PLACEHOLDER" | translate}}' (filter)="doFilter($event)" [currentValue]="currentTerm"></grid-filter>
+            <hbr-filter [withDivider]="true" class="filter-pos" filterPlaceholder='{{"USER.FILTER_PLACEHOLDER" | translate}}' (filter)="doFilter($event)" [currentValue]="currentTerm"></hbr-filter>
             <span class="refresh-btn" (click)="refresh()">
         <clr-icon shape="refresh" [hidden]="inProgress" ng-disabled="inProgress"></clr-icon>
         <span class="spinner spinner-inline" [hidden]="inProgress === false"></span>