chore(app-launcher): added cancel overlay

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-forge",
-  "version": "0.0.46-development",
+  "version": "0.0.47-development",
   "description": "Forge services for Angular v2 and up",
   "main": "bundles/ngx-forge.js",
   "module": "bundles/ngx-forge.js",

src/app/launcher/cancel-overlay/cancel-overlay.component.html

@@ -0,0 +1,69 @@
+<div class="imports-dialog" *ngIf="launcherComponent.showCancelOverlay === true">
+  <div class="code-imports">
+    <form class="col-sm-8 col-sm-offset-2 code-imports--step active" role="form">
+      <section class="container-fluid">
+        <form class="form" #spaceForm="ngForm">
+          <div class="row">
+            <h1 class="code-imports--step_title">Getting Started</h1>
+            <p>
+              When getting started with setting up a application, there are two different set up paths you can take. You can either choose to import an existing project or create a new application.
+            </p>
+          </div>
+          <div class="row row-cards-pf">
+            <div class="col-sm-6">
+              <div class="container-fluid container-cards-pf" (click)="cancelConfirmed()">
+                <div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select code-imports--step_content">
+                  <div class="card-pf-body">
+                    <h2 class="card-pf-title">
+                      Import Existing Application
+                    </h2>
+                    <div class="card-pf-items">
+                      <div class="card-pf-item">
+                        I have an existing application that I would like to import to use as the base for my application.
+                      </div>
+                    </div>
+                    <p class="card-pf-info text-center">
+                      <i class="pficon pficon-export"></i>
+                    </p>
+                  </div>
+                  <div class="card-pf-view-checkbox">
+                    <input type="checkbox">
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6">
+              <div class="container-fluid container-cards-pf" (click)="cancelConfirmed()">
+                <div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select code-imports--step_content">
+                  <div class="card-pf-body">
+                    <h2 class="card-pf-title">
+                      Create a New Application
+                    </h2>
+                    <div class="card-pf-items">
+                      <div class="card-pf-item">
+                        I want to create a new application from scratch. I would like to use the preset technologies and missions within OpenShift.io to help me create a new application.
+                      </div>
+                    </div>
+                    <p class="card-pf-info text-center">
+                      <i class="pficon pficon-add-circle-o"></i>
+                    </p>
+                  </div>
+                  <div class="card-pf-view-checkbox">
+                    <input type="checkbox">
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </form>
+      </section>
+      <footer class="container-fluid">
+        <div class="row">
+          <div class="col-sm-12 code-imports--step_tool-bar button-right">
+            <button id="cancelImportsButton" class="btn btn-link" aria-label="Cancel" (click)="cancelAborted()">Cancel</button>
+          </div>
+        </div>
+      </footer>
+    </form>
+  </div>
+</div>

src/app/launcher/cancel-overlay/cancel-overlay.component.less

@@ -0,0 +1,56 @@
+@import (reference) '../../../assets/stylesheets/shared/main.less';
+
+.imports-dialog {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .8);
+  z-index: 1200;
+  .code-imports {
+    color: @color-pf-white;
+    .alert-danger {
+      background-color: transparent;
+      border: none;
+      color: @color-pf-red-100;
+    }
+    &--step {
+      margin-top: 5%;
+      padding: 35px;
+      &_title {
+        font-size: 2em; // matches h4
+      }
+      &_content {
+        height: 350px;
+        background-color: transparent;
+        color: @color-pf-white;
+        border: 0;
+        &:hover {
+          box-shadow: 0 1px 6px rgba(255, 255, 255, .35);
+        }
+        i {
+          position: absolute;
+          right: 0;
+          bottom: 25px;
+          left: 0;
+          font-size: 8em;
+        }
+      }
+      &_tool-bar {
+        margin-top: 15px;
+        text-align: center;
+        color: @color-pf-black-700;
+        .btn.disabled, .btn[disabled] {
+          /* stylelint-disable */
+          background-color: transparent !important;
+          background: transparent !important;
+          /* stylelint-enable */
+        }
+        .btn.btn-link {
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+}

src/app/launcher/cancel-overlay/cancel-overlay.component.ts

@@ -0,0 +1,36 @@
+import {
+  Component,
+  Host,
+  Input,
+  OnInit
+} from '@angular/core';
+
+import { LauncherComponent } from '../launcher.component';
+
+@Component({
+  selector: 'f8launcher-cancel-overlay',
+  styleUrls: ['./cancel-overlay.component.less'],
+  templateUrl: './cancel-overlay.component.html'
+})
+export class CancelOverlayComponent implements OnInit {
+
+  constructor(@Host() public launcherComponent: LauncherComponent) {
+  }
+
+  ngOnInit(): void {
+  }
+
+  /**
+   * Cancel aborted
+   */
+  cancelAborted(): void {
+    this.launcherComponent.cancelAborted();
+  }
+
+  /**
+   * Cancel confirmed
+   */
+  cancelConfirmed(): void {
+    this.launcherComponent.cancelConfirmed();
+  }
+}

src/app/launcher/create-app/activate-booster-createapp-nextstep/activate-booster-createapp-nextstep.component.ts

@@ -3,6 +3,7 @@ import {
   Host,
   ViewEncapsulation
 } from '@angular/core';
+
 import { LauncherComponent } from '../../launcher.component';
 
 @Component({

src/app/launcher/create-app/gitprovider-createapp-step/gitprovider-createapp-step.component.html

@@ -76,7 +76,7 @@ <h3>Authorized Account</h3>
         <button class="btn btn-primary"
                 [disabled]="stepCompleted !== true"
                 (click)="navToNextStep()">Continue</button>
-        <button class="btn btn-link">Cancel</button>
+        <button class="btn btn-link" (click)="launcherComponent.cancel()">Cancel</button>
       </div>
     </div>
   </div>

src/app/launcher/create-app/mission-runtime-createapp-step/mission-runtime-createapp-step.component.html

@@ -129,7 +129,7 @@ <h2 class="card-pf-title">
         <button class="btn btn-primary"
                 [disabled]="stepCompleted !== true"
                 (click)="navToNextStep()">Continue</button>
-        <button class="btn btn-link">Cancel</button>
+        <button class="btn btn-link" (click)="launcherComponent.cancel()">Cancel</button>
       </div>
     </div>
   </div>

src/app/launcher/create-app/project-progress-createapp-nextstep/project-progress-createapp-nextstep.component.html

@@ -60,7 +60,7 @@ <h2 class="card-pf-title card-pf-title-project-progress">
   <div>
     <div class="container-fluid">
       <div class="f8launcher-continue">
-        <a href="btn btn-link">Return to My Dashboard</a>
+        <a href="btn btn-link" (click)="launcherComponent.cancel()">Return to My Dashboard</a>
       </div>
     </div>
   </div>

src/app/launcher/create-app/project-summary-createapp-step/project-summary-createapp-step.component.html

@@ -255,7 +255,7 @@ <h2 class="card-pf-title">
       <button class="btn btn-primary"
               [disabled]="stepCompleted !== true"
               (click)="setup()">Set Up Application</button>
-      <button class="btn btn-link">Cancel</button>
+      <button class="btn btn-link" (click)="launcherComponent.cancel()">Cancel</button>
     </div>
   </div>
 </section>

src/app/launcher/create-app/release-strategy-createapp-step/release-strategy-createapp-step.component.html

@@ -88,7 +88,7 @@ <h2 class="card-pf-title">
         <button class="btn btn-primary"
                 [disabled]="stepCompleted !== true"
                 (click)="navToNextStep()">Continue</button>
-        <button class="btn btn-link">Cancel</button>
+        <button class="btn btn-link" (click)="launcherComponent.cancel()">Cancel</button>
       </div>
     </div>
   </div>

src/app/launcher/create-app/targetenvironment-createapp-step/target-environment-createapp-step.component.html

@@ -53,7 +53,7 @@ <h3 class="card-pf-body--body_header">Benefits</h3>
         <button class="btn btn-primary"
                 [disabled]="stepCompleted !== true"
                 (click)="navToNextStep()">Continue</button>
-        <button class="btn btn-link">Cancel</button>
+        <button class="btn btn-link" (click)="launcherComponent.cancel()">Cancel</button>
       </div>
     </div>
   </div>

src/app/launcher/import-app/gitprovider-importapp-step/gitprovider-importapp-step.component.html

@@ -76,7 +76,7 @@ <h3>Authorized Account</h3>
         <button class="btn btn-primary"
                 [disabled]="stepCompleted !== true"
                 (click)="navToNextStep()">Continue</button>
-        <button class="btn btn-link">Cancel</button>
+        <button class="btn btn-link" (click)="launcherComponent.cancel()">Cancel</button>
       </div>
     </div>
   </div>

src/app/launcher/import-app/project-progress-importapp-nextstep/project-progress-importapp-nextstep.component.html

@@ -60,7 +60,7 @@ <h2 class="card-pf-title card-pf-title-project-progress">
   <div>
     <div class="container-fluid">
       <div class="f8launcher-continue">
-        <a href="btn btn-link">Return to My Dashboard</a>
+        <a href="btn btn-link" (click)="launcherComponent.cancel()">Return to My Dashboard</a>
       </div>
     </div>
   </div>

src/app/launcher/import-app/project-summary-importapp-step/project-summary-importapp-step.component.html

@@ -207,7 +207,7 @@ <h2 class="card-pf-title">
       <button class="btn btn-primary"
               [disabled]="stepCompleted !== true"
               (click)="setup()">Set Up Application</button>
-      <button class="btn btn-link">Cancel</button>
+      <button class="btn btn-link" (click)="launcherComponent.cancel()">Cancel</button>
     </div>
   </div>
 </section>

src/app/launcher/import-app/release-strategy-importapp-step/release-strategy-importapp-step.component.html

@@ -88,7 +88,7 @@ <h2 class="card-pf-title">
         <button class="btn btn-primary"
                 [disabled]="stepCompleted !== true"
                 (click)="navToNextStep()">Continue</button>
-        <button class="btn btn-link">Cancel</button>
+        <button class="btn btn-link" (click)="launcherComponent.cancel()">Cancel</button>
       </div>
     </div>
   </div>

src/app/launcher/launcher.component.html

@@ -1,3 +1,4 @@
+<f8launcher-cancel-overlay *ngIf="showCancelOverlay === true"></f8launcher-cancel-overlay>
 <div class="f8launcher">
   <div class="f8launcher-container">
     <div *ngIf="importApp; then showImportAppTemplate else showCreateAppTemplate"></div>

src/app/launcher/launcher.component.spec.ts

@@ -13,6 +13,7 @@ import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 
+import { CancelOverlayComponent } from './cancel-overlay/cancel-overlay.component';
 import { LauncherComponent } from './launcher.component';
 import { LauncherStep } from './launcher-step';
 import { Selection } from './model/selection.model';
@@ -145,6 +146,7 @@ describe('LauncherComponent', () => {
       ],
       declarations: [
         ActivateBoosterCreateappNextstepComponent,
+        CancelOverlayComponent,
         Fakef8launcherGitproviderCreateappStep,
         Fakef8launcherGitproviderImportappStep,
         Fakef8launcherMissionruntimeCreateappStep,

src/app/launcher/launcher.component.ts

@@ -1,8 +1,10 @@
 import {
   AfterViewInit,
   Component,
+  EventEmitter,
   Input,
   OnInit,
+  Output,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
@@ -22,9 +24,15 @@ import { LauncherStep } from './launcher-step';
 export class LauncherComponent implements AfterViewInit, OnInit {
   @Input() importApp: boolean = false;
 
+  /**
+   * The event emitted when an cancel has been selected
+   */
+  @Output('onCancel') onCancel = new EventEmitter();
+
   @ViewChild('stepIndicator') stepIndicator: StepIndicatorComponent;
 
   private _selectedSection: string;
+  private _showCancelOverlay: boolean = false;
   private _steps: LauncherStep[] = [];
   private _summary: Summary;
   private summaryCompleted: boolean = false;
@@ -101,6 +109,15 @@ export class LauncherComponent implements AfterViewInit, OnInit {
     return userSelection;
   }
 
+  /**
+   * Returns flag indicating cancel overlay should be shown
+   *
+   * @returns {boolean} True if cancel overlay should be shown
+   */
+  get showCancelOverlay(): boolean {
+    return this._showCancelOverlay;
+  }
+
   /**
    * Returns flag indicating next steps should be shown
    *
@@ -153,6 +170,28 @@ export class LauncherComponent implements AfterViewInit, OnInit {
     this.steps.push(step);
   }
 
+  /**
+   * Cancel has been selected
+   */
+  cancel() {
+    this._showCancelOverlay = true;
+  }
+
+  /**
+   * Cancel has been aborted
+   */
+  cancelAborted() {
+    this._showCancelOverlay = false;
+  }
+
+  /**
+   * Cancel has been confirmed
+   */
+  cancelConfirmed() {
+    this._showCancelOverlay = false;
+    this.onCancel.emit();
+  }
+
   /**
    * Get step for the given ID
    *

src/app/launcher/launcher.module.ts

@@ -7,6 +7,7 @@ import { ToolbarModule } from 'patternfly-ng';
 
 // Note: This has to be imported first
 import { StepIndicatorComponent } from './step-indicator/step-indicator.component';
+import { CancelOverlayComponent } from './cancel-overlay/cancel-overlay.component';
 
 import { ActivateBoosterCreateappNextstepComponent }
   from './create-app/activate-booster-createapp-nextstep/activate-booster-createapp-nextstep.component';
@@ -56,6 +57,7 @@ export const providers: Provider[] = [
   ],
   declarations: [
     ActivateBoosterCreateappNextstepComponent,
+    CancelOverlayComponent,
     GitproviderCreateappStepComponent,
     GitproviderImportappStepComponent,
     MissionRuntimeCreateappStepComponent,