In CreateFromBuilder and OrderService wizards, correct error handling…

… of ProjectNameTaken
openshift · Nov 7, 2017 · 19700be · 19700be
1 parent 86e18a8
commit 19700be
Show file tree

Hide file tree

Showing 9 changed files with 133 additions and 1,126 deletions.
diff --git a/dist/origin-web-catalogs.js b/dist/origin-web-catalogs.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/create-from-builder/create-from-builder.controller.ts b/src/components/create-from-builder/create-from-builder.controller.ts
@@ -106,6 +106,7 @@ export class CreateFromBuilderController implements angular.IController {
       onShow: this.showResults
     };
     this.ctrl.steps = [this.infoStep, this.configStep, this.bindStep, this.reviewStep];
+    this.ctrl.currentStep = "Information";
     this.ctrl.versions = this.getVersions();
     this.ctrl.istag = _.head(this.ctrl.versions);
     this.ctrl.nameMaxLength = 24;
@@ -128,6 +129,10 @@ export class CreateFromBuilderController implements angular.IController {
       this.onProjectUpdate
     );
 
+    this.$scope.$watch('$ctrl.selectedProject.metadata.name', () => {
+      this.ctrl.projectNameTaken = false;
+    });
+
     if (this.ctrl.showPodPresets) {
       // FIXME: We should not need to request these again.
       this.getServiceClassesAndPlans();
@@ -218,6 +223,7 @@ export class CreateFromBuilderController implements angular.IController {
   };
 
   private showConfig = () => {
+    this.ctrl.currentStep = "Configuration";
     this.clearValidityWatcher();
     this.ctrl.nextTitle = this.bindStep.hidden ? 'Create' : 'Next >';
     this.reviewStep.allowed = this.bindStep.hidden && this.configStep.valid;
@@ -240,6 +246,7 @@ export class CreateFromBuilderController implements angular.IController {
     this.clearValidityWatcher();
     this.ctrl.nextTitle = 'Close';
     this.ctrl.wizardDone = true;
+    this.ctrl.currentStep = "Results";
 
     this.createApp();
   };
@@ -383,8 +390,14 @@ export class CreateFromBuilderController implements angular.IController {
       }, (e: any) => {
         this.ctrl.error = e;
       });
-    }, (result) => {
-      this.ctrl.error = result;
+    }, (e) => {
+      if (e.data.reason === 'AlreadyExists') {
+        this.ctrl.projectNameTaken = true;
+        this.ctrl.wizardDone = false;
+        this.ctrl.currentStep = "Configuration";
+      } else {
+        this.ctrl.error = e;
+      }
     });
   };
 

diff --git a/src/components/create-from-builder/create-from-builder.html b/src/components/create-from-builder/create-from-builder.html
@@ -3,6 +3,7 @@
        wizard-title="{{$ctrl.imageStream.name}} {{$ctrl.istag.name}}"
        hide-sidebar="true"
        step-class="order-service-wizard-step"
+       current-step="$ctrl.currentStep"
        wizard-ready="$ctrl.wizardReady"
        next-title="$ctrl.nextTitle"
        on-finish="$ctrl.closePanel()"

diff --git a/src/components/order-service/order-service-configure.html b/src/components/order-service/order-service-configure.html
@@ -1,7 +1,7 @@
 <div class="order-service-config">
   <div class="config-top">
     <form name="$ctrl.forms.orderConfigureForm" class="config-form">
-      <select-project selected-project="$ctrl.selectedProject" name-taken="$ctrl.nameTaken" show-divider="$ctrl.parameterSchema.properties.length > 0"></select-project>
+      <select-project selected-project="$ctrl.selectedProject" name-taken="$ctrl.projectNameTaken" show-divider="$ctrl.parameterSchema.properties.length > 0"></select-project>
       <catalog-parameters
         ng-if="$ctrl.parameterSchema.properties && !$ctrl.noProjectsCantCreate"
         model="$ctrl.parameterData"

diff --git a/src/components/order-service/order-service.controller.ts b/src/components/order-service/order-service.controller.ts
@@ -147,7 +147,8 @@ export class OrderServiceController implements angular.IController {
     };
 
     this.ctrl.steps = [this.infoStep, this.planStep, this.configStep, this.bindStep, this.bindParametersStep, this.reviewStep];
-    this.ctrl.nameTaken = false;
+    this.ctrl.currentStep = "Information";
+    this.ctrl.projectNameTaken = false;
     this.ctrl.wizardDone = false;
     this.ctrl.bindType = "none";
 
@@ -167,6 +168,10 @@ export class OrderServiceController implements angular.IController {
       this.onProjectUpdate
     );
 
+    this.$scope.$watch('$ctrl.selectedProject.metadata.name', () => {
+      this.ctrl.projectNameTaken = false;
+    });
+
     this.bindTypeWatch = this.$scope.$watch("$ctrl.bindType", (current: any, previous: any) => {
       if (current === previous) {
         return;
@@ -203,6 +208,7 @@ export class OrderServiceController implements angular.IController {
   };
 
   public showConfig = () => {
+    this.ctrl.currentStep = "Configuration";
     this.clearValidityWatcher();
     this.ctrl.configPageShown = true;
     this.reviewStep.allowed = this.bindStep.hidden && this.configStep.valid;
@@ -244,6 +250,7 @@ export class OrderServiceController implements angular.IController {
   };
 
   public showResults = () => {
+    this.ctrl.currentStep = "Results";
     this.clearValidityWatcher();
     this.ctrl.configPageShown = false;
     this.ctrl.nextTitle = "Close";
@@ -276,8 +283,14 @@ export class OrderServiceController implements angular.IController {
           this.ctrl.selectedProject = project;
           this.ctrl.projectDisplayName = this.$filter('displayName')(project);
           this.createService();
-        }, (result: any) => {
-          this.ctrl.error = result.data;
+        }, (e: any) => {
+          if (e.data.reason === 'AlreadyExists') {
+            this.ctrl.projectNameTaken = true;
+            this.ctrl.wizardDone = false;
+            this.ctrl.currentStep = "Configuration";
+          } else {
+            this.ctrl.error = e;
+          }
         });
     } else {
       this.ctrl.projectDisplayName = this.$filter('displayName')(this.ctrl.selectedProject);

diff --git a/src/components/order-service/order-service.html b/src/components/order-service/order-service.html
@@ -3,6 +3,7 @@
        wizard-title="{{$ctrl.serviceName}}"
        hide-sidebar="true"
        step-class="order-service-wizard-step"
+       current-step="$ctrl.currentStep"
        wizard-ready="$ctrl.wizardReady"
        next-title="$ctrl.nextTitle"
        on-finish="$ctrl.closePanel()"

diff --git a/src/components/select-project/select-project.controller.ts b/src/components/select-project/select-project.controller.ts
@@ -54,7 +54,6 @@ export class SelectProjectController implements angular.IController {
   }
 
   public $onInit() {
-    this.ctrl.nameTaken = false;
     this.ctrl.noProjectsCantCreate = false;
 
     this.ctrl.noProjectsConfig = {
@@ -114,11 +113,6 @@ export class SelectProjectController implements angular.IController {
     }
   }
 
-  public onNewProjectNameChange() {
-    this.ctrl.nameTaken = false;
-    this.ctrl.forms.createProjectForm.name.$setValidity('nameTaken', !this.ctrl.nameTaken);
-  }
-
   public isNewProject(): boolean {
     return this.projects && this.ctrl.selectedProject && !_.has(this.ctrl.selectedProject, 'metadata.uid');
   }

diff --git a/src/components/select-project/selectProject.html b/src/components/select-project/selectProject.html
@@ -58,7 +58,8 @@ <h3 ng-if="$ctrl.canOnlyCreateProject()">Create Project</h3>
     ng-if="$ctrl.isNewProject()">
   <div class="form-group">
     <label for="name" class="control-label required">Project Name</label>
-    <div ng-class="{'has-error': ($ctrl.forms.createProjectForm.name.$error.pattern && $ctrl.forms.createProjectForm.name.$touched) || $ctrl.nameTaken}">
+    <div ng-class="{'has-error': ($ctrl.forms.createProjectForm.name.$error.pattern && $ctrl.forms.createProjectForm.name.$touched) ||
+                                 $ctrl.nameTaken || $ctrl.forms.createProjectForm.name.$error.oscUnique}">
       <input class="form-control"
           name="name"
           id="name"
@@ -73,27 +74,26 @@ <h3 ng-if="$ctrl.canOnlyCreateProject()">Create Project</h3>
           ng-model="$ctrl.selectedProject.metadata.name"
           osc-unique="$ctrl.existingProjectNames"
           ng-model-options="{ updateOn: 'default blur' }"
-          ng-change="$ctrl.onNewProjectNameChange()"
           autocorrect="off"
           autocapitalize="off"
           spellcheck="false">
-      <div class="help-block">A unique name for the project.</div>
-      <div class="has-error" ng-if="$ctrl.forms.createProjectForm.name.$error.minlength && $ctrl.forms.createProjectForm.name.$touched">
-        <span id="nameHelp" class="help-block">
-          Name must have at least two characters.
-        </span>
-      </div>
-      <div class="has-error" ng-if="$ctrl.forms.createProjectForm.name.$error.pattern && $ctrl.forms.createProjectForm.name.$touched">
-        <span id="nameHelp" class="help-block">
-          Project names may only contain lower-case letters, numbers, and dashes.
-          They may not start or end with a dash.
-        </span>
-      </div>
-      <div class="has-error" ng-if="$ctrl.nameTaken || $ctrl.forms.createProjectForm.name.$error.oscUnique">
-        <span class="help-block">
-          This name is already in use. Please choose a different name.
-        </span>
-      </div>
+    </div>
+    <div class="help-block">A unique name for the project.</div>
+    <div class="has-error" ng-if="$ctrl.forms.createProjectForm.name.$error.minlength && $ctrl.forms.createProjectForm.name.$touched">
+      <span id="nameHelp" class="help-block">
+        Name must have at least two characters.
+      </span>
+    </div>
+    <div class="has-error" ng-if="$ctrl.forms.createProjectForm.name.$error.pattern && $ctrl.forms.createProjectForm.name.$touched">
+      <span id="nameHelp" class="help-block">
+        Project names may only contain lower-case letters, numbers, and dashes.
+        They may not start or end with a dash.
+      </span>
+    </div>
+    <div class="has-error" ng-if="$ctrl.nameTaken || $ctrl.forms.createProjectForm.name.$error.oscUnique">
+      <span class="help-block">
+        This name is already in use. Please choose a different name.
+      </span>
     </div>
   </div>