[ACA-2215] toggle search filter (#998)

* support for toggling search filter

* update docs

* disable e2e test

* update e2e

docs/extending/application-actions.md

@@ -118,3 +118,6 @@ Below is the list of public actions types you can use in the plugin definitions
 | FULLSCREEN_VIEWER      | n/a                 | Enters fullscreen mode to view the file opened in the Viewer.                                   |
 | LOGOUT                 | n/a                 | Log out and redirect to Login screen.                                                           |
 | RELOAD_DOCUMENT_LIST   | n/a                 | Reload active document list                                                                     |
+| TOGGLE_SEARCH_FILTER   | n/a                 | Toggle Filter component visibility in Search Results.                                           |
+| SHOW_SEARCH_FILTER     | n/a                 | Show Filter component in Search Results.                                                        |
+| HIDE_SEARCH_FILTER     | n/a                 | Hide Filter component in Search Results                                                         |

e2e/components/toolbar/toolbar.ts

@@ -36,6 +36,7 @@ export class Toolbar extends Component {
     share: `.mat-icon-button[title='Share']`,
     shareEdit: `.mat-icon-button[title='Shared link settings']`,
     view: `.mat-icon-button[title='View']`,
+    searchFilterToggle: `.mat-icon-button[title='Toggle search filter']`,
     download: `.mat-icon-button[title='Download']`,
     editFolder: 'app.toolbar.editFolder',
     viewDetails: `.mat-icon-button[title='View details']`,
@@ -52,6 +53,7 @@ export class Toolbar extends Component {
   shareButton: ElementFinder = this.component.element(by.css(Toolbar.selectors.share));
   shareEditButton: ElementFinder = this.component.element(by.css(Toolbar.selectors.shareEdit));
   viewButton: ElementFinder = this.component.element(by.css(Toolbar.selectors.view));
+  searchFiltersToggleButton: ElementFinder = this.component.element(by.css(Toolbar.selectors.searchFilterToggle));
   downloadButton: ElementFinder = this.component.element(by.css(Toolbar.selectors.download));
   editFolderButton: ElementFinder = this.component.element(by.id(Toolbar.selectors.editFolder));
   viewDetailsButton: ElementFinder = this.component.element(by.css(Toolbar.selectors.viewDetails));
@@ -71,6 +73,10 @@ export class Toolbar extends Component {
     return count === 0;
   }
 
+  async numberOfAvailableActions() {
+    return await this.buttons.count();
+  }
+
   async isButtonPresent(title: string) {
     const elem = this.component.element(by.css(`${Toolbar.selectors.button}[title="${title}"]`));
     return await elem.isPresent();
@@ -121,6 +127,10 @@ export class Toolbar extends Component {
     return await browser.isElementPresent(this.viewButton);
   }
 
+  async isToggleSearchFiltersPresent() {
+    return await browser.isElementPresent(this.searchFiltersToggleButton);
+  }
+
   async isDownloadPresent() {
     return await browser.isElementPresent(this.downloadButton);
   }
@@ -232,7 +242,6 @@ export class Toolbar extends Component {
     return await this.menu.clickMenuItem('Upload new version');
   }
 
-
   async clickFullScreen() {
     return await this.fullScreenButton.click();
   }

e2e/suites/actions/toolbar-single-selection.test.ts

@@ -673,12 +673,13 @@ describe('Toolbar actions - single selection : ', () => {
       done();
     });
 
-    it('actions are not displayed when no item is selected - [C291815]', async () => {
+    it('nodes actions are not displayed when no item is selected - [C291815]', async () => {
       await searchInput.clickSearchButton();
       await searchInput.checkFilesAndFolders();
       await searchInput.searchForTextAndCloseSearchOptions(fileInSite);
 
-      expect(await toolbar.isEmpty()).toBe(true, `actions displayed though nothing selected`);
+      expect(await toolbar.isToggleSearchFiltersPresent()).toBe(true, `Search filter toggle is not displayed`);
+      expect(await toolbar.numberOfAvailableActions()).toBe(1, `more than 1 action is present`);
     });
 
     it('correct actions appear when a file is selected - [C291816]', async () => {

src/app/components/search/search-results/search-results.component.html

@@ -13,7 +13,10 @@
       <div class="adf-search-results">
         <adf-search-filter
           #searchFilter
-          [ngClass]="{ 'adf-search-filter--hidden': hideSearchFilter() }"
+          [ngClass]="{
+            'adf-search-filter--hidden':
+              hideSearchFilter() || !(showFacetFilter$ | async)
+          }"
         ></adf-search-filter>
         <div class="adf-search-results__content">
           <mat-progress-bar

src/app/components/search/search-results/search-results.component.ts

@@ -38,6 +38,8 @@ import { NavigateToFolder } from '../../../store/actions';
 import { AppExtensionService } from '../../../extensions/extension.service';
 import { ContentManagementService } from '../../../services/content-management.service';
 import { AppConfigService } from '@alfresco/adf-core';
+import { Observable } from 'rxjs';
+import { showFacetFilter } from '../../../store/selectors/app.selectors';
 
 @Component({
   selector: 'aca-search-results',
@@ -51,6 +53,8 @@ export class SearchResultsComponent extends PageComponent implements OnInit {
   @ViewChild('searchFilter')
   searchFilter: SearchFilterComponent;
 
+  showFacetFilter$: Observable<boolean>;
+
   searchedWord: string;
   queryParamName = 'q';
   data: NodePaging;
@@ -73,6 +77,8 @@ export class SearchResultsComponent extends PageComponent implements OnInit {
       skipCount: 0,
       maxItems: 25
     };
+
+    this.showFacetFilter$ = store.select(showFacetFilter);
   }
 
   ngOnInit() {

src/app/store/actions/search.actions.ts

@@ -26,8 +26,23 @@
 import { Action } from '@ngrx/store';
 
 export const SEARCH_BY_TERM = 'SEARCH_BY_TERM';
+export const TOGGLE_SEARCH_FILTER = 'TOGGLE_SEARCH_FILTER';
+export const SHOW_SEARCH_FILTER = 'SHOW_SEARCH_FILTER';
+export const HIDE_SEARCH_FILTER = 'HIDE_SEARCH_FILTER';
 
 export class SearchByTermAction implements Action {
   readonly type = SEARCH_BY_TERM;
   constructor(public payload: string, public searchOptions?: any) {}
 }
+
+export class ToggleSearchFilterAction implements Action {
+  readonly type = TOGGLE_SEARCH_FILTER;
+}
+
+export class ShowSearchFilterAction implements Action {
+  readonly type = SHOW_SEARCH_FILTER;
+}
+
+export class HideSearchFilterAction implements Action {
+  readonly type = HIDE_SEARCH_FILTER;
+}

src/app/store/reducers/app.reducer.ts

@@ -49,6 +49,11 @@ import {
   SET_INITIAL_STATE,
   SetInitialStateAction
 } from '../actions/app.actions';
+import {
+  TOGGLE_SEARCH_FILTER,
+  SHOW_SEARCH_FILTER,
+  HIDE_SEARCH_FILTER
+} from '../actions/search.actions';
 
 export function appReducer(
   state: AppState = INITIAL_APP_STATE,
@@ -89,6 +94,15 @@ export function appReducer(
     case SET_REPOSITORY_INFO:
       newState = updateRepositoryStatus(state, <SetRepositoryInfoAction>action);
       break;
+    case TOGGLE_SEARCH_FILTER:
+      newState = toggleSearchFilter(state);
+      break;
+    case SHOW_SEARCH_FILTER:
+      newState = showSearchFilter(state);
+      break;
+    case HIDE_SEARCH_FILTER:
+      newState = hideSearchFilter(state);
+      break;
     default:
       newState = Object.assign({}, state);
   }
@@ -96,6 +110,24 @@ export function appReducer(
   return newState;
 }
 
+function toggleSearchFilter(state: AppState): AppState {
+  const newState = Object.assign({}, state);
+  newState.showFacetFilter = !newState.showFacetFilter;
+  return newState;
+}
+
+function hideSearchFilter(state: AppState): AppState {
+  const newState = Object.assign({}, state);
+  newState.showFacetFilter = false;
+  return newState;
+}
+
+function showSearchFilter(state: AppState): AppState {
+  const newState = Object.assign({}, state);
+  newState.showFacetFilter = true;
+  return newState;
+}
+
 function updateLanguagePicker(
   state: AppState,
   action: SetLanguagePickerAction

src/app/store/selectors/app.selectors.ts

@@ -78,6 +78,11 @@ export const infoDrawerOpened = createSelector(
   state => state.infoDrawerOpened
 );
 
+export const showFacetFilter = createSelector(
+  selectApp,
+  state => state.showFacetFilter
+);
+
 export const documentDisplayMode = createSelector(
   selectApp,
   state => state.documentDisplayMode

src/app/store/states/app.state.ts

@@ -40,6 +40,7 @@ export interface AppState {
   user: ProfileState;
   navigation: NavigationState;
   infoDrawerOpened: boolean;
+  showFacetFilter: boolean;
   documentDisplayMode: string;
   repository: RepositoryInfo;
 }
@@ -66,6 +67,7 @@ export const INITIAL_APP_STATE: AppState = {
     currentFolder: null
   },
   infoDrawerOpened: false,
+  showFacetFilter: true,
   documentDisplayMode: 'list',
   repository: <any>{
     status: <any>{

src/assets/app.extensions.json

@@ -417,6 +417,18 @@
       }
     ],
     "toolbar": [
+      {
+        "id": "app.toolbar.searchFilter",
+        "order": 50,
+        "title": "APP.BROWSE.SEARCH.TOGGLE_SEARCH_FILTER",
+        "icon": "view_list",
+        "actions": {
+          "click": "TOGGLE_SEARCH_FILTER"
+        },
+        "rules": {
+          "visible": "app.navigation.isSearchResults"
+        }
+      },
       {
         "id": "app.toolbar.share",
         "order": 100,

src/assets/i18n/en.json

@@ -168,7 +168,8 @@
                     "SIZE": "Size"
                 },
                 "UNKNOWN_LOCATION": "Unknown",
-                "NO_RESULTS": "Your search returned 0 results"
+                "NO_RESULTS": "Your search returned 0 results",
+                "TOGGLE_SEARCH_FILTER": "Toggle search filter"
             },
             "SEARCH_LIBRARIES": {
               "TITLE": "Libraries found...",