Restore "[ACS-8113] UX bug - Checkbox selections checked state should be Hyland blue not green- edit summary (#3908)" (#3919)

* [ACS-8113] UX bug - Checkbox selections checked state should be Hyland blue not green- edit summary (#3908)

* [ACS-8113] dataTable checkbox e2e fix 1

---------

Co-authored-by: jacekpluta <73617938+jacekpluta@users.noreply.github.com>
Co-authored-by: datguychen <adam.swiderski@hyland.com>

projects/aca-content/assets/i18n/en.json

@@ -98,7 +98,8 @@
                 "CREATE_TOOLTIP": "Create content",
                 "UPLOAD": "Upload",
                 "UPLOAD_TOOLTIP": "Upload content"
-            }
+            },
+            "SELECTED": "Selected ({{ count }})"
         },
         "BROWSE": {
             "FILE": {

projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.html

@@ -1,6 +1,8 @@
 <aca-page-layout>
   <div class="aca-page-layout-header">
-    <h1 class="aca-page-title">{{ 'APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.TITLE' | translate }}</h1>
+    <h1 class="aca-page-title">
+      {{ (selectedRowItemsCount < 1 ? 'APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.TITLE' : 'APP.HEADER.SELECTED') | translate: { count: selectedRowItemsCount } }}
+    </h1>
     <aca-toolbar [items]="actions"></aca-toolbar>
   </div>
 
@@ -17,8 +19,10 @@
         [navigate]="false"
         [sorting]="['title', 'asc']"
         [sortingMode]="'client'"
+        [displayCheckboxesOnHover]="true"
         (node-dblclick)="handleNodeClick($event)"
         [imageResolver]="imageResolver"
+        (selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
         [isResizingEnabled]="true"
         [blurOnResize]="false"
         (name-click)="handleNodeClick($event)"

projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.spec.ts

@@ -33,6 +33,7 @@ import { RouterEffects } from '@alfresco/aca-shared/store';
 import { of, throwError } from 'rxjs';
 import { LibraryEffects } from '../../store/effects';
 import { NodeEntry } from '@alfresco/js-api';
+import { getTitleElementText } from '../../testing/test-utils';
 
 describe('FavoriteLibrariesComponent', () => {
   let fixture: ComponentFixture<FavoriteLibrariesComponent>;
@@ -99,6 +100,17 @@ describe('FavoriteLibrariesComponent', () => {
       expect(component.pagination).toBe(null);
       expect(component.isLoading).toBe(false);
     });
+
+    it('should set title based on selectedRowItemsCount', () => {
+      fixture.detectChanges();
+
+      expect(getTitleElementText(fixture)).toBe('APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.TITLE');
+
+      component.selectedRowItemsCount = 5;
+      fixture.detectChanges();
+
+      expect(getTitleElementText(fixture)).toBe('APP.HEADER.SELECTED');
+    });
   });
 
   describe('Node navigation', () => {

projects/aca-content/src/lib/components/favorites/favorites.component.html

@@ -1,6 +1,8 @@
 <aca-page-layout>
   <div class="aca-page-layout-header">
-    <h1 class="aca-page-title">{{ 'APP.BROWSE.FAVORITES.TITLE' | translate }}</h1>
+    <h1 class="aca-page-title">
+      {{ (selectedRowItemsCount < 1 ? 'APP.BROWSE.FAVORITES.TITLE' : 'APP.HEADER.SELECTED') | translate: { count: selectedRowItemsCount } }}
+    </h1>
     <aca-toolbar [items]="actions"></aca-toolbar>
   </div>
 
@@ -17,6 +19,8 @@
         [sorting]="['modifiedAt', 'desc']"
         [sortingMode]="'client'"
         [imageResolver]="imageResolver"
+        [displayCheckboxesOnHover]="true"
+        (selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
         [isResizingEnabled]="true"
         [blurOnResize]="false"
         (node-dblclick)="handleNodeClick($event)"

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

@@ -29,6 +29,7 @@ import { BehaviorSubject, of, Subject } from 'rxjs';
 import { FavoritesComponent } from './favorites.component';
 import { AppTestingModule } from '../../testing/app-testing.module';
 import { AppService, ContentApiService } from '@alfresco/aca-shared';
+import { getTitleElementText } from '../../testing/test-utils';
 
 describe('FavoritesComponent', () => {
   let fixture: ComponentFixture<FavoritesComponent>;
@@ -129,4 +130,13 @@ describe('FavoritesComponent', () => {
       location: 'favorites'
     });
   });
+
+  it('should set title based on selectedRowItemsCount', () => {
+    fixture.detectChanges();
+    expect(getTitleElementText(fixture)).toBe('APP.BROWSE.FAVORITES.TITLE');
+
+    component.selectedRowItemsCount = 5;
+    fixture.detectChanges();
+    expect(getTitleElementText(fixture)).toBe('APP.HEADER.SELECTED');
+  });
 });

projects/aca-content/src/lib/components/files/files.component.html

@@ -1,6 +1,11 @@
 <aca-page-layout [hasError]="!isValidPath">
   <div class="aca-page-layout-header">
-    <adf-breadcrumb [root]="title" [folderNode]="node" [maxItems]="isSmallScreen ? 1 : 0" (navigate)="onBreadcrumbNavigate($event)"> </adf-breadcrumb>
+    <adf-breadcrumb [root]="title"
+                    [folderNode]="node"
+                    [selectedRowItemsCount]="selectedRowItemsCount"
+                    [maxItems]="isSmallScreen ? 1 : 0"
+                    (navigate)="onBreadcrumbNavigate($event)">
+    </adf-breadcrumb>
     <aca-toolbar [items]="actions"></aca-toolbar>
   </div>
 
@@ -22,6 +27,7 @@
           [showHeader]="showHeader"
           [node]="nodeResult"
           [allowDropFiles]="true"
+          [displayCheckboxesOnHover]="true"
           [navigate]="false"
           [sorting]="['name', 'asc']"
           [imageResolver]="imageResolver"
@@ -31,6 +37,7 @@
           [blurOnResize]="false"
           (node-dblclick)="handleNodeClick($event)"
           (name-click)="handleNodeClick($event)"
+          (selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
           (filterSelection)="onFilterSelected($event)"
           (error)="onError()"
         >

projects/aca-content/src/lib/components/libraries/libraries.component.html

@@ -1,6 +1,8 @@
 <aca-page-layout>
   <div class="aca-page-layout-header">
-    <h1 class="aca-page-title">{{ 'APP.BROWSE.LIBRARIES.MENU.MY_LIBRARIES.TITLE' | translate }}</h1>
+    <h1 class="aca-page-title">
+      {{ (selectedRowItemsCount < 1 ? 'APP.BROWSE.LIBRARIES.MENU.MY_LIBRARIES.TITLE' : 'APP.HEADER.SELECTED') | translate: { count: selectedRowItemsCount } }}
+    </h1>
     <aca-toolbar [items]="actions"></aca-toolbar>
   </div>
 
@@ -17,7 +19,9 @@
         [sorting]="['title', 'asc']"
         [sortingMode]="'client'"
         [imageResolver]="imageResolver"
+        [displayCheckboxesOnHover]="true"
         [isResizingEnabled]="true"
+        (selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
         [blurOnResize]="false"
         (node-dblclick)="handleNodeClick($event)"
         (name-click)="handleNodeClick($event)"

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

@@ -30,6 +30,7 @@ import { AppTestingModule } from '../../testing/app-testing.module';
 import { EffectsModule } from '@ngrx/effects';
 import { LibraryEffects } from '../../store/effects';
 import { ContentApiService } from '@alfresco/aca-shared';
+import { getTitleElementText } from '../../testing/test-utils';
 
 describe('LibrariesComponent', () => {
   let fixture: ComponentFixture<LibrariesComponent>;
@@ -67,6 +68,17 @@ describe('LibrariesComponent', () => {
     spyOn(sitesApi, 'listSiteMembershipsForPerson').and.returnValue(Promise.resolve({}));
   });
 
+  describe('Initialization', () => {
+    it('should set title to MY_LIBRARIES.TITLE based on selectedRowItemsCount', () => {
+      fixture.detectChanges();
+      expect(getTitleElementText(fixture)).toBe('APP.BROWSE.LIBRARIES.MENU.MY_LIBRARIES.TITLE');
+
+      component.selectedRowItemsCount = 2;
+      fixture.detectChanges();
+      expect(getTitleElementText(fixture)).toBe('APP.HEADER.SELECTED');
+    });
+  });
+
   describe('Node navigation', () => {
     it('does not navigate when id is not passed', () => {
       spyOn(router, 'navigate').and.stub();

projects/aca-content/src/lib/components/recent-files/recent-files.component.html

@@ -1,6 +1,8 @@
 <aca-page-layout>
   <div class="aca-page-layout-header">
-    <h1 class="aca-page-title">{{ 'APP.BROWSE.RECENT.TITLE' | translate }}</h1>
+    <h1 class="aca-page-title">
+      {{ (selectedRowItemsCount < 1 ? 'APP.BROWSE.RECENT.TITLE' : 'APP.HEADER.SELECTED') | translate: { count: selectedRowItemsCount } }}
+    </h1>
     <aca-toolbar [items]="actions"></aca-toolbar>
   </div>
 
@@ -18,6 +20,8 @@
         [sortingMode]="'client'"
         [imageResolver]="imageResolver"
         [isResizingEnabled]="true"
+        [displayCheckboxesOnHover]="true"
+        (selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
         [blurOnResize]="false"
         (node-dblclick)="handleNodeClick($event)"
         (name-click)="handleNodeClick($event)"

projects/aca-content/src/lib/components/recent-files/recent-files.component.spec.ts

@@ -29,6 +29,7 @@ import { AppTestingModule } from '../../testing/app-testing.module';
 import { Router } from '@angular/router';
 import { NodePaging, SearchApi } from '@alfresco/js-api';
 import { of } from 'rxjs';
+import { getTitleElementText } from '../../testing/test-utils';
 
 describe('RecentFilesComponent', () => {
   let fixture: ComponentFixture<RecentFilesComponent>;
@@ -99,4 +100,13 @@ describe('RecentFilesComponent', () => {
       location: 'recent-files'
     });
   });
+
+  it('should set title based on selectedRowItemsCount', () => {
+    fixture.detectChanges();
+    expect(getTitleElementText(fixture)).toBe('APP.BROWSE.RECENT.TITLE');
+
+    component.selectedRowItemsCount = 5;
+    fixture.detectChanges();
+    expect(getTitleElementText(fixture)).toBe('APP.HEADER.SELECTED');
+  });
 });

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

@@ -30,6 +30,7 @@
             [multiselect]="true"
             [sorting]="['name', 'asc']"
             [node]="data"
+            [displayCheckboxesOnHover]="true"
             [imageResolver]="imageResolver"
             [isResizingEnabled]="true"
             [blurOnResize]="false"

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

@@ -40,6 +40,7 @@
             [multiselect]="true"
             [sortingMode]="'server'"
             [sorting]="sorting"
+            [displayCheckboxesOnHover]="true"
             [imageResolver]="imageResolver"
             [isResizingEnabled]="true"
             [blurOnResize]="false"

projects/aca-content/src/lib/components/shared-files/shared-files.component.html

@@ -1,6 +1,9 @@
 <aca-page-layout>
   <div class="aca-page-layout-header">
-    <h1 class="aca-page-title">{{ 'APP.BROWSE.SHARED.TITLE' | translate }}</h1>
+    <h1 class="aca-page-title">
+      {{ (selectedRowItemsCount < 1 ? 'APP.BROWSE.SHARED.TITLE' : 'APP.HEADER.SELECTED') | translate: { count: selectedRowItemsCount } }}
+    </h1>
+
     <aca-toolbar [items]="actions"></aca-toolbar>
   </div>
 
@@ -17,6 +20,8 @@
         [imageResolver]="imageResolver"
         [sortingMode]="'client'"
         [isResizingEnabled]="true"
+        [displayCheckboxesOnHover]="true"
+        (selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
         [blurOnResize]="false"
         (node-dblclick)="handleNodeClick($event)"
         (name-click)="handleNodeClick($event)"

projects/aca-content/src/lib/components/shared-files/shared-files.component.spec.ts

@@ -26,15 +26,28 @@ import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { CustomResourcesService } from '@alfresco/adf-content-services';
 import { SharedFilesComponent } from './shared-files.component';
 import { AppTestingModule } from '../../testing/app-testing.module';
-import { Router } from '@angular/router';
 import { BehaviorSubject, of, Subject } from 'rxjs';
 import { By } from '@angular/platform-browser';
 import { SharedLinkPaging } from '@alfresco/js-api';
 import { AppService } from '@alfresco/aca-shared';
+import { getTitleElementText } from '../../testing/test-utils';
+import { ActivatedRoute, Router } from '@angular/router';
 
 describe('SharedFilesComponent', () => {
   let fixture: ComponentFixture<SharedFilesComponent>;
   let page: SharedLinkPaging;
+  let component: SharedFilesComponent;
+  const routerMock = {
+    routerState: { root: '' },
+    url: 'shared-files'
+  };
+  const route = {
+    snapshot: {
+      data: {
+        sortingPreferenceKey: ''
+      }
+    }
+  };
 
   const appServiceMock = {
     appNavNarMode$: new BehaviorSubject('collapsed'),
@@ -45,11 +58,10 @@ describe('SharedFilesComponent', () => {
     TestBed.configureTestingModule({
       imports: [AppTestingModule, SharedFilesComponent],
       providers: [
+        { provide: ActivatedRoute, useValue: route },
         {
           provide: Router,
-          useValue: {
-            url: 'shared-files'
-          }
+          useValue: routerMock
         },
         {
           provide: AppService,
@@ -68,6 +80,16 @@ describe('SharedFilesComponent', () => {
     const customResourcesService = TestBed.inject(CustomResourcesService);
     spyOn(customResourcesService, 'loadSharedLinks').and.returnValue(of(page));
     fixture = TestBed.createComponent(SharedFilesComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should set title based on selectedRowItemsCount', () => {
+    fixture.detectChanges();
+    expect(getTitleElementText(fixture)).toBe('APP.BROWSE.SHARED.TITLE');
+
+    component.selectedRowItemsCount = 5;
+    fixture.detectChanges();
+    expect(getTitleElementText(fixture)).toBe('APP.HEADER.SELECTED');
   });
 
   // TODO: needs better testing strategy

projects/aca-content/src/lib/components/trashcan/trashcan.component.html

@@ -1,6 +1,9 @@
 <aca-page-layout>
   <div class="aca-page-layout-header">
-    <h1 class="aca-page-title">{{ 'APP.BROWSE.TRASHCAN.TITLE' | translate }}</h1>
+    <h1 class="aca-page-title">
+      {{ (selectedRowItemsCount < 1 ? 'APP.BROWSE.TRASHCAN.TITLE' : 'APP.HEADER.SELECTED') | translate: { count: selectedRowItemsCount } }}
+    </h1>
+
     <aca-toolbar [items]="actions"></aca-toolbar>
   </div>
 
@@ -16,6 +19,8 @@
         [navigate]="false"
         [sortingMode]="'client'"
         [imageResolver]="imageResolver"
+        [displayCheckboxesOnHover]="true"
+        (selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
         [sorting]="['archivedAt', 'desc']"
         [isResizingEnabled]="true"
         [blurOnResize]="false"

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

@@ -26,6 +26,7 @@ import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { AlfrescoApiService } from '@alfresco/adf-core';
 import { TrashcanComponent } from './trashcan.component';
 import { AppTestingModule } from '../../testing/app-testing.module';
+import { getTitleElementText } from '../../testing/test-utils';
 
 describe('TrashcanComponent', () => {
   let fixture: ComponentFixture<TrashcanComponent>;
@@ -54,4 +55,13 @@ describe('TrashcanComponent', () => {
     await fixture.whenStable();
     expect(fixture.nativeElement.querySelector('adf-document-list')).not.toBeNull();
   });
+
+  it('should set title based on selectedRowItemsCount', () => {
+    fixture.detectChanges();
+    expect(getTitleElementText(fixture)).toBe('APP.BROWSE.TRASHCAN.TITLE');
+
+    component.selectedRowItemsCount = 5;
+    fixture.detectChanges();
+    expect(getTitleElementText(fixture)).toBe('APP.HEADER.SELECTED');
+  });
 });

projects/aca-content/src/lib/testing/test-utils.ts

@@ -0,0 +1,29 @@
+/*!
+ * Copyright © 2005-2024 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 { ComponentFixture } from '@angular/core/testing';
+
+export const getTitleElementText = (fixture: ComponentFixture<any>): string => {
+  return fixture.nativeElement.querySelector('.aca-page-title').innerText.trim();
+};

projects/aca-content/src/lib/ui/theme.scss

@@ -85,6 +85,14 @@ mat-icon {
     height: 24px;
     width: 24px;
   }
+
+  #{$mat-checkbox-box}:has(#{$mat-checkbox-native-control}):hover,
+  #{$mat-checkbox-box}:has(#{$mat-checkbox-native-control}) {
+    #{$mat-checkbox-native-control}:enabled ~ #{$mat-checkbox-background}:is(div) {
+      border-color: var(--theme-blue-checkbox-color);
+      background-color: var(--theme-blue-checkbox-color);
+    }
+  }
 }
 
 #{$mat-switch}:is(button)#{$mat-switch-selected}#{$mat-switch-checked} #{$mat-switch-handle-track} #{$mat-switch-handle}::after {
@@ -194,6 +202,43 @@ mat-toolbar#{$mat-toolbar}#{$mat-toolbar-single-row} {
   }
 }
 
+.adf-datatable-row {
+  .adf-datatable-checkbox {
+    #{$mat-checkbox} label {
+      display: none;
+    }
+  }
+}
+
+.adf-datatable-list {
+  .adf-datatable-row:is(adf-datatable-row) {
+    &:focus {
+      outline: 1px solid var(--theme-blue-checkbox-color);
+    }
+
+    .adf-cell-value:focus {
+      outline: 1px solid var(--theme-blue-checkbox-color);
+    }
+
+    .adf-datatable-cell-header:focus {
+      outline: 1px solid var(--theme-blue-checkbox-color);
+    }
+
+    .adf-datatable-link:hover {
+      color: var(--theme-blue-checkbox-color);
+    }
+  }
+
+  .adf-datatable-body {
+    .adf-datatable-row:is(adf-datatable-row) {
+      &.adf-is-selected,
+      &.adf-is-selected:hover {
+        background-color: var(--theme-blue-active-table-row-color);
+      }
+    }
+  }
+}
+
 .adf-property-field {
   .adf-textitem-edit-icon#{$mat-icon} {
     color: var(--theme-secondary-text);
@@ -318,11 +363,3 @@ adf-dynamic-component {
     min-width: 160px;
   }
 }
-
-.adf-datatable-row {
-  .adf-datatable-checkbox {
-    #{$mat-checkbox} label {
-      display: none;
-    }
-  }
-}

projects/aca-content/src/lib/ui/variables/variables.scss

@@ -25,6 +25,8 @@ $grey-background: rgba(33, 33, 33, 0.12);
 $grey-text-background: rgba(33, 33, 33, 0.05);
 $grey-hover-background: rgba(33, 33, 33, 0.24);
 $blue-save-button-background: #1f74db;
+$blue-checkbox-background: rgb(10,96,206);
+$blue-active-table-row: rgb(10,96,206, 0.24);
 $black-heading: #4e4c4c;
 $theme-dropdown-background: darken($background-color, 5%);
 $theme-dropdown-background-hover: darken($background-color, 10%);
@@ -69,6 +71,8 @@ $defaults: (
   --theme-grey-hover-background-color: $grey-hover-background,
   --theme-blue-button-color: $blue-save-button-background,
   --theme-info-snackbar-background: $info-snackbar-background,
+  --theme-blue-checkbox-color: $blue-checkbox-background,
+  --theme-blue-active-table-row-color: $blue-active-table-row,
   --theme-heading-color: $black-heading,
   --theme-dropdown-color: $theme-dropdown-background,
   --theme-dropdown-background-hover: $theme-dropdown-background-hover,

projects/aca-playwright-shared/src/page-objects/components/dataTable/data-table.component.ts

@@ -242,6 +242,7 @@ export class DataTableComponent extends BaseComponent {
     const isSelected = await this.isRowSelected(name);
     if (!isSelected) {
       let row = this.getRowByName(name);
+      await row.hover();
       await row.locator('.mat-mdc-checkbox').click();
       await row.locator('.mat-mdc-checkbox-checked').waitFor({ state: 'attached' });
     }
@@ -250,6 +251,7 @@ export class DataTableComponent extends BaseComponent {
   async selectMultiItem(...names: string[]): Promise<void> {
     for (const name of names) {
       let row = this.getRowByName(name);
+      await row.hover();
       await row.locator('.mat-mdc-checkbox').click();
       await row.locator('.mat-mdc-checkbox-checked').waitFor({ state: 'attached' });
       await this.page.waitForTimeout(1000);

projects/aca-shared/src/lib/components/document-base-page/document-base-page.component.ts

@@ -68,6 +68,7 @@ export abstract class PageComponent implements OnInit, OnDestroy, OnChanges {
   filterSorting = 'name-asc';
   createActions: Array<ContentActionRef> = [];
   isSmallScreen = false;
+  selectedRowItemsCount = 0;
 
   protected extensions = inject(AppExtensionService);
   protected content = inject(DocumentBasePageService);
@@ -159,6 +160,10 @@ export abstract class PageComponent implements OnInit, OnDestroy, OnChanges {
     }
   }
 
+  onSelectedItemsCountChanged(count: number) {
+    this.selectedRowItemsCount = count;
+  }
+
   getParentNodeId(): string {
     return this.node ? this.node.id : null;
   }