From 069f884a7cbc531eb2ddff9c28749d6a2ffc8975 Mon Sep 17 00:00:00 2001
From: Yogi_Wang <yawang@vmware.com>
Date: Wed, 18 Sep 2019 15:13:44 +0800
Subject: [PATCH] Supplement group ui Signed-off-by: Yogi_Wang
 <yawang@vmware.com>

---
 .../add-group-modal.component.html            | 59 +++++++------------
 .../add-group-modal.component.scss            |  3 +
 .../add-group-modal.component.ts              | 11 +---
 .../member/add-group/add-group.component.ts   |  2 +-
 4 files changed, 25 insertions(+), 50 deletions(-)

diff --git a/src/portal/src/app/group/add-group-modal/add-group-modal.component.html b/src/portal/src/app/group/add-group-modal/add-group-modal.component.html
index b3dca6233..ecd5acf87 100644
--- a/src/portal/src/app/group/add-group-modal/add-group-modal.component.html
+++ b/src/portal/src/app/group/add-group-modal/add-group-modal.component.html
@@ -4,50 +4,31 @@
     <h3 class="modal-title" *ngIf="mode !== 'create'">{{'GROUP.EDIT' | translate}}</h3>
 
     <div class="modal-body">
-        <form class="form" #groupForm="ngForm">
-            <section class="form-block">
-                <div class="form-group"  *ngIf="isLdapMode">
+        <form class="clr-form clr-form-horizontal" #groupForm="ngForm">
+            <section>
+                <clr-input-container *ngIf="isLdapMode">
                     <label for="ldap_group_dn" class="required">{{ 'GROUP.GROUP_DN' | translate}}</label>
-                    <label for="ldap_group_dn"
-                    aria-haspopup="true"
-                    role="tooltip"
-                    class="tooltip tooltip-validation tooltip-sm tooltip-right" 
-                    [class.invalid]="isDNInvalid">
-                        <input type="text" id="ldap_group_dn" name="ldap_group_dn"
-                        required
-                        [disabled]="mode !== 'create'"
-                        [(ngModel)]="group.ldap_group_dn"
-                        #groupDN="ngModel">
-                        <span class="tooltip-content">
-                            {{dnTooltip | translate}}
-                        </span>
-                    </label>
-                </div>
-                <div class="form-group"  *ngIf="isLdapMode">
-                    <label for="type">{{'GROUP.TYPE' | translate}}</label>
-                    <label id="type">LDAP</label>
-                </div>
-                <div class="form-group">
-                    <label for="group_name" class="required">{{'GROUP.NAME' | translate}}</label>
-                    <label for="group_name"
-                    aria-haspopup="true"
-                    role="tooltip"
-                    class="tooltip tooltip-validation tooltip-sm tooltip-right"
-                    [class.invalid]="isNameInvalid">
-                        <input type="text" id="group_name" name="group_name"
-                        required
-                        [(ngModel)]="group.group_name"
-                        #groupName="ngModel">
-                        <span class="tooltip-content">
-                            {{dnTooltip | translate}}
-                        </span>
-                    </label>
+                    <input clrInput type="text" id="ldap_group_dn" name="ldap_group_dn" required
+                        [disabled]="mode !== 'create'" [(ngModel)]="group.ldap_group_dn" #groupDN="ngModel" />
+                    <clr-control-error>{{dnTooltip | translate}}</clr-control-error>
+                </clr-input-container>
+                <div class="clr-form-control" *ngIf="isLdapMode">
+                    <label class="clr-control-label" for="type">{{'GROUP.TYPE' | translate}}</label>
+                    <label class="padding-left-6" id="type">{{'GROUP.LDAP_TYPE' | translate}}</label>
                 </div>
+                <clr-input-container *ngIf="isLdapMode">
+                    <label for="group_name" class="required">{{ 'GROUP.NAME' | translate}}</label>
+                    <input clrInput type="text" id="group_name" name="group_name" required
+                        [(ngModel)]="group.group_name" #groupName="ngModel" />
+                    <clr-control-error>{{dnTooltip | translate}}</clr-control-error>
+                </clr-input-container>
             </section>
         </form>
     </div>
     <div class="modal-footer">
-        <button type="button" class="btn btn-outline" (click)="close()">{{'BUTTON.CANCEL' | translate | translate}}</button>
-        <button type="button" class="btn btn-primary" [disabled]="!isFormValid"  (click)="save()">{{'BUTTON.SAVE' | translate | translate}}</button>
+        <button type="button" class="btn btn-outline"
+            (click)="close()">{{'BUTTON.CANCEL' | translate | translate}}</button>
+        <button type="button" class="btn btn-primary" [disabled]="!isFormValid"
+            (click)="save()">{{'BUTTON.SAVE' | translate | translate}}</button>
     </div>
 </clr-modal>
\ No newline at end of file
diff --git a/src/portal/src/app/group/add-group-modal/add-group-modal.component.scss b/src/portal/src/app/group/add-group-modal/add-group-modal.component.scss
index e69de29bb..a28413c24 100644
--- a/src/portal/src/app/group/add-group-modal/add-group-modal.component.scss
+++ b/src/portal/src/app/group/add-group-modal/add-group-modal.component.scss
@@ -0,0 +1,3 @@
+.padding-left-6 {
+  padding-left: 6px;
+}
\ No newline at end of file
diff --git a/src/portal/src/app/group/add-group-modal/add-group-modal.component.ts b/src/portal/src/app/group/add-group-modal/add-group-modal.component.ts
index 437c606d7..49fcabc8a 100644
--- a/src/portal/src/app/group/add-group-modal/add-group-modal.component.ts
+++ b/src/portal/src/app/group/add-group-modal/add-group-modal.component.ts
@@ -25,7 +25,7 @@ export class AddGroupModalComponent implements OnInit, OnDestroy {
 
   formChangeSubscription: Subscription;
 
-  @ViewChild('groupForm', {static: false})
+  @ViewChild('groupForm', { static: true })
   groupForm: NgForm;
 
   submitted = false;
@@ -55,15 +55,6 @@ export class AddGroupModalComponent implements OnInit, OnDestroy {
 
   ngOnDestroy() { }
 
-  public get isDNInvalid(): boolean {
-    let dnControl = this.groupForm.controls['ldap_group_dn'];
-    return dnControl && dnControl.invalid && (dnControl.dirty || dnControl.touched);
-  }
-  public get isNameInvalid(): boolean {
-    let dnControl = this.groupForm.controls['group_name'];
-    return dnControl && dnControl.invalid && (dnControl.dirty || dnControl.touched);
-  }
-
   public get isFormValid(): boolean {
     return this.groupForm.valid;
   }
diff --git a/src/portal/src/app/project/member/add-group/add-group.component.ts b/src/portal/src/app/project/member/add-group/add-group.component.ts
index a37bc8493..7b35546af 100644
--- a/src/portal/src/app/project/member/add-group/add-group.component.ts
+++ b/src/portal/src/app/project/member/add-group/add-group.component.ts
@@ -41,7 +41,7 @@ export class AddGroupComponent implements OnInit {
   @Input() memberList: Member[] = [];
   @Output() added = new EventEmitter<boolean>();
 
-  @ViewChild('groupForm', {static: false})
+  @ViewChild('groupForm', { static: false })
   groupForm: NgForm;
 
   constructor(