Refactor v3 (#379)

Refactor to make the library more extendable for the client.

fixes: #369
BREAKING CHANGE: new client API

projects/ngx-launcher/src/lib/create-app/activate-booster-createapp-nextstep/activate-booster-createapp-nextstep.component.html → projects/ngx-launcher/src/lib/components/activate-booster-nextstep/activate-booster-nextstep.component.html

@@ -19,8 +19,8 @@ <h2 class="card-pf-title">
             </div>
             <div class="card-pf-body">
               <pre>
-                $ unzip {{launcherComponent.summary.dependencyCheck.projectName}}.zip
-                $ cd {{launcherComponent.summary.dependencyCheck.projectName}}
+                $ unzip {{dependencyCheck.projectName}}.zip
+                $ cd {{dependencyCheck.projectName}}
               </pre>
             </div>
           </div>

projects/ngx-launcher/src/lib/create-app/activate-booster-createapp-nextstep/activate-booster-createapp-nextstep.component.spec.ts → projects/ngx-launcher/src/lib/components/activate-booster-nextstep/activate-booster-nextstep.component.spec.ts

@@ -1,62 +1,52 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { By } from '@angular/platform-browser';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { ActivateBoosterCreateappNextstepComponent } from './activate-booster-createapp-nextstep.component';
-import { LauncherComponent } from '../../launcher.component';
 import { LauncherStep } from '../../launcher-step';
+import { LauncherComponent } from '../../launcher.component';
+import { Projectile, StepState } from '../../model/projectile.model';
+import { TargetEnvironmentSelection } from '../../model/target-environment.model';
+import { ActivateBoosterNextstepComponent } from './activate-booster-nextstep.component';
 
 export interface TypeWizardComponent {
   selectedSection: string;
   steps: LauncherStep[];
-  summary: any;
   summaryCompleted: boolean;
   addStep(step: LauncherStep): void;
 }
 
-let mockWizardComponent: TypeWizardComponent = {
+const mockWizardComponent: TypeWizardComponent = {
   selectedSection: '',
   steps: [],
-  summary: {
-    dependencyCheck: {},
-    gitHubDetails: {}
-  },
   summaryCompleted: false,
   addStep(step: LauncherStep) {
-    for (let i = 0; i < this.steps.length; i++) {
-      if (step.id === this.steps[i].id) {
-        return;
-      }
-    }
     this.steps.push(step);
   }
 };
 
 describe('ActivateBoosterComponent', () => {
-  let component: ActivateBoosterCreateappNextstepComponent;
-  let fixture: ComponentFixture<ActivateBoosterCreateappNextstepComponent>;
+  let component: ActivateBoosterNextstepComponent;
+  let fixture: ComponentFixture<ActivateBoosterNextstepComponent>;
 
   beforeEach(async(() => {
+    const projectile = new Projectile<any>();
     TestBed.configureTestingModule({
       imports: [
         CommonModule,
         RouterTestingModule
       ],
       declarations: [
-        ActivateBoosterCreateappNextstepComponent
+        ActivateBoosterNextstepComponent
       ],
       providers: [
-        {
-          provide: LauncherComponent, useValue: mockWizardComponent
-        }
+        { provide: Projectile, useValue: projectile },
+        { provide: LauncherComponent, useValue: mockWizardComponent }
       ]
     }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ActivateBoosterCreateappNextstepComponent);
+    fixture = TestBed.createComponent(ActivateBoosterNextstepComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

projects/ngx-launcher/src/lib/components/activate-booster-nextstep/activate-booster-nextstep.component.ts

@@ -0,0 +1,27 @@
+import {
+  Component,
+  Host,
+  ViewEncapsulation
+} from '@angular/core';
+
+import { LauncherComponent } from '../../launcher.component';
+import { DependencyCheck } from '../../model/dependency-check.model';
+import { Projectile } from '../../model/projectile.model';
+import { TargetEnvironmentSelection } from '../../model/target-environment.model';
+
+@Component({
+  encapsulation: ViewEncapsulation.None,
+  selector: 'f8launcher-activatebooster-nextstep',
+  templateUrl: './activate-booster-nextstep.component.html',
+  styleUrls: ['./activate-booster-nextstep.component.less']
+})
+export class ActivateBoosterNextstepComponent {
+
+  constructor(@Host() public launcherComponent: LauncherComponent,
+      private projectile: Projectile<TargetEnvironmentSelection>) {
+  }
+
+  get dependencyCheck(): DependencyCheck {
+    return this.projectile.sharedState.state;
+  }
+}

projects/ngx-launcher/src/lib/components/dependency-editor-step/dependency-editor-review.component.html

@@ -0,0 +1,43 @@
+<div class="col-xs-12">
+  <div id="dep-editor" class="card-pf card-pf--small">
+    <div *ngIf="data.dep.dependencySnapshot === undefined;
+                then showNoDependencyTemplate else showDependencyTemplate"></div>
+    <ng-template #showNoDependencyTemplate>
+      <div class="card-pf-heading">
+        <h2 class="card-pf-title">
+          Selected Dependencies
+        </h2>
+      </div>
+      <div class="card-pf-body f8launcher-project-summary-data-unavailable dependency noData-label">
+        <h2>
+          <b>You haven't selected any additional dependencies</b>
+        </h2>
+        <p>To add additional dependencies, complete this section. Required dependencies are added for you automatically based on your mission and runtime.</p>
+        <button class="btn btn-default btn-lg f8launcher-authorize-account"
+                (click)="navToStep()">Complete Section</button>
+      </div>
+    </ng-template>
+    <ng-template #showDependencyTemplate>
+      <div class="card-pf-heading">
+        <h2 class="card-pf-title">
+          Selected Dependencies
+        </h2>
+      </div>
+      <div class="card-pf-body">
+        <div class="list-group-item">
+          <div class="list-view-pf-main-info">
+            <div class="list-view-pf-body">
+              <div class="list-view-pf-description f8launcher-project-summary-data-unavailable dependency">
+                <ng-container>
+                  <span class="dependencies-added" *ngFor="let snapshot of data.dep.dependencySnapshot">
+                    {{snapshot.package}}
+                  </span>
+                </ng-container>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ng-template>
+  </div>
+</div>

projects/ngx-launcher/src/lib/components/dependency-editor-step/dependency-editor-review.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { Broadcaster } from 'ngx-base';
+import { Projectile } from '../../model/projectile.model';
+import { ReviewComponent } from '../../review.component';
+
+@Component({
+  selector: 'f8launcher-dependency-editor-review',
+  templateUrl: './dependency-editor-review.component.html'
+})
+export class DependencyEditorReviewComponent extends ReviewComponent {
+
+  constructor(broadcaster: Broadcaster, projectile: Projectile<any>) {
+    super(broadcaster, projectile);
+  }
+}

projects/ngx-launcher/src/lib/create-app/dependency-editor-step/dependency-editor-step.component.html → projects/ngx-launcher/src/lib/components/dependency-editor-step/dependency-editor-step.component.html

@@ -20,19 +20,7 @@ <h1>
     </div>
   </div>
 
-  <div>
-    <div class="container-fluid">
-      <div class="f8launcher-continue">
-        <button class="btn btn-link"
-          class.animate-continue="completed"
-          [disabled]="!completed"
-          (click)="navToNextStep()">
-          <span class="fa-stack fa-2x">
-            <i class="fa fa-circle fa-stack-2x"></i>
-            <i class="fa fa-angle-double-down fa-stack-1x fa-inverse"></i>
-          </span>
-        </button>
-      </div>
-    </div>
+  <div *ngIf="launcherComponent">
+    <f8launcher-button-next-step [disabled]="!completed" [navFromId]="id"></f8launcher-button-next-step>
   </div>
 </section>

projects/ngx-launcher/src/lib/create-app/dependency-editor-step/dependency-editor-step.component.spec.ts → projects/ngx-launcher/src/lib/components/dependency-editor-step/dependency-editor-step.component.spec.ts

@@ -1,21 +1,21 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { CommonModule } from '@angular/common';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
-import { Observable, of} from 'rxjs';
-import { DependencyEditorModule,  URLProvider, DependencyEditorTokenProvider } from 'fabric8-analytics-dependency-editor';
+import { DependencyEditorModule } from 'fabric8-analytics-dependency-editor';
 import { Broadcaster } from 'ngx-base';
+import { Observable, of } from 'rxjs';
 
+import { DemoDependencyEditorService } from '../../../../../../src/app/service/demo-dependency-editor.service';
+import { TokenProvider } from '../../../lib/service/token-provider';
 import { DependencyCheck } from '../../launcher.module';
+import { Projectile, StepState } from '../../model/projectile.model';
 import { DependencyCheckService } from '../../service/dependency-check.service';
 import { DependencyEditorService } from '../../service/dependency-editor.service';
-import { DependencyEditorCreateappStepComponent } from './dependency-editor-step.component';
-import { LauncherComponent } from '../../launcher.component';
-import { LauncherStep } from '../../launcher-step';
 import { HelperService } from '../../service/helper.service';
-import { TokenProvider } from '../../../lib/service/token-provider';
-import { BroadcasterTestProvider } from '../targetenvironment-createapp-step/target-environment-createapp-step.component.spec';
-import { DemoDependencyEditorService } from '../../../../../../src/app/service/demo-dependency-editor.service';
+import { ButtonNextStepComponent } from '../../shared/button-next-step.component';
+import { BroadcasterTestProvider } from '../targetenvironment-step/target-environment-step.component.spec';
+import { DependencyEditorStepComponent } from './dependency-editor-step.component';
 
 const mockHelperService = {
   getBackendUrl(): string {
@@ -33,50 +33,19 @@ const mockDependencyCheckService = {
       groupId: 'io.openshift.booster',
       projectName: 'App_test_1',
       projectVersion: '1.0.0-SNAPSHOT',
-      spacePath: '/myspace'
+      spacePath: '/myspace',
+      targetEnvironment: undefined
     });
   }
 };
 
-export interface TypeWizardComponent {
-  selectedSection: string;
-  steps: LauncherStep[];
-  summary: any;
-  summaryCompleted: boolean;
-  addStep(step: LauncherStep): void;
-  onInViewportChange($event: any, id: string): any;
-}
-
-const mockWizardComponent: TypeWizardComponent = {
-  selectedSection: '',
-  steps: [],
-  summary: {
-    dependencyCheck: {},
-    gitHubDetails: {}
-  },
-  summaryCompleted: false,
-  addStep(step: LauncherStep) {
-    for (let i = 0; i < this.steps.length; i++) {
-      if (step.id === this.steps[i].id) {
-        return;
-      }
-    }
-    this.steps.push(step);
-  },
-  onInViewportChange($event: any, id: string) {
-    if ($event) {
-      setTimeout(() => {
-        this.selectedSection = id;
-      }, 10); // Avoids ExpressionChangedAfterItHasBeenCheckedError
-    }
-  }
-};
-
 describe('DependencyEditorCreateappStepComponent', () => {
-  let component: DependencyEditorCreateappStepComponent;
-  let fixture: ComponentFixture<DependencyEditorCreateappStepComponent>;
+  let component: DependencyEditorStepComponent;
+  let fixture: ComponentFixture<DependencyEditorStepComponent>;
 
   beforeEach(async(() => {
+    const projectile = new Projectile<any>();
+    projectile.setState('MissionRuntime', new StepState({}, []));
     TestBed.configureTestingModule({
       imports: [
         CommonModule,
@@ -85,9 +54,11 @@ describe('DependencyEditorCreateappStepComponent', () => {
         RouterTestingModule
       ],
       declarations: [
-        DependencyEditorCreateappStepComponent
+        DependencyEditorStepComponent,
+        ButtonNextStepComponent
       ],
       providers : [
+        { provide: Projectile, useValue: projectile },
         TokenProvider,
         {
           provide: DependencyCheckService, useValue: mockDependencyCheckService
@@ -96,16 +67,13 @@ describe('DependencyEditorCreateappStepComponent', () => {
           provide: DependencyEditorService, useClass: DemoDependencyEditorService
         },
         { provide: HelperService, useValue: mockHelperService },
-        {
-          provide: LauncherComponent, useValue: mockWizardComponent
-        },
         { provide: Broadcaster, useValue: BroadcasterTestProvider.broadcaster }
       ]
     }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DependencyEditorCreateappStepComponent);
+    fixture = TestBed.createComponent(DependencyEditorStepComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });