fix: added git repo validator for import

also remove the unused properties from the gitdetails
fabric8-launcher · Jul 5, 2018 · bb960e2 · bb960e2
1 parent 2386266
commit bb960e2
Show file tree

Hide file tree

Showing 12 changed files with 52 additions and 122 deletions.
diff --git a/.../launcher/create-app/gitprovider-createapp-step/gitprovider-createapp-step.component.html b/.../launcher/create-app/gitprovider-createapp-step/gitprovider-createapp-step.component.html
@@ -42,7 +42,7 @@ <h3>Authorized Account Information</h3>
                         *ngIf="launcherComponent?.summary?.gitHubDetails?.login === undefined"> None
                   </span>
                   <button class="btn btn-primary btn-lg f8launcher-authorize-account"
-                          [disabled]="launcherComponent?.summary?.gitHubDetails?.authenticated === true"
+                          [disabled]="launcherComponent?.summary?.gitHubDetails?.login"
                           (click)="connectAccount($event)">Log In &amp; Authorize Account</button>
               </div>
             </div>

diff --git a/...uncher/create-app/gitprovider-createapp-step/gitprovider-createapp-step.component.spec.ts b/...uncher/create-app/gitprovider-createapp-step/gitprovider-createapp-step.component.spec.ts
@@ -39,14 +39,9 @@ let mockGitProviderService = {
   },
   getGitHubDetails(): Observable<GitHubDetails> {
     let gitHubDetails = Observable.of( <GitHubDetails>{
-      authenticated: true,
       avatar: 'https://avatars3.githubusercontent.com/u/17882357?v=4',
       login: 'testuser',
-      organizations: ['fabric-ui'],
-      htmlUrl: 'https://github.com/testuser',
-      url: 'https://api.github.com/users/testuser',
-      description: [],
-      visibility: 'false'
+      organizations: ['fabric-ui']
     });
     return gitHubDetails;
   },

diff --git a/...pp/launcher/create-app/gitprovider-createapp-step/gitprovider-createapp-step.component.ts b/...pp/launcher/create-app/gitprovider-createapp-step/gitprovider-createapp-step.component.ts
@@ -29,8 +29,6 @@ export class GitproviderCreateappStepComponent extends LauncherStep implements A
   @ViewChild('versionSelect') versionSelect: ElementRef;
 
   private subscriptions: Subscription[] = [];
-  private gitHubReposSubscription: Subscription;
-  private isGitHubRepoNameDup: boolean = false;
 
   constructor(@Host() public launcherComponent: LauncherComponent,
               private dependencyCheckService: DependencyCheckService,
@@ -39,7 +37,7 @@ export class GitproviderCreateappStepComponent extends LauncherStep implements A
   }
 
   ngAfterViewInit() {
-    if (this.launcherComponent.summary.gitHubDetails.authenticated === true) {
+    if (this.launcherComponent.summary.gitHubDetails.login) {
       setTimeout(() => {
         if (this.versionSelect) {
           this.versionSelect.nativeElement.focus();
@@ -64,9 +62,6 @@ export class GitproviderCreateappStepComponent extends LauncherStep implements A
     this.subscriptions.forEach((sub) => {
       sub.unsubscribe();
     });
-    if (this.gitHubReposSubscription !== undefined) {
-      this.gitHubReposSubscription.unsubscribe();
-    }
   }
 
   // Accessors
@@ -111,30 +106,14 @@ export class GitproviderCreateappStepComponent extends LauncherStep implements A
    * get all repos List for the selected organization
    */
   getGitHubRepos(): void {
-    let org = '';
     if (this.launcherComponent && this.launcherComponent.summary &&
       this.launcherComponent.summary.gitHubDetails) {
-      if (this.launcherComponent.summary.dependencyCheck.projectName) {
-        this.launcherComponent.summary.dependencyCheck.projectName =
-          this.launcherComponent.summary.dependencyCheck.projectName.toLowerCase();
-      }
-      org = this.launcherComponent.summary.gitHubDetails.organization;
       this.launcherComponent.summary.gitHubDetails.repository =
         this.launcherComponent.summary.dependencyCheck ?
           this.launcherComponent.summary.dependencyCheck.projectName : '';
-      this.launcherComponent.summary.gitHubDetails.repositoryList = [];
     }
 
     this.initCompleted();
-    if (this.gitHubReposSubscription !== undefined) {
-      this.gitHubReposSubscription.unsubscribe();
-    }
-    this.gitHubReposSubscription = this.gitProviderService.getGitHubRepoList(org).subscribe((val) => {
-      if (val !== undefined && this.launcherComponent && this.launcherComponent.summary &&
-        this.launcherComponent.summary.gitHubDetails) {
-        this.launcherComponent.summary.gitHubDetails.repositoryList = val;
-      }
-    });
   }
 
   // Private

diff --git a/...r/create-app/project-summary-createapp-step/project-summary-createapp-step.component.html b/...r/create-app/project-summary-createapp-step/project-summary-createapp-step.component.html
@@ -275,7 +275,7 @@ <h2 class="card-pf-title">
                   <label class="col-xs-4 control-label">Version</label>
                   <div class="col-xs-8 f8launcher-project-summary-data-field f8launcher-application-text-field">
                     <input class="f8launcher-project-summary-data-field_input f8launcher-application-text-field_input"
-                           name="version" placeholder="Version Number" type="text" pattern="[a-z0-9-.]{3,63}"
+                           name="version" placeholder="Version Number" type="text" pattern="[a-zA-Z0-9-.]{3,63}"
                            [(ngModel)]="dependencyCheck.projectVersion" #projectVersion="ngModel"
                            (keyup.enter)="$event.target.blur();">
                   </div>

diff --git a/.../launcher/import-app/gitprovider-importapp-step/gitprovider-importapp-step.component.html b/.../launcher/import-app/gitprovider-importapp-step/gitprovider-importapp-step.component.html
@@ -26,6 +26,7 @@ <h3>GitHub</h3>
               </div>
             </div>
         <div class="col-xs-8 f8launcher-provider-card-information">
+        <form #form="ngForm">
           <h3>Authorized Account Information</h3>
           <div class="form-horizontal">
             <div class="form-group">
@@ -41,7 +42,7 @@ <h3>Authorized Account Information</h3>
                         *ngIf="launcherComponent?.summary?.gitHubDetails?.login === undefined"> None
                   </span>
                   <button class="btn btn-primary btn-lg f8launcher-authorize-account"
-                          [disabled]="launcherComponent?.summary?.gitHubDetails?.authenticated === true"
+                          [disabled]="launcherComponent?.summary?.gitHubDetails?.login"
                           (click)="connectAccount($event)">Log In &amp; Authorize Account</button>
               </div>
             </div>
@@ -61,22 +62,21 @@ <h3>Authorized Account Information</h3>
             </div>
             <div class="form-group">
               <label for="ghRepo" class="col-sm-2 control-label">Repository</label>
-              <div class="col-sm-10"
-                [ngClass]="{'has-error': launcherComponent?.summary?.gitHubDetails?.repositoryAvailable === false}">
-                <input id="ghRepo" [(ngModel)]="launcherComponent.summary.gitHubDetails.repository" placeholder="Select Repository"
+              <div class="col-sm-10" [class.has-error]="ghRepo.invalid && (ghRepo.dirty || ghRepo.touched)">
+                <input id="ghRepo" name="ghRepo" [(ngModel)]="launcherComponent.summary.gitHubDetails.repository" placeholder="Select Repository"
                   [typeahead]="launcherComponent?.summary.gitHubDetails.repositoryList"
                   [typeaheadMinLength]="0"
                   [disabled]="launcherComponent?.summary?.gitHubDetails?.organization === undefined || launcherComponent?.summary?.gitHubDetails?.repositoryList?.length === 0"
-                  (ngModelChange)="updateGitHubSelection()"
-                  (keyup)="validateRepo()"
+                  [existingRepository]="launcherComponent?.summary?.gitHubDetails?.repositoryList" #ghRepo="ngModel"
                   class="form-control">
                   <span class="help-block"
-                    *ngIf="launcherComponent?.summary?.gitHubDetails?.repositoryAvailable === false">
-                    {{repoNameStatusMessage}}
+                    *ngIf="ghRepo.invalid && (ghRepo.dirty || ghRepo.touched)">
+                    '{{ghRepo.value}}' does not exist as {{launcherComponent.summary.gitHubDetails.organization}}/{{ghRepo.value}}.
                   </span>
               </div>
             </div>
           </div>
+        </form>
         </div>
       </div>
     </div>

diff --git a/...uncher/import-app/gitprovider-importapp-step/gitprovider-importapp-step.component.spec.ts b/...uncher/import-app/gitprovider-importapp-step/gitprovider-importapp-step.component.spec.ts
@@ -1,8 +1,6 @@
 import { async, fakeAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { By } from '@angular/platform-browser';
-import { DomSanitizer } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 import { Observable } from 'rxjs';
 import { InViewportModule, WindowRef } from '@thisissoon/angular-inviewport';
@@ -15,6 +13,7 @@ import { DependencyCheckService } from '../../service/dependency-check.service';
 import { GitproviderImportappStepComponent } from './gitprovider-importapp-step.component';
 import { GitProviderService } from '../../service/git-provider.service';
 import { GitHubDetails } from '../../model/github-details.model';
+import { ExistingRepositoryValidatorDirective } from '../gitprovider-importapp-step/repository.validator';
 
 let mockDependencyCheckService = {
   getDependencyCheck(): Observable<DependencyCheck> {
@@ -35,14 +34,9 @@ let mockGitProviderService = {
   },
   getGitHubDetails(): Observable<GitHubDetails> {
     let gitHubDetails = Observable.of( <GitHubDetails>{
-      authenticated: true,
       avatar: 'https://avatars3.githubusercontent.com/u/17882357?v=4',
       login: 'testuser',
-      organizations: ['fabric-ui'],
-      htmlUrl: 'https://github.com/testuser',
-      url: 'https://api.github.com/users/testuser',
-      description: [],
-      visibility: 'false'
+      organizations: ['fabric-ui']
     });
     return gitHubDetails;
   },
@@ -105,7 +99,8 @@ describe('Import GitProviderStepComponent', () => {
         RouterTestingModule
       ],
       declarations: [
-        GitproviderImportappStepComponent
+        GitproviderImportappStepComponent,
+        ExistingRepositoryValidatorDirective
       ],
       providers: [
         {

diff --git a/...pp/launcher/import-app/gitprovider-importapp-step/gitprovider-importapp-step.component.ts b/...pp/launcher/import-app/gitprovider-importapp-step/gitprovider-importapp-step.component.ts
@@ -8,6 +8,7 @@ import {
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
+import { NgForm } from '@angular/forms';
 import { Subscription } from 'rxjs/Subscription';
 
 import { DependencyCheckService } from '../../service/dependency-check.service';
@@ -24,6 +25,7 @@ import { broadcast } from '../../shared/telemetry.decorator';
   styleUrls: ['./gitprovider-importapp-step.component.less']
 })
 export class GitproviderImportappStepComponent extends LauncherStep implements AfterViewInit, OnDestroy, OnInit {
+  @ViewChild('form') form: NgForm;
   @ViewChild('versionSelect') versionSelect: ElementRef;
 
   private subscriptions: Subscription[] = [];
@@ -36,7 +38,7 @@ export class GitproviderImportappStepComponent extends LauncherStep implements A
   }
 
   ngAfterViewInit() {
-    if (this.launcherComponent.summary.gitHubDetails.authenticated === true) {
+    if (this.launcherComponent.summary.gitHubDetails.login) {
       setTimeout(() => {
         this.versionSelect.nativeElement.focus();
       }, 10);
@@ -66,35 +68,13 @@ export class GitproviderImportappStepComponent extends LauncherStep implements A
 
   // Accessors
 
-  /**
-   * Returns repo name message for when repo doesn't exists
-   *
-   * @returns {string}
-   */
-  get repoNameStatusMessage(): string {
-    let repo = '';
-    if (this.launcherComponent && this.launcherComponent.summary &&
-      this.launcherComponent.summary.gitHubDetails) {
-      repo = this.launcherComponent.summary.gitHubDetails.repository;
-      return '\'' + repo + '\' does not exist as ' + this.launcherComponent.summary.gitHubDetails.organization
-      + '/' + repo + '.';
-    } else {
-      return '';
-    }
-  }
-
   /**
    * Returns indicator that step is completed
    *
    * @returns {boolean} True if step is completed
    */
   get stepCompleted(): boolean {
-    return (this.launcherComponent.summary.gitHubDetails.authenticated === true
-      && this.launcherComponent.summary.gitHubDetails.login !== undefined
-      && this.launcherComponent.summary.gitHubDetails.organization !== undefined
-      && this.launcherComponent.summary.gitHubDetails.repository !== undefined
-      && this.launcherComponent.summary.gitHubDetails.repository.length > 0
-      && this.launcherComponent.summary.gitHubDetails.repositoryAvailable === true);
+    return this.form.valid;
   }
 
   // Steps
@@ -119,27 +99,10 @@ export class GitproviderImportappStepComponent extends LauncherStep implements A
    * @param {MouseEvent} $event
    */
   connectAccount($event: MouseEvent): void {
-    let url = window.location.origin + window.location.pathname +
-      this.getParams(this.launcherComponent.currentSelection);
+    let url = window.location.href + this.getParams(this.launcherComponent.currentSelection);
     this.gitProviderService.connectGitHubAccount(url);
   }
 
-  /**
-   * Update selection
-   */
-  updateGitHubSelection(): void {
-    let location: string;
-    let repoName: string;
-    if (this.launcherComponent && this.launcherComponent.summary &&
-      this.launcherComponent.summary.gitHubDetails && this.launcherComponent.summary.gitHubDetails.repository) {
-      location = this.launcherComponent.summary.gitHubDetails.organization;
-      repoName = this.launcherComponent.summary.gitHubDetails.repository;
-      this.launcherComponent.summary.gitHubDetails.repositoryAvailable = true;
-      this.launcherComponent.summary.gitHubDetails.htmlUrl = 'https://github.com/' + location + '/' + repoName;
-    }
-    this.initCompleted();
-  }
-
   /**
    * Ensure repo name is available for the selected organization
    */
@@ -164,20 +127,6 @@ export class GitproviderImportappStepComponent extends LauncherStep implements A
     this.initCompleted();
   }
 
-  /**
-   * Ensure repo name is available for the selected organization
-   */
-  validateRepo(): void {
-    let repoName = this.launcherComponent.summary.gitHubDetails.repository;
-    let repoList = this.launcherComponent.summary.gitHubDetails.repositoryList;
-    if (repoList.indexOf(repoName) !== -1) {
-      this.launcherComponent.summary.gitHubDetails.repositoryAvailable = true;
-    } else {
-      this.launcherComponent.summary.gitHubDetails.repositoryAvailable = false;
-    }
-    this.initCompleted();
-  }
-
   // Private
 
   private getParams(selection: Selection) {

diff --git a/src/app/launcher/import-app/gitprovider-importapp-step/repository.validator.ts b/src/app/launcher/import-app/gitprovider-importapp-step/repository.validator.ts
@@ -0,0 +1,21 @@
+import { ValidatorFn, AbstractControl, NG_VALIDATORS, Validator } from '@angular/forms';
+import { Directive, Input } from '@angular/core';
+
+@Directive({
+  selector: '[existingRepository]',
+  providers: [{provide: NG_VALIDATORS, useExisting: ExistingRepositoryValidatorDirective, multi: true}]
+})
+export class ExistingRepositoryValidatorDirective implements Validator {
+  @Input('existingRepository') repoList: string[];
+
+  validate(control: AbstractControl): {[key: string]: any} | null {
+    return this.repoList ? repositoryValidator(this.repoList)(control) : null;
+  }
+}
+
+export function repositoryValidator(repoList: string[]): ValidatorFn {
+  return (control: AbstractControl): { [key: string]: any } | null => {
+    const existingRepo = repoList.indexOf(control.value) !== -1;
+    return existingRepo ? null : { 'notExist': { value: control.value } };
+  };
+}
diff --git a/...r/import-app/project-summary-importapp-step/project-summary-importapp-step.component.html b/...r/import-app/project-summary-importapp-step/project-summary-importapp-step.component.html
@@ -7,6 +7,7 @@
           [debounce]="500">Confirm Application Summary & Setup</h1>
     </div>
   </div>
+  <form #form="ngForm">
   <div class="container-fluid container-cards-pf">
     <div class="row row-cards-pf">
       <div class="col-xs-12">
@@ -118,7 +119,7 @@ <h2 class="card-pf-title">
                                [(ngModel)]="dependencyCheck.projectName" lowercase validateProjectName
                                (keyup.enter)="$event.target.blur();">
                     </div>
-                    <div class="col-xs-8 col-xs-offset-4" *ngIf="projectName.invalid && (projectName.dirty || projectName.touched)">
+                    <div class="col-xs-8 col-xs-offset-4 has-error" *ngIf="projectName.invalid && (projectName.dirty || projectName.touched)">
                       <span *ngIf="projectName.errors.pattern" class="help-block f8launcher-vertical-bar_application-name-help-text">
                         Please enter a valid Application Name.
                       </span>
@@ -146,7 +147,7 @@ <h2 class="card-pf-title">
                     <label class="col-xs-4 control-label">Version</label>
                     <div class="col-xs-8 f8launcher-project-summary-data-field f8launcher-application-text-field">
                       <input class="f8launcher-project-summary-data-field_input f8launcher-application-text-field_input"
-                               name="version" placeholder="Version Number" type="text" pattern="[a-z0-9-.]{3,63}"
+                               name="version" placeholder="Version Number" type="text" pattern="[a-zA-Z0-9-.]{3,63}"
                                [(ngModel)]="dependencyCheck.projectVersion" #projectVersion="ngModel"
                                (keyup.enter)="$event.target.blur();">
                     </div>
@@ -226,7 +227,7 @@ <h2 class="card-pf-title">
             </div>
             <div class="card-pf-body card-column">
               <div class="card-column-70">
-                <form class="form-horizontal" #form="ngForm">
+                <div class="form-horizontal">
                   <div class="form-group f8launcher-project-summary-data-form-group">
                     <label class="col-xs-4 control-label">Username</label>
                     <div class="f8launcher-project-summary-data-field-account">
@@ -252,7 +253,7 @@ <h2 class="card-pf-title">
                       <span>{{summary?.gitHubDetails?.repository}}</span>
                     </div>
                   </div>
-                </form>
+                </div>
               </div>
               <div class="card-column-30">
                 <i class="fa fa-github git-provider-icon"></i>
@@ -263,6 +264,7 @@ <h2 class="card-pf-title">
       </div>
     </div>
   </div>
+  </form>
   <div class="container-fluid">
     <div id="ProjectSummary" class="f8launcher-continue">
       <button class="btn btn-primary btn-xlarge"

diff --git a/src/app/launcher/launcher.module.ts b/src/app/launcher/launcher.module.ts
@@ -26,8 +26,9 @@ import { GitproviderCreateappStepComponent }
   from './create-app/gitprovider-createapp-step/gitprovider-createapp-step.component';
 import { GitProviderRepositoryValidatorDirective }
   from './create-app/gitprovider-createapp-step/gitprovider-repository.validator';
+import { ExistingRepositoryValidatorDirective } from './import-app/gitprovider-importapp-step/repository.validator';
 import { LowerCaseDirective } from './shared/lowercase.directive';
-import { ProjectNameValidatorDirective } from './shared/project-name.validator'
+import { ProjectNameValidatorDirective } from './shared/project-name.validator';
 import { MissionRuntimeCreateappStepComponent }
   from './create-app/mission-runtime-createapp-step/mission-runtime-createapp-step.component';
 import { ProjectProgressCreateappNextstepComponent }
@@ -87,6 +88,7 @@ export const providers: Provider[] = [
     LowerCaseDirective,
     ProjectNameValidatorDirective,
     GitProviderRepositoryValidatorDirective,
+    ExistingRepositoryValidatorDirective,
     GitproviderImportappStepComponent,
     MissionRuntimeCreateappStepComponent,
     ProjectProgressCreateappNextstepComponent,