diff --git a/e2e/playwright/library-actions/src/tests/library-actions.e2e.ts b/e2e/playwright/library-actions/src/tests/library-actions.e2e.ts index 307bf2e54d..03fa5c2785 100644 --- a/e2e/playwright/library-actions/src/tests/library-actions.e2e.ts +++ b/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); diff --git a/e2e/playwright/list-views/src/tests/empty-list.e2e.ts b/e2e/playwright/list-views/src/tests/empty-list.e2e.ts index eef6cdac26..00112b7b9c 100755 --- a/e2e/playwright/list-views/src/tests/empty-list.e2e.ts +++ b/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' }); diff --git a/e2e/playwright/list-views/src/tests/permissions.e2e.ts b/e2e/playwright/list-views/src/tests/permissions.e2e.ts index 65de1b10cb..6fd3d49721 100755 --- a/e2e/playwright/list-views/src/tests/permissions.e2e.ts +++ b/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(); diff --git a/e2e/playwright/navigation/src/tests/sidebar.e2e.ts b/e2e/playwright/navigation/src/tests/sidebar.e2e.ts index 6bf59d2b57..9f86a66ce3 100644 --- a/e2e/playwright/navigation/src/tests/sidebar.e2e.ts +++ b/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); }); diff --git a/e2e/playwright/search/src/tests/search-input.e2e.ts b/e2e/playwright/search/src/tests/search-input.e2e.ts index ae3ec7716b..03fcc58a05 100644 --- a/e2e/playwright/search/src/tests/search-input.e2e.ts +++ b/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(); diff --git a/e2e/playwright/search/src/tests/search-results-general.e2e.ts b/e2e/playwright/search/src/tests/search-results-general.e2e.ts index 9d0d7ecd8c..298156246c 100644 --- a/e2e/playwright/search/src/tests/search-results-general.e2e.ts +++ b/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(); diff --git a/e2e/playwright/share-action/src/tests/share/unshare-file-search-results.e2e.ts b/e2e/playwright/share-action/src/tests/share/unshare-file-search-results.e2e.ts index 44c0550fdd..e741cd12b5 100755 --- a/e2e/playwright/share-action/src/tests/share/unshare-file-search-results.e2e.ts +++ b/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); diff --git a/e2e/playwright/upload-download-actions/src/tests/version-actions.e2e.ts b/e2e/playwright/upload-download-actions/src/tests/version-actions.e2e.ts index f4d06149d7..9f59ef0d45 100644 --- a/e2e/playwright/upload-download-actions/src/tests/version-actions.e2e.ts +++ b/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); }); diff --git a/e2e/playwright/viewer/src/tests/viewer.e2e.ts b/e2e/playwright/viewer/src/tests/viewer.e2e.ts index 0e1f00b7a2..789873d810 100644 --- a/e2e/playwright/viewer/src/tests/viewer.e2e.ts +++ b/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' }); diff --git a/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.html b/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.html index acaa667c72..d701742896 100644 --- a/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.html +++ b/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.html @@ -1,14 +1,16 @@
- - + + + + -
- clear +
+
diff --git a/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.scss b/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.scss index 922e87ea35..eb1143494b 100644 --- a/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.scss +++ b/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 { +.app-search-container { + font-size: 16px; + box-sizing: border-box; + height: $search-height; display: flex; + flex-direction: row; align-items: center; - margin: 14px 1px; - float: left; - .app-search-input-control-icon { - font-size: 24px; - cursor: pointer; - } - - .app-clear-icon { + .app-suffix-icon { + width: 18px; + height: 18px; font-size: 18px; - margin: 3px; } -} -.app-search-container { - position: relative; - top: -5px; - font-size: 16px; - padding-left: 19px; - box-sizing: border-box; - - .app-input-form-field-input + span { - cursor: text; - pointer-events: auto; + /* 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; - } } } diff --git a/projects/aca-content/src/lib/components/search/search-input/search-input.component.html b/projects/aca-content/src/lib/components/search/search-input/search-input.component.html index 1a8312c02c..06067988a5 100644 --- a/projects/aca-content/src/lib/components/search/search-input/search-input.component.html +++ b/projects/aca-content/src/lib/components/search/search-input/search-input.component.html @@ -1,30 +1,29 @@ -
+ + - - -
- arrow_drop_down -
+
+ arrow_drop_down - + +
@@ -41,9 +40,7 @@ {{ 'SEARCH.INPUT.HINT' | translate }}
- { 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(); diff --git a/projects/aca-playwright-shared/src/page-objects/components/aca-header.component.ts b/projects/aca-playwright-shared/src/page-objects/components/aca-header.component.ts index 9d284d753b..df6539fa4c 100644 --- a/projects/aca-playwright-shared/src/page-objects/components/aca-header.component.ts +++ b/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"]'); diff --git a/projects/aca-playwright-shared/src/page-objects/components/search/search-input.component.ts b/projects/aca-playwright-shared/src/page-objects/components/search/search-input.component.ts index ad1d5d7240..2e7c875c8d 100644 --- a/projects/aca-playwright-shared/src/page-objects/components/search/search-input.component.ts +++ b/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'); - - getIconByName = (name: string): Locator => this.getChild('.mat-icon', { hasText: name }); + public searchButton = this.page.locator('.aca-search-input--search-button'); + public searchCloseButton = this.page.locator('.aca-search-input--close-button'); /** * Method used in cases where user have possibility to navigate "inside" the element (it's clickable and has link attribute). diff --git a/projects/aca-playwright-shared/src/page-objects/components/search/search-overlay.components.ts b/projects/aca-playwright-shared/src/page-objects/components/search/search-overlay.components.ts index 6aee660873..ed9216a4b7 100644 --- a/projects/aca-playwright-shared/src/page-objects/components/search/search-overlay.components.ts +++ b/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 { await this.searchInput.fill(input); - await this.searchButton.click(); + await this.searchButton.click({ force: true }); } } diff --git a/projects/aca-playwright-shared/src/page-objects/pages/search.page.ts b/projects/aca-playwright-shared/src/page-objects/pages/search.page.ts index 4eda91d73f..d730ef8b49 100644 --- a/projects/aca-playwright-shared/src/page-objects/pages/search.page.ts +++ b/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 { 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 }); + } }