Replaced manual avatar with op-principal component in storage file list

frontend/src/app/shared/components/file-links/storage-file-list-item/storage-file-list-item.component.ts

@@ -27,7 +27,6 @@
 //++
 
 import {
-  AfterViewInit,
   ChangeDetectionStrategy,
   Component,
   ElementRef,
@@ -39,12 +38,12 @@ import {
 
 import { TimezoneService } from 'core-app/core/datetime/timezone.service';
 import { IFileIcon } from 'core-app/shared/components/file-links/file-link-icons/icon-mappings';
-import { PrincipalRendererService } from 'core-app/shared/components/principal/principal-renderer.service';
 import {
   getIconForMimeType,
 } from 'core-app/shared/components/file-links/file-link-icons/file-link-list-item-icon.factory';
 import { IStorageFile } from 'core-app/core/state/storage-files/storage-file.model';
 import { isDirectory } from 'core-app/shared/components/file-links/file-link-icons/file-icons.helper';
+import { PrincipalLike } from 'core-app/shared/components/principal/principal-types';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -52,7 +51,7 @@ import { isDirectory } from 'core-app/shared/components/file-links/file-link-ico
   templateUrl: './storage-file-list-item.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class StorageFileListItemComponent implements OnInit, AfterViewInit {
+export class StorageFileListItemComponent implements OnInit {
   @Input() public storageFile:IStorageFile;
 
   @Input() public selected = false;
@@ -67,10 +66,19 @@ export class StorageFileListItemComponent implements OnInit, AfterViewInit {
 
   showDetails:boolean;
 
-  constructor(
-    private readonly timezoneService:TimezoneService,
-    private readonly principalRendererService:PrincipalRendererService,
-  ) {}
+  get principal():PrincipalLike {
+    return this.storageFile.createdByName
+      ? {
+        name: this.storageFile.createdByName,
+        href: '/external_users/1',
+      }
+      : {
+        name: 'Not Available',
+        href: '/placeholder_users/1',
+      };
+  }
+
+  constructor(private readonly timezoneService:TimezoneService) {}
 
   ngOnInit():void {
     if (this.storageFile.lastModifiedAt) {
@@ -81,26 +89,4 @@ export class StorageFileListItemComponent implements OnInit, AfterViewInit {
 
     this.showDetails = !isDirectory(this.storageFile.mimeType);
   }
-
-  ngAfterViewInit():void {
-    if (!this.showDetails) {
-      return;
-    }
-
-    if (this.storageFile.createdByName) {
-      this.principalRendererService.render(
-        this.avatar.nativeElement,
-        { name: this.storageFile.createdByName, href: '/external_users/1' },
-        { hide: true, link: false },
-        { hide: false, size: 'mini' },
-      );
-    } else {
-      this.principalRendererService.render(
-        this.avatar.nativeElement,
-        { name: 'Not Available', href: '/placeholder_users/1' },
-        { hide: true, link: false },
-        { hide: false, size: 'mini' },
-      );
-    }
-  }
 }

frontend/src/app/shared/components/file-links/storage-file-list-item/storage-file-list-item.html

@@ -21,9 +21,12 @@
     [textContent]="infoTimestampText"
   ></span>
 
-  <div
-    #avatar
+  <op-principal
     *ngIf="showDetails"
     class="op-file-list--item-avatar"
-  ></div>
+    [principal]="principal"
+    [hideName]="true"
+    [size]="'mini'"
+    [link]="false"
+  ></op-principal>
 </label>

frontend/src/app/shared/components/principal/principal-types.ts

@@ -2,7 +2,12 @@ import { UserResource } from 'core-app/features/hal/resources/user-resource';
 import { PlaceholderUserResource } from 'core-app/features/hal/resources/placeholder-user-resource';
 import { GroupResource } from 'core-app/features/hal/resources/group-resource';
 
-export type PrincipalLike = UserResource|PlaceholderUserResource|GroupResource|{ id?:string, name:string, href?:string };
+export type PrincipalLike =
+  UserResource
+  |PlaceholderUserResource
+  |GroupResource
+  |{ id?:string, name:string, href?:string };
+
 export interface PrincipalData {
   principal:PrincipalLike|null;
   customFields:{ [key:string]:any },