Validate entity names locally

src/frontend/app/features/applications/create-application/create-application-step3/create-application-step3.component.html

@@ -1,13 +1,14 @@
 <b>Create a route</b>
-<form novalidate #form="ngForm" class="stepper-form">
+<form [formGroup]="setDomainHost" class="stepper-form">
   <mat-form-field>
-    <mat-select placeholder="Domain" name="domain" [(ngModel)]="selectedDomainGuid">
+    <mat-select placeholder="Domain" name="domain" formControlName="domain">
       <mat-option *ngFor="let domain of (domains$ | async)" [value]="domain.entity.guid">
         <span>{{ domain.entity.name }}</span>
       </mat-option>
     </mat-select>
   </mat-form-field>
   <mat-form-field>
-    <input required [disabled]="!form.controls['domain']?.value" [(ngModel)]="hostName" matInput placeholder="Host" name="hostName">
+    <input required formControlName="host" matInput placeholder="Host" name="hostName">
+    <mat-error *ngIf="setDomainHost.controls['host']?.errors?.maxlength">Host cannot exceed 63 characters</mat-error>
   </mat-form-field>
 </form>

src/frontend/app/features/applications/create-application/create-application-step3/create-application-step3.component.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { NgForm } from '@angular/forms';
-import { Router } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators, AbstractControl } from '@angular/forms';
+import { ErrorStateMatcher, ShowOnDirtyErrorStateMatcher } from '@angular/material';
 import { Store } from '@ngrx/store';
 import { combineLatest, Observable, of as observableOf } from 'rxjs';
 import { catchError, filter, first, map, mergeMap, switchMap, tap } from 'rxjs/operators';
@@ -33,19 +33,23 @@ import { createGetApplicationAction } from '../../application.service';
 @Component({
   selector: 'app-create-application-step3',
   templateUrl: './create-application-step3.component.html',
-  styleUrls: ['./create-application-step3.component.scss']
+  styleUrls: ['./create-application-step3.component.scss'],
+  providers: [
+    { provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher }
+  ]
 })
 export class CreateApplicationStep3Component implements OnInit {
 
-  constructor(private store: Store<AppState>, private router: Router, private entityServiceFactory: EntityServiceFactory) { }
+  setDomainHost: FormGroup;
 
-  @ViewChild('form')
-  form: NgForm;
-
-  hostName: string;
+  constructor(private store: Store<AppState>, private entityServiceFactory: EntityServiceFactory) {
+    this.setDomainHost = new FormGroup({
+      domain: new FormControl('', [Validators.required]),
+      host: new FormControl({ disabled: true }, [Validators.required, Validators.maxLength(63)]),
+    });
+  }
 
   domains$: Observable<IDomain[]>;
-  selectedDomainGuid: string;
 
   message = null;
 
@@ -84,13 +88,13 @@ export class CreateApplicationStep3Component implements OnInit {
   }
 
   validate(): boolean {
-    return !!this.selectedDomainGuid && !!this.hostName;
+    return this.setDomainHost.valid;
   }
 
   createApp(): Observable<RequestInfoState> {
     const { cloudFoundryDetails, name } = this.newAppData;
 
-    const { cloudFoundry, org, space } = cloudFoundryDetails;
+    const { cloudFoundry, space } = cloudFoundryDetails;
     const newAppGuid = name + space;
 
     this.store.dispatch(new CreateNewApplication(
@@ -104,20 +108,21 @@ export class CreateApplicationStep3Component implements OnInit {
   }
 
   createRoute(): Observable<RequestInfoState> {
-    const { cloudFoundryDetails, name } = this.newAppData;
+    const { cloudFoundryDetails } = this.newAppData;
 
-    const { cloudFoundry, org, space } = cloudFoundryDetails;
-    const hostName = this.hostName;
-    const shouldCreate = this.selectedDomainGuid && hostName && this.form.valid;
-    const newRouteGuid = hostName + this.selectedDomainGuid;
+    const { cloudFoundry, space } = cloudFoundryDetails;
+    const hostName = this.hostControl().value;
+    const selectedDomainGuid = this.domainControl().value;
+    const shouldCreate = selectedDomainGuid && hostName;
+    const newRouteGuid = hostName + selectedDomainGuid;
 
     if (shouldCreate) {
       this.store.dispatch(new CreateRoute(
         newRouteGuid,
         cloudFoundry,
         {
           space_guid: space,
-          domain_guid: this.selectedDomainGuid,
+          domain_guid: selectedDomainGuid,
           host: hostName
         }
       ));
@@ -130,17 +135,15 @@ export class CreateApplicationStep3Component implements OnInit {
     });
   }
 
-  associateRoute(appGuid, routeGuid, endpointGuid): Observable<RequestInfoState> {
+  associateRoute(appGuid: string, routeGuid: string, endpointGuid: string): Observable<RequestInfoState> {
     this.store.dispatch(new AssociateRouteWithAppApplication(appGuid, routeGuid, endpointGuid));
     return this.wrapObservable(this.store.select(selectRequestInfo(applicationSchemaKey, appGuid)),
       'Application and route created. Could not associated route with app');
   }
 
   private wrapObservable(obs$: Observable<RequestInfoState>, errorString: string): Observable<RequestInfoState> {
     return obs$.pipe(
-      filter((state: RequestInfoState) => {
-        return state && !state.creating;
-      }),
+      filter((state: RequestInfoState) => state && !state.creating),
       first(),
       tap(state => {
         if (state.error) {
@@ -155,7 +158,8 @@ export class CreateApplicationStep3Component implements OnInit {
     this.domains$ = this.store.select(selectNewAppState).pipe(
       filter(state => state.cloudFoundryDetails && state.cloudFoundryDetails.cloudFoundry && state.cloudFoundryDetails.org),
       mergeMap(state => {
-        this.hostName = state.name.split(' ').join('-').toLowerCase();
+        this.hostControl().setValue(state.name.split(' ').join('-').toLowerCase());
+        this.hostControl().markAsDirty();
         this.newAppData = state;
         const orgEntService = this.entityServiceFactory.create<APIResource<any>>(
           organizationSchemaKey,
@@ -167,9 +171,10 @@ export class CreateApplicationStep3Component implements OnInit {
           true
         );
         return orgEntService.waitForEntity$.pipe(
-          map(({ entity, entityRequestInfo }) => {
-            if (!this.selectedDomainGuid && entity.entity.domains && entity.entity.domains.length) {
-              this.selectedDomainGuid = entity.entity.domains[0].entity.guid;
+          map(({ entity }) => {
+            if (!this.domainControl().value && entity.entity.domains && entity.entity.domains.length) {
+              this.domainControl().setValue(entity.entity.domains[0].entity.guid);
+              this.hostControl().enable();
             }
             return entity.entity.domains;
           })
@@ -178,4 +183,12 @@ export class CreateApplicationStep3Component implements OnInit {
     );
   }
 
+  private domainControl(): AbstractControl {
+    return this.setDomainHost.controls.domain;
+  }
+
+  private hostControl(): AbstractControl {
+    return this.setDomainHost.controls.host;
+  }
+
 }

src/frontend/app/features/applications/routes/add-routes/add-routes.component.html

@@ -28,12 +28,14 @@
           <mat-form-field>
             <input matInput formControlName="host" placeholder="Host" required>
             <mat-error *ngIf="addHTTPRoute.controls['host'].errors?.pattern">Invalid Hostname</mat-error>
+            <mat-error *ngIf="addHTTPRoute.controls['host'].errors?.maxlength">Host cannot exceed 63 characters</mat-error>
           </mat-form-field>
         </div>
         <div>
           <mat-form-field>
             <input matInput formControlName="path" placeholder="Path">
             <mat-error *ngIf="addHTTPRoute.controls['path'].errors?.pattern">Invalid Path</mat-error>
+            <mat-error *ngIf="addHTTPRoute.controls['path'].errors?.maxlength">Path cannot exceed 128 characters</mat-error>
             <span matPrefix>/&nbsp;</span>
           </mat-form-field>
         </div>

src/frontend/app/features/applications/routes/add-routes/add-routes.component.ts

@@ -1,18 +1,20 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { BehaviorSubject, Observable, of as observableOf, Subscription } from 'rxjs';
-import { filter, map, mergeMap, pairwise, switchMap, take, tap, combineLatest } from 'rxjs/operators';
+import { filter, map, mergeMap, pairwise, switchMap, take, tap } from 'rxjs/operators';
 
-import { ISpace, IDomain } from '../../../../core/cf-api.types';
+import { IDomain, ISpace } from '../../../../core/cf-api.types';
 import { EntityServiceFactory } from '../../../../core/entity-service-factory.service';
 import { pathGet } from '../../../../core/utils.service';
 import { StepOnNextFunction, StepOnNextResult } from '../../../../shared/components/stepper/step/step.component';
+import { PaginationMonitorFactory } from '../../../../shared/monitors/pagination-monitor.factory';
 import {
   AssociateRouteWithAppApplication,
   GetAppRoutes,
 } from '../../../../store/actions/application-service-routes.actions';
+import { FetchAllDomains } from '../../../../store/actions/domains.actions';
 import { CreateRoute } from '../../../../store/actions/route.actions';
 import { RouterNav } from '../../../../store/actions/router.actions';
 import { GetSpace } from '../../../../store/actions/space.actions';
@@ -26,14 +28,11 @@ import {
 } from '../../../../store/helpers/entity-factory';
 import { createEntityRelationKey } from '../../../../store/helpers/entity-relations/entity-relations.types';
 import { RequestInfoState } from '../../../../store/reducers/api-request-reducer/types';
+import { getPaginationObservables } from '../../../../store/reducers/pagination-reducer/pagination-reducer.helper';
 import { selectRequestInfo } from '../../../../store/selectors/api.selectors';
 import { APIResource } from '../../../../store/types/api.types';
-import { Domain } from '../../../../store/types/domain.types';
 import { Route, RouteMode } from '../../../../store/types/route.types';
 import { ApplicationService } from '../../application.service';
-import { FetchAllDomains } from '../../../../store/actions/domains.actions';
-import { PaginationMonitorFactory } from '../../../../shared/monitors/pagination-monitor.factory';
-import { getPaginationObservables } from '../../../../store/reducers/pagination-reducer/pagination-reducer.helper';
 
 const hostPattern = '^([\\w\\-\\.]*)$';
 const pathPattern = `^([\\w\\-\\/\\!\\#\\[\\]\\@\\&\\$\\'\\(\\)\\*\\+\\;\\=\\,]*)$`;
@@ -82,8 +81,8 @@ export class AddRoutesComponent implements OnInit, OnDestroy {
     });
 
     this.addHTTPRoute = new FormGroup({
-      host: new FormControl('', [<any>Validators.required, Validators.pattern(hostPattern)]),
-      path: new FormControl('', [Validators.pattern(pathPattern)])
+      host: new FormControl('', [<any>Validators.required, Validators.pattern(hostPattern), Validators.maxLength(63)]),
+      path: new FormControl('', [Validators.pattern(pathPattern), Validators.maxLength(128)])
     });
 
     this.addTCPRoute = new FormGroup({

src/frontend/app/shared/components/add-service-instance/specify-details-step/specify-details-step.component.html

@@ -14,6 +14,9 @@
       <mat-error *ngIf="createNewInstanceForm.controls.name?.hasError('nameTaken')">
         A service instance with this name already exists. Please enter a different one.
       </mat-error>
+      <mat-error *ngIf="createNewInstanceForm.controls.name?.hasError('maxlength')">
+        A service instance name cannot exceed 50 characters.
+      </mat-error>
     </mat-form-field>
     <mat-form-field class="stepper-form__tags">
       <mat-chip-list #chipList formControlName="tags" class="stepper-form__tags__chip-list">

src/frontend/app/shared/components/add-service-instance/specify-details-step/specify-details-step.component.ts

@@ -262,7 +262,7 @@ export class SpecifyDetailsStepComponent implements OnDestroy, AfterContentInit
 
   private setupForms() {
     this.createNewInstanceForm = new FormGroup({
-      name: new FormControl('', [Validators.required, this.nameTakenValidator()]),
+      name: new FormControl('', [Validators.required, this.nameTakenValidator(), Validators.maxLength(50)]),
       tags: new FormControl(''),
     });
     this.selectExistingInstanceForm = new FormGroup({