Merge pull request #850 from nsemets/fix/merge-develop

Merged develop into feature/pbs-25-24

Author: brianjgeiger

CHANGELOG

@@ -0,0 +1,11 @@
+# Changelog
+
+We follow the CalVer (https://calver.org/) versioning scheme: YY.MINOR.MICRO.
+
+26.1.0 (2026-01-01)
+===================
+
+* Angular FE support for Notification Refactor Project
+
+# vi: ft=markdown
+

angular.json

@@ -53,6 +53,7 @@
             "styles": [
               "src/styles/styles.scss",
               "node_modules/primeflex/primeflex.css",
+              "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
               "node_modules/ngx-markdown-editor/assets/highlight.js/agate.min.css"
             ],
             "stylePreprocessorOptions": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "osf",
-  "version": "25.4.0",
+  "version": "26.1.0",
   "scripts": {
     "ng": "ng",
     "analyze-bundle": "ng build --configuration=analyze-bundle && source-map-explorer dist/**/*.js --no-border-checks",

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

@@ -54,27 +54,23 @@ <h3 class="text-lg text-red-500">{{ 'project.metadata.addMetadata.notPublishedTe
       </div>
     }
     <div class="cedar-editor-container">
-      @if (!cedarLoaded()) {
-        <osf-loading-spinner />
+      @if (readonly()) {
+        <cedar-artifact-viewer
+          #cedarViewer
+          [config]="cedarViewerConfig"
+          [templateObject]="template().attributes.template"
+          [instanceObject]="formData()"
+        ></cedar-artifact-viewer>
       } @else {
-        @if (readonly()) {
-          <cedar-artifact-viewer
-            #cedarViewer
-            [config]="cedarViewerConfig"
-            [templateObject]="template().attributes.template"
-            [instanceObject]="formData()"
-          ></cedar-artifact-viewer>
-        } @else {
-          <cedar-embeddable-editor
-            #cedarEditor
-            [config]="cedarConfig"
-            [templateObject]="template().attributes.template"
-            [metadata]="formData()"
-            (change)="onCedarChange($event)"
-            (pointerover)="validateCedarMetadata()"
-            (keyup)="onCedarChange($event)"
-          ></cedar-embeddable-editor>
-        }
+        <cedar-embeddable-editor
+          #cedarEditor
+          [config]="cedarConfig"
+          [templateObject]="template().attributes.template"
+          [metadata]="formData()"
+          (change)="onCedarChange($event)"
+          (pointerover)="validateCedarMetadata()"
+          (keyup)="onCedarChange($event)"
+        ></cedar-embeddable-editor>
       }
     </div>
 

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

@@ -1,11 +1,7 @@
-import { MockComponent } from 'ng-mocks';
-
-import { PLATFORM_ID } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CedarMetadataHelper } from '@osf/features/metadata/helpers';
 import { CedarMetadataDataTemplateJsonApi } from '@osf/features/metadata/models';
-import { LoadingSpinnerComponent } from '@osf/shared/components/loading-spinner/loading-spinner.component';
 
 import { CedarTemplateFormComponent } from './cedar-template-form.component';
 
@@ -20,8 +16,7 @@ describe('CedarTemplateFormComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [CedarTemplateFormComponent, OSFTestingModule, MockComponent(LoadingSpinnerComponent)],
-      providers: [{ provide: PLATFORM_ID, useValue: 'browser' }],
+      imports: [CedarTemplateFormComponent, OSFTestingModule],
     }).compileComponents();
 
     fixture = TestBed.createComponent(CedarTemplateFormComponent);
@@ -80,14 +75,10 @@ describe('CedarTemplateFormComponent', () => {
     expect(emitSpy).toHaveBeenCalled();
   });
 
-  it('should initialize form data with empty metadata when no existing record', async () => {
+  it('should initialize form data with empty metadata when no existing record', () => {
     fixture.componentRef.setInput('existingRecord', null);
     fixture.detectChanges();
 
-    await (component as any).loadCedarLibraries();
-    (component as any).initializeCedar();
-    fixture.detectChanges();
-
     const expectedEmptyMetadata = CedarMetadataHelper.buildEmptyMetadata();
     expect(component.formData()).toEqual(expectedEmptyMetadata);
   });

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

@@ -6,7 +6,7 @@ import { Tooltip } from 'primeng/tooltip';
 
 import { map, of } from 'rxjs';
 
-import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -16,7 +16,6 @@ import {
   inject,
   input,
   output,
-  PLATFORM_ID,
   signal,
   viewChild,
   ViewEncapsulation,
@@ -25,7 +24,6 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute } from '@angular/router';
 
 import { ENVIRONMENT } from '@core/provider/environment.provider';
-import { LoadingSpinnerComponent } from '@osf/shared/components/loading-spinner/loading-spinner.component';
 
 import { CEDAR_CONFIG, CEDAR_VIEWER_CONFIG } from '../../constants';
 import { CedarMetadataHelper } from '../../helpers';
@@ -38,7 +36,7 @@ import {
 
 @Component({
   selector: 'osf-cedar-template-form',
-  imports: [CommonModule, Button, TranslatePipe, Tooltip, Menu, LoadingSpinnerComponent],
+  imports: [CommonModule, Button, TranslatePipe, Tooltip, Menu],
   templateUrl: './cedar-template-form.component.html',
   styleUrl: './cedar-template-form.component.scss',
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -65,8 +63,6 @@ export class CedarTemplateFormComponent {
 
   private route = inject(ActivatedRoute);
   readonly environment = inject(ENVIRONMENT);
-  private platformId = inject(PLATFORM_ID);
-  readonly cedarLoaded = signal<boolean>(false);
 
   readonly recordId = signal<string>('');
   readonly downloadUrl = signal<string>('');
@@ -93,15 +89,15 @@ export class CedarTemplateFormComponent {
     effect(() => {
       const tpl = this.template();
       if (tpl?.attributes?.template) {
-        this.loadCedarLibraries().then(() => this.initializeCedar());
+        this.initializeCedar();
       }
     });
 
     effect(() => {
       const record = this.existingRecord();
       this.schemaName.set(record?.embeds?.template.data.attributes.schema_name || '');
       if (record) {
-        this.loadCedarLibraries().then(() => this.initializeCedar());
+        this.initializeCedar();
       }
     });
   }
@@ -138,19 +134,6 @@ export class CedarTemplateFormComponent {
     }
   }
 
-  private async loadCedarLibraries(): Promise<void> {
-    if (!isPlatformBrowser(this.platformId) || this.cedarLoaded()) {
-      return;
-    }
-
-    try {
-      await Promise.all([import('cedar-artifact-viewer'), import('cedar-embeddable-editor')]);
-      this.cedarLoaded.set(true);
-    } catch {
-      this.cedarLoaded.set(false);
-    }
-  }
-
   downloadMetadadaRecord() {
     if (this.fileGuid()) {
       window.open(`${this.environment.webUrl}/metadata/${this.fileGuid()}`)?.focus();

src/app/features/profile/components/profile-information/profile-information.component.html

@@ -14,12 +14,10 @@ <h1>{{ currentUser()?.fullName }}</h1>
 
     <div class="flex flex-column gap-4 min-w-0 xl:align-items-end xl:flex-1">
       <div class="flex flex-column gap-3 w-full md:flex-row xl:gap-4 xl:justify-content-end">
-        @if (currentUser()?.social?.orcid) {
+        @if (orcidId()) {
           <div class="flex flex-row align-items-center gap-2">
             <img ngSrc="assets/icons/colored/orcid.svg" width="16" height="16" alt="orcid" />
-            <a class="dark-blue-two-link font-bold" [href]="'https://orcid.org/' + currentUser()?.social?.orcid">
-              https://orcid.org/{{ currentUser()?.social?.orcid }}
-            </a>
+            <a class="font-bold" [href]="'https://orcid.org/' + orcidId()"> https://orcid.org/{{ orcidId() }} </a>
           </div>
         }
 

src/app/features/profile/components/profile-information/profile-information.component.ts

@@ -43,6 +43,11 @@ export class ProfileInformationComponent {
 
   userSocials = computed(() => mapUserSocials(this.currentUser()?.social, SOCIAL_LINKS));
 
+  orcidId = computed(() => {
+    const orcid = this.currentUser()?.external_identity?.ORCID;
+    return orcid?.status?.toUpperCase() === 'VERIFIED' ? orcid.id : undefined;
+  });
+
   toProfileSettings() {
     this.editProfile.emit();
   }

src/app/shared/enums/subscriptions/subscription-frequency.enum.ts

@@ -1,5 +1,5 @@
 export enum SubscriptionFrequency {
   Never = 'none',
   Daily = 'daily',
-  Instant = 'instant',
+  Instant = 'instantly',
 }

src/app/shared/mappers/user/user.mapper.ts

@@ -32,6 +32,7 @@ export class UserMapper {
       employment: user.attributes.employment,
       iri: user.links.iri,
       social: user.attributes.social,
+      external_identity: user.attributes.external_identity,
       defaultRegionId: user.relationships?.default_region?.data?.id,
       canViewReviews: user.attributes.can_view_reviews === true, // [NS] Do not simplify it
       timezone: user.attributes.timezone,