[ACS-5611] Add custom metadata side panels as new extension feature (#3466)

* [ACS-5611] Add custom metadata panels as new extensions feature

* [ACS-5611] Add custom metadata panels unit tests

* [ACS-5611] Minor fixes

* [ACS-5611] Text ellipsis for name column to always display badges

* [ACS-5611] Use latest ADF and JS-API

* [ACS-5611] Unit test fix

* [ACS-5611] Click action only if exists

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

@@ -1,5 +1,5 @@
 <div class="aca-custom-name-column">
-  <div [ngClass]="{ 'aca-name-column-container': isFile && isFileWriteLocked }">
+  <div class="aca-name-column-container">
     <span
       role="link"
       tabindex="0"

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

@@ -13,6 +13,10 @@
   }
 
   .aca-name-column-container {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
     aca-locked-by {
       display: flex;
       align-items: center;

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

@@ -117,6 +117,8 @@ export class CustomNameColumnComponent extends NameColumnComponent implements On
   }
 
   onBadgeClick(badge: Badge) {
-    this.appExtensionService.runActionById(badge.actions?.click, this.node);
+    if (badge.actions?.click) {
+      this.appExtensionService.runActionById(badge.actions?.click, this.node);
+    }
   }
 }

projects/aca-content/src/lib/components/info-drawer/metadata-tab/metadata-tab.component.spec.ts

@@ -32,7 +32,8 @@ import { AppState, EditOfflineAction, SetInfoDrawerMetadataAspectAction } from '
 import { By } from '@angular/platform-browser';
 import { AppExtensionService, NodePermissionService } from '@alfresco/aca-shared';
 import { Actions } from '@ngrx/effects';
-import { Subject } from 'rxjs';
+import { of, Subject } from 'rxjs';
+import { ContentActionType } from '@alfresco/adf-extensions';
 
 describe('MetadataTabComponent', () => {
   let fixture: ComponentFixture<MetadataTabComponent>;
@@ -42,6 +43,7 @@ describe('MetadataTabComponent', () => {
   let extensions: AppExtensionService;
   let nodePermissionService: NodePermissionService;
   let actions$: Subject<EditOfflineAction>;
+  let appExtensionService: AppExtensionService;
 
   const presets = {
     default: {
@@ -61,6 +63,7 @@ describe('MetadataTabComponent', () => {
       ]
     });
     nodePermissionService = TestBed.inject(NodePermissionService);
+    appExtensionService = TestBed.inject(AppExtensionService);
     spyOn(nodePermissionService, 'check').and.callFake((source: Node, permissions: string[]) => {
       return permissions.some((permission) => source.allowableOperations.includes(permission));
     });
@@ -270,4 +273,24 @@ describe('MetadataTabComponent', () => {
       expect(initialState.componentInstance.displayAspect).toBe('EXIF');
     });
   });
+
+  describe('Custom metadata panels', () => {
+    beforeEach(() => {
+      fixture = TestBed.createComponent(MetadataTabComponent);
+      component = fixture.componentInstance;
+    });
+
+    it('should get custom metadata panels', (done) => {
+      spyOn(appExtensionService, 'getCustomMetadataPanels').and.returnValue(
+        of([{ id: 'test', type: ContentActionType.custom, title: 'testTitle', component: 'test-id' }])
+      );
+      component.ngOnInit();
+      component.customPanels.subscribe((panels) => {
+        expect(panels.length).toBe(1);
+        expect(panels[0].panelTitle).toEqual('testTitle');
+        expect(panels[0].component).toEqual('test-id');
+        done();
+      });
+    });
+  });
 });

projects/aca-content/src/lib/components/info-drawer/metadata-tab/metadata-tab.component.ts

@@ -29,8 +29,8 @@ import { AppStore, EditOfflineAction, infoDrawerMetadataAspect, NodeActionTypes
 import { AppConfigService, NotificationService } from '@alfresco/adf-core';
 import { Observable, Subject } from 'rxjs';
 import { Store } from '@ngrx/store';
-import { ContentMetadataModule, ContentMetadataService } from '@alfresco/adf-content-services';
-import { filter, takeUntil } from 'rxjs/operators';
+import { ContentMetadataModule, ContentMetadataService, ContentMetadataCustomPanel } from '@alfresco/adf-content-services';
+import { filter, map, takeUntil } from 'rxjs/operators';
 import { CommonModule } from '@angular/common';
 import { Actions, ofType } from '@ngrx/effects';
 
@@ -44,6 +44,7 @@ import { Actions, ofType } from '@ngrx/effects';
       [preset]="'custom'"
       [node]="node"
       [displayAspect]="displayAspect$ | async"
+      [customPanels]="customPanels | async"
       [(editable)]="editable"
     >
     </adf-content-metadata-card>
@@ -60,6 +61,7 @@ export class MetadataTabComponent implements OnInit, OnDestroy {
   displayAspect$: Observable<string>;
   canUpdateNode = false;
   editable = false;
+  customPanels: Observable<ContentMetadataCustomPanel[]>;
 
   constructor(
     private permission: NodePermissionService,
@@ -93,6 +95,14 @@ export class MetadataTabComponent implements OnInit, OnDestroy {
           this.editable = false;
         }
       });
+    this.customPanels = this.extensions.getCustomMetadataPanels({ entry: this.node }).pipe(
+      map((panels) => {
+        return panels.map((panel) => {
+          return { panelTitle: panel.title, component: panel.component };
+        });
+      }),
+      takeUntil(this.onDestroy$)
+    );
   }
 
   ngOnDestroy() {