From 7114c83b1acde171782fc532bf03c182117bf274 Mon Sep 17 00:00:00 2001
From: vinay sharma <vsharma@chef.io>
Date: Mon, 20 Sep 2021 20:09:47 +0530
Subject: [PATCH] Add changes for the create server slider (#5755)

* added some changes for the create server slider

Signed-off-by: Vinay Sharma <vsharma@chef.io>

* added some minor changes

Signed-off-by: Vinay Sharma <vsharma@chef.io>
---
 .../chef-servers-list.component.ts            |  3 +-
 .../create-chef-server-modal.component.html   | 31 ++++++++++++++-----
 .../create-chef-server-modal.component.scss   |  5 +--
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/components/automate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.ts b/components/automate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.ts
index 6c75a7302ea..20eb5f3636a 100644
--- a/components/automate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.ts
+++ b/components/automate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.ts
@@ -137,8 +137,7 @@ export class ChefServersListComponent implements OnInit, OnDestroy {
       ip_address: this.ipForm.controls['ip_address'].value?.trim() || ''
     };
     this.store.dispatch(new CreateServer(server));
-    this.creatingChefServer = false;
-    this.createChefServerForm.reset();
+    this.resetCreateModal();
   }
 
   private resetCreateModal(): void {
diff --git a/components/automate-ui/src/app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.html b/components/automate-ui/src/app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.html
index 4d364ec5ec6..68f22c98d5a 100644
--- a/components/automate-ui/src/app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.html
+++ b/components/automate-ui/src/app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.html
@@ -70,7 +70,22 @@ <h2 slot="title">Add Chef Infra Server </h2>
             <chef-button tertiary (click)="modifyID = true" id="edit-button-object-modal" data-cy="edit-button">Edit ID</chef-button>
           </chef-toolbar>
         </div>
-        <div class="input-margin">
+      </form>
+      <div class="input-margin">
+        <chef-form-field id="create-type">
+          <label>
+            <span class="label">Type <span aria-hidden="true">*</span></span>
+            <div class="version-dropdown">
+              <chef-select #li [value]="selected" (change)="updateFormDisplay(li.value)" data-cy="type">
+                <chef-option value="fqdn">FQDN</chef-option>
+                <chef-option value="ip">IP Address</chef-option>
+              </chef-select>
+            </div>
+          </label>
+        </chef-form-field>
+      </div>
+      <form [formGroup]="fqdnForm">
+        <div class="input-margin" *ngIf="selected === 'fqdn'">
           <chef-form-field>
             <label>
               <span class="label">FQDN <span aria-hidden="true">*</span></span>
@@ -84,16 +99,18 @@ <h2 slot="title">Add Chef Infra Server </h2>
                 autocomplete="off"/>
             </label>
             <chef-error
-            *ngIf="createForm.get('fqdn').hasError('required') && createForm.get('fqdn').dirty">
+            *ngIf="fqdnForm.get('fqdn').hasError('required') && fqdnForm.get('fqdn').dirty">
             FQDN is required.
             </chef-error>
             <chef-error
-            *ngIf="createForm.get('fqdn').hasError('pattern')">
+            *ngIf="fqdnForm.get('fqdn').hasError('pattern')">
             FQDN is invalid.
             </chef-error>
           </chef-form-field>
         </div>
-        <div class="input-margin">
+      </form>
+      <form [formGroup]="ipForm">
+        <div class="input-margin" *ngIf="selected === 'ip'">
           <chef-form-field>
             <label>
               <span class="label">IP Address <span aria-hidden="true">*</span></span>
@@ -108,18 +125,18 @@ <h2 slot="title">Add Chef Infra Server </h2>
               />
             </label>
             <chef-error
-              *ngIf="createForm.get('ip_address').hasError('required') && createForm.get('ip_address').dirty">
+              *ngIf="ipForm.get('ip_address').hasError('required') && ipForm.get('ip_address').dirty">
               IP Address is required.
             </chef-error>
             <chef-error
-              *ngIf="createForm.get('ip_address').hasError('pattern')">
+              *ngIf="ipForm.get('ip_address').hasError('pattern')">
               IP Address is invalid.
             </chef-error>
           </chef-form-field>
         </div>
         <div id="button-bar">
           <chef-button id="cancel-server-popup" tertiary [disabled]="creating" (click)="closeSeverSlider()">Cancel</chef-button>
-          <chef-button [disabled]="!createForm?.valid || creating || conflictError"
+          <chef-button [disabled]="!createForm?.valid || creating || conflictError || (selected === 'fqdn') ? !fqdnForm?.valid : !ipForm?.valid"
             primary
             data-cy="add-button"
             id="create-button-object-modal"
diff --git a/components/automate-ui/src/app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.scss b/components/automate-ui/src/app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.scss
index 0b7961d463c..656164839f1 100644
--- a/components/automate-ui/src/app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.scss
+++ b/components/automate-ui/src/app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.scss
@@ -105,13 +105,14 @@
     margin-right: 15px;
   }
 
-  chef-select {
+  ::ng-deep chef-select {
     font-size: 14px;
+    font-weight: 100;
+    width: 96%;
   }
 
   ::ng-deep chef-select .selected-value {
     height: 36px;
-    width: 464px;
     background: $chef-white;
     padding: 0.5em;
     border: 1px solid $chef-form-input;