Improved error handling in the Import API page. Fixes #208

Signed-off-by: Eric Wittmann <eric.wittmann@gmail.com>
Apicurio · Feb 22, 2018 · f371b0e · f371b0e
1 parent c7d3d90
commit f371b0e
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 8 deletions.
diff --git a/front-end/studio/src/app/pages/apis/import/_components/import-form.component.html b/front-end/studio/src/app/pages/apis/import/_components/import-form.component.html
@@ -37,7 +37,11 @@
 
             <div class="form-group">
                 <div class="col-sm-offset-2 col-sm-10">
-                    <button type="submit" class="btn btn-primary" [disabled]="!apiForm.form.valid || importingApi || (importType === 'from-text' && !model.data)">Import API</button>
+                    <button type="submit" class="btn btn-primary"
+                            [disabled]="!apiForm.form.valid || importing || (importType === 'from-text' && !model.data)">
+                        <span *ngIf="!importing">Import API</span>
+                        <span *ngIf="importing"><span class="spinner spinner-xs spinner-inline"></span> Importing...</span>
+                    </button>
                 </div>
             </div>
         </form>

diff --git a/front-end/studio/src/app/pages/apis/import/_components/import-form.component.ts b/front-end/studio/src/app/pages/apis/import/_components/import-form.component.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import {Component, EventEmitter, Inject, Output} from "@angular/core";
+import {Component, EventEmitter, Inject, Input, Output} from "@angular/core";
 import {IApisService} from "../../../../services/apis.service";
 import {ImportApi} from "../../../../models/import-api.model";
 import {DropDownOption} from '../../../../components/common/drop-down.component';
@@ -29,12 +29,12 @@ import {DropDownOption} from '../../../../components/common/drop-down.component'
 })
 export class ImportApiFormComponent {
 
+    @Input() importing: boolean;
     @Output() onImportApi = new EventEmitter<ImportApi>();
 
     importType: string;
     textMode: string = "yaml";
     model: any;
-    importingApi: boolean;
     dragging: boolean;
     error: string;
 
@@ -48,7 +48,6 @@ export class ImportApiFormComponent {
             url: "",
             data: ""
         };
-        this.importingApi = false;
         this.dragging = false;
         this.error = null;
     }
@@ -66,7 +65,6 @@ export class ImportApiFormComponent {
             importApi.data = btoa(this.model.data);
         }
 
-        this.importingApi = true;
         this.onImportApi.emit(importApi);
     }
 
@@ -78,7 +76,6 @@ export class ImportApiFormComponent {
     }
 
     public onDrop(event: DragEvent): void {
-        console.info("DROP DATA: %o", event.dataTransfer);
         this.dragging = false;
         event.preventDefault();
 

diff --git a/front-end/studio/src/app/pages/apis/import/import.page.html b/front-end/studio/src/app/pages/apis/import/import.page.html
@@ -27,7 +27,13 @@
             </div>
         </div>
         <div class="col-md-7">
-            <importapi-form (onImportApi)="onImportApi($event)" #importApiForm></importapi-form>
+            <importapi-form (onImportApi)="onImportApi($event)" [importing]="importing" #importApiForm></importapi-form>
+            <div class="alert alert-warning" *ngIf="importError">
+                <span class="pficon pficon-warning-triangle-o"></span>
+                <strong>Error Importing API!</strong> We couldn't find the content you've asked us to import.  Please verify that
+                a valid API Design exists at the import location.  If you are trying to import from Source Control, make sure you
+                have successfully linked your account(s) in <a routerLink="/settings/accounts">Settings</a>.
+            </div>
         </div>
     </div>
 </div>
diff --git a/front-end/studio/src/app/pages/apis/import/import.page.ts b/front-end/studio/src/app/pages/apis/import/import.page.ts
@@ -30,6 +30,9 @@ import {ImportApi} from "../../../models/import-api.model";
 })
 export class ImportApiPageComponent extends AbstractPageComponent {
 
+    public importing: boolean = false;
+    public importError: any;
+
     /**
      * Constructor.
      * @param {Router} router
@@ -46,14 +49,21 @@ export class ImportApiPageComponent extends AbstractPageComponent {
      * @param {ImportApi} api
      */
     public onImportApi(api: ImportApi) {
+        this.importing = true;
+        this.importError = null;
         console.log("[ImportApiPageComponent] onImportApi(): " + JSON.stringify(api))
         this.apis.importApi(api).then(updatedApi => {
             let link: string[] = [ "/apis", updatedApi.id ];
             console.info("[ImportApiPageComponent] Navigating to: %o", link);
             this.router.navigate(link);
         }).catch( error => {
             console.error("[ImportApiPageComponent] Error importing API: %o", error);
-            this.error(error);
+            this.importing = false;
+            if (error.status === 404) {
+                this.importError = error;
+            } else {
+                this.error(error);
+            }
         })
     }