fix: add a loader in gitHubProvider component while github detail fet…

…ch in background (#569)
fabric8-launcher · Feb 5, 2019 · 9e3efda · 9e3efda
1 parent 5d77a20
commit 9e3efda
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 16 deletions.
diff --git a/projects/ngx-launcher/src/lib/components/gitprovider-step/gitprovider-step.component.html b/projects/ngx-launcher/src/lib/components/gitprovider-step/gitprovider-step.component.html
@@ -29,26 +29,26 @@ <h3>GitHub</h3>
             <!-- Enable Access-Conrtol-Expose-Headers for CORS to test -->
             <h3>Authorized Account Information</h3>
             <div class="form-horizontal">
-              <div class="form-group">
-                <label for="ghAccount" class="col-sm-2 control-label">Username</label>
-                <div class="col-sm-10 f8launcher-provider-card-information-authorize">
+              <div class="form-group container-fluid">
+                <label for="ghAccount" class="col-lg-2 col-md-3 col-sm-3 padding-0">Username</label>
+                <div class="col-lg-10 col-md-9 col-sm-9 f8launcher-provider-card-information-authorize padding-0">
                     <img height="30px" width="30px" [src]="gitHubDetails?.avatar"
-                          *ngIf="gitHubDetails?.avatar !== undefined">
+                         *ngIf="gitHubDetails?.avatar !== undefined">
                     <span class="f8launcher-username-login" *ngIf="gitHubDetails?.login !== undefined">
                       {{gitHubDetails?.login}}
                     </span>
                     <i class="fa fa-ban fa-2x" *ngIf="gitHubDetails?.avatar === undefined"></i>
                     <span class="f8launcher-username"
-                          *ngIf="gitHubDetails?.login === undefined"> None
+                          *ngIf="gitHubDetails?.login === undefined;"> None
                     </span>
                     <button class="btn btn-primary btn-lg f8launcher-authorize-account"
-                            [disabled]="gitHubDetails.login"
+                            [disabled]="gitHubDetails.login || !gitHubDetailLoaded"
                             (click)="connectAccount()">Log In &amp; Authorize Account</button>
                 </div>
               </div>
-              <div class="form-group">
-                <label for="ghOrg" class="col-sm-2 control-label">Location</label>
-                <div class="col-sm-10">
+              <div class="form-group container-fluid" *ngIf="gitHubDetailLoaded; else loadingSpinner">
+                <label for="ghOrg" class="col-lg-2 col-md-3 col-sm-3 padding-0">Location <span class="required"> *</span></label>
+                <div class="col-lg-10 col-md-9 col-sm-9 padding-0">
                   <select id="ghOrg" class="form-control" name="ghOrg" placeholder="Select organization"
                           [disabled]="!gitHubDetails.organizations"
                           (ngModelChange)="getGitHubRepos($event)"
@@ -60,9 +60,9 @@ <h3>Authorized Account Information</h3>
                   </select>
                 </div>
               </div>
-              <div class="form-group">
-                <label for="ghRepo" class="col-sm-2 control-label">Repository</label>
-                <div class="col-sm-10" id="gitRt"
+              <div class="form-group container-fluid" *ngIf="gitHubDetailLoaded">
+                <label for="ghRepo" class="col-lg-2 col-md-3 col-sm-3 padding-0">Repository <span class="required"> *</span></label>
+                <div class="col-lg-10 col-md-9 col-sm-9 padding-0" id="gitRt"
                     [class.has-error]="ghRepo.invalid">
                   <input id="ghRepo" class="form-control" name="ghRepo" type="text" #ghRepo="ngModel" lowercase required
                         [placeholder]="import ? 'Select Repository' : 'Enter a unique name for your repository'"
@@ -89,6 +89,11 @@ <h3>Authorized Account Information</h3>
                   </span>
                 </div>
               </div>
+              <ng-template #loadingSpinner>
+                <div class="text-center">
+                  <span class="spinner spinner-sm spinner-inline nav-spinner"></span>
+                </div>
+              </ng-template>
             </div>
           </div>
           <div class="col-xs-12" *ngIf="import">

diff --git a/projects/ngx-launcher/src/lib/components/gitprovider-step/gitprovider-step.component.less b/projects/ngx-launcher/src/lib/components/gitprovider-step/gitprovider-step.component.less
@@ -59,4 +59,10 @@
   ul.dropdown-menu {
     max-height: 400px;
   }
+  .required {
+    color: @color-pf-red;
+  }
+  .padding-0 {
+    padding: 0;
+  }
 }
diff --git a/projects/ngx-launcher/src/lib/components/gitprovider-step/gitprovider-step.component.ts b/projects/ngx-launcher/src/lib/components/gitprovider-step/gitprovider-step.component.ts
@@ -15,9 +15,10 @@ import {
 } from '@angular/core';
 import { NgForm } from '@angular/forms';
 import { Broadcaster } from 'ngx-base';
-import { Subscription } from 'rxjs';
+import { Subscription, throwError } from 'rxjs';
 import { BuildTool } from './../../model/build-tool.model';
 
+import { catchError } from 'rxjs/operators';
 import { LauncherStep } from '../../launcher-step';
 import { LauncherComponent } from '../../launcher.component';
 import { GitHubDetails } from '../../model/github-details.model';
@@ -43,6 +44,7 @@ export class GitproviderStepComponent extends LauncherStep implements AfterViewI
   detectedTool: BuildTool;
   runtimeDetectionSecVisible: boolean = false;
   isRuntimeDetected: boolean = false;
+  gitHubDetailLoaded: boolean = false;
 
   constructor(@Host() @Optional() public launcherComponent: LauncherComponent,
               private projectile: Projectile<GitHubDetails>,
@@ -86,8 +88,15 @@ export class GitproviderStepComponent extends LauncherStep implements AfterViewI
       this.launcherComponent.addStep(this);
     }
 
-    this.subscriptions.push(this.gitProviderService.getGitHubDetails().subscribe((val) => {
+    this.subscriptions.push(this.gitProviderService.getGitHubDetails().pipe(
+      catchError((error) => {
+        this.gitHubDetailLoaded = true;
+        return throwError(error);
+      })
+    )
+    .subscribe((val) => {
       if (val !== undefined) {
+        this.gitHubDetailLoaded = true;
         Object.assign(this.gitHubDetails, val);
         this.restore();
       }

diff --git a/src/app/service/demo-git-provider.service.ts b/src/app/service/demo-git-provider.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { EMPTY, Observable, of } from 'rxjs';
+import { EMPTY, Observable, of, throwError } from 'rxjs';
 import { delay } from 'rxjs/operators';
 import { GitHubDetails } from '../../../projects/ngx-launcher/src/lib/model/github-details.model';
 import { GitProviderService } from '../../../projects/ngx-launcher/src/lib/service/git-provider.service';
@@ -41,7 +41,7 @@ export class DemoGitProviderService implements GitProviderService {
       login: GitHubMock.user.login,
       organizations: this.existingRepo
     } as GitHubDetails;
-    return this.isPageRedirect() ? of(gitHubDetails) : EMPTY;
+    return this.isPageRedirect() ? of(gitHubDetails) : throwError({status: 404});
   }
 
   /**