Merge pull request #9137 from jwangyangls/fix-group-clarity-ui

Supplement group ui

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">
+        <form class="clr-form clr-form-horizontal" #groupForm="ngForm">
-            <section class="form-block">
+            <section>
-                <div class="form-group"  *ngIf="isLdapMode">
+                <clr-input-container *ngIf="isLdapMode">
                     <label for="ldap_group_dn" class="required">{{ 'GROUP.GROUP_DN' | translate}}</label>
-                    <label for="ldap_group_dn"
+                    <input clrInput type="text" id="ldap_group_dn" name="ldap_group_dn" required
-                    aria-haspopup="true"
+                        [disabled]="mode !== 'create'" [(ngModel)]="group.ldap_group_dn" #groupDN="ngModel" />
-                    role="tooltip"
+                    <clr-control-error>{{dnTooltip | translate}}</clr-control-error>
-                    class="tooltip tooltip-validation tooltip-sm tooltip-right" 
+                </clr-input-container>
-                    [class.invalid]="isDNInvalid">
+                <div class="clr-form-control" *ngIf="isLdapMode">
-                        <input type="text" id="ldap_group_dn" name="ldap_group_dn"
+                    <label class="clr-control-label" for="type">{{'GROUP.TYPE' | translate}}</label>
-                        required
+                    <label class="padding-left-6" id="type">{{'GROUP.LDAP_TYPE' | translate}}</label>
-                        [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>
                 </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-outline"
-        <button type="button" class="btn btn-primary" [disabled]="!isFormValid"  (click)="save()">{{'BUTTON.SAVE' | translate | translate}}</button>
+            (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>

src/portal/src/app/group/add-group-modal/add-group-modal.component.scss

@@ -0,0 +1,3 @@
+.padding-left-6 {
+  padding-left: 6px;
+}

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;
   }

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(