[ACS-5601] Add badges to custom name column

extension.schema.json

@@ -640,6 +640,34 @@
         "$ref": "node_modules/@alfresco/adf-core/app.config.schema.json#/definitions/search-configuration"
         }
       ]
+    },
+    "badges": {
+      "description": "List of badges to display in the name column",
+      "type": "array",
+      "items": { "$ref": "#/definitions/badge" },
+      "minItems": 1
+    },
+    "badge": {
+      "type": "object",
+      "required": ["id", "icon", "tooltip"],
+      "properties": {
+        "id": {
+          "description": "Unique identifier. Must be in the format '[namespace]:[name]'.",
+          "type": "string"
+        },
+        "icon": {
+          "description": "Badge icon to display.",
+          "type": "string"
+        },
+        "tooltip": {
+          "description": "Badge tooltip to display on hover.",
+          "type": "string"
+        },
+        "component": {
+          "description": "Custom component id to display",
+          "type": "string"
+        }
+      }
     }
   },
 

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,12 @@
 .aca-custom-name-column {
-  display: block;
+  display: flex;
   align-items: center;
+  justify-content: space-between;
+  width: 100%;
+
+  .aca-name-column-badges {
+    display: flex;
+  }
 
   .aca-name-column-container {
     aca-locked-by {
@@ -17,3 +23,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,38 @@ 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';
+import { INITIAL_APP_STATE } from '../../../store/initial-state';
 
 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: INITIAL_APP_STATE
+            }
+          }
+        )
+      ],
       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 +133,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);
+  }
 }

projects/aca-shared/src/lib/models/types.ts

@@ -22,6 +22,7 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { ContentActionRef } from '@alfresco/adf-extensions';
 import { Route } from '@angular/router';
 
 export interface SettingsGroupRef {
@@ -45,3 +46,7 @@ export interface SettingsParameterRef {
 export interface ExtensionRoute extends Route {
   parentRoute?: string;
 }
+
+export interface Badge extends ContentActionRef {
+  tooltip: string;
+}

projects/aca-shared/src/lib/services/app.extension.service.spec.ts

@@ -43,6 +43,7 @@ import { provideMockStore } from '@ngrx/store/testing';
 import { hasQuickShareEnabled } from '@alfresco/aca-shared/rules';
 import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
+import { NodeEntry } from '@alfresco/js-api';
 
 describe('AppExtensionService', () => {
   let service: AppExtensionService;
@@ -1677,4 +1678,62 @@ describe('AppExtensionService', () => {
       done();
     });
   });
+
+  it('should get badges from config', (done) => {
+    extensions.setEvaluators({
+      'action.enabled': () => true
+    });
+
+    applyConfig({
+      $id: 'test',
+      $name: 'test',
+      $version: '1.0.0',
+      $license: 'MIT',
+      $vendor: 'Good company',
+      $runtime: '1.5.0',
+      features: {
+        badges: [
+          {
+            id: 'action1-id',
+            icon: 'warning',
+            tooltip: 'test tooltip',
+            type: 'custom',
+            rules: {
+              visible: 'action.enabled'
+            }
+          },
+          {
+            id: 'action2-id',
+            icon: 'settings',
+            tooltip: 'test tooltip2',
+            type: 'custom',
+            rules: {
+              visible: 'action.enabled'
+            }
+          }
+        ]
+      }
+    });
+
+    const node: NodeEntry = {
+      entry: {
+        id: 'testId',
+        name: 'testName',
+        nodeType: 'test',
+        isFile: true,
+        isFolder: false,
+        modifiedAt: undefined,
+        createdAt: undefined,
+        modifiedByUser: undefined,
+        createdByUser: undefined
+      }
+    };
+
+    service.getBadges(node).subscribe((badges) => {
+      expect(badges.length).toBe(2);
+      expect(badges[0].id).toEqual('action1-id');
+      expect(badges[1].id).toEqual('action2-id');
+      done();
+    });
+  });
 });