From 2f1e1d71508ab6acfa55aeb8fead747a2855c642 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Thu, 5 Jul 2018 07:58:12 -0700
Subject: [PATCH] SHIBUI-580 Implemented summary page

---
 .../provider-wizard-summary.component.html    | 13 +++
 .../provider-wizard-summary.component.ts      | 83 +++++++++++++++++++
 .../component/summary-property.component.html | 18 ++++
 .../component/summary-property.component.ts   | 13 +++
 .../provider-wizard-step.component.ts         | 40 +++------
 .../provider-wizard-summary.component.html    |  0
 .../provider-wizard-summary.component.ts      | 21 -----
 .../container/provider-wizard.component.html  | 13 ++-
 .../container/provider-wizard.component.ts    | 28 +++++--
 .../provider/container/provider.component.ts  |  8 --
 .../metadata/provider/effect/editor.effect.ts | 16 +++-
 .../model/file-backed-http.provider.form.ts   | 49 ++++++-----
 .../app/metadata/provider/model/property.ts   |  6 ++
 .../app/metadata/provider/provider.module.ts  |  9 +-
 .../app/metadata/provider/provider.routing.ts |  6 --
 .../widget/check/checkbox.component.html      | 14 ----
 ui/src/app/wizard/action/wizard.action.ts     | 11 ++-
 .../wizard/component/wizard.component.html    | 26 ++----
 .../app/wizard/component/wizard.component.ts  |  1 +
 ui/src/app/wizard/reducer/index.ts            |  2 +-
 ui/src/app/wizard/reducer/wizard.reducer.ts   | 14 +++-
 .../metadata-provider-summary.schema.json     | 11 +++
 22 files changed, 265 insertions(+), 137 deletions(-)
 create mode 100644 ui/src/app/metadata/provider/component/provider-wizard-summary.component.html
 create mode 100644 ui/src/app/metadata/provider/component/provider-wizard-summary.component.ts
 create mode 100644 ui/src/app/metadata/provider/component/summary-property.component.html
 create mode 100644 ui/src/app/metadata/provider/component/summary-property.component.ts
 delete mode 100644 ui/src/app/metadata/provider/container/provider-wizard-summary.component.html
 delete mode 100644 ui/src/app/metadata/provider/container/provider-wizard-summary.component.ts
 create mode 100644 ui/src/app/metadata/provider/model/property.ts
 create mode 100644 ui/src/assets/schema/provider/metadata-provider-summary.schema.json

diff --git a/ui/src/app/metadata/provider/component/provider-wizard-summary.component.html b/ui/src/app/metadata/provider/component/provider-wizard-summary.component.html
new file mode 100644
index 000000000..a60ef4c1e
--- /dev/null
+++ b/ui/src/app/metadata/provider/component/provider-wizard-summary.component.html
@@ -0,0 +1,13 @@
+<div class="row">
+    <div class="col-xl-6 col-xs-12" *ngFor="let sections of columns">
+        <section class="px-3" *ngFor="let section of sections; let i = index;">
+            <button (click)="gotoPage(section.id)" class="tag tag-success tag-sm my-4 text-left" [attr.aria-label]="section.label" role="button">
+                <span class="index">{{ section.index }}</span>
+                <ng-container>{{ section.label }}</ng-container>
+            </button>
+            <ng-container *ngFor="let prop of section.properties">
+                <summary-property [property]="prop"></summary-property>
+            </ng-container>
+        </section>
+    </div>
+</div>
diff --git a/ui/src/app/metadata/provider/component/provider-wizard-summary.component.ts b/ui/src/app/metadata/provider/component/provider-wizard-summary.component.ts
new file mode 100644
index 000000000..ad4d6fc68
--- /dev/null
+++ b/ui/src/app/metadata/provider/component/provider-wizard-summary.component.ts
@@ -0,0 +1,83 @@
+import { Component, Input, SimpleChanges, OnChanges, Output, EventEmitter } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+import * as fromProvider from '../reducer';
+import { Wizard, WizardStep } from '../../../wizard/model';
+import { MetadataProvider } from '../../domain/model';
+import { Property } from '../model/property';
+
+interface Section {
+    id: string;
+    index: number;
+    label: string;
+    properties: Property[];
+}
+
+function getStepProperties(schema: any, model: any): Property[] {
+    if (!schema || !schema.properties) { return []; }
+    return Object.keys(schema.properties).map(property => ({
+        name: schema.properties[property].title,
+        value: (model && model.hasOwnProperty(property)) ? model[property] : null,
+        type: schema.properties[property].type,
+        properties: schema.properties ? getStepProperties(
+            schema.properties[property],
+            (model && model.hasOwnProperty(property)) ? model[property] : null
+        ) : []
+    }));
+}
+
+@Component({
+    selector: 'provider-wizard-summary',
+    templateUrl: './provider-wizard-summary.component.html',
+    styleUrls: []
+})
+
+export class ProviderWizardSummaryComponent implements OnChanges {
+    @Input() summary: { definition: Wizard<MetadataProvider>, schema: { [id: string]: any }, model: any };
+
+    @Output() onPageSelect: EventEmitter<string> = new EventEmitter();
+
+    sections: Section[];
+    columns: Array<Section>[];
+
+    constructor(
+        private store: Store<fromProvider.ProviderState>
+    ) {}
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes.summary && this.summary) {
+            const schemas = this.summary.schema;
+            const model = this.summary.model;
+            const def = this.summary.definition;
+            const steps = def.steps;
+
+            this.sections = steps
+                .filter(step => step.id !== 'summary')
+                .map(
+                    (step: WizardStep) => ({
+                        id: step.id,
+                        index: step.index,
+                        label: step.label,
+                        properties: getStepProperties(schemas[step.id], def.translate ? def.translate.formatter(model) : model)
+                    })
+                );
+
+            this.columns = this.sections.reduce((resultArray, item, index) => {
+                const chunkIndex = Math.floor(index / Math.round(this.sections.length / 2));
+
+                if (!resultArray[chunkIndex]) {
+                    resultArray[chunkIndex] = [];
+                }
+
+                resultArray[chunkIndex].push(item);
+
+                return resultArray;
+            }, []);
+        }
+    }
+
+    gotoPage(page: string = ''): void {
+        this.onPageSelect.emit(page);
+    }
+}
+
diff --git a/ui/src/app/metadata/provider/component/summary-property.component.html b/ui/src/app/metadata/provider/component/summary-property.component.html
new file mode 100644
index 000000000..8f4781e47
--- /dev/null
+++ b/ui/src/app/metadata/provider/component/summary-property.component.html
@@ -0,0 +1,18 @@
+<div role="listitem" class="mb-3" *ngIf="property">
+    <ng-container [ngSwitch]="property.type">
+        <ng-container *ngSwitchDefault>
+            <ng-container *ngIf="property.name">
+                <strong class="text-primary d-block" role="term">{{ property.name }}</strong>
+                <span class="d-block" role="definition">{{ property.value || '-' }}</span>
+            </ng-container>
+        </ng-container>
+        <ng-container *ngSwitchCase="'object'">
+            <ng-container *ngIf="property.name">
+                <span class="text-primary d-block" role="term">{{ property.name }}</span>
+            </ng-container>
+            <ng-container *ngIf="property.properties">
+                <summary-property *ngFor="let prop of property.properties" [property]="prop"></summary-property>
+            </ng-container>
+        </ng-container>
+    </ng-container>
+</div>
diff --git a/ui/src/app/metadata/provider/component/summary-property.component.ts b/ui/src/app/metadata/provider/component/summary-property.component.ts
new file mode 100644
index 000000000..6dbd0c716
--- /dev/null
+++ b/ui/src/app/metadata/provider/component/summary-property.component.ts
@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import { Property } from '../model/property';
+
+@Component({
+    selector: 'summary-property',
+    templateUrl: './summary-property.component.html',
+    styleUrls: []
+})
+
+export class SummaryPropertyComponent {
+    @Input() property: Property;
+}
+
diff --git a/ui/src/app/metadata/provider/container/provider-wizard-step.component.ts b/ui/src/app/metadata/provider/container/provider-wizard-step.component.ts
index 81f57c1eb..962445d30 100644
--- a/ui/src/app/metadata/provider/container/provider-wizard-step.component.ts
+++ b/ui/src/app/metadata/provider/container/provider-wizard-step.component.ts
@@ -6,9 +6,8 @@ import { Store } from '@ngrx/store';
 import * as fromProvider from '../reducer';
 import * as fromWizard from '../../../wizard/reducer';
 
-import { SetDisabled, SetDefinition } from '../../../wizard/action/wizard.action';
-import { LoadSchemaRequest, UpdateStatus } from '../action/editor.action';
-import { startWith } from 'rxjs/operators';
+import { SetDefinition } from '../../../wizard/action/wizard.action';
+import { UpdateStatus } from '../action/editor.action';
 import { Wizard } from '../../../wizard/model';
 import { MetadataProvider } from '../../domain/model';
 import { MetadataProviderTypes, MetadataProviderWizard } from '../model';
@@ -36,45 +35,26 @@ export class ProviderWizardStepComponent implements OnDestroy {
     constructor(
         private store: Store<fromProvider.ProviderState>
     ) {
-        this.store
-            .select(fromWizard.getCurrentWizardSchema)
-            .subscribe(s => {
-                this.store.dispatch(new LoadSchemaRequest(s));
-            });
-
         this.schema$ = this.store.select(fromProvider.getSchema);
-        this.valid$ = this.store.select(fromProvider.getEditorIsValid);
         this.definition$ = this.store.select(fromWizard.getWizardDefinition);
         this.changes$ = this.store.select(fromProvider.getEntityChanges);
 
-        this.valid$
-            .pipe(startWith(false))
-            .subscribe((valid) => {
-                this.store.dispatch(new SetDisabled(!valid));
-            });
-
         this.model$ = this.schema$.pipe(
             withLatestFrom(
                 this.store.select(fromWizard.getModel),
                 this.changes$,
                 this.definition$
             ),
-            map(([schema, model, changes, definition]) => {
-                return ({
-                    model: {
-                        ...model,
-                        ...changes
-                    },
-                    definition
-                });
-            }),
-            map(({ model, definition }) => {
-                return definition.translate ? definition.translate.formatter(model) : model;
-            })
+            map(([schema, model, changes, definition]) => ({
+                model: {
+                    ...model,
+                    ...changes
+                },
+                definition
+            })),
+            map(({ model, definition }) => definition.translate ? definition.translate.formatter(model) : model)
         );
 
-        this.schema$.subscribe(s => this.schema = s);
-
         this.changeEmitted$.pipe(
             withLatestFrom(this.schema$, this.definition$),
             map(([changes, schema, definition]) => {
diff --git a/ui/src/app/metadata/provider/container/provider-wizard-summary.component.html b/ui/src/app/metadata/provider/container/provider-wizard-summary.component.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/ui/src/app/metadata/provider/container/provider-wizard-summary.component.ts b/ui/src/app/metadata/provider/container/provider-wizard-summary.component.ts
deleted file mode 100644
index d16ee2498..000000000
--- a/ui/src/app/metadata/provider/container/provider-wizard-summary.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Component } from '@angular/core';
-import { Store } from '@ngrx/store';
-
-import * as fromProvider from '../reducer';
-
-@Component({
-    selector: 'provider-wizard-summary',
-    templateUrl: './provider-wizard-summary.component.html',
-    styleUrls: []
-})
-
-export class ProviderWizardSummaryComponent {
-    constructor(
-        private store: Store<fromProvider.ProviderState>
-    ) {}
-
-    save(): void {
-        console.log('Save!');
-    }
-}
-
diff --git a/ui/src/app/metadata/provider/container/provider-wizard.component.html b/ui/src/app/metadata/provider/container/provider-wizard.component.html
index 2193c7e1d..196081a1f 100644
--- a/ui/src/app/metadata/provider/container/provider-wizard.component.html
+++ b/ui/src/app/metadata/provider/container/provider-wizard.component.html
@@ -1,12 +1,17 @@
 <div class="container-fluid p-3" role="main">
-    <wizard (onNext)="next()" (onPrevious)="previous()" (onSave)="save()"></wizard>
+    <wizard
+        (onNext)="next()"
+        (onPrevious)="previous()"
+        (onSave)="save()"></wizard>
     <hr />
     <div class="row">
         <div class="col col-xl-6 col-lg-9 col-xs-12">
             <router-outlet></router-outlet>
         </div>
-        <!--<div class="col col-xl-6 col-lg-9 col-xs-12">
-            <code class="bg-light border rounded p-4 d-block"><pre>{{ changes$ | async | json }}</pre></code>
-        </div>-->
     </div>
+    <provider-wizard-summary
+        [summary]="summary$ | async"
+        (onPageSelect)="gotoPage($event)"
+        *ngIf="currentPage === 'summary'">
+    </provider-wizard-summary>
 </div>
diff --git a/ui/src/app/metadata/provider/container/provider-wizard.component.ts b/ui/src/app/metadata/provider/container/provider-wizard.component.ts
index 248efe68b..a9383bd64 100644
--- a/ui/src/app/metadata/provider/container/provider-wizard.component.ts
+++ b/ui/src/app/metadata/provider/container/provider-wizard.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnDestroy } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Observable, combineLatest } from 'rxjs';
 import { Store } from '@ngrx/store';
 
 import * as fromProvider from '../reducer';
@@ -10,6 +10,8 @@ import { startWith } from 'rxjs/operators';
 import { Wizard, WizardStep } from '../../../wizard/model';
 import { MetadataProvider } from '../../domain/model';
 import { ClearProvider } from '../action/entity.action';
+import { Router, ActivatedRoute } from '@angular/router';
+import { map } from 'rxjs/operators';
 
 
 @Component({
@@ -19,9 +21,6 @@ import { ClearProvider } from '../action/entity.action';
 })
 
 export class ProviderWizardComponent implements OnDestroy {
-
-    schema$: Observable<any>;
-    schema: any;
     definition$: Observable<Wizard<MetadataProvider>>;
     changes$: Observable<MetadataProvider>;
     model$: Observable<any>;
@@ -31,8 +30,12 @@ export class ProviderWizardComponent implements OnDestroy {
     nextStep: WizardStep;
     previousStep: WizardStep;
 
+    summary$: Observable<{ definition: Wizard<MetadataProvider>, schema: { [id: string]: any }, model: any }>;
+
     constructor(
-        private store: Store<fromProvider.ProviderState>
+        private store: Store<fromProvider.ProviderState>,
+        private router: Router,
+        private route: ActivatedRoute
     ) {
         this.store
             .select(fromWizard.getCurrentWizardSchema)
@@ -41,8 +44,10 @@ export class ProviderWizardComponent implements OnDestroy {
             });
         this.valid$ = this.store.select(fromProvider.getEditorIsValid);
         this.changes$ = this.store.select(fromProvider.getEntityChanges);
+
         this.store.select(fromWizard.getNext).subscribe(n => this.nextStep = n);
         this.store.select(fromWizard.getPrevious).subscribe(p => this.previousStep = p);
+        this.store.select(fromWizard.getWizardIndex).subscribe(i => this.currentPage = i);
 
         this.valid$
             .pipe(startWith(false))
@@ -50,8 +55,13 @@ export class ProviderWizardComponent implements OnDestroy {
                 this.store.dispatch(new SetDisabled(!valid));
             });
 
-        this.schema$.subscribe(s => this.schema = s);
-
+        this.summary$ = combineLatest(
+            this.store.select(fromWizard.getWizardDefinition),
+            this.store.select(fromWizard.getSchemaCollection),
+            this.store.select(fromProvider.getEntityChanges)
+        ).pipe(
+            map(([ definition, schema, model ]) => ({ definition, schema, model }))
+        );
     }
 
     ngOnDestroy() {
@@ -73,5 +83,9 @@ export class ProviderWizardComponent implements OnDestroy {
     save(): void {
         console.log('Save!');
     }
+
+    gotoPage(page: string): void {
+        this.store.dispatch(new SetIndex(page));
+    }
 }
 
diff --git a/ui/src/app/metadata/provider/container/provider.component.ts b/ui/src/app/metadata/provider/container/provider.component.ts
index c2955ca7a..afaf48a27 100644
--- a/ui/src/app/metadata/provider/container/provider.component.ts
+++ b/ui/src/app/metadata/provider/container/provider.component.ts
@@ -1,10 +1,5 @@
 import { Component } from '@angular/core';
-import { FormGroup, Validators, FormBuilder } from '@angular/forms';
 import { Store } from '@ngrx/store';
-import { ActivatedRoute } from '@angular/router';
-
-
-import { MetadataProviderTypes } from '../model';
 import * as fromProvider from '../reducer';
 import { SetDefinition, SetIndex } from '../../../wizard/action/wizard.action';
 
@@ -16,10 +11,7 @@ import { MetadataProviderWizard } from '../model';
     styleUrls: []
 })
 export class ProviderComponent {
-    types = MetadataProviderTypes;
-
     constructor(
-        private fb: FormBuilder,
         private store: Store<fromProvider.ProviderState>
     ) {
         this.store.dispatch(new SetDefinition(MetadataProviderWizard));
diff --git a/ui/src/app/metadata/provider/effect/editor.effect.ts b/ui/src/app/metadata/provider/effect/editor.effect.ts
index 7fc04f3bc..bbf1bcc48 100644
--- a/ui/src/app/metadata/provider/effect/editor.effect.ts
+++ b/ui/src/app/metadata/provider/effect/editor.effect.ts
@@ -8,11 +8,14 @@ import {
     LoadSchemaFail,
     EditorActionTypes
 } from '../action/editor.action';
-import { map, switchMap, catchError } from 'rxjs/operators';
+import { map, switchMap, catchError, withLatestFrom } from 'rxjs/operators';
 import { of } from 'rxjs';
-import { SetDefinition, WizardActionTypes } from '../../../wizard/action/wizard.action';
+import { SetDefinition, WizardActionTypes, AddSchema } from '../../../wizard/action/wizard.action';
 import { ResetChanges } from '../action/entity.action';
 
+import * as fromWizard from '../../../wizard/reducer';
+import { Store } from '@ngrx/store';
+
 @Injectable()
 export class EditorEffects {
 
@@ -30,6 +33,14 @@ export class EditorEffects {
         )
     );
 
+    @Effect()
+    $loadSchemaSuccess = this.actions$.pipe(
+        ofType<LoadSchemaSuccess>(EditorActionTypes.LOAD_SCHEMA_SUCCESS),
+        map(action => action.payload),
+        withLatestFrom(this.store.select(fromWizard.getWizardIndex)),
+        map(([schema, id]) => new AddSchema({ id, schema }))
+    );
+
     @Effect()
     $resetChanges = this.actions$.pipe(
         ofType<SetDefinition>(WizardActionTypes.SET_DEFINITION),
@@ -38,6 +49,7 @@ export class EditorEffects {
 
     constructor(
         private schemaService: SchemaService,
+        private store: Store<fromWizard.WizardState>,
         private actions$: Actions
     ) { }
 }  /* istanbul ignore next */
diff --git a/ui/src/app/metadata/provider/model/file-backed-http.provider.form.ts b/ui/src/app/metadata/provider/model/file-backed-http.provider.form.ts
index 9b31fa220..d4bfd143d 100644
--- a/ui/src/app/metadata/provider/model/file-backed-http.provider.form.ts
+++ b/ui/src/app/metadata/provider/model/file-backed-http.provider.form.ts
@@ -5,27 +5,27 @@ export const FileBackedHttpMetadataProviderWizard: Wizard<FileBackedHttpMetadata
     label: 'FileBackedHttpMetadataProvider',
     type: '@FileBackedHttpMetadataProvider',
     translate: {
-        parser: (changes) => ({
-            ...changes,
-            metadataFilters: [
-                ...Object.keys(changes.metadataFilters || {}).reduce((collection, filterName) => ([
-                    ...collection,
-                    {
-                        ...changes.metadataFilters[filterName],
-                        '@type': filterName
-                    }
-                ]), [])
-            ]
-        }),
-        formatter: (changes) => ({
-            ...changes,
-            metadataFilters: {
-                ...(changes.metadataFilters || []).reduce((collection, filter) => ({
-                    ...collection,
-                    [filter['@type']]: filter
-                }), {})
-            }
-        })
+        parser: (changes) => changes.metadataFilters ? ({
+                ...changes,
+                metadataFilters: [
+                    ...Object.keys(changes.metadataFilters).reduce((collection, filterName) => ([
+                        ...collection,
+                        {
+                            ...changes.metadataFilters[filterName],
+                            '@type': filterName
+                        }
+                    ]), [])
+                ]
+            }) : changes,
+        formatter: (changes) => changes.metadataFilters ? ({
+                ...changes,
+                metadataFilters: {
+                    ...(changes.metadataFilters || []).reduce((collection, filter) => ({
+                        ...collection,
+                        [filter['@type']]: filter
+                    }), {})
+                }
+            }) : changes
     },
     steps: [
         {
@@ -50,6 +50,13 @@ export const FileBackedHttpMetadataProviderWizard: Wizard<FileBackedHttpMetadata
                 { key: 'metadataFilters', value: [] }
             ],
             schema: 'assets/schema/provider/filebacked-http-filters.schema.json'
+        },
+        {
+            id: 'summary',
+            label: 'FINISH SUMMARY AND VALIDATION',
+            index: null,
+            initialValues: [],
+            schema: 'assets/schema/provider/metadata-provider-summary.schema.json'
         }
     ]
 };
diff --git a/ui/src/app/metadata/provider/model/property.ts b/ui/src/app/metadata/provider/model/property.ts
new file mode 100644
index 000000000..031dce75c
--- /dev/null
+++ b/ui/src/app/metadata/provider/model/property.ts
@@ -0,0 +1,6 @@
+export interface Property {
+    type: string;
+    name: string;
+    value: string[];
+    properties: Property[];
+}
diff --git a/ui/src/app/metadata/provider/provider.module.ts b/ui/src/app/metadata/provider/provider.module.ts
index 25faea83a..098c8baf1 100644
--- a/ui/src/app/metadata/provider/provider.module.ts
+++ b/ui/src/app/metadata/provider/provider.module.ts
@@ -6,17 +6,17 @@ import { StoreModule } from '@ngrx/store';
 
 import { ProviderWizardComponent } from './container/provider-wizard.component';
 import { ProviderWizardStepComponent } from './container/provider-wizard-step.component';
-import { ProviderWizardSummaryComponent } from './container/provider-wizard-summary.component';
+import { ProviderWizardSummaryComponent } from './component/provider-wizard-summary.component';
 import { ProviderComponent } from './container/provider.component';
 import { WizardModule } from '../../wizard/wizard.module';
 import * as fromProvider from './reducer';
 import { EffectsModule } from '@ngrx/effects';
 import { EditorEffects } from './effect/editor.effect';
-// import { SchemaFormModule } from '../../schema-form/form.module';
 
-import { SchemaFormModule, WidgetRegistry, DefaultWidgetRegistry } from 'ngx-schema-form';
+import { WidgetRegistry} from 'ngx-schema-form';
 import { FormModule } from '../../schema-form/schema-form.module';
 import { CustomWidgetRegistry } from '../../schema-form/registry';
+import { SummaryPropertyComponent } from './component/summary-property.component';
 
 
 @NgModule({
@@ -24,7 +24,8 @@ import { CustomWidgetRegistry } from '../../schema-form/registry';
         ProviderComponent,
         ProviderWizardComponent,
         ProviderWizardStepComponent,
-        ProviderWizardSummaryComponent
+        ProviderWizardSummaryComponent,
+        SummaryPropertyComponent
     ],
     entryComponents: [],
     imports: [
diff --git a/ui/src/app/metadata/provider/provider.routing.ts b/ui/src/app/metadata/provider/provider.routing.ts
index 15a20ae14..98cdddd85 100644
--- a/ui/src/app/metadata/provider/provider.routing.ts
+++ b/ui/src/app/metadata/provider/provider.routing.ts
@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 
 import { ProviderComponent } from './container/provider.component';
 import { ProviderWizardComponent } from './container/provider-wizard.component';
-import { ProviderWizardSummaryComponent } from './container/provider-wizard-summary.component';
 import { ProviderWizardStepComponent } from './container/provider-wizard-step.component';
 
 export const ProviderRoutes: Routes = [
@@ -23,11 +22,6 @@ export const ProviderRoutes: Routes = [
                     {
                         path: 'new',
                         component: ProviderWizardStepComponent
-                    },
-                    {
-                        path: 'summary',
-                        component: ProviderWizardSummaryComponent,
-                        canActivate: []
                     }
                 ]
             }
diff --git a/ui/src/app/schema-form/widget/check/checkbox.component.html b/ui/src/app/schema-form/widget/check/checkbox.component.html
index 4c2745660..f8f94af1a 100644
--- a/ui/src/app/schema-form/widget/check/checkbox.component.html
+++ b/ui/src/app/schema-form/widget/check/checkbox.component.html
@@ -35,17 +35,3 @@
         </div>
     </ng-container>
 </div>
-<!--
-
-<fieldset aria-label="Don't sign the response? Checkbox - select for yes">
-    <div class="custom-control custom-checkbox custom-control-inline custom-control-reverse">
-        <input disableValidation="true" type="checkbox" class="custom-control-input" formControlName="dontSignResponse" id="dontSignResponse"
-            [value]="true" role="checkbox" aria-checked="false">
-        <label class="custom-control-label" i18n="@@label--dont-sign-the-response" for="dontSignResponse">Don't Sign the Response</label>
-    </div>
-    <ng-template #tooltipDontSignResponse i18n="@@tooltip--dont-sign-response">Don't Sign Response popover</ng-template>
-    <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipDontSignResponse" i18n-aria-label="@@tooltip--instruction"
-        aria-label="Information icon - press spacebar to read additional information for this form field"></i>
-</fieldset>
-
--->
\ No newline at end of file
diff --git a/ui/src/app/wizard/action/wizard.action.ts b/ui/src/app/wizard/action/wizard.action.ts
index 55bb9b404..ecb507cb4 100644
--- a/ui/src/app/wizard/action/wizard.action.ts
+++ b/ui/src/app/wizard/action/wizard.action.ts
@@ -7,6 +7,8 @@ export enum WizardActionTypes {
     UPDATE_DEFINITION = '[Wizard] Update Definition',
     SET_DISABLED = '[Wizard] Set Disabled',
 
+    ADD_SCHEMA = '[Wizard] Add Schema',
+
     NEXT = '[Wizard] Next Page',
     PREVIOUS = '[Wizard] Previous Page',
 
@@ -49,6 +51,12 @@ export class Previous implements Action {
     constructor(public payload: string) { }
 }
 
+export class AddSchema implements Action {
+    readonly type = WizardActionTypes.ADD_SCHEMA;
+
+    constructor(public payload: { id: string, schema: any }) { }
+}
+
 export class ClearWizard implements Action {
     readonly type = WizardActionTypes.CLEAR;
 }
@@ -60,4 +68,5 @@ export type WizardActionUnion =
     | SetDisabled
     | Next
     | Previous
-    | ClearWizard;
+    | ClearWizard
+    | AddSchema;
diff --git a/ui/src/app/wizard/component/wizard.component.html b/ui/src/app/wizard/component/wizard.component.html
index e5921c6ac..a4ae2b75c 100644
--- a/ui/src/app/wizard/component/wizard.component.html
+++ b/ui/src/app/wizard/component/wizard.component.html
@@ -8,21 +8,26 @@
                     <ng-container i18n="@@action--back">Back</ng-container>
                 </span>
                 <span class="label pull-right">
-                    {{ (previous$ | async).index }}. {{ (previous$ | async).label }}
+                    <ng-container *ngIf="(previous$ | async).index">{{ (previous$ | async).index }}. </ng-container>
+                    {{ (previous$ | async).label }}
                 </span>
             </button>
         </li>
         <li class="nav-item">
             <h3 class="tag tag-primary">
-                <span class="index">{{ (current$ | async).index }}</span>
-                {{ (current$ | async).index }}. {{ (current$ | async).label }}
+                <span class="index">{{ (current$ | async).index }} </span>
+                <ng-container *ngIf="(current$ | async).index">
+                    {{ (current$ | async).index }}. 
+                </ng-container>
+                {{ (current$ | async).label }}
             </h3>
         </li>
         <li class="nav-item" *ngIf="(next$ | async)">
             <button class="nav-link next btn clearfix" (click)="onNext.emit(nextPage.index)" [disabled]="disabled$ | async" [attr.aria-label]="nextPage.path"
                 role="button">
                 <span class="label pull-left">
-                    {{ (next$ | async).index }}. {{ (next$ | async).label }}
+                    <ng-container *ngIf="(next$ | async).index">{{ (next$ | async).index }}. </ng-container>
+                    {{ (next$ | async).label }}
                 </span>
                 <span class="direction pull-right">
                     <i class="fa fa-fw fa-arrow-circle-right d-block fa-2x"></i>
@@ -31,18 +36,6 @@ <h3 class="tag tag-primary">
             </button>
         </li>
         <li class="nav-item" *ngIf="(last$ | async)">
-            <button class="nav-link next btn clearfix" (click)="onNext.emit(null)" [disabled]="disabled$ | async" role="button">
-                <span class="label pull-left">
-                    Finish And Validate
-                </span>
-                <span class="direction pull-right">
-                    <i class="fa fa-fw fa-arrow-circle-right d-block fa-2x"></i>
-                    <ng-container i18n="@@action--next">Next</ng-container>
-                </span>
-            </button>
-        </li>
-        <!--
-        <li class="nav-item" *ngIf="(save$ | async) && !(next$ | async)">
             <button class="nav-link save btn" aria-label="Save" role="button">
                 <span class="label pull-left" i18n="@@action--save">Save</span>
                 <span class="direction pull-right">
@@ -51,6 +44,5 @@ <h3 class="tag tag-primary">
                 </span>
             </button>
         </li>
-        -->
     </ul>
 </nav>
diff --git a/ui/src/app/wizard/component/wizard.component.ts b/ui/src/app/wizard/component/wizard.component.ts
index 5ab006519..da9cdafb0 100644
--- a/ui/src/app/wizard/component/wizard.component.ts
+++ b/ui/src/app/wizard/component/wizard.component.ts
@@ -13,6 +13,7 @@ import { Observable } from 'rxjs';
 export class WizardComponent implements OnChanges {
     @Output() onNext = new EventEmitter();
     @Output() onPrevious = new EventEmitter();
+    @Output() onLast = new EventEmitter();
     @Output() onSave = new EventEmitter();
 
     currentPage: any = {};
diff --git a/ui/src/app/wizard/reducer/index.ts b/ui/src/app/wizard/reducer/index.ts
index bde6660fb..bbf53caf4 100644
--- a/ui/src/app/wizard/reducer/index.ts
+++ b/ui/src/app/wizard/reducer/index.ts
@@ -22,6 +22,7 @@ export const getState = createSelector(getWizardState, getWizardStateFn);
 export const getWizardIndex = createSelector(getState, fromWizard.getIndex);
 export const getWizardIsDisabled = createSelector(getState, fromWizard.getDisabled);
 export const getWizardDefinition = createSelector(getState, fromWizard.getDefinition);
+export const getSchemaCollection = createSelector(getState, fromWizard.getCollection);
 
 export const getSchema = (index: string, wizard: Wizard<any>) => {
     const step = wizard.steps.find(s => s.id === index);
@@ -63,4 +64,3 @@ export const getCurrent = createSelector(getWizardIndex, getWizardDefinition, ge
 export const getNext = createSelector(getWizardIndex, getWizardDefinition, getNextFn);
 export const getLast = createSelector(getWizardIndex, getWizardDefinition, getLastFn);
 export const getModel = createSelector(getCurrent, getModelFn);
-
diff --git a/ui/src/app/wizard/reducer/wizard.reducer.ts b/ui/src/app/wizard/reducer/wizard.reducer.ts
index de40f86a3..9ecae96ce 100644
--- a/ui/src/app/wizard/reducer/wizard.reducer.ts
+++ b/ui/src/app/wizard/reducer/wizard.reducer.ts
@@ -5,16 +5,27 @@ export interface State {
     index: string;
     disabled: boolean;
     definition: Wizard<any>;
+    schemaCollection: { [id: string]: any };
 }
 
 export const initialState: State = {
     index: null,
     disabled: false,
-    definition: null
+    definition: null,
+    schemaCollection: {}
 };
 
 export function reducer(state = initialState, action: WizardActionUnion): State {
     switch (action.type) {
+        case WizardActionTypes.ADD_SCHEMA: {
+            return {
+                ...state,
+                schemaCollection: {
+                    ...state.schemaCollection,
+                    [action.payload.id]: action.payload.schema
+                }
+            };
+        }
         case WizardActionTypes.SET_DISABLED: {
             return {
                 ...state,
@@ -56,3 +67,4 @@ export function reducer(state = initialState, action: WizardActionUnion): State
 export const getIndex = (state: State) => state.index;
 export const getDisabled = (state: State) => state.disabled;
 export const getDefinition = (state: State) => state.definition;
+export const getCollection = (state: State) => state.schemaCollection;
diff --git a/ui/src/assets/schema/provider/metadata-provider-summary.schema.json b/ui/src/assets/schema/provider/metadata-provider-summary.schema.json
new file mode 100644
index 000000000..b3cc3b73c
--- /dev/null
+++ b/ui/src/assets/schema/provider/metadata-provider-summary.schema.json
@@ -0,0 +1,11 @@
+{
+    "type": "object",
+    "properties": {
+        "enabled": {
+            "title": "Enable Metadata Provider",
+            "description": "Enable Metadata Provider",
+            "type": "boolean",
+            "default": true
+        }
+    }
+}
\ No newline at end of file