ACS-8658: fix search icon for lock files (#4050)

* fix search icon for lock files

* clean tests

* clean template

projects/aca-content/src/lib/components/dl-custom-components/thumbnail-column/thumbnail-column.component.html

@@ -1,2 +1,10 @@
 <mat-icon class="adf-datatable-selected" *ngIf="isSelected" svgIcon="selected"></mat-icon>
-<img *ngIf="!isSelected" class="adf-datatable-center-img-ie" [src]="thumbnailUrl" [alt]="tooltip" [matTooltip]="tooltip" />
+<ng-container *ngIf="!isSelected">
+  <ng-container *ngIf="isIcon; else image">
+    <mat-icon>{{thumbnailUrl}}</mat-icon>
+  </ng-container>
+  <ng-template #image>
+    <img [src]="thumbnailUrl" [alt]="tooltip" [title]="tooltip" />
+  </ng-template>
+</ng-container>
+

projects/aca-content/src/lib/components/dl-custom-components/thumbnail-column/thumbnail-column.component.spec.ts

@@ -0,0 +1,112 @@
+/*!
+ * 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, TestBed } from '@angular/core/testing';
+import { ThumbnailColumnComponent } from './thumbnail-column.component';
+import { TranslationService } from '@alfresco/adf-core';
+
+describe('ThumbnailColumnComponent', () => {
+  let component: ThumbnailColumnComponent;
+  let fixture: ComponentFixture<ThumbnailColumnComponent>;
+  let translationServiceMock: any;
+
+  beforeEach(() => {
+    translationServiceMock = {
+      instant: jasmine.createSpy('instant').and.returnValue('Locked by')
+    };
+
+    TestBed.configureTestingModule({
+      imports: [ThumbnailColumnComponent],
+      providers: [{ provide: TranslationService, useValue: translationServiceMock }]
+    });
+
+    fixture = TestBed.createComponent(ThumbnailColumnComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should update thumbnailUrl and tooltip on context change', () => {
+    const context = {
+      row: { isSelected: true, node: { entry: { properties: { 'cm:lockOwner': { displayName: 'John Doe' } } } } },
+      data: { getValue: () => 'material-icons://icon_name' },
+      col: {}
+    };
+
+    component.ngOnChanges({ context: { currentValue: context, previousValue: null, firstChange: true, isFirstChange: () => true } });
+
+    expect(component.isIcon).toBeTrue();
+    expect(component.thumbnailUrl).toBe('icon_name');
+    expect(component.tooltip).toBe('Locked by John Doe');
+  });
+
+  it('should handle non-icon thumbnails', () => {
+    const context = {
+      row: { isSelected: true, node: { entry: { properties: { 'cm:lockOwner': { displayName: 'John Doe' } } } } },
+      data: { getValue: () => 'https://example.com/thumbnail.jpg' },
+      col: {}
+    };
+
+    component.ngOnChanges({ context: { currentValue: context, previousValue: null, firstChange: true, isFirstChange: () => true } });
+
+    expect(component.isIcon).toBeFalse();
+    expect(component.thumbnailUrl).toBe('https://example.com/thumbnail.jpg');
+    expect(component.tooltip).toBe('Locked by John Doe');
+  });
+
+  it('should clear thumbnailUrl and tooltip if context is null', () => {
+    component.ngOnChanges({ context: { currentValue: null, previousValue: {}, firstChange: false, isFirstChange: () => false } });
+
+    expect(component.thumbnailUrl).toBeNull();
+    expect(component.tooltip).toBeNull();
+  });
+
+  it('should return correct thumbnail from getThumbnail', () => {
+    const context = {
+      data: { getValue: () => 'thumbnail_url' },
+      row: {},
+      col: {}
+    };
+
+    const thumbnail = component['getThumbnail'](context);
+    expect(thumbnail).toBe('thumbnail_url');
+  });
+
+  it('should return correct tooltip from getToolTip', () => {
+    const context = {
+      row: { node: { entry: { properties: { 'cm:lockOwner': { displayName: 'John Doe' } } } } }
+    };
+
+    const tooltip = component.getToolTip(context);
+    expect(tooltip).toBe('Locked by John Doe');
+  });
+
+  it('should return empty tooltip if lockOwner is not present', () => {
+    const context = {
+      row: { node: { entry: { properties: {} } } }
+    };
+
+    const tooltip = component.getToolTip(context);
+    expect(tooltip).toBe('');
+  });
+});

projects/aca-content/src/lib/components/dl-custom-components/thumbnail-column/thumbnail-column.component.ts

@@ -26,11 +26,10 @@ import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation, inject }
 import { TranslationService } from '@alfresco/adf-core';
 import { NgIf } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
   standalone: true,
-  imports: [NgIf, MatIconModule, MatTooltipModule],
+  imports: [NgIf, MatIconModule],
   selector: 'aca-custom-thumbnail-column',
   templateUrl: './thumbnail-column.component.html',
   encapsulation: ViewEncapsulation.None
@@ -43,17 +42,25 @@ export class ThumbnailColumnComponent implements OnChanges {
 
   public thumbnailUrl?: string;
   public tooltip?: string;
+  public isIcon = false;
 
   get isSelected(): boolean {
-    return !!this.context.row.isSelected;
+    return !!this.context?.row?.isSelected;
   }
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.context) {
       const context = changes.context.currentValue;
 
       if (context) {
-        this.thumbnailUrl = this.getThumbnail(context);
+        const icon = this.getThumbnail(context);
+        if (icon?.startsWith('material-icons://')) {
+          this.isIcon = true;
+          this.thumbnailUrl = icon.replace('material-icons://', '');
+        } else {
+          this.isIcon = false;
+          this.thumbnailUrl = icon;
+        }
         this.tooltip = this.getToolTip(context);
       } else {
         this.thumbnailUrl = null;
@@ -62,11 +69,11 @@ export class ThumbnailColumnComponent implements OnChanges {
     }
   }
 
-  private getThumbnail({ data, row, col }): string {
+  getThumbnail({ data, row, col }): string {
     return data.getValue(row, col);
   }
 
-  private getToolTip({ row }): string {
+  getToolTip({ row }): string {
     const displayName = row.node?.entry?.properties?.['cm:lockOwner']?.displayName;
     return displayName ? `${this.translation.instant('APP.LOCKED_BY')} ${displayName}` : '';
   }