[ACA-4492] - Start restyling of search sorting (#2190)

* Started adding search sorting refactoring

* [ACA-4492] - attempt to fix e2e with new sorting menu

* [ACA-4436] - fixed linting

* [ACA-4436] - fixed linting

* fixed lint

* [ACA-4492] - fixed e2e with new sorting

* [ACA-4492] - fixed e2e with new sorting

e2e/suites/search/search-sorting.test.ts

@@ -89,109 +89,93 @@ describe('Search sorting', () => {
 
   it('[C277722] Sorting options are displayed', async () => {
     expect(await page.sortingPicker.isSortOrderButtonDisplayed()).toBe(true, 'Sort order button not displayed');
-    expect(await page.sortingPicker.isSortByOptionDisplayed()).toBe(true, 'Sort options not displayed');
-    expect(await page.sortingPicker.getSortOrder()).toBe('DESC', 'Incorrect default sort order');
-    expect(await page.sortingPicker.getSelectedSortByOption()).toBe('Relevance', 'Incorrect selected sort option');
 
     await page.sortingPicker.clickSortByDropdown();
 
     const expectedOptions = ['Relevance', 'Filename', 'Title', 'Modified date', 'Modifier', 'Created date', 'Size', 'Type'];
-    expect(await page.sortingPicker.getSortByOptionsList()).toEqual(expectedOptions, 'Incorrect sort options list');
+    const optionListed = await page.sortingPicker.getSortByOptionsList();
+    expect(optionListed).toEqual(expectedOptions, 'Incorrect sort options list');
   });
 
   it('[C277728] Sort by Name', async () => {
-    await page.sortingPicker.sortBy('Filename');
-    await page.sortingPicker.setSortOrderASC();
+    await page.sortingPicker.sortBy('Filename', 'asc');
 
     expect(await dataTable.getNthSearchResultsRow(1).getText()).toContain(fileJpg.name);
     expect(await dataTable.getNthSearchResultsRow(2).getText()).toContain(filePdf.name);
 
-    await page.sortingPicker.sortBy('Filename');
-    await page.sortingPicker.setSortOrderDESC();
+    await page.sortingPicker.sortBy('Filename', 'desc');
 
     expect(await dataTable.getNthSearchResultsRow(1).getText()).toContain(filePdf.name);
     expect(await dataTable.getNthSearchResultsRow(2).getText()).toContain(fileJpg.name);
   });
 
   it('[C277740] Sort by Type', async () => {
-    await page.sortingPicker.sortBy('Type');
-    await page.sortingPicker.setSortOrderASC();
+    await page.sortingPicker.sortBy('Type', 'asc');
 
     expect(await dataTable.getNthSearchResultsRow(1).getText()).toContain(filePdf.name);
     expect(await dataTable.getNthSearchResultsRow(2).getText()).toContain(fileJpg.name);
 
-    await page.sortingPicker.sortBy('Type');
-    await page.sortingPicker.setSortOrderDESC();
+    await page.sortingPicker.sortBy('Type', 'desc');
 
     expect(await dataTable.getNthSearchResultsRow(1).getText()).toContain(fileJpg.name);
     expect(await dataTable.getNthSearchResultsRow(2).getText()).toContain(filePdf.name);
   });
 
   it('[C277738] Sort by Size', async () => {
-    await page.sortingPicker.sortBy('Size');
-    await page.sortingPicker.setSortOrderASC();
+    await page.sortingPicker.sortBy('Size', 'asc');
 
     expect(await dataTable.getNthSearchResultsRow(1).getText()).toContain(filePdf.name);
     expect(await dataTable.getNthSearchResultsRow(2).getText()).toContain(fileJpg.name);
 
-    await page.sortingPicker.sortBy('Size');
-    await page.sortingPicker.setSortOrderDESC();
+    await page.sortingPicker.sortBy('Size', 'desc');
 
     expect(await dataTable.getNthSearchResultsRow(1).getText()).toContain(fileJpg.name);
     expect(await dataTable.getNthSearchResultsRow(2).getText()).toContain(filePdf.name);
   });
 
   it('[C277734] Sort by Created date', async () => {
-    await page.sortingPicker.sortBy('Created date');
-    await page.sortingPicker.setSortOrderASC();
+    await page.sortingPicker.sortBy('Created date', 'asc');
 
     expect(await dataTable.getNthSearchResultsRow(1).getText()).toContain(fileJpg.name);
     expect(await dataTable.getNthSearchResultsRow(2).getText()).toContain(filePdf.name);
 
-    await page.sortingPicker.sortBy('Created date');
-    await page.sortingPicker.setSortOrderDESC();
+    await page.sortingPicker.sortBy('Created date', 'desc');
 
     expect(await dataTable.getNthSearchResultsRow(1).getText()).toContain(filePdf.name);
     expect(await dataTable.getNthSearchResultsRow(2).getText()).toContain(fileJpg.name);
   });
 
   it('[C277736] Sort by Modified date', async () => {
-    await page.sortingPicker.sortBy('Modified date');
-    await page.sortingPicker.setSortOrderASC();
+    await page.sortingPicker.sortBy('Modified date', 'asc');
 
     expect(await dataTable.getNthSearchResultsRow(1).getText()).toContain(fileJpg.name);
     expect(await dataTable.getNthSearchResultsRow(2).getText()).toContain(filePdf.name);
 
-    await page.sortingPicker.sortBy('Modified date');
-    await page.sortingPicker.setSortOrderDESC();
+    await page.sortingPicker.sortBy('Modified date', 'desc');
 
     expect(await dataTable.getNthSearchResultsRow(1).getText()).toContain(filePdf.name);
     expect(await dataTable.getNthSearchResultsRow(2).getText()).toContain(fileJpg.name);
   });
 
   it('[C277727] Sort by Relevance', async () => {
-    await page.sortingPicker.sortBy('Relevance');
-    await page.sortingPicker.setSortOrderASC();
+    await page.sortingPicker.sortBy('Relevance', 'asc');
 
     expect(await dataTable.getNthSearchResultsRow(1).getText()).toContain(fileJpg.name);
     expect(await dataTable.getNthSearchResultsRow(2).getText()).toContain(filePdf.name);
 
-    await page.sortingPicker.sortBy('Relevance');
-    await page.sortingPicker.setSortOrderDESC();
+    await page.sortingPicker.sortBy('Relevance', 'desc');
 
     expect(await dataTable.getNthSearchResultsRow(1).getText()).toContain(filePdf.name);
     expect(await dataTable.getNthSearchResultsRow(2).getText()).toContain(fileJpg.name);
   });
 
   it('[C277732] Sort by Modifier', async () => {
-    await page.sortingPicker.sortBy('Modifier');
-    await page.sortingPicker.setSortOrderASC();
+    await page.sortingPicker.sortBy('Modifier', 'asc');
 
     expect(await dataTable.getNthSearchResultsRow(1).getText()).toContain(fileJpg.name);
     expect(await dataTable.getNthSearchResultsRow(2).getText()).toContain(filePdf.name);
 
-    await page.sortingPicker.sortBy('Modifier');
-    await page.sortingPicker.setSortOrderDESC();
+    await page.sortingPicker.sortBy('Modifier', 'desc');
 
     expect(await dataTable.getNthSearchResultsRow(1).getText()).toContain(filePdf.name);
     expect(await dataTable.getNthSearchResultsRow(2).getText()).toContain(fileJpg.name);

projects/aca-testing-shared/src/components/search/search-sorting-picker.ts

@@ -32,13 +32,13 @@ export type SortByType = 'Relevance' | 'Title' | 'Filename' | 'Modified date' |
 export type SortOrderType = 'ASC' | 'DESC' | '';
 
 export class SearchSortingPicker extends Component {
-  sortOrderButton = this.byCss('button[mat-icon-button]');
-  sortByDropdownCollapsed = this.byCss('.mat-select');
-  sortByDropdownExpanded = browser.element(by.css('.mat-select-panel'));
-  sortByList = this.sortByDropdownExpanded.all(by.css('.mat-option .mat-option-text'));
+  actionMenu = browser.element(by.css('aca-search-action-menu > button'));
+  sortOrderButton = browser.element(by.css('#aca-button-sorting-menu'));
+  sortByDropdownExpanded = browser.element.all(by.css('.mat-menu-panel')).get(1);
+  sortByList = this.sortByDropdownExpanded.all(by.css('button'));
 
   constructor(ancestor?: string) {
-    super('adf-search-sorting-picker', ancestor);
+    super('aca-button-action-menu', ancestor);
   }
 
   async waitForSortByDropdownToExpand(): Promise<void> {
@@ -50,35 +50,20 @@ export class SearchSortingPicker extends Component {
   }
 
   async isSortOrderButtonDisplayed(): Promise<boolean> {
-    return isPresentAndDisplayed(this.sortOrderButton);
-  }
-
-  async getSortOrder(): Promise<SortOrderType> {
-    const orderArrow = await this.sortOrderButton.getText();
-
-    if (orderArrow.includes('upward')) {
-      return 'ASC';
-    } else if (orderArrow.includes('downward')) {
-      return 'DESC';
-    } else {
-      return '';
-    }
+    return isPresentAndDisplayed(this.actionMenu);
   }
 
   async isSortByOptionDisplayed(): Promise<boolean> {
-    return isPresentAndDisplayed(this.sortByDropdownCollapsed);
+    return isPresentAndDisplayed(this.sortOrderButton);
   }
 
   async isSortByDropdownExpanded(): Promise<boolean> {
     return isPresentAndDisplayed(this.sortByDropdownExpanded);
   }
 
-  async getSelectedSortByOption(): Promise<string> {
-    return this.sortByDropdownCollapsed.getText();
-  }
-
   async clickSortByDropdown(): Promise<void> {
-    await BrowserActions.click(this.sortByDropdownCollapsed);
+    await BrowserActions.click(this.actionMenu);
+    await BrowserActions.click(this.sortOrderButton);
     await this.waitForSortByDropdownToExpand();
   }
 
@@ -88,23 +73,14 @@ export class SearchSortingPicker extends Component {
     });
   }
 
-  async sortBy(option: SortByType): Promise<void> {
+  async sortBy(option: SortByType, direction: string): Promise<void> {
     if (!(await this.isSortByDropdownExpanded())) {
       await this.clickSortByDropdown();
     }
-    const elem = browser.element(by.cssContainingText('.mat-option .mat-option-text', option));
+    const elem = browser.element(by.cssContainingText('.mat-menu-item', option));
+    const optionId = await elem.getAttribute('id');
     await BrowserActions.click(elem);
-  }
-
-  async setSortOrderASC(): Promise<void> {
-    if ((await this.getSortOrder()) !== 'ASC') {
-      await BrowserActions.click(this.sortOrderButton);
-    }
-  }
-
-  async setSortOrderDESC(): Promise<void> {
-    if ((await this.getSortOrder()) !== 'DESC') {
-      await BrowserActions.click(this.sortOrderButton);
-    }
+    const directionSortElement = browser.element(by.id(`${optionId}-${direction.toLocaleLowerCase()}`));
+    await BrowserActions.click(directionSortElement);
   }
 }

src/app/components/search/search-action-menu/search-action-menu.component.html

@@ -0,0 +1,26 @@
+<button mat-icon-button [matMenuTriggerFor]="dataSorting" id="aca-button-action-menu" aria-label="Search action menu">
+  <mat-icon>more_vert</mat-icon>
+</button>
+
+<mat-menu #dataSorting="matMenu">
+  <button mat-menu-item [matMenuTriggerFor]="sorting" id="aca-button-sorting-menu">{{'SEARCH.SORT.SORTING_OPTION' | translate}}</button>
+</mat-menu>
+
+<mat-menu #sorting="matMenu">
+  <ng-template matMenuContent>
+    <button mat-menu-item  *ngFor="let option of options" [id]="option.key+'-sorting-option'"
+            [matMenuTriggerFor]="direction" [matMenuTriggerData]="{option: option}">
+      {{option.label | translate}}
+    </button>
+  </ng-template>
+</mat-menu>
+
+<mat-menu #direction="matMenu">
+  <ng-template matMenuContent let-option="option">
+    <button mat-menu-item [id]="option.key+'-sorting-option-asc'"
+            (click)="onAscSortingClicked(option)">{{'SEARCH.SORT.ASCENDING' | translate}}</button>
+    <button mat-menu-item [id]="option.key+'-sorting-option-desc'"
+            (click)="onDescSortingClicked(option)">{{'SEARCH.SORT.DESCENDING' | translate}}</button>
+  </ng-template>
+</mat-menu>
+

src/app/components/search/search-action-menu/search-action-menu.component.spec.ts

@@ -0,0 +1,137 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { SearchQueryBuilderService } from '@alfresco/adf-content-services';
+import { SearchSortingDefinition } from '@alfresco/adf-content-services/lib/search/models/search-sorting-definition.interface';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AppTestingModule } from '../../../testing/app-testing.module';
+import { SearchActionMenuComponent } from './search-action-menu.component';
+
+const mockSortingData: SearchSortingDefinition[] = [
+  {
+    ascending: false,
+    field: 'fieldA',
+    key: 'keyA',
+    label: 'LabelA',
+    type: 'A'
+  },
+  {
+    ascending: true,
+    field: 'fieldB',
+    key: 'keyB',
+    label: 'Zorro',
+    type: 'Z'
+  }
+];
+
+describe('SearchActionMenuComponent', () => {
+  let fixture: ComponentFixture<SearchActionMenuComponent>;
+  let component: SearchActionMenuComponent;
+  let queryService: SearchQueryBuilderService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [AppTestingModule],
+      declarations: [SearchActionMenuComponent],
+      providers: [SearchQueryBuilderService]
+    });
+
+    fixture = TestBed.createComponent(SearchActionMenuComponent);
+    queryService = TestBed.inject(SearchQueryBuilderService);
+    component = fixture.componentInstance;
+  });
+
+  it('should emit sortingSelected event when asc sorting option is selected', async () => {
+    spyOn(queryService, 'getSortingOptions').and.returnValue(mockSortingData);
+    const expectedOption: SearchSortingDefinition = {
+      ascending: true,
+      field: 'fieldA',
+      key: 'keyA',
+      label: 'LabelA',
+      type: 'A'
+    };
+    spyOn(component.sortingSelected, 'emit').and.callThrough();
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const actionMenuButton: HTMLButtonElement = fixture.nativeElement.querySelector('#aca-button-action-menu');
+    actionMenuButton.dispatchEvent(new Event('click'));
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    const sortingMenuButton: HTMLButtonElement = document.querySelector('#aca-button-sorting-menu');
+    sortingMenuButton.dispatchEvent(new Event('click'));
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    const fieldAMenuButton: HTMLButtonElement = document.querySelector('#keyA-sorting-option');
+    fieldAMenuButton.dispatchEvent(new Event('click'));
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    const directionButton: HTMLButtonElement = document.querySelector('#keyA-sorting-option-asc');
+    directionButton.dispatchEvent(new Event('click'));
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    expect(component.sortingSelected.emit).toHaveBeenCalledWith(expectedOption);
+  });
+
+  it('should emit sortingSelected event when desc sorting option is selected', async () => {
+    spyOn(queryService, 'getSortingOptions').and.returnValue(mockSortingData);
+    const expectedOption: SearchSortingDefinition = {
+      ascending: false,
+      field: 'fieldB',
+      key: 'keyB',
+      label: 'Zorro',
+      type: 'Z'
+    };
+    spyOn(component.sortingSelected, 'emit').and.callThrough();
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const actionMenuButton: HTMLButtonElement = fixture.nativeElement.querySelector('#aca-button-action-menu');
+    actionMenuButton.dispatchEvent(new Event('click'));
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    const sortingMenuButton: HTMLButtonElement = document.querySelector('#aca-button-sorting-menu');
+    sortingMenuButton.dispatchEvent(new Event('click'));
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    const fieldAMenuButton: HTMLButtonElement = document.querySelector('#keyB-sorting-option');
+    fieldAMenuButton.dispatchEvent(new Event('click'));
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    const directionButton: HTMLButtonElement = document.querySelector('#keyB-sorting-option-desc');
+    directionButton.dispatchEvent(new Event('click'));
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    expect(component.sortingSelected.emit).toHaveBeenCalledWith(expectedOption);
+  });
+});

src/app/components/search/search-action-menu/search-action-menu.component.ts

@@ -0,0 +1,57 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { SearchQueryBuilderService } from '@alfresco/adf-content-services';
+import { SearchSortingDefinition } from '@alfresco/adf-content-services/lib/search/models/search-sorting-definition.interface';
+import { Component, OnInit, Output, ViewEncapsulation, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'aca-search-action-menu',
+  templateUrl: './search-action-menu.component.html',
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'aca-search-input' }
+})
+export class SearchActionMenuComponent implements OnInit {
+  @Output()
+  sortingSelected: EventEmitter<SearchSortingDefinition> = new EventEmitter();
+
+  options: SearchSortingDefinition[] = [];
+
+  constructor(private queryBuilder: SearchQueryBuilderService) {}
+
+  ngOnInit(): void {
+    this.options = this.queryBuilder.getSortingOptions();
+  }
+
+  onAscSortingClicked(option: SearchSortingDefinition) {
+    option.ascending = true;
+    this.sortingSelected.emit(option);
+  }
+
+  onDescSortingClicked(option: SearchSortingDefinition) {
+    option.ascending = false;
+    this.sortingSelected.emit(option);
+  }
+}

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

@@ -37,6 +37,7 @@ import { AppCommonModule } from '../common/common.module';
 import { DirectivesModule } from '../../directives/directives.module';
 import { AppLayoutModule } from '../layout/layout.module';
 import { ContextMenuModule } from '../context-menu/context-menu.module';
+import { SearchActionMenuComponent } from './search-action-menu/search-action-menu.component';
 
 @NgModule({
   imports: [
@@ -51,7 +52,7 @@ import { ContextMenuModule } from '../context-menu/context-menu.module';
     ContextMenuModule,
     LockedByModule
   ],
-  declarations: [SearchResultsComponent, SearchLibrariesResultsComponent, SearchResultsRowComponent],
-  exports: [SearchResultsComponent, SearchLibrariesResultsComponent, SearchResultsRowComponent]
+  declarations: [SearchResultsComponent, SearchLibrariesResultsComponent, SearchResultsRowComponent, SearchActionMenuComponent],
+  exports: [SearchResultsComponent, SearchLibrariesResultsComponent, SearchResultsRowComponent, SearchActionMenuComponent]
 })
 export class AppSearchResultsModule {}

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

@@ -26,8 +26,9 @@
             <adf-search-filter-chips class="content__filter"></adf-search-filter-chips>
 
             <button mat-button adf-reset-search class='content__reset-action'><mat-icon> refresh </mat-icon></button>
-
-            <adf-search-sorting-picker class="content__sort-picker"></adf-search-sorting-picker>
+          </div>
+          <div>
+            <aca-search-action-menu (sortingSelected)="onSearchSortingUpdate($event)"></aca-search-action-menu>
           </div>
 
           <adf-document-list

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

@@ -43,6 +43,7 @@ import { ContentManagementService } from '../../../services/content-management.s
 import { ShowHeaderMode, TranslationService } from '@alfresco/adf-core';
 import { combineLatest, Observable } from 'rxjs';
 import { AppExtensionService } from '@alfresco/aca-shared';
+import { SearchSortingDefinition } from '@alfresco/adf-content-services/lib/search/models/search-sorting-definition.interface';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
@@ -243,4 +244,9 @@ export class SearchResultsComponent extends PageComponent implements OnInit {
     this.store.dispatch(new SetInfoDrawerPreviewStateAction(false));
     this.store.dispatch(new SetInfoDrawerStateAction(false));
   }
+
+  onSearchSortingUpdate(option: SearchSortingDefinition) {
+    this.queryBuilder.sorting = [{ ...option, ascending: option.ascending }];
+    this.queryBuilder.update();
+  }
 }

src/assets/i18n/en.json

@@ -489,6 +489,9 @@
           "HINT": "Search input must have at least 2 alphanumeric characters."
         },
         "SORT": {
+            "SORTING_OPTION": "Sort by",
+            "ASCENDING": "Ascending",
+            "DESCENDING": "Descending",
             "RELEVANCE": "Relevance",
             "FILENAME": "Filename",
             "TITLE": "Title",