Chaitali/add server slider (#5728)

* converted server modal into slider Signed-off-by: chaitali-mane <cmane@progress.com> * Updated test cases Signed-off-by: chaitali-mane <cmane@progress.com>
chef · May 4, 2022 · bc83fde · bc83fde
1 parent 0f1897b
commit bc83fde
Showing 1 changed file with 96 additions and 79 deletions.
diff --git a/.../app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.html b/.../app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.html
@@ -33,86 +33,103 @@ <h2 slot="title">Add Chef Infra Server </h2>
           </chef-form-field>
           <span class="detail light">Don't worry, server names can be changed later.</span>
         </div>
-        <chef-toolbar>
-          <chef-button tertiary (click)="modifyID = true" id="edit-button-object-modal" data-cy="edit-button">Edit ID</chef-button>
-        </chef-toolbar>
-      </div>
-    </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 *ngIf="modifyID" class="id-margin" data-cy="chef-form-field">
+          <chef-form-field>
+            <label>
+              <span class="label">ID <span aria-hidden="true">*</span></span>
+              <input
+                chefInput
+                formControlName="id"
+                type="text"
+                (keyup)="handleInput($event)"
+                id="id-input"
+                data-cy="add-id"
+                autocomplete="off"/>
+            </label>
+            <chef-error *ngIf="createForm.get('id').hasError('maxlength') && createForm.get('id').dirty">
+              ID must be 64 characters or less.
+            </chef-error>
+            <chef-error *ngIf="createForm.get('id').hasError('required') && createForm.get('id').dirty">
+              ID is required.
+            </chef-error>
+            <chef-error *ngIf="createForm.get('id').hasError('pattern') && createForm.get('id').dirty">
+              Only lowercase letters, numbers, hyphens, and underscores are allowed.
+            </chef-error>
+            <chef-error *ngIf="conflictError">
+              Server ID "{{createForm.get('id').value}}" already exists.
+            </chef-error>
+          </chef-form-field>
+          <span class="detail light">Server IDs are unique, permanent, and cannot be changed later.</span>
+        </div>
+        <div *ngIf="!modifyID" class="id-margin">
+          <div id="id-fields">
+            <span class="key-label">ID:&nbsp;</span>
+            <span data-cy="id-label" class="object-id">{{ this.createForm?.value.id }}</span>
           </div>
-        </label>
-      </chef-form-field>
+          <chef-toolbar>
+            <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">
+          <chef-form-field>
+            <label>
+              <span class="label">FQDN <span aria-hidden="true">*</span></span>
+              <input
+                chefInput
+                formControlName="fqdn"
+                data-cy="add-fqdn"
+                type="text"
+                id="fqdn-input"
+                (keyup)="handleInput($event)"
+                autocomplete="off"/>
+            </label>
+            <chef-error
+            *ngIf="createForm.get('fqdn').hasError('required') && createForm.get('fqdn').dirty">
+            FQDN is required.
+            </chef-error>
+            <chef-error
+            *ngIf="createForm.get('fqdn').hasError('pattern')">
+            FQDN is invalid.
+            </chef-error>
+          </chef-form-field>
+        </div>
+        <div class="input-margin">
+          <chef-form-field>
+            <label>
+              <span class="label">IP Address <span aria-hidden="true">*</span></span>
+              <input
+                chefInput
+                formControlName="ip_address"
+                type="text"
+                data-cy="add-ip-address"
+                id="ip-address-input"
+                (keyup)="handleInput($event)"
+                autocomplete="off"
+              />
+            </label>
+            <chef-error
+              *ngIf="createForm.get('ip_address').hasError('required') && createForm.get('ip_address').dirty">
+              IP Address is required.
+            </chef-error>
+            <chef-error
+              *ngIf="createForm.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"
+            primary
+            data-cy="add-button"
+            id="create-button-object-modal"
+            (click)="createChefServer()">
+            <chef-loading-spinner *ngIf="creating"></chef-loading-spinner>
+            <span *ngIf="!creating">Add Chef Infra Server</span>
+            <span *ngIf="creating">Adding Chef Infra Server ...</span>
+          </chef-button>
+        </div>
+      </form>
     </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>
-            <input
-              chefInput
-              formControlName="fqdn"
-              data-cy="add-fqdn"
-              type="text"
-              id="fqdn-input"
-              (keyup)="handleInput($event)"
-              autocomplete="off"/>
-          </label>
-          <chef-error
-          *ngIf="fqdnForm.get('fqdn').hasError('required') && fqdnForm.get('fqdn').dirty">
-          FQDN is required.
-          </chef-error>
-          <chef-error
-          *ngIf="fqdnForm.get('fqdn').hasError('pattern')">
-          FQDN is invalid.
-          </chef-error>
-        </chef-form-field>
-      </div>
-    </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>
-            <input
-              chefInput
-              formControlName="ip_address" 
-              type="text"
-              data-cy="add-ip-address"
-              id="ip-address-input"
-              (keyup)="handleInput($event)"
-              autocomplete="off"
-            />
-          </label>
-          <chef-error
-            *ngIf="ipForm.get('ip_address').hasError('required') && ipForm.get('ip_address').dirty">
-            IP Address is required.
-          </chef-error>
-          <chef-error
-            *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)="closeEvent()">Cancel</chef-button>
-        <chef-button [disabled]="!createForm?.valid || creating || conflictError || (selected === 'fqdn') ? !fqdnForm?.valid : !ipForm?.valid"
-          primary
-          data-cy="add-button"
-          id="create-button-object-modal"
-          (click)="createChefServer()">
-          <chef-loading-spinner *ngIf="creating"></chef-loading-spinner>
-          <span *ngIf="!creating">Add Chef Infra Server</span>
-          <span *ngIf="creating">Adding Chef Infra Server ...</span>
-        </chef-button>
-      </div>
-    </form>
   </div>
 </div>