[ADF-5363] - when aspects has no name we will show the id instead (#6906)

* [ADF-5363] - when aspects has no name we will show the id instead

* added PR review fix

lib/content-services/src/lib/aspect-list/aspect-list.component.html

@@ -1,18 +1,18 @@
 <div id="aspect-list-container" class="adf-aspect-list-container" *ngIf="aspects$ | async as aspects; else loading">
     <mat-accordion class="adf-accordion-aspect-list">
-        <mat-expansion-panel *ngFor="let aspect of aspects; let colIndex = index" [id]="'aspect-list-'+aspect?.entry?.title">
+        <mat-expansion-panel *ngFor="let aspect of aspects; let colIndex = index" [id]="'aspect-list-'+getId(aspect)">
-            <mat-expansion-panel-header [id]="'aspect-list-'+aspect?.entry?.title+'header'">
+            <mat-expansion-panel-header [id]="'aspect-list-'+(getId(aspect))+'header'">
                 <mat-panel-title>
                     <mat-checkbox class="adf-aspect-list-check-button" [id]="'aspect-list-'+colIndex+'-check'"
                                   [checked]="nodeAspects?.includes(aspect?.entry?.id)"
                                   (click)="onCheckBoxClick($event)"
                                   (change)="onChange($event, aspect?.entry?.id)">
                     </mat-checkbox>
-                    <p class="adf-aspect-list-element-title">{{aspect?.entry?.title}}</p>
+                    <p class="adf-aspect-list-element-title">{{getTitle(aspect)}}</p>
                 </mat-panel-title>
                 <mat-panel-description [id]="'aspect-list-'+colIndex+'-title'"
-                                        [matTooltip]="aspect?.entry?.title">
+                                        [matTooltip]="getTitle(aspect)">
-                    {{aspect?.entry?.title}}
+                    {{getTitle(aspect)}}
                 </mat-panel-description>
             </mat-expansion-panel-header>
             <p class="adf-property-paragraph" [id]="'aspect-list-'+colIndex+'-description'"> {{aspect?.entry?.description}}</p>

lib/content-services/src/lib/aspect-list/aspect-list.component.spec.ts

@@ -68,7 +68,7 @@ const aspectListMock: AspectEntry[] = [{
 
 const customAspectListMock: AspectEntry[] = [{
     entry: {
-        parentId: 'cst:customAspect',
+        parentId: 'cst:parentAspect',
         id: 'cst:customAspect',
         description: 'Custom Aspect with random description',
         title: 'CustomAspect',
@@ -85,6 +85,21 @@ const customAspectListMock: AspectEntry[] = [{
             }
         ]
     }
+},
+{
+    entry: {
+        parentId: 'cst:commonaspect',
+        id: 'cst:nonamedAspect',
+        description: '',
+        title: '',
+        properties: [
+            {
+                id: 'channelPassword',
+                title: 'The authenticated channel password',
+                dataType: 'd:propA'
+            }
+        ]
+    }
 }];
 
 describe('AspectListComponent', () => {
@@ -151,6 +166,13 @@ describe('AspectListComponent', () => {
             expect(secondElement).toBeDefined();
         });
 
+        it('should show aspect id when name or title is not set', () => {
+            const noNameAspect: HTMLElement = fixture.nativeElement.querySelector('#aspect-list-cst-nonamedAspect .adf-aspect-list-element-title');
+            expect(noNameAspect).toBeDefined();
+            expect(noNameAspect).not.toBeNull();
+            expect(noNameAspect.innerText).toBe('cst:nonamedAspect');
+        });
+
         it('should show the details when a row is clicked', () => {
             const firstElement = fixture.nativeElement.querySelector('#aspect-list-FirstAspect');
             firstElement.click();

lib/content-services/src/lib/aspect-list/aspect-list.component.ts

@@ -101,4 +101,12 @@ export class AspectListComponent implements OnInit, OnDestroy {
         this.nodeAspects = [];
         this.valueChanged.emit(this.nodeAspects);
     }
+
+    getId(aspect: any): string {
+        return aspect?.entry?.title ? aspect?.entry?.title : aspect?.entry?.id.replace(':', '-');
+    }
+
+    getTitle(aspect: any): string {
+        return aspect?.entry?.title ? aspect?.entry?.title : aspect?.entry?.id;
+    }
 }