[ACS-5601] Add badges to custom name column (#3450)

* [ACS-5601] Add badges to name column component

* [ACS-5601] Add on click handler to column badges

* [ACS-5601] Fix badge hover color

* [ACS-5601] Restore modal configuration, prettier fixes

* [ACS-5601] Add missing tooltip translation

* [ACS-5601] Add process content services to extension service

* [ACS-5601] Add adf dynamic component to custom name column

* [ACS-5601]  Add missing dosc and unit tests

* [ACS-5601] Post rebase package lock update

* [ACS-5601] CR fixes

* [ACS-5601] Unit test fix

* [ACS-5601] CR fix

* [ACS-5601] Fix unit test, add contrast gray to badges

* [ACS-5601] fix fail test and exclude one test

* [ACS-5601] fix fail test and exclude one test

---------

Co-authored-by: akash.rathod@hyland.com <akash.rathod@hyland.com>

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

@@ -1,25 +1,30 @@
-<div
-  class="aca-custom-name-column"
-  [ngClass]="{
-    'aca-name-column-container': isFile && isFileWriteLocked
-  }"
->
-  <span
-    role="link"
-    tabindex=0
-    [attr.aria-label]="
-      (isFile ? 'CUSTOM_NAME_COLUMN.ACCESSIBILITY.FILE_LINK_ARIA_LABEL' : 'CUSTOM_NAME_COLUMN.ACCESSIBILITY.FOLDER_LINK_ARIA_LABEL')
-        | translate: { name: displayText$ | async }
-    "
-    class="adf-datatable-cell-value"
-    title="{{ node | adfNodeNameTooltip }}"
-    (click)="onLinkClick($event)"
-    (keyup.enter)="onLinkClick($event)"
-  >
-    {{ displayText$ | async }}
-  </span>
+<div class="aca-custom-name-column">
+  <div [ngClass]="{ 'aca-name-column-container': isFile && isFileWriteLocked }">
+    <span
+      role="link"
+      tabindex="0"
+      [attr.aria-label]="
+        (isFile ? 'CUSTOM_NAME_COLUMN.ACCESSIBILITY.FILE_LINK_ARIA_LABEL' : 'CUSTOM_NAME_COLUMN.ACCESSIBILITY.FOLDER_LINK_ARIA_LABEL')
+          | translate : { name: displayText$ | async }
+      "
+      class="adf-datatable-cell-value"
+      title="{{ node | adfNodeNameTooltip }}"
+      (click)="onLinkClick($event)"
+      (keyup.enter)="onLinkClick($event)"
+    >
+      {{ displayText$ | async }}
+    </span>
 
-  <ng-container *ngIf="isFile && isFileWriteLocked">
-    <aca-locked-by [node]="context.row.node"></aca-locked-by>
-  </ng-container>
+    <ng-container *ngIf="isFile && isFileWriteLocked">
+      <aca-locked-by [node]="context.row.node"></aca-locked-by>
+    </ng-container>
+  </div>
+  <div class="aca-name-column-badges">
+    <ng-container *ngFor="let badge of badges">
+      <adf-dynamic-component *ngIf="badge.component; else iconBadge" [id]="badge.component" [data]="{ node }"></adf-dynamic-component>
+      <ng-template #iconBadge>
+        <adf-icon class="adf-datatable-cell-badge" [title]="badge.tooltip | translate" [value]="badge.icon" (click)="onBadgeClick(badge)"></adf-icon>
+      </ng-template>
+    </ng-container>
+  </div>
 </div>

projects/aca-content/src/lib/components/dl-custom-components/name-column/name-column.component.scss

@@ -1,6 +1,16 @@
 .aca-custom-name-column {
-  display: block;
+  display: flex;
   align-items: center;
+  justify-content: space-between;
+  width: 100%;
+
+  .aca-name-column-badges {
+    display: flex;
+
+    .adf-datatable-cell-badge {
+      color: var(--theme-contrast-gray);
+    }
+  }
 
   .aca-name-column-container {
     aca-locked-by {
@@ -17,3 +27,11 @@
     }
   }
 }
+
+.adf-datatable-content-cell.adf-name-column.aca-custom-name-column {
+  position: unset;
+}
+
+.adf-datatable-list .adf-datatable-link:hover .aca-name-column-badges {
+  color: var(--adf-theme-foreground-text-color);
+}

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

@@ -28,19 +28,44 @@ import { StoreModule } from '@ngrx/store';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HttpClientModule } from '@angular/common/http';
 import { TranslateModule } from '@ngx-translate/core';
+import { AppExtensionService } from '@alfresco/aca-shared';
+import { of } from 'rxjs';
+import { ContentActionType } from '@alfresco/adf-extensions';
+import { By } from '@angular/platform-browser';
 
 describe('CustomNameColumnComponent', () => {
   let fixture: ComponentFixture<CustomNameColumnComponent>;
   let component: CustomNameColumnComponent;
+  let appExtensionService: AppExtensionService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientModule, TranslateModule.forRoot(), CustomNameColumnComponent, StoreModule.forRoot({ app: () => {} }, { initialState: {} })],
+      imports: [
+        HttpClientModule,
+        TranslateModule.forRoot(),
+        CustomNameColumnComponent,
+        StoreModule.forRoot(
+          { app: (state) => state },
+          {
+            initialState: {
+              app: {
+                selection: {
+                  nodes: [],
+                  libraries: [],
+                  isEmpty: true,
+                  count: 0
+                }
+              }
+            }
+          }
+        )
+      ],
       providers: [Actions]
     });
 
     fixture = TestBed.createComponent(CustomNameColumnComponent);
     component = fixture.componentInstance;
+    appExtensionService = TestBed.inject(AppExtensionService);
   });
 
   it('should not render lock element if file is not locked', () => {
@@ -114,4 +139,55 @@ describe('CustomNameColumnComponent', () => {
     component.onLinkClick(event);
     expect(event.stopPropagation).toHaveBeenCalled();
   });
+
+  describe('Name column badges', () => {
+    beforeEach(() => {
+      component.context = {
+        row: {
+          node: {
+            entry: {
+              isFile: true,
+              id: 'nodeId'
+            }
+          },
+          getValue: (key: string) => key
+        }
+      };
+    });
+
+    it('should get badges when component initializes', () => {
+      spyOn(appExtensionService, 'getBadges').and.returnValue(
+        of([{ id: 'test', type: ContentActionType.custom, icon: 'warning', tooltip: 'test tooltip' }])
+      );
+      component.ngOnInit();
+      fixture.detectChanges();
+      const badges = fixture.debugElement.queryAll(By.css('.adf-datatable-cell-badge')).map((badge) => badge.nativeElement);
+      expect(appExtensionService.getBadges).toHaveBeenCalled();
+      expect(badges.length).toBe(1);
+      expect(badges[0].innerText).toBe('warning');
+      expect(badges[0].attributes['title'].value).toBe('test tooltip');
+    });
+
+    it('should call provided handler on click', () => {
+      spyOn(appExtensionService, 'runActionById');
+      spyOn(appExtensionService, 'getBadges').and.returnValue(
+        of([{ id: 'test', type: ContentActionType.custom, icon: 'warning', tooltip: 'test tooltip', actions: { click: 'test' } }])
+      );
+      component.ngOnInit();
+      fixture.detectChanges();
+      const badges = fixture.debugElement.queryAll(By.css('.adf-datatable-cell-badge')).map((badge) => badge.nativeElement);
+      badges[0].click();
+      expect(appExtensionService.runActionById).toHaveBeenCalledWith('test', component.context.row.node);
+    });
+
+    it('should render dynamic component when badge has one provided', () => {
+      spyOn(appExtensionService, 'getBadges').and.returnValue(
+        of([{ id: 'test', type: ContentActionType.custom, icon: 'warning', tooltip: 'test tooltip', component: 'test-id' }])
+      );
+      component.ngOnInit();
+      fixture.detectChanges();
+      const dynamicComponent = fixture.debugElement.query(By.css('adf-dynamic-component')).nativeElement;
+      expect(dynamicComponent).toBeDefined();
+    });
+  });
 });

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

@@ -28,13 +28,15 @@ import { Actions, ofType } from '@ngrx/effects';
 import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 import { NodeActionTypes } from '@alfresco/aca-shared/store';
-import { LockedByComponent, isLocked } from '@alfresco/aca-shared';
+import { LockedByComponent, isLocked, AppExtensionService, Badge } from '@alfresco/aca-shared';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
+import { IconModule } from '@alfresco/adf-core';
+import { ExtensionsModule } from '@alfresco/adf-extensions';
 
 @Component({
   standalone: true,
-  imports: [CommonModule, TranslateModule, LockedByComponent, ContentPipeModule],
+  imports: [CommonModule, TranslateModule, LockedByComponent, ContentPipeModule, IconModule, ExtensionsModule],
   selector: 'aca-custom-name-column',
   templateUrl: './name-column.component.html',
   styleUrls: ['./name-column.component.scss'],
@@ -48,8 +50,15 @@ export class CustomNameColumnComponent extends NameColumnComponent implements On
 
   isFile: boolean;
   isFileWriteLocked: boolean;
+  badges: Badge[];
 
-  constructor(element: ElementRef, private cd: ChangeDetectorRef, private actions$: Actions, private nodesService: NodesApiService) {
+  constructor(
+    element: ElementRef,
+    private cd: ChangeDetectorRef,
+    private actions$: Actions,
+    private nodesService: NodesApiService,
+    private appExtensionService: AppExtensionService
+  ) {
     super(element, nodesService);
   }
 
@@ -86,6 +95,13 @@ export class CustomNameColumnComponent extends NameColumnComponent implements On
         this.isFileWriteLocked = isLocked(this.node);
         this.cd.detectChanges();
       });
+
+    this.appExtensionService
+      .getBadges(this.node)
+      .pipe(takeUntil(this.onDestroy$$))
+      .subscribe((badges) => {
+        this.badges = badges;
+      });
   }
 
   onLinkClick(event: Event) {
@@ -99,4 +115,8 @@ export class CustomNameColumnComponent extends NameColumnComponent implements On
     this.onDestroy$$.next(true);
     this.onDestroy$$.complete();
   }
+
+  onBadgeClick(badge: Badge) {
+    this.appExtensionService.runActionById(badge.actions?.click, this.node);
+  }
 }