[ACS-5611] Add custom metadata side panels to metadata card component (#8974)

* [ACS-5611] Add custom panels to metadata card component

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

* [ACS-5611] CR fixes

* [ACS-5611] CR fixes

lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.html

@@ -10,7 +10,8 @@
             [displayAspect]="displayAspect"
             [preset]="preset"
             [displayTags]="displayTags"
-            [displayCategories]="displayCategories">
+            [displayCategories]="displayCategories"
+            [customPanels]="customPanels">
         </adf-content-metadata>
     </mat-card-content>
     <mat-card-footer class="adf-content-metadata-card-footer">

lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.ts

@@ -18,7 +18,7 @@
 import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { Node } from '@alfresco/js-api';
 import { NodeAspectService } from '../../../aspect-list/services/node-aspect.service';
-import { PresetConfig } from '../../interfaces/content-metadata.interfaces';
+import { ContentMetadataCustomPanel, PresetConfig } from '../../interfaces/content-metadata.interfaces';
 import { VersionCompatibilityService } from '../../../version-compatibility/version-compatibility.service';
 import { ContentService } from '../../../common/services/content.service';
 import { AllowableOperationsEnum } from '../../../common/models/allowable-operations.enum';
@@ -80,6 +80,10 @@ export class ContentMetadataCardComponent implements OnChanges {
     @Input()
     editable? = false;
 
+    /** List of custom metadata panels to be displayed with registered custom components */
+    @Input()
+    customPanels: ContentMetadataCustomPanel[];
+
     /** Emitted when content's editable state is changed. */
     @Output()
     editableChange = new EventEmitter<boolean>();

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html

@@ -78,6 +78,12 @@
                 </adf-categories-management>
             </div>
         </ng-container>
+        <mat-expansion-panel *ngFor="let customPanel of customPanels">
+            <mat-expansion-panel-header>
+                <mat-panel-title>{{ customPanel.panelTitle | translate }}</mat-panel-title>
+            </mat-expansion-panel-header>
+            <adf-dynamic-component [id]="customPanel.component" [data]="{ node }"></adf-dynamic-component>
+        </mat-expansion-panel>
         <ng-container *ngIf="expanded">
             <ng-container *ngIf="groupedProperties$ | async; else loading; let groupedProperties">
                 <div *ngFor="let group of groupedProperties; let first = first;"

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts

@@ -1405,6 +1405,17 @@ describe('ContentMetadataComponent', () => {
             });
         });
     });
+
+    describe('Custom metadata panels', () => {
+        it('should render correct custom panel with title and component', () => {
+            component.customPanels = [{ panelTitle: 'testTitle', component: 'testComponent' }];
+            fixture.detectChanges();
+            const panelTitle = fixture.debugElement.queryAll(By.css('mat-panel-title'))[1].nativeElement;
+            const customComponent = fixture.debugElement.query(By.css('adf-dynamic-component')).nativeElement;
+            expect(panelTitle.innerText).toEqual('testTitle');
+            expect(customComponent).toBeDefined();
+        });
+    });
 });
 
 const queryDom = (fixture: ComponentFixture<ContentMetadataComponent>, properties: string = 'properties') =>

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts

@@ -36,7 +36,7 @@ import {
     UpdateNotification
 } from '@alfresco/adf-core';
 import { ContentMetadataService } from '../../services/content-metadata.service';
-import { CardViewGroup, PresetConfig } from '../../interfaces/content-metadata.interfaces';
+import { CardViewGroup, PresetConfig, ContentMetadataCustomPanel } from '../../interfaces/content-metadata.interfaces';
 import { catchError, debounceTime, map, takeUntil } from 'rxjs/operators';
 import { CardViewContentUpdateService } from '../../../common/services/card-view-content-update.service';
 import { NodesApiService } from '../../../common/services/nodes-api.service';
@@ -115,6 +115,10 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
     @Input()
     displayCategories = false;
 
+    /** List of custom metadata panels to be displayed with registered custom components */
+    @Input()
+    customPanels: ContentMetadataCustomPanel[] = [];
+
     private _assignedTags: string[] = [];
     private assignedTagsEntries: TagEntry[] = [];
     private _editable = false;

lib/content-services/src/lib/content-metadata/content-metadata.module.ts

@@ -23,6 +23,7 @@ import { ContentMetadataComponent } from './components/content-metadata/content-
 import { ContentMetadataCardComponent } from './components/content-metadata-card/content-metadata-card.component';
 import { TagModule } from '../tag/tag.module';
 import { CategoriesModule } from '../category/category.module';
+import { ExtensionsModule } from '@alfresco/adf-extensions';
 
 @NgModule({
     imports: [
@@ -30,7 +31,8 @@ import { CategoriesModule } from '../category/category.module';
         MaterialModule,
         CoreModule,
         TagModule,
-        CategoriesModule
+        CategoriesModule,
+        ExtensionsModule
     ],
     exports: [
         ContentMetadataComponent,

lib/content-services/src/lib/content-metadata/interfaces/content-metadata-custom-panel.interface.ts

@@ -0,0 +1,21 @@
+/*!
+ * @license
+ * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface ContentMetadataCustomPanel {
+    panelTitle: string;
+    component: string;
+}

lib/content-services/src/lib/content-metadata/interfaces/content-metadata.interfaces.ts

@@ -24,3 +24,4 @@ export * from './content-metadata-config.interface';
 export * from './indifferent-config.interface';
 export * from './layout-oriented-config.interface';
 export * from './preset-config.interface';
+export * from './content-metadata-custom-panel.interface';