[ACS-8424][Bulk Legal Hold] Add Badge for items

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

@@ -0,0 +1,17 @@
+<div class="aca-name-column-badges-container">
+    <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>

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

@@ -0,0 +1,7 @@
+.aca-name-column-badges-container {
+  display: flex;
+
+  .adf-datatable-cell-badge {
+    color: var(--theme-secondary-text);
+  }
+}

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

@@ -0,0 +1,115 @@
+/*!
+ * 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 { NameColumnBadgesComponent } from './name-column-badges.component';
+import { AppExtensionService } from '@alfresco/aca-shared';
+import { TranslateModule } from '@ngx-translate/core';
+import { AuthModule } from '@alfresco/adf-core';
+import { Actions } from '@ngrx/effects';
+import { NodeEntry } from '@alfresco/js-api';
+import { of } from 'rxjs';
+import { By } from '@angular/platform-browser';
+import { ContentActionType } from '@alfresco/adf-extensions';
+import { HttpClientModule } from '@angular/common/http';
+import { StoreModule } from '@ngrx/store';
+
+const mockNode = {
+  entry: {
+    isFile: true,
+    id: 'nodeId'
+  }
+} as NodeEntry;
+
+describe('NameColumnBadgesComponent', () => {
+  let fixture: ComponentFixture<NameColumnBadgesComponent>;
+  let component: NameColumnBadgesComponent;
+  let appExtensionService: AppExtensionService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot(),
+        AuthModule.forRoot(),
+        HttpClientModule,
+        StoreModule.forRoot(
+          { app: (state) => state },
+          {
+            initialState: {
+              app: {
+                selection: {
+                  nodes: [],
+                  libraries: [],
+                  isEmpty: true,
+                  count: 0
+                }
+              }
+            }
+          }
+        )
+      ],
+      providers: [Actions]
+    });
+
+    fixture = TestBed.createComponent(NameColumnBadgesComponent);
+    component = fixture.componentInstance;
+    appExtensionService = TestBed.inject(AppExtensionService);
+    component.node = mockNode;
+  });
+
+  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.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-badges/name-column-badges.component.ts

@@ -0,0 +1,72 @@
+/*!
+ * 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 { AppExtensionService, Badge } from '@alfresco/aca-shared';
+import { IconComponent } from '@alfresco/adf-core';
+import { DynamicExtensionComponent } from '@alfresco/adf-extensions';
+import { NodeEntry } from '@alfresco/js-api';
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'aca-name-column-badges',
+  templateUrl: './name-column-badges.component.html',
+  styleUrls: ['./name-column-badges.component.scss'],
+  host: { class: 'aca-name-column-badges' },
+  encapsulation: ViewEncapsulation.None,
+  imports: [CommonModule, TranslateModule, DynamicExtensionComponent, IconComponent],
+  standalone: true
+})
+export class NameColumnBadgesComponent implements OnInit, OnDestroy {
+  private onDestroy$ = new Subject<boolean>();
+
+  @Input() node: NodeEntry;
+
+  badges: Badge[];
+
+  constructor(private appExtensionService: AppExtensionService) {}
+
+  ngOnInit() {
+    this.appExtensionService
+      .getBadges(this.node)
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe((badges) => {
+        this.badges = badges;
+      });
+  }
+
+  ngOnDestroy() {
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
+  }
+
+  onBadgeClick(badge: Badge) {
+    if (badge.actions?.click) {
+      this.appExtensionService.runActionById(badge.actions?.click, this.node);
+    }
+  }
+}

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

@@ -19,12 +19,5 @@
       <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>
+  <aca-name-column-badges [node]="node"></aca-name-column-badges>
 </div>

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

@@ -4,14 +4,6 @@
   justify-content: space-between;
   width: 100%;
 
-  .aca-name-column-badges {
-    display: flex;
-
-    .adf-datatable-cell-badge {
-      color: var(--theme-secondary-text);
-    }
-  }
-
   .aca-name-column-container {
     white-space: nowrap;
     overflow: hidden;

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

@@ -28,23 +28,31 @@ 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 { AuthModule } from '@alfresco/adf-core';
+import { Component, Input } from '@angular/core';
+import { NodeEntry } from '@alfresco/js-api';
+
+@Component({
+  selector: 'aca-name-column-badges',
+  standalone: true,
+  template: ''
+})
+class MockNameColumnBadgesComponent {
+  @Input() node: NodeEntry;
+}
 
 describe('CustomNameColumnComponent', () => {
   let fixture: ComponentFixture<CustomNameColumnComponent>;
   let component: CustomNameColumnComponent;
-  let appExtensionService: AppExtensionService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
         HttpClientModule,
         TranslateModule.forRoot(),
         CustomNameColumnComponent,
+        MockNameColumnBadgesComponent,
         AuthModule.forRoot(),
         StoreModule.forRoot(
           { app: (state) => state },
@@ -67,7 +75,6 @@ describe('CustomNameColumnComponent', () => {
 
     fixture = TestBed.createComponent(CustomNameColumnComponent);
     component = fixture.componentInstance;
-    appExtensionService = TestBed.inject(AppExtensionService);
   });
 
   it('should not render lock element if file is not locked', () => {
@@ -142,54 +149,9 @@ describe('CustomNameColumnComponent', () => {
     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();
-    });
+  it('should pass node to badge component', () => {
+    const badgeElement = fixture.debugElement.query(By.css('aca-name-column-badges'));
+    expect(badgeElement).not.toBe(null);
+    expect(badgeElement.componentInstance.node).toBe(component.node);
   });
 });