WebUI key into add chef-server slider (#6357)

* web-ui-key Signed-off-by: sumanprogress <jiddiSuman.Yadav@progress.com> * Updated code for webui key Signed-off-by: Chaitali Mane <cmane@progress.com> * Updated style Signed-off-by: Chaitali Mane <cmane@progress.com> * Updated cypress test Signed-off-by: Chaitali Mane <cmane@progress.com> * Added back button Signed-off-by: Chaitali Mane <cmane@progress.com> * changed name to slider Signed-off-by: Chaitali Mane <cmane@progress.com> Co-authored-by: sumanprogress <jiddiSuman.Yadav@progress.com>
chef · May 2, 2022 · 104453a · 104453a
1 parent d799deb
commit 104453a
Show file tree

Hide file tree

Showing 13 changed files with 97 additions and 24 deletions.
diff --git a/components/automate-ui/src/app/entities/servers/server.actions.ts b/components/automate-ui/src/app/entities/servers/server.actions.ts
@@ -71,6 +71,7 @@ export interface CreateServerPayload {
   name: string;
   fqdn: string;
   ip_address: string;
+  webui_key: string;
 }
 
 export class CreateServer implements Action {

diff --git a/components/automate-ui/src/app/entities/servers/server.model.ts b/components/automate-ui/src/app/entities/servers/server.model.ts
@@ -4,6 +4,7 @@ export interface Server {
   fqdn: string;
   ip_address: string;
   orgs_count?: number;
+  webui_key?: string;
 }
 
 export interface User {

diff --git a/...ate-ui/src/app/modules/infra-proxy/chef-server-details/chef-server-details.component.html b/...ate-ui/src/app/modules/infra-proxy/chef-server-details/chef-server-details.component.html
@@ -27,7 +27,7 @@
         <chef-tab-selector [value]="tabValue" (change)="onSelectedTab($event)">
           <chef-option value='orgs' data-cy="orgs-tab">Orgs</chef-option>
           <app-authorized [allOf]="['/api/v0/infra/servers/{server_id}', 'put', [server?.id]]">
-            <chef-option value='users' data-cy="users-tab">Users</chef-option>
+            <!-- <chef-option value='users' data-cy="users-tab">Users</chef-option> -->
             <chef-option value='details' data-cy="details-tab">Details</chef-option>
           </app-authorized>
         </chef-tab-selector>

diff --git a/...omate-ui/src/app/modules/infra-proxy/chef-server-details/chef-server-details.component.ts b/...omate-ui/src/app/modules/infra-proxy/chef-server-details/chef-server-details.component.ts
@@ -18,7 +18,7 @@ import {
 
 import { Server } from 'app/entities/servers/server.model';
 import { GetServer, UpdateServer
-  // , GetUsers 
+  // , GetUsers
 } from 'app/entities/servers/server.actions';
 import { GetOrgs, CreateOrg, DeleteOrg } from 'app/entities/orgs/org.actions';
 import { Org } from 'app/entities/orgs/org.model';

diff --git a/...utomate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.html b/...utomate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.html
@@ -6,17 +6,18 @@
         <chef-heading>Chef Infra Servers</chef-heading>
         <chef-subheading>Manage Chef Infra Servers with Chef Automate</chef-subheading>
       </chef-page-header>
-      <app-create-chef-server-modal 
+      <app-create-chef-server-slider
         #server
         [visible]="createModalVisible" 
         [creating]="creatingChefServer"
         [createForm]="createChefServerForm"
         [fqdnForm]="fqdnForm"
         [ipForm]="ipForm"
+        [webUIKeyForm]="webUIKeyForm"
         (close)="closeCreateModal()"
         [conflictErrorEvent]="conflictErrorEvent"
         (createClicked)="createChefServer()">
-      </app-create-chef-server-modal>
+      </app-create-chef-server-slider>
       <app-delete-infra-object-modal
         [visible]="deleteModalVisible"
         objectNoun="server"

diff --git a/...mate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.spec.ts b/...mate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.spec.ts
@@ -125,7 +125,8 @@ describe('ChefServersListComponent', () => {
       id: '1',
       name: 'new server',
       fqdn: 'xyz.com',
-      ip_address: '1.1.1.1'
+      ip_address: '1.1.1.1',
+      webui_key: 'test WebUI Key'
     };
 
     beforeEach(() => {
@@ -143,18 +144,21 @@ describe('ChefServersListComponent', () => {
       component.createChefServerForm.controls['name'].setValue('any');
       component.fqdnForm.controls['fqdn'].setValue('any');
       component.ipForm.controls['ip_address'].setValue('any');
+      component.webUIKeyForm.controls['webui_key'].setValue('any');
       component.openCreateModal();
       expect(component.createChefServerForm.controls['id'].value).toBe(null);
       expect(component.createChefServerForm.controls['name'].value).toBe(null);
       expect(component.fqdnForm.controls['fqdn'].value).toBe(null);
       expect(component.ipForm.controls['ip_address'].value).toBe(null);
+      expect(component.webUIKeyForm.controls['webui_key'].value).toBe(null);
     });
 
     it('on success, closes slider and adds new server', () => {
       component.createChefServerForm.controls['id'].setValue(server.id);
       component.createChefServerForm.controls['name'].setValue(server.name);
       component.fqdnForm.controls['fqdn'].setValue(server.fqdn);
       component.ipForm.controls['ip_address'].setValue(server.ip_address);
+      component.webUIKeyForm.controls['webui_key'].setValue(server.webui_key);
       component.createChefServer();
 
       store.dispatch(new CreateServerSuccess({ 'server': server }));
@@ -169,6 +173,7 @@ describe('ChefServersListComponent', () => {
       component.createChefServerForm.controls['name'].setValue(server.name);
       component.fqdnForm.controls['fqdn'].setValue(server.fqdn);
       component.ipForm.controls['ip_address'].setValue(server.ip_address);
+      component.webUIKeyForm.controls['webui_key'].setValue(server.webui_key);
       component.createChefServer();
 
       const conflict = <HttpErrorResponse>{
@@ -188,6 +193,7 @@ describe('ChefServersListComponent', () => {
       component.createChefServerForm.controls['name'].setValue(server.name);
       component.fqdnForm.controls['fqdn'].setValue(server.fqdn);
       component.ipForm.controls['ip_address'].setValue(server.ip_address);
+      component.webUIKeyForm.controls['webui_key'].setValue(server.webui_key);
       component.createChefServer();
 
       const error = <HttpErrorResponse>{

diff --git a/.../automate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.ts b/.../automate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.ts
@@ -36,6 +36,7 @@ export class ChefServersListComponent implements OnInit, OnDestroy {
   public conflictErrorEvent = new EventEmitter<boolean>();
   public fqdnForm: FormGroup;
   public ipForm: FormGroup;
+  public webUIKeyForm: FormGroup;
   private isDestroyed = new Subject<boolean>();
   public serverToDelete: Server;
   public deleteModalVisible = false;
@@ -68,6 +69,11 @@ export class ChefServersListComponent implements OnInit, OnDestroy {
         Validators.pattern(Regex.patterns.VALID_IP_ADDRESS)
       ]]
     });
+    this.webUIKeyForm = this.fb.group({
+      webui_key: ['', [Validators.required,
+        Validators.pattern(Regex.patterns.NON_BLANK)
+      ]]
+    });
   }
 
   ngOnInit() {
@@ -136,7 +142,8 @@ export class ChefServersListComponent implements OnInit, OnDestroy {
       id: this.createChefServerForm.controls['id'].value,
       name: this.createChefServerForm.controls['name'].value.trim(),
       fqdn: this.fqdnForm.controls['fqdn'].value?.trim() || '',
-      ip_address: this.ipForm.controls['ip_address'].value?.trim() || ''
+      ip_address: this.ipForm.controls['ip_address'].value?.trim() || '',
+      webui_key: this.webUIKeyForm.controls['webui_key'].value || ''
     };
     this.store.dispatch(new CreateServer(server));
     this.telemetryService.track('InfraServer_Add_Chef_InfraServer');
@@ -150,6 +157,7 @@ export class ChefServersListComponent implements OnInit, OnDestroy {
     this.createChefServerForm.reset();
     this.fqdnForm.reset();
     this.ipForm.reset();
+    this.webUIKeyForm.reset();
     this.conflictErrorEvent.emit(false);
   }
 

diff --git a/...l/create-chef-server-modal.component.html → .../create-chef-server-slider.component.html b/...l/create-chef-server-modal.component.html → .../create-chef-server-slider.component.html
@@ -1,5 +1,8 @@
 <div data-cy="chef-infra-server-slider" ngClass="{slide : isSlideOpen}">
   <div class="sidenav-header">
+    <chef-button class="back-button" secondary (click)="closeSeverSlider()" data-cy="back-button">
+      <chef-icon>arrow_back</chef-icon>
+    </chef-button>
     <h2 slot="title">Add Chef Infra Server </h2>
     <chef-button 
     class="close"
@@ -134,15 +137,36 @@ <h2 slot="title">Add Chef Infra Server </h2>
             </chef-error>
           </chef-form-field>
         </div>
-        <div id="button-bar">
+      </form>
+      <form [formGroup]="webUIKeyForm">
+        <div class="input-margin">
+          <chef-form-field>
+            <label>
+              <span class="label">WEB UI KEY <span aria-hidden="true">*</span></span>
+              <textarea
+                chefInput
+                formControlName="webui_key"
+                data-cy="webui_key"
+                id="webui_key"
+                (keyup)="handleInput($event)"
+                autofocus></textarea>
+            </label>
+            <chef-error
+            *ngIf="webUIKeyForm.get('webui_key').hasError('required') && webUIKeyForm.get('webui_key').dirty">
+            WEB UI KEY is required.
+            </chef-error>
+            <span class="note_text">Note: A web UI Key is located <span>Here</span>(Need Better Help Text).</span>
+          </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 || (selected === 'fqdn') ? !fqdnForm?.valid : !ipForm?.valid"
-            primary
+          <chef-button [disabled]="!createForm?.valid || webUIKeyForm?.valid || creating || conflictError || (selected === 'fqdn') ? !fqdnForm?.valid : !ipForm?.valid"
+            primaryt
             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">Add</span>
             <span *ngIf="creating">Adding Chef Infra Server ...</span>
           </chef-button>
         </div>

diff --git a/...l/create-chef-server-modal.component.scss → .../create-chef-server-slider.component.scss b/...l/create-chef-server-modal.component.scss → .../create-chef-server-slider.component.scss
@@ -19,6 +19,10 @@
       line-height: 27px;
       margin-bottom: 10px;
     }
+
+    .back-button {
+      margin-left: 0;
+    }
   }
 
   .flex-container {
@@ -46,6 +50,12 @@
         color: $chef-primary-dark;
         font-size: 12px;
       }
+
+      #webui_key {
+        height: 150px;
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
     }
 
     #button-bar {
@@ -136,3 +146,9 @@
     border-radius: 4px;
   }
 }
+
+.note_text {
+  font-weight: 400;
+  font-size: 14px;
+  letter-spacing: 0.2px;
+}
diff --git a/...reate-chef-server-modal.component.spec.ts → ...eate-chef-server-slider.component.spec.ts b/...reate-chef-server-modal.component.spec.ts → ...eate-chef-server-slider.component.spec.ts
@@ -6,16 +6,16 @@ import { MockComponent } from 'ng2-mock-component';
 import { Regex } from 'app/helpers/auth/regex';
 import { using } from 'app/testing/spec-helpers';
 
-import { CreateChefServerModalComponent } from './create-chef-server-modal.component';
+import { CreateChefServerSliderComponent } from './create-chef-server-slider.component';
 
-describe('CreateChefServerModalComponent', () => {
-  let component: CreateChefServerModalComponent;
-  let fixture: ComponentFixture<CreateChefServerModalComponent>;
+describe('CreateChefServerSliderComponent', () => {
+  let component: CreateChefServerSliderComponent;
+  let fixture: ComponentFixture<CreateChefServerSliderComponent>;
 
   let createForm: FormGroup;
   let fqdnForm: FormGroup;
   let ipForm: FormGroup;
-
+  let webUIKeyForm: FormGroup;
   let errors = {};
 
   beforeEach( waitForAsync(() => {
@@ -32,7 +32,7 @@ describe('CreateChefServerModalComponent', () => {
           inputs: ['visible'],
           outputs: ['close']
         }),
-        CreateChefServerModalComponent
+        CreateChefServerSliderComponent
       ],
       imports: [
         ReactiveFormsModule
@@ -43,7 +43,7 @@ describe('CreateChefServerModalComponent', () => {
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(CreateChefServerModalComponent);
+    fixture = TestBed.createComponent(CreateChefServerSliderComponent);
     component = fixture.componentInstance;
     // This form must mimic the createForm including Validators
     component.createForm = new FormBuilder().group({
@@ -63,10 +63,17 @@ describe('CreateChefServerModalComponent', () => {
         Validators.pattern(Regex.patterns.VALID_IP_ADDRESS)
       ]]
     });
+    component.webUIKeyForm = new FormBuilder().group({
+      webui_key: ['', [Validators.required,
+        Validators.pattern(Regex.patterns.NON_BLANK)
+      ]]
+    });
+
     component.conflictErrorEvent = new EventEmitter();
     createForm = component.createForm;
     fqdnForm = component.fqdnForm;
     ipForm = component.ipForm;
+    webUIKeyForm = component.webUIKeyForm;
     fixture.detectChanges();
   });
 
@@ -80,12 +87,14 @@ describe('CreateChefServerModalComponent', () => {
         expect(createForm.valid).toBeFalsy();
         expect(fqdnForm.valid).toBeFalsy();
         expect(ipForm.valid).toBeFalsy();
+        expect(webUIKeyForm).toBeFalsy();
       });
 
       it('when name is missing', () => {
         createForm.controls['id'].setValue('test');
         fqdnForm.controls['fqdn'].setValue('test.net');
         ipForm.controls['ip_address'].setValue('1.2.3.4');
+        webUIKeyForm.controls['webui_key'].setValue('testWebUIKey');
 
         errors = createForm.controls['name'].errors || {};
 
@@ -97,6 +106,7 @@ describe('CreateChefServerModalComponent', () => {
         createForm.controls['name'].setValue('test');
         fqdnForm.controls['fqdn'].setValue('test.net');
         ipForm.controls['ip_address'].setValue('1.2.3.4');
+        webUIKeyForm.controls['webui_key'].setValue('testWebUIKey');
 
         errors = createForm.controls['id'].errors || {};
 
@@ -108,6 +118,7 @@ describe('CreateChefServerModalComponent', () => {
         createForm.controls['name'].setValue('test');
         createForm.controls['id'].setValue('test');
         ipForm.controls['ip_address'].setValue('1.2.3.4');
+        webUIKeyForm.controls['webui_key'].setValue('testWebUIKey');
 
         errors = fqdnForm.controls['fqdn'].errors || {};
 
@@ -119,6 +130,7 @@ describe('CreateChefServerModalComponent', () => {
         createForm.controls['name'].setValue('test');
         createForm.controls['id'].setValue('test');
         fqdnForm.controls['fqdn'].setValue('test.net');
+        webUIKeyForm.controls['webui_key'].setValue('testWebUIKey');
 
         errors = ipForm.controls['ip_address'].errors || {};
 
@@ -130,6 +142,7 @@ describe('CreateChefServerModalComponent', () => {
         createForm.controls['name'].setValue('test');
         createForm.controls['id'].setValue('test');
         fqdnForm.controls['fqdn'].setValue('chef.internal');
+        webUIKeyForm.controls['webui_key'].setValue('testWebUIKey');
 
         ipForm.controls['ip_address'].setValue('1.2234.3.4');
         errors = ipForm.controls['ip_address'].errors || {};
@@ -162,6 +175,7 @@ describe('CreateChefServerModalComponent', () => {
           createForm.controls['name'].setValue('test');
           createForm.controls['id'].setValue('test');
           ipForm.controls['ip_address'].setValue('1.2.3.4');
+          webUIKeyForm.controls['webui_key'].setValue('testWebUIKey');
 
           fqdnForm.controls['fqdn'].setValue(input);
           errors = fqdnForm.controls['fqdn'].errors || {};
@@ -181,6 +195,7 @@ describe('CreateChefServerModalComponent', () => {
         createForm.controls['id'].setValue('test');
         fqdnForm.controls['fqdn'].setValue('chef.internal');
         ipForm.controls['ip_address'].setValue('1.2.3.4');
+        webUIKeyForm.controls['webui_key'].setValue('testWebUIKey');
         expect(createForm.valid).toBeTruthy();
       });
 
@@ -202,6 +217,7 @@ describe('CreateChefServerModalComponent', () => {
           createForm.controls['name'].setValue('test');
           createForm.controls['id'].setValue('test');
           ipForm.controls['ip_address'].setValue('1.2.3.4');
+          webUIKeyForm.controls['webui_key'].setValue('testWebUIKey');
 
           fqdnForm.controls['fqdn'].setValue(input);
           errors = fqdnForm.controls['fqdn'].errors || {};

diff --git a/...dal/create-chef-server-modal.component.ts → ...er/create-chef-server-slider.component.ts b/...dal/create-chef-server-modal.component.ts → ...er/create-chef-server-slider.component.ts
@@ -4,11 +4,11 @@ import { FormGroup } from '@angular/forms';
 import { Utilities } from 'app/helpers/utilities/utilities';
 
 @Component({
-  selector: 'app-create-chef-server-modal',
-  templateUrl: './create-chef-server-modal.component.html',
-  styleUrls: ['./create-chef-server-modal.component.scss']
+  selector: 'app-create-chef-server-slider',
+  templateUrl: './create-chef-server-slider.component.html',
+  styleUrls: ['./create-chef-server-slider.component.scss']
 })
-export class CreateChefServerModalComponent implements OnInit {
+export class CreateChefServerSliderComponent implements OnInit {
   @Input() visible = false;
   @Input() creating = false;
   @Input() conflictErrorEvent: EventEmitter<boolean>;
@@ -17,6 +17,7 @@ export class CreateChefServerModalComponent implements OnInit {
   @Input() createForm: FormGroup;
   @Input() fqdnForm: FormGroup;
   @Input() ipForm: FormGroup;
+  @Input() webUIKeyForm: FormGroup;
   @HostBinding('class.active') isSlideOpen = false;
 
   public modifyID = false; // Whether the edit ID form is open or not.

diff --git a/components/automate-ui/src/app/modules/infra-proxy/infra-proxy.module.ts b/components/automate-ui/src/app/modules/infra-proxy/infra-proxy.module.ts
@@ -14,7 +14,7 @@ import { CookbooksComponent } from './cookbooks/cookbooks.component';
 import { CookbookDetailsComponent } from './cookbook-details/cookbook-details.component';
 import { CookbookDependenciesComponent } from './cookbook-dependencies/cookbook-dependencies.component';
 import { CookbookDependenciesDetailsComponent } from './cookbook-dependencies-details/cookbook-dependencies-details.component';
-import { CreateChefServerModalComponent } from './create-chef-server-modal/create-chef-server-modal.component';
+import { CreateChefServerSliderComponent } from './create-chef-server-slider/create-chef-server-slider.component';
 import { CreateEnvironmentModalComponent } from './create-environment-modal/create-environment-modal.component';
 import { CreateOrgModalComponent } from './create-org-modal/create-org-modal.component';
 import { CreateDataBagModalComponent } from './create-data-bag-modal/create-data-bag-modal.component';
@@ -74,7 +74,7 @@ import { TreeTableModule } from './tree-table/tree-table.module';
     CookbookDetailsComponent,
     CookbookDependenciesComponent,
     CookbookDependenciesDetailsComponent,
-    CreateChefServerModalComponent,
+    CreateChefServerSliderComponent,
     CreateEnvironmentModalComponent,
     CreateOrgModalComponent,
     CreateDataBagModalComponent,