Add tile selector to register endpoint stepper

.cfignore

@@ -20,3 +20,4 @@ deploy/stratos-ui-release/
 deploy/uaa/
 docs/
 build/dev_config.json
+e2e-reports/

src/frontend/packages/core/src/features/cloud-foundry/cloud-foundry/cloud-foundry.component.ts

@@ -3,13 +3,13 @@ import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 import { first, map } from 'rxjs/operators';
 
+import { RouterNav } from '../../../../../store/src/actions/router.actions';
+import { AppState } from '../../../../../store/src/app-state';
 import {
   CFEndpointsListConfigService,
 } from '../../../shared/components/list/list-types/cf-endpoints/cf-endpoints-list-config.service';
 import { ListConfig } from '../../../shared/components/list/list.component.types';
 import { CloudFoundryService } from '../../../shared/data-services/cloud-foundry.service';
-import { AppState } from '../../../../../store/src/app-state';
-import { RouterNav } from '../../../../../store/src/actions/router.actions';
 
 @Component({
   selector: 'app-cloud-foundry',
@@ -27,7 +27,7 @@ export class CloudFoundryComponent {
   connectedEndpoints$: Observable<number>;
   constructor(
     private store: Store<AppState>,
-    private cfService: CloudFoundryService
+    cfService: CloudFoundryService
   ) {
     this.connectedEndpoints$ = cfService.connectedCFEndpoints$.pipe(
       map(connectedEndpoints => {

src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.html

@@ -0,0 +1,16 @@
+<app-page-header>
+  <h1>Register a new Endpoint</h1>
+</app-page-header>
+<app-steppers [cancel]="'/endpoints'">
+  <app-step [hideNextButton]="true">
+    <div class="select-step">
+      <h3>Select the endpoint type</h3>
+      <p class="select-step__help">
+        To access additional resources register a new endpoint. Most endpoints will require credentials that can
+        be supplied during
+        the 'Connecting' process. To do this return to the Endpoints page.
+      </p>
+      <app-tile-selector [options]="tileSelectorConfig" (selection)="selectedTile = $event"></app-tile-selector>
+    </div>
+  </app-step>
+</app-steppers>

src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.scss

@@ -0,0 +1,6 @@
+.select-step {
+  width: 100%;
+  &__help {
+    padding-bottom: 10px;
+  }
+}

src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.spec.ts

@@ -0,0 +1,49 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ActivatedRoute } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { createBasicStoreModule } from '../../../../../test-framework/store-test-helper';
+import { CoreModule } from '../../../../core/core.module';
+import { SharedModule } from '../../../../shared/shared.module';
+import { CreateEndpointBaseStepComponent } from './create-endpoint-base-step.component';
+
+describe('CreateEndpointBaseStepComponent', () => {
+  let component: CreateEndpointBaseStepComponent;
+  let fixture: ComponentFixture<CreateEndpointBaseStepComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        CreateEndpointBaseStepComponent,
+      ],
+      imports: [
+        CoreModule,
+        SharedModule,
+        RouterTestingModule,
+        createBasicStoreModule(),
+        NoopAnimationsModule
+      ],
+      providers: [{
+        provide: ActivatedRoute,
+        useValue: {
+          snapshot: {
+            queryParams: {},
+            params: { type: 'metrics' }
+          }
+        }
+      }]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateEndpointBaseStepComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.ts

@@ -0,0 +1,59 @@
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+import { RouterNav } from '../../../../../../store/src/actions/router.actions';
+import { AppState } from '../../../../../../store/src/app-state';
+import {
+  BASE_REDIRECT_QUERY,
+} from '../../../../shared/components/add-service-instance/add-service-instance-base-step/add-service-instance.types';
+import { TileConfigManager } from '../../../../shared/components/tile/tile-selector.helpers';
+import { ITileConfig, ITileData } from '../../../../shared/components/tile/tile-selector.types';
+import { getEndpointTypes } from '../../endpoint-helpers';
+
+interface ICreateEndpointTilesData extends ITileData {
+  type: string;
+}
+
+@Component({
+  selector: 'app-create-endpoint-base-step',
+  templateUrl: './create-endpoint-base-step.component.html',
+  styleUrls: ['./create-endpoint-base-step.component.scss']
+})
+export class CreateEndpointBaseStepComponent {
+
+  private tileManager = new TileConfigManager();
+
+  public tileSelectorConfig: ITileConfig<ICreateEndpointTilesData>[];
+
+  private pSelectedTile: ITileConfig<ICreateEndpointTilesData>;
+  get selectedTile() {
+    return this.pSelectedTile;
+  }
+  set selectedTile(tile: ITileConfig<ICreateEndpointTilesData>) {
+    this.pSelectedTile = tile;
+    if (tile) {
+      this.store.dispatch(new RouterNav({
+        path: `endpoints/new/${tile.data.type}`,
+        query: {
+          [BASE_REDIRECT_QUERY]: true
+        }
+      }));
+    }
+  }
+  constructor(public store: Store<AppState>) {
+    const endpointTypes = getEndpointTypes();
+    this.tileSelectorConfig = endpointTypes.map(et => {
+      return this.tileManager.getNextTileConfig<ICreateEndpointTilesData>(
+        et.label,
+        et.imagePath ? {
+          location: et.imagePath
+        } : {
+            matIcon: et.icon,
+            matIconFont: et.iconFont
+          },
+        { type: et.value }
+      );
+    });
+  }
+
+}

src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-cf-step-1/create-endpoint-cf-step-1.component.html

@@ -1,12 +1,5 @@
 <form #form="ngForm" class="stepper-form">
-  <h1 class="create-endpoint__section-title">Endpoint Information</h1>
-  <mat-form-field>
-    <mat-select placeholder="Endpoint Type" id="ep-type" name="ep-type" [(ngModel)]="typeValue" (selectionChange)="setUrlValidation($event.value)" #typeField="ngModel" required>
-      <mat-option *ngFor="let type of endpointTypes" [value]="type.value">
-        {{ type.label }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
+  <h1 class="create-endpoint__section-title">{{endpoint.label}} Information</h1>
   <mat-form-field>
     <input matInput id="name" name="name" ngModel #nameField="ngModel" required placeholder="Name" [appUnique]="(existingEndpoints | async)?.names">
     <mat-error *ngIf="nameField.errors && nameField.errors.required">Name is required</mat-error>
@@ -37,4 +30,4 @@ <h1 class="create-endpoint__section-title">Advanced Information (Optional)</h1>
       <pre>{{clientRedirectURI}}</pre>
     </div>
   </div>
-</form>
+</form>

src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-cf-step-1/create-endpoint-cf-step-1.component.spec.ts

@@ -1,10 +1,11 @@
-import { SharedModule } from '../../../../shared/shared.module';
-import { CoreModule } from '../../../../core/core.module';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ActivatedRoute } from '@angular/router';
 
-import { CreateEndpointCfStep1Component } from './create-endpoint-cf-step-1.component';
 import { createBasicStoreModule } from '../../../../../test-framework/store-test-helper';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { CoreModule } from '../../../../core/core.module';
+import { SharedModule } from '../../../../shared/shared.module';
+import { CreateEndpointCfStep1Component } from './create-endpoint-cf-step-1.component';
 
 describe('CreateEndpointCfStep1Component', () => {
   let component: CreateEndpointCfStep1Component;
@@ -18,7 +19,16 @@ describe('CreateEndpointCfStep1Component', () => {
         SharedModule,
         createBasicStoreModule(),
         NoopAnimationsModule
-      ]
+      ],
+      providers: [{
+        provide: ActivatedRoute,
+        useValue: {
+          snapshot: {
+            queryParams: {},
+            params: { type: 'metrics' }
+          }
+        }
+      }]
     })
       .compileComponents();
   }));

src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-cf-step-1/create-endpoint-cf-step-1.component.ts

@@ -1,21 +1,22 @@
 import { AfterContentInit, Component, ViewChild } from '@angular/core';
 import { NgForm, NgModel } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { denormalize } from 'normalizr';
 import { Observable } from 'rxjs';
 import { filter, map, pairwise, withLatestFrom } from 'rxjs/operators';
 
-import { UtilsService } from '../../../../core/utils.service';
-import { IStepperStep, StepOnNextFunction } from '../../../../shared/components/stepper/step/step.component';
-import { DEFAULT_ENDPOINT_TYPE, getEndpointTypes, getFullEndpointApiUrl } from '../../endpoint-helpers';
+import { GetAllEndpoints, RegisterEndpoint } from '../../../../../../store/src/actions/endpoint.actions';
 import { AppState } from '../../../../../../store/src/app-state';
+import { EndpointsEffect } from '../../../../../../store/src/effects/endpoint.effects';
+import { endpointSchemaKey, entityFactory } from '../../../../../../store/src/helpers/entity-factory';
+import { getAPIRequestDataState, selectUpdateInfo } from '../../../../../../store/src/selectors/api.selectors';
 import { selectPaginationState } from '../../../../../../store/src/selectors/pagination.selectors';
 import { endpointStoreNames } from '../../../../../../store/src/types/endpoint.types';
-import { GetAllEndpoints, RegisterEndpoint } from '../../../../../../store/src/actions/endpoint.actions';
-import { getAPIRequestDataState, selectUpdateInfo } from '../../../../../../store/src/selectors/api.selectors';
-import { entityFactory, endpointSchemaKey } from '../../../../../../store/src/helpers/entity-factory';
-import { EndpointsEffect } from '../../../../../../store/src/effects/endpoint.effects';
 import { EndpointTypeConfig } from '../../../../core/extension/extension-types';
+import { IStepperStep, StepOnNextFunction } from '../../../../shared/components/stepper/step/step.component';
+import { getIdFromRoute } from '../../../cloud-foundry/cf.helpers';
+import { getEndpointTypes, getFullEndpointApiUrl } from '../../endpoint-helpers';
 
 
 /* tslint:disable:no-access-missing-member https://github.com/mgechev/codelyzer/issues/191*/
@@ -34,7 +35,6 @@ export class CreateEndpointCfStep1Component implements IStepperStep, AfterConten
   validate: Observable<boolean>;
 
   @ViewChild('form') form: NgForm;
-  @ViewChild('typeField') typeField: NgModel;
   @ViewChild('nameField') nameField: NgModel;
   @ViewChild('urlField') urlField: NgModel;
   @ViewChild('skipSllField') skipSllField: NgModel;
@@ -44,17 +44,15 @@ export class CreateEndpointCfStep1Component implements IStepperStep, AfterConten
   @ViewChild('clientIDField') clientIDField: NgModel;
   @ViewChild('clientSecretField') clientSecretField: NgModel;
 
-  typeValue: any;
-
-  endpointTypes = getEndpointTypes();
+  endpoint: EndpointTypeConfig;
   urlValidation: string;
 
   showAdvancedFields = false;
   clientRedirectURI: string;
 
   endpointTypeSupportsSSO = false;
 
-  constructor(private store: Store<AppState>, private utilsService: UtilsService) {
+  constructor(private store: Store<AppState>, activatedRoute: ActivatedRoute) {
 
     this.existingEndpoints = store.select(selectPaginationState(endpointStoreNames.type, GetAllEndpoints.storeKey))
       .pipe(
@@ -70,12 +68,9 @@ export class CreateEndpointCfStep1Component implements IStepperStep, AfterConten
         })
       );
 
-    // Auto-select default endpoint type - typically this is Cloud Foundry
-    const defaultType = this.endpointTypes.filter((t) => t.value === DEFAULT_ENDPOINT_TYPE);
-    if (defaultType && defaultType.length) {
-      this.typeValue = defaultType[0].value;
-      this.setUrlValidation(this.typeValue);
-    }
+    const endpointType = getIdFromRoute(activatedRoute, 'type');
+    this.endpoint = getEndpointTypes().find(e => e.value === endpointType);
+    this.setUrlValidation(this.endpoint);
 
     // Client Redirect URI for SSO
     this.clientRedirectURI = window.location.protocol + '//' + window.location.hostname +
@@ -84,7 +79,7 @@ export class CreateEndpointCfStep1Component implements IStepperStep, AfterConten
 
   onNext: StepOnNextFunction = () => {
     const action = new RegisterEndpoint(
-      this.typeField.value,
+      this.endpoint.value,
       this.nameField.value,
       this.urlField.value,
       !!this.skipSllField.value,
@@ -124,8 +119,7 @@ export class CreateEndpointCfStep1Component implements IStepperStep, AfterConten
       }));
   }
 
-  setUrlValidation(endpointValue: string) {
-    const endpoint = this.endpointTypes.find(e => e.value === endpointValue);
+  setUrlValidation(endpoint: EndpointTypeConfig) {
     this.urlValidation = endpoint ? endpoint.urlValidation : '';
     this.setAdvancedFields(endpoint);
   }
@@ -134,7 +128,7 @@ export class CreateEndpointCfStep1Component implements IStepperStep, AfterConten
   setAdvancedFields(endpoint: EndpointTypeConfig) {
     this.showAdvancedFields = endpoint.value === 'cf';
 
-    // Only allow SSL if the endpoint type isCloud Foundry
+    // Only allow SSL if the endpoint type is Cloud Foundry
     this.endpointTypeSupportsSSO = endpoint.value === 'cf';
   }
 }

src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint.component.html

@@ -1,9 +1,9 @@
 <app-page-header>
-  <h1>Register new Endpoint</h1>
+  <h1>Register a new Endpoint</h1>
 </app-page-header>
 
-<app-steppers cancel="/endpoints">
+<app-steppers [basePreviousRedirect]="basePreviousRedirect" cancel="/endpoints">
   <app-step [title]="'Endpoint Details'" [valid]="step1.validate | async" [onNext]="step1.onNext">
     <app-create-endpoint-cf-step-1 #step1></app-create-endpoint-cf-step-1>
   </app-step>
-</app-steppers>
+</app-steppers>

src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint.component.spec.ts

@@ -1,13 +1,13 @@
-import { RouterTestingModule } from '@angular/router/testing';
-import { EndpointsModule } from '../endpoints.module';
-import { SharedModule } from '../../../shared/shared.module';
-import { CoreModule } from '../../../core/core.module';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CreateEndpointComponent } from './create-endpoint.component';
-import { CreateEndpointCfStep1Component } from './create-endpoint-cf-step-1/create-endpoint-cf-step-1.component';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ActivatedRoute } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+
 import { createBasicStoreModule } from '../../../../test-framework/store-test-helper';
+import { CoreModule } from '../../../core/core.module';
+import { SharedModule } from '../../../shared/shared.module';
+import { CreateEndpointCfStep1Component } from './create-endpoint-cf-step-1/create-endpoint-cf-step-1.component';
+import { CreateEndpointComponent } from './create-endpoint.component';
 
 describe('CreateEndpointComponent', () => {
   let component: CreateEndpointComponent;
@@ -25,8 +25,16 @@ describe('CreateEndpointComponent', () => {
         createBasicStoreModule(),
         RouterTestingModule,
         NoopAnimationsModule
-
-      ]
+      ],
+      providers: [{
+        provide: ActivatedRoute,
+        useValue: {
+          snapshot: {
+            queryParams: {},
+            params: { type: 'metrics' }
+          }
+        }
+      }]
     })
       .compileComponents();
   }));