[ADF-2128] facet container component (#3094)

* (wip) facet container * shaping out the API * code lint fixes * radiobox facet example * fields selector facet * search limits support * scope locations facet example * move custom search to 'search.query' config * use facet fields and queries from the config file * use facet filters * use facet buckets in query * preserve expanded/checked states * code cleanup and binding fixes * fix apis after rebase * extract query builder into separate class * code improvements * full chip list (merge facet fields with queries) * placeholder for range requests * move search infrastructure to ADF core * cleanup code * auto-search on init * move search components to the content services * selected facets chip list * split into separate components at ADF level * move the rest of the implementation to ADF * facet builder fixes and tests * translation support for category names * docs placeholders * update language level * unit tests and packaging updates * fix after rebase * remove fdescribe * some docs on search settings * rename components as per review * simplify chip list as per review * turn query builder into service * improve search service, integrate old search results * fix node selector integration * move service to the top module * update tests * remove fdescribe * update tests * test fixes * test fixes * test updates * fix tests * code and test fixes * remove fit * fix tests * fix tests * remove obsolete test * increase bundle threshold * update docs to reflect PR changes * fix docs
2025-07-31 17:38:48 +00:00 · 2018-03-29 11:34:09 +01:00
parent d6f51c22aa
commit ed48994e67
59 changed files with 2328 additions and 183 deletions
--- a/lib/content-services/search/components/search-chip-list/search-chip-list.component.html
+++ b/lib/content-services/search/components/search-chip-list/search-chip-list.component.html
@@ -0,0 +1,20 @@
+<mat-chip-list>
+    <ng-container *ngIf="searchFilter && searchFilter.selectedFacetQueries">
+        <mat-chip
+            *ngFor="let label of searchFilter.selectedFacetQueries"
+            [removable]="true"
+            (remove)="searchFilter.unselectFacetQuery(label)">
+            {{ label }}
+            <mat-icon matChipRemove>cancel</mat-icon>
+        </mat-chip>
+    </ng-container>
+    <ng-container *ngIf="searchFilter && searchFilter.selectedBuckets">
+        <mat-chip
+            *ngFor="let bucket of searchFilter.selectedBuckets"
+            [removable]="true"
+            (remove)="searchFilter.unselectFacetBucket(bucket)">
+            {{ bucket.display || bucket.label }}
+            <mat-icon matChipRemove>cancel</mat-icon>
+        </mat-chip>
+    </ng-container>
+</mat-chip-list>
--- a/lib/content-services/search/components/search-chip-list/search-chip-list.component.ts
+++ b/lib/content-services/search/components/search-chip-list/search-chip-list.component.ts
@@ -0,0 +1,31 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ViewEncapsulation, Input } from '@angular/core';
+import { SearchFilterComponent } from '../../components/search-filter/search-filter.component';
+
+@Component({
+    selector: 'adf-search-chip-list',
+    templateUrl: './search-chip-list.component.html',
+    encapsulation: ViewEncapsulation.None,
+    host: { class: 'adf-search-chip-list' }
+})
+export class SearchChipListComponent {
+
+    @Input()
+    searchFilter: SearchFilterComponent;
+}
--- a/lib/content-services/search/components/search-control.component.spec.ts
+++ b/lib/content-services/search/components/search-control.component.spec.ts
@@ -20,7 +20,6 @@ import { async, discardPeriodicTasks, fakeAsync, ComponentFixture, TestBed, tick
 import { By } from '@angular/platform-browser';
 import { AuthenticationService, SearchService } from '@alfresco/adf-core';
 import { ThumbnailService } from '@alfresco/adf-core';
-import { Observable } from 'rxjs/Observable';
 import { noResult, results } from '../../mock';
 import { SearchControlComponent } from './search-control.component';
 import { SearchTriggerDirective } from './search-trigger.directive';
@@ -83,9 +82,9 @@ describe('SearchControlComponent', () => {
        }));

        it('should emit searchChange when search term input changed', async(() => {
-            spyOn(searchService, 'search').and.callFake(() => {
-                return Observable.of({ entry: { list: [] } });
-            });
+            spyOn(searchService, 'search').and.returnValue(
+                Promise.resolve({ entry: { list: [] } })
+            );
            component.searchChange.subscribe(value => {
                expect(value).toBe('customSearchTerm');
            });
@@ -97,7 +96,7 @@ describe('SearchControlComponent', () => {
        it('should update FAYT search when user inputs a valid term', async(() => {
            typeWordIntoSearchInput('customSearchTerm');
            spyOn(component, 'isSearchBarActive').and.returnValue(true);
-            spyOn(searchService, 'search').and.returnValue(Observable.of(results));
+            spyOn(searchService, 'search').and.returnValue(Promise.resolve(results));

            fixture.detectChanges();
            fixture.whenStable().then(() => {
@@ -111,7 +110,7 @@ describe('SearchControlComponent', () => {
        it('should NOT update FAYT term when user inputs an empty string as search term ', async(() => {
            typeWordIntoSearchInput('');
            spyOn(component, 'isSearchBarActive').and.returnValue(true);
-            spyOn(searchService, 'search').and.returnValue(Observable.of(results));
+            spyOn(searchService, 'search').and.returnValue(Promise.resolve(results));

            fixture.detectChanges();
            fixture.whenStable().then(() => {
@@ -179,7 +178,7 @@ describe('SearchControlComponent', () => {
            });

            spyOn(component, 'isSearchBarActive').and.returnValue(true);
-            spyOn(searchService, 'search').and.returnValue(Observable.of(results));
+            spyOn(searchService, 'search').and.returnValue(Promise.resolve(results));

            fixture.detectChanges();
            let inputDebugElement = debugElement.query(By.css('#adf-control-input'));
@@ -199,7 +198,7 @@ describe('SearchControlComponent', () => {

        it('should make autocomplete list control visible when search box has focus and there is a search result', (done) => {
            spyOn(component, 'isSearchBarActive').and.returnValue(true);
-            spyOn(searchService, 'search').and.returnValue(Observable.of(results));
+            spyOn(searchService, 'search').and.returnValue(Promise.resolve(results));
            fixture.detectChanges();

            typeWordIntoSearchInput('TEST');
@@ -214,7 +213,7 @@ describe('SearchControlComponent', () => {

        it('should show autocomplete list noe results when search box has focus and there is search result with length 0', async(() => {
            spyOn(component, 'isSearchBarActive').and.returnValue(true);
-            spyOn(searchService, 'search').and.returnValue(Observable.of(noResult));
+            spyOn(searchService, 'search').and.returnValue(Promise.resolve(noResult));
            fixture.detectChanges();

            typeWordIntoSearchInput('NO RES');
@@ -228,7 +227,7 @@ describe('SearchControlComponent', () => {

        it('should hide autocomplete list results when the search box loses focus', (done) => {
            spyOn(component, 'isSearchBarActive').and.returnValue(true);
-            spyOn(searchService, 'search').and.returnValue(Observable.of(results));
+            spyOn(searchService, 'search').and.returnValue(Promise.resolve(results));
            fixture.detectChanges();

            let inputDebugElement = debugElement.query(By.css('#adf-control-input'));
@@ -249,7 +248,7 @@ describe('SearchControlComponent', () => {

        it('should keep autocomplete list control visible when user tabs into results', async(() => {
            spyOn(component, 'isSearchBarActive').and.returnValue(true);
-            spyOn(searchService, 'search').and.returnValue(Observable.of(results));
+            spyOn(searchService, 'search').and.returnValue(Promise.resolve(results));
            fixture.detectChanges();

            let inputDebugElement = debugElement.query(By.css('#adf-control-input'));
@@ -269,7 +268,7 @@ describe('SearchControlComponent', () => {

        it('should close the autocomplete when user press ESCAPE', (done) => {
            spyOn(component, 'isSearchBarActive').and.returnValue(true);
-            spyOn(searchService, 'search').and.returnValue(Observable.of(results));
+            spyOn(searchService, 'search').and.returnValue(Promise.resolve(results));
            fixture.detectChanges();

            let inputDebugElement = debugElement.query(By.css('#adf-control-input'));
@@ -293,7 +292,7 @@ describe('SearchControlComponent', () => {

        it('should close the autocomplete when user press ENTER on input', (done) => {
            spyOn(component, 'isSearchBarActive').and.returnValue(true);
-            spyOn(searchService, 'search').and.returnValue(Observable.of(results));
+            spyOn(searchService, 'search').and.returnValue(Promise.resolve(results));
            fixture.detectChanges();

            let inputDebugElement = debugElement.query(By.css('#adf-control-input'));
@@ -317,7 +316,7 @@ describe('SearchControlComponent', () => {

        it('should focus input element when autocomplete list is cancelled', async(() => {
            spyOn(component, 'isSearchBarActive').and.returnValue(true);
-            spyOn(searchService, 'search').and.returnValue(Observable.of(results));
+            spyOn(searchService, 'search').and.returnValue(Promise.resolve(results));
            fixture.detectChanges();

            let inputDebugElement = debugElement.query(By.css('#adf-control-input'));
@@ -333,7 +332,7 @@ describe('SearchControlComponent', () => {
        }));

        it('should NOT display a autocomplete list control when configured not to', async(() => {
-            spyOn(searchService, 'search').and.returnValue(Observable.of(results));
+            spyOn(searchService, 'search').and.returnValue(Promise.resolve(results));
            component.liveSearchEnabled = false;
            fixture.detectChanges();

@@ -345,7 +344,7 @@ describe('SearchControlComponent', () => {
        }));

        it('should select the first item on autocomplete list when ARROW DOWN is pressed on input', async(() => {
-            spyOn(searchService, 'search').and.returnValue(Observable.of(results));
+            spyOn(searchService, 'search').and.returnValue(Promise.resolve(results));
            fixture.detectChanges();
            typeWordIntoSearchInput('TEST');
            let inputDebugElement = debugElement.query(By.css('#adf-control-input'));
@@ -361,7 +360,7 @@ describe('SearchControlComponent', () => {
        }));

        it('should select the second item on autocomplete list when ARROW DOWN is pressed on list', async(() => {
-            spyOn(searchService, 'search').and.returnValue(Observable.of(results));
+            spyOn(searchService, 'search').and.returnValue(Promise.resolve(results));
            fixture.detectChanges();
            let inputDebugElement = debugElement.query(By.css('#adf-control-input'));
            typeWordIntoSearchInput('TEST');
@@ -382,7 +381,7 @@ describe('SearchControlComponent', () => {
        }));

        it('should focus the input search when ARROW UP is pressed on the first list item', (done) => {
-            spyOn(searchService, 'search').and.returnValue(Observable.of(results));
+            spyOn(searchService, 'search').and.returnValue(Promise.resolve(results));
            fixture.detectChanges();
            let inputDebugElement = debugElement.query(By.css('#adf-control-input'));
            typeWordIntoSearchInput('TEST');
@@ -494,7 +493,7 @@ describe('SearchControlComponent', () => {

        it('should emit a option clicked event when item is clicked', async(() => {
            spyOn(component, 'isSearchBarActive').and.returnValue(true);
-            spyOn(searchService, 'search').and.returnValue(Observable.of(results));
+            spyOn(searchService, 'search').and.returnValue(Promise.resolve(results));
            component.optionClicked.subscribe((item) => {
                expect(item.entry.id).toBe('123');
            });
@@ -510,7 +509,7 @@ describe('SearchControlComponent', () => {

        it('should set deactivate the search after element is clicked', (done) => {
            spyOn(component, 'isSearchBarActive').and.returnValue(true);
-            spyOn(searchService, 'search').and.returnValue(Observable.of(results));
+            spyOn(searchService, 'search').and.returnValue(Promise.resolve(results));
            component.optionClicked.subscribe((item) => {
                window.setTimeout(() => {
                    expect(component.subscriptAnimationState).toBe('inactive');
@@ -530,7 +529,7 @@ describe('SearchControlComponent', () => {

        it('should NOT reset the search term after element is clicked', async(() => {
            spyOn(component, 'isSearchBarActive').and.returnValue(true);
-            spyOn(searchService, 'search').and.returnValue(Observable.of(results));
+            spyOn(searchService, 'search').and.returnValue(Promise.resolve(results));
            component.optionClicked.subscribe((item) => {
                expect(component.searchTerm).not.toBeFalsy();
                expect(component.searchTerm).toBe('TEST');
@@ -585,7 +584,7 @@ describe('SearchControlComponent - No result custom', () => {
    it('should display the custom no results when it is configured', async(() => {
        const noResultCustomMessage = 'BANDI IS NOTHING';
        componentCustom.setCustomMessageForNoResult(noResultCustomMessage);
-        spyOn(searchServiceCustom, 'search').and.returnValue(Observable.of(noResult));
+        spyOn(searchServiceCustom, 'search').and.returnValue(Promise.resolve(noResult));
        fixtureCustom.detectChanges();

        let inputDebugElement = fixtureCustom.debugElement.query(By.css('#adf-control-input'));
--- a/lib/content-services/search/components/search-fields/search-fields.component.html
+++ b/lib/content-services/search/components/search-fields/search-fields.component.html
@@ -0,0 +1,6 @@
+<mat-checkbox
+    *ngFor="let option of settings.options"
+    [checked]="option.checked"
+    (change)="changeHandler($event, option)">
+    {{ option.name }}
+</mat-checkbox>
--- a/lib/content-services/search/components/search-fields/search-fields.component.scss
+++ b/lib/content-services/search/components/search-fields/search-fields.component.scss
@@ -0,0 +1,8 @@
+.adf-search-fields {
+    display: flex;
+    flex-direction: column;
+
+    .mat-checkbox {
+        margin: 5px;
+    }
+}
--- a/lib/content-services/search/components/search-fields/search-fields.component.ts
+++ b/lib/content-services/search/components/search-fields/search-fields.component.ts
@@ -0,0 +1,70 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ViewEncapsulation, OnInit, Input } from '@angular/core';
+import { MatCheckboxChange } from '@angular/material';
+
+import { SearchWidget } from '../../search-widget.interface';
+import { SearchWidgetSettings } from '../../search-widget-settings.interface';
+import { SearchQueryBuilderService } from '../../search-query-builder.service';
+
+@Component({
+    selector: 'adf-search-fields',
+    templateUrl: './search-fields.component.html',
+    styleUrls: ['./search-fields.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    host: { class: 'adf-search-fields' }
+})
+export class SearchFieldsComponent implements SearchWidget, OnInit {
+
+    @Input()
+    value: string;
+
+    id: string;
+    settings: SearchWidgetSettings;
+    context: SearchQueryBuilderService;
+
+    ngOnInit() {
+        const defaultOptions = (this.settings.options || [])
+            .filter(opt => opt.default)
+            .map(opt => {
+                opt.checked = true;
+                return opt;
+            });
+
+        if (defaultOptions.length > 0) {
+            this.flush(defaultOptions);
+        }
+    }
+
+    changeHandler(event: MatCheckboxChange, option: any) {
+        option.checked = event.checked;
+        this.flush(this.settings.options);
+    }
+
+    flush(opts: any[] = []) {
+        const checkedValues = opts
+            .filter(v => v.checked)
+            .map(v => v.fields)
+            .reduce((prev, curr) => {
+                return prev.concat(curr);
+            }, []);
+
+        this.context.fields[this.id] = checkedValues;
+        this.context.update();
+    }
+}
--- a/lib/content-services/search/components/search-filter/search-filter.component.html
+++ b/lib/content-services/search/components/search-filter/search-filter.component.html
@@ -0,0 +1,54 @@
+<mat-accordion multi="true" displayMode="flat">
+
+    <mat-expansion-panel
+        *ngFor="let category of queryBuilder.categories"
+        [expanded]="category.expanded"
+        (opened)="onCategoryExpanded(category)"
+        (closed)="onCategoryCollapsed(category)">
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                {{ category.name | translate }}
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <adf-search-widget-container
+            [id]="category.id"
+            [selector]="category.component.selector"
+            [settings]="category.component.settings">
+        </adf-search-widget-container>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>Facet Queries</mat-panel-title>
+        </mat-expansion-panel-header>
+        <div class="checklist">
+            <ng-container *ngFor="let query of responseFacetQueries">
+                <mat-checkbox
+                    *ngIf="query.count > 0"
+                    [checked]="query.$checked"
+                    (change)="onFacetQueryToggle($event, query)">
+                    {{ query.label }} ({{ query.count }})
+                </mat-checkbox>
+            </ng-container>
+        </div>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel
+        *ngFor="let field of responseFacetFields"
+        [expanded]="field.$expanded"
+        (opened)="onFacetFieldExpanded(field)"
+        (closed)="onFacetFieldCollapsed(field)">
+        <mat-expansion-panel-header>
+            <mat-panel-title>{{ field.label }}</mat-panel-title>
+        </mat-expansion-panel-header>
+        <div class="checklist">
+            <mat-checkbox
+                *ngFor="let bucket of field.buckets"
+                [checked]="bucket.$checked"
+                (change)="onFacetToggle($event, field, bucket)">
+                {{ bucket.display || bucket.label }} ({{ bucket.count }})
+            </mat-checkbox>
+        </div>
+    </mat-expansion-panel>
+
+</mat-accordion>
--- a/lib/content-services/search/components/search-filter/search-filter.component.scss
+++ b/lib/content-services/search/components/search-filter/search-filter.component.scss
@@ -0,0 +1,8 @@
+.checklist {
+    display: flex;
+    flex-direction: column;
+
+    .mat-checkbox {
+        margin: 5px;
+    }
+}
--- a/lib/content-services/search/components/search-filter/search-filter.component.spec.ts
+++ b/lib/content-services/search/components/search-filter/search-filter.component.spec.ts
@@ -0,0 +1,337 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { SearchFilterComponent } from './search-filter.component';
+import { SearchQueryBuilderService } from '../../search-query-builder.service';
+import { SearchConfiguration } from '../../search-configuration.interface';
+import { AppConfigService } from '@alfresco/adf-core';
+import { Subject } from 'rxjs/Subject';
+
+describe('SearchSettingsComponent', () => {
+
+    let component: SearchFilterComponent;
+    let queryBuilder: SearchQueryBuilderService;
+    let appConfig: AppConfigService;
+
+    beforeEach(() => {
+        appConfig = new AppConfigService(null);
+        appConfig.config.search = {};
+
+        queryBuilder = new SearchQueryBuilderService(appConfig, null);
+        const searchMock: any = {
+            dataLoaded: new Subject()
+        };
+        component = new SearchFilterComponent(queryBuilder, searchMock);
+        component.ngOnInit();
+    });
+
+    it('should subscribe to query builder executed event', () => {
+        spyOn(component, 'onDataLoaded').and.stub();
+        const data = {};
+        queryBuilder.executed.next(data);
+
+        expect(component.onDataLoaded).toHaveBeenCalledWith(data);
+    });
+
+    it('should update category model on expand', () => {
+        const category: any = { expanded: false };
+
+        component.onCategoryExpanded(category);
+
+        expect(category.expanded).toBeTruthy();
+    });
+
+    it('should update category model on collapse', () => {
+        const category: any = { expanded: true };
+
+        component.onCategoryCollapsed(category);
+
+        expect(category.expanded).toBeFalsy();
+    });
+
+    it('should update facet field model on expand', () => {
+        const field: any = { $expanded: false };
+
+        component.onFacetFieldExpanded(field);
+
+        expect(field.$expanded).toBeTruthy();
+    });
+
+    it('should update facet field model on collapse', () => {
+        const field: any = { $expanded: true };
+
+        component.onFacetFieldCollapsed(field);
+
+        expect(field.$expanded).toBeFalsy();
+    });
+
+    it('should update bucket model and query builder on facet toggle', () => {
+        spyOn(queryBuilder, 'update').and.stub();
+
+        const event: any = { checked: true };
+        const field: any = {};
+        const bucket: any = { $checked: false, filterQuery: 'q1' };
+
+        component.onFacetToggle(event, field, bucket);
+
+        expect(component.selectedBuckets.length).toBe(1);
+        expect(component.selectedBuckets[0]).toEqual(bucket);
+
+        expect(queryBuilder.filterQueries.length).toBe(1);
+        expect(queryBuilder.filterQueries[0].query).toBe('q1');
+
+        expect(queryBuilder.update).toHaveBeenCalled();
+    });
+
+    it('should update bucket model and query builder on facet un-toggle', () => {
+        spyOn(queryBuilder, 'update').and.stub();
+
+        const event: any = { checked: false };
+        const field: any = { label: 'f1' };
+        const bucket: any = { $checked: true, filterQuery: 'q1', $field: 'f1', label: 'b1' };
+
+        component.selectedBuckets.push(bucket);
+        queryBuilder.addFilterQuery(bucket.filterQuery);
+
+        component.onFacetToggle(event, field, bucket);
+
+        expect(bucket.$checked).toBeFalsy();
+        expect(component.selectedBuckets.length).toBe(0);
+        expect(queryBuilder.filterQueries.length).toBe(0);
+
+        expect(queryBuilder.update).toHaveBeenCalled();
+    });
+
+    it('should unselect facet query and update builder', () => {
+        const config: SearchConfiguration = {
+            facetQueries: [
+                { label: 'q1', query: 'query1' }
+            ]
+        };
+        appConfig.config.search = config;
+        queryBuilder = new SearchQueryBuilderService(appConfig, null);
+        component = new SearchFilterComponent(queryBuilder, null);
+
+        spyOn(queryBuilder, 'update').and.stub();
+        queryBuilder.filterQueries = [{ query: 'query1' }];
+        component.selectedFacetQueries = ['q1'];
+
+        component.unselectFacetQuery('q1');
+
+        expect(component.selectedFacetQueries.length).toBe(0);
+        expect(queryBuilder.filterQueries.length).toBe(0);
+
+        expect(queryBuilder.update).toHaveBeenCalled();
+    });
+
+    it('should unselect facet bucket and update builder', () => {
+        spyOn(queryBuilder, 'update').and.stub();
+
+        const bucket: any = { $checked: true, filterQuery: 'q1', $field: 'f1', label: 'b1' };
+        component.selectedBuckets.push(bucket);
+        queryBuilder.filterQueries.push({ query: 'q1' });
+
+        component.unselectFacetBucket(bucket);
+
+        expect(component.selectedBuckets.length).toBe(0);
+        expect(queryBuilder.filterQueries.length).toBe(0);
+
+        expect(queryBuilder.update).toHaveBeenCalled();
+    });
+
+    it('should fetch facet queries from response payload', () => {
+        component.responseFacetQueries = [];
+        const queries = [
+            { label: 'q1', query: 'query1' },
+            { label: 'q2', query: 'query2' }
+        ];
+        const data = {
+            list: {
+                context: {
+                    facetQueries: queries
+                }
+            }
+        };
+
+        component.onDataLoaded(data);
+
+        expect(component.responseFacetQueries.length).toBe(2);
+        expect(component.responseFacetQueries).toEqual(queries);
+    });
+
+    it('should not fetch facet queries from response payload', () => {
+        component.responseFacetQueries = [];
+
+        const data = {
+            list: {
+                context: {
+                    facetQueries: null
+                }
+            }
+        };
+
+        component.onDataLoaded(data);
+
+        expect(component.responseFacetQueries.length).toBe(0);
+    });
+
+    it('should restore checked state for new response facet queries', () => {
+        component.selectedFacetQueries = ['q3'];
+        component.responseFacetQueries = [];
+
+        const queries = [
+            { label: 'q1', query: 'query1' },
+            { label: 'q2', query: 'query2' }
+        ];
+        const data = {
+            list: {
+                context: {
+                    facetQueries: queries
+                }
+            }
+        };
+
+        component.onDataLoaded(data);
+
+        expect(component.responseFacetQueries.length).toBe(2);
+        expect((<any> component.responseFacetQueries[0]).$checked).toBeFalsy();
+        expect((<any> component.responseFacetQueries[1]).$checked).toBeFalsy();
+    });
+
+    it('should not restore checked state for new response facet queries', () => {
+        component.selectedFacetQueries = ['q2'];
+        component.responseFacetQueries = [];
+
+        const queries = [
+            { label: 'q1', query: 'query1' },
+            { label: 'q2', query: 'query2' }
+        ];
+        const data = {
+            list: {
+                context: {
+                    facetQueries: queries
+                }
+            }
+        };
+
+        component.onDataLoaded(data);
+
+        expect(component.responseFacetQueries.length).toBe(2);
+        expect((<any> component.responseFacetQueries[0]).$checked).toBeFalsy();
+        expect((<any> component.responseFacetQueries[1]).$checked).toBeTruthy();
+    });
+
+    it('should fetch facet fields from response payload', () => {
+        component.responseFacetFields = [];
+
+        const fields = [
+            { label: 'f1', buckets: [] },
+            { label: 'f2', buckets: [] }
+        ];
+        const data = {
+            list: {
+                context: {
+                    facetsFields: fields
+                }
+            }
+        };
+
+        component.onDataLoaded(data);
+
+        expect(component.responseFacetFields).toEqual(fields);
+    });
+
+    it('should restore expanded state for new response facet fields', () => {
+        component.responseFacetFields = [
+            { label: 'f1', buckets: [] },
+            { label: 'f2', buckets: [], $expanded: true }
+        ];
+
+        const fields = [
+            { label: 'f1', buckets: [] },
+            { label: 'f2', buckets: [] }
+        ];
+        const data = {
+            list: {
+                context: {
+                    facetsFields: fields
+                }
+            }
+        };
+
+        component.onDataLoaded(data);
+
+        expect(component.responseFacetFields.length).toBe(2);
+        expect(component.responseFacetFields[0].$expanded).toBeFalsy();
+        expect(component.responseFacetFields[1].$expanded).toBeTruthy();
+    });
+
+    it('should restore checked buckets for new response facet fields', () => {
+        const bucket1 = { label: 'b1', $field: 'f1', count: 1, filterQuery: 'q1' };
+        const bucket2 = { label: 'b2', $field: 'f2', count: 1, filterQuery: 'q2' };
+
+        component.selectedBuckets = [ bucket2 ];
+        component.responseFacetFields = [
+            { label: 'f2', buckets: [] }
+        ];
+
+        const data = {
+            list: {
+                context: {
+                    facetsFields: [
+                        { label: 'f1', buckets: [ bucket1 ] },
+                        { label: 'f2', buckets: [ bucket2 ] }
+                    ]
+                }
+            }
+        };
+
+        component.onDataLoaded(data);
+
+        expect(component.responseFacetFields.length).toBe(2);
+        expect(component.responseFacetFields[0].buckets[0].$checked).toBeFalsy();
+        expect(component.responseFacetFields[1].buckets[0].$checked).toBeTruthy();
+    });
+
+    it('should reset queries and fields on empty response payload', () => {
+        component.responseFacetQueries = [<any> {}, <any> {}];
+        component.responseFacetFields = [<any> {}, <any> {}];
+
+        const data = {
+            list: {
+                context: {
+                    facetQueries: null,
+                    facetsFields: null
+                }
+            }
+        };
+
+        component.onDataLoaded(data);
+
+        expect(component.responseFacetQueries.length).toBe(0);
+        expect(component.responseFacetFields.length).toBe(0);
+    });
+
+    it('should update query builder only when has bucket to unselect', () => {
+        spyOn(queryBuilder, 'update').and.stub();
+
+        component.unselectFacetBucket(null);
+
+        expect(queryBuilder.update).not.toHaveBeenCalled();
+    });
+
+});
--- a/lib/content-services/search/components/search-filter/search-filter.component.ts
+++ b/lib/content-services/search/components/search-filter/search-filter.component.ts
@@ -0,0 +1,172 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ViewEncapsulation, OnInit } from '@angular/core';
+import { MatCheckboxChange } from '@angular/material';
+import { SearchService } from '@alfresco/adf-core';
+import { SearchQueryBuilderService } from '../../search-query-builder.service';
+import { FacetQuery } from '../../facet-query.interface';
+import { ResponseFacetField } from '../../response-facet-field.interface';
+import { FacetFieldBucket } from '../../facet-field-bucket.interface';
+import { SearchCategory } from '../../search-category.interface';
+import { ResponseFacetQuery } from '../../response-facet-query.interface';
+
+@Component({
+    selector: 'adf-search-filter',
+    templateUrl: './search-filter.component.html',
+    styleUrls: ['./search-filter.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    host: { class: 'adf-search-filter' }
+})
+export class SearchFilterComponent implements OnInit {
+
+    selectedFacetQueries: string[] = [];
+    selectedBuckets: FacetFieldBucket[] = [];
+    responseFacetQueries: FacetQuery[] = [];
+    responseFacetFields: ResponseFacetField[] = [];
+
+    constructor(private queryBuilder: SearchQueryBuilderService, private search: SearchService) {
+        this.queryBuilder.updated.subscribe(query => {
+            this.queryBuilder.execute();
+        });
+    }
+
+    ngOnInit() {
+        if (this.queryBuilder) {
+            this.queryBuilder.executed.subscribe(data => {
+                this.onDataLoaded(data);
+                this.search.dataLoaded.next(data);
+            });
+        }
+    }
+
+    onCategoryExpanded(category: SearchCategory) {
+        category.expanded = true;
+    }
+
+    onCategoryCollapsed(category: SearchCategory) {
+        category.expanded = false;
+    }
+
+    onFacetFieldExpanded(field: ResponseFacetField) {
+        field.$expanded = true;
+    }
+
+    onFacetFieldCollapsed(field: ResponseFacetField) {
+        field.$expanded = false;
+    }
+
+    onFacetQueryToggle(event: MatCheckboxChange, query: ResponseFacetQuery) {
+        const facetQuery = this.queryBuilder.getFacetQuery(query.label);
+
+        if (event.checked) {
+            query.$checked = true;
+            this.selectedFacetQueries.push(facetQuery.label);
+
+            if (facetQuery) {
+                this.queryBuilder.addFilterQuery(facetQuery.query);
+            }
+        } else {
+            query.$checked = false;
+            this.selectedFacetQueries = this.selectedFacetQueries.filter(q => q !== query.label);
+
+            if (facetQuery) {
+                this.queryBuilder.removeFilterQuery(facetQuery.query);
+            }
+        }
+
+        this.queryBuilder.update();
+    }
+
+    onFacetToggle(event: MatCheckboxChange, field: ResponseFacetField, bucket: FacetFieldBucket) {
+        if (event.checked) {
+            bucket.$checked = true;
+            this.selectedBuckets.push({ ...bucket });
+            this.queryBuilder.addFilterQuery(bucket.filterQuery);
+        } else {
+            bucket.$checked = false;
+            const idx = this.selectedBuckets.findIndex(
+                b => b.$field === bucket.$field && b.label === bucket.label
+            );
+
+            if (idx >= 0) {
+                this.selectedBuckets.splice(idx, 1);
+            }
+            this.queryBuilder.removeFilterQuery(bucket.filterQuery);
+        }
+
+        this.queryBuilder.update();
+    }
+
+    unselectFacetQuery(label: string) {
+        const facetQuery = this.queryBuilder.getFacetQuery(label);
+        this.selectedFacetQueries = this.selectedFacetQueries.filter(q => q !== label);
+
+        this.queryBuilder.removeFilterQuery(facetQuery.query);
+        this.queryBuilder.update();
+    }
+
+    unselectFacetBucket(bucket: FacetFieldBucket) {
+        if (bucket) {
+            const idx = this.selectedBuckets.findIndex(
+                b => b.$field === bucket.$field && b.label === bucket.label
+            );
+
+            if (idx >= 0) {
+                this.selectedBuckets.splice(idx, 1);
+            }
+            this.queryBuilder.removeFilterQuery(bucket.filterQuery);
+            this.queryBuilder.update();
+        }
+    }
+
+    onDataLoaded(data: any) {
+        const context = data.list.context;
+
+        if (context) {
+            this.responseFacetQueries = (context.facetQueries || []).map(q => {
+                q.$checked = this.selectedFacetQueries.includes(q.label);
+                return q;
+            });
+
+            const expandedFields = this.responseFacetFields.filter(f => f.$expanded).map(f => f.label);
+
+            this.responseFacetFields = (context.facetsFields || []).map(
+                (field: ResponseFacetField) => {
+                    field.$expanded = expandedFields.includes(field.label);
+
+                    (field.buckets || []).forEach(bucket => {
+                        bucket.$field = field.label;
+                        bucket.$checked = false;
+
+                        const previousBucket = this.selectedBuckets.find(
+                            b => b.$field === bucket.$field && b.label === bucket.label
+                        );
+                        if (previousBucket) {
+                           bucket.$checked = true;
+                        }
+                    });
+                    return field;
+                }
+            );
+        } else {
+            this.responseFacetQueries = [];
+            this.responseFacetFields = [];
+        }
+    }
+
+}
--- a/lib/content-services/search/components/search-radio/search-radio.component.html
+++ b/lib/content-services/search/components/search-radio/search-radio.component.html
@@ -0,0 +1,6 @@
+<mat-radio-group [(ngModel)]="value" (change)="changeHandler($event)">
+    <mat-radio-button
+        *ngFor="let option of settings.options" [value]="option.value">
+        {{ option.name }}
+    </mat-radio-button>
+</mat-radio-group>
--- a/lib/content-services/search/components/search-radio/search-radio.component.scss
+++ b/lib/content-services/search/components/search-radio/search-radio.component.scss
@@ -0,0 +1,10 @@
+.adf-search-radio {
+    .mat-radio-group {
+        display: inline-flex;
+        flex-direction: column;
+    }
+
+    .mat-radio-button {
+        margin: 5px;
+    }
+}
--- a/lib/content-services/search/components/search-radio/search-radio.component.ts
+++ b/lib/content-services/search/components/search-radio/search-radio.component.ts
@@ -0,0 +1,68 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ViewEncapsulation, OnInit, Input } from '@angular/core';
+import { MatRadioChange } from '@angular/material';
+
+import { SearchWidget } from '../../search-widget.interface';
+import { SearchWidgetSettings } from '../../search-widget-settings.interface';
+import { SearchQueryBuilderService } from '../../search-query-builder.service';
+
+@Component({
+    selector: 'adf-search-radio',
+    templateUrl: './search-radio.component.html',
+    styleUrls: ['./search-radio.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    host: { class: 'adf-search-radio' }
+})
+export class SearchRadioComponent implements SearchWidget, OnInit {
+
+    @Input()
+    value: string;
+
+    id: string;
+    settings: SearchWidgetSettings;
+    context: SearchQueryBuilderService;
+
+    ngOnInit() {
+        this.setValue(
+            this.getSelectedValue()
+        );
+    }
+
+    private getSelectedValue(): string {
+        const options: any[] = this.settings['options'] || [];
+        if (options && options.length > 0) {
+            let selected = options.find(opt => opt.default);
+            if (!selected) {
+                selected = options[0];
+            }
+            return selected.value;
+        }
+        return null;
+    }
+
+    private setValue(newValue: string) {
+        this.value = newValue;
+        this.context.queryFragments[this.id] = newValue;
+        this.context.update();
+    }
+
+    changeHandler(event: MatRadioChange) {
+        this.setValue(event.value);
+    }
+}
--- a/lib/content-services/search/components/search-scope-locations/search-scope-locations.component.html
+++ b/lib/content-services/search/components/search-scope-locations/search-scope-locations.component.html
@@ -0,0 +1,11 @@
+<mat-form-field>
+    <mat-select
+        [(value)]="value"
+        (selectionChange)="changeHandler($event)">
+        <mat-option
+            *ngFor="let option of settings.options"
+            [value]="option.value">
+            {{option.name}}
+        </mat-option>
+    </mat-select>
+</mat-form-field>
--- a/lib/content-services/search/components/search-scope-locations/search-scope-locations.component.ts
+++ b/lib/content-services/search/components/search-scope-locations/search-scope-locations.component.ts
@@ -0,0 +1,57 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ViewEncapsulation, OnInit, Input } from '@angular/core';
+import { MatSelectChange } from '@angular/material';
+
+import { SearchWidget } from '../../search-widget.interface';
+import { SearchWidgetSettings } from '../../search-widget-settings.interface';
+import { SearchQueryBuilderService } from '../../search-query-builder.service';
+
+@Component({
+    selector: 'adf-search-scope-locations',
+    templateUrl: './search-scope-locations.component.html',
+    encapsulation: ViewEncapsulation.None,
+    host: { class: 'adf-search-scope-locations' }
+})
+export class SearchScopeLocationsComponent implements SearchWidget, OnInit {
+
+    @Input()
+    value: string;
+
+    id: string;
+    settings: SearchWidgetSettings;
+    context: SearchQueryBuilderService;
+
+    ngOnInit() {
+
+        const defaultSelection = (this.settings.options || []).find(opt => opt.default);
+        if (defaultSelection) {
+            this.flush(defaultSelection.value);
+        }
+    }
+
+    changeHandler(event: MatSelectChange) {
+        this.flush(event.value);
+    }
+
+    flush(value: string) {
+        this.value = value;
+        this.context.scope.locations = value;
+        this.context.update();
+    }
+}
--- a/lib/content-services/search/components/search-text/search-text.component.html
+++ b/lib/content-services/search/components/search-text/search-text.component.html
@@ -0,0 +1,7 @@
+<mat-form-field>
+    <input
+        matInput
+        [placeholder]="settings?.placeholder"
+        [value]="value"
+        (change)="onChangedHandler($event)">
+</mat-form-field>
--- a/lib/content-services/search/components/search-text/search-text.component.ts
+++ b/lib/content-services/search/components/search-text/search-text.component.ts
@@ -0,0 +1,57 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ViewEncapsulation, OnInit, Input } from '@angular/core';
+import { SearchWidget } from '../../search-widget.interface';
+import { SearchWidgetSettings } from '../../search-widget-settings.interface';
+import { SearchQueryBuilderService } from '../../search-query-builder.service';
+
+@Component({
+    selector: 'adf-search-text',
+    templateUrl: './search-text.component.html',
+    encapsulation: ViewEncapsulation.None,
+    host: { class: 'adf-search-text' }
+})
+export class SearchTextComponent implements SearchWidget, OnInit {
+
+    @Input()
+    value = '';
+
+    id: string;
+    settings: SearchWidgetSettings;
+    context: SearchQueryBuilderService;
+
+    ngOnInit() {
+        if (this.context && this.settings) {
+            const pattern = new RegExp(this.settings.pattern, 'g');
+            const match = pattern.exec(this.context.queryFragments[this.id] || '');
+
+            if (match && match.length > 1) {
+                this.value = match[1];
+            }
+        }
+    }
+
+    onChangedHandler(event) {
+        this.value = event.target.value;
+        if (this.value) {
+            this.context.queryFragments[this.id] = `${this.settings.field}:'${this.value}'`;
+            this.context.update();
+        }
+    }
+
+}
--- a/lib/content-services/search/components/search-widget-container/search-widget-container.component.ts
+++ b/lib/content-services/search/components/search-widget-container/search-widget-container.component.ts
@@ -0,0 +1,74 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, Input, ViewChild, ViewContainerRef, OnInit, OnDestroy, Compiler, ModuleWithComponentFactories, ComponentRef } from '@angular/core';
+import { SearchWidgetsModule } from './search-widgets.module';
+import { SearchQueryBuilderService } from '../../search-query-builder.service';
+
+@Component({
+    selector: 'adf-search-widget-container',
+    template: '<div #content></div>'
+})
+export class SearchWidgetContainerComponent implements OnInit, OnDestroy {
+
+    @ViewChild('content', { read: ViewContainerRef })
+    content: ViewContainerRef;
+
+    @Input()
+    id: string;
+
+    @Input()
+    selector: string;
+
+    @Input()
+    settings: any;
+
+    @Input()
+    config: any;
+
+    private module: ModuleWithComponentFactories<SearchWidgetsModule>;
+    private componentRef: ComponentRef<any>;
+
+    constructor(compiler: Compiler, private queryBuilder: SearchQueryBuilderService) {
+        this.module = compiler.compileModuleAndAllComponentsSync(SearchWidgetsModule);
+    }
+
+    ngOnInit() {
+        const factory = this.module.componentFactories.find(f => f.selector === this.selector);
+        if (factory) {
+            this.content.clear();
+            this.componentRef = this.content.createComponent(factory, 0);
+            this.setupWidget(this.componentRef);
+        }
+    }
+
+    private setupWidget(ref: ComponentRef<any>) {
+        if (ref && ref.instance) {
+            ref.instance.id = this.id;
+            ref.instance.settings = { ...this.settings };
+            ref.instance.context = this.queryBuilder;
+        }
+    }
+
+    ngOnDestroy() {
+        if (this.componentRef) {
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+    }
+
+}
--- a/lib/content-services/search/components/search-widget-container/search-widgets.module.ts
+++ b/lib/content-services/search/components/search-widget-container/search-widgets.module.ts
@@ -0,0 +1,58 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import { MatButtonModule, MatInputModule, MatRadioModule, MatCheckboxModule, MatSelectModule } from '@angular/material';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { SearchTextComponent } from '../search-text/search-text.component';
+import { SearchRadioComponent } from '../search-radio/search-radio.component';
+import { SearchFieldsComponent } from '../search-fields/search-fields.component';
+import { SearchScopeLocationsComponent } from '../search-scope-locations/search-scope-locations.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        MatInputModule,
+        MatRadioModule,
+        MatCheckboxModule,
+        MatSelectModule
+    ],
+    declarations: [
+        SearchTextComponent,
+        SearchRadioComponent,
+        SearchFieldsComponent,
+        SearchScopeLocationsComponent
+    ],
+    exports: [
+        SearchTextComponent,
+        SearchRadioComponent,
+        SearchFieldsComponent,
+        SearchScopeLocationsComponent
+    ],
+    entryComponents: [
+        SearchTextComponent,
+        SearchRadioComponent,
+        SearchFieldsComponent,
+        SearchScopeLocationsComponent
+    ]
+})
+export class SearchWidgetsModule {
+}
--- a/lib/content-services/search/components/search.component.spec.ts
+++ b/lib/content-services/search/components/search.component.spec.ts
@@ -18,19 +18,18 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { SearchService } from '@alfresco/adf-core';
 import { QueryBody } from 'alfresco-js-api';
-import { Observable } from 'rxjs/Observable';
 import { SearchModule } from '../../index';
 import { differentResult, folderResult, result, SimpleSearchTestComponent } from '../../mock';

-function fakeNodeResultSearch(searchNode: QueryBody): Observable<any> {
+function fakeNodeResultSearch(searchNode: QueryBody): Promise<any> {
    if (searchNode && searchNode.query.query === 'FAKE_SEARCH_EXMPL') {
-        return Observable.of(differentResult);
+        return Promise.resolve(differentResult);
    }
    if (searchNode && searchNode.filterQueries.length === 1 &&
        searchNode.filterQueries[0].query === "TYPE:'cm:folder'") {
-        return Observable.of(folderResult);
+        return Promise.resolve(folderResult);
    }
-    return Observable.of(result);
+    return Promise.resolve(result);
 }

 describe('SearchComponent', () => {
@@ -60,8 +59,10 @@ describe('SearchComponent', () => {
        });

        it('should clear results straight away when a new search term is entered', (done) => {
-            spyOn(searchService, 'search')
-                .and.returnValues(Observable.of(result), Observable.of(differentResult));
+            spyOn(searchService, 'search').and.returnValues(
+                Promise.resolve(result),
+                Promise.resolve(differentResult)
+            );

            component.setSearchWordTo('searchTerm');
            fixture.detectChanges();
@@ -82,7 +83,7 @@ describe('SearchComponent', () => {

        it('should display the returned search results', (done) => {
            spyOn(searchService, 'search')
-                .and.returnValue(Observable.of(result));
+                .and.returnValue(Promise.resolve(result));

            component.setSearchWordTo('searchTerm');
            fixture.detectChanges();
@@ -96,7 +97,7 @@ describe('SearchComponent', () => {

        it('should emit error event when search call fail', (done) => {
            spyOn(searchService, 'search')
-                .and.returnValue(Observable.fromPromise(Promise.reject({ status: 402 })));
+                .and.returnValue(Promise.reject({ status: 402 }));
            component.setSearchWordTo('searchTerm');
            fixture.detectChanges();
            fixture.whenStable().then(() => {
@@ -108,8 +109,10 @@ describe('SearchComponent', () => {
        });

        it('should be able to hide the result panel', (done) => {
-            spyOn(searchService, 'search')
-                .and.returnValues(Observable.of(result), Observable.of(differentResult));
+            spyOn(searchService, 'search').and.returnValues(
+                Promise.resolve(result),
+                Promise.resolve(differentResult)
+            );

            component.setSearchWordTo('searchTerm');
            fixture.detectChanges();
@@ -160,8 +163,7 @@ describe('SearchComponent', () => {
        });

        it('should perform a search with a defaultNode if no searchnode is given', (done) => {
-            spyOn(searchService, 'search')
-                .and.returnValue(Observable.of(result));
+            spyOn(searchService, 'search').and.returnValue(Promise.resolve(result));
            component.setSearchWordTo('searchTerm');
            fixture.detectChanges();
            fixture.whenStable().then(() => {
--- a/lib/content-services/search/components/search.component.ts
+++ b/lib/content-services/search/components/search.component.ts
@@ -115,6 +115,10 @@ export class SearchComponent implements AfterContentInit, OnChanges {
                this.loadSearchResults(searchedWord);
            });

+        searchService.dataLoaded.subscribe(
+            data => this.onSearchDataLoaded(data),
+            error => this.onSearchDataError(error)
+        );
    }

    ngAfterContentInit() {
@@ -153,31 +157,38 @@ export class SearchComponent implements AfterContentInit, OnChanges {
    private loadSearchResults(searchTerm?: string) {
        this.resetResults();
        if (searchTerm) {
-            let search$;
            if (this.queryBody) {
-                search$ = this.searchService.searchByQueryBody(this.queryBody);
+                this.searchService.searchByQueryBody(this.queryBody).then(
+                    result => this.onSearchDataLoaded(result),
+                    err => this.onSearchDataError(err)
+                );
            } else {
-                search$ = this.searchService
-                    .search(searchTerm, this.maxResults, this.skipResults);
+                this.searchService.search(searchTerm, this.maxResults, this.skipResults).then(
+                    result => this.onSearchDataLoaded(result),
+                    err => this.onSearchDataError(err)
+                );
            }
-            search$.subscribe(
-                    results => {
-                        this.results = <NodePaging> results;
-                        this.resultLoaded.emit(this.results);
-                        this.isOpen = true;
-                        this.setVisibility();
-                    },
-                    error => {
-                        if (error.status !== 400) {
-                            this.results = null;
-                            this.error.emit(error);
-                        }
-                    });
        } else {
            this.cleanResults();
        }
    }

+    onSearchDataLoaded(data: NodePaging) {
+        if (data) {
+            this.results = data;
+            this.resultLoaded.emit(this.results);
+            this.isOpen = true;
+            this.setVisibility();
+        }
+    }
+
+    onSearchDataError(error) {
+        if (error && error.status !== 400) {
+            this.results = null;
+            this.error.emit(error);
+        }
+    }
+
    hidePanel() {
        if (this.isOpen) {
            this._classList['adf-search-show'] = false;