Revert "Merge pull request #988 from Vlad0n20/feat/ENG-9827"

This reverts commit d198ac4, reversing
changes made to d67e972.

Author: adlius

src/app/features/collections/components/add-to-collection/add-to-collection.component.html

@@ -48,7 +48,11 @@ <h1 class="collections-heading flex align-items-center">{{ collectionProvider()?
           [targetStepValue]="AddToCollectionSteps.CollectionMetadata"
           [isDisabled]="isCollectionMetadataDisabled()"
           [primaryCollectionId]="primaryCollectionId()"
+          [isCedarMode]="isCedarMode()"
+          [cedarTemplate]="requiredMetadataTemplate()"
+          [existingCedarRecord]="existingCedarRecord()"
           (metadataSaved)="handleCollectionMetadataSaved($event)"
+          (cedarDataSaved)="handleCedarDataSaved($event)"
           (stepChange)="handleChangeStep($event)"
         />
       </p-stepper>

src/app/features/collections/components/add-to-collection/add-to-collection.component.spec.ts

@@ -23,9 +23,18 @@ import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
+import { ENVIRONMENT } from '@core/provider/environment.provider';
 import { UserSelectors } from '@core/store/user';
+import { CedarMetadataRecordData, CedarRecordDataBinding } from '@osf/features/metadata/models';
+import {
+  CreateCedarMetadataRecord,
+  GetCedarMetadataRecords,
+  MetadataSelectors,
+  UpdateCedarMetadataRecord,
+} from '@osf/features/metadata/store';
 import { LoadingSpinnerComponent } from '@osf/shared/components/loading-spinner/loading-spinner.component';
 import { CollectionSubmissionReviewState } from '@osf/shared/enums/collection-submission-review-state.enum';
+import { ResourceType } from '@osf/shared/enums/resource-type.enum';
 import { CanDeactivateComponent } from '@osf/shared/models/can-deactivate.interface';
 import { BrandService } from '@osf/shared/services/brand.service';
 import { CustomDialogService } from '@osf/shared/services/custom-dialog.service';
@@ -81,6 +90,7 @@ export class AddToCollectionComponent implements CanDeactivateComponent {
   private readonly headerStyleHelper = inject(HeaderStyleService);
   private readonly platformId = inject(PLATFORM_ID);
   private readonly isBrowser = isPlatformBrowser(this.platformId);
+  private readonly environment = inject(ENVIRONMENT);
 
   readonly selectedProjectId = toSignal<string | null>(
     this.route.params.pipe(map((params) => params['id'])) ?? of(null)
@@ -92,15 +102,18 @@ export class AddToCollectionComponent implements CanDeactivateComponent {
 
   isProviderLoading = select(CollectionsSelectors.getCollectionProviderLoading);
   collectionProvider = select(CollectionsSelectors.getCollectionProvider);
+  requiredMetadataTemplate = select(CollectionsSelectors.getRequiredMetadataTemplate);
   selectedProject = select(ProjectsSelectors.getSelectedProject);
   currentUser = select(UserSelectors.getCurrentUser);
   currentCollectionSubmission = select(AddToCollectionSelectors.getCurrentCollectionSubmission);
+  cedarRecords = select(MetadataSelectors.getCedarRecords);
 
   providerId = signal<string>('');
   allowNavigation = signal<boolean>(false);
   projectMetadataSaved = signal<boolean>(false);
   projectContributorsSaved = signal<boolean>(false);
   collectionMetadataSaved = signal<boolean>(false);
+  pendingCedarData = signal<CedarRecordDataBinding | null>(null);
   stepperActiveValue = signal<number>(AddToCollectionSteps.SelectProject);
 
   primaryCollectionId = computed(() => this.collectionProvider()?.primaryCollection?.id);
@@ -110,6 +123,13 @@ export class AddToCollectionComponent implements CanDeactivateComponent {
   isCollectionMetadataDisabled = computed(
     () => !this.selectedProject() || !this.projectMetadataSaved() || !this.projectContributorsSaved()
   );
+  isCedarMode = computed(() => this.environment.collectionSubmissionWithCedar && !!this.requiredMetadataTemplate());
+  existingCedarRecord = computed<CedarMetadataRecordData | null>(() => {
+    const records = this.cedarRecords();
+    const templateId = this.requiredMetadataTemplate()?.id;
+    if (!records?.length || !templateId) return null;
+    return records.find((r) => r.relationships?.template?.data?.id === templateId) ?? null;
+  });
 
   readonly actions = createDispatchMap({
     getCollectionProvider: GetCollectionProvider,
@@ -118,6 +138,9 @@ export class AddToCollectionComponent implements CanDeactivateComponent {
     deleteCollectionSubmission: RemoveCollectionSubmission,
     setSelectedProject: SetSelectedProject,
     getCurrentCollectionSubmission: GetCurrentCollectionSubmission,
+    getCedarRecords: GetCedarMetadataRecords,
+    createCedarRecord: CreateCedarMetadataRecord,
+    updateCedarRecord: UpdateCedarMetadataRecord,
   });
 
   showRemoveButton = computed(
@@ -174,20 +197,29 @@ export class AddToCollectionComponent implements CanDeactivateComponent {
     this.stepperActiveValue.set(AddToCollectionSteps.Complete);
   }
 
+  handleCedarDataSaved(data: CedarRecordDataBinding): void {
+    this.pendingCedarData.set(data);
+    this.collectionMetadataSaved.set(true);
+    this.stepperActiveValue.set(AddToCollectionSteps.Complete);
+  }
+
   handleAddToCollection() {
     const payload = {
       collectionId: this.primaryCollectionId() || '',
       projectId: this.selectedProject()?.id || '',
-      collectionMetadata: this.collectionMetadataForm.value || {},
+      collectionMetadata: this.isCedarMode() ? {} : this.collectionMetadataForm.value || {},
       userId: this.currentUser()?.id || '',
     };
 
-    if (this.isEditMode()) {
+    const isEditMode = this.isEditMode();
+
+    if (isEditMode) {
       this.loaderService.show();
 
       this.actions
         .updateCollectionSubmission(payload)
         .pipe(
+          switchMap(() => this.saveCedarRecordIfNeeded()),
           finalize(() => this.loaderService.hide()),
           takeUntilDestroyed(this.destroyRef)
         )
@@ -210,6 +242,7 @@ export class AddToCollectionComponent implements CanDeactivateComponent {
         })
         .onClose.pipe(
           filter((res) => !!res),
+          switchMap(() => this.saveCedarRecordIfNeeded()),
           takeUntilDestroyed(this.destroyRef)
         )
         .subscribe({
@@ -245,21 +278,35 @@ export class AddToCollectionComponent implements CanDeactivateComponent {
             collectionId,
             comment: res?.comment || '',
           };
-          this.loaderService.show();
+
           return this.actions.deleteCollectionSubmission(payload);
         }),
-        finalize(() => this.loaderService.hide()),
         takeUntilDestroyed(this.destroyRef)
       )
       .subscribe({
         next: () => {
           this.toastService.showSuccess('collections.removeDialog.success');
+          this.loaderService.show();
           this.allowNavigation.set(true);
           this.router.navigate([projectId, 'overview']);
         },
       });
   }
 
+  private saveCedarRecordIfNeeded(): Observable<unknown> {
+    if (!this.isCedarMode()) return of(null);
+
+    const cedarData = this.pendingCedarData();
+    const projectId = this.selectedProject()?.id;
+    const templateId = this.requiredMetadataTemplate()?.id;
+    if (!cedarData || !projectId || !templateId) return of(null);
+
+    const existingId = this.existingCedarRecord()?.id;
+    return existingId
+      ? this.actions.updateCedarRecord(cedarData, existingId, projectId, ResourceType.Project)
+      : this.actions.createCedarRecord(cedarData, projectId, ResourceType.Project);
+  }
+
   private initializeProvider(): void {
     const id = this.route.snapshot.paramMap.get('providerId');
     if (!id) {
@@ -298,6 +345,14 @@ export class AddToCollectionComponent implements CanDeactivateComponent {
         this.actions.setSelectedProject(submission.project);
       }
     });
+
+    effect(() => {
+      const projectId = this.selectedProjectId();
+      const isCedar = this.isCedarMode();
+      if (isCedar && projectId) {
+        this.actions.getCedarRecords(projectId, ResourceType.Project);
+      }
+    });
   }
 
   private setupCleanup() {

src/app/features/collections/components/add-to-collection/add-to-collection.component.ts

@@ -11,14 +11,25 @@ <h3>{{ 'collections.addToCollection.collectionMetadata' | translate }}</h3>
 
         @if (!isDisabled() && stepperActiveValue() !== targetStepValue()) {
           @if (collectionMetadataSaved()) {
-            @for (filterEntry of availableFilterEntries(); track filterEntry.key) {
-              <div>
-                <p class="font-bold">{{ filterEntry.labelKey | translate }}</p>
+            @if (isCedarMode()) {
+              @if (cedarTemplate()) {
+                <cedar-artifact-viewer
+                  #cedarViewer
+                  [config]="cedarViewerConfig"
+                  [templateObject]="cedarTemplate()!.attributes.template"
+                  [instanceObject]="cedarFormData()"
+                ></cedar-artifact-viewer>
+              }
+            } @else {
+              @for (filterEntry of availableFilterEntries(); track filterEntry.key) {
+                <div>
+                  <p class="font-bold">{{ filterEntry.labelKey | translate }}</p>
 
-                <p class="mt-2">
-                  {{ collectionMetadataForm().get(filterEntry.key)?.value }}
-                </p>
-              </div>
+                  <p class="mt-2">
+                    {{ collectionMetadataForm().get(filterEntry.key)?.value }}
+                  </p>
+                </div>
+              }
             }
           }
 
@@ -35,33 +46,59 @@ <h3>{{ 'collections.addToCollection.collectionMetadata' | translate }}</h3>
 
   <p-step-panel [value]="targetStepValue()" class="p-0">
     <ng-template class="m-0" #content let-activateCallback="activateCallback">
-      <form [formGroup]="collectionMetadataForm()" class="grid row-gap-2 mt-3">
-        @for (filterEntry of availableFilterEntries(); track filterEntry.key) {
-          <div class="flex flex-column gap-1 col-12 md:col-6">
-            <label [for]="filterEntry.key">{{ filterEntry.labelKey | translate }}</label>
-            <p-select
-              [id]="filterEntry.key"
-              [options]="filterEntry.options"
-              [formControlName]="filterEntry.key"
-              [placeholder]="filterEntry.labelKey | translate"
-              appendTo="body"
-            ></p-select>
+      @if (isCedarMode()) {
+        @if (cedarTemplate()) {
+          <div class="cedar-editor-container mt-3">
+            <cedar-embeddable-editor
+              #cedarEditor
+              [config]="cedarConfig"
+              [templateObject]="cedarTemplate()!.attributes.template"
+              [metadata]="cedarFormData()"
+              (change)="onCedarChange($event)"
+              (keyup)="onCedarChange($event)"
+            ></cedar-embeddable-editor>
           </div>
+
+          <div class="flex justify-content-end gap-3 mt-4">
+            <p-button
+              severity="info"
+              [label]="'common.buttons.discardChanges' | translate"
+              (onClick)="handleDiscardChanges()"
+            />
+            <p-button [label]="'common.buttons.saveAndContinue' | translate" (onClick)="handleSaveCedarMetadata()" />
+          </div>
+        } @else {
+          <p class="mt-3">{{ 'collections.addToCollection.cedarFormNotAvailable' | translate }}</p>
         }
-      </form>
+      } @else {
+        <form [formGroup]="collectionMetadataForm()" class="grid row-gap-2 mt-3">
+          @for (filterEntry of availableFilterEntries(); track filterEntry.key) {
+            <div class="flex flex-column gap-1 col-12 md:col-6">
+              <label [for]="filterEntry.key">{{ filterEntry.labelKey | translate }}</label>
+              <p-select
+                [id]="filterEntry.key"
+                [options]="filterEntry.options"
+                [formControlName]="filterEntry.key"
+                [placeholder]="filterEntry.labelKey | translate"
+                appendTo="body"
+              ></p-select>
+            </div>
+          }
+        </form>
 
-      <div class="flex justify-content-end gap-3 mt-4">
-        <p-button
-          severity="info"
-          [label]="'common.buttons.discardChanges' | translate"
-          (onClick)="handleDiscardChanges()"
-        />
-        <p-button
-          [label]="'common.buttons.saveAndContinue' | translate"
-          [disabled]="!collectionMetadataForm().valid"
-          (onClick)="handleSaveMetadata()"
-        />
-      </div>
+        <div class="flex justify-content-end gap-3 mt-4">
+          <p-button
+            severity="info"
+            [label]="'common.buttons.discardChanges' | translate"
+            (onClick)="handleDiscardChanges()"
+          />
+          <p-button
+            [label]="'common.buttons.saveAndContinue' | translate"
+            [disabled]="!collectionMetadataForm().valid"
+            (onClick)="handleSaveMetadata()"
+          />
+        </div>
+      }
     </ng-template>
   </p-step-panel>
 </p-step-item>