created unlimited-input comp / refactored quota forms

Signed-off-by: Vítor Avelino <[email protected]>

src/frontend/packages/core/src/features/cloud-foundry/add-quota/add-quota.component.spec.ts

@@ -2,6 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { TabNavService } from '../../../../tab-nav.service';
 import { BaseTestModules } from '../../../../test-framework/cloud-foundry-endpoint-service.helper';
+import { QuotaDefinitionFormComponent } from '../quota-definition-form/quota-definition-form.component';
 import { AddQuotaComponent } from './add-quota.component';
 import { CreateQuotaStepComponent } from './create-quota-step/create-quota-step.component';
 
@@ -11,7 +12,7 @@ describe('AddQuotaComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [AddQuotaComponent, CreateQuotaStepComponent],
+      declarations: [AddQuotaComponent, CreateQuotaStepComponent, QuotaDefinitionFormComponent],
       imports: [...BaseTestModules],
       providers: [TabNavService]
     })

src/frontend/packages/core/src/features/cloud-foundry/add-quota/create-quota-step/create-quota-step.component.html

@@ -1,32 +1,4 @@
 <div class="add-quota">
   <div>Specify the parameters of the new quota</div>
-  <form [formGroup]="quotaForm" class="stepper-form">
-    <mat-form-field>
-      <input matInput formControlName="name" placeholder="Quota Name" required [appFocus]="true">
-      <mat-error *ngIf="quotaForm.controls.name?.hasError('nameTaken')">
-        A quota with this name already exists. Please enter a different one.
-      </mat-error>
-    </mat-form-field>
-    <mat-form-field>
-      <input type="number" matInput formControlName="appInstanceLimit" placeholder="Total number of application instances">
-    </mat-form-field>
-    <mat-form-field>
-      <input type="number" matInput formControlName="instanceMemoryLimit" placeholder="Max amount of memory an app instance can have" required>
-      <span matSuffix>MB</span>
-    </mat-form-field>
-    <mat-form-field>
-      <input type="number" matInput formControlName="totalServices" placeholder="Total number of service instances" required>
-    </mat-form-field>
-    <mat-form-field>
-      <input type="number" matInput formControlName="memoryLimit" placeholder="Total amount of memory an organization can have" required>
-      <span matSuffix>MB</span>
-    </mat-form-field>
-    <mat-form-field>
-      <input type="number" matInput formControlName="totalRoutes" placeholder="Total number of routes" required>
-    </mat-form-field>
-    <mat-form-field>
-      <input type="number" matInput formControlName="totalReservedRoutePorts" placeholder="Max number of routes with reserved ports">
-    </mat-form-field>
-    <mat-checkbox matInput formControlName="nonBasicServicesAllowed">Can provision instances of paid service plans</mat-checkbox>
-  </form>
+  <app-quota-definition-form #form></app-quota-definition-form>
 </div>

src/frontend/packages/core/src/features/cloud-foundry/add-quota/create-quota-step/create-quota-step.component.spec.ts

@@ -2,6 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { BaseTestModules } from '../../../../../test-framework/cloud-foundry-endpoint-service.helper';
 import { PaginationMonitorFactory } from '../../../../shared/monitors/pagination-monitor.factory';
+import { QuotaDefinitionFormComponent } from '../../quota-definition-form/quota-definition-form.component';
 import { CreateQuotaStepComponent } from './create-quota-step.component';
 
 describe('CreateQuotaStepComponent', () => {
@@ -10,7 +11,7 @@ describe('CreateQuotaStepComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [CreateQuotaStepComponent],
+      declarations: [CreateQuotaStepComponent, QuotaDefinitionFormComponent],
       imports: [...BaseTestModules],
       providers: [PaginationMonitorFactory]
     })

src/frontend/packages/core/src/features/cloud-foundry/add-quota/create-quota-step/create-quota-step.component.ts

@@ -1,117 +1,60 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { AbstractControl, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
+import { Component, ViewChild } from '@angular/core';
+import { FormGroup } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
-import { Observable, Subscription } from 'rxjs';
-import { filter, map, tap } from 'rxjs/operators';
+import { Subscription } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
 
-import { CreateQuotaDefinition, GetQuotaDefinitions } from '../../../../../../store/src/actions/quota-definitions.actions';
+import { CreateQuotaDefinition } from '../../../../../../store/src/actions/quota-definitions.actions';
 import { AppState } from '../../../../../../store/src/app-state';
-import {
-  endpointSchemaKey,
-  entityFactory,
-  quotaDefinitionSchemaKey,
-} from '../../../../../../store/src/helpers/entity-factory';
-import {
-  createEntityRelationPaginationKey,
-} from '../../../../../../store/src/helpers/entity-relations/entity-relations.types';
-import { getPaginationObservables } from '../../../../../../store/src/reducers/pagination-reducer/pagination-reducer.helper';
+import { quotaDefinitionSchemaKey } from '../../../../../../store/src/helpers/entity-factory';
 import { selectRequestInfo } from '../../../../../../store/src/selectors/api.selectors';
-import { APIResource } from '../../../../../../store/src/types/api.types';
-import { IQuotaDefinition } from '../../../../core/cf-api.types';
-import { safeUnsubscribe } from '../../../../core/utils.service';
 import { StepOnNextFunction } from '../../../../shared/components/stepper/step/step.component';
-import { PaginationMonitorFactory } from '../../../../shared/monitors/pagination-monitor.factory';
+import { QuotaDefinitionFormComponent } from '../../quota-definition-form/quota-definition-form.component';
 
 
 @Component({
   selector: 'app-create-quota-step',
   templateUrl: './create-quota-step.component.html',
   styleUrls: ['./create-quota-step.component.scss']
 })
-export class CreateQuotaStepComponent implements OnInit, OnDestroy {
+export class CreateQuotaStepComponent {
 
   quotasSubscription: Subscription;
   cfGuid: string;
-  allQuotas: string[];
-  quotaDefinitions$: Observable<APIResource<IQuotaDefinition>[]>;
   quotaForm: FormGroup;
 
+  @ViewChild('form')
+  form: QuotaDefinitionFormComponent;
+
   constructor(
     private store: Store<AppState>,
     private activatedRoute: ActivatedRoute,
-    private paginationMonitorFactory: PaginationMonitorFactory,
   ) {
     this.cfGuid = this.activatedRoute.snapshot.params.endpointId;
   }
 
-  ngOnInit() {
-    this.quotaForm = new FormGroup({
-      name: new FormControl('', [Validators.required as any, this.nameTakenValidator()]),
-      totalServices: new FormControl(),
-      totalRoutes: new FormControl(),
-      memoryLimit: new FormControl(),
-      instanceMemoryLimit: new FormControl(),
-      nonBasicServicesAllowed: new FormControl(false),
-      totalReservedRoutePorts: new FormControl(),
-      appInstanceLimit: new FormControl(),
-    });
-
-    const quotaPaginationKey = createEntityRelationPaginationKey(endpointSchemaKey, this.cfGuid);
-    this.quotaDefinitions$ = getPaginationObservables<APIResource>(
-      {
-        store: this.store,
-        action: new GetQuotaDefinitions(quotaPaginationKey, this.cfGuid),
-        paginationMonitor: this.paginationMonitorFactory.create(
-          quotaPaginationKey,
-          entityFactory(quotaDefinitionSchemaKey)
-        )
-      },
-      true
-    ).entities$.pipe(
-      filter(o => !!o),
-      map(o => o.map(org => org.entity.name)),
-      tap((o) => this.allQuotas = o)
-    );
-
-    this.quotasSubscription = this.quotaDefinitions$.subscribe();
-  }
-
-  nameTakenValidator = (): ValidatorFn => {
-    return (formField: AbstractControl): { [key: string]: any } => {
-      if (!this.validateNameTaken(formField.value)) {
-        return { nameTaken: { value: formField.value } };
-      }
-
-      return null;
-    };
-  }
-
-  validateNameTaken = (value: string = null) => {
-    if (this.allQuotas) {
-      return this.allQuotas.indexOf(value || this.quotaForm.value.name) === -1;
-    }
-
-    return true;
-  }
-
-  validate = () => !!this.quotaForm && this.quotaForm.valid;
+  validate = () => !!this.form && this.form.valid();
 
   submit: StepOnNextFunction = () => {
-    const formValues = this.quotaForm.value;
+    const formValues = this.form.formGroup.value;
+    const UNLIMITED = -1;
 
     this.store.dispatch(new CreateQuotaDefinition(this.cfGuid, {
       name: formValues.name,
-      total_services: formValues.totalServices,
-      total_routes: formValues.totalRoutes,
+      total_services: formValues.totalServices || UNLIMITED,
+      total_routes: formValues.totalRoutes || UNLIMITED,
       memory_limit: formValues.memoryLimit,
       instance_memory_limit: formValues.instanceMemoryLimit,
+      app_task_limit: formValues.appTasksLimit,
+      total_private_domains: formValues.totalPrivateDomains,
+      total_service_keys: formValues.totalServiceKeys,
       non_basic_services_allowed: formValues.nonBasicServicesAllowed,
       total_reserved_route_ports: formValues.totalReservedRoutePorts,
       app_instance_limit: formValues.appInstanceLimit
     }));
 
-    return this.store.select(selectRequestInfo(quotaDefinitionSchemaKey, this.quotaForm.value.name)).pipe(
+    return this.store.select(selectRequestInfo(quotaDefinitionSchemaKey, formValues.name)).pipe(
       filter(requestInfo => !!requestInfo && !requestInfo.creating),
       map(requestInfo => ({
         success: !requestInfo.error,
@@ -120,8 +63,4 @@ export class CreateQuotaStepComponent implements OnInit, OnDestroy {
       }))
     );
   }
-
-  ngOnDestroy() {
-    safeUnsubscribe(this.quotasSubscription);
-  }
 }

src/frontend/packages/core/src/features/cloud-foundry/add-space-quota/add-space-quota.component.spec.ts

@@ -2,6 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { TabNavService } from '../../../../tab-nav.service';
 import { BaseTestModules } from '../../../../test-framework/cloud-foundry-endpoint-service.helper';
+import { SpaceQuotaDefinitionFormComponent } from '../space-quota-definition-form/space-quota-definition-form.component';
 import { AddSpaceQuotaComponent } from './add-space-quota.component';
 import { CreateSpaceQuotaStepComponent } from './create-space-quota-step/create-space-quota-step.component';
 
@@ -11,7 +12,7 @@ describe('AddSpaceQuotaComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [AddSpaceQuotaComponent, CreateSpaceQuotaStepComponent],
+      declarations: [AddSpaceQuotaComponent, CreateSpaceQuotaStepComponent, SpaceQuotaDefinitionFormComponent],
       imports: [...BaseTestModules],
       providers: [TabNavService]
     })

src/frontend/packages/core/src/features/cloud-foundry/add-space-quota/create-space-quota-step/create-space-quota-step.component.html

@@ -1,32 +1,4 @@
 <div class="add-space-quota">
   <div>Specify the parameters of the new quota</div>
-  <form [formGroup]="quotaForm" class="stepper-form">
-    <mat-form-field>
-      <input matInput formControlName="name" placeholder="Space Quota Name" required [appFocus]="true">
-      <mat-error *ngIf="quotaForm.controls.name?.hasError('nameTaken')">
-        A space quota with this name already exists. Please enter a different one.
-      </mat-error>
-    </mat-form-field>
-    <mat-form-field>
-      <input type="number" matInput formControlName="appInstanceLimit" placeholder="Total number of application instances">
-    </mat-form-field>
-    <mat-form-field>
-      <input type="number" matInput formControlName="instanceMemoryLimit" placeholder="Max amount of memory an app instance can have">
-      <span matSuffix>MB</span>
-    </mat-form-field>
-    <mat-form-field>
-      <input type="number" matInput formControlName="totalServices" placeholder="Total number of service instances" required>
-    </mat-form-field>
-    <mat-form-field>
-      <input type="number" matInput formControlName="memoryLimit" placeholder="Total amount of memory a space can have" required>
-      <span matSuffix>MB</span>
-    </mat-form-field>
-    <mat-form-field>
-      <input type="number" matInput formControlName="totalRoutes" placeholder="Total number of routes" required>
-    </mat-form-field>
-    <mat-form-field>
-      <input type="number" matInput formControlName="totalReservedRoutePorts" placeholder="Max number of routes with reserved ports">
-    </mat-form-field>
-    <mat-checkbox matInput formControlName="nonBasicServicesAllowed">Can provision instances of paid service plans</mat-checkbox>
-  </form>
+  <app-space-quota-definition-form #form></app-space-quota-definition-form>
 </div>

src/frontend/packages/core/src/features/cloud-foundry/add-space-quota/create-space-quota-step/create-space-quota-step.component.spec.ts

@@ -2,6 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { BaseTestModules } from '../../../../../test-framework/cloud-foundry-endpoint-service.helper';
 import { PaginationMonitorFactory } from '../../../../shared/monitors/pagination-monitor.factory';
+import { SpaceQuotaDefinitionFormComponent } from '../../space-quota-definition-form/space-quota-definition-form.component';
 import { CreateSpaceQuotaStepComponent } from './create-space-quota-step.component';
 
 describe('CreateSpaceQuotaStepComponent', () => {
@@ -10,7 +11,7 @@ describe('CreateSpaceQuotaStepComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [CreateSpaceQuotaStepComponent],
+      declarations: [CreateSpaceQuotaStepComponent, SpaceQuotaDefinitionFormComponent],
       imports: [...BaseTestModules],
       providers: [PaginationMonitorFactory]
     })