From 60f83843e306e9572cf6a7a35761fbcc6d52eb7d Mon Sep 17 00:00:00 2001
From: Mia ZHOU <meinaz@vmware.com>
Date: Wed, 25 Jul 2018 15:05:14 +0800
Subject: [PATCH] Fix configuration->label->new sometimes not enable.

Problem description:
1 label enable sometimes not correct. User input good label names, submit button still disabled.
2 Some times click submit, not working.

Fix:

1 After review the new label code. It trying to use a global variable to control the progress of validation. In the progress of validation, it will disabled the submit button.

This will cause user bad experience. Just remove this logic.

2 Backend use fuzzy matching, the frontend logic did not change before. So when user already have a user name called "abcd",and then input another name called "abc" it will report duplicated name error.
This logic still need change.

3 This is the first version of refine. Can be refine again if find some other logic not correct.
---
 .../create-edit-label.component.html          |   2 +-
 .../create-edit-label.component.scss          | 122 ++++++++----------
 .../create-edit-label.component.ts            |  24 ++--
 .../repository-gridview.component.html        |   2 +-
 4 files changed, 68 insertions(+), 82 deletions(-)

diff --git a/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.html b/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.html
index 4cee09078..7596d4a64 100644
--- a/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.html
+++ b/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.html
@@ -16,7 +16,7 @@
                 <label for="color">{{'LABEL.COLOR' | translate}}</label>
                 <clr-dropdown [clrCloseMenuOnItemClick]="false">
                     <button type="button" class="btn btn-outline btnColor btn-sm" clrDropdownTrigger>
-                        <clr-icon shape="caret down" size="20" style='right:2px; width:24px; height:18px;'></clr-icon>
+                        <clr-icon shape="angle down"></clr-icon>
                     </button>
                     <clr-dropdown-menu *clrIfOpen>
                         <label class="dropdown-item" (click)="labelModel.color=i.color" *ngFor="let i of labelColor"
diff --git a/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.scss b/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.scss
index be4937240..cd0789200 100644
--- a/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.scss
+++ b/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.scss
@@ -1,77 +1,65 @@
-  .form-group-label-override {
-    font-size: 14px;
-    font-weight: 400;
-  }
-
-  form {
+form {
     margin-bottom: -10px;
     padding-top: 0;
     margin-top: 20px;
     width: 100%;
     background-color: #eee;
     border: 1px solid #ccc;
-  }
 
-  form .form-group {
-    display: inline-flex;
-    padding-left: 70px;
-  }
+    section {
+      padding: .5rem 0;
+    }
+  
+    section>label {
+      margin-left: 20px;
+    }
 
-  form .form-group>label:first-child {
-    width: auto;
-  }
+    .btnColor {
+      margin: 0 !important;
+      padding: 0 !important;
+      width: 26px;
+      height: 22px;
+      min-width: 26px;
+    }
 
-  section {
-    padding: .5rem 0;
-  }
+    .colorPanel {
+      span {
+        margin: 5px 4px;
+        width: 30px;
+        height: 24px;
+        text-align: center;
+        line-height: 24px;
+        font-size: 12px;
+        border: 1px solid #A1A1A1;
+      }
+    }
+  
+    .dropdown-menu {
+      display: inline-block;
+      width: 166px;
+      padding: 6px;
+      .dropdown-item {
+        display: inline-block;
+        margin: 2px 4px;
+        padding: 0;
+        width: 30px;
+        height: 24px;
+        text-align: center;
+        line-height: 24px;
+        border: 0;
+        color: white;
+        font-size: 12px;
+      }
+    }
+  
+    .dropdown .dropdown-toggle.btn {
+      padding: 0 !important;
+    }
 
-  section>label {
-    margin-left: 20px;
-  }
-
-
-
-  .btnColor {
-    margin: 0 !important;
-    padding: 0 !important;
-    width: 26px;
-    height: 22px;
-    min-width: 26px;
-  }
-
-  .colorPanel span {
-    margin: 5px 4px;
-    width: 30px;
-    height: 24px;
-    text-align: center;
-    line-height: 24px;
-    font-size: 12px;
-    border: 1px solid #A1A1A1;
-  }
-
-  .dropdown-menu {
-    display: inline-block;
-    width: 166px;
-    padding: 6px;
-  }
-
-  .dropdown-menu .dropdown-item {
-    display: inline-block;
-    margin: 2px 4px;
-    padding: 0px;
-    width: 30px;
-    height: 24px;
-    text-align: center;
-    line-height: 24px;
-  }
-
-  .dropdown-item {
-    border: 0px;
-    color: white;
-    font-size: 12px;
-  }
-
-  .dropdown .dropdown-toggle.btn {
-    padding: 0 !important;
-  }
-  .borderSty{border: 1px solid #A1A1A1 !important; line-height: 22px;}
\ No newline at end of file
+    .borderSty
+    {
+      border: 1px solid #A1A1A1 !important; 
+      line-height: 22px;
+    }
+}
+  
\ No newline at end of file
diff --git a/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.ts b/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.ts
index deccdc6f6..a6fa8d9d6 100644
--- a/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.ts
+++ b/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.ts
@@ -46,7 +46,6 @@ export class CreateEditLabelComponent implements OnInit, OnDestroy {
   labelModel: Label = this.initLabel();
   labelId = 0;
 
-  checkOnGoing: boolean;
   isLabelNameExist = false;
 
   nameChecker = new Subject<string>();
@@ -66,26 +65,24 @@ export class CreateEditLabelComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.nameChecker.debounceTime(500).subscribe((name: string) => {
-      this.checkOnGoing = true;
-      let labelName = this.currentForm.controls["name"].value;
       toPromise<Label[]>(
-        this.labelService.getLabels(this.scope, this.projectId, labelName)
+        this.labelService.getLabels(this.scope, this.projectId, name)
       )
         .then(targets => {
+          this.isLabelNameExist = false;
           if (targets && targets.length) {
-            this.isLabelNameExist = true;
-          } else {
-            this.isLabelNameExist = false;
+            if (targets.find((target) => {
+              return target.name === name;
+            })) {
+              this.isLabelNameExist = true;
+            }
           }
-          this.checkOnGoing = false;
         })
         .catch(error => {
-          this.checkOnGoing = false;
           this.errorHandler.error(error);
         });
-      setTimeout(() => {
-        setInterval(() => this.ref.markForCheck(), 100);
-      }, 3000);
+      let hnd = setInterval(() => this.ref.markForCheck(), 100);
+      setTimeout(() => clearInterval(hnd), 5000);
     });
   }
 
@@ -127,7 +124,6 @@ export class CreateEditLabelComponent implements OnInit, OnDestroy {
 
   public get isValid(): boolean {
     return !(
-      this.checkOnGoing ||
       this.isLabelNameExist ||
       !(this.currentForm && this.currentForm.valid) ||
       !this.hasChanged ||
@@ -138,6 +134,8 @@ export class CreateEditLabelComponent implements OnInit, OnDestroy {
   existValid(text: string): void {
     if (text) {
       this.nameChecker.next(text);
+    } else {
+      this.isLabelNameExist = false;
     }
   }
 
diff --git a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.html b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.html
index 7f9c330dd..2a1d33a9c 100644
--- a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.html
+++ b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.html
@@ -9,7 +9,7 @@
                         <clr-icon [ngClass]="{'is-highlight': isCardView || isHovering('card') }" shape="view-cards"></clr-icon>
                     </span>
                     <span class="list-btn" (click)="showCard(false)" (mouseenter) ="mouseEnter('list') "  (mouseleave) ="mouseLeave('list')">
-                        <clr-icon [ngClass]="{'is-highlight': !isCardView || isHovering('list') }"shape="view-list"></clr-icon>
+                        <clr-icon [ngClass]="{'is-highlight': !isCardView || isHovering('list') }" shape="view-list"></clr-icon>
                     </span>
                     <span class="filter-divider"></span>
                     <span class="refresh-btn" (click)="refresh()"><clr-icon shape="refresh"></clr-icon></span>