fix(cedar): cedar metadata bugs

eslint.config.js

@@ -87,9 +87,6 @@ module.exports = tseslint.config(
   },
   {
     files: ['**/*.html'],
-    plugins: {
-      '@angular-eslint/template': angularEslintTemplate,
-    },
     languageOptions: {
       parser: angularTemplateParser,
     },

package.json

@@ -53,7 +53,7 @@
     "ace-builds": "^1.42.0",
     "angular-google-tag-manager": "^1.11.0",
     "cedar-artifact-viewer": "^0.9.5",
-    "cedar-embeddable-editor": "^1.5.0",
+    "cedar-embeddable-editor": "1.2.2",
     "chart.js": "^4.4.9",
     "diff": "^8.0.2",
     "markdown-it": "^14.1.0",

src/app/features/files/pages/file-detail/file-detail.component.html

@@ -129,7 +129,7 @@
             [cedarFormReadonly]="cedarFormReadonly()"
             (changeTab)="onMetadataTabChange($event)"
             (formSubmit)="onCedarFormSubmit($event)"
-            (cedarFormEdit)="onCedarFormEdit()"
+            (toggleFormEdit)="toggleEditMode()"
           >
             <div class="w-full flex flex-column gap-4 flex-1 -mt-4">
               <osf-file-metadata class="metadata"></osf-file-metadata>

src/app/features/files/pages/file-detail/file-detail.component.ts

@@ -377,8 +377,9 @@ export class FileDetailComponent {
     }
   }
 
-  onCedarFormEdit(): void {
-    this.cedarFormReadonly.set(false);
+  toggleEditMode(): void {
+    const editMode = this.cedarFormReadonly();
+    this.cedarFormReadonly.set(!editMode);
   }
 
   onCedarFormSubmit(data: CedarRecordDataBinding): void {
@@ -387,18 +388,34 @@ export class FileDetailComponent {
     if (selectedRecord.id) {
       this.actions
         .updateCedarRecord(data, selectedRecord.id, this.resourceId, ResourceType.File)
-        .pipe(takeUntilDestroyed(this.destroyRef))
-        .subscribe({
-          next: () => {
-            this.cedarFormReadonly.set(true);
-            this.toastService.showSuccess('files.detail.toast.cedarUpdated');
-            const fileId = this.file()?.path.replaceAll('/', '') || '';
-            this.actions.getCedarRecords(fileId, ResourceType.File);
-          },
+        .pipe(
+          takeUntilDestroyed(this.destroyRef),
+          switchMap(() => {
+            const fileId = this.file()?.path.replaceAll('/', '');
+            if (fileId) {
+              return this.actions.getCedarRecords(fileId, ResourceType.File);
+            }
+            return [];
+          })
+        )
+        .subscribe(() => {
+          this.cedarFormReadonly.set(true);
+          this.updateSelectedCedarRecord(selectedRecord.id!);
+          this.toastService.showSuccess('files.detail.toast.cedarUpdated');
         });
     }
   }
 
+  private updateSelectedCedarRecord(recordId: string): void {
+    const records = this.cedarRecords();
+    if (!records) return;
+
+    const record = records.find((r) => r.id === recordId);
+    if (record) {
+      this.selectedCedarRecord.set(record);
+    }
+  }
+
   private loadCedarRecord(recordId: string): void {
     const records = this.cedarRecords();
     const templates = this.cedarTemplates();

src/app/features/metadata/components/cedar-template-form/cedar-template-form.component.html

@@ -12,13 +12,12 @@ <h3 class="text-lg text-red-500">{{ 'project.metadata.addMetadata.notPublishedTe
             class="w-10rem flex-shrink-0 btn-full-width"
             severity="secondary"
             [label]="'project.metadata.addMetadata.editRecord' | translate"
-            (onClick)="editModeEmit()"
+            (onClick)="toggleEditModeEmit()"
           >
           </p-button>
         }
       </div>
     }
-
     <div class="cedar-editor-container">
       @if (readonly()) {
         <cedar-artifact-viewer
@@ -34,6 +33,7 @@ <h3 class="text-lg text-red-500">{{ 'project.metadata.addMetadata.notPublishedTe
           [templateObject]="template().attributes.template"
           [metadata]="formData()"
           (change)="onCedarChange($event)"
+          (pointerover)="validateCedarMetadata()"
           (keyup)="onCedarChange($event)"
         ></cedar-embeddable-editor>
       }
@@ -46,7 +46,7 @@ <h3 class="text-lg text-red-500">{{ 'project.metadata.addMetadata.notPublishedTe
             class="w-10rem btn-full-width"
             severity="secondary"
             [label]="'common.buttons.cancel' | translate"
-            (onClick)="editModeEmit()"
+            (onClick)="toggleEditModeEmit()"
           >
           </p-button>
         } @else {

src/app/features/metadata/components/cedar-template-form/cedar-template-form.component.spec.ts

@@ -66,10 +66,10 @@ describe('CedarTemplateFormComponent', () => {
     expect(emitSpy).toHaveBeenCalled();
   });
 
-  it('should emit editMode event', () => {
-    const emitSpy = jest.spyOn(component.editMode, 'emit');
+  it('should emit toggleEditMode event', () => {
+    const emitSpy = jest.spyOn(component.toggleEditMode, 'emit');
 
-    component.editMode.emit();
+    component.toggleEditMode.emit();
 
     expect(emitSpy).toHaveBeenCalled();
   });

src/app/features/metadata/components/cedar-template-form/cedar-template-form.component.ts

@@ -10,7 +10,6 @@ import {
   effect,
   ElementRef,
   input,
-  OnInit,
   output,
   signal,
   viewChild,
@@ -37,10 +36,10 @@ import 'cedar-artifact-viewer';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CedarTemplateFormComponent implements OnInit {
+export class CedarTemplateFormComponent {
   emitData = output<CedarRecordDataBinding>();
   changeTemplate = output<void>();
-  editMode = output<void>();
+  toggleEditMode = output<void>();
 
   template = input.required<CedarMetadataDataTemplateJsonApi>();
   existingRecord = input<CedarMetadataRecordData | null>(null);
@@ -59,27 +58,31 @@ export class CedarTemplateFormComponent implements OnInit {
     effect(() => {
       const tpl = this.template();
       if (tpl?.attributes?.template) {
-        this.initializeFormData();
+        this.initializeCedar();
       }
     });
 
     effect(() => {
-      const editor = this.cedarEditor()?.nativeElement;
-      const viewer = this.cedarViewer()?.nativeElement;
-      const metadata = this.existingRecord()?.attributes?.metadata;
-      if (metadata) {
-        if (editor) {
-          editor.instanceObject = metadata;
-        }
-        if (viewer) {
-          viewer.instanceObject = metadata;
-        }
+      const record = this.existingRecord();
+      if (record) {
+        this.initializeCedar();
       }
     });
   }
 
-  ngOnInit() {
+  private initializeCedar(): void {
+    const metadata = this.existingRecord()?.attributes?.metadata;
+    const editor = this.cedarEditor()?.nativeElement;
+    const viewer = this.cedarViewer()?.nativeElement;
+
     this.initializeFormData();
+
+    if (metadata) {
+      if (editor) editor.instanceObject = metadata;
+      if (viewer) viewer.instanceObject = metadata;
+    }
+
+    this.validateCedarMetadata();
   }
 
   onCedarChange(event: Event): void {
@@ -100,8 +103,13 @@ export class CedarTemplateFormComponent implements OnInit {
     this.isValid = !!report?.isValid;
   }
 
-  editModeEmit(): void {
-    this.editMode.emit();
+  toggleEditModeEmit(): void {
+    this.toggleEditMode.emit();
+  }
+
+  cancel() {
+    this.initializeFormData();
+    this.toggleEditModeEmit();
   }
 
   onSubmit() {

src/app/features/metadata/metadata.component.html

@@ -17,7 +17,7 @@
     (changeTab)="onTabChange($event)"
     (formSubmit)="onCedarFormSubmit($event)"
     (cedarFormChangeTemplate)="onCedarFormChangeTemplate()"
-    (cedarFormEdit)="onCedarFormEdit()"
+    (toggleFormEdit)="toggleEditMode()"
   >
     <div class="flex-column flex flex-1 w-full bg-white lg:flex-row">
       <div class="col-12 lg:col-6 flex flex-column gap-4">

src/app/features/metadata/metadata.component.ts

@@ -290,8 +290,9 @@ export class MetadataComponent implements OnInit {
     }
   }
 
-  onCedarFormEdit(): void {
-    this.cedarFormReadonly.set(false);
+  toggleEditMode(): void {
+    const editMode = this.cedarFormReadonly();
+    this.cedarFormReadonly.set(!editMode);
   }
 
   onCedarFormSubmit(data: CedarRecordDataBinding): void {
@@ -302,17 +303,28 @@ export class MetadataComponent implements OnInit {
     if (selectedRecord.id) {
       this.actions
         .updateCedarRecord(data, selectedRecord.id, this.resourceId, this.resourceType())
-        .pipe(takeUntilDestroyed(this.destroyRef))
-        .subscribe({
-          next: () => {
-            this.cedarFormReadonly.set(true);
-            this.toastService.showSuccess(this.translateService.instant('files.detail.toast.cedarUpdated'));
-            this.actions.getCedarRecords(this.resourceId, this.resourceType());
-          },
+        .pipe(
+          takeUntilDestroyed(this.destroyRef),
+          switchMap(() => this.actions.getCedarRecords(this.resourceId, this.resourceType()))
+        )
+        .subscribe(() => {
+          this.updateSelectedCedarRecord(selectedRecord.id!);
+          this.cedarFormReadonly.set(true);
+          this.toastService.showSuccess(this.translateService.instant('files.detail.toast.cedarUpdated'));
         });
     }
   }
 
+  private updateSelectedCedarRecord(recordId: string): void {
+    const records = this.cedarRecords();
+    if (!records) return;
+
+    const record = records.find((r) => r.id === recordId);
+    if (record) {
+      this.selectedCedarRecord.set(record);
+    }
+  }
+
   onCedarFormChangeTemplate(): void {
     this.router.navigate(['add'], { relativeTo: this.activeRoute });
   }

src/app/features/metadata/pages/add-metadata/add-metadata.component.html

@@ -69,7 +69,7 @@ <h2>{{ meta.attributes.template.title }}</h2>
   }
 } @else {
   <osf-cedar-template-form
-    (editMode)="toggleEditMode()"
+    (toggleEditMode)="toggleEditMode()"
     (emitData)="createRecordMetadata($event)"
     (changeTemplate)="disableSelect()"
     [template]="selectedTemplate"

src/app/features/metadata/pages/add-metadata/add-metadata.component.ts

@@ -78,7 +78,6 @@ export class AddMetadataComponent implements OnInit {
       if (!records || !cedarTemplatesData) {
         return;
       }
-
       if (recordId) {
         const existingRecord = records.find((record) => {
           return record.id === recordId;

src/app/shared/components/metadata-tabs/metadata-tabs.component.html

@@ -17,15 +17,17 @@
             <ng-content></ng-content>
           } @else {
             @if (selectedCedarTemplate() && selectedCedarRecord()) {
-              <osf-cedar-template-form
-                [template]="selectedCedarTemplate()!"
-                [existingRecord]="selectedCedarRecord()!"
-                [readonly]="cedarFormReadonly()"
-                [showEditButton]="canEdit()"
-                (emitData)="onCedarFormSubmit($event)"
-                (changeTemplate)="onCedarFormChangeTemplate()"
-                (editMode)="onCedarFormEdit()"
-              />
+              @if (tab.id === selectedCedarRecord()?.id) {
+                <osf-cedar-template-form
+                  [template]="selectedCedarTemplate()!"
+                  [existingRecord]="selectedCedarRecord()!"
+                  [readonly]="cedarFormReadonly()"
+                  [showEditButton]="canEdit()"
+                  (emitData)="onCedarFormSubmit($event)"
+                  (changeTemplate)="onCedarFormChangeTemplate()"
+                  (toggleEditMode)="toggleEditMode()"
+                />
+              }
             } @else {
               <div class="text-center py-8">
                 <p class="text-lg mb-4">{{ 'project.metadata.addMetadata.loadingCedar' | translate }}</p>

src/app/shared/components/metadata-tabs/metadata-tabs.component.ts

@@ -31,7 +31,7 @@ export class MetadataTabsComponent {
   canEdit = input<boolean>(true);
   changeTab = output<string | number>();
   formSubmit = output<CedarRecordDataBinding>();
-  cedarFormEdit = output<void>();
+  toggleFormEdit = output<void>();
   cedarFormChangeTemplate = output<void>();
 
   onCedarFormSubmit(data: CedarRecordDataBinding) {
@@ -42,7 +42,7 @@ export class MetadataTabsComponent {
     this.cedarFormChangeTemplate.emit();
   }
 
-  onCedarFormEdit() {
-    this.cedarFormEdit.emit();
+  toggleEditMode() {
+    this.toggleFormEdit.emit();
   }
 }

src/styles/overrides/cedar-metadata.scss

@@ -1,5 +1,9 @@
 @use "styles/mixins" as mix;
 
+.cedar-editor-container {
+  padding-top: 1rem;
+}
+
 cedar-embeddable-editor,
 cedar-embeddable-metadata-editor,
 cedar-artifact-viewer {
@@ -15,6 +19,15 @@ cedar-artifact-viewer {
     font-size: 1rem;
   }
 
+  h1 {
+    font-size: mix.rem(24px);
+  }
+
+  app-cedar-static-rich-text {
+    display: block;
+    padding: 0 5px;
+  }
+
   .required {
     fa-icon {
       font-size: 0.5rem;
@@ -39,10 +52,10 @@ cedar-artifact-viewer {
     }
   }
 
-  .mat-card-content {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
+  .mat-card {
+    &:not([class*="mat-elevation-z"]) {
+      box-shadow: none;
+    }
   }
 
   app-cedar-component-renderer {
@@ -82,6 +95,11 @@ cedar-artifact-viewer {
   }
 
   .mat-expansion-panel {
+    &:not([class*="mat-elevation-z"]) {
+      box-shadow: none;
+      border: 1px solid var(--grey-2);
+    }
+
     border-color: var(--grey-2);
     border-radius: 8px !important;
     margin-bottom: 1rem;