[ACS-10475] [Search] UX improvements for search (#5042)

2026-09-09 18:02:54 +00:00 · 2026-03-13 16:18:55 +01:00
parent 683eab8be4
commit b2f1245c7d
60 changed files with 1640 additions and 1525 deletions
@@ -167,7 +167,7 @@ export const getGlobalConfig: PlaywrightTestConfig = {
  testMatch: ['**/*.e2e.ts'],
  use: {
    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
-    actionTimeout: 0,
+    actionTimeout: 40 * 1000,
    /* Base URL to use in actions like `await page.goto('/')`. */
    baseURL: env.PLAYWRIGHT_E2E_HOST,
    headless: env.PLAYWRIGHT_HEADLESS === 'true' || !!env.CI,
@@ -34,7 +34,7 @@ export class ManageRules extends BaseComponent {
  public ruleDetailsDeleteButton = this.getChild('#delete-rule-btn');
  public ruleDetailsEditButton = this.getChild('#edit-rule-btn');
  public ruleDetailsPerformActionsDiv = this.getChild('adf-card-view-selectitem [data-automation-id="select-box"]');
-  public rulesEmptyListTitle = this.getChild('.adf-empty-content__title');
+  public rulesEmptyList = this.getChild('adf-empty-content');
  public ruleActions = this.getChild('aca-rule-action');
  public ruleConditionsInGroup = this.getChild('aca-rule-composite-condition aca-rule-simple-condition');
  public ruleDescription = this.getChild('.aca-manage-rules__container__rule-details__header__title__description');
@@ -51,7 +51,7 @@ export class ManageRules extends BaseComponent {
  }

  async checkIfRuleListEmpty(): Promise<boolean> {
-    return this.rulesEmptyListTitle.isVisible();
+    return this.rulesEmptyList.isVisible();
  }

  async checkIfRuleIsOnTheList(ruleName: string): Promise<void> {
@@ -26,5 +26,4 @@ export * from './search-filters';
 export * from './search-filters.component';
 export * from './search-input.component';
 export * from './search-menu-card.component';
-export * from './search-overlay.components';
 export * from './search-sorting-picker.components';
@@ -0,0 +1,88 @@
+/*!
+ * Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Alfresco Example Content Application
+ *
+ * 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
+ * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Page } from '@playwright/test';
+import { BaseComponent } from '../base.component';
+
+export class SearchInDialogComponent extends BaseComponent {
+  private static readonly rootElement = '.aca-search-in-panel';
+
+  public filesAndFoldersRadioButton = this.getChild('.aca-search-in-panel__radio label').getByText('Files and folders');
+  public librariesRadioButton = this.getChild('.aca-search-in-panel__radio label').getByText('Libraries');
+  public filesCheckbox = this.getChild('.aca-search-in-panel__checkboxes').getByLabel('Files');
+  public foldersCheckbox = this.getChild('.aca-search-in-panel__checkboxes').getByLabel('Folders');
+  public applyButton = this.getChild('button', { hasText: 'Apply' });
+  readonly resetButton = this.getChild('button', { hasText: 'Reset' });
+
+  constructor(page: Page, rootElement = SearchInDialogComponent.rootElement) {
+    super(page, rootElement);
+  }
+
+  async isFoldersOptionChecked() {
+    return this.foldersCheckbox.isChecked();
+  }
+
+  async isFilesOptionChecked() {
+    return this.filesCheckbox.isChecked();
+  }
+
+  async resetOptions() {
+    await this.resetButton.click();
+  }
+
+  async checkOnlyFolders(): Promise<void> {
+    await this.resetOptions();
+    if (await this.isFilesOptionChecked()) {
+      await this.filesCheckbox.click();
+    }
+    if (!(await this.isFoldersOptionChecked())) {
+      await this.foldersCheckbox.click();
+    }
+  }
+
+  async checkOnlyFiles(): Promise<void> {
+    await this.resetOptions();
+    if (await this.isFoldersOptionChecked()) {
+      await this.foldersCheckbox.click();
+    }
+    if (!(await this.isFilesOptionChecked())) {
+      await this.filesCheckbox.click();
+    }
+  }
+
+  async checkLibraries(): Promise<void> {
+    await this.resetOptions();
+    await this.librariesRadioButton.click();
+  }
+
+  async checkFilesAndFolders(): Promise<void> {
+    await this.resetOptions();
+    if (!(await this.isFilesOptionChecked())) {
+      await this.filesCheckbox.click();
+    }
+    if (!(await this.isFoldersOptionChecked())) {
+      await this.foldersCheckbox.click();
+    }
+  }
+}
@@ -24,12 +24,13 @@

 import { Locator, Page } from '@playwright/test';
 import { BaseComponent } from '.././base.component';
-import { timeouts } from '../../../utils';

 export class SearchInputComponent extends BaseComponent {
  private static rootElement = 'aca-page-layout';
+  public searchInput = this.getChild('aca-search-input input');
  public searchButton = this.page.locator('.aca-search-input--search-button');
  public searchCloseButton = this.page.locator('.aca-search-input--close-button');
+  public searchInButton = this.getChild('aca-search-in-menu button');

  /**
   * Method used in cases where user have possibility to navigate "inside" the element (it's clickable and has link attribute).
@@ -43,9 +44,8 @@ export class SearchInputComponent extends BaseComponent {
    super(page, rootElement);
  }

-  async performDoubleClickFolderOrFileToOpen(name: string): Promise<void> {
-    await this.getCellLinkByName(name).waitFor({ state: 'visible', timeout: timeouts.medium });
-    await this.getCellLinkByName(name).dblclick();
-    await this.spinnerWaitForReload();
+  async searchFor(searchText: string): Promise<void> {
+    await this.searchInput.fill(searchText);
+    await this.searchButton.click();
  }
 }
@@ -1,93 +0,0 @@
-/*!
- * Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
- *
- * Alfresco Example Content Application
- *
- * 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
- * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { Page } from '@playwright/test';
-import { BaseComponent } from '.././base.component';
-
-export class SearchOverlayComponent extends BaseComponent {
-  private static rootElement = '.cdk-overlay-pane';
-
-  public searchFilesOption = this.getChild('input#content-input');
-  public searchFoldersOption = this.getChild('input#folder-input');
-  public searchLibrariesOption = this.getChild('input#libraries-input');
-  public searchInput = this.page.locator('#app-control-input');
-  public searchButton = this.page.locator('app-search-input-control button[title="Search"]');
-  public searchInputControl = this.page.locator('.app-search-control');
-  public searchOptions = this.page.locator('.app-search-options');
-
-  constructor(page: Page, rootElement = SearchOverlayComponent.rootElement) {
-    super(page, rootElement);
-  }
-
-  async isFoldersOptionChecked() {
-    return this.searchFoldersOption.isChecked();
-  }
-
-  async isFilesOptionChecked() {
-    return this.searchFilesOption.isChecked();
-  }
-
-  async isLibrariesOptionChecked() {
-    return this.searchLibrariesOption.isChecked();
-  }
-
-  async clearOptions() {
-    if (await this.isFilesOptionChecked()) {
-      await this.searchFilesOption.click();
-    }
-    if (await this.isFoldersOptionChecked()) {
-      await this.searchFoldersOption.click();
-    }
-    if (await this.isLibrariesOptionChecked()) {
-      await this.searchLibrariesOption.click();
-    }
-  }
-
-  async checkOnlyFolders(): Promise<void> {
-    await this.clearOptions();
-    await this.searchFoldersOption.click();
-  }
-
-  async checkOnlyFiles(): Promise<void> {
-    await this.clearOptions();
-    await this.searchFilesOption.click();
-  }
-
-  async checkLibraries(): Promise<void> {
-    await this.clearOptions();
-    await this.searchLibrariesOption.click();
-  }
-
-  async checkFilesAndFolders(): Promise<void> {
-    await this.clearOptions();
-    await this.searchFilesOption.click();
-    await this.searchFoldersOption.click();
-  }
-
-  async searchFor(input: string): Promise<void> {
-    await this.searchInput.clear();
-    await this.searchInput.fill(input);
-    await this.searchButton.click({ force: true });
-  }
-}
@@ -26,24 +26,24 @@ import { Page } from '@playwright/test';
 import { BasePage } from './base.page';
 import {
  DataTableComponent,
+  FolderInformationDialogComponent,
  MatMenuComponent,
-  ViewerComponent,
-  SearchInputComponent,
-  SearchOverlayComponent,
-  SidenavComponent,
-  SearchSortingPicker,
  SearchFilters,
-  SearchFiltersTags,
  SearchFiltersCategories,
  SearchFiltersDate,
  SearchFiltersLocation,
  SearchFiltersLogic,
  SearchFiltersProperties,
-  FolderInformationDialogComponent,
-  SearchMenuCard
+  SearchFiltersTags,
+  SearchInputComponent,
+  SearchMenuCard,
+  SearchSortingPicker,
+  SidenavComponent,
+  ViewerComponent
 } from '../components';
 import { AcaHeader } from '../components/aca-header.component';
-import { AdfConfirmDialogComponent, AdfFolderDialogComponent, UploadNewVersionDialog, ManageVersionsDialog } from '../components/dialogs';
+import { AdfConfirmDialogComponent, AdfFolderDialogComponent, ManageVersionsDialog, UploadNewVersionDialog } from '../components/dialogs';
+import { SearchInDialogComponent } from '../components/search/search-in-dialog.components';

 export type SearchType = 'files' | 'folders' | 'filesAndFolders' | 'libraries';

@@ -59,8 +59,8 @@ export class SearchPage extends BasePage {
  public folderDialog = new AdfFolderDialogComponent(this.page);
  public dataTable = new DataTableComponent(this.page);
  public viewer = new ViewerComponent(this.page);
-  public searchInput = new SearchInputComponent(this.page);
-  public searchOverlay = new SearchOverlayComponent(this.page);
+  public searchInputComponent = new SearchInputComponent(this.page);
+  public searchInDialog = new SearchInDialogComponent(this.page);
  public searchSortingPicker = new SearchSortingPicker(this.page);
  public searchFilters = new SearchFilters(this.page);
  public searchFiltersTags = new SearchFiltersTags(this.page);
@@ -77,29 +77,33 @@ export class SearchPage extends BasePage {
  public searchMenuCard = new SearchMenuCard(this.page);

  async searchWithin(searchText: string, searchType?: SearchType): Promise<void> {
-    await this.acaHeader.searchButton.click();
-    await this.clickSearchButton();
+    if (!(await this.searchInputComponent.searchInput.isVisible())) {
+      await this.acaHeader.searchButton.click();
+    }
+    await this.searchInputComponent.searchInButton.click();
    switch (searchType) {
      case 'files':
-        await this.searchOverlay.checkOnlyFiles();
+        await this.searchInDialog.checkOnlyFiles();
        break;
      case 'folders':
-        await this.searchOverlay.checkOnlyFolders();
+        await this.searchInDialog.checkOnlyFolders();
        break;
      case 'filesAndFolders':
-        await this.searchOverlay.checkFilesAndFolders();
+        await this.searchInDialog.checkFilesAndFolders();
        break;
      case 'libraries':
-        await this.searchOverlay.checkLibraries();
+        await this.searchInDialog.checkLibraries();
        break;
      default:
        break;
    }
-    await this.searchOverlay.searchFor(searchText);
+    await this.searchInDialog.applyButton.click();
+    await this.clickSearchButton();
+    await this.searchInputComponent.searchFor(searchText);
    await this.dataTable.progressBarWaitForReload();
  }

  async clickSearchButton() {
-    await this.searchInput.searchButton.click({ force: true });
+    await this.searchInputComponent.searchButton.click({ force: true });
  }
 }