From b8fc3c52d20ccea54bd9bc4c6fbea6fe22308dcb Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Fri, 13 Apr 2018 18:27:28 +0000
Subject: [PATCH] Merged in feature/SHIBUI-321 (pull request #55)

Implementation of Edit Filter pages

Approved-by: Ryan Mathis <rmathis@unicon.net>
---
 ui/src/app/app.component.html                 |   2 +-
 ui/src/app/app.component.ts                   |   2 +
 .../container/dashboard.component.ts          |   8 +-
 ui/src/app/dashboard/effect/search.effects.ts |   4 +-
 .../domain/action/filter-collection.action.ts | 132 ++++++++++++--
 ui/src/app/domain/domain.module.ts            |   4 +-
 .../domain/effect/filter-collection.effect.ts |  79 ++++++++-
 .../effect/provider-collection.effects.ts     |   3 +-
 ui/src/app/domain/entity/filter.ts            |  17 +-
 .../app/domain/guard/filter-exists.guard.ts   | 101 +++++++++++
 ui/src/app/domain/model/filter-target.ts      |   4 +
 ui/src/app/domain/model/metadata-filter.ts    |   2 +
 .../reducer/filter-collection.reducer.spec.ts |   5 +-
 .../reducer/filter-collection.reducer.ts      |  95 +++++++++-
 ui/src/app/domain/reducer/index.ts            |   7 +-
 .../service/entity-descriptor.service.spec.ts |  17 --
 .../service/entity-descriptor.service.ts      |  10 --
 ui/src/app/domain/service/filter.service.ts   |  23 ---
 .../service/metadata-resolver.service.ts      |  95 ++++++++++
 .../action/filter.action.spec.ts              |   5 -
 .../metadata-filter/action/filter.action.ts   |  50 +-----
 .../search.action.spec.ts}                    |   0
 .../metadata-filter/action/search.action.ts   |  44 +++++
 .../component/filter-form.component.html      | 144 ----------------
 .../component/filter-form.component.spec.ts   |  73 --------
 .../component/filter-form.component.ts        |  94 ----------
 .../component/preview-filter.component.ts     |   2 +-
 .../component/search-dialog.component.ts      |   2 +-
 .../container/edit-filter.component.html      | 162 ++++++++++++++++++
 .../container/edit-filter.component.spec.ts   |   0
 .../container/edit-filter.component.ts        | 153 +++++++++++++++++
 .../container/filter.component.html           |   1 +
 .../container/filter.component.scss           |   0
 .../container/filter.component.spec.ts        |   0
 .../container/filter.component.ts             |  39 +++++
 .../container/new-filter.component.html       | 123 ++++++++++++-
 .../container/new-filter.component.spec.ts    |   4 +-
 .../container/new-filter.component.ts         | 122 +++++++++++--
 .../metadata-filter/effect/filter.effect.ts   |  46 +----
 .../metadata-filter/effect/search.effect.ts   |  62 +++++++
 ui/src/app/metadata-filter/filter.module.ts   |  26 ++-
 .../reducer/filter.reducer.spec.ts            |  61 +------
 .../metadata-filter/reducer/filter.reducer.ts |  69 ++------
 ui/src/app/metadata-filter/reducer/index.ts   |  18 +-
 .../reducer/search.reducer.spec.ts            |  65 +++++++
 .../metadata-filter/reducer/search.reducer.ts |  68 ++++++++
 ui/src/app/routing.module.ts                  |   2 +-
 .../autocomplete/autocomplete.component.html  |   2 +-
 ui/src/app/shared/util.spec.ts                |  18 ++
 ui/src/app/shared/util.ts                     |  10 ++
 50 files changed, 1422 insertions(+), 653 deletions(-)
 create mode 100644 ui/src/app/domain/guard/filter-exists.guard.ts
 create mode 100644 ui/src/app/domain/model/filter-target.ts
 delete mode 100644 ui/src/app/domain/service/filter.service.ts
 create mode 100644 ui/src/app/domain/service/metadata-resolver.service.ts
 rename ui/src/app/metadata-filter/{component/filter-form.component.scss => action/search.action.spec.ts} (100%)
 create mode 100644 ui/src/app/metadata-filter/action/search.action.ts
 delete mode 100644 ui/src/app/metadata-filter/component/filter-form.component.html
 delete mode 100644 ui/src/app/metadata-filter/component/filter-form.component.spec.ts
 delete mode 100644 ui/src/app/metadata-filter/component/filter-form.component.ts
 create mode 100644 ui/src/app/metadata-filter/container/edit-filter.component.html
 create mode 100644 ui/src/app/metadata-filter/container/edit-filter.component.spec.ts
 create mode 100644 ui/src/app/metadata-filter/container/edit-filter.component.ts
 create mode 100644 ui/src/app/metadata-filter/container/filter.component.html
 create mode 100644 ui/src/app/metadata-filter/container/filter.component.scss
 create mode 100644 ui/src/app/metadata-filter/container/filter.component.spec.ts
 create mode 100644 ui/src/app/metadata-filter/container/filter.component.ts
 create mode 100644 ui/src/app/metadata-filter/effect/search.effect.ts
 create mode 100644 ui/src/app/metadata-filter/reducer/search.reducer.spec.ts
 create mode 100644 ui/src/app/metadata-filter/reducer/search.reducer.ts
 create mode 100644 ui/src/app/shared/util.spec.ts

diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index 4de6ae629..1a3265ba6 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -24,7 +24,7 @@
                 </button>
                 <div ngbDropdownMenu aria-labelledby="addNewDropdown">
                     <a class="nav-link"
-                        routerLink="/metadata-filter/new"
+                        routerLink="/filter/new"
                         routerLinkActive="active"
                         aria-label="Add a new metadata filter"
                         role="button">
diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts
index 475bd378b..12f14544a 100644
--- a/ui/src/app/app.component.ts
+++ b/ui/src/app/app.component.ts
@@ -8,6 +8,7 @@ import { VersionInfo } from './core/model/version';
 import { LoadProviderRequest } from './domain/action/provider-collection.action';
 import { LoadDraftRequest } from './domain/action/draft-collection.action';
 import { VersionInfoLoadRequestAction } from './core/action/version.action';
+import { LoadFilterRequest } from './domain/action/filter-collection.action';
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
@@ -27,6 +28,7 @@ export class AppComponent implements OnInit {
 
     ngOnInit(): void {
         this.store.dispatch(new LoadProviderRequest());
+        this.store.dispatch(new LoadFilterRequest());
         this.store.dispatch(new LoadDraftRequest());
         this.store.dispatch(new VersionInfoLoadRequestAction());
     }
diff --git a/ui/src/app/dashboard/container/dashboard.component.ts b/ui/src/app/dashboard/container/dashboard.component.ts
index 13209719d..62df819fb 100644
--- a/ui/src/app/dashboard/container/dashboard.component.ts
+++ b/ui/src/app/dashboard/container/dashboard.component.ts
@@ -81,11 +81,9 @@ export class DashboardComponent implements OnInit {
     }
 
     edit(entity: MetadataEntity): void {
-        if (entity.type === DomainTypes.provider) {
-            let path = entity.id ? 'edit' : 'wizard',
-                id = entity.id ? entity.id : entity.entityId;
-            this.router.navigate(['provider', id, path]);
-        }
+        let path = entity.id ? 'edit' : 'wizard',
+            id = entity.id ? entity.id : entity.entityId;
+        this.router.navigate([entity.type, id, path]);
     }
 
     toggleProvider(entity: MetadataEntity): void {
diff --git a/ui/src/app/dashboard/effect/search.effects.ts b/ui/src/app/dashboard/effect/search.effects.ts
index fac087ecb..89ae1502a 100644
--- a/ui/src/app/dashboard/effect/search.effects.ts
+++ b/ui/src/app/dashboard/effect/search.effects.ts
@@ -12,7 +12,7 @@ import { MetadataProvider } from '../../domain/model/metadata-provider';
 import { EntityDescriptorService } from '../../domain/service/entity-descriptor.service';
 import { Provider } from '../../domain/entity/provider';
 import { Filter } from '../../domain/entity/filter';
-import { MetadataEntity, DomainTypes } from '../../domain/domain.type';
+import { MetadataEntity, DomainTypes, MetadataFilter } from '../../domain/domain.type';
 
 @Injectable()
 export class SearchEffects {
@@ -39,7 +39,7 @@ export class SearchEffects {
         return combineLatest(
             this.store.select(fromCollections.getAllProviders),
             this.store.select(fromCollections.getAllFilters),
-            (p, f): MetadataEntity[] => [].concat(
+            (p: MetadataProvider[], f: MetadataFilter[]): Array<MetadataEntity> => [].concat(
                 f.map(filter => new Filter(filter)),
                 p.map(provider => new Provider(provider))
             )
diff --git a/ui/src/app/domain/action/filter-collection.action.ts b/ui/src/app/domain/action/filter-collection.action.ts
index 5ad93b9e7..87a32f23e 100644
--- a/ui/src/app/domain/action/filter-collection.action.ts
+++ b/ui/src/app/domain/action/filter-collection.action.ts
@@ -1,29 +1,135 @@
 import { Action } from '@ngrx/store';
 import { MetadataFilter } from '../../domain/model/metadata-filter';
 
-export const SAVE_FILTER = '[Filter] Save Filter';
-export const SAVE_FILTER_SUCCESS = '[Filter] Save Filter Success';
-export const SAVE_FILTER_ERROR = '[Filter] Save Filter Error';
+export const FIND = '[Metadata Filter] Find';
+export const SELECT = '[Metadata Filter] Select';
+export const SELECT_FILTER_SUCCESS = '[Metadata Filter] Select Success';
+export const SELECT_FILTER_FAIL = '[Metadata Filter] Select Fail';
 
-export class SaveFilter implements Action {
-    readonly type = SAVE_FILTER;
+export const UPDATE_FILTER_REQUEST = '[Metadata Filter] Update Request';
+export const UPDATE_FILTER_SUCCESS = '[Metadata Filter] Update Success';
+export const UPDATE_FILTER_FAIL = '[Metadata Filter] Update Fail';
 
-    constructor(public payload: Partial<MetadataFilter>) { }
+export const LOAD_FILTER_REQUEST = '[Metadata Filter Collection] Filter REQUEST';
+export const LOAD_FILTER_SUCCESS = '[Metadata Filter Collection] Filter SUCCESS';
+export const LOAD_FILTER_ERROR = '[Metadata Filter Collection] Filter ERROR';
+export const ADD_FILTER = '[Metadata Filter Collection] Add Filter';
+export const ADD_FILTER_SUCCESS = '[Metadata Filter Collection] Add Filter Success';
+export const ADD_FILTER_FAIL = '[Metadata Filter Collection] Add Filter Fail';
+export const REMOVE_FILTER = '[Metadata Filter Collection] Remove Filter';
+export const REMOVE_FILTER_SUCCESS = '[Metadata Filter Collection] Remove Filter Success';
+export const REMOVE_FILTER_FAIL = '[Metadata Filter Collection] Remove Filter Fail';
+
+export class FindFilter implements Action {
+    readonly type = FIND;
+
+    constructor(public payload: string) { }
+}
+
+export class SelectFilter implements Action {
+    readonly type = SELECT;
+
+    constructor(public payload: string) { }
 }
 
-export class SaveFilterSuccess implements Action {
-    readonly type = SAVE_FILTER_SUCCESS;
+export class SelectFilterSuccess implements Action {
+    readonly type = SELECT_FILTER_SUCCESS;
 
     constructor(public payload: MetadataFilter) { }
 }
 
-export class SaveFilterError implements Action {
-    readonly type = SAVE_FILTER_ERROR;
+export class SelectFilterFail implements Action {
+    readonly type = SELECT_FILTER_FAIL;
 
     constructor(public payload: Error) { }
 }
 
+export class LoadFilterRequest implements Action {
+    readonly type = LOAD_FILTER_REQUEST;
+
+    constructor() { }
+}
+
+export class LoadFilterSuccess implements Action {
+    readonly type = LOAD_FILTER_SUCCESS;
+
+    constructor(public payload: MetadataFilter[]) { }
+}
+
+export class LoadFilterError implements Action {
+    readonly type = LOAD_FILTER_ERROR;
+
+    constructor(public payload: any) { }
+}
+
+export class UpdateFilterRequest implements Action {
+    readonly type = UPDATE_FILTER_REQUEST;
+
+    constructor(public payload: MetadataFilter) { }
+}
+
+export class UpdateFilterSuccess implements Action {
+    readonly type = UPDATE_FILTER_SUCCESS;
+
+    constructor(public payload: MetadataFilter) { }
+}
+
+export class UpdateFilterFail implements Action {
+    readonly type = UPDATE_FILTER_FAIL;
+
+    constructor(public err: any) { }
+}
+
+export class AddFilterRequest implements Action {
+    readonly type = ADD_FILTER;
+
+    constructor(public payload: MetadataFilter) { }
+}
+
+export class AddFilterSuccess implements Action {
+    readonly type = ADD_FILTER_SUCCESS;
+
+    constructor(public payload: MetadataFilter) { }
+}
+
+export class AddFilterFail implements Action {
+    readonly type = ADD_FILTER_FAIL;
+
+    constructor(public payload: any) { }
+}
+
+export class RemoveFilterRequest implements Action {
+    readonly type = REMOVE_FILTER;
+
+    constructor(public payload: MetadataFilter) { }
+}
+
+export class RemoveFilterSuccess implements Action {
+    readonly type = REMOVE_FILTER_SUCCESS;
+
+    constructor(public payload: MetadataFilter) { }
+}
+
+export class RemoveFilterFail implements Action {
+    readonly type = REMOVE_FILTER_FAIL;
+
+    constructor(public payload: MetadataFilter) { }
+}
+
 export type Actions =
-    | SaveFilter
-    | SaveFilterSuccess
-    | SaveFilterError;
+    | LoadFilterRequest
+    | LoadFilterSuccess
+    | LoadFilterError
+    | AddFilterRequest
+    | AddFilterSuccess
+    | AddFilterFail
+    | RemoveFilterRequest
+    | RemoveFilterSuccess
+    | RemoveFilterFail
+    | FindFilter
+    | SelectFilter
+    | SelectFilterSuccess
+    | SelectFilterFail
+    | UpdateFilterRequest
+    | UpdateFilterSuccess
+    | UpdateFilterFail;
diff --git a/ui/src/app/domain/domain.module.ts b/ui/src/app/domain/domain.module.ts
index 8d54d372c..ed433dd26 100644
--- a/ui/src/app/domain/domain.module.ts
+++ b/ui/src/app/domain/domain.module.ts
@@ -7,12 +7,12 @@ import { ListValuesService } from './service/list-values.service';
 import { ProviderStatusEmitter, ProviderValueEmitter } from './service/provider-change-emitter.service';
 import { EntityIdService } from './service/entity-id.service';
 import { EntityDraftService } from './service/entity-draft.service';
-import { MetadataFilterService } from './service/filter.service';
 
 import { reducers } from './reducer';
 import { DraftCollectionEffects } from './effect/draft-collection.effects';
 import { ProviderCollectionEffects } from './effect/provider-collection.effects';
 import { FilterCollectionEffects } from './effect/filter-collection.effect';
+import { MetadataResolverService } from './service/metadata-resolver.service';
 
 @NgModule({
     declarations: [],
@@ -32,7 +32,7 @@ export class DomainModule {
                 ListValuesService,
                 ProviderStatusEmitter,
                 ProviderValueEmitter,
-                MetadataFilterService
+                MetadataResolverService
             ]
         };
     }
diff --git a/ui/src/app/domain/effect/filter-collection.effect.ts b/ui/src/app/domain/effect/filter-collection.effect.ts
index 592067c10..6ea5f295d 100644
--- a/ui/src/app/domain/effect/filter-collection.effect.ts
+++ b/ui/src/app/domain/effect/filter-collection.effect.ts
@@ -15,29 +15,94 @@ import * as actions from '../action/filter-collection.action';
 import * as fromFilter from '../reducer';
 
 import { EntityIdService } from '../../domain/service/entity-id.service';
-import { MetadataFilterService } from '../service/filter.service';
+import { MetadataResolverService } from '../service/metadata-resolver.service';
 import { MetadataFilter } from '../../domain/model/metadata-filter';
+import { removeNulls } from '../../shared/util';
 
 @Injectable()
 export class FilterCollectionEffects {
 
     @Effect()
-    saveFilter$ = this.actions$
-        .ofType<actions.SaveFilter>(actions.SAVE_FILTER)
+    loadFilters$ = this.actions$
+        .ofType<actions.LoadFilterRequest>(actions.LOAD_FILTER_REQUEST)
+        .switchMap(() =>
+            this.resolverService
+                .query()
+                .map(filters => new actions.LoadFilterSuccess(filters))
+                .catch(error => Observable.of(new actions.LoadFilterError(error)))
+        );
+    @Effect()
+    selectFilterRequest$ = this.actions$
+        .ofType<actions.SelectFilter>(actions.SELECT)
+        .map(action => action.payload)
+        .switchMap(id =>
+            this.resolverService
+                .find(id)
+                .map(p => new actions.SelectFilterSuccess(p))
+                .catch(error => Observable.of(new actions.SelectFilterFail(error)))
+        );
+
+    @Effect()
+    addFilter$ = this.actions$
+        .ofType<actions.AddFilterRequest>(actions.ADD_FILTER)
         .map(action => action.payload)
+        .map(filter => {
+            return {
+                ...filter,
+                relyingPartyOverrides: removeNulls(filter.relyingPartyOverrides)
+            };
+        })
         .switchMap(unsaved =>
-            this.filterService
+            this.resolverService
                 .save(unsaved as MetadataFilter)
-                .map(saved => new actions.SaveFilterSuccess(saved))
-                .catch(error => Observable.of(new actions.SaveFilterError(error)))
+                .map(saved => new actions.AddFilterSuccess(saved))
+                .catch(error => Observable.of(new actions.AddFilterFail(error)))
         );
+    @Effect({ dispatch: false })
+    addFilterSuccessRedirect$ = this.actions$
+        .ofType<actions.AddFilterSuccess>(actions.ADD_FILTER_SUCCESS)
+        .map(action => action.payload)
+        .do(filter => {
+            this.router.navigate(['/dashboard']);
+        });
+
+    @Effect()
+    addFilterSuccessReload$ = this.actions$
+        .ofType<actions.AddFilterSuccess>(actions.ADD_FILTER_SUCCESS)
+        .map(action => action.payload)
+        .map(filter => new actions.LoadFilterRequest());
+
+    @Effect()
+    updateFilter$ = this.actions$
+        .ofType<actions.UpdateFilterRequest>(actions.UPDATE_FILTER_REQUEST)
+        .map(action => action.payload)
+        .switchMap(filter => {
+            delete filter.modifiedDate;
+            delete filter.createdDate;
+            return this.resolverService
+                .update(filter)
+                .map(p => new actions.UpdateFilterSuccess(p))
+                .catch(err => Observable.of(new actions.UpdateFilterFail(err)));
+        });
+    @Effect({ dispatch: false })
+    updateFilterSuccessRedirect$ = this.actions$
+        .ofType<actions.UpdateFilterSuccess>(actions.UPDATE_FILTER_SUCCESS)
+        .map(action => action.payload)
+        .do(filter => {
+            this.router.navigate(['/dashboard']);
+        });
+    @Effect()
+    updateFilterSuccessReload$ = this.actions$
+        .ofType<actions.UpdateFilterSuccess>(actions.UPDATE_FILTER_SUCCESS)
+        .map(action => action.payload)
+        .map(filter => new actions.LoadFilterRequest());
 
     constructor(
         private actions$: Actions,
         private router: Router,
         private modalService: NgbModal,
         private idService: EntityIdService,
-        private filterService: MetadataFilterService,
+        private resolverService: MetadataResolverService,
         private store: Store<fromFilter.State>
     ) { }
 }
diff --git a/ui/src/app/domain/effect/provider-collection.effects.ts b/ui/src/app/domain/effect/provider-collection.effects.ts
index 90cb2cea5..8b280e61e 100644
--- a/ui/src/app/domain/effect/provider-collection.effects.ts
+++ b/ui/src/app/domain/effect/provider-collection.effects.ts
@@ -8,6 +8,7 @@ import * as providerActions from '../action/provider-collection.action';
 import * as draftActions from '../action/draft-collection.action';
 import { MetadataProvider } from '../../domain/model/metadata-provider';
 import { EntityDescriptorService } from '../../domain/service/entity-descriptor.service';
+import { removeNulls } from '../../shared/util';
 
 @Injectable()
 export class ProviderCollectionEffects {
@@ -64,7 +65,7 @@ export class ProviderCollectionEffects {
         .map(provider => {
             return {
                 ...provider,
-                relyingPartyOverrides: this.descriptorService.removeNulls(provider.relyingPartyOverrides)
+                relyingPartyOverrides: removeNulls(provider.relyingPartyOverrides)
             };
         })
         .switchMap(provider =>
diff --git a/ui/src/app/domain/entity/filter.ts b/ui/src/app/domain/entity/filter.ts
index 1e4c7385d..c8744ff9e 100644
--- a/ui/src/app/domain/entity/filter.ts
+++ b/ui/src/app/domain/entity/filter.ts
@@ -1,12 +1,12 @@
 import { MetadataFilter, RelyingPartyOverrides } from '../model/metadata-filter';
 import { DomainTypes } from '../domain.type';
+import { FilterTarget } from '../model/filter-target';
 
 export class Filter implements MetadataFilter {
     id = '';
     createdDate?: string;
     modifiedDate?: string;
 
-    entityId = '';
     filterName = '';
     filterEnabled = false;
 
@@ -17,8 +17,13 @@ export class Filter implements MetadataFilter {
 
     attributeRelease = [] as string[];
 
+    filterTarget: FilterTarget = {
+        type: 'entity',
+        value: ''
+    };
+
     constructor(obj?: Partial<MetadataFilter>) {
-        Object.assign(this, obj);
+        Object.assign(this, obj || {});
     }
 
     get name(): string {
@@ -32,4 +37,12 @@ export class Filter implements MetadataFilter {
     get type(): string {
         return DomainTypes.filter;
     }
+
+    get entityId(): string {
+        return this.filterTarget.value;
+    }
+
+    set entityId(val: string) {
+        this.filterTarget.value = val;
+    }
 }
diff --git a/ui/src/app/domain/guard/filter-exists.guard.ts b/ui/src/app/domain/guard/filter-exists.guard.ts
new file mode 100644
index 000000000..2034e8ab6
--- /dev/null
+++ b/ui/src/app/domain/guard/filter-exists.guard.ts
@@ -0,0 +1,101 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, Router } from '@angular/router';
+import { select, Store } from '@ngrx/store';
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+import { catchError, filter, map, switchMap, take, tap } from 'rxjs/operators';
+
+import * as FilterActions from '../action/filter-collection.action';
+import * as fromCollection from '../reducer';
+import { MetadataResolverService } from '../service/metadata-resolver.service';
+
+/**
+ * Guards are hooks into the route resolution process, providing an opportunity
+ * to inform the router's navigation process whether the route should continue
+ * to activate this route. Guards must return an observable of true or false.
+ */
+@Injectable()
+export class FilterExistsGuard implements CanActivate {
+    constructor(
+        private store: Store<fromCollection.State>,
+        private mdResolverService: MetadataResolverService,
+        private router: Router
+    ) { }
+
+    /**
+     * This method creates an observable that waits for the `loaded` property
+     * of the collection state to turn `true`, emitting one time once loading
+     * has finished.
+     */
+    waitForCollectionToLoad(): Observable<boolean> {
+        return this.store.pipe(
+            select(fromCollection.getFilterCollectionLoaded),
+            filter(loaded => loaded),
+            take(1)
+        );
+    }
+
+    /**
+     * This method checks if a filter with the given ID is already registered
+     * in the Store
+     */
+    hasFilterInStore(id: string): Observable<boolean> {
+        return this.store.pipe(
+            select(fromCollection.getFilterEntities),
+            map(entities => !!entities[id]),
+            take(1)
+        );
+    }
+
+    /**
+     * This method loads a filter with the given ID from the API and caches
+     * it in the store, returning `true` or `false` if it was found.
+     */
+    hasFilterInApi(id: string): Observable<boolean> {
+        return this.mdResolverService.find(id).pipe(
+            map(filterEntity => new FilterActions.LoadFilterSuccess([filterEntity])),
+            tap((action: FilterActions.LoadFilterSuccess) => this.store.dispatch(action)),
+            map(filter => !!filter),
+            catchError(() => {
+                this.router.navigate(['/dashboard']);
+                return of(false);
+            })
+        );
+    }
+
+    /**
+     * `hasFilter` composes `hasFilterInStore` and `hasFilterInApi`. It first checks
+     * if the filter is in store, and if not it then checks if it is in the
+     * API.
+     */
+    hasFilter(id: string): Observable<boolean> {
+        return this.hasFilterInStore(id).pipe(
+            switchMap(inStore => {
+                if (inStore) {
+                    return of(inStore);
+                }
+
+                return this.hasFilterInApi(id);
+            })
+        );
+    }
+
+    /**
+     * This is the actual method the router will call when our guard is run.
+     *
+     * Our guard waits for the collection to load, then it checks if we need
+     * to request a filter from the API or if we already have it in our cache.
+     * If it finds it in the cache or in the API, it returns an Observable
+     * of `true` and the route is rendered successfully.
+     *
+     * If it was unable to find it in our cache or in the API, this guard
+     * will return an Observable of `false`, causing the router to move
+     * on to the next candidate route. In this case, it will move on
+     * to the 404 page.
+     */
+    canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
+        return this.waitForCollectionToLoad().pipe(
+            switchMap(() => this.hasFilter(route.params['id']))
+        );
+    }
+}
diff --git a/ui/src/app/domain/model/filter-target.ts b/ui/src/app/domain/model/filter-target.ts
new file mode 100644
index 000000000..3b8b59856
--- /dev/null
+++ b/ui/src/app/domain/model/filter-target.ts
@@ -0,0 +1,4 @@
+export interface FilterTarget {
+    type: string;
+    value: string;
+}
diff --git a/ui/src/app/domain/model/metadata-filter.ts b/ui/src/app/domain/model/metadata-filter.ts
index 82d0310ec..2351cdbc6 100644
--- a/ui/src/app/domain/model/metadata-filter.ts
+++ b/ui/src/app/domain/model/metadata-filter.ts
@@ -1,5 +1,6 @@
 import { RelyingPartyOverrides } from './relying-party-overrides';
 import { MetadataBase } from './metadata-base';
+import { FilterTarget } from './filter-target';
 
 export interface MetadataFilter extends MetadataBase {
     entityId: string;
@@ -7,6 +8,7 @@ export interface MetadataFilter extends MetadataBase {
     filterEnabled?: boolean;
     relyingPartyOverrides: RelyingPartyOverrides;
     attributeRelease: string[];
+    filterTarget: FilterTarget;
 }
 
 export * from './relying-party-overrides';
diff --git a/ui/src/app/domain/reducer/filter-collection.reducer.spec.ts b/ui/src/app/domain/reducer/filter-collection.reducer.spec.ts
index 799ae2b9d..c697d31a8 100644
--- a/ui/src/app/domain/reducer/filter-collection.reducer.spec.ts
+++ b/ui/src/app/domain/reducer/filter-collection.reducer.spec.ts
@@ -3,7 +3,10 @@ import * as fromFilter from './filter-collection.reducer';
 import * as actions from '../action/filter-collection.action';
 
 const snapshot: fromFilter.FilterCollectionState = {
-    filters: []
+    ids: [],
+    entities: {},
+    selectedId: null,
+    loaded: false
 };
 
 describe('Filter Reducer', () => {
diff --git a/ui/src/app/domain/reducer/filter-collection.reducer.ts b/ui/src/app/domain/reducer/filter-collection.reducer.ts
index f2c6c738c..b87de3c09 100644
--- a/ui/src/app/domain/reducer/filter-collection.reducer.ts
+++ b/ui/src/app/domain/reducer/filter-collection.reducer.ts
@@ -1,31 +1,108 @@
 import { createSelector, createFeatureSelector } from '@ngrx/store';
-import { MetadataProvider } from '../../domain/model/metadata-provider';
 import * as filter from '../action/filter-collection.action';
 import * as fromRoot from '../../core/reducer';
 import { MetadataFilter } from '../domain.type';
 
 export interface FilterCollectionState {
-    filters: MetadataFilter[];
+    ids: string[];
+    entities: { [id: string]: MetadataFilter };
+    selectedId: string | null;
+    loaded: boolean;
 }
 
 export const initialState: FilterCollectionState = {
-    filters: []
+    ids: [],
+    entities: {},
+    selectedId: null,
+    loaded: false
 };
 
 export function reducer(state = initialState, action: filter.Actions): FilterCollectionState {
     switch (action.type) {
-        case filter.SAVE_FILTER_SUCCESS: {
+        case filter.LOAD_FILTER_SUCCESS: {
+            const filters = action.payload;
+
+            const filterIds = filters.map(provider => provider.id);
+            const entities = filters.reduce(
+                (e: { [id: string]: MetadataFilter }, provider: MetadataFilter) => {
+                    return Object.assign(e, {
+                        [provider.id]: provider,
+                    });
+                },
+                {}
+            );
+
+            return {
+                ...state,
+                ids: [...filterIds],
+                entities: { ...state.entities, ...entities },
+                loaded: true
+            };
+        }
+
+        case filter.SELECT_FILTER_SUCCESS: {
+            const filter = action.payload;
+            if (!filter || state.ids.indexOf(filter.id) < 0) {
+                return state;
+            }
+            return {
+                ...state,
+                ids: [...state.ids.filter(id => id !== filter.id), filter.id],
+                entities: Object.assign({ ...state.entities }, {
+                    [filter.id]: filter,
+                }),
+                selectedId: filter.id
+            };
+        }
+
+        case filter.UPDATE_FILTER_SUCCESS: {
+            const provider = action.payload;
+
+            if (state.ids.indexOf(provider.id) < 0) {
+                return state;
+            }
+            const original = state.entities[provider.id],
+                updated = Object.assign({},
+                    { ...original },
+                    { ...provider }
+                );
+            return {
+                ...state,
+                ids: [...state.ids.filter(id => id !== provider.id), provider.id],
+                entities: Object.assign({ ...state.entities }, {
+                    [provider.id]: provider,
+                })
+            };
+        }
+
+        case filter.SELECT: {
             return {
-                filters: [
-                    ...state.filters,
-                    action.payload
-                ]
+                ...state,
+                selectedId: action.payload,
             };
         }
+
         default: {
             return state;
         }
     }
 }
 
-export const getFilters = (state: FilterCollectionState) => state.filters;
+export const getFilters = (state: FilterCollectionState) => state.entities;
+
+export const getEntities = (state: FilterCollectionState) => state.entities;
+export const getIds = (state: FilterCollectionState) => state.ids;
+export const getSelectedId = (state: FilterCollectionState) => state.selectedId;
+export const getLoaded = (state: FilterCollectionState) => state.loaded;
+
+export const getSelected = createSelector(
+    getEntities,
+    getSelectedId,
+    (entities, selectedId) => {
+        return entities[selectedId];
+    }
+);
+
+export const getAll = createSelector(getEntities, getIds, (entities, ids) => {
+    return ids.map(id => entities[id]).filter(entity => entity);
+});
diff --git a/ui/src/app/domain/reducer/index.ts b/ui/src/app/domain/reducer/index.ts
index 05a84a405..f628093d0 100644
--- a/ui/src/app/domain/reducer/index.ts
+++ b/ui/src/app/domain/reducer/index.ts
@@ -68,7 +68,12 @@ export const isSelectedDraftInCollection = createSelector(getDraftIds, getSelect
  *   Select pieces of Filter Collection
 */
 
-export const getAllFilters = createSelector(getFilterEntityState, fromFilter.getFilters);
+export const getAllFilters = createSelector(getFilterEntityState, fromFilter.getAll);
+export const getFilterEntities = createSelector(getFilterEntityState, fromFilter.getEntities);
+export const getSelectedFilterId = createSelector(getFilterEntityState, fromFilter.getSelectedId);
+export const getSelectedFilter = createSelector(getFilterEntities, getSelectedFilterId, getInCollectionFn);
+export const getFilterIds = createSelector(getFilterEntityState, fromFilter.getIds);
+export const getFilterCollectionLoaded = createSelector(getFilterEntityState, fromFilter.getLoaded);
 
 /*
  *   Combine pieces of Collection State
diff --git a/ui/src/app/domain/service/entity-descriptor.service.spec.ts b/ui/src/app/domain/service/entity-descriptor.service.spec.ts
index f08d29dfa..969466e07 100644
--- a/ui/src/app/domain/service/entity-descriptor.service.spec.ts
+++ b/ui/src/app/domain/service/entity-descriptor.service.spec.ts
@@ -89,21 +89,4 @@ describe(`EntityDescriptorService`, () => {
             }
         )));
     });
-
-    describe('removeNulls', () => {
-        let obj = {
-                foo: null,
-                bar: 'baz'
-            },
-            expected = {
-                bar: 'baz'
-            };
-        it(`should remove null values from the object provided`, inject([EntityDescriptorService], (service) => {
-            expect(service.removeNulls(obj)).toEqual(expected);
-        }));
-
-        it(`should return an empty object if passed a falsy value`, inject([EntityDescriptorService], (service) => {
-            expect(service.removeNulls(undefined)).toEqual({});
-        }));
-    });
 });
diff --git a/ui/src/app/domain/service/entity-descriptor.service.ts b/ui/src/app/domain/service/entity-descriptor.service.ts
index f01128df9..9bcb85b32 100644
--- a/ui/src/app/domain/service/entity-descriptor.service.ts
+++ b/ui/src/app/domain/service/entity-descriptor.service.ts
@@ -71,14 +71,4 @@ export class EntityDescriptorService {
             responseType: 'text'
         });
     }
-
-    removeNulls(attribute): any {
-        if (!attribute) { return {}; }
-        return Object.keys(attribute).reduce((coll, val, index) => {
-            if (attribute[val]) {
-                coll[val] = attribute[val];
-            }
-            return coll;
-        }, {});
-    }
 }
diff --git a/ui/src/app/domain/service/filter.service.ts b/ui/src/app/domain/service/filter.service.ts
deleted file mode 100644
index f42121359..000000000
--- a/ui/src/app/domain/service/filter.service.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import 'rxjs/add/observable/of';
-import 'rxjs/add/operator/concat';
-import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
-import { Observable } from 'rxjs/Observable';
-import { MetadataFilter } from '../../domain/model/metadata-filter';
-
-@Injectable()
-export class MetadataFilterService {
-
-    constructor(
-        private http: HttpClient
-    ) { }
-    save(provider: MetadataFilter): Observable<MetadataFilter> {
-        const saved = {
-            ...provider,
-            id: Date.now() + '_' + Math.random().toString(36).substr(2, 9),
-            createdDate: '2018-04-05T09:07:13.730',
-            updatedDate: '2018-04-05T09:07:13.730'
-        };
-        return Observable.of(saved);
-    }
-}
diff --git a/ui/src/app/domain/service/metadata-resolver.service.ts b/ui/src/app/domain/service/metadata-resolver.service.ts
new file mode 100644
index 000000000..d13542963
--- /dev/null
+++ b/ui/src/app/domain/service/metadata-resolver.service.ts
@@ -0,0 +1,95 @@
+
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+import 'rxjs/add/operator/concat';
+
+
+import { MetadataFilter } from '../../domain/model/metadata-filter';
+import { MOCK_DESCRIPTORS } from '../../../data/descriptors.mock';
+import { Storage } from '../../shared/storage';
+import { environment } from '../../../environments/environment';
+import { Filter } from '../entity/filter';
+
+@Injectable()
+export class MetadataResolverService {
+
+    private endpoint = '/MetadataResolver/incommon/Filter';
+    private base = '/api';
+
+    private filters: MetadataFilter[] = [
+        new Filter({
+            entityId: 'http://unicon.instructure.com/saml2',
+            filterName: 'Instructure (Unicon)',
+            id: 'instructure',
+            filterEnabled: true,
+            createdDate: '2018-04-05T09:07:13.730',
+            modifiedDate: '2018-04-05T09:07:13.730',
+            attributeRelease: ['eduPersonPrincipalName'],
+            relyingPartyOverrides: {
+                signAssertion: true,
+                nameIdFormats: ['urn:oasis:names:tc:SAML:1.1:nameid-format:unspecified'],
+                authenticationMethods: []
+            }
+        }),
+        new Filter({
+            entityId: 'https://idp.unicon.net/idp/shibboleth',
+            filterName: 'Unicon',
+            id: 'unicon',
+            createdDate: '2018-04-05T09:07:13.730',
+            modifiedDate: '2018-04-05T09:07:13.730'
+        })
+    ];
+
+    constructor(
+        private http: HttpClient
+    ) {}
+    query(): Observable<MetadataFilter[]> {
+        /*
+        return this.http
+            .get<MetadataFilter[]>(`${this.base}${this.endpoint}s`)
+            .catch(err => {
+                console.log('ERROR LOADING PROVIDERS:', err);
+                return Observable.of([] as MetadataFilter[]);
+            });
+        */
+       return of(this.filters);
+    }
+
+    find(id: string): Observable<MetadataFilter> {
+        /*
+        return this
+            .http
+            .get<MetadataFilter>(`${this.base}${this.endpoint}/${id}`)
+            .catch(err => Observable.throw(err));
+        */
+        let filter = this.filters.find(f => f.id === id);
+        if (!filter) {
+            return Observable.throw('Not Found!');
+        }
+        return of(filter);
+    }
+
+    update(filter: MetadataFilter): Observable<MetadataFilter> {
+        /*
+        return this.http.put<MetadataFilter>(`${this.base}${this.endpoint}/${provider.id}`, provider);
+        */
+        let original = this.filters.find(f => f.id === filter.id);
+        Object.assign(original, filter);
+        return of(original);
+    }
+
+    save(filter: MetadataFilter): Observable<MetadataFilter> {
+        // return this.http.post<MetadataFilter>(`${this.base}${this.endpoint}`, provider);
+        const saved = {
+            ...filter,
+            id: `${filter.filterName}-${Date.now()}`,
+            createdDate: '2018-04-05T09:07:13.730',
+            modifiedDate: '2018-04-05T09:07:13.730'
+        };
+        console.log(saved);
+        this.filters.push(saved);
+        return Observable.of(saved);
+    }
+}
diff --git a/ui/src/app/metadata-filter/action/filter.action.spec.ts b/ui/src/app/metadata-filter/action/filter.action.spec.ts
index 45d2cda30..290f349cd 100644
--- a/ui/src/app/metadata-filter/action/filter.action.spec.ts
+++ b/ui/src/app/metadata-filter/action/filter.action.spec.ts
@@ -3,11 +3,6 @@ import * as actions from './filter.action';
 describe('Filter Actions', () => {
     it('should provide actions', () => {
         expect(new actions.CancelCreateFilter().type).toBe(actions.CANCEL_CREATE_FILTER);
-        expect(new actions.CancelViewMore().type).toBe(actions.CANCEL_VIEW_MORE);
-        expect(new actions.QueryEntityIds({term: 'foo'}).type).toBe(actions.QUERY_ENTITY_IDS);
-        expect(new actions.LoadEntityIdsSuccess([]).type).toBe(actions.LOAD_ENTITY_IDS_SUCCESS);
-        expect(new actions.LoadEntityIdsError(new Error('Foobar!')).type).toBe(actions.LOAD_ENTITY_IDS_ERROR);
-        expect(new actions.ViewMoreIds('foo').type).toBe(actions.VIEW_MORE_IDS);
         expect(new actions.SelectId('foo').type).toBe(actions.SELECT_ID);
     });
 });
diff --git a/ui/src/app/metadata-filter/action/filter.action.ts b/ui/src/app/metadata-filter/action/filter.action.ts
index 5eeada1ea..a75ddae64 100644
--- a/ui/src/app/metadata-filter/action/filter.action.ts
+++ b/ui/src/app/metadata-filter/action/filter.action.ts
@@ -3,74 +3,36 @@ import { Action } from '@ngrx/store';
 import { QueryParams } from '../../core/model/query';
 import { MetadataFilter } from '../../domain/model/metadata-filter';
 
-export const QUERY_ENTITY_IDS = '[Filter] Query Entity Ids';
-export const VIEW_MORE_IDS = '[Filter] View More Ids Modal';
-export const CANCEL_VIEW_MORE = '[Filter] Cancel View More';
 export const SELECT_ID = '[Filter] Select Entity ID';
-export const LOAD_ENTITY_IDS_SUCCESS = '[Entity ID Collection] Load Entity Ids Success';
-export const LOAD_ENTITY_IDS_ERROR = '[Entity ID Collection] Load Entity Ids Error';
 
 export const CREATE_FILTER = '[Filter] Create Filter';
 export const UPDATE_FILTER = '[Filter] Update Filter';
 export const CANCEL_CREATE_FILTER = '[Filter] Cancel Create Filter';
 
-export class QueryEntityIds implements Action {
-    readonly type = QUERY_ENTITY_IDS;
-
-    constructor(public payload: QueryParams) { }
-}
-
-export class ViewMoreIds implements Action {
-    readonly type = VIEW_MORE_IDS;
-
-    constructor(public payload: string) {  }
-}
-
-export class CancelViewMore implements Action {
-    readonly type = CANCEL_VIEW_MORE;
-}
-
 export class SelectId implements Action {
     readonly type = SELECT_ID;
 
     constructor(public payload: string) { }
 }
 
-export class LoadEntityIdsSuccess implements Action {
-    readonly type = LOAD_ENTITY_IDS_SUCCESS;
-
-    constructor(public payload: string[]) { }
-}
-
-export class LoadEntityIdsError implements Action {
-    readonly type = LOAD_ENTITY_IDS_ERROR;
-
-    constructor(public payload: Error) { }
-}
-
 export class CreateFilter implements Action {
     readonly type = CREATE_FILTER;
 
     constructor(public payload: MetadataFilter) { }
 }
 
-export class UpdateFilter implements Action {
+export class CancelCreateFilter implements Action {
+    readonly type = CANCEL_CREATE_FILTER;
+}
+
+export class UpdateFilterChanges implements Action {
     readonly type = UPDATE_FILTER;
 
     constructor(public payload: Partial<MetadataFilter>) { }
 }
 
-export class CancelCreateFilter implements Action {
-    readonly type = CANCEL_CREATE_FILTER;
-}
-
 export type Actions =
-    | ViewMoreIds
-    | CancelViewMore
     | SelectId
-    | LoadEntityIdsSuccess
-    | LoadEntityIdsError
-    | QueryEntityIds
     | CreateFilter
-    | UpdateFilter
+    | UpdateFilterChanges
     | CancelCreateFilter;
diff --git a/ui/src/app/metadata-filter/component/filter-form.component.scss b/ui/src/app/metadata-filter/action/search.action.spec.ts
similarity index 100%
rename from ui/src/app/metadata-filter/component/filter-form.component.scss
rename to ui/src/app/metadata-filter/action/search.action.spec.ts
diff --git a/ui/src/app/metadata-filter/action/search.action.ts b/ui/src/app/metadata-filter/action/search.action.ts
new file mode 100644
index 000000000..75f7da0c9
--- /dev/null
+++ b/ui/src/app/metadata-filter/action/search.action.ts
@@ -0,0 +1,44 @@
+import { Action } from '@ngrx/store';
+
+import { QueryParams } from '../../core/model/query';
+
+export const QUERY_ENTITY_IDS = '[Filter] Query Entity Ids';
+export const VIEW_MORE_IDS = '[Filter] View More Ids Modal';
+export const CANCEL_VIEW_MORE = '[Filter] Cancel View More';
+export const LOAD_ENTITY_IDS_SUCCESS = '[Entity ID Collection] Load Entity Ids Success';
+export const LOAD_ENTITY_IDS_ERROR = '[Entity ID Collection] Load Entity Ids Error';
+
+export class QueryEntityIds implements Action {
+    readonly type = QUERY_ENTITY_IDS;
+
+    constructor(public payload: QueryParams) { }
+}
+
+export class ViewMoreIds implements Action {
+    readonly type = VIEW_MORE_IDS;
+
+    constructor(public payload: string) { }
+}
+
+export class CancelViewMore implements Action {
+    readonly type = CANCEL_VIEW_MORE;
+}
+
+export class LoadEntityIdsSuccess implements Action {
+    readonly type = LOAD_ENTITY_IDS_SUCCESS;
+
+    constructor(public payload: string[]) { }
+}
+
+export class LoadEntityIdsError implements Action {
+    readonly type = LOAD_ENTITY_IDS_ERROR;
+
+    constructor(public payload: Error) { }
+}
+
+export type Actions =
+    | ViewMoreIds
+    | CancelViewMore
+    | LoadEntityIdsSuccess
+    | LoadEntityIdsError
+    | QueryEntityIds;
diff --git a/ui/src/app/metadata-filter/component/filter-form.component.html b/ui/src/app/metadata-filter/component/filter-form.component.html
deleted file mode 100644
index 685c1c693..000000000
--- a/ui/src/app/metadata-filter/component/filter-form.component.html
+++ /dev/null
@@ -1,144 +0,0 @@
-<form [formGroup]="form">
-    <div class="row">
-        <div class="col-lg-6 col-xs-9 ">
-            <fieldset class="">
-                <div class="form-group">
-                    <div class="row">
-                        <label for="filterName" class="col-sm-10">
-                            <span>
-                                <ng-container i18n="@@label--filter-name">
-                                    Filter Name
-                                </ng-container>
-                                <ng-container i18n="@@label--dashboard-display-only">
-                                    (Dashboard Display Only)
-                                </ng-container>
-                                <i class="fa fa-asterisk text-danger" aria-hidden="true"></i>
-                            </span>
-                        </label>
-                        <span class="text-right col-sm-2">
-                            <ng-template #tooltipFilterName i18n="@@tooltip--filter-name">Filter Name</ng-template>
-                            <i class="info-icon fa fa-info-circle text-primary fa-lg"
-                                [ngbPopover]="tooltipFilterName"
-                                i18n-aria-label="@@tooltip--instruction"
-                                aria-label="Information icon - press spacebar to read additional information for this form field"></i>
-                        </span>
-                    </div>
-                    <input id="filterName" type="text" class="form-control" placeholder="" formControlName="filterName" />
-                    <ng-container *ngIf="form.get('filterName').touched && form.get('filterName').invalid">
-                        <small class="form-text text-danger" *ngIf="form.get('filterName').hasError('required')">
-                            <ng-container i18n="@@message--service-provider-name-required">Filter Name is required</ng-container>
-                        </small>
-                    </ng-container>
-                </div>
-                <div class="form-group">
-                    <div class="row">
-                        <label for="entityId" class="col-sm-10">
-                            <span>
-                                <ng-container i18n="@@label--search-entity-id">Search Entity ID</ng-container>
-                                <i class="fa fa-asterisk text-danger" aria-hidden="true"></i>
-                                <i class="fa fa-spinner fa-pulse fa-fw" *ngIf="processing$ | async"></i>
-                            </span>
-                        </label>
-                        <span class="text-right col-sm-2">
-                            <ng-template #tooltipFilterEntityId i18n="@@tooltip--search-entity-id">Search Entity ID</ng-template>
-                            <i class="info-icon fa fa-info-circle text-primary fa-lg"
-                                [ngbPopover]="tooltipFilterEntityId"
-                                i18n-aria-label="@@tooltip--instruction"
-                                aria-label="Information icon - press spacebar to read additional information for this form field"></i>
-                        </span>
-                    </div>
-                    <label for="entityId" class="sr-only">Search Entity ID</label>
-                    <auto-complete
-                        id="entityId"
-                        class="component-control"
-                        formControlName="entityId"
-                        limit="10"
-                        [matches]="entityIds$ | async"
-                        [required]="true"
-                        [processing]="(processing$ | async)"
-                        (more)="onViewMore($event)">
-                    </auto-complete>
-                    <ng-container *ngIf="form.get('entityId').touched && form.get('entityId').invalid">
-                        <small class="form-text text-danger">
-                            <ng-container *ngIf="form.get('entityId').hasError('required')" i18n="@@message--entity-id-required">Entity ID is required</ng-container>
-                            <ng-container *ngIf="form.get('entityId').hasError('exists')" i18n="@@message--entity-id-not-found">Entity ID not found</ng-container>
-                        </small>
-                    </ng-container>
-                </div>
-            </fieldset>
-        </div>
-        <div class="col-lg-6 col-xs-3 text-right">
-            <!--
-                <button (click)="onPreview.emit()" type="submit" class="btn btn-success">
-                    <i class="fa fa-eye fa-lg"></i>
-                    <ng-container i18n="@@action--preview-xml">Preview XML</ng-container>
-                </button>
-            -->
-            <button (click)="onSave.emit(provider)" type="submit" class="btn btn-primary" [disabled]="form.invalid">
-                <i class="fa fa-save fa-lg"></i>
-                <ng-container i18n="@@action--save-changes">Save Changes</ng-container>
-            </button>
-            <button (click)="onCancel.emit()" type="reset" class="btn btn-secondary">
-                <ng-container i18n="@@action--cancel">Cancel</ng-container>
-            </button>
-        </div>
-    </div>
-    <section *ngIf="form.valid">
-        <hr />
-        <div class="row">
-            <fieldset class="col-lg-6">
-                <div class="form-group">
-                    <div class="row">
-                        <label for="filterName" class="col-sm-10">
-                            <span>
-                                <ng-container i18n="@@label--xml-preview">
-                                    Entity ID XML Preview (read-only)
-                                </ng-container>
-                            </span>
-                        </label>
-                        <span class="text-right col-sm-2">
-                            <ng-template #tooltipFilterName i18n="@@tooltip--xml-preview">XML Preview</ng-template>
-                            <i class="info-icon fa fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipFilterName" i18n-aria-label="@@tooltip--instruction"
-                                aria-label="Information icon - press spacebar to read additional information for this form field"></i>
-                        </span>
-                    </div>
-                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="4" readonly></textarea>
-                </div>
-            </fieldset>
-        </div>
-        <div class="row">
-            <div class="col-12">
-                <div class="form-group">
-                    <div class="custom-control custom-checkbox custom-control-inline custom-control-reverse" for="filterEnabled">
-                        <input disableValidation="true"
-                            class="custom-control-input"
-                            type="checkbox"
-                            formControlName="filterEnabled"
-                            id="filterEnabled"
-                            name="filterEnabled"
-                            role="checkbox">
-                        <label class="custom-control-label"
-                            i18n="@@label--enable-this-filter"
-                            for="filterEnabled"
-                            aria-label="Enable this filter?">
-                            Enable this filter?
-                        </label>
-                    </div>
-                    <ng-template #tooltipEnableThisFilterUponSaving i18n="@@tooltip--enable-this-filter-upon-saving">Enable this filter upon saving popover</ng-template>
-                    <i class="info-icon fa fa-info-circle text-primary fa-lg"
-                       [ngbPopover]="tooltipEnableThisFilterUponSaving"
-                       i18n-aria-label="@@tooltip--instruction"
-                       role="tooltip"></i>
-                </div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-lg-6">
-                <relying-party-form [provider]="provider"></relying-party-form>
-            </div>
-            <div class="col-lg-6">
-                <attribute-release-form [provider]="provider"></attribute-release-form>
-            </div>
-        </div>
-    </section>
-</form>
diff --git a/ui/src/app/metadata-filter/component/filter-form.component.spec.ts b/ui/src/app/metadata-filter/component/filter-form.component.spec.ts
deleted file mode 100644
index c27808310..000000000
--- a/ui/src/app/metadata-filter/component/filter-form.component.spec.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { TestBed, ComponentFixture } from '@angular/core/testing';
-import { ReactiveFormsModule, FormBuilder } from '@angular/forms';
-import { StoreModule, Store, combineReducers } from '@ngrx/store';
-import { FilterFormComponent } from './filter-form.component';
-import * as fromFilter from '../reducer';
-import { ProviderEditorFormModule } from '../../metadata-provider/component';
-import { ProviderStatusEmitter, ProviderValueEmitter } from '../../domain/service/provider-change-emitter.service';
-import { NgbPopoverModule, NgbPopoverConfig, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
-import { NavigatorService } from '../../core/service/navigator.service';
-import { SharedModule } from '../../shared/shared.module';
-
-describe('Metadata Filter Form Component', () => {
-    let fixture: ComponentFixture<FilterFormComponent>;
-    let store: Store<fromFilter.State>;
-    let instance: FilterFormComponent;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            providers: [
-                ProviderStatusEmitter,
-                ProviderValueEmitter,
-                FormBuilder,
-                NgbPopoverConfig,
-                NavigatorService
-            ],
-            imports: [
-                StoreModule.forRoot({
-                    'metadata-filter': combineReducers(fromFilter.reducers),
-                }),
-                ReactiveFormsModule,
-                ProviderEditorFormModule,
-                NgbPopoverModule,
-                NgbModalModule,
-                SharedModule
-            ],
-            declarations: [FilterFormComponent],
-        });
-
-        fixture = TestBed.createComponent(FilterFormComponent);
-        instance = fixture.componentInstance;
-        store = TestBed.get(Store);
-
-        spyOn(store, 'dispatch').and.callThrough();
-    });
-
-    it('should compile', () => {
-        fixture.detectChanges();
-
-        expect(fixture).toBeDefined();
-    });
-
-    describe('searchEntityIds method', () => {
-        it('should NOT dispatch a loadEntityIds action until there are 4 or more characters', () => {
-            fixture.detectChanges();
-            instance.searchEntityIds('foo');
-            expect(store.dispatch).not.toHaveBeenCalled();
-        });
-
-        it('should dispatch a loadEntityIds action', () => {
-            fixture.detectChanges();
-            instance.searchEntityIds('foo-');
-            expect(store.dispatch).toHaveBeenCalled();
-        });
-    });
-
-    describe('onViewMore method', () => {
-        it('should dispatch a viewMoreEntityIds action', () => {
-            fixture.detectChanges();
-            instance.onViewMore('foo');
-            expect(store.dispatch).toHaveBeenCalled();
-        });
-    });
-});
diff --git a/ui/src/app/metadata-filter/component/filter-form.component.ts b/ui/src/app/metadata-filter/component/filter-form.component.ts
deleted file mode 100644
index 284cf9469..000000000
--- a/ui/src/app/metadata-filter/component/filter-form.component.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import { Component, OnInit, OnChanges, OnDestroy, Input, Output, EventEmitter, SimpleChanges } from '@angular/core';
-import { FormBuilder, FormArray, Validators } from '@angular/forms';
-import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/of';
-import 'rxjs/add/operator/takeWhile';
-
-import * as fromFilter from '../reducer';
-import { ProviderFormFragmentComponent } from '../../metadata-provider/component/forms/provider-form-fragment.component';
-import { ProviderStatusEmitter, ProviderValueEmitter } from '../../domain/service/provider-change-emitter.service';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { SearchDialogComponent } from '../component/search-dialog.component';
-import { ViewMoreIds, CancelCreateFilter, QueryEntityIds } from '../action/filter.action';
-import { EntityValidators } from '../../domain/service/entity-validators.service';
-import { MetadataProvider } from '../../domain/model/metadata-provider';
-import { MetadataFilter } from '../../domain/domain.type';
-
-@Component({
-    selector: 'filter-form',
-    templateUrl: './filter-form.component.html'
-})
-export class FilterFormComponent extends ProviderFormFragmentComponent implements OnInit, OnDestroy {
-
-    @Input() entity: MetadataFilter;
-
-    @Output() onSave: EventEmitter<MetadataProvider> = new EventEmitter<MetadataProvider>();
-    @Output() onCancel: EventEmitter<MetadataProvider> = new EventEmitter<MetadataProvider>();
-    @Output() onPreview: EventEmitter<any> = new EventEmitter<any>();
-
-    ids: string[];
-    entityIds$: Observable<string[]>;
-    showMore$: Observable<boolean>;
-    selected$: Observable<string>;
-    loading$: Observable<boolean>;
-    processing$: Observable<boolean>;
-
-    nameIdFormatList: FormArray;
-    authenticationMethodList: FormArray;
-
-    constructor(
-        private store: Store<fromFilter.State>,
-        protected statusEmitter: ProviderStatusEmitter,
-        protected valueEmitter: ProviderValueEmitter,
-        protected fb: FormBuilder
-    ) {
-        super(fb, statusEmitter, valueEmitter);
-
-        this.showMore$ = this.store.select(fromFilter.getViewingMore);
-        this.selected$ = this.store.select(fromFilter.getSelected);
-        this.entityIds$ = this.store.select(fromFilter.getEntityCollection);
-        this.loading$ = this.store.select(fromFilter.getIsLoading);
-        this.processing$ = this.loading$.withLatestFrom(this.showMore$, (l, s) => !s && l);
-
-        this.entityIds$.subscribe(ids => this.ids = ids);
-
-        this.selected$.subscribe(s => {
-            this.form.patchValue({
-                entityId: s
-            });
-        });
-    }
-
-    createForm(): void {
-        this.form = this.fb.group({
-            entityId: ['', [Validators.required]],
-            filterName: ['', [Validators.required]],
-            filterEnabled: [false]
-        });
-    }
-
-    ngOnInit(): void {
-        super.ngOnInit();
-        let id = this.form.get('entityId');
-        id.setAsyncValidators([EntityValidators.existsInCollection(this.entityIds$)]);
-        id.valueChanges
-            .distinctUntilChanged()
-            .subscribe(query => this.searchEntityIds(query));
-    }
-
-    ngOnDestroy(): void { }
-
-    searchEntityIds(term: string): void {
-        if (term.length >= 4 && this.ids.indexOf(term) < 0) {
-            this.store.dispatch(new QueryEntityIds({
-                term,
-                limit: 10
-            }));
-        }
-    }
-
-    onViewMore(query: string): void {
-        this.store.dispatch(new ViewMoreIds(query));
-    }
-}
diff --git a/ui/src/app/metadata-filter/component/preview-filter.component.ts b/ui/src/app/metadata-filter/component/preview-filter.component.ts
index 70c1193c3..06c654da3 100644
--- a/ui/src/app/metadata-filter/component/preview-filter.component.ts
+++ b/ui/src/app/metadata-filter/component/preview-filter.component.ts
@@ -4,7 +4,7 @@ import { Observable } from 'rxjs/Observable';
 import { Store } from '@ngrx/store';
 
 import * as fromFilter from '../reducer';
-import { QueryEntityIds } from '../action/filter.action';
+import { QueryEntityIds } from '../action/search.action';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { MetadataFilter } from '../../domain/domain.type';
 
diff --git a/ui/src/app/metadata-filter/component/search-dialog.component.ts b/ui/src/app/metadata-filter/component/search-dialog.component.ts
index 21de7fb4a..234ab268f 100644
--- a/ui/src/app/metadata-filter/component/search-dialog.component.ts
+++ b/ui/src/app/metadata-filter/component/search-dialog.component.ts
@@ -4,7 +4,7 @@ import { Observable } from 'rxjs/Observable';
 import { Store } from '@ngrx/store';
 
 import * as fromFilter from '../reducer';
-import { QueryEntityIds } from '../action/filter.action';
+import { QueryEntityIds } from '../action/search.action';
 import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
diff --git a/ui/src/app/metadata-filter/container/edit-filter.component.html b/ui/src/app/metadata-filter/container/edit-filter.component.html
new file mode 100644
index 000000000..189e235e1
--- /dev/null
+++ b/ui/src/app/metadata-filter/container/edit-filter.component.html
@@ -0,0 +1,162 @@
+<div class="container-fluid p-3" role="main">
+    <section class="section">
+        <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-gears"></i>
+                        <ng-container i18n="@@label--edit-filter">Edit Filter - {{ (filter$ | async).filterName }}</ng-container>
+                    </span>
+                </div>
+            </div>
+        </div>
+        <div class="section-body p-4 border border-top-0 border-info">
+            <form [formGroup]="form">
+                <div class="row">
+                    <div class="col-lg-6 col-xs-9 ">
+                        <fieldset class="">
+                            <div class="form-group">
+                                <div class="row">
+                                    <label for="filterName" class="col-sm-10">
+                                        <span>
+                                            <ng-container i18n="@@label--filter-name">
+                                                Filter Name
+                                            </ng-container>
+                                            <ng-container i18n="@@label--dashboard-display-only">
+                                                (Dashboard Display Only)
+                                            </ng-container>
+                                            <i class="fa fa-asterisk text-danger" aria-hidden="true"></i>
+                                        </span>
+                                    </label>
+                                    <span class="text-right col-sm-2">
+                                        <ng-template #tooltipFilterName i18n="@@tooltip--filter-name">Filter Name</ng-template>
+                                        <i class="info-icon fa fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipFilterName" i18n-aria-label="@@tooltip--instruction"
+                                            aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                                    </span>
+                                </div>
+                                <input id="filterName" type="text" class="form-control" placeholder="" formControlName="filterName" />
+                                <ng-container *ngIf="form.get('filterName').touched && form.get('filterName').invalid">
+                                    <small class="form-text text-danger" *ngIf="form.get('filterName').hasError('required')">
+                                        <ng-container i18n="@@message--service-provider-name-required">Filter Name is required</ng-container>
+                                    </small>
+                                </ng-container>
+                            </div>
+                            <div class="form-group">
+                                <div class="row">
+                                    <label for="entityId" class="col-sm-10">
+                                        <span>
+                                            <ng-container i18n="@@label--search-entity-id">Search Entity ID</ng-container>
+                                            <i class="fa fa-asterisk text-danger" aria-hidden="true"></i>
+                                            <i class="fa fa-spinner fa-pulse fa-fw" *ngIf="processing$ | async"></i>
+                                        </span>
+                                    </label>
+                                    <span class="text-right col-sm-2">
+                                        <ng-template #tooltipFilterEntityId i18n="@@tooltip--search-entity-id">Search Entity ID</ng-template>
+                                        <i class="info-icon fa fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipFilterEntityId" i18n-aria-label="@@tooltip--instruction"
+                                            aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                                    </span>
+                                </div>
+                                <label for="entityId" class="sr-only">Search Entity ID</label>
+                                <div class="row">
+                                    <auto-complete id="entityId"
+                                        #entityInput
+                                        class="component-control col-10"
+                                        formControlName="entityId"
+                                        limit="10"
+                                        [matches]="entityIds$ | async"
+                                        [required]="true"
+                                        [processing]="(processing$ | async)"
+                                        (more)="onViewMore($event)">
+                                    </auto-complete>
+                                    <div class="col-2">
+                                        <button
+                                            *ngIf="form.get('entityId').disabled"
+                                            class="btn btn-block btn-secondary"
+                                            type="button"
+                                            (click)="onChangeId()">
+                                            Change ID
+                                        </button>
+                                        <button
+                                            *ngIf="form.get('entityId').enabled"
+                                            class="btn btn-block btn-outline-secondary"
+                                            type="button"
+                                            (click)="onCancelChangeId()">
+                                            Cancel
+                                        </button>
+                                    </div>
+                                </div>
+                                <ng-container *ngIf="form.get('entityId').touched && form.get('entityId').invalid">
+                                    <small class="form-text text-danger">
+                                        <ng-container *ngIf="form.get('entityId').hasError('required')" i18n="@@message--entity-id-required">Entity ID is required</ng-container>
+                                        <ng-container *ngIf="form.get('entityId').hasError('exists')" i18n="@@message--entity-id-not-found">Entity ID not found</ng-container>
+                                    </small>
+                                </ng-container>
+                            </div>
+                        </fieldset>
+                    </div>
+                    <div class="col-lg-6 col-xs-3 text-right">
+                        <button (click)="this.preview()" type="submit" class="btn btn-success">
+                            <i class="fa fa-eye fa-lg"></i>
+                            <ng-container i18n="@@action--save-changes">Preview XML</ng-container>
+                        </button>
+                        <button (click)="this.save()" type="submit" class="btn btn-primary" [disabled]="form.invalid">
+                            <i class="fa fa-save fa-lg"></i>
+                            <ng-container i18n="@@action--save-changes">Save Changes</ng-container>
+                        </button>
+                        <button (click)="this.cancel()" type="reset" class="btn btn-secondary">
+                            <ng-container i18n="@@action--cancel">Cancel</ng-container>
+                        </button>
+                    </div>
+                </div>
+                <section>
+                    <hr />
+                    <div class="row">
+                        <fieldset class="col-lg-6">
+                            <div class="form-group">
+                                <div class="row">
+                                    <label for="filterName" class="col-sm-10">
+                                        <span>
+                                            <ng-container i18n="@@label--xml-preview">
+                                                Entity ID XML Preview (read-only)
+                                            </ng-container>
+                                        </span>
+                                    </label>
+                                    <span class="text-right col-sm-2">
+                                        <ng-template #tooltipFilterName i18n="@@tooltip--xml-preview">XML Preview</ng-template>
+                                        <i class="info-icon fa fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipFilterName" i18n-aria-label="@@tooltip--instruction"
+                                            aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                                    </span>
+                                </div>
+                                <textarea class="form-control" id="xmlPreview" rows="4" readonly></textarea>
+                            </div>
+                        </fieldset>
+                    </div>
+                    <div class="row">
+                        <div class="col-12">
+                            <div class="form-group">
+                                <div class="custom-control custom-checkbox custom-control-inline custom-control-reverse" for="filterEnabled">
+                                    <input disableValidation="true" class="custom-control-input" type="checkbox" formControlName="filterEnabled" id="filterEnabled"
+                                        name="filterEnabled" role="checkbox">
+                                    <label class="custom-control-label" i18n="@@label--enable-this-filter" for="filterEnabled" aria-label="Enable this filter?">
+                                        Enable this filter?
+                                    </label>
+                                </div>
+                                <ng-template #tooltipEnableThisFilterUponSaving i18n="@@tooltip--enable-this-filter-upon-saving">Enable this filter upon saving popover</ng-template>
+                                <i class="info-icon fa fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipEnableThisFilterUponSaving" i18n-aria-label="@@tooltip--instruction"
+                                    role="tooltip"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row" *ngIf="filter$ | async">
+                        <div class="col-lg-6">
+                            <relying-party-form [provider]="filter$ | async"></relying-party-form>
+                        </div>
+                        <div class="col-lg-6">
+                            <attribute-release-form [provider]="filter$ | async"></attribute-release-form>
+                        </div>
+                    </div>
+                </section>
+            </form>
+        </div>
+    </section>
+</div>
\ No newline at end of file
diff --git a/ui/src/app/metadata-filter/container/edit-filter.component.spec.ts b/ui/src/app/metadata-filter/container/edit-filter.component.spec.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/src/app/metadata-filter/container/edit-filter.component.ts b/ui/src/app/metadata-filter/container/edit-filter.component.ts
new file mode 100644
index 000000000..6cc96f193
--- /dev/null
+++ b/ui/src/app/metadata-filter/container/edit-filter.component.ts
@@ -0,0 +1,153 @@
+import { Component, OnInit, OnDestroy, SimpleChanges, ViewChild, ElementRef } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs/Observable';
+import { Subject } from 'rxjs/Subject';
+import 'rxjs/add/observable/of';
+import 'rxjs/add/operator/takeWhile';
+import 'rxjs/add/observable/fromPromise';
+
+import * as fromRoot from '../../app.reducer';
+import * as fromFilter from '../reducer';
+import * as fromCollection from '../../domain/reducer';
+import { ProviderStatusEmitter, ProviderValueEmitter } from '../../domain/service/provider-change-emitter.service';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import { CancelCreateFilter, SelectId, CreateFilter, UpdateFilterChanges } from '../action/filter.action';
+import { AddFilterRequest, UpdateFilterRequest } from '../../domain/action/filter-collection.action';
+import { MetadataFilter } from '../../domain/model/metadata-filter';
+import { Filter } from '../../domain/entity/filter';
+import { EntityValidators } from '../../domain/service/entity-validators.service';
+import { SearchDialogComponent } from '../component/search-dialog.component';
+import { QueryEntityIds, ViewMoreIds } from '../action/search.action';
+import { AutoCompleteComponent } from '../../shared/autocomplete/autocomplete.component';
+
+@Component({
+    selector: 'edit-filter-page',
+    templateUrl: './edit-filter.component.html'
+})
+export class EditFilterComponent implements OnInit, OnDestroy {
+
+    @ViewChild(AutoCompleteComponent) entityInput: AutoCompleteComponent;
+
+    private ngUnsubscribe: Subject<void> = new Subject<void>();
+
+    changeId = false;
+
+    changes$: Observable<MetadataFilter>;
+    changes: MetadataFilter;
+
+    ids: string[];
+    entityIds$: Observable<string[]>;
+    showMore$: Observable<boolean>;
+    selected$: Observable<string>;
+    filter$: Observable<MetadataFilter>;
+    loading$: Observable<boolean>;
+    processing$: Observable<boolean>;
+
+    form: FormGroup = this.fb.group({
+        entityId: ['', [Validators.required]],
+        filterName: ['', [Validators.required]],
+        filterEnabled: [false]
+    });
+
+    filter: MetadataFilter;
+
+    isValid = false;
+
+    constructor(
+        private store: Store<fromRoot.State>,
+        private valueEmitter: ProviderValueEmitter,
+        private fb: FormBuilder
+    ) {
+        this.changes$ = this.store.select(fromFilter.getFilter);
+        this.changes$.subscribe(c => this.changes = c);
+
+        this.showMore$ = this.store.select(fromFilter.getViewingMore);
+        this.selected$ = this.store.select(fromFilter.getSelected);
+        this.filter$ = this.store.select(fromCollection.getSelectedFilter);
+        this.entityIds$ = this.store.select(fromFilter.getEntityCollection);
+        this.loading$ = this.store.select(fromFilter.getIsLoading);
+        this.processing$ = this.loading$.withLatestFrom(this.showMore$, (l, s) => !s && l);
+
+        this.entityIds$.subscribe(ids => this.ids = ids);
+
+        this.filter$.subscribe(filter => {
+            let { entityId, filterName, filterEnabled } = filter;
+            this.form.reset({
+                entityId,
+                filterName,
+                filterEnabled
+            });
+            this.filter = filter;
+        });
+    }
+
+    ngOnInit(): void {
+        let id = this.form.get('entityId');
+        id.valueChanges
+            .distinctUntilChanged()
+            .subscribe(query => this.searchEntityIds(query));
+
+        this.form
+            .valueChanges
+            .takeUntil(this.ngUnsubscribe)
+            .startWith(this.form.value)
+            .subscribe(changes => this.store.dispatch(new UpdateFilterChanges(changes)));
+        this.valueEmitter
+            .changeEmitted$
+            .takeUntil(this.ngUnsubscribe)
+            .startWith(this.form.value)
+            .subscribe(changes => this.store.dispatch(new UpdateFilterChanges(changes)));
+
+        this.form.get('entityId').disable();
+    }
+
+    ngOnDestroy(): void {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+
+    onChangeId(): void {
+        const input = this.form.get('entityId');
+        input.enable();
+        input.setAsyncValidators(EntityValidators.existsInCollection(this.store.select(fromFilter.getEntityCollection)));
+        input.reset('');
+        this.entityInput.inputField.nativeElement.focus();
+    }
+
+    onCancelChangeId(): void {
+        const input = this.form.get('entityId');
+        input.disable();
+        input.clearAsyncValidators();
+        input.reset(this.filter.entityId);
+    }
+
+    searchEntityIds(term: string): void {
+        if (term.length >= 4 && this.ids.indexOf(term) < 0) {
+            this.store.dispatch(new QueryEntityIds({
+                term,
+                limit: 10
+            }));
+        }
+    }
+
+    onViewMore(query: string): void {
+        this.store.dispatch(new ViewMoreIds(query));
+    }
+
+    onStatusChange(status): void {
+        this.isValid = status === 'VALID';
+    }
+
+    save(): void {
+        this.store.dispatch(new UpdateFilterRequest({...this.filter, ...this.changes}));
+    }
+
+    cancel(): void {
+        this.store.dispatch(new CancelCreateFilter());
+    }
+
+    preview(): void {
+        console.log('preview XML');
+    }
+}
diff --git a/ui/src/app/metadata-filter/container/filter.component.html b/ui/src/app/metadata-filter/container/filter.component.html
new file mode 100644
index 000000000..90c6b6463
--- /dev/null
+++ b/ui/src/app/metadata-filter/container/filter.component.html
@@ -0,0 +1 @@
+<router-outlet></router-outlet>
\ No newline at end of file
diff --git a/ui/src/app/metadata-filter/container/filter.component.scss b/ui/src/app/metadata-filter/container/filter.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/src/app/metadata-filter/container/filter.component.spec.ts b/ui/src/app/metadata-filter/container/filter.component.spec.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/src/app/metadata-filter/container/filter.component.ts b/ui/src/app/metadata-filter/container/filter.component.ts
new file mode 100644
index 000000000..254447f20
--- /dev/null
+++ b/ui/src/app/metadata-filter/container/filter.component.ts
@@ -0,0 +1,39 @@
+import { Component, Output, Input, EventEmitter, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
+import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import { Subscription } from 'rxjs/Subscription';
+import { Store } from '@ngrx/store';
+import { NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
+
+import { MetadataFilter } from '../../domain/model/metadata-filter';
+import { SelectFilter } from '../../domain/action/filter-collection.action';
+import * as fromFilters from '../reducer';
+import * as fromCollection from '../../domain/reducer';
+
+@Component({
+    selector: 'filter-page',
+    templateUrl: './filter.component.html',
+    styleUrls: ['./filter.component.scss'],
+    providers: [NgbPopoverConfig]
+})
+export class FilterComponent implements OnDestroy {
+    actionsSubscription: Subscription;
+    filter$: Observable<MetadataFilter>;
+
+    constructor(
+        private store: Store<fromFilters.State>,
+        private route: ActivatedRoute
+    ) {
+        this.actionsSubscription = route.params
+            .distinctUntilChanged()
+            .map(params => new SelectFilter(params.id))
+            .subscribe(store);
+
+        this.filter$ = this.store.select(fromCollection.getSelectedFilter);
+    }
+
+    ngOnDestroy() {
+        this.actionsSubscription.unsubscribe();
+    }
+} /* istanbul ignore next */
diff --git a/ui/src/app/metadata-filter/container/new-filter.component.html b/ui/src/app/metadata-filter/container/new-filter.component.html
index 3b06fc284..34599235d 100644
--- a/ui/src/app/metadata-filter/container/new-filter.component.html
+++ b/ui/src/app/metadata-filter/container/new-filter.component.html
@@ -11,12 +11,123 @@
             </div>
         </div>
         <div class="section-body p-4 border border-top-0 border-info">
-            <filter-form
-                [provider]="filter"
-                (onSave)="save()"
-                (onCancel)="cancel()"
-                (onPreview)="preview()"
-                ></filter-form>
+            <form [formGroup]="form">
+                <div class="row">
+                    <div class="col-lg-6 col-xs-9 ">
+                        <fieldset class="">
+                            <div class="form-group">
+                                <div class="row">
+                                    <label for="filterName" class="col-sm-10">
+                                        <span>
+                                            <ng-container i18n="@@label--filter-name">
+                                                Filter Name
+                                            </ng-container>
+                                            <ng-container i18n="@@label--dashboard-display-only">
+                                                (Dashboard Display Only)
+                                            </ng-container>
+                                            <i class="fa fa-asterisk text-danger" aria-hidden="true"></i>
+                                        </span>
+                                    </label>
+                                    <span class="text-right col-sm-2">
+                                        <ng-template #tooltipFilterName i18n="@@tooltip--filter-name">Filter Name</ng-template>
+                                        <i class="info-icon fa fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipFilterName" i18n-aria-label="@@tooltip--instruction"
+                                            aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                                    </span>
+                                </div>
+                                <input id="filterName" type="text" class="form-control" placeholder="" formControlName="filterName" />
+                                <ng-container *ngIf="form.get('filterName').touched && form.get('filterName').invalid">
+                                    <small class="form-text text-danger" *ngIf="form.get('filterName').hasError('required')">
+                                        <ng-container i18n="@@message--service-provider-name-required">Filter Name is required</ng-container>
+                                    </small>
+                                </ng-container>
+                            </div>
+                            <div class="form-group">
+                                <div class="row">
+                                    <label for="entityId" class="col-sm-10">
+                                        <span>
+                                            <ng-container i18n="@@label--search-entity-id">Search Entity ID</ng-container>
+                                            <i class="fa fa-asterisk text-danger" aria-hidden="true"></i>
+                                            <i class="fa fa-spinner fa-pulse fa-fw" *ngIf="processing$ | async"></i>
+                                        </span>
+                                    </label>
+                                    <span class="text-right col-sm-2">
+                                        <ng-template #tooltipFilterEntityId i18n="@@tooltip--search-entity-id">Search Entity ID</ng-template>
+                                        <i class="info-icon fa fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipFilterEntityId" i18n-aria-label="@@tooltip--instruction"
+                                            aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                                    </span>
+                                </div>
+                                <label for="entityId" class="sr-only">Search Entity ID</label>
+                                <auto-complete id="entityId" class="component-control" formControlName="entityId" limit="10" [matches]="entityIds$ | async"
+                                    [required]="true" [processing]="(processing$ | async)" (more)="onViewMore($event)">
+                                </auto-complete>
+                                <ng-container *ngIf="form.get('entityId').touched && form.get('entityId').invalid">
+                                    <small class="form-text text-danger">
+                                        <ng-container *ngIf="form.get('entityId').hasError('required')" i18n="@@message--entity-id-required">Entity ID is required</ng-container>
+                                        <ng-container *ngIf="form.get('entityId').hasError('exists')" i18n="@@message--entity-id-not-found">Entity ID not found</ng-container>
+                                    </small>
+                                </ng-container>
+                            </div>
+                        </fieldset>
+                    </div>
+                    <div class="col-lg-6 col-xs-3 text-right">
+                        <button (click)="this.save()" type="submit" class="btn btn-primary" [disabled]="form.invalid">
+                            <i class="fa fa-save fa-lg"></i>
+                            <ng-container i18n="@@action--save-changes">Save Changes</ng-container>
+                        </button>
+                        <button (click)="this.cancel()" type="reset" class="btn btn-secondary">
+                            <ng-container i18n="@@action--cancel">Cancel</ng-container>
+                        </button>
+                    </div>
+                </div>
+                <section *ngIf="form.get('entityId').valid">
+                    <hr />
+                    <div class="row">
+                        <fieldset class="col-lg-6">
+                            <div class="form-group">
+                                <div class="row">
+                                    <label for="filterName" class="col-sm-10">
+                                        <span>
+                                            <ng-container i18n="@@label--xml-preview">
+                                                Entity ID XML Preview (read-only)
+                                            </ng-container>
+                                        </span>
+                                    </label>
+                                    <span class="text-right col-sm-2">
+                                        <ng-template #tooltipFilterName i18n="@@tooltip--xml-preview">XML Preview</ng-template>
+                                        <i class="info-icon fa fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipFilterName" i18n-aria-label="@@tooltip--instruction"
+                                            aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+                                    </span>
+                                </div>
+                                <textarea class="form-control" id="exampleFormControlTextarea1" rows="4" readonly></textarea>
+                            </div>
+                        </fieldset>
+                    </div>
+                    <div class="row">
+                        <div class="col-12">
+                            <div class="form-group">
+                                <div class="custom-control custom-checkbox custom-control-inline custom-control-reverse" for="filterEnabled">
+                                    <input disableValidation="true" class="custom-control-input" type="checkbox" formControlName="filterEnabled" id="filterEnabled"
+                                        name="filterEnabled" role="checkbox">
+                                    <label class="custom-control-label" i18n="@@label--enable-this-filter" for="filterEnabled" aria-label="Enable this filter?">
+                                        Enable this filter?
+                                    </label>
+                                </div>
+                                <ng-template #tooltipEnableThisFilterUponSaving i18n="@@tooltip--enable-this-filter-upon-saving">Enable this filter upon saving popover</ng-template>
+                                <i class="info-icon fa fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipEnableThisFilterUponSaving" i18n-aria-label="@@tooltip--instruction"
+                                    role="tooltip"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-lg-6">
+                            <relying-party-form [provider]="filter"></relying-party-form>
+                        </div>
+                        <div class="col-lg-6">
+                            <attribute-release-form [provider]="filter"></attribute-release-form>
+                        </div>
+                    </div>
+                </section>
+            </form>
         </div>
     </section>
 </div>
diff --git a/ui/src/app/metadata-filter/container/new-filter.component.spec.ts b/ui/src/app/metadata-filter/container/new-filter.component.spec.ts
index b64869d1f..5872424fc 100644
--- a/ui/src/app/metadata-filter/container/new-filter.component.spec.ts
+++ b/ui/src/app/metadata-filter/container/new-filter.component.spec.ts
@@ -8,7 +8,6 @@ import { ProviderStatusEmitter, ProviderValueEmitter } from '../../domain/servic
 import { NgbPopoverModule, NgbPopoverConfig, NgbModalModule, NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { NavigatorService } from '../../core/service/navigator.service';
 import { SharedModule } from '../../shared/shared.module';
-import { FilterFormComponent } from '../component/filter-form.component';
 
 describe('New Metadata Filter Page', () => {
     let fixture: ComponentFixture<NewFilterComponent>;
@@ -34,8 +33,7 @@ describe('New Metadata Filter Page', () => {
                 SharedModule
             ],
             declarations: [
-                NewFilterComponent,
-                FilterFormComponent
+                NewFilterComponent
             ],
         });
 
diff --git a/ui/src/app/metadata-filter/container/new-filter.component.ts b/ui/src/app/metadata-filter/container/new-filter.component.ts
index cdf20e302..3717fabf1 100644
--- a/ui/src/app/metadata-filter/container/new-filter.component.ts
+++ b/ui/src/app/metadata-filter/container/new-filter.component.ts
@@ -1,23 +1,23 @@
-import { Component, OnInit, OnChanges, OnDestroy } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { Component, OnInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
+import { Subject } from 'rxjs/Subject';
+import { Subscription } from 'rxjs/Subscription';
 import 'rxjs/add/observable/of';
 import 'rxjs/add/operator/takeWhile';
 import 'rxjs/add/observable/fromPromise';
 
 import * as fromFilter from '../reducer';
-import { ProviderFormFragmentComponent } from '../../metadata-provider/component/forms/provider-form-fragment.component';
 import { ProviderStatusEmitter, ProviderValueEmitter } from '../../domain/service/provider-change-emitter.service';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
-import { SearchDialogComponent } from '../component/search-dialog.component';
-import { ViewMoreIds, CancelCreateFilter, QueryEntityIds, CreateFilter, UpdateFilter } from '../action/filter.action';
-import { SaveFilter } from '../../domain/action/filter-collection.action';
-import { EntityValidators } from '../../domain/service/entity-validators.service';
+import { CancelCreateFilter, SelectId, CreateFilter, UpdateFilterChanges } from '../action/filter.action';
+import { AddFilterRequest } from '../../domain/action/filter-collection.action';
 import { MetadataFilter } from '../../domain/model/metadata-filter';
-import { PreviewFilterComponent } from '../component/preview-filter.component';
 import { Filter } from '../../domain/entity/filter';
-
+import { EntityValidators } from '../../domain/service/entity-validators.service';
+import { SearchDialogComponent } from '../component/search-dialog.component';
+import { QueryEntityIds, ViewMoreIds } from '../action/search.action';
 
 @Component({
     selector: 'new-filter-page',
@@ -25,6 +25,10 @@ import { Filter } from '../../domain/entity/filter';
 })
 export class NewFilterComponent implements OnInit, OnChanges, OnDestroy {
 
+    private ngUnsubscribe: Subject<void> = new Subject<void>();
+    private valueEmitSubscription: Subscription;
+    private statusEmitSubscription: Subscription;
+
     changes$: Observable<MetadataFilter>;
     changes: MetadataFilter;
     filter: MetadataFilter = new Filter({
@@ -44,33 +48,115 @@ export class NewFilterComponent implements OnInit, OnChanges, OnDestroy {
         attributeRelease: []
     });
 
+    ids: string[];
+    entityIds$: Observable<string[]>;
+    showMore$: Observable<boolean>;
+    selected$: Observable<string>;
+    loading$: Observable<boolean>;
+    processing$: Observable<boolean>;
+
+    form: FormGroup = this.fb.group({
+        entityId: ['', [Validators.required], [
+            EntityValidators.existsInCollection(this.store.select(fromFilter.getEntityCollection))
+        ]],
+        filterName: ['', [Validators.required]],
+        filterEnabled: [false]
+    });
+
+    isValid = false;
+
     constructor(
         private store: Store<fromFilter.State>,
-        private valueEmitter: ProviderValueEmitter
+        private valueEmitter: ProviderValueEmitter,
+        private fb: FormBuilder
     ) {
         this.changes$ = this.store.select(fromFilter.getFilter);
         this.changes$.subscribe(c => this.changes = c);
+
+        this.showMore$ = this.store.select(fromFilter.getViewingMore);
+        this.selected$ = this.store.select(fromFilter.getSelected);
+        this.entityIds$ = this.store.select(fromFilter.getEntityCollection);
+        this.loading$ = this.store.select(fromFilter.getIsLoading);
+        this.processing$ = this.loading$.withLatestFrom(this.showMore$, (l, s) => !s && l);
+
+        this.entityIds$.subscribe(ids => this.ids = ids);
+
+        this.selected$.subscribe(s => {
+            this.form.patchValue({
+                entityId: s
+            });
+        });
     }
 
     ngOnInit(): void {
         this.store.dispatch(new CreateFilter(this.filter));
 
-        this.valueEmitter.changeEmitted$.subscribe((changes) => {
-            this.store.dispatch(new UpdateFilter(changes));
-        });
+        let id = this.form.get('entityId');
+        id.valueChanges
+            .distinctUntilChanged()
+            .subscribe(query => this.searchEntityIds(query));
+
+        this.valueEmitSubscription = this.form
+            .valueChanges
+            .takeUntil(this.ngUnsubscribe)
+            .startWith(this.form.value)
+            .subscribe(changes => this.store.dispatch(new UpdateFilterChanges(changes)));
+        this.valueEmitter
+            .changeEmitted$
+            .takeUntil(this.ngUnsubscribe)
+            .startWith(this.form.value)
+            .subscribe(changes => this.store.dispatch(new UpdateFilterChanges(changes)));
+
+        /*this.statusEmitSubscription = this.form
+            .statusChanges
+            .takeUntil(this.ngUnsubscribe)
+            .startWith(this.form.status)
+            .subscribe(status => this.onStatusChange.emit(status));*/
     }
 
-    ngOnChanges(): void {}
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes.entity) {
+            let { entityId, filterName, filterEnabled } = this.filter;
+            this.form.reset({
+                entityId,
+                filterName,
+                filterEnabled
+            });
+            this.form.updateValueAndValidity();
+            if (changes.entity.firstChange && this.filter.entityId) {
+                this.store.dispatch(new SelectId(this.filter.entityId));
+                this.searchEntityIds(this.filter.entityId);
+            }
+        }
+    }
 
-    ngOnDestroy(): void {}
+    ngOnDestroy(): void {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+
+    searchEntityIds(term: string): void {
+        if (term.length >= 4 && this.ids.indexOf(term) < 0) {
+            this.store.dispatch(new QueryEntityIds({
+                term,
+                limit: 10
+            }));
+        }
+    }
+
+    onViewMore(query: string): void {
+        this.store.dispatch(new ViewMoreIds(query));
+    }
+
+    onStatusChange(status): void {
+        this.isValid = status === 'VALID';
+    }
 
     save(): void {
-        this.store.dispatch(new SaveFilter(this.changes));
+        this.store.dispatch(new AddFilterRequest(this.changes));
     }
 
     cancel(): void {
         this.store.dispatch(new CancelCreateFilter());
     }
-
-    preview(): void {}
 }
diff --git a/ui/src/app/metadata-filter/effect/filter.effect.ts b/ui/src/app/metadata-filter/effect/filter.effect.ts
index 69e741f0b..d860fe7b9 100644
--- a/ui/src/app/metadata-filter/effect/filter.effect.ts
+++ b/ui/src/app/metadata-filter/effect/filter.effect.ts
@@ -5,11 +5,7 @@ import { Observable } from 'rxjs/Observable';
 import { Router } from '@angular/router';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 
-import 'rxjs/add/observable/fromPromise';
-import 'rxjs/add/observable/of';
-import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/switchMap';
-import 'rxjs/add/operator/withLatestFrom';
 
 import * as filter from '../action/filter.action';
 import * as fromFilter from '../reducer';
@@ -17,48 +13,18 @@ import * as collection from '../../domain/action/filter-collection.action';
 
 import { SearchDialogComponent } from '../component/search-dialog.component';
 import { EntityIdService } from '../../domain/service/entity-id.service';
-import { MetadataFilterService } from '../../domain/service/filter.service';
-import { MetadataProvider } from '../../domain/model/metadata-provider';
+import { MetadataResolverService } from '../../domain/service/metadata-resolver.service';
 
 @Injectable()
 export class FilterEffects {
-
-    private dbounce = 500;
-
-    @Effect()
-    loadEntityIds$ = this.actions$
-        .ofType<filter.QueryEntityIds>(filter.QUERY_ENTITY_IDS)
-        .map(action => action.payload)
-        .debounceTime(this.dbounce)
-        .switchMap(query =>
-            this.idService
-                .query(query)
-                .map(ids => new filter.LoadEntityIdsSuccess(ids))
-                .catch(error => Observable.of(new filter.LoadEntityIdsError(error)))
-        );
-
     @Effect({ dispatch: false })
-    cancelChanges$ = this.actions$
-        .ofType<filter.CancelCreateFilter>(filter.CANCEL_CREATE_FILTER)
+    saveFilterSuccess$ = this.actions$
+        .ofType<collection.AddFilterSuccess>(collection.ADD_FILTER_SUCCESS)
         .switchMap(() => this.router.navigate(['/dashboard']));
 
-    @Effect()
-    viewMore$ = this.actions$
-        .ofType<filter.ViewMoreIds>(filter.VIEW_MORE_IDS)
-        .map(action => action.payload)
-        .switchMap(q => {
-            const modal = this.modalService.open(SearchDialogComponent) as NgbModalRef;
-            const res = modal.result;
-            modal.componentInstance.term = q;
-            return Observable
-                .fromPromise(res)
-                .map(id => new filter.SelectId(id))
-                .catch(() => Observable.of(new filter.CancelViewMore()));
-        });
-
     @Effect({ dispatch: false })
-    saveFilterSuccess$ = this.actions$
-        .ofType<collection.SaveFilterSuccess>(collection.SAVE_FILTER_SUCCESS)
+    cancelChanges$ = this.actions$
+        .ofType<filter.CancelCreateFilter>(filter.CANCEL_CREATE_FILTER)
         .switchMap(() => this.router.navigate(['/dashboard']));
 
     constructor(
@@ -66,7 +32,7 @@ export class FilterEffects {
         private router: Router,
         private modalService: NgbModal,
         private idService: EntityIdService,
-        private filterService: MetadataFilterService,
+        private resolverService: MetadataResolverService,
         private store: Store<fromFilter.State>
     ) { }
 }
diff --git a/ui/src/app/metadata-filter/effect/search.effect.ts b/ui/src/app/metadata-filter/effect/search.effect.ts
new file mode 100644
index 000000000..88faa5528
--- /dev/null
+++ b/ui/src/app/metadata-filter/effect/search.effect.ts
@@ -0,0 +1,62 @@
+import { Injectable } from '@angular/core';
+import { Effect, Actions } from '@ngrx/effects';
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs/Observable';
+import { Router } from '@angular/router';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+
+import 'rxjs/add/observable/fromPromise';
+import 'rxjs/add/observable/of';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/switchMap';
+import 'rxjs/add/operator/withLatestFrom';
+
+import * as search from '../action/search.action';
+import * as filter from '../action/filter.action';
+import * as fromFilter from '../reducer';
+import * as collection from '../../domain/action/filter-collection.action';
+
+import { SearchDialogComponent } from '../component/search-dialog.component';
+import { EntityIdService } from '../../domain/service/entity-id.service';
+import { MetadataProvider } from '../../domain/model/metadata-provider';
+import { MetadataResolverService } from '../../domain/service/metadata-resolver.service';
+
+@Injectable()
+export class SearchIdEffects {
+
+    private dbounce = 500;
+    @Effect()
+    loadEntityIds$ = this.actions$
+        .ofType<search.QueryEntityIds>(search.QUERY_ENTITY_IDS)
+        .map(action => action.payload)
+        .debounceTime(this.dbounce)
+        .switchMap(query =>
+            this.idService
+                .query(query)
+                .map(ids => new search.LoadEntityIdsSuccess(ids))
+                .catch(error => Observable.of(new search.LoadEntityIdsError(error)))
+        );
+
+    @Effect()
+    viewMore$ = this.actions$
+        .ofType<search.ViewMoreIds>(search.VIEW_MORE_IDS)
+        .map(action => action.payload)
+        .switchMap(q => {
+            const modal = this.modalService.open(SearchDialogComponent) as NgbModalRef;
+            const res = modal.result;
+            modal.componentInstance.term = q;
+            return Observable
+                .fromPromise(res)
+                .map(id => new filter.SelectId(id))
+                .catch(() => Observable.of(new search.CancelViewMore()));
+        });
+
+    constructor(
+        private actions$: Actions,
+        private router: Router,
+        private modalService: NgbModal,
+        private idService: EntityIdService,
+        private resolverService: MetadataResolverService,
+        private store: Store<fromFilter.State>
+    ) { }
+}
diff --git a/ui/src/app/metadata-filter/filter.module.ts b/ui/src/app/metadata-filter/filter.module.ts
index bd8e574b4..8c30c4d43 100644
--- a/ui/src/app/metadata-filter/filter.module.ts
+++ b/ui/src/app/metadata-filter/filter.module.ts
@@ -12,22 +12,38 @@ import { ProviderEditorFormModule } from '../metadata-provider/component';
 import { FilterEffects } from './effect/filter.effect';
 import { NgbPopoverModule, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
 import { SearchDialogComponent } from './component/search-dialog.component';
-import { FilterFormComponent } from './component/filter-form.component';
 import { SharedModule } from '../shared/shared.module';
 import { PreviewFilterComponent } from './component/preview-filter.component';
+import { EditFilterComponent } from './container/edit-filter.component';
+import { FilterComponent } from './container/filter.component';
+import { SearchIdEffects } from './effect/search.effect';
+import { FilterExistsGuard } from '../domain/guard/filter-exists.guard';
 
 export const routes: Routes = [
     {
         path: 'new',
         component: NewFilterComponent,
         canActivate: []
+    },
+    {
+        path: ':id',
+        component: FilterComponent,
+        canActivate: [FilterExistsGuard],
+        children: [
+            {
+                path: 'edit',
+                component: EditFilterComponent,
+                canDeactivate: []
+            }
+        ]
     }
 ];
 
 @NgModule({
     declarations: [
         NewFilterComponent,
-        FilterFormComponent,
+        EditFilterComponent,
+        FilterComponent,
         SearchDialogComponent,
         PreviewFilterComponent
     ],
@@ -40,13 +56,15 @@ export const routes: Routes = [
         RouterModule,
         ReactiveFormsModule,
         StoreModule.forFeature('metadata-filter', reducers),
-        EffectsModule.forFeature([FilterEffects]),
+        EffectsModule.forFeature([FilterEffects, SearchIdEffects]),
         RouterModule.forChild(routes),
         ProviderEditorFormModule,
         NgbPopoverModule,
         NgbModalModule,
         SharedModule
     ],
-    providers: []
+    providers: [
+        FilterExistsGuard
+    ]
 })
 export class FilterModule { }
diff --git a/ui/src/app/metadata-filter/reducer/filter.reducer.spec.ts b/ui/src/app/metadata-filter/reducer/filter.reducer.spec.ts
index e1cd2ef5e..ca2c2f9e9 100644
--- a/ui/src/app/metadata-filter/reducer/filter.reducer.spec.ts
+++ b/ui/src/app/metadata-filter/reducer/filter.reducer.spec.ts
@@ -3,13 +3,8 @@ import * as fromFilter from './filter.reducer';
 import * as actions from '../action/filter.action';
 
 const snapshot: fromFilter.FilterState = {
-    entityIds: [],
     selected: null,
-    viewMore: false,
-    loading: false,
-    error: null,
-    term: '',
-    filter: null
+    changes: null
 };
 
 describe('Filter Reducer', () => {
@@ -20,58 +15,4 @@ describe('Filter Reducer', () => {
             expect(result).toEqual(snapshot);
         });
     });
-
-    describe(`${ actions.VIEW_MORE_IDS } action`, () => {
-        it('should set viewMore property to true', () => {
-            const result = reducer(snapshot, new actions.ViewMoreIds('foo'));
-
-            expect(result.viewMore).toBe(true);
-        });
-    });
-
-    describe(`${ actions.SELECT_ID } action`, () => {
-        it('should set viewMore property to false and selected to the provided payload', () => {
-            const id = 'foo';
-            const result = reducer(snapshot, new actions.SelectId(id));
-
-            expect(result.viewMore).toBe(false);
-            expect(result.selected).toBe(id);
-        });
-    });
-
-    describe(`${actions.CANCEL_VIEW_MORE} action`, () => {
-        it('should set viewMore property to false', () => {
-            const result = reducer(snapshot, new actions.CancelViewMore());
-
-            expect(result.viewMore).toBe(false);
-        });
-    });
-
-    describe(`${actions.QUERY_ENTITY_IDS} action`, () => {
-        it('should set loading property to true', () => {
-            const result = reducer(snapshot, new actions.QueryEntityIds({ term: 'foo' }));
-
-            expect(result.loading).toBe(true);
-        });
-    });
-
-    describe(`${actions.LOAD_ENTITY_IDS_SUCCESS} action`, () => {
-        it('should set loading property to false and the entityIds property to the provided payload', () => {
-            const ids = ['foo'];
-            const result = reducer(snapshot, new actions.LoadEntityIdsSuccess(ids));
-
-            expect(result.loading).toBe(false);
-            expect(result.entityIds).toBe(ids);
-        });
-    });
-
-    describe(`${actions.LoadEntityIdsError} action`, () => {
-        it('should set loading property to false and the error property to the provided payload', () => {
-            const err = new Error('Foobar!');
-            const result = reducer(snapshot, new actions.LoadEntityIdsError(err));
-
-            expect(result.loading).toBe(false);
-            expect(result.error).toBe(err);
-        });
-    });
 });
diff --git a/ui/src/app/metadata-filter/reducer/filter.reducer.ts b/ui/src/app/metadata-filter/reducer/filter.reducer.ts
index 314b1def0..1092dd684 100644
--- a/ui/src/app/metadata-filter/reducer/filter.reducer.ts
+++ b/ui/src/app/metadata-filter/reducer/filter.reducer.ts
@@ -1,86 +1,44 @@
 import { createSelector, createFeatureSelector } from '@ngrx/store';
 import * as filter from '../action/filter.action';
+import * as collection from '../../domain/action/filter-collection.action';
 import * as fromRoot from '../../core/reducer';
 import { MetadataFilter } from '../../domain/domain.type';
 
 export interface FilterState {
-    entityIds: string[];
-    viewMore: boolean;
-    loading: boolean;
-    error: Error | null;
     selected: string | null;
-    term: string;
-    filter: MetadataFilter | null;
+    changes: MetadataFilter | null;
 }
 
 export const initialState: FilterState = {
-    entityIds: [],
     selected: null,
-    viewMore: false,
-    loading: false,
-    error: null,
-    term: '',
-    filter: null
+    changes: null
 };
 
-export function reducer(state = initialState, action: filter.Actions): FilterState {
+export function reducer(state = initialState, action: filter.Actions | collection.Actions): FilterState {
     switch (action.type) {
-        case filter.VIEW_MORE_IDS: {
-            return {
-                ...state,
-                viewMore: true
-            };
-        }
         case filter.SELECT_ID: {
             return {
                 ...state,
-                selected: action.payload,
-                viewMore: false
-            };
-        }
-        case filter.CANCEL_VIEW_MORE: {
-            return {
-                ...state,
-                viewMore: false
-            };
-        }
-        case filter.QUERY_ENTITY_IDS: {
-            return {
-                ...state,
-                loading: true,
-                term: action.payload.term
-            };
-        }
-        case filter.LOAD_ENTITY_IDS_SUCCESS: {
-            return {
-                ...state,
-                loading: false,
-                error: null,
-                entityIds: action.payload
-            };
-        }
-        case filter.LOAD_ENTITY_IDS_ERROR: {
-            return {
-                ...state,
-                loading: false,
-                error: action.payload
+                selected: action.payload
             };
         }
         case filter.CREATE_FILTER: {
             return {
                 ...state,
-                filter: action.payload
+                changes: action.payload
             };
         }
         case filter.UPDATE_FILTER: {
             return {
                 ...state,
-                filter: {
-                    ...state.filter,
+                changes: {
+                    ...state.changes,
                     ...action.payload
                 }
             };
         }
+        case collection.ADD_FILTER_SUCCESS:
+        case collection.UPDATE_FILTER_SUCCESS:
         case filter.CANCEL_CREATE_FILTER: {
             return {
                 ...initialState
@@ -92,10 +50,5 @@ export function reducer(state = initialState, action: filter.Actions): FilterSta
     }
 }
 
-export const getViewMore = (state: FilterState) => state.viewMore;
 export const getSelected = (state: FilterState) => state.selected;
-export const getEntityIds = (state: FilterState) => state.entityIds;
-export const getError = (state: FilterState) => state.error;
-export const getLoading = (state: FilterState) => state.loading;
-export const getTerm = (state: FilterState) => state.term;
-export const getFilter = (state: FilterState) => state.filter;
+export const getFilterChanges = (state: FilterState) => state.changes;
diff --git a/ui/src/app/metadata-filter/reducer/index.ts b/ui/src/app/metadata-filter/reducer/index.ts
index 26a69c7d7..49b75b532 100644
--- a/ui/src/app/metadata-filter/reducer/index.ts
+++ b/ui/src/app/metadata-filter/reducer/index.ts
@@ -1,13 +1,16 @@
 import { createSelector, createFeatureSelector } from '@ngrx/store';
 import * as fromRoot from '../../core/reducer';
 import * as fromFilter from './filter.reducer';
+import * as fromSearch from './search.reducer';
 
 export interface FilterState {
     filter: fromFilter.FilterState;
+    search: fromSearch.SearchState;
 }
 
 export const reducers = {
     filter: fromFilter.reducer,
+    search: fromSearch.reducer
 };
 
 export interface State extends fromRoot.State {
@@ -15,13 +18,16 @@ export interface State extends fromRoot.State {
 }
 
 export const getFiltersFromStateFn = (state: FilterState) => state.filter;
+export const getSearchFromStateFn = (state: FilterState) => state.search;
 export const getFilterState = createFeatureSelector<FilterState>('metadata-filter');
 
 export const getFilterFromState = createSelector(getFilterState, getFiltersFromStateFn);
-export const getViewingMore = createSelector(getFilterFromState, fromFilter.getViewMore);
 export const getSelected = createSelector(getFilterFromState, fromFilter.getSelected);
-export const getEntityCollection = createSelector(getFilterFromState, fromFilter.getEntityIds);
-export const getIsLoading = createSelector(getFilterFromState, fromFilter.getLoading);
-export const getError = createSelector(getFilterFromState, fromFilter.getError);
-export const getTerm = createSelector(getFilterFromState, fromFilter.getTerm);
-export const getFilter = createSelector(getFilterFromState, fromFilter.getFilter);
+export const getFilter = createSelector(getFilterFromState, fromFilter.getFilterChanges);
+
+export const getSearchFromState = createSelector(getFilterState, getSearchFromStateFn);
+export const getEntityCollection = createSelector(getSearchFromState, fromSearch.getEntityIds);
+export const getIsLoading = createSelector(getSearchFromState, fromSearch.getLoading);
+export const getError = createSelector(getSearchFromState, fromSearch.getError);
+export const getTerm = createSelector(getSearchFromState, fromSearch.getTerm);
+export const getViewingMore = createSelector(getSearchFromState, fromSearch.getViewMore);
diff --git a/ui/src/app/metadata-filter/reducer/search.reducer.spec.ts b/ui/src/app/metadata-filter/reducer/search.reducer.spec.ts
new file mode 100644
index 000000000..576294cf3
--- /dev/null
+++ b/ui/src/app/metadata-filter/reducer/search.reducer.spec.ts
@@ -0,0 +1,65 @@
+import { reducer } from './search.reducer';
+import * as fromFilter from './search.reducer';
+import * as actions from '../action/search.action';
+
+const snapshot: fromFilter.SearchState = {
+    entityIds: [],
+    viewMore: false,
+    loading: false,
+    error: null,
+    term: '',
+};
+
+describe('Filter Reducer', () => {
+    describe('undefined action', () => {
+        it('should return the default state', () => {
+            const result = reducer(snapshot, {} as any);
+
+            expect(result).toEqual(snapshot);
+        });
+    });
+
+    describe(`${actions.VIEW_MORE_IDS} action`, () => {
+        it('should set viewMore property to true', () => {
+            const result = reducer(snapshot, new actions.ViewMoreIds('foo'));
+
+            expect(result.viewMore).toBe(true);
+        });
+    });
+
+    describe(`${actions.CANCEL_VIEW_MORE} action`, () => {
+        it('should set viewMore property to false', () => {
+            const result = reducer(snapshot, new actions.CancelViewMore());
+
+            expect(result.viewMore).toBe(false);
+        });
+    });
+
+    describe(`${actions.QUERY_ENTITY_IDS} action`, () => {
+        it('should set loading property to true', () => {
+            const result = reducer(snapshot, new actions.QueryEntityIds({ term: 'foo' }));
+
+            expect(result.loading).toBe(true);
+        });
+    });
+
+    describe(`${actions.LOAD_ENTITY_IDS_SUCCESS} action`, () => {
+        it('should set loading property to false and the entityIds property to the provided payload', () => {
+            const ids = ['foo'];
+            const result = reducer(snapshot, new actions.LoadEntityIdsSuccess(ids));
+
+            expect(result.loading).toBe(false);
+            expect(result.entityIds).toBe(ids);
+        });
+    });
+
+    describe(`${actions.LoadEntityIdsError} action`, () => {
+        it('should set loading property to false and the error property to the provided payload', () => {
+            const err = new Error('Foobar!');
+            const result = reducer(snapshot, new actions.LoadEntityIdsError(err));
+
+            expect(result.loading).toBe(false);
+            expect(result.error).toBe(err);
+        });
+    });
+});
diff --git a/ui/src/app/metadata-filter/reducer/search.reducer.ts b/ui/src/app/metadata-filter/reducer/search.reducer.ts
new file mode 100644
index 000000000..0d7374171
--- /dev/null
+++ b/ui/src/app/metadata-filter/reducer/search.reducer.ts
@@ -0,0 +1,68 @@
+import { createSelector, createFeatureSelector } from '@ngrx/store';
+import * as search from '../action/search.action';
+import * as fromRoot from '../../core/reducer';
+import { MetadataFilter } from '../../domain/domain.type';
+
+export interface SearchState {
+    entityIds: string[];
+    viewMore: boolean;
+    loading: boolean;
+    error: Error | null;
+    term: string;
+}
+
+export const initialState: SearchState = {
+    entityIds: [],
+    viewMore: false,
+    loading: false,
+    error: null,
+    term: '',
+};
+
+export function reducer(state = initialState, action: search.Actions): SearchState {
+    switch (action.type) {
+        case search.VIEW_MORE_IDS: {
+            return {
+                ...state,
+                viewMore: true
+            };
+        }
+        case search.CANCEL_VIEW_MORE: {
+            return {
+                ...state,
+                viewMore: false
+            };
+        }
+        case search.QUERY_ENTITY_IDS: {
+            return {
+                ...state,
+                loading: true,
+                term: action.payload.term
+            };
+        }
+        case search.LOAD_ENTITY_IDS_SUCCESS: {
+            return {
+                ...state,
+                loading: false,
+                error: null,
+                entityIds: action.payload
+            };
+        }
+        case search.LOAD_ENTITY_IDS_ERROR: {
+            return {
+                ...state,
+                loading: false,
+                error: action.payload
+            };
+        }
+        default: {
+            return state;
+        }
+    }
+}
+
+export const getViewMore = (state: SearchState) => state.viewMore;
+export const getEntityIds = (state: SearchState) => state.entityIds;
+export const getError = (state: SearchState) => state.error;
+export const getLoading = (state: SearchState) => state.loading;
+export const getTerm = (state: SearchState) => state.term;
diff --git a/ui/src/app/routing.module.ts b/ui/src/app/routing.module.ts
index 79ba36f8b..9be145029 100644
--- a/ui/src/app/routing.module.ts
+++ b/ui/src/app/routing.module.ts
@@ -14,7 +14,7 @@ const routes: Routes = [
         canActivate: []
     },
     {
-        path: 'metadata-filter',
+        path: 'filter',
         loadChildren: './metadata-filter/filter.module#FilterModule',
         canActivate: []
     }
diff --git a/ui/src/app/shared/autocomplete/autocomplete.component.html b/ui/src/app/shared/autocomplete/autocomplete.component.html
index cb63416e7..cf1bda83b 100644
--- a/ui/src/app/shared/autocomplete/autocomplete.component.html
+++ b/ui/src/app/shared/autocomplete/autocomplete.component.html
@@ -17,7 +17,7 @@
     <ul class="dropdown-menu"
         id="{{ id }}__listbox"
         role="listbox"
-        [class.show]="(menuIsVisible$ | async) && !processing">
+        [class.show]="(menuIsVisible$ | async) && !processing && !input.disabled">
         <li *ngFor="let option of matches; let i = index;"
             #matchElement
             class="dropdown-item"
diff --git a/ui/src/app/shared/util.spec.ts b/ui/src/app/shared/util.spec.ts
new file mode 100644
index 000000000..68b8ac525
--- /dev/null
+++ b/ui/src/app/shared/util.spec.ts
@@ -0,0 +1,18 @@
+import { removeNulls } from './util';
+
+describe('removeNulls', () => {
+    let obj = {
+        foo: null,
+        bar: 'baz'
+    },
+        expected = {
+            bar: 'baz'
+        };
+    it(`should remove null values from the object provided`, () => {
+        expect(removeNulls(obj)).toEqual(expected);
+    });
+
+    it(`should return an empty object if passed a falsy value`, () => {
+        expect(removeNulls(undefined)).toEqual({});
+    });
+});
diff --git a/ui/src/app/shared/util.ts b/ui/src/app/shared/util.ts
index e779c79d3..ac5ead495 100644
--- a/ui/src/app/shared/util.ts
+++ b/ui/src/app/shared/util.ts
@@ -14,3 +14,13 @@ export class CustomRouterStateSerializer implements RouterStateSerializer<Router
         return { url, queryParams };
     }
 } /* istanbul ignore next */
+
+export function removeNulls(attribute): any {
+    if (!attribute) { return {}; }
+    return Object.keys(attribute).reduce((coll, val, index) => {
+        if (attribute[val]) {
+            coll[val] = attribute[val];
+        }
+        return coll;
+    }, {});
+}