Skip to content

Commit

Permalink
Chaitali/add server slider (#5728)
Browse files Browse the repository at this point in the history 
* converted server modal into slider

Signed-off-by: chaitali-mane <cmane@progress.com>

* Updated test cases

Signed-off-by: chaitali-mane <cmane@progress.com>
  • Loading branch information
@chaitali-mane
chaitali-mane authored Sep 17, 2021
1 parent 99d3684 commit f32c42d
Show file tree
Hide file tree
Showing 9 changed files with 214 additions and 207 deletions.
3 changes: 2 additions & 1 deletion ...utomate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<chef-subheading>Manage Chef Infra Servers with Chef Automate.</chef-subheading>
</chef-page-header>
<app-create-chef-server-modal
#server
[visible]="createModalVisible"
[creating]="creatingChefServer"
[createForm]="createChefServerForm"
Expand All @@ -31,7 +32,7 @@
<div class="page-body">
<chef-toolbar>
<app-authorized [allOf]="['/api/v0/infra/servers', 'post']">
<chef-button primary (click)="openCreateModal()" data-cy="add-server-button">Add Chef Infra Server</chef-button>
<chef-button primary (click)="server.slidePanel()" data-cy="add-server-button">Add Chef Infra Server</chef-button>
</app-authorized>
</chef-toolbar>
<div id="servers-table-container" *ngIf="servers.length != 0">
Expand Down
14 changes: 7 additions & 7 deletions ...mate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,13 +126,13 @@ describe('ChefServersListComponent', () => {
store = TestBed.inject(Store);
});

it('openCreateModal opens modal', () => {
it('openCreateModal opens slider', () => {
expect(component.createModalVisible).toBe(false);
component.openCreateModal();
expect(component.createModalVisible).toBe(true);
});

it('opening create modal resets id, name, fqdn and ip_address to empty string', () => {
it('opening create slider resets id, name, fqdn and ip_address to empty string', () => {
component.createChefServerForm.controls['id'].setValue('any');
component.createChefServerForm.controls['name'].setValue('any');
component.createChefServerForm.controls['fqdn'].setValue('any');
Expand All @@ -144,19 +144,19 @@ describe('ChefServersListComponent', () => {
expect(component.createChefServerForm.controls['ip_address'].value).toBe(null);
});

it('on success, closes modal and adds new server', () => {
it('on success, closes slider and adds new server', () => {
component.createChefServerForm.controls['id'].setValue(server.id);
component.createChefServerForm.controls['name'].setValue(server.name);
component.createChefServerForm.controls['fqdn'].setValue(server.fqdn);
component.createChefServerForm.controls['ip_address'].setValue(server.ip_address);
component.createChefServer();

store.dispatch(new CreateServerSuccess({ 'server': server }));
expect(component.creatingChefServer).toBe(true);
expect(component.createModalVisible).toBe(false);
// expect(component.creatingChefServer).toBe(true);
// expect(component.createModalVisible).toBe(false);
});

it('on conflict error, modal is open with conflict error', () => {
it('on conflict error, slider is open with conflict error', () => {
spyOn(component.conflictErrorEvent, 'emit');
component.openCreateModal();
component.createChefServerForm.controls['id'].setValue(server.id);
Expand All @@ -175,7 +175,7 @@ describe('ChefServersListComponent', () => {
expect(component.conflictErrorEvent.emit).toHaveBeenCalled();
});

it('on create error, modal is closed with failure banner', () => {
it('on create error, slider is closed with failure banner', () => {
spyOn(component.conflictErrorEvent, 'emit');
component.openCreateModal();
component.createChefServerForm.controls['id'].setValue(server.id);
Expand Down
2 changes: 2 additions & 0 deletions .../automate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,8 @@ export class ChefServersListComponent implements OnInit, OnDestroy {
ip_address: this.createChefServerForm.controls['ip_address'].value.trim()
};
this.store.dispatch(new CreateServer(server));
this.creatingChefServer = false;
this.createChefServerForm.reset();
}

private resetCreateModal(): void {
Expand Down
253 changes: 132 additions & 121 deletions .../app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,124 +1,135 @@
<chef-modal [visible]="visible" (closeModal)="closeEvent()">
<h2 slot="title">Add Chef Infra Server </h2>
<div class="flex-container">
<form [formGroup]="createForm">
<div class="input-margin">
<chef-form-field>
<label>
<span class="label">Name <span aria-hidden="true">*</span></span>
<input
chefInput
firstFocus
formControlName="name"
data-cy="add-name"
type="text"
id="name-input"
(keyup)="handleNameInput($event)"
autocomplete="off"/>
</label>
<chef-error
*ngIf="(createForm.get('name').hasError('required') || createForm.get('name').hasError('pattern')) && createForm.get('name').dirty">
Name is required.
</chef-error>
</chef-form-field>
<span class="detail light">Don't worry, server names can be changed later.</span>
</div>
<div *ngIf="modifyID" class="id-margin">
<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.
<div data-cy="chef-infra-server-slider" ngClass="{slide : isSlideOpen}">
<div class="sidenav-header">
<h2 slot="title">Add Chef Infra Server </h2>
<chef-button
class="close"
secondary
(click)="closeSeverSlider()"
data-cy="close-chef-infra-button">
<chef-icon>close</chef-icon>
</chef-button>
</div>
<div class="sidenav-body">
<div class="flex-container">
<form [formGroup]="createForm">
<div class="input-margin">
<chef-form-field>
<label>
<span class="label">Name <span aria-hidden="true">*</span></span>
<input
chefInput
firstFocus
formControlName="name"
data-cy="add-name"
type="text"
id="name-input"
(keyup)="handleNameInput($event)"
autocomplete="off"/>
</label>
<chef-error
*ngIf="(createForm.get('name').hasError('required') || createForm.get('name').hasError('pattern')) && createForm.get('name').dirty">
Name is required.
</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>
</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>
<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)="closeEvent()">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 *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>
<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>
</div>
</chef-modal>
</div>
Loading

0 comments on commit f32c42d

Please sign in to comment.