Alfresco · pmartinezga · Jul 3, 2024 · Jul 3, 2024
@@ -12,7 +12,7 @@
                 <adf-search-filter-chips></adf-search-filter-chips>
             </div>
 
-            <mat-icon adf-reset-search title="reset" style="padding-right: 5px;">refresh</mat-icon>
+            <mat-icon adf-reset-search matTooltip="reset" style="padding-right: 5px;">refresh</mat-icon>
 
             <adf-search-sorting-picker style="width: 240px"></adf-search-sorting-picker>
         </div>

@@ -16,3 +16,4 @@
  */
 
 export * from './error.component';
+export * from './validation.component';
@@ -16,7 +16,10 @@
  */
 
 export const materialLocators = {
-    Error: {
-        root: 'mat-error'
-    }
+  Error: {
+    root: 'mat-error'
+  },
+  Tooltip: {
+    root: 'mat-tooltip-component'
+  }
 };
@@ -0,0 +1,29 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Page } from '@playwright/test';
+import { BaseComponent } from '../base.component';
+import { materialLocators } from './material-locators';
+
+export class TooltipComponent extends BaseComponent {
+    private static rootElement = materialLocators.Tooltip.root;
+    public content = this.getChild('div');
+
+    constructor(page: Page) {
+        super(page, TooltipComponent.rootElement);
+    }
+}
@@ -17,11 +17,13 @@
 
 import { Page } from '@playwright/test';
 import { BaseComponent } from '../../page-object/components/base.component';
-import { ErrorComponent } from '../../page-object/components';
+import { ErrorComponent, TooltipComponent, ListboxComponent } from '../../page-object/components';
 
 export class GroupComponent extends BaseComponent {
     private static rootElement = 'adf-cloud-group';
     public error = new ErrorComponent(this.page);
+    public tooltip = new TooltipComponent(this.page);
+    public listbox = new ListboxComponent(this.page);
 
     public groupNaming = this.getChild('[data-automation-id="adf-cloud-group-chip-list"]');
     public groupInput = this.getChild('[data-automation-id="adf-group-cloud-search-input"]');
@@ -31,4 +33,5 @@ export class GroupComponent extends BaseComponent {
     }
 
     public getUserLocator = (userName: string) => this.getChild(`[data-automation-id="adf-cloud-group-chip-${userName}"]`);
+
 }
@@ -17,11 +17,12 @@
 
 import { Page } from '@playwright/test';
 import { BaseComponent } from '../../page-object/components/base.component';
-import { ErrorComponent, ListboxComponent } from '../../page-object/components';
+import { ErrorComponent, TooltipComponent, ListboxComponent } from '../../page-object/components';
 
 export class PeopleComponent extends BaseComponent {
     private static rootElement = 'adf-cloud-people';
     public error = new ErrorComponent(this.page);
+    public tooltip = new TooltipComponent(this.page);
     public listbox = new ListboxComponent(this.page);
 
     public usersNaming = this.getChild('[data-automation-id="adf-cloud-people-chip-list"]');
@@ -32,4 +33,5 @@ export class PeopleComponent extends BaseComponent {
     }
 
     public getUserLocator = (userName: string) => this.getChild(`[data-automation-id="adf-people-cloud-chip-${userName}"]`);
+
 }
@@ -39,6 +39,9 @@ test.describe('Groups component stories tests', () => {
 
         await processServicesCloud.navigateTo({ moduleNames: ['group-cloud'], componentName: 'group-cloud', story: 'mandatory-preselected-groups' });
         await expect.soft(groupComponent.groupNaming).toContainText(expectedUsersName);
+
+        await groupComponent.getUserLocator('Meat Chicken').hover();
+        await expect(groupComponent.tooltip.content).toContainText('Mandatory');
     });
 
     test('Invalid Preselected Groups', async ({ processServicesCloud, groupComponent }) => {
@@ -49,4 +52,5 @@ test.describe('Groups component stories tests', () => {
 
         await expect(groupComponent.error.content).toContainText(expectedWarningIcon + expectedWarningMessage);
     });
+
 });
@@ -42,6 +42,7 @@ test.describe('People component stories tests', () => {
         await peopleComponent.getUserLocator('Kielbasa Sausage').hover();
 
         await expect.soft(peopleComponent.usersNaming).toContainText(expectedUsersName);
+        await expect(peopleComponent.tooltip.content).toContainText('Mandatory');
     });
 
     test('Invalid Preselected Users', async ({ processServicesCloud, peopleComponent }) => {

@@ -16,7 +16,7 @@
                 <mat-panel-description
                     class="adf-accordion-aspect-list-expansion-panel-header-description"
                     [id]="'aspect-list-'+colIndex+'-title'"
-                    [title]="getTitle(aspect)">
+                    [matTooltip]="getTitle(aspect)">
                     {{getTitle(aspect)}}
                 </mat-panel-description>
             </mat-expansion-panel-header>

@@ -26,6 +26,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { MatDialogModule } from '@angular/material/dialog';
 import { AspectListDialogComponent } from './aspect-list-dialog.component';
 import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { ContentDirectiveModule } from '../directives/content-directive.module';
 
@@ -39,10 +40,17 @@ import { ContentDirectiveModule } from '../directives/content-directive.module';
         TranslateModule,
         MatDialogModule,
         MatButtonModule,
+        MatTooltipModule,
         MatProgressSpinnerModule,
         ContentDirectiveModule
     ],
-    exports: [AspectListComponent, AspectListDialogComponent],
-    declarations: [AspectListComponent, AspectListDialogComponent]
+    exports: [
+        AspectListComponent,
+        AspectListDialogComponent
+    ],
+    declarations: [
+        AspectListComponent,
+        AspectListDialogComponent
+    ]
 })
-export class AspectListModule {}
+export class AspectListModule { }
@@ -25,7 +25,7 @@ <h1 mat-dialog-title class="adf-content-node-selector-dialog-title" data-automat
                         {{ 'NODE_SELECTOR.UPLOAD_FROM_DEVICE' | translate }}
                         <mat-icon *ngIf="hasUploadError()"
                                   data-automation-id="adf-content-node-selector-disabled-tab-info-icon"
-                                  title="{{ getWarningMessage() | translate }}">info
+                                  matTooltip="{{ getWarningMessage() | translate }}">info
                         </mat-icon>
                     </ng-template>
                 </div>

@@ -334,12 +334,12 @@ describe('ContentNodeSelectorComponent', () => {
 
             fixture.detectChanges();
             const infoMatIcon = getTabInfoButton();
-            const iconTooltipMessage = infoMatIcon.attributes['title'];
+            const iconTooltipMessage = infoMatIcon.attributes['ng-reflect-message'];
 
             const expectedMessage = 'NODE_SELECTOR.UPLOAD_BUTTON_SEARCH_WARNING_MESSAGE';
 
             expect(component.getWarningMessage()).toEqual(expectedMessage);
-            expect(iconTooltipMessage).toEqual(expectedMessage);
+            expect(iconTooltipMessage).toEqual(expectedMessage.substring(0, 30));
         });
 
         it('should not be able to show warning message if it is not in search mode', () => {
@@ -394,11 +394,11 @@ describe('ContentNodeSelectorComponent', () => {
 
             fixture.detectChanges();
             const infoMatIcon = getTabInfoButton();
-            const iconTooltipMessage = infoMatIcon.attributes['title'];
+            const iconTooltipMessage = infoMatIcon.attributes['ng-reflect-message'];
             const expectedMessage = 'NODE_SELECTOR.UPLOAD_BUTTON_PERMISSION_WARNING_MESSAGE';
 
             expect(component.getWarningMessage()).toEqual(expectedMessage);
-            expect(iconTooltipMessage).toEqual(expectedMessage);
+            expect(iconTooltipMessage).toEqual(expectedMessage.substring(0, 30));
         });
 
         it('should not be able to show warning message while loading documents', () => {

@@ -5,13 +5,13 @@ <h2 mat-dialog-title>
 <mat-dialog-content>
     <br />
     <form [formGroup]="form" (submit)="submit()">
-        <mat-checkbox  data-automation-id="adf-lock-node-checkbox" class="adf-lock-file-name" [title]="nodeName" [formControlName]="'isLocked'" ngDefaultControl>
+        <mat-checkbox  data-automation-id="adf-lock-node-checkbox" class="adf-lock-file-name" matTooltip="{{ nodeName }}" [formControlName]="'isLocked'" ngDefaultControl>
             {{ 'CORE.FILE_DIALOG.FILE_LOCK_CHECKBOX' | translate }} <strong>"{{ nodeName }}"</strong>
         </mat-checkbox>
 
         <br />
 
-        <div *ngIf="form.value?.isLocked">
+        <div *ngIf="form.value.isLocked">
             <mat-checkbox class="adf-lock-file-name" [formControlName]="'allowOwner'" ngDefaultControl>
                 {{ 'CORE.FILE_DIALOG.ALLOW_OTHERS_CHECKBOX' | translate }}
             </mat-checkbox>
@@ -24,7 +24,7 @@ <h2 mat-dialog-title>
 
             <br />
 
-            <mat-form-field *ngIf="form.value?.isTimeLock">
+            <mat-form-field *ngIf="form.value.isTimeLock">
                 <mat-datetimepicker-toggle [for]="datetimePicker" matSuffix></mat-datetimepicker-toggle>
                 <mat-datetimepicker #datetimePicker type="datetime" [openOnFocus]="true" [timeInterval]="1"></mat-datetimepicker>
                 <input matInput [formControlName]="'time'" [matDatetimepicker]="datetimePicker" required autocomplete="false">

@@ -8,7 +8,9 @@
         [attr.aria-label]="option.name | translate"
         (change)="changeHandler($event, option)"
         class="adf-facet-filter">
-        <div title="{{ option.name | translate }}" class="adf-search-check-list-label">
+        <div matTooltip="{{ option.name | translate }}"
+            matTooltipPosition="before"
+            class="adf-search-check-list-label">
             {{ option.name | translate }}
         </div>
 

@@ -4,11 +4,14 @@
             class="adf-option-chips adf-autocomplete-added-option-chips"
             *ngFor="let option of selectedOptions"
             (removed)="remove(option)">
-            <span [title]="option.fullPath ? ('SEARCH.RESULTS.WILL_CONTAIN' | translate:{searchTerm: option.fullPath}) : undefined">
+            <span [matTooltip]="'SEARCH.RESULTS.WILL_CONTAIN' | translate:{searchTerm: option.fullPath}"
+                  [matTooltipDisabled]="!option.fullPath" [matTooltipShowDelay]="tooltipShowDelay">
                 {{ option.value }}
             </span>
-            <button matChipRemove class="adf-option-chips-delete-button adf-autocomplete-added-option-chips-delete-button"
-                    [title]="'SEARCH.FILTER.BUTTONS.REMOVE' | translate">
+            <button matChipRemove class="adf-option-chips-delete-button adf-autocomplete-added-option-chips-delete-button" [matTooltipDisabled]="!option.fullPath"
+                    [matTooltip]="('SEARCH.FILTER.BUTTONS.REMOVE' | translate) + ' \'' + option.fullPath + '\''"
+                    [matTooltipShowDelay]="tooltipShowDelay"
+                    [attr.aria-label]="('SEARCH.FILTER.BUTTONS.REMOVE' | translate) + ' ' + option.value">
                 <mat-icon class="adf-option-chips-delete-icon adf-autocomplete-added-option-chips-delete-icon">close</mat-icon>
             </button>
         </mat-chip>
@@ -30,9 +33,10 @@
         <ng-container *ngIf="optionInput.value.length > 0">
             <mat-option
                 [disabled]="option | adfIsIncluded: selectedOptions : compareOption"
-                *ngFor="let option of filteredOptions" [value]="option"
+                *ngFor="let option of filteredOptions" [value]="option" [matTooltipShowDelay]="tooltipShowDelay"
+                [matTooltipDisabled]="!option.fullPath" matTooltipPosition="right"
                 [attr.data-automation-id]="'option-' + (option.value)"
-                [title]="option.fullPath ? ('SEARCH.RESULTS.WILL_CONTAIN' | translate:{searchTerm: option.fullPath || option.value}): undefined"
+                [matTooltip]="'SEARCH.RESULTS.WILL_CONTAIN' | translate:{searchTerm: option.fullPath || option.value}"
                 class="adf-search-chip-autocomplete-added-option"
                 [ngClass]="(option | adfIsIncluded: selectedOptions : compareOption) && 'adf-autocomplete-added-option'">
                 {{ option.fullPath || option.value }}

@@ -67,7 +67,7 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy,
     @Input()
     filter = (options: AutocompleteOption[], value: string): AutocompleteOption[] => {
         const filterValue = value.toLowerCase();
-        return options.filter((option) => option.value.toLowerCase().includes(filterValue)).slice(0, 15);
+        return options.filter(option => option.value.toLowerCase().includes(filterValue)).slice(0, 15);
     };
 
     @Output()
@@ -80,6 +80,7 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy,
     formCtrl = new FormControl('');
     filteredOptions: AutocompleteOption[] = [];
     selectedOptions: AutocompleteOption[] = [];
+    tooltipShowDelay = 800;
     private onDestroy$ = new Subject<void>();
     private _activeAnyOption = false;
 
@@ -91,7 +92,7 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy,
         this.formCtrl.valueChanges
             .pipe(
                 startWith(''),
-                tap(() => (this.activeAnyOption = false)),
+                tap(() => this.activeAnyOption = false),
                 debounce((value: string) => (value ? timer(300) : EMPTY)),
                 takeUntil(this.onDestroy$)
             )
@@ -104,10 +105,7 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy,
 
     ngOnChanges(changes: SimpleChanges) {
         if (changes.autocompleteOptions) {
-            this.filteredOptions =
-                changes.autocompleteOptions.currentValue?.length > 0
-                    ? this.filter(changes.autocompleteOptions.currentValue, this.formCtrl.value)
-                    : [];
+            this.filteredOptions = changes.autocompleteOptions.currentValue?.length > 0 ? this.filter(changes.autocompleteOptions.currentValue, this.formCtrl.value) : [];
         }
     }
 
@@ -125,10 +123,10 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy,
 
             if (value && this.isExists(value) && !this.isAdded(value)) {
                 if (this.allowOnlyPredefinedValues) {
-                    const index = this.autocompleteOptions.findIndex((option) => option.value.toLowerCase() === value.toLowerCase());
+                    const index = this.autocompleteOptions.findIndex(option => option.value.toLowerCase() === value.toLowerCase());
                     this.selectedOptions.push(this.autocompleteOptions[index]);
                 } else {
-                    this.selectedOptions.push({ value });
+                    this.selectedOptions.push({value});
                 }
                 this.optionsChanged.emit(this.selectedOptions);
                 event.chipInput.clear();
@@ -155,12 +153,14 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy,
 
     private isAdded(value: string): boolean {
         const valueLowerCase = value.toLowerCase();
-        return this.selectedOptions.some((option) => option.value.toLowerCase() === valueLowerCase);
+        return this.selectedOptions.some(option => option.value.toLowerCase() === valueLowerCase);
     }
 
     private isExists(value: string): boolean {
         const valueLowerCase = value.toLowerCase();
-        return this.allowOnlyPredefinedValues ? this.autocompleteOptions.some((option) => option.value.toLowerCase() === valueLowerCase) : true;
+        return this.allowOnlyPredefinedValues
+            ? this.autocompleteOptions.some(option => option.value.toLowerCase() === valueLowerCase)
+            : true;
     }
 
     private reset() {

@@ -5,7 +5,8 @@
             color="primary"
             selected
             class="adf-search-chip-list-item"
-            title="{{ 'SEARCH.FILTER.BUTTONS.CLEAR-ALL.TOOLTIP' | translate }}"
+            matTooltip="{{ 'SEARCH.FILTER.BUTTONS.CLEAR-ALL.TOOLTIP' | translate }}"
+            matTooltipPosition="right"
             (click)="facetFiltersService.resetAllSelectedBuckets()">
             {{ 'SEARCH.FILTER.BUTTONS.CLEAR-ALL.LABEL' | translate }}
         </mat-chip>

@@ -34,7 +34,8 @@
             class="adf-search-filter-facet-checkbox"
         >
             <div
-                title="{{ bucket.display || bucket.label | translate }} {{ getBucketCountDisplay(bucket) }}"
+                matTooltip="{{ bucket.display || bucket.label | translate }} {{ getBucketCountDisplay(bucket) }}"
+                matTooltipPosition="right"
                 class="adf-facet-label"
                 [class.adf-search-filter-facet-checkbox-checked]="bucket.checked"
             >

@@ -4,8 +4,9 @@
         <button mat-icon-button
             class="adf-search-filter-title-action"
             aria-hidden="false"
+            [attr.aria-label]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate"
             (click)="onClose()"
-            [title]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate">
+            [matTooltip]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate">
             <mat-icon>
                 close
             </mat-icon>

@@ -9,7 +9,7 @@
         (keyup.enter)="$event.stopPropagation()"
         class="adf-filter-button"
         [attr.aria-label]="getTooltipTranslation(col?.title)"
-        [title]="getTooltipTranslation(col?.title)"
+        [matTooltip]="getTooltipTranslation(col?.title)"
     >
         <adf-icon
             value="filter_list"

@@ -3,7 +3,8 @@
     <button *ngIf="displayResetButton && facetFiltersService.responseFacets"
             mat-button
             color="primary"
-            title="{{ 'SEARCH.FILTER.BUTTONS.RESET-ALL.TOOLTIP' | translate }}"
+            matTooltip="{{ 'SEARCH.FILTER.BUTTONS.RESET-ALL.TOOLTIP' | translate }}"
+            matTooltipPosition="right"
             adf-reset-search>
         {{ 'SEARCH.FILTER.BUTTONS.RESET-ALL.LABEL' | translate }}
     </button>
@@ -16,7 +17,7 @@
                 {{ category.name | translate }}
             </mat-panel-title>
         </mat-expansion-panel-header>
-        <adf-search-filter-card
+        <adf-search-filter-card 
             [category]="category">
         </adf-search-filter-card>
     </mat-expansion-panel>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -16,3 +16,4 @@
		*/

		export * from './error.component';
		export * from './validation.component';