PD-4980,PD-4979,PD-4977,PD-4978 + Improve my-orcid rendering resources (#2744)

* PD-4978

* PD-4978

* PD-4978

Author: cryptalith

projects/orcid-registry-ui/src/lib/components/permission-notifications/permission-notifications.component.scss

@@ -8,11 +8,6 @@
   gap: var(--orcid-space-4, 16px);
 }
 
-.permission-notifications__list ::ng-deep .action-surface__text {
-  font-size: var(--orcid-font-size-body-small, 14px);
-  line-height: 21px;
-}
-
 .registry-brand-secondary-dark:hover {
   background-color: var(--orcid-color-brand-secondary-dark, #085c77);
 }

projects/orcid-ui/src/lib/components/action-surface-container/action-surface-container.component.html

@@ -1,8 +1,11 @@
 <section class="action-surface-container">
   <header class="action-surface-container__header">
-    <h2 class="action-surface-container__title orc-font-body" *ngIf="title">
+    <h3
+      class="action-surface-container__title orcid-font-size-body-large"
+      *ngIf="title"
+    >
       {{ title }}
-    </h2>
+    </h3>
     <p
       class="action-surface-container__subtitle orc-font-body-small"
       *ngIf="subtitle"

projects/orcid-ui/src/lib/components/action-surface-container/action-surface-container.component.scss

@@ -25,7 +25,7 @@
     -apple-system,
     sans-serif
   );
-  font-size: 20px;
+  font-size: var(--orcid-font-size-body, 16px);
   line-height: 1.25;
   font-weight: var(--orcid-font-weight-bold, 700);
   color: var(--orcid-color-text-dark-high, #000000);

src/app/core/inbox/permission-notifications.service.spec.ts

@@ -322,18 +322,18 @@ describe('PermissionNotificationsService', () => {
     })
   })
 
-  it('should sort by sentDate descending', (done) => {
+  it('should sort by createdDate descending', (done) => {
     const perm1 = createPermissionNotification({
       putCode: 1,
-      sentDate: 1000,
+      createdDate: 1000,
       source: {
         sourceClientId: { path: 'client-a' } as any,
         sourceName: { content: 'A' },
       },
     })
     const perm2 = createPermissionNotification({
       putCode: 2,
-      sentDate: 3000,
+      createdDate: 3000,
       source: {
         sourceClientId: { path: 'client-b' } as any,
         sourceName: { content: 'B' },
@@ -346,8 +346,8 @@ describe('PermissionNotificationsService', () => {
     )
 
     service.loadUnreadPermissionNotifications(3).subscribe((result) => {
-      expect(result[0].sentDate).toBe(3000)
-      expect(result[1].sentDate).toBe(1000)
+      expect(result[0].createdDate).toBe(3000)
+      expect(result[1].createdDate).toBe(1000)
       done()
     })
   })

src/app/core/inbox/permission-notifications.service.ts

@@ -97,7 +97,11 @@ export class PermissionNotificationsService {
         (n): n is InboxNotificationPermission =>
           n?.notificationType === 'PERMISSION' && !n.readDate && !n.archivedDate
       )
-      .sort((a, b) => Number(b.sentDate || 0) - Number(a.sentDate || 0))
+      .sort(
+        (a, b) =>
+          new Date(b.createdDate || 0).getTime() -
+          new Date(a.createdDate || 0).getTime()
+      )
     const byClient = new Map<string, InboxNotificationPermission>()
     for (const n of unreadPermission) {
       const clientId = n?.source?.sourceClientId?.path
@@ -106,7 +110,9 @@ export class PermissionNotificationsService {
       if (!byClient.has(clientId)) byClient.set(clientId, n)
     }
     return Array.from(byClient.values()).sort(
-      (a, b) => Number(b.sentDate || 0) - Number(a.sentDate || 0)
+      (a, b) =>
+        new Date(b.createdDate || 0).getTime() -
+        new Date(a.createdDate || 0).getTime()
     )
   }
 }

src/app/layout/language/language.component.ts

@@ -1,4 +1,9 @@
-import { Component, OnInit, Inject, LOCALE_ID } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  LOCALE_ID,
+} from '@angular/core'
 
 import { WINDOW } from 'src/app/cdk/window'
 import { LanguageService } from 'src/app/core/language/language.service'
@@ -8,8 +13,9 @@ import { LanguageService } from 'src/app/core/language/language.service'
   templateUrl: './language.component.html',
   styleUrls: ['./language.component.scss'],
   standalone: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class LanguageComponent implements OnInit {
+export class LanguageComponent {
   languageMenuOptions: { [key: string]: string }
   labelLanguage = $localize`:@@layout.ariaLabelLanguage:Select your preferred language. Current language is`
 
@@ -31,6 +37,4 @@ export class LanguageComponent implements OnInit {
       this.window.location.reload()
     })
   }
-
-  ngOnInit() {}
 }

src/app/layout/maintenance-message/maintenance-message.component.ts

@@ -1,6 +1,11 @@
-import { Component, OnInit } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+} from '@angular/core'
 import { TogglzService } from 'src/app/core/togglz/togglz.service'
 import { MaintenanceMessage } from 'src/app/types/togglz.local'
+import { take } from 'rxjs/operators'
 
 @Component({
   selector: 'app-maintenance-message',
@@ -10,17 +15,20 @@ import { MaintenanceMessage } from 'src/app/types/togglz.local'
     './maintenance-message.component.scss',
   ],
   standalone: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MaintenanceMessageComponent implements OnInit {
+export class MaintenanceMessageComponent {
   maintenanceMessage: MaintenanceMessage
   closableElement: Element
   labelMaintenance = $localize`:@@layout.ariaLabelMaintenance:Maintenance message`
 
-  constructor(togglz: TogglzService) {
-    togglz.getMaintenanceMessages().subscribe((value) => {
-      this.maintenanceMessage = value
-    })
+  constructor(togglz: TogglzService, private cdr: ChangeDetectorRef) {
+    togglz
+      .getMaintenanceMessages()
+      .pipe(take(1))
+      .subscribe((value) => {
+        this.maintenanceMessage = value
+        this.cdr.markForCheck()
+      })
   }
-
-  ngOnInit() {}
 }

src/app/record/components/top-bar/top-bar.component.scss

@@ -147,6 +147,7 @@ app-top-bar-actions {
   }
 }
 
-app-warning-message {
+app-warning-message,
+orcid-registry-permission-notifications {
   margin-bottom: 16px;
 }

src/app/record/components/top-bar/top-bar.component.ts

@@ -191,7 +191,7 @@ export class TopBarComponent implements OnInit, OnDestroy {
               (_, i) => i !== event.notificationIndex
             )
           if (target) {
-            ;(this.window as any).outOfRouterNavigation(target)
+            this.window.open(target, '_blank')
           }
         })
       return