Merge pull request #2757 from ORCID/lmendoza/PD-5079

PD-5079

Author: cryptalith

projects/orcid-registry-ui/src/lib/components/import-works-dialog/import-works-dialog.component.html

@@ -72,10 +72,7 @@
             *ngFor="let link of certifiedLinks"
             class="import-works-dialog__card import-works-dialog__card--certified"
           >
-            <div
-              class="import-works-dialog__card-icon"
-              *ngIf="link.imageUrl || link.icon"
-            >
+            <div class="import-works-dialog__card-icon">
               <img
                 *ngIf="link.imageUrl"
                 [src]="link.imageUrl"
@@ -87,6 +84,18 @@
                 [attr.aria-hidden]="true"
                 >{{ link.icon }}</mat-icon
               >
+              <ng-container *ngIf="!link.imageUrl && !link.icon">
+                <img
+                  *ngIf="placeholderIconUrl"
+                  [src]="placeholderIconUrl"
+                  alt=""
+                  class="import-works-dialog__card-img import-works-dialog__card-img--placeholder"
+                  aria-hidden="true"
+                />
+                <mat-icon *ngIf="!placeholderIconUrl" [attr.aria-hidden]="true"
+                  >link</mat-icon
+                >
+              </ng-container>
             </div>
             <div class="import-works-dialog__card-content">
               <p class="import-works-dialog__card-title">{{ link.name }}</p>
@@ -130,7 +139,12 @@
       aria-labelledby="import-works-more-heading"
       *ngIf="loading || moreServicesLinks.length"
     >
-      <div class="import-works-dialog__more-panel">
+      <div
+        class="import-works-dialog__more-panel"
+        [class.import-works-dialog__more-panel--collapsed]="
+          !moreServicesExpanded
+        "
+      >
         <div
           class="import-works-dialog__more-header"
           (click)="toggleMoreServices()"

projects/orcid-registry-ui/src/lib/components/import-works-dialog/import-works-dialog.component.scss

@@ -118,6 +118,10 @@
     width: 48px;
     height: 48px;
     object-fit: contain;
+
+    &--placeholder {
+      object-fit: contain;
+    }
   }
 
   mat-icon {
@@ -239,6 +243,10 @@
   border-bottom: 1px solid var(--orcid-ui-background-light, #eeeeee);
   border-radius: var(--orcid-space-1, 4px);
   overflow: hidden;
+
+  &--collapsed {
+    border-bottom: none;
+  }
 }
 
 .import-works-dialog__more-header {

projects/orcid-registry-ui/src/lib/components/import-works-dialog/import-works-dialog.component.ts

@@ -126,6 +126,11 @@ export class ImportWorksDialogComponent {
     return this.data?.moreServicesLinks ?? []
   }
 
+  /** URL for the placeholder icon when a service has no imageUrl or icon. */
+  get placeholderIconUrl(): string | undefined {
+    return this.data?.placeholderIconUrl
+  }
+
   openInNewTab(url: string): void {
     if (url) {
       window.open(url, '_blank', 'noopener,noreferrer')

projects/orcid-registry-ui/src/lib/components/import-works-dialog/import-works-dialog.types.ts

@@ -67,4 +67,9 @@ export interface ImportWorksDialogData {
   certifiedLinks: ImportWorksCertifiedLink[]
   /** Ordered list of links shown under the more services heading. */
   moreServicesLinks: ImportWorksMoreLink[]
+  /**
+   * Optional URL for the placeholder icon shown when a service has no imageUrl or icon
+   * (e.g. assets/vectors/CSPs/csp-placeholder.svg).
+   */
+  placeholderIconUrl?: string
 }

src/app/core/record-works/record-works.service.spec.ts

@@ -150,12 +150,18 @@ describe('RecordWorksService', () => {
         done()
       })
 
-      const req = httpTestingController.expectOne(
+      const wizardReq = httpTestingController.expectOne(
         runtimeEnvironment.API_WEB +
           'workspace/retrieve-works-search-and-link-wizard.json'
       )
-      expect(req.request.method).toBe('GET')
-      req.flush(listPayload)
+      expect(wizardReq.request.method).toBe('GET')
+      wizardReq.flush(listPayload)
+
+      // Service also requests localize .properties when CERTIFIED_LINKS_LOCALIZE_BASE_URL is set
+      const localizeReqs = httpTestingController.match((req) =>
+        req.url.includes('works-search-and-link') && req.url.endsWith('.properties')
+      )
+      localizeReqs.forEach((r) => r.flush(''))
     })
 
     it('returns empty certified and more lists when API returns empty array', (done) => {
@@ -166,11 +172,16 @@ describe('RecordWorksService', () => {
         done()
       })
 
-      const req = httpTestingController.expectOne(
+      const wizardReq = httpTestingController.expectOne(
         runtimeEnvironment.API_WEB +
           'workspace/retrieve-works-search-and-link-wizard.json'
       )
-      req.flush([])
+      wizardReq.flush([])
+
+      const localizeReqs = httpTestingController.match((req) =>
+        req.url.includes('works-search-and-link') && req.url.endsWith('.properties')
+      )
+      localizeReqs.forEach((r) => r.flush(''))
     })
   })
 })

src/app/core/record-works/record-works.service.ts

@@ -614,6 +614,7 @@ export class RecordWorksService {
       connectedAriaLabelTemplate: $localize`:@@works.connectedWithCsp:Connected with {{name}}`,
       certifiedLinks,
       moreServicesLinks,
+      placeholderIconUrl: 'assets/vectors/CSPs/csp-placeholder.svg',
     }
   }
 
@@ -645,7 +646,10 @@ export class RecordWorksService {
     return forkJoin({ list: list$, localize: localize$ }).pipe(
       map(({ list, localize }) => {
         const localizeByClientId = this._parsePropertiesFile(localize)
-        const certifiedLinks: ImportWorksCertifiedLink[] = []
+        const certifiedForList: Array<{
+          link: ImportWorksCertifiedLink
+          index: number
+        }> = []
         const featuredForMore: Array<{
           link: ImportWorksMoreLink
           index: number
@@ -663,20 +667,29 @@ export class RecordWorksService {
             scopes,
             redirectUri
           )
-          const imageUrl = item.redirectUriMetadata?.logoUrl
+          // Backend returns redirectUriMetadata from DB as-is; logoUrl may be absent (Certified can have no logo)
+          const rawLogoUrl = item.redirectUriMetadata?.logoUrl
+          const imageUrl =
+            typeof rawLogoUrl === 'string' && rawLogoUrl.trim() !== ''
+              ? rawLogoUrl.trim()
+              : undefined
 
           if (type === 'Certified') {
             const description =
               localizeByClientId[`${item.id}-client-description`] ??
               localizeByClientId[item.id] ??
               item.redirectUriMetadata?.defaultDescription ??
               ''
-            certifiedLinks.push({
-              name,
-              description,
-              url: oauthUrl,
-              connected,
-              imageUrl,
+            const index = item.redirectUriMetadata?.index ?? 999
+            certifiedForList.push({
+              link: {
+                name,
+                description,
+                url: oauthUrl,
+                connected,
+                imageUrl,
+              },
+              index,
             })
           } else if (type === 'Featured') {
             const description =
@@ -695,7 +708,15 @@ export class RecordWorksService {
           }
         }
 
+        certifiedForList.sort((a, b) => a.index - b.index)
+        const certifiedLinks: ImportWorksCertifiedLink[] = certifiedForList.map(
+          (x) => x.link
+        )
+
         featuredForMore.sort((a, b) => a.index - b.index)
+        defaultForMore.sort((a, b) =>
+          a.name.localeCompare(b.name, undefined, { sensitivity: 'base' })
+        )
         const moreServicesLinks: ImportWorksMoreLink[] = [
           ...featuredForMore.map((x) => x.link),
           ...defaultForMore,