feat(es2): Get rid of artifact viewer

Author: adlius

src/app/features/project/overview/components/overview-collections/overview-collections.component.html

@@ -33,26 +33,19 @@ <h3 class="mb-2">{{ 'project.overview.metadata.collection' | translate }}</h3>
                 @let cedarRecord = cedarRecordByTemplateId().get(templateId) ?? null;
                 @let cedarTemplate = cedarTemplateById().get(templateId) ?? null;
 
-                @if (isCedarMode() && cedarRecord && cedarTemplate?.attributes?.template) {
-                  <div class="mt-2">
-                    <cedar-artifact-viewer
-                      [config]="cedarViewerConfig"
-                      [templateObject]="cedarTemplate!.attributes.template"
-                      [instanceObject]="cedarRecord.attributes.metadata"
-                    ></cedar-artifact-viewer>
-                  </div>
-                } @else {
-                  @let attributes = getSubmissionAttributes(submission);
+                @let attributes =
+                  isCedarMode() && cedarRecord && cedarTemplate?.attributes?.template
+                    ? getCedarAttributes(cedarRecord, cedarTemplate!)
+                    : getSubmissionAttributes(submission);
 
-                  @if (attributes.length) {
-                    <div class="flex flex-column gap-2 mt-2">
-                      @for (attribute of attributes; track attribute.key) {
-                        <p class="font-normal">
-                          <span class="font-bold">{{ attribute.label }}:</span> {{ attribute.value }}
-                        </p>
-                      }
-                    </div>
-                  }
+                @if (attributes.length) {
+                  <div class="flex flex-column gap-2 mt-2">
+                    @for (attribute of attributes; track attribute.key) {
+                      <p class="font-normal">
+                        <span class="font-bold">{{ attribute.label }}:</span> {{ attribute.value }}
+                      </p>
+                    }
+                  </div>
                 }
               </p-accordion-content>
             </p-accordion-panel>

src/app/features/project/overview/components/overview-collections/overview-collections.component.ts

@@ -5,18 +5,10 @@ import { Button } from 'primeng/button';
 import { Skeleton } from 'primeng/skeleton';
 import { Tag } from 'primeng/tag';
 
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  CUSTOM_ELEMENTS_SCHEMA,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
 
 import { collectionFilterNames } from '@osf/features/collections/constants';
-import { CEDAR_VIEWER_CONFIG } from '@osf/features/metadata/constants';
 import { CedarMetadataDataTemplateJsonApi, CedarMetadataRecordData } from '@osf/features/metadata/models';
 import { StopPropagationDirective } from '@osf/shared/directives/stop-propagation.directive';
 import { CollectionSubmission } from '@osf/shared/models/collections/collections.model';
@@ -41,8 +33,6 @@ import { CollectionStatusSeverityPipe } from '@osf/shared/pipes/collection-statu
   templateUrl: './overview-collections.component.html',
   styleUrl: './overview-collections.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  encapsulation: ViewEncapsulation.None,
 })
 export class OverviewCollectionsComponent {
   projectSubmissions = input<CollectionSubmission[] | null>(null);
@@ -51,8 +41,6 @@ export class OverviewCollectionsComponent {
   cedarRecords = input<CedarMetadataRecordData[] | null>(null);
   cedarTemplates = input<CedarMetadataDataTemplateJsonApi[] | null>(null);
 
-  cedarViewerConfig = CEDAR_VIEWER_CONFIG;
-
   cedarRecordByTemplateId = computed(() => {
     const records = this.cedarRecords();
     return new Map(
@@ -85,4 +73,40 @@ export class OverviewCollectionsComponent {
 
     return attributes;
   }
+
+  getCedarAttributes(record: CedarMetadataRecordData, template: CedarMetadataDataTemplateJsonApi): KeyValueModel[] {
+    const { order, propertyLabels } = template.attributes.template._ui;
+    const metadata = record.attributes.metadata as Record<string, unknown>;
+    const attributes: KeyValueModel[] = [];
+
+    for (const key of order) {
+      const label = propertyLabels[key];
+      const value = this.formatCedarValue(metadata[key]);
+      if (label && value) {
+        attributes.push({ key, label, value });
+      }
+    }
+
+    return attributes;
+  }
+
+  private formatCedarValue(value: unknown): string {
+    if (value == null) return '';
+
+    if (Array.isArray(value)) {
+      return value
+        .map((item) => this.formatCedarValue(item))
+        .filter(Boolean)
+        .join(', ');
+    }
+
+    if (typeof value === 'object') {
+      const obj = value as Record<string, unknown>;
+      if ('@value' in obj && obj['@value'] != null) return String(obj['@value']);
+      if ('rdfs:label' in obj && obj['rdfs:label'] != null) return String(obj['rdfs:label']);
+      return '';
+    }
+
+    return String(value);
+  }
 }