DHFPROD-1328 fix validating that new Flow name is not a duplicate

Author: clockworked247

quick-start/src/main/ui/app/flows/flows.component.html

@@ -39,7 +39,7 @@
                   <li
                     class="flow mdl-list__item"
                     [attr.data-flow-list]="type.toUpperCase()"
-                    [ngClass]="{'active': isActiveFlow(flow)}"
+                    [ngClass]="{'active': isActiveFlow(flow, type)}"
                     *ngFor="let flow of getFlows(entity, type)">
                     <div (click)="setFlow(flow, type.toUpperCase())" [attr.data-flow-name]="flow.flowName">
                       <span class="mdl-list__item-primary-content">

quick-start/src/main/ui/app/flows/flows.component.ts

@@ -279,9 +279,11 @@ export class FlowsComponent implements OnInit, OnDestroy {
     }
   }
 
-  isActiveFlow(flow: Flow): boolean {
-    return this.flow && this.flow.entityName === flow.entityName &&
-      this.flow.flowName === flow.flowName;
+  isActiveFlow(flow: Flow, flowType: string): boolean {
+    return this.flow && 
+      this.flow.entityName === flow.entityName &&
+      this.flow.flowName === flow.flowName &&
+      this.flowType.toUpperCase() === flowType.toUpperCase();
   }
 
   isActiveEntity(entity: Entity): boolean {
@@ -324,17 +326,15 @@ export class FlowsComponent implements OnInit, OnDestroy {
       providers: [
         { provide: 'flowType', useValue: flowType },
         { provide: 'actions', useValue: actions },
-        { provide: 'entity', useValue: entity}
+        { provide: 'entity', useValue: entity },
+        { provide: 'flows', useValue: this.getFlows(entity, flowType) }
       ],
       isModal: true
     });
   }
 
   getFlows(entity: Entity, flowType: string) {
-    if (flowType === 'Input') {
-      return entity.inputFlows;
-    }
-    return entity.harmonizeFlows;
+    return (flowType.toUpperCase() === 'INPUT') ? entity.inputFlows : entity.harmonizeFlows;
   }
 
   getFlowType(flow: Flow, entityName: string) {

quick-start/src/main/ui/app/new-flow/new-flow.component.html

@@ -10,12 +10,17 @@
     <form (submit)="create()">
       <div class="modal-body">
         <div class="md-dialog-content" flex layout="column">
-          <mdl-textfield name="flowTypeInput" type="text"
+          <mdl-textfield 
+            [ngClass]="{ 'custom-invalid' : !isNameValid }"
+            name="flowTypeInput" 
+            type="text"
             required autofocus floating-label
             id="flowTypeInput"
             label="{{flowType}} Flow Name (required)"
             #flowTypeInput="ngModel"
-            [(ngModel)]="flow.flowName"></mdl-textfield>
+            [(ngModel)]="flow.flowName"
+            (keyup)="checkName()"></mdl-textfield>
+          <div *ngIf="!isNameValid" class="alert-text">{{ errorMsg }}</div>
           <ng-template [ngIf]="getMarkLogicVersion() >= 9">
             <label>Code Generation</label>
             <app-select-list
@@ -47,7 +52,7 @@
         </div>
       </div>
       <div class="mdl-dialog__actions">
-        <button type="submit" [disabled]="flowTypeInput && flowTypeInput.errors && flowTypeInput.errors.required" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Create</button>
+        <button type="submit" [disabled]="(flowTypeInput && flowTypeInput.errors && flowTypeInput.errors.required) || !isNameValid" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Create</button>
         <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" (click)="cancel()">Cancel</button>
       </div>
     </form>

quick-start/src/main/ui/app/new-flow/new-flow.component.scss

@@ -15,6 +15,15 @@
   mdl-textfield {
     width: 100%;
   }
+
+  /deep/ mdl-textfield.custom-invalid input.mdl-textfield__input {
+    border-bottom: 1px solid #a94442;
+  }
+
+  .alert-text {
+    margin-top:-20px;  /* position directly under the input */
+    color: #a94442;
+  }
 }
 
 /deep/ .mdl-textfield__label:after {

quick-start/src/main/ui/app/new-flow/new-flow.component.ts

@@ -8,6 +8,7 @@ import * as _ from 'lodash';
 import {MapService} from "../mappings/map.service";
 import {Mapping} from "../mappings/mapping.model";
 import {Entity} from "../entities";
+import {Flow} from '../entities/flow.model';
 
 @Component({
   selector: 'app-new-flow',
@@ -18,6 +19,9 @@ export class NewFlowComponent implements OnDestroy {
   flowType: string;
   actions: any;
   entity: Entity;
+  flows: Array<Flow>;
+  errorMsg: string;
+  isNameValid: boolean = true;
 
   scaffoldOptions = [
     { label: 'Create Structure from Entity Definition', value: true },
@@ -59,22 +63,22 @@ export class NewFlowComponent implements OnDestroy {
     private mapService: MapService,
     @Inject('flowType') flowType: string,
     @Inject('actions') actions: any,
-    @Inject('entity') entity: Entity
+    @Inject('entity') entity: Entity,
+    @Inject('flows') flows: Array<Flow>
   ) {
     this.flowType = _.capitalize(flowType);
     this.flow = _.clone(this.emptyFlow);
     this.actions = actions;
     this.entity = entity;
+    this.flows = flows;
     this.startingMappingOption = this.mappingOptions[0];
     this.mapService.getMappings();
     if (this.getMarkLogicVersion() === 8) {
       this.flow.useEsModel = false;
     } else {
-      if (flowType === 'INPUT') {
-        this.startingScaffoldOption = this.scaffoldOptions[1];
-      } else {
-        this.startingScaffoldOption = this.scaffoldOptions[0];
-      }
+      this.startingScaffoldOption = (flowType === 'INPUT') ?
+        this.scaffoldOptions[1] :
+        this.scaffoldOptions[0];
     }
   }
 
@@ -119,4 +123,16 @@ export class NewFlowComponent implements OnDestroy {
     let version = this.envService.marklogicVersion.substr(0, this.envService.marklogicVersion.indexOf('.'));
     return parseInt(version);
   }
+
+  checkName() {
+    let nameValid = true;
+    let entityName = this.entity && this.entity.info && this.entity.info.title;
+    let flowPrefix = (this.flowType.toUpperCase() === 'INPUT') ? 'an' : 'a';
+    _.forEach(this.flows, (f) => {
+      nameValid = (this.flow.flowName === f.flowName) ? false: nameValid;
+    });
+    this.errorMsg = (!nameValid) ? `Flow names must be unique. Entity "${entityName}" already contains ${flowPrefix} ${this.flowType} flow named "${this.flow.flowName}"` : '';
+    this.isNameValid = nameValid;
+  }
+  
 }