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

2025-07-24 17:31:52 +00:00 · 2024-07-04 08:26:47 +02:00
parent b0c1f537df
commit 457ddb2e39
18 changed files with 191 additions and 12 deletions
--- a/projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.html
+++ b/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>

@@ -19,6 +21,7 @@
        [sortingMode]="'client'"
        (node-dblclick)="handleNodeClick($event)"
        [imageResolver]="imageResolver"
+        (selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
        [isResizingEnabled]="true"
        [blurOnResize]="false"
        (name-click)="handleNodeClick($event)"
--- a/projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.spec.ts
+++ b/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', () => {
--- a/projects/aca-content/src/lib/components/favorites/favorites.component.html
+++ b/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,7 @@
        [sorting]="['modifiedAt', 'desc']"
        [sortingMode]="'client'"
        [imageResolver]="imageResolver"
+        (selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
        [isResizingEnabled]="true"
        [blurOnResize]="false"
        (node-dblclick)="handleNodeClick($event)"
--- a/projects/aca-content/src/lib/components/favorites/favorites.component.spec.ts
+++ b/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');
+  });
 });
--- a/projects/aca-content/src/lib/components/files/files.component.html
+++ b/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>

@@ -31,6 +36,7 @@
          [blurOnResize]="false"
          (node-dblclick)="handleNodeClick($event)"
          (name-click)="handleNodeClick($event)"
+          (selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
          (filterSelection)="onFilterSelected($event)"
          (error)="onError()"
        >
--- a/projects/aca-content/src/lib/components/libraries/libraries.component.html
+++ b/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>

@@ -18,6 +20,7 @@
        [sortingMode]="'client'"
        [imageResolver]="imageResolver"
        [isResizingEnabled]="true"
+        (selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
        [blurOnResize]="false"
        (node-dblclick)="handleNodeClick($event)"
        (name-click)="handleNodeClick($event)"
--- a/projects/aca-content/src/lib/components/libraries/libraries.component.spec.ts
+++ b/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();
--- a/projects/aca-content/src/lib/components/recent-files/recent-files.component.html
+++ b/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,7 @@
        [sortingMode]="'client'"
        [imageResolver]="imageResolver"
        [isResizingEnabled]="true"
+        (selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
        [blurOnResize]="false"
        (node-dblclick)="handleNodeClick($event)"
        (name-click)="handleNodeClick($event)"
--- a/projects/aca-content/src/lib/components/recent-files/recent-files.component.spec.ts
+++ b/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');
+  });
 });
--- a/projects/aca-content/src/lib/components/shared-files/shared-files.component.html
+++ b/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,7 @@
        [imageResolver]="imageResolver"
        [sortingMode]="'client'"
        [isResizingEnabled]="true"
+        (selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
        [blurOnResize]="false"
        (node-dblclick)="handleNodeClick($event)"
        (name-click)="handleNodeClick($event)"
--- a/projects/aca-content/src/lib/components/shared-files/shared-files.component.spec.ts
+++ b/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
--- a/projects/aca-content/src/lib/components/trashcan/trashcan.component.html
+++ b/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,7 @@
        [navigate]="false"
        [sortingMode]="'client'"
        [imageResolver]="imageResolver"
+        (selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
        [sorting]="['archivedAt', 'desc']"
        [isResizingEnabled]="true"
        [blurOnResize]="false"
--- a/projects/aca-content/src/lib/components/trashcan/trashcan.component.spec.ts
+++ b/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');
+  });
 });