SHIBUI-751 Fixed issue with duplicate filters

ui/package.json

@@ -31,6 +31,7 @@
     "@ngrx/entity": "^5.2.0",
     "@ngrx/router-store": "^5.2.0",
     "@ngrx/store": "^5.2.0",
+    "@ngrx/store-devtools": "^6.1.0",
     "bootstrap": "4.1.1",
     "core-js": "^2.4.1",
     "deep-object-diff": "^1.1.0",

ui/src/app/app.module.ts

@@ -2,6 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { StoreRouterConnectingModule, RouterStateSerializer } from '@ngrx/router-store';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 
@@ -22,6 +23,7 @@ import { ContentionModule } from './contention/contention.module';
 import { SharedModule } from './shared/shared.module';
 import { WizardModule } from './wizard/wizard.module';
 import { FormModule } from './schema-form/schema-form.module';
+import { environment } from '../environments/environment.prod';
 
 @NgModule({
     declarations: [
@@ -31,6 +33,10 @@ import { FormModule } from './schema-form/schema-form.module';
         StoreModule.forRoot(reducers, {
             metaReducers
         }),
+        StoreDevtoolsModule.instrument({
+            maxAge: 25, // Retains last 25 states
+            logOnly: environment.production, // Restrict extension to log-only mode
+        }),
         EffectsModule.forRoot([]),
         BrowserModule,
         CoreModule.forRoot(),

ui/src/app/metadata/domain/service/filter.service.ts

@@ -27,6 +27,7 @@ export class MetadataFilterService {
     }
 
     save(providerId: string, filter: MetadataFilter): Observable<MetadataFilter> {
+        console.log(providerId, filter);
         return this.http.post<MetadataFilter>(`${this.base}${this.endpoint}/${providerId}/Filters`, filter);
     }
 }

ui/src/app/metadata/filter/action/collection.action.ts

@@ -3,37 +3,29 @@ import { MetadataFilter } from '../../domain/model/metadata-filter';
 import { Update } from '@ngrx/entity';
 
 export enum FilterCollectionActionTypes {
-    FIND = '[Metadata Filter] Find',
-    SELECT_FILTER = '[Metadata Filter] Select Request',
-    SELECT_FILTER_SUCCESS = '[Metadata Filter] Select Success',
-    SELECT_FILTER_FAIL = '[Metadata Filter] Select Fail',
+    SELECT_FILTER_REQUEST = '[Metadata Filter Collection] Select Filter Request',
+    SELECT_FILTER_SUCCESS = '[Metadata Filter Collection] Select Filter Success',
+    SELECT_FILTER_FAIL = '[Metadata Filter Collection] Select Filter Fail',
 
-    UPDATE_FILTER_REQUEST = '[Metadata Filter] Update Request',
-    UPDATE_FILTER_SUCCESS = '[Metadata Filter] Update Success',
-    UPDATE_FILTER_FAIL = '[Metadata Filter] Update Fail',
+    UPDATE_FILTER_REQUEST = '[Metadata Filter Collection] Update Filter Request',
+    UPDATE_FILTER_SUCCESS = '[Metadata Filter Collection] Update Filter Success',
+    UPDATE_FILTER_FAIL = '[Metadata Filter Collection] Update Filter Fail',
 
-    LOAD_FILTER_REQUEST = '[Metadata Filter Collection] Filter REQUEST',
-    LOAD_FILTER_SUCCESS = '[Metadata Filter Collection] Filter SUCCESS',
-    LOAD_FILTER_ERROR = '[Metadata Filter Collection] Filter ERROR',
+    LOAD_FILTER_REQUEST = '[Metadata Filter Collection] Load Filter Request',
+    LOAD_FILTER_SUCCESS = '[Metadata Filter Collection] Load Filter Success',
+    LOAD_FILTER_ERROR = '[Metadata Filter Collection] Load Filter Error',
 
-    ADD_FILTER = '[Metadata Filter Collection] Add Filter',
+    ADD_FILTER_REQUEST = '[Metadata Filter Collection] Add Filter Request',
     ADD_FILTER_SUCCESS = '[Metadata Filter Collection] Add Filter Success',
     ADD_FILTER_FAIL = '[Metadata Filter Collection] Add Filter Fail',
 
-    REMOVE_FILTER = '[Metadata Filter Collection] Remove Filter',
+    REMOVE_FILTER_REQUEST = '[Metadata Filter Collection] Remove Filter Request',
     REMOVE_FILTER_SUCCESS = '[Metadata Filter Collection] Remove Filter Success',
     REMOVE_FILTER_FAIL = '[Metadata Filter Collection] Remove Filter Fail'
 }
 
-
-export class FindFilter implements Action {
-    readonly type = FilterCollectionActionTypes.FIND;
-
-    constructor(public payload: string) { }
-}
-
 export class SelectFilter implements Action {
-    readonly type = FilterCollectionActionTypes.SELECT_FILTER;
+    readonly type = FilterCollectionActionTypes.SELECT_FILTER_REQUEST;
 
     constructor(public payload: string) { }
 }
@@ -87,7 +79,7 @@ export class UpdateFilterFail implements Action {
 }
 
 export class AddFilterRequest implements Action {
-    readonly type = FilterCollectionActionTypes.ADD_FILTER;
+    readonly type = FilterCollectionActionTypes.ADD_FILTER_REQUEST;
 
     constructor(public payload: MetadataFilter) { }
 }
@@ -105,7 +97,7 @@ export class AddFilterFail implements Action {
 }
 
 export class RemoveFilterRequest implements Action {
-    readonly type = FilterCollectionActionTypes.REMOVE_FILTER;
+    readonly type = FilterCollectionActionTypes.REMOVE_FILTER_REQUEST;
 
     constructor(public payload: MetadataFilter) { }
 }
@@ -132,7 +124,6 @@ export type FilterCollectionActionsUnion =
     | RemoveFilterRequest
     | RemoveFilterSuccess
     | RemoveFilterFail
-    | FindFilter
     | SelectFilter
     | SelectFilterSuccess
     | SelectFilterFail

ui/src/app/metadata/filter/container/edit-filter.component.ts

@@ -39,7 +39,7 @@ export class EditFilterComponent {
         this.definition = MetadataFilterTypes.EntityAttributesFilter;
 
         this.schema$ = this.schemaService.get(this.definition.schema);
-        this.isSaving$ = this.store.select(fromFilter.getSaving);
+        this.isSaving$ = this.store.select(fromFilter.getCollectionSaving);
         this.model$ = this.store.select(fromFilter.getSelectedFilter);
 
         this.valueChangeEmitted$.subscribe(changes => this.store.dispatch(new UpdateFilterChanges(changes.value)));

ui/src/app/metadata/filter/container/new-filter.component.ts

@@ -1,6 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Subject, Observable, of } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 import * as fromFilter from '../reducer';
 import { MetadataFilterTypes } from '../model';
@@ -14,7 +15,9 @@ import { CancelCreateFilter, UpdateFilterChanges } from '../action/filter.action
     selector: 'new-filter-page',
     templateUrl: './new-filter.component.html'
 })
-export class NewFilterComponent {
+export class NewFilterComponent implements OnDestroy, OnInit {
+
+    private ngUnsubscribe: Subject<void> = new Subject<void>();
 
     valueChangeSubject = new Subject<Partial<any>>();
     private valueChangeEmitted$ = this.valueChangeSubject.asObservable();
@@ -37,19 +40,31 @@ export class NewFilterComponent {
         this.definition = MetadataFilterTypes.EntityAttributesFilter;
 
         this.schema$ = this.schemaService.get(this.definition.schema);
-        this.isSaving$ = this.store.select(fromFilter.getSaving);
+        this.isSaving$ = this.store.select(fromFilter.getCollectionSaving);
         this.model$ = of(<MetadataFilter>{});
+    }
 
-        this.valueChangeEmitted$.subscribe(changes => this.store.dispatch(new UpdateFilterChanges(changes.value)));
-        this.statusChangeEmitted$.subscribe(valid => {
-            this.isValid = valid.value ? valid.value.length === 0 : true;
-        });
+    ngOnInit(): void {
+        this.valueChangeEmitted$
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(changes => this.store.dispatch(new UpdateFilterChanges(changes.value)));
+        this.statusChangeEmitted$
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(valid => {
+                this.isValid = valid.value ? valid.value.length === 0 : true;
+            });
 
         this.store
             .select(fromFilter.getFilter)
+            .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe(filter => this.filter = filter);
     }
 
+    ngOnDestroy(): void {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+
     save(): void {
         this.store.dispatch(new AddFilterRequest(this.filter));
     }

ui/src/app/metadata/filter/effect/collection.effect.ts

@@ -4,7 +4,7 @@ import { Store } from '@ngrx/store';
 import { Router } from '@angular/router';
 
 import { of } from 'rxjs';
-import { switchMap, map, catchError, tap, combineLatest, skipWhile } from 'rxjs/operators';
+import { switchMap, map, catchError, tap, combineLatest, skipWhile, debounceTime, withLatestFrom } from 'rxjs/operators';
 
 import * as actions from '../action/collection.action';
 import { FilterCollectionActionTypes } from '../action/collection.action';
@@ -35,9 +35,9 @@ export class FilterCollectionEffects {
     );
     @Effect()
     selectFilterRequest$ = this.actions$.pipe(
-        ofType<actions.SelectFilter>(FilterCollectionActionTypes.SELECT_FILTER),
+        ofType<actions.SelectFilter>(FilterCollectionActionTypes.SELECT_FILTER_REQUEST),
         map(action => action.payload),
-        combineLatest(this.store.select(fromProvider.getSelectedProviderId).pipe(skipWhile(id => !id))),
+        withLatestFrom(this.store.select(fromProvider.getSelectedProviderId).pipe(skipWhile(id => !id))),
         switchMap(([filterId, providerId]) => {
             return this.filterService
                 .find(providerId, filterId)
@@ -51,15 +51,15 @@ export class FilterCollectionEffects {
 
     @Effect()
     addFilter$ = this.actions$.pipe(
-        ofType<actions.AddFilterRequest>(FilterCollectionActionTypes.ADD_FILTER),
+        ofType<actions.AddFilterRequest>(FilterCollectionActionTypes.ADD_FILTER_REQUEST),
         map(action => action.payload),
         map(filter => {
             return {
                 ...filter,
                 relyingPartyOverrides: removeNulls(new EntityAttributesFilterEntity(filter).relyingPartyOverrides)
             };
         }),
-        combineLatest(this.store.select(fromProvider.getSelectedProviderId).pipe(skipWhile(id => !id))),
+        withLatestFrom(this.store.select(fromProvider.getSelectedProviderId).pipe(skipWhile(id => !id))),
         switchMap(([unsaved, providerId]) => {
             return this.filterService
                 .save(providerId, unsaved as MetadataFilter)
@@ -73,15 +73,15 @@ export class FilterCollectionEffects {
     addFilterSuccessRedirect$ = this.actions$.pipe(
         ofType<actions.AddFilterSuccess>(FilterCollectionActionTypes.ADD_FILTER_SUCCESS),
         map(action => action.payload),
-        combineLatest(this.store.select(fromProvider.getSelectedProviderId).pipe(skipWhile(id => !id))),
+        withLatestFrom(this.store.select(fromProvider.getSelectedProviderId).pipe(skipWhile(id => !id))),
         tap(([filter, provider]) => this.router.navigate(['/', 'metadata', 'provider', provider, 'filters']))
     );
 
     @Effect()
     updateFilter$ = this.actions$.pipe(
         ofType<actions.UpdateFilterRequest>(FilterCollectionActionTypes.UPDATE_FILTER_REQUEST),
         map(action => action.payload),
-        combineLatest(this.store.select(fromProvider.getSelectedProviderId).pipe(skipWhile(id => !id))),
+        withLatestFrom(this.store.select(fromProvider.getSelectedProviderId).pipe(skipWhile(id => !id))),
         switchMap(([filter, providerId]) => {
             delete filter.modifiedDate;
             delete filter.createdDate;
@@ -100,7 +100,7 @@ export class FilterCollectionEffects {
     updateFilterSuccessRedirect$ = this.actions$.pipe(
         ofType<actions.UpdateFilterSuccess>(FilterCollectionActionTypes.UPDATE_FILTER_SUCCESS),
         map(action => action.payload),
-        combineLatest(this.store.select(fromProvider.getSelectedProviderId).pipe(skipWhile(id => !id))),
+        withLatestFrom(this.store.select(fromProvider.getSelectedProviderId).pipe(skipWhile(id => !id))),
         tap(([filter, provider]) => this.router.navigate(['/', 'metadata', 'provider', provider, 'filters']))
     );
 

ui/src/app/metadata/filter/reducer/collection.reducer.spec.ts

@@ -23,7 +23,7 @@ describe('Filter Reducer', () => {
         });
     });
 
-    describe(`${FilterCollectionActionTypes.SELECT_FILTER}`, () => {
+    describe(`${FilterCollectionActionTypes.SELECT_FILTER_REQUEST}`, () => {
         it('should set the selected id in the store', () => {
             const selectedFilterId = 'foo';
             const action = new SelectFilter(selectedFilterId);
@@ -55,7 +55,7 @@ describe('Filter Reducer', () => {
         });
     });
 
-    describe(`${FilterCollectionActionTypes.ADD_FILTER}`, () => {
+    describe(`${FilterCollectionActionTypes.ADD_FILTER_REQUEST}`, () => {
         it('should set saving to true', () => {
             const filter = new EntityAttributesFilterEntity({ resourceId: 'foo', createdDate: new Date().toLocaleDateString() });
             const action = new AddFilterRequest(filter);

ui/src/app/metadata/filter/reducer/collection.reducer.ts

@@ -41,7 +41,7 @@ export function reducer(state = initialState, action: FilterCollectionActionsUni
             });
         }
 
-        case FilterCollectionActionTypes.ADD_FILTER:
+        case FilterCollectionActionTypes.ADD_FILTER_REQUEST:
         case FilterCollectionActionTypes.UPDATE_FILTER_REQUEST: {
             return {
                 ...state,
@@ -65,7 +65,7 @@ export function reducer(state = initialState, action: FilterCollectionActionsUni
             };
         }
 
-        case FilterCollectionActionTypes.SELECT_FILTER: {
+        case FilterCollectionActionTypes.SELECT_FILTER_REQUEST: {
             return {
                 ...state,
                 selectedFilterId: action.payload,

ui/src/app/metadata/filter/reducer/filter.reducer.spec.ts

@@ -1,4 +1,4 @@
-import { reducer } from './filter.reducer';
+import { reducer, initialState as snapshot } from './filter.reducer';
 import * as fromFilter from './filter.reducer';
 import { SelectId, LoadEntityPreviewSuccess, UpdateFilterChanges, FilterActionTypes, CancelCreateFilter } from '../action/filter.action';
 import { SearchActionTypes } from '../action/search.action';
@@ -18,14 +18,6 @@ import { MDUI } from '../../domain/model';
 import { MetadataFilter } from '../../domain/model';
 import { EntityAttributesFilterEntity } from '../../domain/entity/filter/entity-attributes-filter';
 
-
-const snapshot: fromFilter.FilterState = {
-    selected: null,
-    changes: null,
-    preview: null,
-    saving: false
-};
-
 const mdui: MDUI = {
     displayName: 'foo',
     informationUrl: 'bar',
@@ -70,19 +62,6 @@ describe('Filter Reducer', () => {
         });
     });
 
-    describe(`${FilterCollectionActionTypes.ADD_FILTER} action`, () => {
-        it('should set saving to true', () => {
-            const result = reducer(snapshot, new AddFilterRequest(new EntityAttributesFilterEntity()));
-            expect(result.saving).toBe(true);
-        });
-    });
-    describe(`${FilterCollectionActionTypes.UPDATE_FILTER_REQUEST} action`, () => {
-        it('should set saving to true', () => {
-            const result = reducer(snapshot, new UpdateFilterRequest(new EntityAttributesFilterEntity()));
-            expect(result.saving).toBe(true);
-        });
-    });
-
     describe(`${FilterCollectionActionTypes.ADD_FILTER_SUCCESS} action`, () => {
         it('should set saving to true', () => {
             const result = reducer(snapshot, new AddFilterSuccess(new EntityAttributesFilterEntity()));

ui/src/app/metadata/filter/reducer/filter.reducer.ts

@@ -13,14 +13,12 @@ export interface FilterState {
     selected: string | null;
     changes: MetadataFilter | null;
     preview: MDUI | null;
-    saving: boolean;
 }
 
 export const initialState: FilterState = {
     selected: null,
     changes: null,
-    preview: null,
-    saving: false
+    preview: null
 };
 
 export function reducer(state = initialState, action: FilterActionsUnion | SearchActionsUnion | FilterCollectionActionsUnion): FilterState {
@@ -46,23 +44,6 @@ export function reducer(state = initialState, action: FilterActionsUnion | Searc
                 }
             };
         }
-        case FilterCollectionActionTypes.ADD_FILTER:
-        case FilterCollectionActionTypes.UPDATE_FILTER_REQUEST: {
-            return {
-                ...state,
-                saving: true
-            };
-        }
-        case FilterCollectionActionTypes.ADD_FILTER_FAIL:
-        case FilterCollectionActionTypes.UPDATE_FILTER_FAIL: {
-            return {
-                ...state,
-                saving: false
-            };
-        }
-        case FilterCollectionActionTypes.ADD_FILTER_SUCCESS:
-        case FilterCollectionActionTypes.UPDATE_FILTER_SUCCESS:
-        case SearchActionTypes.CLEAR_SEARCH:
         case FilterActionTypes.CANCEL_CREATE_FILTER: {
             return {
                 ...initialState
@@ -77,4 +58,3 @@ export function reducer(state = initialState, action: FilterActionsUnion | Searc
 export const getSelected = (state: FilterState) => state.selected;
 export const getFilterChanges = (state: FilterState) => state.changes;
 export const getPreview = (state: FilterState) => state.preview;
-export const getSaving = (state: FilterState) => state.saving;