Merged in feature/SHIBUI-293 (pull request #19)

SHIBUI-293 Updated autocomplete for async searching

ui/src/app/edit-provider/action/editor.action.ts

@@ -14,12 +14,6 @@ export class UpdateStatus implements Action {
     constructor(public payload: { [key: string]: string }) { }
 }
 
-export class UpdateSaved implements Action {
-    readonly type = UPDATE_SAVED;
-
-    constructor(public payload: boolean) { }
-}
-
 export class UpdateChanges implements Action {
     readonly type = UPDATE_CHANGES;
 
@@ -28,8 +22,6 @@ export class UpdateChanges implements Action {
 
 export class CancelChanges implements Action {
     readonly type = CANCEL_CHANGES;
-
-    constructor(public payload: boolean = true) { }
 }
 
 export class SaveChanges implements Action {
@@ -46,7 +38,6 @@ export class ResetChanges implements Action {
 
 export type Actions =
     | UpdateStatus
-    | UpdateSaved
     | UpdateChanges
     | CancelChanges
     | SaveChanges

ui/src/app/edit-provider/effect/editor.effect.ts

@@ -13,8 +13,8 @@ export class EditorEffects {
     @Effect({dispatch: false})
     cancelChanges$ = this.actions$
         .ofType<editor.CancelChanges>(editor.CANCEL_CHANGES)
-        .map(action => action.payload)
         .switchMap(() => this.router.navigate(['/dashboard']));
+
     @Effect()
     updateProviderSuccessRedirect$ = this.actions$
         .ofType<provider.UpdateProviderSuccess>(provider.UPDATE_PROVIDER_SUCCESS)

ui/src/app/metadata-filter/action/filter.action.spec.ts

@@ -0,0 +1,14 @@
+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.LoadEntityIds('foo').type).toBe(actions.LOAD_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([]).type).toBe(actions.VIEW_MORE_IDS);
+        expect(new actions.SelectId('foo').type).toBe(actions.SELECT_ID);
+        expect(new actions.QueryEntityIds([]).type).toBe(actions.QUERY_ENTITY_IDS);
+    });
+});

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

@@ -0,0 +1,65 @@
+import { Action } from '@ngrx/store';
+
+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 CANCEL_CREATE_FILTER = '[Filter] Cancel Create Filter';
+
+export const LOAD_ENTITY_IDS = '[Entity ID Collection] Load Entity Ids';
+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: string[]) { }
+}
+
+export class CancelCreateFilter implements Action {
+    readonly type = CANCEL_CREATE_FILTER;
+}
+
+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 LoadEntityIds implements Action {
+    readonly type = LOAD_ENTITY_IDS;
+
+    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 type Actions =
+    | ViewMoreIds
+    | CancelViewMore
+    | CancelCreateFilter
+    | SelectId
+    | LoadEntityIds
+    | LoadEntityIdsSuccess
+    | LoadEntityIdsError
+    | QueryEntityIds;

ui/src/app/metadata-filter/component/search-dialog.component.html

@@ -0,0 +1,16 @@
+<div class="modal-header">
+    <h4 class="modal-title">Heading</h4>
+    <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="activeModal.dismiss()">
+        <span aria-hidden="true">&times;</span>
+    </button>
+</div>
+<div class="modal-body">
+    Body
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn btn-primary" (click)="activeModal.close('https://account.example.com/sso')">
+        <i class="fa fa-save"></i>
+        Select ID
+    </button>
+    <button type="button" class="btn btn-secondary" (click)="activeModal.dismiss()" i18n="@@action--cancel">Cancel</button>
+</div>

ui/src/app/metadata-filter/component/search-dialog.component.spec.ts

@@ -0,0 +1,39 @@
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { ReactiveFormsModule, FormBuilder } from '@angular/forms';
+import { NgbModalModule, NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { StoreModule, Store, combineReducers } from '@ngrx/store';
+import { SearchDialogComponent } from './search-dialog.component';
+import { NgbActiveModalStub } from '../../../testing/modal.stub';
+import * as fromFilter from '../reducer';
+
+describe('Search Dialog', () => {
+    let fixture: ComponentFixture<SearchDialogComponent>;
+    let instance: SearchDialogComponent;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [
+                { provide: NgbActiveModal, useClass: NgbActiveModalStub }
+            ],
+            imports: [
+                ReactiveFormsModule,
+                NgbModalModule,
+                StoreModule.forRoot({
+                    'metadata-filter': combineReducers(fromFilter.reducers),
+                }),
+            ],
+            declarations: [
+                SearchDialogComponent
+            ],
+        });
+
+        fixture = TestBed.createComponent(SearchDialogComponent);
+        instance = fixture.componentInstance;
+    });
+
+    it('should compile', () => {
+        fixture.detectChanges();
+
+        expect(fixture).toBeDefined();
+    });
+});

ui/src/app/metadata-filter/component/search-dialog.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnChanges, OnInit } from '@angular/core';
+import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { Observable } from 'rxjs/Observable';
+import { Store } from '@ngrx/store';
+
+import * as fromFilter from '../reducer';
+
+@Component({
+    selector: 'search-dialog',
+    templateUrl: './search-dialog.component.html'
+})
+export class SearchDialogComponent implements OnInit, OnChanges {
+    constructor(
+        public activeModal: NgbActiveModal,
+        private store: Store<fromFilter.State>
+    ) {
+        // console.log(activeModal);
+    }
+
+    ngOnChanges(): void {
+
+    }
+
+    ngOnInit(): void {
+
+    }
+} /* istanbul ignore next */

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

@@ -49,6 +49,7 @@
                                         <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="loading$ | async"></i>
                                         </span>
                                     </label>
                                     <span class="text-right col-sm-2">
@@ -61,10 +62,14 @@
                                 </div>
                                 <auto-complete
                                     id="entityId"
+                                    class="component-control"
                                     formControlName="entityId"
-                                    [options]="entityIds$ | async"
+                                    [matches]="entityIds$ | async"
                                     [required]="true"
-                                    (more)="onViewMore($event)">
+                                    limit="10"
+                                    [processing]="loading$ | async"
+                                    (onChange)="searchEntityIds($event)"
+                                    (more)="onViewMore()">
                                 </auto-complete>
                                 <ng-container *ngIf="form.get('entityId').touched && form.get('entityId').invalid">
                                     <small class="form-text text-danger" *ngIf="form.get('entityId').hasError('required')">
@@ -91,10 +96,18 @@
                     <div class="col-12">
                         <hr />
                         <h2>TESTING: </h2>
-                        Test Options:
-                        <pre>{{ entityIds$ | async | json }}</pre>
-                        Current Form Values:
-                        <pre>{{ form.value | json }}</pre>
+                        <div *ngIf="form.errors">
+                            Form Errors:
+                            <pre>{{ form.errors | json }}</pre>
+                        </div>
+                        <div>
+                            Test Options:
+                            <pre>{{ entityIds$ | async | json }}</pre>
+                        </div>
+                        <div>
+                            Current Form Values:
+                            <pre>{{ form.value | json }}</pre>
+                        </div>
                             <!--<relying-party-form [provider]="latest$ | async"></relying-party-form>
                             <attribute-release-form [provider]="latest$ | async"></attribute-release-form>-->
                     </div>

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

@@ -24,7 +24,7 @@ describe('New Metadata Filter Page', () => {
             ],
             imports: [
                 StoreModule.forRoot({
-                    providers: combineReducers(fromFilter.reducers),
+                    'metadata-filter': combineReducers(fromFilter.reducers),
                 }),
                 ReactiveFormsModule,
                 ProviderEditorFormModule,
@@ -53,4 +53,26 @@ describe('New Metadata Filter Page', () => {
             expect(store.dispatch).toHaveBeenCalled();
         });
     });
+
+    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();
+            expect(store.dispatch).toHaveBeenCalled();
+        });
+    });
 });