From ab461393137e2919723fdeb5958daa4a9f8b1232 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Tue, 16 Oct 2018 13:24:38 -0700
Subject: [PATCH] SHIBUI-914 Updated editor to use schema

---
 .../component/editor-nav.component.html}      |  18 +-
 .../component/editor-nav.component.spec.ts}   |   0
 .../component/editor-nav.component.ts}        |  15 +-
 .../component/unsaved-entity.dialog.html}     |   0
 .../component/unsaved-entity.dialog.spec.ts}  |   0
 .../component/unsaved-entity.dialog.ts}       |   9 +-
 .../component/wizard-summary.component.ts     |   2 +-
 ui/src/app/metadata/domain/domain.module.ts   |  15 +-
 ui/src/app/metadata/domain/domain.util.ts     |   4 +-
 .../file-backed-http-metadata-resolver.ts     |   4 +-
 .../domain/model/metadata-resolver.ts         |   2 +-
 .../model/wizards/metadata-source-editor.ts   | 147 ++++++++++++++
 .../model/wizards/metadata-source-wizard.ts   |   1 +
 .../metadata/domain/service/draft.service.ts  |   8 +-
 .../container/provider-edit.component.html    |   9 +-
 .../container/provider-edit.component.ts      |   9 +-
 .../provider-filter-list.component.html       |   8 +-
 .../provider-filter-list.component.ts         |   2 +-
 .../app/metadata/provider/provider.module.ts  |   5 -
 .../resolver/container/draft.component.html   |   1 -
 .../resolver/container/draft.component.ts     |  33 ----
 .../resolver/container/editor.component.html  | 103 ----------
 .../resolver/container/editor.component.ts    | 187 ------------------
 .../resolver-edit-step.component.html         |   8 +
 .../container/resolver-edit-step.component.ts | 117 +++++++++++
 .../container/resolver-edit.component.html    |  62 ++++++
 .../container/resolver-edit.component.ts      | 125 ++++++++++++
 .../container/resolver-select.component.html  |   3 +
 .../container/resolver-select.component.ts    |  52 +++++
 .../resolver-wizard-step.component.ts         |   2 +-
 .../container/resolver.component.html         |   1 -
 .../container/resolver.component.scss         |   0
 .../container/resolver.component.spec.ts      |  49 -----
 .../resolver/container/resolver.component.ts  |  34 ----
 .../effect/draft-collection.effects.ts        |   8 +-
 .../resolver/reducer/draft.reducer.ts         |   4 +-
 .../app/metadata/resolver/resolver.module.ts  |  18 +-
 .../app/metadata/resolver/resolver.routing.ts |  35 ++--
 .../metadata/resolver/wizard-definition.ts    |   1 +
 .../widget/object/object.component.html       |   2 +-
 40 files changed, 597 insertions(+), 506 deletions(-)
 rename ui/src/app/metadata/{provider/component/provider-editor-nav.component.html => domain/component/editor-nav.component.html} (78%)
 rename ui/src/app/metadata/{provider/component/provider-editor-nav.component.spec.ts => domain/component/editor-nav.component.spec.ts} (100%)
 rename ui/src/app/metadata/{provider/component/provider-editor-nav.component.ts => domain/component/editor-nav.component.ts} (73%)
 rename ui/src/app/metadata/{provider/component/unsaved-provider.dialog.html => domain/component/unsaved-entity.dialog.html} (100%)
 rename ui/src/app/metadata/{provider/component/unsaved-provider.dialog.spec.ts => domain/component/unsaved-entity.dialog.spec.ts} (100%)
 rename ui/src/app/metadata/{provider/component/unsaved-provider.dialog.ts => domain/component/unsaved-entity.dialog.ts} (67%)
 create mode 100644 ui/src/app/metadata/domain/model/wizards/metadata-source-editor.ts
 delete mode 100644 ui/src/app/metadata/resolver/container/draft.component.html
 delete mode 100644 ui/src/app/metadata/resolver/container/draft.component.ts
 delete mode 100644 ui/src/app/metadata/resolver/container/editor.component.html
 delete mode 100644 ui/src/app/metadata/resolver/container/editor.component.ts
 create mode 100644 ui/src/app/metadata/resolver/container/resolver-edit-step.component.html
 create mode 100644 ui/src/app/metadata/resolver/container/resolver-edit-step.component.ts
 create mode 100644 ui/src/app/metadata/resolver/container/resolver-edit.component.html
 create mode 100644 ui/src/app/metadata/resolver/container/resolver-edit.component.ts
 create mode 100644 ui/src/app/metadata/resolver/container/resolver-select.component.html
 create mode 100644 ui/src/app/metadata/resolver/container/resolver-select.component.ts
 delete mode 100644 ui/src/app/metadata/resolver/container/resolver.component.html
 delete mode 100644 ui/src/app/metadata/resolver/container/resolver.component.scss
 delete mode 100644 ui/src/app/metadata/resolver/container/resolver.component.spec.ts
 delete mode 100644 ui/src/app/metadata/resolver/container/resolver.component.ts

diff --git a/ui/src/app/metadata/provider/component/provider-editor-nav.component.html b/ui/src/app/metadata/domain/component/editor-nav.component.html
similarity index 78%
rename from ui/src/app/metadata/provider/component/provider-editor-nav.component.html
rename to ui/src/app/metadata/domain/component/editor-nav.component.html
index 8fbbccefb..354dd0582 100644
--- a/ui/src/app/metadata/provider/component/provider-editor-nav.component.html
+++ b/ui/src/app/metadata/domain/component/editor-nav.component.html
@@ -20,18 +20,10 @@
                 [attr.aria-label]="route.label"
                 role="button">
                 <translate-i18n [key]="route.label"></translate-i18n>
-                <valid-form-icon *ngIf="(invalidForms$ | async).indexOf(route.path) > -1" status="INVALID"></valid-form-icon>
+                <valid-form-icon *ngIf="status.indexOf(route.path) > -1" status="INVALID"></valid-form-icon>
             </a>
             <div class="dropdown-divider"></div>
-            <a href=""
-                class="dropdown-item"
-                [routerLink]="['../', 'filters']"
-                routerLinkActive="active"
-                aria-label="Filter List"
-                role="button"
-                translate="label.filter-list">
-                Filter List
-            </a>
+            <ng-content select=".dropdown-items"></ng-content>
         </div>
     </div>
     <ng-container *ngSwitchCase="formats.TABS">
@@ -45,13 +37,13 @@
                 [attr.aria-label]="route.label">
                 <translate-i18n [key]="route.label"></translate-i18n>
                 <valid-form-icon
-                    *ngIf="(invalidForms$ | async).indexOf(route.path) > -1"
+                    *ngIf="status.indexOf(route.path) > -1"
                     status="INVALID">
                 </valid-form-icon>
             </a>
         </nav>
         <hr />
-        <nav class="nav nav-pills flex-column" role="navigation">
+        <!--<nav class="nav nav-pills flex-column" role="navigation">
             <a class="nav-link"
                 [routerLink]="['../', 'filters']"
                 routerLinkActive="active"
@@ -59,6 +51,6 @@
                 role="button">
                 <translate-i18n key="label.filter-list"></translate-i18n>
             </a>
-        </nav>
+        </nav>-->
     </ng-container>
 </ng-container>
diff --git a/ui/src/app/metadata/provider/component/provider-editor-nav.component.spec.ts b/ui/src/app/metadata/domain/component/editor-nav.component.spec.ts
similarity index 100%
rename from ui/src/app/metadata/provider/component/provider-editor-nav.component.spec.ts
rename to ui/src/app/metadata/domain/component/editor-nav.component.spec.ts
diff --git a/ui/src/app/metadata/provider/component/provider-editor-nav.component.ts b/ui/src/app/metadata/domain/component/editor-nav.component.ts
similarity index 73%
rename from ui/src/app/metadata/provider/component/provider-editor-nav.component.ts
rename to ui/src/app/metadata/domain/component/editor-nav.component.ts
index b341364e2..f6c77bd62 100644
--- a/ui/src/app/metadata/provider/component/provider-editor-nav.component.ts
+++ b/ui/src/app/metadata/domain/component/editor-nav.component.ts
@@ -4,10 +4,8 @@ import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 import { skipWhile, combineLatest, map } from 'rxjs/operators';
 
-import * as fromProvider from '../reducer';
-import { WizardStep, Wizard } from '../../../wizard/model';
+import { WizardStep } from '../../../wizard/model';
 import * as fromWizard from '../../../wizard/reducer';
-import { MetadataProvider } from '../../domain/model';
 
 export enum NAV_FORMATS {
     DROPDOWN = 'NAV_DROPDOWN',
@@ -15,13 +13,14 @@ export enum NAV_FORMATS {
 }
 
 @Component({
-    selector: 'provider-editor-nav',
-    templateUrl: './provider-editor-nav.component.html',
+    selector: 'editor-nav',
+    templateUrl: './editor-nav.component.html',
     styleUrls: []
 })
 
-export class ProviderEditorNavComponent {
+export class EditorNavComponent {
     @Input() format: string;
+    @Input() status: string[];
 
     @Output() onPageSelect: EventEmitter<string> = new EventEmitter();
 
@@ -32,14 +31,13 @@ export class ProviderEditorNavComponent {
     current$: Observable<WizardStep>;
 
     index$: Observable<string>;
-    invalidForms$: Observable<string[]>;
     routes$: Observable<{ path: string, label: string }[]>;
 
     getFilterId = p => p ? p.id : 'filters';
     getFilterLabel = p => p ? p.label : 'Filter List';
 
     constructor(
-        private store: Store<fromProvider.ProviderState>
+        private store: Store<fromWizard.WizardState>
     ) {
         this.index$ = this.store.select(fromWizard.getWizardIndex).pipe(skipWhile(i => !i));
         this.routes$ = this.store.select(fromWizard.getRoutes);
@@ -47,7 +45,6 @@ export class ProviderEditorNavComponent {
         this.currentPage$ = this.current$.pipe(map(this.getFilterId));
 
         this.currentLabel$ = this.current$.pipe(map(this.getFilterLabel));
-        this.invalidForms$ = this.store.select(fromProvider.getInvalidEditorForms);
     }
 
     gotoPage(page: string = ''): void {
diff --git a/ui/src/app/metadata/provider/component/unsaved-provider.dialog.html b/ui/src/app/metadata/domain/component/unsaved-entity.dialog.html
similarity index 100%
rename from ui/src/app/metadata/provider/component/unsaved-provider.dialog.html
rename to ui/src/app/metadata/domain/component/unsaved-entity.dialog.html
diff --git a/ui/src/app/metadata/provider/component/unsaved-provider.dialog.spec.ts b/ui/src/app/metadata/domain/component/unsaved-entity.dialog.spec.ts
similarity index 100%
rename from ui/src/app/metadata/provider/component/unsaved-provider.dialog.spec.ts
rename to ui/src/app/metadata/domain/component/unsaved-entity.dialog.spec.ts
diff --git a/ui/src/app/metadata/provider/component/unsaved-provider.dialog.ts b/ui/src/app/metadata/domain/component/unsaved-entity.dialog.ts
similarity index 67%
rename from ui/src/app/metadata/provider/component/unsaved-provider.dialog.ts
rename to ui/src/app/metadata/domain/component/unsaved-entity.dialog.ts
index 4b8d12da3..7efe195c8 100644
--- a/ui/src/app/metadata/provider/component/unsaved-provider.dialog.ts
+++ b/ui/src/app/metadata/domain/component/unsaved-entity.dialog.ts
@@ -1,16 +1,13 @@
 import { Component, Input } from '@angular/core';
 
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import { Store, Action } from '@ngrx/store';
 import { Subject } from 'rxjs/Subject';
 
-import * as fromEditor from '../reducer';
-
 @Component({
-    selector: 'unsaved-provider',
-    templateUrl: './unsaved-provider.dialog.html'
+    selector: 'unsaved-entity',
+    templateUrl: './unsaved-entity.dialog.html'
 })
-export class UnsavedProviderComponent {
+export class UnsavedEntityComponent {
     readonly subject: Subject<boolean> = new Subject<boolean>();
 
     constructor(
diff --git a/ui/src/app/metadata/domain/component/wizard-summary.component.ts b/ui/src/app/metadata/domain/component/wizard-summary.component.ts
index 3d2b14912..b88323eaa 100644
--- a/ui/src/app/metadata/domain/component/wizard-summary.component.ts
+++ b/ui/src/app/metadata/domain/component/wizard-summary.component.ts
@@ -45,7 +45,7 @@ export function getStepProperties(schema: any, model: any, definitions: any = {}
         .map(property => {
             return getStepProperty(
                 schema.properties[property],
-                model[property],
+                model && model.hasOwnProperty(property) ? model[property] : null,
                 definitions
             );
         });
diff --git a/ui/src/app/metadata/domain/domain.module.ts b/ui/src/app/metadata/domain/domain.module.ts
index 359f101fb..b5a075336 100644
--- a/ui/src/app/metadata/domain/domain.module.ts
+++ b/ui/src/app/metadata/domain/domain.module.ts
@@ -17,12 +17,18 @@ import { AttributesService } from './service/attributes.service';
 import { I18nModule } from '../../i18n/i18n.module';
 import { WizardSummaryComponent } from './component/wizard-summary.component';
 import { SummaryPropertyComponent } from './component/summary-property.component';
-import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbPopoverModule, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { UnsavedEntityComponent } from './component/unsaved-entity.dialog';
+import { EditorNavComponent } from './component/editor-nav.component';
+import { RouterModule } from '@angular/router';
+import { SharedModule } from '../../shared/shared.module';
 
 export const COMPONENTS = [
     PreviewDialogComponent,
     WizardSummaryComponent,
-    SummaryPropertyComponent
+    UnsavedEntityComponent,
+    SummaryPropertyComponent,
+    EditorNavComponent
 ];
 
 export const DECLARATIONS = [
@@ -36,7 +42,10 @@ export const DECLARATIONS = [
         HttpModule,
         CommonModule,
         I18nModule,
-        NgbPopoverModule
+        NgbPopoverModule,
+        RouterModule,
+        NgbDropdownModule,
+        SharedModule
     ],
     exports: DECLARATIONS,
     providers: []
diff --git a/ui/src/app/metadata/domain/domain.util.ts b/ui/src/app/metadata/domain/domain.util.ts
index 2840e9cbc..af9ab0153 100644
--- a/ui/src/app/metadata/domain/domain.util.ts
+++ b/ui/src/app/metadata/domain/domain.util.ts
@@ -14,8 +14,8 @@ export const getEntityIdsFn = list => list.map(entity => entity.entityId);
 export const mergeOrderFn = (entities: Metadata[], order: string[]): Metadata[] => {
     return [...entities.sort(
         (a: Metadata, b: Metadata) => {
-            const aIndex = order.indexOf(a.resourceId);
-            const bIndex = order.indexOf(b.resourceId);
+            const aIndex = order.indexOf(a.id);
+            const bIndex = order.indexOf(b.id);
             return aIndex > bIndex ? 1 : bIndex > aIndex ? -1 : 0;
         }
     )];
diff --git a/ui/src/app/metadata/domain/entity/resolver/file-backed-http-metadata-resolver.ts b/ui/src/app/metadata/domain/entity/resolver/file-backed-http-metadata-resolver.ts
index 9d71ee2b5..8a59cb691 100644
--- a/ui/src/app/metadata/domain/entity/resolver/file-backed-http-metadata-resolver.ts
+++ b/ui/src/app/metadata/domain/entity/resolver/file-backed-http-metadata-resolver.ts
@@ -14,7 +14,7 @@ import { MetadataTypes } from '../../domain.type';
 import { MetadataEntity } from '../../model/metadata-entity';
 
 export class FileBackedHttpMetadataResolver implements MetadataResolver, MetadataEntity {
-    resourceId = '';
+    id = '';
     createdDate?: string;
     modifiedDate?: string;
     version: string;
@@ -53,7 +53,7 @@ export class FileBackedHttpMetadataResolver implements MetadataResolver, Metadat
     }
 
     getId(): string {
-        return this.resourceId;
+        return this.id;
     }
 
     getDisplayId(): string {
diff --git a/ui/src/app/metadata/domain/model/metadata-resolver.ts b/ui/src/app/metadata/domain/model/metadata-resolver.ts
index 55776ea03..9f8e0686c 100644
--- a/ui/src/app/metadata/domain/model/metadata-resolver.ts
+++ b/ui/src/app/metadata/domain/model/metadata-resolver.ts
@@ -11,7 +11,7 @@ import {
 } from '../model';
 
 export interface MetadataResolver extends MetadataBase {
-    resourceId: string;
+    id: string;
     entityId?: string;
     serviceProviderName: string;
     organization?: Organization;
diff --git a/ui/src/app/metadata/domain/model/wizards/metadata-source-editor.ts b/ui/src/app/metadata/domain/model/wizards/metadata-source-editor.ts
new file mode 100644
index 000000000..1beb5c9a1
--- /dev/null
+++ b/ui/src/app/metadata/domain/model/wizards/metadata-source-editor.ts
@@ -0,0 +1,147 @@
+import { Wizard, WizardStep } from '../../../../wizard/model';
+import { MetadataResolver } from '../metadata-resolver';
+
+export class MetadataSourceEditor implements Wizard<MetadataResolver> {
+    label = 'Metadata Source';
+    type = '@MetadataProvider';
+    steps: WizardStep[] = [
+        {
+            index: 1,
+            id: 'common',
+            label: 'label.resolver-common-attributes',
+            schema: 'assets/schema/source/metadata-source.json',
+            fields: [
+                'serviceProviderName',
+                'entityId',
+                'serviceEnabled',
+                'organization',
+                'contacts'
+            ],
+            fieldsets: [
+                {
+                    type: 'group',
+                    fields: [
+                        'serviceProviderName',
+                        'entityId',
+                        'serviceEnabled',
+                        'organization'
+                    ]
+                },
+                {
+                    type: 'group',
+                    fields: [
+                        'contacts'
+                    ]
+                }
+            ]
+        },
+        {
+            index: 3,
+            id: 'metadata-ui',
+            label: 'label.metadata-ui',
+            schema: 'assets/schema/source/metadata-source.json',
+            fields: [
+                'mdui'
+            ]
+        },
+        {
+            index: 4,
+            id: 'descriptor-info',
+            label: 'label.descriptor-info',
+            schema: 'assets/schema/source/metadata-source.json',
+            fields: [
+                'serviceProviderSsoDescriptor'
+            ]
+        },
+        {
+            index: 5,
+            id: 'logout-endpoints',
+            label: 'label.logout-endpoints',
+            schema: 'assets/schema/source/metadata-source.json',
+            fields: [
+                'logoutEndpoints'
+            ],
+            fieldsets: [
+                {
+                    type: 'group',
+                    fields: [
+                        'logoutEndpoints'
+                    ]
+                }
+            ]
+        },
+        {
+            index: 6,
+            id: 'key-info',
+            label: 'label.key-info',
+            schema: 'assets/schema/source/metadata-source.json',
+            fields: [
+                'securityInfo'
+            ]
+        },
+        {
+            index: 7,
+            id: 'assertion',
+            label: 'label.assertion',
+            schema: 'assets/schema/source/metadata-source.json',
+            fields: [
+                'assertionConsumerServices'
+            ],
+            fieldsets: [
+                {
+                    type: 'group',
+                    fields: [
+                        'assertionConsumerServices'
+                    ]
+                }
+            ]
+        },
+        {
+            index: 8,
+            id: 'relying-party',
+            label: 'label.relying-party',
+            schema: 'assets/schema/source/metadata-source.json',
+            fields: [
+                'relyingPartyOverrides'
+            ],
+            fieldsets: [
+                {
+                    type: 'group',
+                    fields: [
+                        'relyingPartyOverrides'
+                    ]
+                }
+            ]
+        },
+        {
+            index: 9,
+            id: 'attribute',
+            label: 'label.attribute-release',
+            schema: 'assets/schema/source/metadata-source.json',
+            fields: [
+                'attributeRelease'
+            ],
+            fieldsets: [
+                {
+                    type: 'group',
+                    fields: [
+                        'attributeRelease'
+                    ]
+                }
+            ]
+        }
+    ];
+
+    parser(changes: Partial<MetadataResolver>, schema?: any): any {
+        return changes;
+    }
+
+    formatter(changes: Partial<MetadataResolver>, schema?: any): any {
+        return changes;
+    }
+
+    getValidators(...args: any[]): { [key: string]: any } {
+        const validators = {};
+        return validators;
+    }
+}
diff --git a/ui/src/app/metadata/domain/model/wizards/metadata-source-wizard.ts b/ui/src/app/metadata/domain/model/wizards/metadata-source-wizard.ts
index 82c929cea..b3c6ce20f 100644
--- a/ui/src/app/metadata/domain/model/wizards/metadata-source-wizard.ts
+++ b/ui/src/app/metadata/domain/model/wizards/metadata-source-wizard.ts
@@ -169,3 +169,4 @@ export class MetadataSourceWizard implements Wizard<MetadataResolver> {
         return validators;
     }
 }
+
diff --git a/ui/src/app/metadata/domain/service/draft.service.ts b/ui/src/app/metadata/domain/service/draft.service.ts
index 76dcb9f85..b43713359 100644
--- a/ui/src/app/metadata/domain/service/draft.service.ts
+++ b/ui/src/app/metadata/domain/service/draft.service.ts
@@ -18,7 +18,7 @@ export class EntityDraftService {
         return of(this.storage.query());
     }
 
-    find(id: string, attr: string = 'resourceId'): Observable<MetadataResolver> {
+    find(id: string, attr: string = 'id'): Observable<MetadataResolver> {
         if (!id) {
             return throwError(404);
         }
@@ -35,15 +35,15 @@ export class EntityDraftService {
     }
 
     remove(provider: MetadataResolver): Observable<MetadataResolver> {
-        this.storage.removeByAttr(provider.resourceId, 'resourceId');
+        this.storage.removeByAttr(provider.id, 'id');
         return of(provider);
     }
 
     update(provider: MetadataResolver): Observable<MetadataResolver> {
-        let stored = this.storage.findByAttr(provider.resourceId, 'resourceId');
+        let stored = this.storage.findByAttr(provider.id, 'id');
         if (stored) {
             stored = { ...stored, ...provider };
-            this.storage.removeByAttr(provider.resourceId, 'resourceId');
+            this.storage.removeByAttr(provider.id, 'id');
             this.storage.add(stored);
             return of(stored);
         } else {
diff --git a/ui/src/app/metadata/provider/container/provider-edit.component.html b/ui/src/app/metadata/provider/container/provider-edit.component.html
index 1775b8c92..7ab38b315 100644
--- a/ui/src/app/metadata/provider/container/provider-edit.component.html
+++ b/ui/src/app/metadata/provider/container/provider-edit.component.html
@@ -10,10 +10,11 @@
     <div class="section-body p-4 border border-top-0 border-info">
         <div class="row">
             <div class="col-6 d-lg-none order-1">
-                <provider-editor-nav
+                <editor-nav
                     [format]="formats.DROPDOWN"
+                    [status]="status$ | async"
                     (onPageSelect)="setIndex($event)">
-                </provider-editor-nav>
+                </editor-nav>
             </div>
             <div class="col-6 col-lg-3 order-2 text-right">
                 <button class="btn btn-info"
@@ -46,10 +47,10 @@
         <hr />
         <div class="row">
             <div class="col-lg-3 d-none d-lg-block">
-                <provider-editor-nav
+                <editor-nav
                     [format]="formats.TABS"
                     (onPageSelect)="setIndex($event)">
-                </provider-editor-nav>
+                </editor-nav>
             </div>
             <div class="col-lg-6">
                 <router-outlet></router-outlet>
diff --git a/ui/src/app/metadata/provider/container/provider-edit.component.ts b/ui/src/app/metadata/provider/container/provider-edit.component.ts
index a1de135b6..2abd7d8ed 100644
--- a/ui/src/app/metadata/provider/container/provider-edit.component.ts
+++ b/ui/src/app/metadata/provider/container/provider-edit.component.ts
@@ -5,18 +5,17 @@ import { skipWhile, map, combineLatest } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
 import * as fromWizard from '../../../wizard/reducer';
 import * as fromProvider from '../reducer';
-import { ClearWizard, SetDefinition, SetIndex, LoadSchemaRequest } from '../../../wizard/action/wizard.action';
+import { ClearWizard, SetIndex, LoadSchemaRequest } from '../../../wizard/action/wizard.action';
 import { ClearEditor } from '../action/editor.action';
 import { MetadataProvider } from '../../domain/model';
 import { ClearProvider } from '../action/entity.action';
 import { Wizard } from '../../../wizard/model';
 import { UpdateProviderRequest } from '../action/collection.action';
-import { NAV_FORMATS } from '../component/provider-editor-nav.component';
 import { NgbModal } from '../../../../../node_modules/@ng-bootstrap/ng-bootstrap';
-import { UnsavedDialogComponent } from '../../resolver/component/unsaved-dialog.component';
-import { UnsavedProviderComponent } from '../component/unsaved-provider.dialog';
+import { UnsavedEntityComponent } from '../../domain/component/unsaved-entity.dialog';
 import { CanComponentDeactivate } from '../../../core/service/can-deactivate.guard';
 import { DifferentialService } from '../../../core/service/differential.service';
+import { NAV_FORMATS } from '../../domain/component/editor-nav.component';
 
 @Component({
     selector: 'provider-edit',
@@ -116,7 +115,7 @@ export class ProviderEditComponent implements OnDestroy, CanComponentDeactivate
         }
         const diff = this.diffService.updatedDiff(this.provider, this.latest);
         if (diff && Object.keys(diff).length > 0) {
-            let modal = this.modalService.open(UnsavedProviderComponent);
+            let modal = this.modalService.open(UnsavedEntityComponent);
             modal.result.then(
                 () => {
                     this.clear();
diff --git a/ui/src/app/metadata/provider/container/provider-filter-list.component.html b/ui/src/app/metadata/provider/container/provider-filter-list.component.html
index d353bf449..db5aa695c 100644
--- a/ui/src/app/metadata/provider/container/provider-filter-list.component.html
+++ b/ui/src/app/metadata/provider/container/provider-filter-list.component.html
@@ -12,9 +12,9 @@
     <div class="section-body p-4 border border-top-0 border-info">
         <div class="row">
             <div class="col-6 d-lg-none order-1">
-                <provider-editor-nav
+                <editor-nav
                     [format]="formats.DROPDOWN">
-                </provider-editor-nav>
+                </editor-nav>
             </div>
             <div class="col-6 col-lg-12 order-2 text-right">
                 <a [routerLink]="['../', 'filter', 'new']"
@@ -27,9 +27,9 @@
         <hr />
         <div class="row">
             <div class="col-lg-3 d-none d-lg-block">
-                <provider-editor-nav
+                <editor-nav
                     [format]="formats.TABS">
-                </provider-editor-nav>
+                </editor-nav>
             </div>
             <div class="col-lg-9">
                 <table class="table table-striped table-hover">
diff --git a/ui/src/app/metadata/provider/container/provider-filter-list.component.ts b/ui/src/app/metadata/provider/container/provider-filter-list.component.ts
index 81a2b5e98..825ad9443 100644
--- a/ui/src/app/metadata/provider/container/provider-filter-list.component.ts
+++ b/ui/src/app/metadata/provider/container/provider-filter-list.component.ts
@@ -7,7 +7,6 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import * as fromProvider from '../reducer';
 import * as fromFilter from '../../filter/reducer';
 import { MetadataFilter, MetadataProvider } from '../../domain/model';
-import { NAV_FORMATS } from '../component/provider-editor-nav.component';
 import { SetIndex } from '../../../wizard/action/wizard.action';
 
 import {
@@ -19,6 +18,7 @@ import {
     ClearFilters
 } from '../../filter/action/collection.action';
 import { DeleteFilterComponent } from '../component/delete-filter.component';
+import { NAV_FORMATS } from '../../domain/component/editor-nav.component';
 
 @Component({
     selector: 'provider-filter-list',
diff --git a/ui/src/app/metadata/provider/provider.module.ts b/ui/src/app/metadata/provider/provider.module.ts
index 1aaedf997..8555dd81e 100644
--- a/ui/src/app/metadata/provider/provider.module.ts
+++ b/ui/src/app/metadata/provider/provider.module.ts
@@ -23,8 +23,6 @@ import { ProviderEditStepComponent } from './container/provider-edit-step.compon
 import { EntityEffects } from './effect/entity.effect';
 import { ProviderFilterListComponent } from './container/provider-filter-list.component';
 
-import { ProviderEditorNavComponent } from './component/provider-editor-nav.component';
-import { UnsavedProviderComponent } from './component/unsaved-provider.dialog';
 import { ContentionModule } from '../../contention/contention.module';
 import { DeleteFilterComponent } from './component/delete-filter.component';
 import { I18nModule } from '../../i18n/i18n.module';
@@ -39,12 +37,9 @@ import { DomainModule } from '../domain/domain.module';
         ProviderEditStepComponent,
         ProviderSelectComponent,
         ProviderFilterListComponent,
-        ProviderEditorNavComponent,
-        UnsavedProviderComponent,
         DeleteFilterComponent
     ],
     entryComponents: [
-        UnsavedProviderComponent,
         DeleteFilterComponent
     ],
     imports: [
diff --git a/ui/src/app/metadata/resolver/container/draft.component.html b/ui/src/app/metadata/resolver/container/draft.component.html
deleted file mode 100644
index 90c6b6463..000000000
--- a/ui/src/app/metadata/resolver/container/draft.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<router-outlet></router-outlet>
\ No newline at end of file
diff --git a/ui/src/app/metadata/resolver/container/draft.component.ts b/ui/src/app/metadata/resolver/container/draft.component.ts
deleted file mode 100644
index 687ad2260..000000000
--- a/ui/src/app/metadata/resolver/container/draft.component.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { Subscription } from 'rxjs';
-import { distinctUntilChanged, map } from 'rxjs/operators';
-
-import { Store } from '@ngrx/store';
-import { NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
-import { SelectDraftRequest } from '../action/draft.action';
-import * as fromCollection from '../reducer';
-
-@Component({
-    selector: 'resolver-page',
-    templateUrl: './resolver.component.html',
-    styleUrls: ['./resolver.component.scss'],
-    providers: [NgbPopoverConfig]
-})
-export class DraftComponent implements OnDestroy {
-    actionsSubscription: Subscription;
-
-    constructor(
-        store: Store<fromCollection.State>,
-        route: ActivatedRoute
-    ) {
-        this.actionsSubscription = route.params.pipe(
-            distinctUntilChanged(),
-            map(params => new SelectDraftRequest(params.entityId))
-        ).subscribe(store);
-    }
-
-    ngOnDestroy() {
-        this.actionsSubscription.unsubscribe();
-    }
-} /* istanbul ignore next */
diff --git a/ui/src/app/metadata/resolver/container/editor.component.html b/ui/src/app/metadata/resolver/container/editor.component.html
deleted file mode 100644
index 773b519ac..000000000
--- a/ui/src/app/metadata/resolver/container/editor.component.html
+++ /dev/null
@@ -1,103 +0,0 @@
-<div class="container-fluid p-3" *ngIf="resolver$ | async" role="main">
-    <section class="section" [attr.aria-label]="'Edit metadata source - ' + (resolver$ | async).serviceProviderName" tabindex="0">
-        <div class="section-header bg-info p-2 text-white">
-            <div class="row justify-content-between">
-                <div class="col-md-12">
-                    <span class="display-6"><i class="fa fa-fw fa-gears"></i> Edit Metadata Source - {{ (resolver$ | async).serviceProviderName }}</span>
-                </div>
-            </div>
-        </div>
-        <div class="section-body p-4 border border-top-0 border-info">
-            <div class="row">
-                <div class="col-6 d-lg-none order-1">
-                    <div class="dropdown" ngbDropdown #dropdown="ngbDropdown">
-                        <button
-                            class="btn btn-secondary"
-                            role="button"
-                            aria-haspopup="true"
-                            aria-expanded="false"
-                            ngbDropdownToggle>
-                            <i class="fa fa-fw fa-bars fa-lg" aria-hidden="true"></i>
-                            <span class="d-inline-block mx-2">
-                                <translate-i18n [key]="(currentPage$ | async).label"></translate-i18n>
-                            </span>
-                        </button>
-                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink" ngbDropdownMenu>
-                            <a *ngFor="let route of editor"
-                                href=""
-                                class="dropdown-item"
-                                [ngClass]="{'active': (editorIndex$ | async) === route.index}"
-                                (click)="go($event, route.index); dropdown.close()"
-                                [attr.aria-label]="route.label"
-                                role="button">
-                                <translate-i18n [key]="route.label"></translate-i18n>
-                                <valid-form-icon
-                                    *ngIf="invalidForms.indexOf(route.path) > -1"
-                                    status="INVALID">
-                                </valid-form-icon>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-6 col-lg-3 order-2 text-right">
-                    <button class="btn btn-info"
-                        (click)="save()"
-                        [disabled]="wizardIsInvalid$ | async"
-                        aria-label="Save changes to the metadata source. You will return to the dashboard"
-                        role="button">
-                        <i class="fa fa-fw fa-save"></i>
-                        <translate-i18n key="action.save">Save</translate-i18n>
-                    </button>
-                    &nbsp;
-                    <button class="btn btn-secondary"
-                        (click)="cancel()" aria-label="Cancel changes, go back to dashboard"
-                        role="button">
-                        <translate-i18n key="action.cancel">Cancel</translate-i18n>
-                    </button>
-                </div>
-                <div class="col-xs-12 col-lg-9 order-lg-1 order-3">
-                    <div class="alert alert-danger alert-compact mt-3 mt-lg-0" *ngIf="(wizardIsInvalid$ | async) && (otherPageInvalid$ | async)">
-                        <i class="fa fa-fw fa-exclamation-triangle fa-lg" aria-hidden="true"></i>
-                        <translate-i18n key="message.editor-invalid">All forms must be valid before changes can be saved!</translate-i18n>
-                    </div>
-                </div>
-            </div>
-            <hr />
-            <div class="row">
-                <div class="col-lg-3 d-none d-lg-block">
-                    <nav class="nav nav-pills flex-column" role="navigation">
-                        <a *ngFor="let route of editor"
-                            href=""
-                            class="nav-link"
-                            [ngClass]="{'active': (editorIndex$ | async) === route.index}"
-                            (click)="go($event, route.index)"
-                            role="button"
-                            [attr.aria-label]="route.label">
-                            <translate-i18n [key]="route.label"></translate-i18n>
-                            <valid-form-icon
-                                *ngIf="invalidForms.indexOf(route.path) > -1"
-                                status="INVALID">
-                            </valid-form-icon>
-                        </a>
-                    </nav>
-                </div>
-                <div class="col-lg-9" *ngIf="latest">
-                    <div [ngSwitch]="editorIndex$ | async" class="px-3">
-                        <adv-info-form *ngSwitchDefault [resolver]="latest$ | async" [ids]="ids$"></adv-info-form>
-                        <metadata-ui-form *ngSwitchCase="3" [resolver]="latest$ | async"></metadata-ui-form>
-                        <descriptor-info-form *ngSwitchCase="4" [resolver]="latest$ | async"></descriptor-info-form>
-                        <logout-form *ngSwitchCase="5" [resolver]="latest$ | async"></logout-form>
-                        <key-info-form *ngSwitchCase="6" [resolver]="latest$ | async"></key-info-form>
-                        <assertion-form *ngSwitchCase="7" [resolver]="latest$ | async"></assertion-form>
-                        <div class="row" *ngSwitchCase="8">
-                            <relying-party-form [resolver]="latest$ | async" class="form-section col-xl-6"></relying-party-form>
-                        </div>
-                        <div class="row" *ngSwitchCase="9">
-                            <attribute-release-form [resolver]="latest$ | async" class="form-section col-xl-6"></attribute-release-form>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-</div>
diff --git a/ui/src/app/metadata/resolver/container/editor.component.ts b/ui/src/app/metadata/resolver/container/editor.component.ts
deleted file mode 100644
index 312860f51..000000000
--- a/ui/src/app/metadata/resolver/container/editor.component.ts
+++ /dev/null
@@ -1,187 +0,0 @@
-import {
-    Component,
-    OnInit,
-    OnDestroy
-} from '@angular/core';
-import {
-    ActivatedRoute,
-    Router,
-    ActivatedRouteSnapshot,
-    RouterStateSnapshot
-} from '@angular/router';
-import { Observable, Subject, of } from 'rxjs';
-import { combineLatest, map, takeUntil, withLatestFrom, debounceTime, skipWhile, distinctUntilChanged } from 'rxjs/operators';
-
-import { Store } from '@ngrx/store';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-
-import { MetadataResolver } from '../../domain/model/metadata-resolver';
-import * as fromResolver from '../reducer';
-import { UpdateResolverRequest } from '../action/collection.action';
-
-import { ProviderStatusEmitter, ProviderValueEmitter } from '../../domain/service/provider-change-emitter.service';
-import { UpdateStatus, UpdateChanges, Cancel } from '../action/entity.action';
-import { EDITOR as EditorDef, EditorFlowDefinition } from '../editor-definition.const';
-import { UnsavedDialogComponent } from '../component/unsaved-dialog.component';
-
-
-@Component({
-    selector: 'editor-page',
-    templateUrl: './editor.component.html'
-})
-export class EditorComponent implements OnInit, OnDestroy {
-
-    private ngUnsubscribe: Subject<void> = new Subject<void>();
-
-    unsavedMessage = `You haven't saved your changes!`;
-    modified = false;
-    open = false;
-
-    changes$: Observable<MetadataResolver>;
-    changes: MetadataResolver;
-    updates: MetadataResolver;
-    latest: MetadataResolver;
-    latest$: Observable<MetadataResolver>;
-
-    ids$: Observable<string[]>;
-
-    resolver$: Observable<MetadataResolver>;
-    providerName$: Observable<string>;
-    resolver: MetadataResolver;
-    editorIndex$: Observable<number>;
-    editor$: Observable<any[]>;
-    editor: EditorFlowDefinition[];
-    currentPage$: Observable<any>;
-    invalidForms$: Observable<string[]>;
-    invalidForms: string[];
-    otherPageInvalid$: Observable<boolean>;
-    saving: boolean;
-
-    wizardIsValid$: Observable<boolean>;
-    wizardIsInvalid$: Observable<boolean>;
-
-    constructor(
-        private store: Store<fromResolver.State>,
-        private route: ActivatedRoute,
-        private router: Router,
-        private statusEmitter: ProviderStatusEmitter,
-        private valueEmitter: ProviderValueEmitter,
-        private modalService: NgbModal
-    ) {
-        this.resolver$ = this.store.select(fromResolver.getSelectedResolver);
-        this.changes$ = this.store.select(fromResolver.getEntityChanges);
-
-        this.latest$ = this.resolver$.pipe(
-            combineLatest(this.changes$, (base, changes) => Object.assign({}, base, changes))
-        );
-
-        this.providerName$ = this.resolver$.pipe(map(p => p.serviceProviderName));
-        this.editorIndex$ = this.route.params.pipe(map(params => Number(params.index)));
-        this.currentPage$ = this.editorIndex$.pipe(map(index => EditorDef.find(r => r.index === index)));
-        this.editor = EditorDef;
-        this.store.select(fromResolver.getEntityIsSaving).pipe(
-            takeUntil(this.ngUnsubscribe)
-        ).subscribe(saving => this.saving = saving);
-
-        this.wizardIsValid$ = this.store.select(fromResolver.getEntityIsValid);
-        this.wizardIsInvalid$ = this.wizardIsValid$.pipe(map(valid => !valid));
-
-        this.ids$ = this.store
-            .select(fromResolver.getAllEntityIds)
-            .pipe(
-                takeUntil(this.ngUnsubscribe),
-                combineLatest(this.store.select(fromResolver.getSelectedResolver), (ids: string[], provider: MetadataResolver) => {
-                    return ids.filter(id => provider.entityId !== id);
-                })
-            );
-    }
-
-    save(): void {
-        this.store.dispatch(new UpdateResolverRequest({
-            ...this.latest,
-            ...this.changes,
-            ...this.updates
-        }));
-    }
-
-    cancel(): void {
-        this.store.dispatch(new Cancel());
-    }
-
-    go(event, index: number): void {
-        event.stopPropagation();
-        event.preventDefault();
-        this.store.dispatch(new UpdateChanges(this.updates));
-        this.router.navigate(['../', index], { relativeTo: this.route });
-        this.open = false;
-    }
-
-    ngOnInit(): void {
-        this.resolver$.pipe(
-            takeUntil(this.ngUnsubscribe)
-        ).subscribe(resolver => this.resolver = resolver);
-        this.changes$.pipe(
-            takeUntil(this.ngUnsubscribe)
-        ).subscribe(changes => this.changes = changes);
-
-        this.valueEmitter
-            .changeEmitted$
-            .pipe(
-                takeUntil(this.ngUnsubscribe)
-            )
-            .subscribe(updates => this.updates = updates);
-
-        this.statusEmitter
-            .changeEmitted$
-            .pipe(
-                debounceTime(1),
-                takeUntil(this.ngUnsubscribe),
-                withLatestFrom(this.currentPage$, (status: string, page: any) => {
-                    return { [page.path]: status };
-                })
-            )
-            .subscribe(status => this.store.dispatch(new UpdateStatus(status)));
-
-        this.latest$.pipe(
-            takeUntil(this.ngUnsubscribe),
-            skipWhile(() => this.saving)
-        ).subscribe(latest => this.latest = latest);
-
-        this.invalidForms$ = this.store.select(fromResolver.getInvalidEntityForms);
-
-        this.invalidForms$.pipe(
-            distinctUntilChanged(),
-            takeUntil(this.ngUnsubscribe)
-        ).subscribe(forms => this.invalidForms = forms);
-
-        this.otherPageInvalid$ = this.invalidForms$.pipe(
-            distinctUntilChanged(),
-            withLatestFrom(this.currentPage$, (invalid, current) => invalid.filter(key => key !== current.path)),
-            map(otherInvalid => !!otherInvalid.length)
-        );
-    }
-
-    ngOnDestroy(): void {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-    }
-
-    canDeactivate(
-        currentRoute: ActivatedRouteSnapshot,
-        currentState: RouterStateSnapshot,
-        nextState: RouterStateSnapshot
-    ): Observable<boolean> {
-        if (nextState.url.match('edit')) { return of(true); }
-        if (Object.keys({ ...this.changes }).length > 0) {
-            let modal = this.modalService.open(UnsavedDialogComponent);
-            modal.componentInstance.resolver = this.latest;
-            modal.componentInstance.message = 'editor';
-            modal.componentInstance.action = new Cancel();
-            modal.result.then(
-                () => this.router.navigate([nextState.url]),
-                () => console.warn('denied')
-            );
-        }
-        return this.store.select(fromResolver.getEntityIsSaved);
-    }
-}
diff --git a/ui/src/app/metadata/resolver/container/resolver-edit-step.component.html b/ui/src/app/metadata/resolver/container/resolver-edit-step.component.html
new file mode 100644
index 000000000..5d07730fd
--- /dev/null
+++ b/ui/src/app/metadata/resolver/container/resolver-edit-step.component.html
@@ -0,0 +1,8 @@
+<ng-container *ngIf="definition$ | async">
+    <sf-form
+        [schema]="schema$ | async"
+        [model]="model$ | async"
+        [validators]="validators$ | async"
+        (onChange)="valueChangeSubject.next($event)"
+        (onErrorChange)="statusChangeSubject.next($event)"></sf-form>
+</ng-container>
\ No newline at end of file
diff --git a/ui/src/app/metadata/resolver/container/resolver-edit-step.component.ts b/ui/src/app/metadata/resolver/container/resolver-edit-step.component.ts
new file mode 100644
index 000000000..aa9441e82
--- /dev/null
+++ b/ui/src/app/metadata/resolver/container/resolver-edit-step.component.ts
@@ -0,0 +1,117 @@
+import { Component, OnDestroy } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { Store } from '@ngrx/store';
+
+import * as fromResolver from '../reducer';
+import { UpdateStatus } from '../action/entity.action';
+import { Wizard, WizardStep } from '../../../wizard/model';
+import { MetadataResolver } from '../../domain/model';
+import { LockEditor, UnlockEditor } from '../../../wizard/action/wizard.action';
+
+import * as fromWizard from '../../../wizard/reducer';
+import { withLatestFrom, map, skipWhile, distinctUntilChanged, startWith, combineLatest } from 'rxjs/operators';
+import { UpdateChanges } from '../action/entity.action';
+import { FormControl } from '@angular/forms';
+
+@Component({
+    selector: 'resolver-edit-step',
+    templateUrl: './resolver-edit-step.component.html',
+    styleUrls: []
+})
+export class ResolverEditStepComponent implements OnDestroy {
+    valueChangeSubject = new Subject<Partial<any>>();
+    private valueChangeEmitted$ = this.valueChangeSubject.asObservable();
+
+    statusChangeSubject = new Subject<Partial<any>>();
+    private statusChangeEmitted$ = this.statusChangeSubject.asObservable();
+
+    currentPage: string;
+
+    namesList: string[] = [];
+
+    schema$: Observable<any>;
+    resolver$: Observable<MetadataResolver>;
+    model$: Observable<any>;
+    definition$: Observable<Wizard<MetadataResolver>>;
+    changes$: Observable<MetadataResolver>;
+    step$: Observable<WizardStep>;
+
+    validators$: Observable<{ [key: string]: any }>;
+
+    lock: FormControl = new FormControl(true);
+
+    constructor(
+        private store: Store<fromResolver.ResolverState>
+    ) {
+        this.definition$ = this.store.select(fromWizard.getWizardDefinition);
+        this.changes$ = this.store.select(fromResolver.getEntityChanges);
+        this.resolver$ = this.store.select(fromResolver.getSelectedResolver);
+        this.step$ = this.store.select(fromWizard.getCurrent);
+        this.schema$ = this.store.select(fromWizard.getSchema);
+
+        this.step$.subscribe(s => {
+            if (s && s.locked) {
+                this.store.dispatch(new LockEditor());
+            } else {
+                this.store.dispatch(new UnlockEditor());
+            }
+        });
+
+        this.lock.valueChanges.subscribe(locked => this.store.dispatch(locked ? new LockEditor() : new UnlockEditor()));
+
+        this.validators$ = this.definition$.pipe(
+            withLatestFrom(
+                this.store.select(fromResolver.getAllEntityIds),
+                this.resolver$
+            ),
+            map(([def, ids, resolver]) => def.getValidators(
+                ids.filter(id => id !== resolver.entityId)
+            ))
+        );
+
+        this.model$ = this.schema$.pipe(
+            withLatestFrom(
+                this.store.select(fromResolver.getSelectedResolver),
+                this.store.select(fromWizard.getModel),
+                this.changes$,
+                this.definition$
+            ),
+            map(([schema, resolver, model, changes, definition]) => ({
+                model: {
+                    ...model,
+                    ...resolver,
+                    ...changes
+                },
+                definition
+            })),
+            skipWhile(({ model, definition }) => !definition || !model),
+            map(({ model, definition }) => definition.formatter(model))
+        );
+
+        this.valueChangeEmitted$.pipe(
+            map(changes => changes.value),
+            withLatestFrom(this.definition$, this.store.select(fromResolver.getSelectedResolver)),
+            skipWhile(([changes, definition]) => !definition || !changes),
+            map(([changes, definition, resolver]) => definition.parser({ ...resolver, ...changes }))
+        )
+            .subscribe(changes => this.store.dispatch(new UpdateChanges(changes)));
+
+        this.statusChangeEmitted$
+            .pipe(distinctUntilChanged())
+            .subscribe(errors => {
+                this.updateStatus(errors);
+            });
+
+        this.store.select(fromWizard.getWizardIndex).subscribe(i => this.currentPage = i);
+    }
+
+    updateStatus(errors: any): void {
+        const status = { [this.currentPage]: !(errors.value) ? 'VALID' : 'INVALID' };
+        this.store.dispatch(new UpdateStatus(status));
+    }
+
+    ngOnDestroy() {
+        this.valueChangeSubject.complete();
+    }
+}
+
diff --git a/ui/src/app/metadata/resolver/container/resolver-edit.component.html b/ui/src/app/metadata/resolver/container/resolver-edit.component.html
new file mode 100644
index 000000000..91ecb0423
--- /dev/null
+++ b/ui/src/app/metadata/resolver/container/resolver-edit.component.html
@@ -0,0 +1,62 @@
+<section class="section" [attr.aria-label]="'Edit metadata provider - ' + (resolver$ | async).serviceProviderName" tabindex="0">
+    <div class="section-header bg-info p-2 text-white">
+        <div class="row justify-content-between">
+            <div class="col-md-12">
+                <span class="display-6">
+                    <i class="fa fa-fw fa-gears"></i> Edit Metadata Resolver - {{ (resolver$ | async).serviceProviderName }}
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="section-body p-4 border border-top-0 border-info">
+        <div class="row">
+            <div class="col-6 d-lg-none order-1">
+                <editor-nav
+                    [format]="formats.DROPDOWN"
+                    [status]="status$ | async"
+                    (onPageSelect)="setIndex($event)">
+                </editor-nav>
+            </div>
+            <div class="col-6 col-lg-3 order-2 text-right">
+                <button class="btn btn-info"
+                    (click)="save()"
+                    [disabled]="(isInvalid$ | async) || (isSaving$ | async)"
+                    aria-label="Save changes to the metadata source. You will return to the dashboard"
+                    role="button">
+                    <i class="fa fa-fw fa-lg" [ngClass]="{
+                        'fa-save': !(isSaving$ | async),
+                        'fa-spinner': (isSaving$ | async),
+                        'fa-pulse': (isSaving$ | async)
+                    }"></i>
+                    <translate-i18n key="action.save">Save</translate-i18n>
+                </button>
+                &nbsp;
+                <button class="btn btn-secondary"
+                    (click)="cancel()" aria-label="Cancel changes, go back to dashboard"
+                    role="button">
+                    <translate-i18n key="action.cancel">Cancel</translate-i18n>
+                </button>
+            </div>
+            <div class="col-xs-12 col-lg-9 order-lg-1 order-3">
+                <div class="alert alert-danger alert-compact mt-3 mt-lg-0"
+                    *ngIf="(isInvalid$ | async)">
+                    <i class="fa fa-fw fa-exclamation-triangle fa-lg" aria-hidden="true"></i>
+                    <translate-i18n key="message.editor-invalid">All forms must be valid before changes can be saved!</translate-i18n>
+                </div>
+            </div>
+        </div>
+        <hr />
+        <div class="row">
+            <div class="col-lg-3 d-none d-lg-block">
+                <editor-nav
+                    [format]="formats.TABS"
+                    [status]="status$ | async"
+                    (onPageSelect)="setIndex($event)">
+                </editor-nav>
+            </div>
+            <div class="col-lg-9">
+                <router-outlet></router-outlet>
+            </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/ui/src/app/metadata/resolver/container/resolver-edit.component.ts b/ui/src/app/metadata/resolver/container/resolver-edit.component.ts
new file mode 100644
index 000000000..1de850407
--- /dev/null
+++ b/ui/src/app/metadata/resolver/container/resolver-edit.component.ts
@@ -0,0 +1,125 @@
+import { Component, OnDestroy } from '@angular/core';
+import { Router, ActivatedRoute, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { Observable, of } from 'rxjs';
+import { skipWhile, map, combineLatest } from 'rxjs/operators';
+import { Store } from '@ngrx/store';
+import * as fromWizard from '../../../wizard/reducer';
+import * as fromResolver from '../reducer';
+import { ClearWizard, SetIndex, LoadSchemaRequest } from '../../../wizard/action/wizard.action';
+import { MetadataResolver } from '../../domain/model';
+import { Clear } from '../action/entity.action';
+import { Wizard } from '../../../wizard/model';
+import { UpdateResolverRequest } from '../action/collection.action';
+import { NgbModal } from '../../../../../node_modules/@ng-bootstrap/ng-bootstrap';
+import { CanComponentDeactivate } from '../../../core/service/can-deactivate.guard';
+import { DifferentialService } from '../../../core/service/differential.service';
+import { NAV_FORMATS } from '../../domain/component/editor-nav.component';
+import { UnsavedEntityComponent } from '../../domain/component/unsaved-entity.dialog';
+
+@Component({
+    selector: 'resolver-edit',
+    templateUrl: './resolver-edit.component.html',
+    styleUrls: []
+})
+
+export class ResolverEditComponent implements OnDestroy, CanComponentDeactivate {
+
+    resolver$: Observable<MetadataResolver>;
+    definition$: Observable<Wizard<MetadataResolver>>;
+    index$: Observable<string>;
+
+    valid$: Observable<boolean>;
+    isInvalid$: Observable<boolean>;
+    status$: Observable<any>;
+    isSaving$: Observable<boolean>;
+
+    latest: MetadataResolver;
+    resolver: MetadataResolver;
+
+    formats = NAV_FORMATS;
+
+    constructor(
+        private store: Store<fromResolver.ResolverState>,
+        private router: Router,
+        private route: ActivatedRoute,
+        private modalService: NgbModal,
+        private diffService: DifferentialService
+    ) {
+        this.resolver$ = this.store.select(fromResolver.getSelectedResolver).pipe(skipWhile(d => !d));
+        this.definition$ = this.store.select(fromWizard.getWizardDefinition).pipe(skipWhile(d => !d));
+        this.index$ = this.store.select(fromWizard.getWizardIndex).pipe(skipWhile(i => !i));
+        this.valid$ = this.store.select(fromResolver.getEntityIsValid);
+        this.isInvalid$ = this.valid$.pipe(map(v => !v));
+        this.status$ = this.store.select(fromResolver.getInvalidEntityForms);
+        this.isSaving$ = this.store.select(fromResolver.getEntityIsSaving);
+
+        let startIndex$ = this.route.firstChild ?
+            this.route.firstChild.params.pipe(map(p => p.form)) :
+            this.definition$.pipe(map(d => d.steps[0].id));
+
+        startIndex$
+            .subscribe(index => {
+                this.store.dispatch(new SetIndex(index));
+            });
+
+        this.index$.subscribe(id => this.go(id));
+
+        this.store
+            .select(fromWizard.getCurrentWizardSchema)
+            .pipe(skipWhile(s => !s))
+            .subscribe(s => this.store.dispatch(new LoadSchemaRequest(s)));
+
+        this.resolver$.subscribe(p => this.resolver = p);
+        this.store.select(fromResolver.getEntityChanges).subscribe(changes => this.latest = changes);
+    }
+
+    go(id: string): void {
+        this.router.navigate(['./', id], { relativeTo: this.route });
+    }
+
+    setIndex(id: string): void {
+        this.store.dispatch(new SetIndex(id));
+    }
+
+    ngOnDestroy() {
+        this.clear();
+    }
+
+    clear(): void {
+        this.store.dispatch(new ClearWizard());
+        this.store.dispatch(new Clear());
+    }
+
+    save(): void {
+        this.store.dispatch(new UpdateResolverRequest(this.latest));
+    }
+
+    cancel(): void {
+        this.clear();
+        this.router.navigate(['metadata', 'manager', 'resolvers']);
+    }
+
+    canDeactivate(
+        currentRoute: ActivatedRouteSnapshot,
+        currentState: RouterStateSnapshot,
+        nextState: RouterStateSnapshot
+    ): Observable<boolean> {
+        if (nextState.url.match('edit')) {
+            return of(true);
+        }
+        const diff = this.diffService.updatedDiff(this.resolver, this.latest);
+        if (diff && Object.keys(diff).length > 0) {
+            let modal = this.modalService.open(UnsavedEntityComponent);
+            modal.result.then(
+                () => {
+                    this.clear();
+                    this.router.navigate([nextState.url]);
+                },
+                () => console.warn('denied')
+            );
+            return this.store.select(fromResolver.getEntityIsSaved);
+        }
+        return of(true);
+    }
+}
+
diff --git a/ui/src/app/metadata/resolver/container/resolver-select.component.html b/ui/src/app/metadata/resolver/container/resolver-select.component.html
new file mode 100644
index 000000000..920eff1e8
--- /dev/null
+++ b/ui/src/app/metadata/resolver/container/resolver-select.component.html
@@ -0,0 +1,3 @@
+<ng-container *ngIf="resolver$ | async">
+    <router-outlet></router-outlet>
+</ng-container>
\ No newline at end of file
diff --git a/ui/src/app/metadata/resolver/container/resolver-select.component.ts b/ui/src/app/metadata/resolver/container/resolver-select.component.ts
new file mode 100644
index 000000000..c30396559
--- /dev/null
+++ b/ui/src/app/metadata/resolver/container/resolver-select.component.ts
@@ -0,0 +1,52 @@
+import { Component, OnDestroy, Inject } from '@angular/core';
+import { Subscription, Observable } from 'rxjs';
+import { Store } from '@ngrx/store';
+
+import { ActivatedRoute } from '@angular/router';
+import { map, distinctUntilChanged, skipWhile } from 'rxjs/operators';
+import { SelectResolver } from '../action/collection.action';
+import * as fromResolvers from '../reducer';
+import { MetadataResolver } from '../../domain/model';
+import { SetDefinition, ClearWizard } from '../../../wizard/action/wizard.action';
+import { Clear } from '../action/entity.action';
+import { METADATA_SOURCE_EDITOR } from '../wizard-definition';
+import { Wizard } from '../../../wizard/model';
+
+@Component({
+    selector: 'resolver-select',
+    templateUrl: './resolver-select.component.html',
+    styleUrls: []
+})
+
+export class ResolverSelectComponent implements OnDestroy {
+    actionsSubscription: Subscription;
+
+    resolver$: Observable<MetadataResolver>;
+
+    constructor(
+        private store: Store<fromResolvers.State>,
+        private route: ActivatedRoute,
+        @Inject(METADATA_SOURCE_EDITOR) private sourceWizard: Wizard<MetadataResolver>
+    ) {
+        this.actionsSubscription = this.route.params.pipe(
+            map(params => new SelectResolver(params.id))
+        ).subscribe(store);
+
+        this.resolver$ = this.store.select(fromResolvers.getSelectedResolver).pipe(skipWhile(p => !p));
+
+        this.resolver$.subscribe(resolver => this.setDefinition(resolver));
+    }
+
+    setDefinition(resolver: MetadataResolver): void {
+        if (resolver) {
+            this.store.dispatch(new SetDefinition(this.sourceWizard));
+        }
+    }
+
+    ngOnDestroy() {
+        this.actionsSubscription.unsubscribe();
+        this.store.dispatch(new Clear());
+        this.store.dispatch(new ClearWizard());
+    }
+}
+
diff --git a/ui/src/app/metadata/resolver/container/resolver-wizard-step.component.ts b/ui/src/app/metadata/resolver/container/resolver-wizard-step.component.ts
index 478d569f4..cddb8e5b0 100644
--- a/ui/src/app/metadata/resolver/container/resolver-wizard-step.component.ts
+++ b/ui/src/app/metadata/resolver/container/resolver-wizard-step.component.ts
@@ -78,7 +78,7 @@ export class ResolverWizardStepComponent implements OnDestroy {
             map(([changes, original]) => ({ ...original, ...changes }))
         )
         .subscribe(changes => {
-            if (changes.resourceId) {
+            if (changes.id) {
                 this.store.dispatch(new UpdateChanges(changes));
             }
         });
diff --git a/ui/src/app/metadata/resolver/container/resolver.component.html b/ui/src/app/metadata/resolver/container/resolver.component.html
deleted file mode 100644
index 90c6b6463..000000000
--- a/ui/src/app/metadata/resolver/container/resolver.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<router-outlet></router-outlet>
\ No newline at end of file
diff --git a/ui/src/app/metadata/resolver/container/resolver.component.scss b/ui/src/app/metadata/resolver/container/resolver.component.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/ui/src/app/metadata/resolver/container/resolver.component.spec.ts b/ui/src/app/metadata/resolver/container/resolver.component.spec.ts
deleted file mode 100644
index cbdb329c1..000000000
--- a/ui/src/app/metadata/resolver/container/resolver.component.spec.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { TestBed, ComponentFixture } from '@angular/core/testing';
-import { ReactiveFormsModule } from '@angular/forms';
-import { APP_BASE_HREF } from '@angular/common';
-import { RouterModule, ActivatedRoute } from '@angular/router';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { StoreModule, Store, combineReducers } from '@ngrx/store';
-import { ResolverComponent } from './resolver.component';
-import * as fromCollections from '../reducer';
-import { ActivatedRouteStub } from '../../../../testing/activated-route.stub';
-import { MockI18nModule } from '../../../../testing/i18n.stub';
-
-describe('Resolver Select (Editor) Page', () => {
-    let fixture: ComponentFixture<ResolverComponent>;
-    let store: Store<fromCollections.State>;
-    let instance: ResolverComponent;
-    let activatedRoute: ActivatedRouteStub = new ActivatedRouteStub();
-    activatedRoute.testParamMap = { id: 'foo' };
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            providers: [
-                { provide: ActivatedRoute, useValue: activatedRoute },
-                { provide: APP_BASE_HREF, useValue: '/' }
-            ],
-            imports: [
-                NoopAnimationsModule,
-                StoreModule.forRoot({
-                    collections: combineReducers(fromCollections.reducers),
-                }),
-                ReactiveFormsModule,
-                RouterModule.forRoot([]),
-                MockI18nModule
-            ],
-            declarations: [ResolverComponent],
-        });
-
-        fixture = TestBed.createComponent(ResolverComponent);
-        instance = fixture.componentInstance;
-        store = TestBed.get(Store);
-
-        spyOn(store, 'dispatch').and.callThrough();
-    });
-
-    it('should compile', () => {
-        fixture.detectChanges();
-
-        expect(fixture).toBeDefined();
-    });
-});
diff --git a/ui/src/app/metadata/resolver/container/resolver.component.ts b/ui/src/app/metadata/resolver/container/resolver.component.ts
deleted file mode 100644
index 8cac5c479..000000000
--- a/ui/src/app/metadata/resolver/container/resolver.component.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { Subscription } from 'rxjs';
-import { distinctUntilChanged, map } from 'rxjs/operators';
-
-import { Store } from '@ngrx/store';
-import { NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
-
-import { SelectResolver } from '../action/collection.action';
-import * as fromProviders from '../reducer';
-
-@Component({
-    selector: 'resolver-page',
-    templateUrl: './resolver.component.html',
-    styleUrls: ['./resolver.component.scss'],
-    providers: [NgbPopoverConfig]
-})
-export class ResolverComponent implements OnDestroy {
-    actionsSubscription: Subscription;
-
-    constructor(
-        store: Store<fromProviders.State>,
-        route: ActivatedRoute
-    ) {
-        this.actionsSubscription = route.params.pipe(
-            distinctUntilChanged(),
-            map(params => new SelectResolver(params.id))
-        ).subscribe(store);
-    }
-
-    ngOnDestroy() {
-        this.actionsSubscription.unsubscribe();
-    }
-} /* istanbul ignore next */
diff --git a/ui/src/app/metadata/resolver/effect/draft-collection.effects.ts b/ui/src/app/metadata/resolver/effect/draft-collection.effects.ts
index e731d4070..024c923eb 100644
--- a/ui/src/app/metadata/resolver/effect/draft-collection.effects.ts
+++ b/ui/src/app/metadata/resolver/effect/draft-collection.effects.ts
@@ -79,7 +79,7 @@ export class DraftCollectionEffects {
                 .update(provider)
                 .pipe(
                     map(p => new actions.UpdateDraftSuccess({
-                        id: p.resourceId,
+                        id: p.id,
                         changes: p
                     }))
                 );
@@ -94,7 +94,7 @@ export class DraftCollectionEffects {
             this.draftService
                 .find(id)
                 .pipe(
-                    map(p => new SelectDraftSuccess(p.resourceId)),
+                    map(p => new SelectDraftSuccess(p.id)),
                     catchError(e => of(new SelectDraftError()))
                 )
         )
@@ -113,9 +113,9 @@ export class DraftCollectionEffects {
         map(getPayload),
         switchMap(id =>
             this.draftService
-                .save({ resourceId: `r-${ Date.now() }`, serviceProviderName: '' })
+                .save({ id: `r-${ Date.now() }`, serviceProviderName: '' })
                 .pipe(
-                    map(p => new SelectDraftRequest(p.resourceId)),
+                    map(p => new SelectDraftRequest(p.id)),
                     catchError(e => of(new SelectDraftError()))
                 )
         ),
diff --git a/ui/src/app/metadata/resolver/reducer/draft.reducer.ts b/ui/src/app/metadata/resolver/reducer/draft.reducer.ts
index d49cabf38..d3e723f0d 100644
--- a/ui/src/app/metadata/resolver/reducer/draft.reducer.ts
+++ b/ui/src/app/metadata/resolver/reducer/draft.reducer.ts
@@ -8,7 +8,7 @@ export interface DraftState extends EntityState<MetadataResolver> {
 }
 
 export const adapter: EntityAdapter<MetadataResolver> = createEntityAdapter<MetadataResolver>({
-    selectId: (model: MetadataResolver) => model.resourceId
+    selectId: (model: MetadataResolver) => model.id
 });
 
 export const initialState: DraftState = adapter.getInitialState({
@@ -29,7 +29,7 @@ export function reducer(state = initialState, action: DraftActionsUnion): DraftS
         }
 
         case DraftActionTypes.REMOVE_DRAFT_SUCCESS: {
-            return adapter.removeOne(action.payload.resourceId, state);
+            return adapter.removeOne(action.payload.id, state);
         }
 
         case DraftActionTypes.SELECT_SUCCESS: {
diff --git a/ui/src/app/metadata/resolver/resolver.module.ts b/ui/src/app/metadata/resolver/resolver.module.ts
index 468c02e46..cdba38585 100644
--- a/ui/src/app/metadata/resolver/resolver.module.ts
+++ b/ui/src/app/metadata/resolver/resolver.module.ts
@@ -13,7 +13,6 @@ import { ProviderEditorFormModule } from '../domain/component';
 import { UploadResolverComponent } from './container/upload-resolver.component';
 import { BlankResolverComponent } from './container/blank-resolver.component';
 import { CopyResolverComponent } from './container/copy-resolver.component';
-import { ResolverComponent } from './container/resolver.component';
 import { SharedModule } from '../../shared/shared.module';
 import { SearchIdEffects } from './effect/search.effect';
 import * as fromResolver from './reducer';
@@ -21,8 +20,6 @@ import { ConfirmCopyComponent } from './container/confirm-copy.component';
 import { CopyIsSetGuard } from './guard/copy-isset.guard';
 import { CopyResolverEffects } from './effect/copy.effect';
 import { DomainModule } from '../domain/domain.module';
-import { DraftComponent } from './container/draft.component';
-import { EditorComponent } from './container/editor.component';
 import { ResolverWizardComponent } from './container/resolver-wizard.component';
 import { WizardNavComponent } from './component/wizard-nav.component';
 import { ResolverCollectionEffects } from './effect/collection.effects';
@@ -31,11 +28,15 @@ import { WizardEffects } from './effect/wizard.effect';
 import { UnsavedDialogComponent } from './component/unsaved-dialog.component';
 import { I18nModule } from '../../i18n/i18n.module';
 import { MetadataSourceWizard } from '../domain/model/wizards/metadata-source-wizard';
-import { METADATA_SOURCE_WIZARD } from './wizard-definition';
+import { METADATA_SOURCE_WIZARD, METADATA_SOURCE_EDITOR } from './wizard-definition';
 import { EntityEffects } from './effect/entity.effect';
 import { ResolverWizardStepComponent } from './container/resolver-wizard-step.component';
 import { WizardModule } from '../../wizard/wizard.module';
 import { FormModule } from '../../schema-form/schema-form.module';
+import { ResolverEditComponent } from './container/resolver-edit.component';
+import { ResolverEditStepComponent } from './container/resolver-edit-step.component';
+import { ResolverSelectComponent } from './container/resolver-select.component';
+import { MetadataSourceEditor } from '../domain/model/wizards/metadata-source-editor';
 
 @NgModule({
     declarations: [
@@ -44,9 +45,9 @@ import { FormModule } from '../../schema-form/schema-form.module';
         BlankResolverComponent,
         CopyResolverComponent,
         ConfirmCopyComponent,
-        ResolverComponent,
-        DraftComponent,
-        EditorComponent,
+        ResolverEditComponent,
+        ResolverEditStepComponent,
+        ResolverSelectComponent,
         WizardNavComponent,
         UnsavedDialogComponent,
         ResolverWizardComponent,
@@ -100,7 +101,8 @@ export class ResolverModule {
         ])
     ],
     providers: [
-        { provide: METADATA_SOURCE_WIZARD, useClass: MetadataSourceWizard }
+        { provide: METADATA_SOURCE_WIZARD, useClass: MetadataSourceWizard },
+        { provide: METADATA_SOURCE_EDITOR, useClass: MetadataSourceEditor }
     ]
 })
 export class RootResolverModule { }
diff --git a/ui/src/app/metadata/resolver/resolver.routing.ts b/ui/src/app/metadata/resolver/resolver.routing.ts
index 885851148..2d0db5510 100644
--- a/ui/src/app/metadata/resolver/resolver.routing.ts
+++ b/ui/src/app/metadata/resolver/resolver.routing.ts
@@ -1,11 +1,7 @@
 import { Routes } from '@angular/router';
 
-import { ResolverComponent } from './container/resolver.component';
-import { EditorComponent } from './container/editor.component';
-import { DraftComponent } from './container/draft.component';
 import { ResolverWizardComponent } from './container/resolver-wizard.component';
 
-import { BlankResolverComponent } from './container/blank-resolver.component';
 import { NewResolverComponent } from './container/new-resolver.component';
 import { UploadResolverComponent } from './container/upload-resolver.component';
 import { CopyResolverComponent } from './container/copy-resolver.component';
@@ -14,6 +10,9 @@ import { CopyIsSetGuard } from './guard/copy-isset.guard';
 
 import { CanDeactivateGuard } from '../../core/service/can-deactivate.guard';
 import { ResolverWizardStepComponent } from './container/resolver-wizard-step.component';
+import { ResolverEditComponent } from './container/resolver-edit.component';
+import { ResolverEditStepComponent } from './container/resolver-edit-step.component';
+import { ResolverSelectComponent } from './container/resolver-select.component';
 
 export const ResolverRoutes: Routes = [
     {
@@ -54,27 +53,19 @@ export const ResolverRoutes: Routes = [
             },
             {
                 path: ':id',
-                component: ResolverComponent,
+                component: ResolverSelectComponent,
                 canActivate: [],
                 children: [
-                    { path: 'edit', redirectTo: 'edit/2' },
                     {
-                        path: 'edit/:index',
-                        component: EditorComponent,
-                        canDeactivate: [CanDeactivateGuard]
-                    }
-                ]
-            },
-            {
-                path: ':entityId',
-                component: DraftComponent,
-                canActivate: [],
-                children: [
-                    { path: 'wizard', redirectTo: 'wizard/2' },
-                    {
-                        path: 'wizard/:index',
-                        component: ResolverWizardComponent,
-                        canDeactivate: [CanDeactivateGuard]
+                        path: 'edit',
+                        component: ResolverEditComponent,
+                        children: [
+                            {
+                                path: ':form',
+                                component: ResolverEditStepComponent,
+                                canDeactivate: [CanDeactivateGuard]
+                            }
+                        ]
                     }
                 ]
             }
diff --git a/ui/src/app/metadata/resolver/wizard-definition.ts b/ui/src/app/metadata/resolver/wizard-definition.ts
index 74e15df28..2bd4c8122 100644
--- a/ui/src/app/metadata/resolver/wizard-definition.ts
+++ b/ui/src/app/metadata/resolver/wizard-definition.ts
@@ -3,3 +3,4 @@ import { Wizard } from '../../wizard/model';
 import { MetadataResolver } from '../domain/model';
 
 export const METADATA_SOURCE_WIZARD = new InjectionToken<Wizard<MetadataResolver>>('METADATA_SOURCE_WIZARD');
+export const METADATA_SOURCE_EDITOR = new InjectionToken<Wizard<MetadataResolver>>('METADATA_SOURCE_EDITOR');
diff --git a/ui/src/app/schema-form/widget/object/object.component.html b/ui/src/app/schema-form/widget/object/object.component.html
index 83a1f90c9..427cf462b 100644
--- a/ui/src/app/schema-form/widget/object/object.component.html
+++ b/ui/src/app/schema-form/widget/object/object.component.html
@@ -1,4 +1,4 @@
-<div class="container-fluid">
+<div class="">
     <div class="row">
         <ng-container *ngFor="let fieldset of formProperty.schema.fieldsets; let i = index;">
             <fieldset