Skip to content

Commit

Permalink
Added changes for create client modal
Browse files Browse the repository at this point in the history
Signed-off-by: chaitali-mane <cmane@progress.com>
  • Loading branch information
chaitali-mane committed Mar 5, 2021
1 parent 54b70d4 commit 6631a81
Show file tree
Hide file tree
Showing 8 changed files with 85 additions and 50 deletions.
Original file line number Diff line number Diff line change
@@ -1,17 +1,4 @@
<section class="clients">
<!-- <app-create-client-modal
[visible]="createClientModalVisible"
(close)="closeCreateClientModal()"
[createForm]="createClientForm"
[validator]="validator"
[created]="created"
[privateKey]="privateKey"
[error]="error"
[conflictErrorEvent]="conflictErrorEvent"
(createClicked)="createClient()"
(onDownloadKey) = "downloadContentItem()">
</app-create-client-modal> -->

<app-create-client-modal [openEvent]="openNotificationModal"
[serverId]="serverId" [orgId]="orgId"></app-create-client-modal>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -74,3 +74,10 @@ chef-button button {
.clients-list-paging {
margin: 0 0 35px;
}

::ng-deep {
.search-items app-infra-search-bar .search-wrapper {
width: 87%;
float: left;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ describe('ClientsComponent', () => {
MockComponent({ selector: 'input', inputs: ['resetOrigin'] }),
MockComponent({ selector: 'mat-select' }),
MockComponent({ selector: 'mat-option' }),
MockComponent({ selector: 'app-create-client-modal', inputs: ['openEvent'] }),
ClientsComponent
],
providers: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,29 +9,29 @@ <h2 slot="title">Create Client</h2>
<input chefInput formControlName="name" type="text" (keyup)="handleNameInput($event)" autocomplete="off" />
</label>
<chef-error *ngIf="error">{{error}}</chef-error>
</chef-form-field>
<chef-form-field>
<chef-checkbox *ngIf="!created" (change)="updateValidatorCheckbox($event.detail)"
[checked]="checkedValidator">Validation Client</chef-checkbox>

<div *ngIf="created" class="detail">
<div class="icon-wrap"><i></i></div>
<p>Client successfully created. Copy the private key below and keep it somewhere safe. It is NOT stored on
the server.</p>
</div>

<textarea chefInput rows="20" cols="10" *ngIf="created" value={{privateKey}}>
</textarea>
</chef-form-field>
<div *ngIf="created" class="detail">
<div class="icon-wrap"><i></i></div>
<p>Client successfully created. Copy the private key below and keep it somewhere safe. It is NOT stored on
the server.</p>
</div>
<textarea chefInput rows="20" cols="10" *ngIf="created" value={{privateKey}}>
</textarea>
</div>
<div id="button-bar">
<chef-button tertiary *ngIf="!created" (click)="closeCreateModal()">Cancel</chef-button>
<chef-button tertiary *ngIf="created" (click)="closeCreateModal()">Close</chef-button>
<chef-button primary *ngIf="!created" [disabled]="!createForm?.valid || error || conflictError"
id="create-button-object-modal" (click)="createClient()">
<!-- <chef-loading-spinner *ngIf="creating"></chef-loading-spinner> -->
Create
<chef-loading-spinner *ngIf="creating"></chef-loading-spinner>
<span *ngIf="!creating">Create</span>
<span *ngIf="creating">Creating...</span>
</chef-button>
<chef-button primary *ngIf="created" id="create-button-object-modal"
(click)="downloadKey()">
<chef-button primary *ngIf="created" id="create-button-object-modal" (click)="downloadKey()">
Download
</chef-button>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ chef-modal {
padding-top: 24px;

chef-button {
margin-bottom: 0;
margin-bottom: 0;
&:last-child {
margin-right: 0;
}
Expand Down Expand Up @@ -162,4 +162,3 @@ chef-modal {
}
}
}

Original file line number Diff line number Diff line change
@@ -1,25 +1,66 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { MockComponent } from 'ng2-mock-component';
import { ReactiveFormsModule } from '@angular/forms';
import { StoreModule } from '@ngrx/store';
import { ngrxReducers, runtimeChecks } from 'app/ngrx.reducers';
import { CreateClientModalComponent } from './create-client-modal.component';
import { ClientKey } from 'app/entities/clients/client.model';
import { EventEmitter } from '@angular/core';

describe('CreateClientModalComponent', () => {
let component: CreateClientModalComponent;
let fixture: ComponentFixture<CreateClientModalComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ CreateClientModalComponent ]
declarations: [
MockComponent({ selector: 'chef-modal', inputs: ['visible'] }),
MockComponent({ selector: 'chef-button', inputs: ['disabled'] }),
MockComponent({ selector: 'chef-error' }),
MockComponent({ selector: 'chef-form-field' }),
MockComponent({ selector: 'chef-checkbox', inputs: ['checked']}),
CreateClientModalComponent
],
imports: [
ReactiveFormsModule,
StoreModule.forRoot(ngrxReducers, { runtimeChecks })
]
})
.compileComponents();
});

beforeEach(() => {
fixture = TestBed.createComponent(CreateClientModalComponent);
component = fixture.componentInstance;
component.openEvent = new EventEmitter();
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});

describe('#createClientForm', () => {
const clientKey: ClientKey = {
name: 'test_name',
public_key: 'test_public_key',
expiration_date: 'test_expiration_date',
private_key: 'test_private_key'
};

it('should be invalid when no fields are filled out', () => {
expect(component.createForm.valid).toBeFalsy();
});

it('should be valid when all fields are filled out', () => {
component.createForm.controls['name'].setValue(clientKey.name);
expect(component.createForm.valid).toBeTruthy();
});

it('opening create modal resets name to empty string', () => {
component.visible = true;
expect(component.createForm.controls['name'].value).toEqual('');
});
});

});
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,7 @@ import { NgrxStateAtom } from 'app/ngrx.reducers';
import { Regex } from 'app/helpers/auth/regex';
import { Subject, combineLatest } from 'rxjs';
import { CreateClient } from 'app/entities/clients/client.action';
import {
getAllStatus,
saveError,
createClient
} from 'app/entities/clients/client.selectors';
import { saveError, createClient } from 'app/entities/clients/client.selectors';
import { isNil } from 'lodash/fp';
import { saveAs } from 'file-saver';

Expand All @@ -26,20 +22,20 @@ export class CreateClientModalComponent implements OnInit {
@Input() orgId: string;

public checkedValidator = false;
public client_key;
public createdClient: string;
public creating = false;
public created = false;
public conflictError = false;
public createForm: FormGroup;
public client_key: any;
public conflictErrorEvent = new EventEmitter<boolean>();
public close = new EventEmitter();
public close = new EventEmitter();
public error: string;
public privateKey;
public privateKey: string;
public org: string;
public server: string;
public validator = false;
public visible = false;
public visible = false;
private isDestroyed = new Subject<boolean>();

constructor(
Expand All @@ -62,23 +58,26 @@ export class CreateClientModalComponent implements OnInit {
this.org = this.orgId;
this.error = '';
this.privateKey = '';
this.checkedValidator = false;
});

combineLatest([
this.store.select(getAllStatus),
// this.store.select(getAllStatus),
this.store.select(saveError),
this.store.select(createClient)
]).pipe(
takeUntil(this.isDestroyed))
.subscribe(([_, errorSt, createState]) => {
if ( !isNil(createState)) {
.subscribe(([ errorSt, createState]) => {
if ( !isNil(errorSt) ) {
this.created = false;
this.creating = false;
this.error = errorSt?.message;
} else {
this.creating = false;
this.created = true;
this.createdClient = createState?.name;
this.client_key = createState?.client_key;
this.privateKey = this.client_key?.private_key;
} else {
this.created = false;
this.error = errorSt?.message;
}
});
}
Expand Down Expand Up @@ -110,19 +109,20 @@ export class CreateClientModalComponent implements OnInit {
}

private resetCreateModal(): void {
this.creating = false;
this.created = false;
this.error = '';
this.privateKey = '';
this.createForm.reset();
this.validator = false;
this.checkedValidator = false;
this.conflictErrorEvent.emit(false);
}

createClient(): void {
this.creating = true;
const client = {
name: this.createForm.controls['name'].value.trim(),
validator: this.createForm.controls['validator'].value || this.validator,
validator: this.createForm.controls['validator'].value || this.checkedValidator,
server_id: this.serverId,
org_id: this.orgId,
create_key : true
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { ChefServerDetailsComponent } from './chef-server-details/chef-server-de
import { ChefServersListComponent } from './chef-servers-list/chef-servers-list.component';
import { ClientsComponent } from './clients/clients.component';
import { ClientDetailsComponent } from './client-details/client-details.component';
import { CreateClientModalComponent } from './create-client-modal/create-client-modal.component';
import { CookbooksComponent } from './cookbooks/cookbooks.component';
import { CookbookDetailsComponent } from './cookbook-details/cookbook-details.component';
import { CreateChefServerModalComponent } from './create-chef-server-modal/create-chef-server-modal.component';
Expand All @@ -29,7 +30,6 @@ import { OrgEditComponent } from './org-edit/org-edit.component';
import { PolicyFilesComponent } from './policy-files/policy-files.component';
import { ResetAdminKeyComponent } from './reset-admin-key/reset-admin-key.component';
import { TreeTableModule } from './tree-table/tree-table.module';
import { CreateClientModalComponent } from './create-client-modal/create-client-modal.component';

@NgModule({
declarations: [
Expand All @@ -42,6 +42,7 @@ import { CreateClientModalComponent } from './create-client-modal/create-client-
CreateChefServerModalComponent,
CreateOrgModalComponent,
CreateDataBagModalComponent,
CreateClientModalComponent,
DataBagsDetailsComponent,
DataBagsListComponent,
DeleteInfraObjectModalComponent,
Expand All @@ -55,8 +56,7 @@ import { CreateClientModalComponent } from './create-client-modal/create-client-
OrgDetailsComponent,
OrgEditComponent,
PolicyFilesComponent,
ResetAdminKeyComponent,
CreateClientModalComponent
ResetAdminKeyComponent
],
imports: [
CommonModule,
Expand Down

0 comments on commit 6631a81

Please sign in to comment.