ACS-8584: Fix for Search Input and icons (#4035)

e2e/playwright/library-actions/src/tests/library-actions.e2e.ts

@@ -397,7 +397,7 @@ test.describe('Library actions ', () => {
       const libraryMenu = myLibrariesPage.matMenu;
 
       await myLibrariesHeader.searchButton.click();
-      await searchPage.searchInput.searchButton.click();
+      await searchPage.clickSearchButton();
       await searchPage.searchOverlay.searchLibrariesOption.click();
       await searchPage.searchOverlay.searchFor(adminLibrary4);
 
@@ -415,7 +415,7 @@ test.describe('Library actions ', () => {
       const libraryMenu = searchPage.matMenu;
 
       await searchHeader.searchButton.click();
-      await searchPage.searchInput.searchButton.click();
+      await searchPage.clickSearchButton();
       await searchPage.searchOverlay.searchLibrariesOption.click();
       await searchPage.searchOverlay.searchFor(user2Library4);
 

e2e/playwright/list-views/src/tests/empty-list.e2e.ts

@@ -57,7 +57,7 @@ test.describe('Empty list views', () => {
 
   test('[C290123] [C290031] Empty Search results - pagination controls not displayed', async ({ personalFiles, searchPage }) => {
     await personalFiles.acaHeader.searchButton.click();
-    await searchPage.searchInput.searchButton.click();
+    await searchPage.clickSearchButton();
     await searchPage.searchOverlay.checkFilesAndFolders();
     await searchPage.searchOverlay.searchFor('InvalidText');
     await searchPage.reload({ waitUntil: 'domcontentloaded' });

e2e/playwright/list-views/src/tests/permissions.e2e.ts

@@ -112,7 +112,7 @@ test.describe('Special permissions', () => {
 
     test('[C290122] on Search Results', async ({ personalFiles, searchPage }) => {
       await personalFiles.acaHeader.searchButton.click();
-      await searchPage.searchInput.searchButton.click();
+      await searchPage.clickSearchButton();
       await searchPage.searchOverlay.checkFilesAndFolders();
       await searchPage.searchOverlay.searchFor(fileName);
       await searchPage.dataTable.spinnerWaitForReload();
@@ -185,7 +185,7 @@ test.describe('Special permissions', () => {
 
     test('[C306868] on Search results', async ({ personalFiles, searchPage }) => {
       await personalFiles.acaHeader.searchButton.click();
-      await searchPage.searchInput.searchButton.click();
+      await searchPage.clickSearchButton();
       await searchPage.searchOverlay.checkFilesAndFolders();
       await searchPage.searchOverlay.searchFor(fileName);
       await searchPage.dataTable.spinnerWaitForReload();

e2e/playwright/navigation/src/tests/sidebar.e2e.ts

@@ -76,7 +76,7 @@ test.describe('Sidebar', () => {
 
   test('[C277224] sidenav returns to the default state when navigating away from the Search Results page', async ({ personalFiles, searchPage }) => {
     await personalFiles.navigate({ remoteUrl: `#/search;q=test` });
-    await searchPage.searchInput.getIconByName('close').click();
+    await searchPage.searchInput.searchCloseButton.click();
     await searchPage.sidenav.expandedSidenav.waitFor({ state: 'attached' });
     expect(await personalFiles.sidenav.isSidenavExpanded(), 'Sidebar not expanded').toBe(true);
   });

e2e/playwright/search/src/tests/search-input.e2e.ts

@@ -44,14 +44,14 @@ test.describe('Search - Input', () => {
 
   test('[C289847] Search icon is displayed in toolbar and clicking on it displays search input container', async ({ searchPage }) => {
     await searchPage.acaHeader.searchButton.click();
-    await searchPage.searchInput.searchButton.click();
+    await searchPage.clickSearchButton();
 
     await expect(searchPage.searchOverlay.searchInputControl).toBeVisible();
   });
 
   test('[C289848] Search options are displayed when clicking in the search input', async ({ searchPage }) => {
     await searchPage.acaHeader.searchButton.click();
-    await searchPage.searchInput.searchButton.click();
+    await searchPage.clickSearchButton();
 
     await expect(searchPage.searchOverlay.searchOptions).toBeVisible();
     await expect(searchPage.searchOverlay.searchFilesOption).toBeEnabled();
@@ -64,7 +64,7 @@ test.describe('Search - Input', () => {
 
   test('[C289849] Search options are correctly enabled / disabled', async ({ searchPage }) => {
     await searchPage.acaHeader.searchButton.click();
-    await searchPage.searchInput.searchButton.click();
+    await searchPage.clickSearchButton();
 
     await searchPage.searchOverlay.searchFilesOption.click();
     await expect(searchPage.searchOverlay.searchFoldersOption).toBeEnabled();

e2e/playwright/search/src/tests/search-results-general.e2e.ts

@@ -98,7 +98,7 @@ test.describe('Search Results - General', () => {
     expect(await searchPage.dataTable.isItemPresent(file)).toBeTruthy();
     expect(await searchPage.dataTable.isItemPresent(folder)).toBeFalsy();
 
-    await searchPage.searchInput.searchButton.click();
+    await searchPage.clickSearchButton();
     await searchPage.searchOverlay.searchFor(folder);
     await searchPage.dataTable.progressBarWaitForReload();
 

e2e/playwright/share-action/src/tests/share/unshare-file-search-results.e2e.ts

@@ -112,7 +112,7 @@ test.describe('Unshare a file from Search Results', () => {
 
   test('[C306995] Unshare dialog UI', async ({ personalFiles, searchPage }) => {
     await personalFiles.acaHeader.searchButton.click();
-    await searchPage.searchInput.searchButton.click();
+    await searchPage.clickSearchButton();
     await searchPage.searchOverlay.checkFilesAndFolders();
     await searchPage.searchOverlay.searchFor(file1);
 
@@ -133,7 +133,7 @@ test.describe('Unshare a file from Search Results', () => {
 
   test('[C306996] Unshare a file', async ({ personalFiles, searchPage, nodesApiAction, page }) => {
     await personalFiles.acaHeader.searchButton.click();
-    await searchPage.searchInput.searchButton.click();
+    await searchPage.clickSearchButton();
     await searchPage.searchOverlay.checkFilesAndFolders();
     await searchPage.searchOverlay.searchFor(file2);
 
@@ -152,7 +152,7 @@ test.describe('Unshare a file from Search Results', () => {
 
   test('[C306997] Cancel the Unshare action', async ({ personalFiles, searchPage }) => {
     await personalFiles.acaHeader.searchButton.click();
-    await searchPage.searchInput.searchButton.click();
+    await searchPage.clickSearchButton();
     await searchPage.searchOverlay.checkFilesAndFolders();
     await searchPage.searchOverlay.searchFor(file3);
 
@@ -170,7 +170,7 @@ test.describe('Unshare a file from Search Results', () => {
 
   test('[C306999] Unshare a file from the context menu', async ({ personalFiles, searchPage, nodesApiAction, page }) => {
     await personalFiles.acaHeader.searchButton.click();
-    await searchPage.searchInput.searchButton.click();
+    await searchPage.clickSearchButton();
     await searchPage.searchOverlay.checkFilesAndFolders();
     await searchPage.searchOverlay.searchFor(file4);
 
@@ -189,7 +189,7 @@ test.describe('Unshare a file from Search Results', () => {
 
   test('[C306998] Consumer - on Search Results - file shared by other user', async ({ personalFiles, searchPage, nodesApiAction }) => {
     await personalFiles.acaHeader.searchButton.click();
-    await searchPage.searchInput.searchButton.click();
+    await searchPage.clickSearchButton();
     await searchPage.searchOverlay.checkFilesAndFolders();
     await searchPage.searchOverlay.searchFor(fileSite1);
 
@@ -204,7 +204,7 @@ test.describe('Unshare a file from Search Results', () => {
 
   test('[C307000] Consumer - on Search Results - file shared by the user', async ({ personalFiles, searchPage, nodesApiAction, page }) => {
     await personalFiles.acaHeader.searchButton.click();
-    await searchPage.searchInput.searchButton.click();
+    await searchPage.clickSearchButton();
     await searchPage.searchOverlay.checkFilesAndFolders();
     await searchPage.searchOverlay.searchFor(fileSite2);
 

e2e/playwright/upload-download-actions/src/tests/version-actions.e2e.ts

@@ -186,7 +186,7 @@ test.describe('Version actions', () => {
     test.beforeEach(async ({ loginPage, searchPage }) => {
       await Utils.tryLoginUser(loginPage, username, username, 'beforeEach failed');
       await searchPage.navigate();
-      await searchPage.searchInput.searchButton.click();
+      await searchPage.clickSearchButton();
       await searchPage.searchOverlay.searchFor(filenameAfterUpdate);
       await viewFirstFileVersion(searchPage);
     });

e2e/playwright/viewer/src/tests/viewer.e2e.ts

@@ -141,7 +141,7 @@ test.describe('viewer file', () => {
 
   test('[C279175] Viewer opens for a file from Search Results', async ({ personalFiles, searchPage }) => {
     await personalFiles.acaHeader.searchButton.click();
-    await searchPage.searchInput.searchButton.click();
+    await searchPage.clickSearchButton();
     await searchPage.searchOverlay.checkFilesAndFolders();
     await searchPage.searchOverlay.searchFor(randomDocxName);
     await searchPage.reload({ waitUntil: 'domcontentloaded' });

projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.html

@@ -1,14 +1,16 @@
 <div class="app-search-container">
+  <mat-form-field class="app-input-form-field" appearance="outline">
+
     <button
       mat-icon-button
-    id="app-search-button"
+      matPrefix
       class="app-search-button"
       (click)="searchSubmit(searchTerm)"
       [title]="'SEARCH.BUTTON.TOOLTIP' | translate"
     >
-    <mat-icon class="app-search-input-control-icon app-search-button-icon" [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
+      <mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
     </button>
-  <mat-form-field class="app-input-form-field" floatLabel="auto">
+
     <input
       matInput
       #searchInput
@@ -18,12 +20,13 @@
       [(ngModel)]="searchTerm"
       (ngModelChange)="inputChange($event)"
       (keyup.enter)="searchSubmit($event)"
-      class="app-input-form-field-input"
       [placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate"
       autocomplete="off"
     />
-    <div matSuffix class="app-suffix-search-icon-wrapper">
+    <div matSuffix>
-      <mat-icon *ngIf="searchTerm.length" (click)="clear()" class="app-search-input-control-icon app-clear-icon">clear</mat-icon>
+      <button mat-icon-button (click)="clear()">
+        <mat-icon *ngIf="searchTerm.length" class="app-suffix-icon">clear</mat-icon>
+      </button>
     </div>
   </mat-form-field>
 </div>

projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.scss

@@ -1,78 +1,33 @@
-@import '@alfresco/adf-core/lib/styles/mat-selectors';
+$search-height: 64px;
-
-.app-suffix-search-icon-wrapper {
-  display: flex;
-  align-items: center;
-  margin: 14px 1px;
-  float: left;
-
-  .app-search-input-control-icon {
-    font-size: 24px;
-    cursor: pointer;
-  }
-
-  .app-clear-icon {
-    font-size: 18px;
-    margin: 3px;
-  }
-}
 
 .app-search-container {
-  position: relative;
-  top: -5px;
   font-size: 16px;
-  padding-left: 19px;
   box-sizing: border-box;
+  height: $search-height;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 
-  .app-input-form-field-input + span {
+  .app-suffix-icon {
-    cursor: text;
+    width: 18px;
-    pointer-events: auto;
+    height: 18px;
+    font-size: 18px;
+  }
+
+  /* stylelint-disable-next-line selector-class-pattern */
+  .mdc-notched-outline {
+    display: none;
   }
 
   .app-input-form-field {
     letter-spacing: -0.7px;
     font-size: 16px;
-    width: calc(100% - 56px);
+    width: 100%;
+    height: $search-height;
+    line-height: calc($search-height / 2);
 
     &-input {
       letter-spacing: -0.7px;
     }
-
-    #{$mat-line-ripple} {
-      &::before,
-      &::after {
-        display: none;
-      }
-    }
-
-    #{$mat-form-field-icon-suffix} {
-      position: relative;
-      right: -14px;
-    }
-  }
-
-  #{$mat-form-field-flex} {
-    background: #fff;
-  }
-
-  #{$mat-form-field-wrapper} {
-    height: 44px;
-    padding-left: 0;
-  }
-
-  .app-input-form-field-readonly {
-    #{$mat-form-field-wrapper},
-    #{$mat-form-field-flex} {
-      background-color: var(--theme-search-background-color);
-    }
-  }
-
-  .app-search-button {
-    left: -12px;
-
-    &-icon {
-      font-size: 24px;
-      padding-right: 0;
-    }
   }
 }

projects/aca-content/src/lib/components/search/search-input/search-input.component.html

@@ -1,30 +1,29 @@
-<div class="app-search-container app-search-menu-trigger"
+<div class="app-search-container"
   [matMenuTriggerFor]="searchOptionsMenu"
   (menuOpened)="onMenuOpened()"
   (menuClosed)="syncInputValues()"
 >
-
+  <mat-form-field class="app-input-form-field" appearance="outline">
-  <button mat-icon-button class="app-search-button" (click)="searchByOption()" [title]="'SEARCH.BUTTON.TOOLTIP' | translate">
+    <button class="aca-search-input--search-button" mat-icon-button matPrefix (click)="searchByOption()" [title]="'SEARCH.BUTTON.TOOLTIP' | translate">
       <mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
     </button>
-  <mat-form-field class="app-input-form-field app-input-form-field-readonly" [floatLabel]="'auto'">
+
     <input
       matInput
       [attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"
-      class="app-input-form-field-input"
       [type]="'text'"
       [readonly]="true"
       [value]="searchedWord"
       [placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate"
     />
 
-    <div matSuffix class="app-suffix-search-icon-wrapper app-icon-arrow">
+    <div matSuffix>
-      <mat-icon>arrow_drop_down</mat-icon>
+      <mat-icon class="app-suffix-icon">arrow_drop_down</mat-icon>
-    </div>
 
-    <button mat-icon-button matSuffix class="app-suffix-search-icon-wrapper app-close-button" (click)="exitSearch()">
+      <button class="aca-search-input--close-button" mat-icon-button (click)="exitSearch()">
-      <mat-icon class="app-close-icon">close</mat-icon>
+        <mat-icon class="app-suffix-icon">close</mat-icon>
       </button>
+    </div>
   </mat-form-field>
 </div>
 
@@ -41,9 +40,7 @@
       <mat-hint *ngIf="hasLibrariesConstraint" class="app-search-hint">{{ 'SEARCH.INPUT.HINT' | translate }}</mat-hint>
 
       <div id="search-options" class="app-search-options">
-        <mat-checkbox
+        <mat-checkbox *ngFor="let option of searchOptions"
-          class="app-search-options-checkbox"
-          *ngFor="let option of searchOptions"
           id="{{ option.id }}"
           [(ngModel)]="option.value"
           [disabled]="option.shouldDisable()"

projects/aca-content/src/lib/components/search/search-input/search-input.component.scss

@@ -1,43 +1,13 @@
-@import '@alfresco/adf-core/lib/styles/mat-selectors';
-
 $search-width: 594px;
-$search-height: 32px;
+$search-height: 64px;
 $search-background: var(--theme-search-background-color);
 $search-border-radius: 4px;
-$top-margin: 12px;
 
 .app-search-container {
   color: var(--theme-foreground-text-color);
   width: 100%;
   max-width: $search-width;
-  height: $search-height + $top-margin;
+  height: $search-height;
-
-  .app-search-button:is(button) {
-    width: 32px;
-    height: 32px;
-    margin-left: 0;
-    padding-left: 0;
-    margin-top: -4px;
-  }
-
-  .app-input-form-field {
-    .app-suffix-search-icon-wrapper.app-icon-arrow {
-      margin-top: 16px;
-    }
-
-    .app-suffix-search-icon-wrapper.app-close-button {
-      height: 6px;
-
-      .app-close-icon {
-        font-size: 18px;
-        line-height: 28px;
-      }
-    }
-
-    &-input {
-      caret-color: var(--theme-text-color);
-    }
-  }
 
   &:focus-within {
     label {
@@ -46,19 +16,12 @@ $top-margin: 12px;
   }
 }
 
-.app-search-options-menu#{$mat-menu-panel} {
+.app-search-options-menu {
-  position: relative;
-  top: -5px;
-  margin-top: 2px;
   background-color: var(--theme-dialog-background-color);
   width: $search-width;
-  max-width: unset;
+  /* stylelint-disable-next-line declaration-no-important */
+  min-width: $search-width !important;
   border-radius: $search-border-radius;
-
-  #{$mdc-list} {
-    padding-top: 10px;
-    padding-right: 10px;
-  }
 }
 
 .aca-search-input {
@@ -67,55 +30,21 @@ $top-margin: 12px;
   background-color: $search-background;
   border-radius: $search-border-radius;
   height: $search-height;
-  margin-bottom: 0;
-  padding-bottom: 26px;
 
-  .app-search-container {
+  .app-suffix-icon {
-    margin: 10px 0 0;
+    width: 18px;
+    height: 18px;
+    font-size: 18px;
   }
 }
 
-.app-search-control {
-  margin-top: -$top-margin;
-}
-
 .app-search-options {
   color: var(--theme-text-color);
   border-top: 1px solid var(--theme-divider-color);
-  padding: 20px 10px;
+  padding: 10px;
-  font-size: 16px;
+  display: flex;
-  letter-spacing: -0.7px;
+  flex-direction: row;
-  margin-bottom: -8px;
+  column-gap: 24px;
-
-  #{$mat-checkbox} {
-    #{$mdc-form-field} {
-      #{$mat-checkbox-box} {
-        #{$mat-checkbox-background} {
-          height: 18px;
-          width: 18px;
-        }
-      }
-    }
-  }
-
-  .app-search-options-checkbox label {
-    max-width: 155px;
-    font-size: 16px;
-    padding-left: 6px;
-    padding-top: 2px;
-    letter-spacing: -1px;
-  }
-
-  &-checkbox {
-    padding: 3px 36px 3px 20px;
-
-    /* stylelint-disable-next-line no-descending-specificity */
-    label {
-      padding: 0 0 0 11px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
 }
 
 .app-search-hint {
@@ -139,7 +68,7 @@ $top-margin: 12px;
     width: $search-width-small;
   }
 
-  #search-options {
+  .app-search-options {
     padding-left: 20px;
 
     label {
@@ -171,7 +100,7 @@ $top-margin: 12px;
     width: $search-width-xsmall;
   }
 
-  #search-options label {
+  .app-search-options label {
     max-width: 180px;
   }
 }

projects/aca-content/src/lib/components/search/search-input/search-input.component.spec.ts

@@ -230,7 +230,7 @@ describe('SearchInputComponent', () => {
       fixture.detectChanges();
       await fixture.whenStable();
 
-      const closeIcon = fixture.debugElement.nativeElement.querySelector('.app-close-icon');
+      const closeIcon = fixture.debugElement.nativeElement.querySelector('.aca-search-input--close-button');
       closeIcon.click();
 
       fixture.detectChanges();

projects/aca-playwright-shared/src/page-objects/components/aca-header.component.ts

@@ -33,7 +33,7 @@ export class AcaHeader extends BaseComponent {
   public createButton = this.getChild('[id="app.toolbar.create"]');
   public viewDetails = this.getChild('[title="View Details"]');
   public viewButton = this.getChild('button[title="View"]');
-  public searchButton = this.getChild('button[title="Search"]');
+  public searchButton = this.getChild('button[id="app.toolbar.search"]');
   public fullScreenButton = this.getChild('button[id="app.viewer.fullscreen"]');
   public shareButton = this.getChild('button[id="share-action-button"]');
   public downloadButtonViewer = this.getChild('button[id="app.viewer.download"]');

projects/aca-playwright-shared/src/page-objects/components/search/search-input.component.ts

@@ -29,9 +29,8 @@ import { timeouts } from '../../../utils';
 export class SearchInputComponent extends BaseComponent {
   private static rootElement = 'aca-page-layout';
   public searchInput = this.page.locator('#app-control-input');
-  public searchButton = this.page.locator('.app-search-button');
+  public searchButton = this.page.locator('.aca-search-input--search-button');
-
+  public searchCloseButton = this.page.locator('.aca-search-input--close-button');
-  getIconByName = (name: string): Locator => this.getChild('.mat-icon', { hasText: name });
 
   /**
    * Method used in cases where user have possibility to navigate "inside" the element (it's clickable and has link attribute).

projects/aca-playwright-shared/src/page-objects/components/search/search-overlay.components.ts

@@ -32,9 +32,9 @@ export class SearchOverlayComponent extends BaseComponent {
   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-button');
+  public searchButton = this.page.locator('.aca-search-input--search-button');
   public searchInputControl = this.page.locator('.app-search-control');
-  public searchOptions = this.page.locator('#search-options');
+  public searchOptions = this.page.locator('.app-search-options');
 
   constructor(page: Page, rootElement = SearchOverlayComponent.rootElement) {
     super(page, rootElement);
@@ -90,6 +90,6 @@ export class SearchOverlayComponent extends BaseComponent {
 
   async searchFor(input: string): Promise<void> {
     await this.searchInput.fill(input);
-    await this.searchButton.click();
+    await this.searchButton.click({ force: true });
   }
 }

projects/aca-playwright-shared/src/page-objects/pages/search.page.ts

@@ -74,7 +74,7 @@ export class SearchPage extends BasePage {
 
   async searchWithin(searchText: string, searchType: SearchType): Promise<void> {
     await this.acaHeader.searchButton.click();
-    await this.searchInput.searchButton.click();
+    await this.clickSearchButton();
     switch (searchType) {
       case 'files':
         await this.searchOverlay.checkOnlyFiles();
@@ -94,4 +94,8 @@ export class SearchPage extends BasePage {
     await this.searchOverlay.searchFor(searchText);
     await this.dataTable.progressBarWaitForReload();
   }
+
+  async clickSearchButton() {
+    await this.searchInput.searchButton.click({ force: true });
+  }
 }