diff --git a/ui/src/app/core/reducer/configuration.reducer.spec.ts b/ui/src/app/core/reducer/configuration.reducer.spec.ts
new file mode 100644
index 000000000..e8e8a802e
--- /dev/null
+++ b/ui/src/app/core/reducer/configuration.reducer.spec.ts
@@ -0,0 +1,35 @@
+import { reducer } from './configuration.reducer';
+import * as fromConfiguration from './configuration.reducer';
+import * as actions from '../action/configuration.action';
+
+describe('Configuration Reducer', () => {
+    const initialState: fromConfiguration.ConfigState = {
+        roles: []
+    };
+
+    describe('undefined action', () => {
+        it('should return the default state', () => {
+            const result = reducer(undefined, {} as any);
+            expect(result).toEqual(initialState);
+        });
+    });
+
+    describe('Role Load Request', () => {
+        it('should set fetching to true', () => {
+            const action = new actions.LoadRoleSuccess(['ADMIN']);
+            const result = reducer(initialState, action);
+            expect(result).toEqual(
+                {
+                    ...initialState,
+                    roles: ['ADMIN']
+                }
+            );
+        });
+    });
+
+    describe('selector functions', () => {
+        it('should return the roles from state', () => {
+            expect(fromConfiguration.getRoles(initialState)).toEqual([]);
+        });
+    });
+});
diff --git a/ui/src/app/core/reducer/index.spec.ts b/ui/src/app/core/reducer/index.spec.ts
index f14a08006..5a1fbef3e 100644
--- a/ui/src/app/core/reducer/index.spec.ts
+++ b/ui/src/app/core/reducer/index.spec.ts
@@ -10,7 +10,6 @@ describe('Core index reducers', () => {
         version: fromVersion.initialState as fromVersion.VersionState,
         config: fromConfig.initialState as fromConfig.ConfigState
     };
-
     describe('getUserStateFn function', () => {
         it('should return the user state', () => {
             expect(fromIndex.getUserStateFn(state)).toEqual(state.user);
@@ -21,4 +20,21 @@ describe('Core index reducers', () => {
             expect(fromIndex.getVersionStateFn(state)).toEqual(state.version);
         });
     });
+    describe('getConfigStateFn function', () => {
+        it('should return the config state', () => {
+            expect(fromIndex.getConfigStateFn(state)).toEqual(state.config);
+        });
+    });
+    describe('filterRolesFn', () => {
+        it('should return the roles that are not `non roles`', () => {
+            expect(fromIndex.filterRolesFn(['ROLE_ADMIN', 'ROLE_NONE'])).toEqual(['ROLE_ADMIN']);
+        });
+    });
+    describe('isUserAdminFn', () => {
+        it('should check if the provided user has the ROLE_ADMIN role', () => {
+            expect(fromIndex.isUserAdminFn({role: 'ROLE_ADMIN'})).toBe(true);
+            expect(fromIndex.isUserAdminFn({role: 'ROLE_USER'})).toBe(false);
+            expect(fromIndex.isUserAdminFn(null)).toBe(false);
+        });
+    });
 });
diff --git a/ui/src/app/core/reducer/index.ts b/ui/src/app/core/reducer/index.ts
index f2d64e934..f5e5b94c2 100644
--- a/ui/src/app/core/reducer/index.ts
+++ b/ui/src/app/core/reducer/index.ts
@@ -40,7 +40,7 @@ export const getVersionLoading = createSelector(getVersionState, fromVersion.get
 export const getVersionError = createSelector(getVersionState, fromVersion.getVersionError);
 
 export const filterRolesFn = (roles: string[]) => roles.filter(r => r !== 'ROLE_NONE');
-export const isUserAdminFn = (user) => user ? user.role === 'ROLE_ADMIN' : null;
+export const isUserAdminFn = (user) => user ? user.role === 'ROLE_ADMIN' : false;
 
 export const getConfigState = createSelector(getCoreFeature, getConfigStateFn);
 export const getRoles = createSelector(getConfigState, fromConfig.getRoles);
diff --git a/ui/src/app/metadata/configuration/component/array-property.component.html b/ui/src/app/metadata/configuration/component/array-property.component.html
index c2f976657..d51a8e0fb 100644
--- a/ui/src/app/metadata/configuration/component/array-property.component.html
+++ b/ui/src/app/metadata/configuration/component/array-property.component.html
@@ -13,7 +13,7 @@
                         container="body"
                         [ngStyle]="{'width': width}"
                         class="text-truncate"
-                        popoverClass="popover-lg">
+                        popoverClass="popover-lg popover-info">
                         {{ version[i][prop] }}
                     </div>
                     <div *ngIf="!version[i]" [ngStyle]="{'width': width}">
@@ -59,7 +59,7 @@
                 class="list-unstyled py-2 m-0"
                 [ngbPopover]="popContent"
                 triggers="mouseenter:mouseleave"
-                popoverClass="popover-lg"
+                popoverClass="popover-lg popover-info"
                 *ngIf="v && v.length > 0">
                 <li *ngFor="let item of v; odd as isOdd" class="text-truncate" [ngClass]="{'bg-light': isOdd, 'py-2': v.length > 1}">
                     <ng-container *ngIf="preview.observers.length > 0 && isUrl(item)">
diff --git a/ui/src/app/metadata/configuration/component/filter-configuration-list-item.component.html b/ui/src/app/metadata/configuration/component/filter-configuration-list-item.component.html
index a08d9de7a..42ed9652e 100644
--- a/ui/src/app/metadata/configuration/component/filter-configuration-list-item.component.html
+++ b/ui/src/app/metadata/configuration/component/filter-configuration-list-item.component.html
@@ -38,7 +38,8 @@
         [editable]="false"
         [configuration]="configuration"
         [entity]="filter"
-        [definition]="definition"></metadata-configuration>
+        [definition]="definition"
+        (preview)="onPreview($event)"></metadata-configuration>
     <button class="btn btn-link btn-sm" (click)="open = !open" [disabled]="isLast">
         <i class="fa fa-chevron-up sr-hidden"></i>&nbsp;
         <span translate="action.close">Close</span>
diff --git a/ui/src/app/metadata/configuration/component/filter-configuration-list-item.component.ts b/ui/src/app/metadata/configuration/component/filter-configuration-list-item.component.ts
index fc008952b..ede42a55a 100644
--- a/ui/src/app/metadata/configuration/component/filter-configuration-list-item.component.ts
+++ b/ui/src/app/metadata/configuration/component/filter-configuration-list-item.component.ts
@@ -1,8 +1,11 @@
 import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { Store } from '@ngrx/store';
 import { MetadataFilter } from '../../domain/model';
 import { MetadataConfigurationService } from '../service/configuration.service';
-import { Wizard } from '../../../wizard/model';
 import { MetadataConfiguration } from '../model/metadata-configuration';
+import { PreviewEntity } from '../../domain/action/entity.action';
+import { Metadata } from '../../domain/domain.type';
+import * as fromRoot from '../../../app.reducer';
 
 @Component({
     selector: 'filter-configuration-list-item',
@@ -23,9 +26,17 @@ export class FilterConfigurationListItemComponent implements OnChanges {
     definition: any;
 
     constructor(
-        private configService: MetadataConfigurationService
+        private configService: MetadataConfigurationService,
+        private store: Store<fromRoot.State>
     ) {}
 
+    onPreview($event: { data: any, parent: Metadata }): void {
+        this.store.dispatch(new PreviewEntity({
+            id: $event.data,
+            entity: this.definition.getEntity($event.parent)
+        }));
+    }
+
     ngOnChanges(changes: SimpleChanges): void {
         if (changes.filter) {
             this.definition = this.configService.getDefinition(this.filter['@type']);
diff --git a/ui/src/app/metadata/configuration/component/filter-target-property.component.spec.ts b/ui/src/app/metadata/configuration/component/filter-target-property.component.spec.ts
index e69de29bb..98c08d4c4 100644
--- a/ui/src/app/metadata/configuration/component/filter-target-property.component.spec.ts
+++ b/ui/src/app/metadata/configuration/component/filter-target-property.component.spec.ts
@@ -0,0 +1,66 @@
+import { Component, ViewChild } from '@angular/core';
+import { TestBed, async, ComponentFixture } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
+import { Property } from '../../domain/model/property';
+import { MockI18nModule } from '../../../../testing/i18n.stub';
+import { SCHEMA } from '../../../../testing/form-schema.stub';
+import { getStepProperty } from '../../domain/utility/configuration';
+import { FilterTargetPropertyComponent } from './filter-target-property.component';
+import { PrimitivePropertyComponent } from './primitive-property.component';
+import { ArrayPropertyComponentStub, PrimitivePropertyComponentStub } from '../../../../testing/property-component.stub';
+import { AttributesService } from '../../domain/service/attributes.service';
+import { of } from 'rxjs';
+
+@Component({
+    template: `
+        <filter-target-property [property]="property"></filter-target-property>
+    `
+})
+class TestHostComponent {
+    @ViewChild(FilterTargetPropertyComponent)
+    public componentUnderTest: FilterTargetPropertyComponent;
+
+    property: Property = getStepProperty(SCHEMA.properties.formatFilterTarget, {
+        formatFilterTargetType: 'ENTITY_ID',
+        value: [
+            'foo',
+            'bar',
+            'baz'
+        ]
+    }, SCHEMA.definitions);
+}
+
+describe('Filter Target Property Component', () => {
+
+    let fixture: ComponentFixture<TestHostComponent>;
+    let instance: TestHostComponent;
+    let app: FilterTargetPropertyComponent;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                NgbPopoverModule,
+                MockI18nModule,
+                RouterTestingModule
+            ],
+            declarations: [
+                FilterTargetPropertyComponent,
+                PrimitivePropertyComponentStub,
+                ArrayPropertyComponentStub,
+                TestHostComponent
+            ],
+            providers: []
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(TestHostComponent);
+        instance = fixture.componentInstance;
+        app = instance.componentUnderTest;
+        fixture.detectChanges();
+    }));
+
+    it('should accept a property input', async(() => {
+        expect(app).toBeTruthy();
+    }));
+});
diff --git a/ui/src/app/metadata/configuration/component/history-list.component.html b/ui/src/app/metadata/configuration/component/history-list.component.html
index 2983c151c..82a275060 100644
--- a/ui/src/app/metadata/configuration/component/history-list.component.html
+++ b/ui/src/app/metadata/configuration/component/history-list.component.html
@@ -21,9 +21,9 @@
                     </label>
                 </div>
             </td>
-            <td *ngIf="i === 0"><translate-i18n key="label.current">Current</translate-i18n> (v{{ i + 1 }})</td>
-            <td *ngIf="i > 0">v{{ i + 1 }}</td>
-            <td>{{ version.date | date }}</td>
+            <td *ngIf="i === 0"><translate-i18n key="label.current">Current</translate-i18n> (v{{ history.length - i }})</td>
+            <td *ngIf="i > 0">v{{ history.length - (i) }}</td>
+            <td>{{ version.date | date:'medium' }}</td>
             <td>{{ version.creator }}</td>
             <td>
                 <button class="btn btn-link" (click)="restore.emit(version)">
diff --git a/ui/src/app/metadata/configuration/component/metadata-configuration.component.html b/ui/src/app/metadata/configuration/component/metadata-configuration.component.html
index d26fb0dd1..6f4628c75 100644
--- a/ui/src/app/metadata/configuration/component/metadata-configuration.component.html
+++ b/ui/src/app/metadata/configuration/component/metadata-configuration.component.html
@@ -31,7 +31,7 @@ <h2 class="title h4 m-0 flex-grow-1">
                     *ngIf="section"
                     [property]="section"
                     [columns]="configuration.dates.length"
-                    (preview)="preview.emit($event)">
+                    (preview)="onPreview($event)">
                 </object-property>
             </div>
         </div>
diff --git a/ui/src/app/metadata/configuration/component/metadata-configuration.component.ts b/ui/src/app/metadata/configuration/component/metadata-configuration.component.ts
index 10ec0eed8..86e8bd23b 100644
--- a/ui/src/app/metadata/configuration/component/metadata-configuration.component.ts
+++ b/ui/src/app/metadata/configuration/component/metadata-configuration.component.ts
@@ -1,12 +1,7 @@
 import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { MetadataConfiguration } from '../model/metadata-configuration';
-import { Property } from '../../domain/model/property';
-import { Observable, of } from 'rxjs';
 import { Metadata } from '../../domain/domain.type';
-import { PreviewEntity } from '../../domain/action/entity.action';
-import { ConfigurationState } from '../reducer';
-import { Store } from '@ngrx/store';
 
 @Component({
     selector: 'metadata-configuration',
@@ -32,6 +27,10 @@ export class MetadataConfigurationComponent {
         this.router.navigate(['../', 'edit', id], { relativeTo: this.activatedRoute.parent });
     }
 
+    onPreview($event): void {
+        this.preview.emit($event);
+    }
+
     get width(): string {
         const columns = this.configuration.dates.length;
         return `${Math.floor(100 / (columns + 1)) }%`;
diff --git a/ui/src/app/metadata/configuration/component/object-property.component.spec.ts b/ui/src/app/metadata/configuration/component/object-property.component.spec.ts
index 7ccb135fe..8817711c9 100644
--- a/ui/src/app/metadata/configuration/component/object-property.component.spec.ts
+++ b/ui/src/app/metadata/configuration/component/object-property.component.spec.ts
@@ -1,13 +1,13 @@
-import { Component, ViewChild, Input } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { TestBed, async, ComponentFixture } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { NgbDropdownModule, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
 import { Property } from '../../domain/model/property';
 import { MockI18nModule } from '../../../../testing/i18n.stub';
 import { ObjectPropertyComponent } from './object-property.component';
 import { SCHEMA } from '../../../../testing/form-schema.stub';
-import { getStepProperties, getStepProperty } from '../../domain/utility/configuration';
+import { getStepProperty } from '../../domain/utility/configuration';
 import { PrimitivePropertyComponent } from './primitive-property.component';
 import { ArrayPropertyComponent } from './array-property.component';
 import { FilterTargetPropertyComponent } from './filter-target-property.component';
diff --git a/ui/src/app/metadata/configuration/component/primitive-property.component.ts b/ui/src/app/metadata/configuration/component/primitive-property.component.ts
index 951d2c72a..e18b525af 100644
--- a/ui/src/app/metadata/configuration/component/primitive-property.component.ts
+++ b/ui/src/app/metadata/configuration/component/primitive-property.component.ts
@@ -6,7 +6,6 @@ import { ConfigurationPropertyComponent } from './configuration-property.compone
     templateUrl: './primitive-property.component.html',
     styleUrls: []
 })
-
 export class PrimitivePropertyComponent extends ConfigurationPropertyComponent {
     constructor() {
         super();
diff --git a/ui/src/app/metadata/configuration/container/metadata-history.component.spec.ts b/ui/src/app/metadata/configuration/container/metadata-history.component.spec.ts
index 43d8cc11b..4a322ee3c 100644
--- a/ui/src/app/metadata/configuration/container/metadata-history.component.spec.ts
+++ b/ui/src/app/metadata/configuration/container/metadata-history.component.spec.ts
@@ -117,10 +117,10 @@ describe('Metadata Version History Component', () => {
             ];
 
             const sorted = instance.sortVersionsByDate(versions);
-            expect(sorted[0].id).toEqual('bar');
-            expect(sorted[1].id).toEqual('baz');
-            expect(sorted[2].id).toEqual('foo');
-            expect(sorted[3].id).toEqual('baz2');
+            expect(sorted[0].id).toEqual('baz2');
+            expect(sorted[1].id).toEqual('foo');
+            expect(sorted[2].id).toEqual('baz');
+            expect(sorted[3].id).toEqual('bar');
         });
     });
 });
diff --git a/ui/src/app/metadata/configuration/container/metadata-history.component.ts b/ui/src/app/metadata/configuration/container/metadata-history.component.ts
index 6d62e6ed7..c49e0c70f 100644
--- a/ui/src/app/metadata/configuration/container/metadata-history.component.ts
+++ b/ui/src/app/metadata/configuration/container/metadata-history.component.ts
@@ -5,6 +5,7 @@ import { ConfigurationState, getVersionCollection } from '../reducer';
 import { MetadataVersion } from '../model/version';
 import { CompareVersionRequest } from '../action/compare.action';
 import { Router, ActivatedRoute } from '@angular/router';
+import { map } from 'rxjs/operators';
 
 @Component({
     selector: 'metadata-history',
@@ -21,7 +22,8 @@ export class MetadataHistoryComponent {
         private router: Router,
         private route: ActivatedRoute
     ) {
-        this.history$ = this.store.select(getVersionCollection);
+        this.history$ = this.store.select(getVersionCollection)
+            .pipe(map(versions => this.sortVersionsByDate(versions)));
     }
 
     sortVersionsByDate(versions: MetadataVersion[]): MetadataVersion[] {
@@ -29,7 +31,7 @@ export class MetadataHistoryComponent {
             const aDate = new Date(a.date).getTime();
             const bDate = new Date(b.date).getTime();
             return aDate === bDate ? 0 : aDate < bDate ? -1 : 1;
-        });
+        }).reverse();
     }
 
     compareVersions(versions: MetadataVersion[]): void {
diff --git a/ui/src/app/metadata/configuration/container/metadata-options.component.html b/ui/src/app/metadata/configuration/container/metadata-options.component.html
index f10147755..d99166c11 100644
--- a/ui/src/app/metadata/configuration/container/metadata-options.component.html
+++ b/ui/src/app/metadata/configuration/container/metadata-options.component.html
@@ -29,7 +29,6 @@
     </div>
     <metadata-configuration
         [configuration]="configuration$ | async"
-        (preview)="onPreview($event)"
         id="configuration">
     </metadata-configuration>
     <div *ngIf="kind === 'provider'" id="filters">
@@ -49,6 +48,7 @@ <h2 class="title h4 m-0 ml-2 flex-grow-1">
             (onUpdateOrderDown)="updateOrderDown($event)"
             (onUpdateOrderUp)="updateOrderUp($event)"
             (onRemove)="removeFilter($event)"
+            (preview)="onPreview($event)"
             [filters]="filters$ | async"></filter-configuration-list>
     </div>
     <button class="btn btn-link" (click)="onScrollTo('header')">
diff --git a/ui/src/app/metadata/configuration/container/metadata-options.component.spec.ts b/ui/src/app/metadata/configuration/container/metadata-options.component.spec.ts
index 8f12d9828..53ad37e9d 100644
--- a/ui/src/app/metadata/configuration/container/metadata-options.component.spec.ts
+++ b/ui/src/app/metadata/configuration/container/metadata-options.component.spec.ts
@@ -1,8 +1,8 @@
 import { Component, ViewChild, Input } from '@angular/core';
 import { TestBed, async, ComponentFixture } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
+import { RouterTestingModule, SpyNgModuleFactoryLoader } from '@angular/router/testing';
 import { StoreModule, combineReducers, Store } from '@ngrx/store';
-import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDropdownModule, NgbModalModule, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 
 import { MetadataConfiguration } from '../model/metadata-configuration';
 import * as fromConfiguration from '../reducer';
@@ -11,7 +11,7 @@ import * as fromProviders from '../../provider/reducer';
 import * as fromResolvers from '../../resolver/reducer';
 import { MockI18nModule } from '../../../../testing/i18n.stub';
 import { MetadataOptionsComponent } from './metadata-options.component';
-import { CommonModule } from '@angular/common';
+import { CommonModule, ViewportScroller } from '@angular/common';
 
 import {
     MetadataConfigurationComponentStub,
@@ -20,6 +20,11 @@ import {
 import {
     FilterConfigurationListComponentStub
 } from '../../../../testing/filter-list.stub';
+import { Metadata } from '../../domain/domain.type';
+import { FilterActionTypes } from '../../filter/action/filter.action';
+import { FilterCollectionActionTypes } from '../../filter/action/collection.action';
+import { MetadataFilter } from '../../domain/model';
+import { NgbModalStub } from '../../../../testing/modal.stub';
 
 @Component({
     template: `
@@ -42,6 +47,15 @@ describe('Metadata Options Page Component', () => {
     let instance: TestHostComponent;
     let app: MetadataOptionsComponent;
     let store: Store<fromConfiguration.State>;
+    let dispatchSpy;
+    let scroller: ViewportScroller;
+    let filter = {
+        type: 'EntityAttributesFilter',
+        resourceId: 'foo',
+        name: 'name',
+        createdBy: 'admin'
+    } as MetadataFilter;
+    let modal: NgbModal;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
@@ -64,10 +78,18 @@ describe('Metadata Options Page Component', () => {
                 TestHostComponent,
                 FilterConfigurationListComponentStub
             ],
+            providers: [
+                {
+                    provide: NgbModal,
+                    useClass: NgbModalStub
+                }
+            ]
         }).compileComponents();
 
         store = TestBed.get(Store);
-        spyOn(store, 'dispatch');
+        scroller = TestBed.get(ViewportScroller);
+        modal = TestBed.get(NgbModal);
+        dispatchSpy = spyOn(store, 'dispatch');
         spyOn(store, 'select').and.callThrough();
 
         fixture = TestBed.createComponent(TestHostComponent);
@@ -80,4 +102,50 @@ describe('Metadata Options Page Component', () => {
         expect(app).toBeTruthy();
         expect(store.select).toHaveBeenCalled();
     }));
+
+    describe('setModel method', () => {
+        it('should set the id and kind attributes on the component', () => {
+            app.setModel({ id: 'foo' } as Metadata);
+            expect(app.id).toBe('foo');
+            expect(app.kind).toBe('resolver');
+        });
+
+        it('should dispatch a LoadFilterRequest event if the provided model is a provider', () => {
+            app.setModel({resourceId: 'foo', '@type': 'FileBackedHttpMetadataResolver'} as Metadata);
+            expect(store.dispatch).toHaveBeenCalled();
+            expect(dispatchSpy.calls.mostRecent().args[0].type).toBe(FilterCollectionActionTypes.LOAD_FILTER_REQUEST);
+        });
+    });
+
+    describe('onScrollTo', () => {
+        it('should call the viewportscroller', () => {
+            spyOn(scroller, 'scrollToAnchor');
+            app.onScrollTo('fragment');
+            expect(scroller.scrollToAnchor).toHaveBeenCalled();
+        });
+    });
+
+    describe('order methods', () => {
+        it('updateOrderUp should dispatch a ChangeFilterOrderUp action', () => {
+            app.updateOrderUp(filter);
+            expect(store.dispatch).toHaveBeenCalled();
+            expect(dispatchSpy.calls.mostRecent().args[0].type).toBe(FilterCollectionActionTypes.CHANGE_FILTER_ORDER_UP);
+        });
+
+        it('updateOrderDown should dispatch a ChangeFilterOrderDown action', () => {
+            app.updateOrderDown(filter);
+            expect(store.dispatch).toHaveBeenCalled();
+            expect(dispatchSpy.calls.mostRecent().args[0].type).toBe(FilterCollectionActionTypes.CHANGE_FILTER_ORDER_DOWN);
+        });
+    });
+
+    describe('removeFilter method', () => {
+        it('should open a modal', () => {
+            spyOn(modal, 'open').and.returnValue({
+                result: Promise.resolve(true)
+            } as NgbModalRef);
+            app.removeFilter('foo');
+            expect(modal.open).toHaveBeenCalled();
+        });
+    });
 });
diff --git a/ui/src/app/metadata/configuration/container/metadata-options.component.ts b/ui/src/app/metadata/configuration/container/metadata-options.component.ts
index 337ad4fc3..a19875a54 100644
--- a/ui/src/app/metadata/configuration/container/metadata-options.component.ts
+++ b/ui/src/app/metadata/configuration/container/metadata-options.component.ts
@@ -79,21 +79,7 @@ export class MetadataOptionsComponent implements OnDestroy {
                 takeUntil(this.ngUnsubscribe),
                 filter(model => !!model)
             )
-            .subscribe(p => {
-                this.id = 'resourceId' in p ? p.resourceId : p.id;
-                this.kind = '@type' in p ? 'provider' : 'resolver';
-                if (this.kind === 'provider') {
-                    this.store.dispatch(new LoadFilterRequest(this.id));
-                }
-            });
-
-        this.router.events.pipe(
-            takeUntil(this.ngUnsubscribe),
-            filter((e: Event): e is Scroll => e instanceof Scroll),
-            delay(1000)
-        ).subscribe(e => {
-            scroller.scrollToAnchor(e.anchor);
-        });
+            .subscribe(p => this.setModel(p));
 
         this.store.select(getConfigurationDefinition)
             .pipe(
@@ -102,6 +88,14 @@ export class MetadataOptionsComponent implements OnDestroy {
             .subscribe(d => this.definition = d);
     }
 
+    setModel(data: Metadata): void {
+        this.id = 'resourceId' in data ? data.resourceId : data.id;
+        this.kind = '@type' in data ? 'provider' : 'resolver';
+        if (this.kind === 'provider') {
+            this.store.dispatch(new LoadFilterRequest(this.id));
+        }
+    }
+
     onScrollTo(element): void {
         this.scroller.scrollToAnchor(element);
     }
@@ -128,13 +122,6 @@ export class MetadataOptionsComponent implements OnDestroy {
             );
     }
 
-    onPreview($event: { data: any, parent: Metadata }): void {
-        this.store.dispatch(new PreviewEntity({
-            id: $event.data,
-            entity: this.definition.getEntity($event.parent)
-        }));
-    }
-
     ngOnDestroy(): void {
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();
diff --git a/ui/src/app/metadata/domain/utility/configuration.spec.ts b/ui/src/app/metadata/domain/utility/configuration.spec.ts
index d9a5a653f..336b71464 100644
--- a/ui/src/app/metadata/domain/utility/configuration.spec.ts
+++ b/ui/src/app/metadata/domain/utility/configuration.spec.ts
@@ -10,7 +10,7 @@ describe('domain utility functions', () => {
         });
 
         it('should return a formatted list of properties', () => {
-            expect(getStepProperties(SCHEMA, {}).length).toBe(3);
+            expect(getStepProperties(SCHEMA, {}).length).toBe(4);
         });
     });
 
diff --git a/ui/src/testing/form-schema.stub.ts b/ui/src/testing/form-schema.stub.ts
index 1ef7d42ae..01654b15a 100644
--- a/ui/src/testing/form-schema.stub.ts
+++ b/ui/src/testing/form-schema.stub.ts
@@ -55,6 +55,54 @@ export const SCHEMA = {
                     }
                 ]
             }
+        },
+        'formatFilterTarget': {
+            'title': 'label.search-criteria',
+            'description': 'tooltip.search-criteria',
+            'type': 'object',
+            'widget': {
+                'id': 'filter-target',
+                'target': 'formatFilterTargetType'
+            },
+            'properties': {
+                'formatFilterTargetType': {
+                    'title': '',
+                    'type': 'string',
+                    'default': 'ENTITY',
+                    'oneOf': [
+                        {
+                            'enum': [
+                                'ENTITY'
+                            ],
+                            'description': 'value.entity-id'
+                        },
+                        {
+                            'enum': [
+                                'REGEX'
+                            ],
+                            'description': 'value.regex'
+                        },
+                        {
+                            'enum': [
+                                'CONDITION_SCRIPT'
+                            ],
+                            'description': 'value.script'
+                        }
+                    ]
+                },
+                'value': {
+                    'type': 'array',
+                    'minItems': 1,
+                    'uniqueItems': true,
+                    'items': {
+                        'type': 'string'
+                    }
+                }
+            },
+            'required': [
+                'value',
+                'nameIdFormatFilterTargetType'
+            ]
         }
     },
     'required': [
diff --git a/ui/src/testing/property-component.stub.ts b/ui/src/testing/property-component.stub.ts
new file mode 100644
index 000000000..c09b7c579
--- /dev/null
+++ b/ui/src/testing/property-component.stub.ts
@@ -0,0 +1,57 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Property } from '../app/metadata/domain/model/property';
+import { Observable, of } from 'rxjs';
+
+@Component({
+    selector: 'configuration-property',
+    template: ``
+})
+export class ConfigurationPropertyComponentStub {
+
+    @Input() property: Property;
+    @Input() columns = 1;
+
+    constructor() { }
+
+    getKeys(schema): string[] {
+        return Object.keys(schema.properties);
+    }
+
+    getItemType(property: Property): string {
+        return 'default';
+    }
+
+    get width(): string {
+        return `100%`;
+    }
+}
+
+@Component({
+    selector: 'array-property',
+    template: ''
+})
+export class ArrayPropertyComponentStub extends ConfigurationPropertyComponentStub {
+
+    @Output() preview: EventEmitter<any> = new EventEmitter();
+
+    range = [];
+
+    constructor() {
+        super();
+    }
+
+    isUrl(str: string): boolean {
+        return true;
+    }
+
+    get attributeList$(): Observable<{ key: string, label: string }[]> {
+        return of([]);
+    }
+}
+
+@Component({
+    selector: 'primitive-property',
+    template: '',
+    styleUrls: []
+})
+export class PrimitivePropertyComponentStub extends ConfigurationPropertyComponentStub {}
diff --git a/ui/src/theme/modal.scss b/ui/src/theme/modal.scss
index 06b327456..f944e1925 100644
--- a/ui/src/theme/modal.scss
+++ b/ui/src/theme/modal.scss
@@ -31,4 +31,12 @@ delete-dialog {
 .popover.popover-lg {
     width: auto;
     max-width: none;
+}
+
+.popover.popover-info {
+    $color: lighten($brand-info, 60%);
+    background: $color;
+    .arrow::after {
+      border-top-color: $color;
+    }
 }
\ No newline at end of file