Merge pull request DSpace#3056 from alexandrevryghem/minor-ui-improvements_contribute-main

tdonohue · web-flow · commit d74e67299738 · 2024-05-16T13:21:46.000-05:00
Fixed item-edit.cy.ts regularly failing &amp; minor UI improvements
diff --git a/cypress/e2e/item-edit.cy.ts b/cypress/e2e/item-edit.cy.ts
@@ -18,6 +18,11 @@ describe('Edit Item > Edit Metadata tab', () => {
     // <ds-edit-item-page> tag must be loaded
     cy.get('ds-edit-item-page').should('be.visible');
 
+    // wait for all the ds-dso-edit-metadata-value components to be rendered
+    cy.get('ds-dso-edit-metadata-value div[role="row"]').each(($row: HTMLDivElement) => {
+      cy.wrap($row).find('div[role="cell"]').should('be.visible');
+    });
+
     // Analyze <ds-edit-item-page> for accessibility issues
     testA11y('ds-edit-item-page');
   });
diff --git a/cypress/e2e/submission.cy.ts b/cypress/e2e/submission.cy.ts
@@ -137,7 +137,7 @@ describe('New Submission page', () => {
 
     // Upload our DSpace logo via drag & drop onto submission form
     // cy.get('div#section_upload')
-    cy.get('div.ds-document-drop-zone').selectFile('src/assets/images/dspace-logo.png', {
+    cy.get('div.ds-document-drop-zone').selectFile('src/assets/images/dspace-logo.svg', {
       action: 'drag-drop',
     });
 
diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
@@ -84,7 +84,7 @@ <h5 class="text-uppercase">Footer Content</h5>
     </div>
     <div *ngIf="coarLdnEnabled$ | async" class="notify-enabled text-white">
       <a class="coar-notify-support-route" routerLink="info/coar-notify-support">
-        <img class="n-coar" src="assets/images/n-coar.png" [attr.alt]="'menu.header.image.logo' | translate" />
+        <img class="n-coar" src="assets/images/n-coar.svg" [attr.alt]="'menu.header.image.logo' | translate" />
         {{ 'footer.link.coar-notify-support' | translate }}
       </a>
     </div>
diff --git a/src/app/info/notify-info/notify-info.component.html b/src/app/info/notify-info/notify-info.component.html
@@ -1,18 +1,13 @@
 <div class="container">
-    <head>
-        <title>{{ 'coar-notify-support.title' | translate }}</title>
-    </head>
-    <body>
-    <h1>{{ 'coar-notify-support.title' | translate }}</h1>
-    <p [innerHTML]="('coar-notify-support-title.content' | translate)"></p>
+  <h1>{{ 'coar-notify-support.title' | translate }}</h1>
+  <p [innerHTML]="'coar-notify-support-title.content' | translate"></p>
 
-    <h2>{{ 'coar-notify-support.ldn-inbox.title' | translate }}</h2>
-    <p [innerHTML]="('coar-notify-support.ldn-inbox.content' | translate).replace('{ldnInboxUrl}', generateCoarRestApiLinksHTML() | async)"></p>
+  <h2>{{ 'coar-notify-support.ldn-inbox.title' | translate }}</h2>
+  <p [innerHTML]="'coar-notify-support.ldn-inbox.content' | translate:{ ldnInboxUrl: coarRestApiUrls$ | async }"></p>
 
-    <h2>{{ 'coar-notify-support.message-moderation.title' | translate }}</h2>
-    <p>
-      {{ 'coar-notify-support.message-moderation.content' | translate }}
-      <a routerLink="/info/feedback" >{{ 'coar-notify-support.message-moderation.feedback-form' | translate }}</a>
-    </p>
-    </body>
+  <h2>{{ 'coar-notify-support.message-moderation.title' | translate }}</h2>
+  <p>
+    {{ 'coar-notify-support.message-moderation.content' | translate }}
+    <a routerLink="/info/feedback">{{ 'coar-notify-support.message-moderation.feedback-form' | translate }}</a>
+  </p>
 </div>
diff --git a/src/app/info/notify-info/notify-info.component.spec.ts b/src/app/info/notify-info/notify-info.component.spec.ts
@@ -16,7 +16,9 @@ describe('NotifyInfoComponent', () => {
   let notifyInfoServiceSpy: any;
 
   beforeEach(async () => {
-    notifyInfoServiceSpy = jasmine.createSpyObj('NotifyInfoService', ['getCoarLdnLocalInboxUrls']);
+    notifyInfoServiceSpy = jasmine.createSpyObj('NotifyInfoService', {
+      getCoarLdnLocalInboxUrls: of([]),
+    });
 
     await TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot(), NotifyInfoComponent],
@@ -31,8 +33,7 @@ describe('NotifyInfoComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(NotifyInfoComponent);
     component = fixture.componentInstance;
-    component.coarRestApiUrl = of([]);
-    spyOn(component, 'generateCoarRestApiLinksHTML').and.returnValue(of(''));
+    component.coarRestApiUrls$ = of('');
     fixture.detectChanges();
   });
 
diff --git a/src/app/info/notify-info/notify-info.component.ts b/src/app/info/notify-info/notify-info.component.ts
@@ -8,7 +8,6 @@ import { TranslateModule } from '@ngx-translate/core';
 import {
   map,
   Observable,
-  of,
 } from 'rxjs';
 
 import { NotifyInfoService } from '../../core/coar-notify/notify-info/notify-info.service';
@@ -31,26 +30,17 @@ export class NotifyInfoComponent implements OnInit {
   /**
    * Observable containing the COAR REST INBOX API URLs.
    */
-  coarRestApiUrl: Observable<string[]> = of([]);
+  coarRestApiUrls$: Observable<string>;
 
-  constructor(private notifyInfoService: NotifyInfoService) {}
-
-  ngOnInit() {
-    this.coarRestApiUrl = this.notifyInfoService.getCoarLdnLocalInboxUrls();
+  constructor(
+    protected notifyInfoService: NotifyInfoService,
+  ) {
   }
 
-  /**
-   * Generates HTML code for COAR REST API links.
-   * @returns An Observable that emits the generated HTML code.
-   */
-  generateCoarRestApiLinksHTML() {
-    return this.coarRestApiUrl.pipe(
-      // transform the data into HTML
-      map((urls) => {
-        return urls.map(url => `
-          <code><a href="${url}" target="_blank"><span class="api-url">${url}</span></a></code>
-        `).join(',');
-      }),
+  ngOnInit() {
+    this.coarRestApiUrls$ = this.notifyInfoService.getCoarLdnLocalInboxUrls().pipe(
+      map((urls: string[]) => urls.map((url: string) => `<a href="${url}" target="_blank">${url}</a>`).join(', ')),
     );
   }
+
 }
diff --git a/src/app/login-page/login-page.component.html b/src/app/login-page/login-page.component.html
@@ -1,7 +1,7 @@
 <div class="container w-100 h-100">
   <div class="text-center mt-5 row justify-content-center">
     <div>
-      <img class="mb-4 login-logo" src="assets/images/dspace-logo.png" alt="{{'repository.image.logo' | translate}}">
+      <img class="mb-4 login-logo" src="assets/images/dspace-logo.svg" [alt]="'repository.image.logo' | translate">
       <h1 class="h3 mb-0 font-weight-normal">{{"login.form.header" | translate}}</h1>
       <ds-log-in
       [isStandalonePage]="true"></ds-log-in>
diff --git a/src/app/logout-page/logout-page.component.html b/src/app/logout-page/logout-page.component.html
@@ -1,7 +1,7 @@
 <div class="container w-100 h-100">
   <div class="text-center mt-5 row justify-content-md-center">
     <div class="mx-auto">
-      <img class="mb-4 login-logo" src="assets/images/dspace-logo.png">
+      <img class="mb-4 login-logo" src="assets/images/dspace-logo.svg" [alt]="'repository.image.logo' | translate">
       <h1 class="h3 mb-0 font-weight-normal">{{"logout.form.header" | translate}}</h1>
       <ds-log-out></ds-log-out>
     </div>
diff --git a/src/app/my-dspace-page/my-dspace-qa-events-notifications/my-dspace-qa-events-notifications.component.scss b/src/app/my-dspace-page/my-dspace-qa-events-notifications/my-dspace-qa-events-notifications.component.scss
@@ -1,5 +1,7 @@
 .source-logo {
   max-height: var(--ds-header-logo-height);
+  max-width: 100%;
+  margin: auto;
 }
 
 .source-logo-container {
diff --git a/src/app/shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component.html b/src/app/shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component.html
@@ -11,9 +11,10 @@ <h1>{{ type + '.edit.head' | translate }}</h1>
         </div>
       </div>
       <div class="pt-2">
-        <ul class="nav nav-tabs justify-content-start mb-2">
-          <li *ngFor="let page of pages" class="nav-item">
-            <a class="nav-link"
+        <ul class="nav nav-tabs justify-content-start mb-2" role="tablist">
+          <li *ngFor="let page of pages" class="nav-item" role="presentation">
+            <a class="nav-link" role="tab"
+               [attr.aria-selected]="page === currentPage"
                [ngClass]="{'active' : page === currentPage}"
                [routerLink]="['./' + page]"
                [attr.data-test]="page">
diff --git a/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html b/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html
@@ -1,6 +1,6 @@
 <div class="dso-button-menu mb-1" ngbDropdown container="body" placement="bottom-right">
     <div class="d-flex flex-row flex-nowrap"
-         [ngbTooltip]="itemModel.text | translate">
+         [ngbTooltip]="itemModel.text | translate" container="body">
         <button [attr.aria-label]="itemModel.text | translate" [title]="itemModel.text | translate" class="btn btn-dark btn-sm" ngbDropdownToggle [disabled]="section.model?.disabled">
             <i class="fas fa-{{section.icon}} fa-fw"></i>
         </button>
diff --git a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.html b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.html
@@ -1,5 +1,5 @@
 <div class="row">
-  <div *ngIf="showThumbnails" class="offset-md-2"></div>
+  <div *ngIf="showThumbnails" class="offset-3 offset-md-2"></div>
   <div [ngClass]="showThumbnails ? 'col-9' : 'col-md-12'">
     <ds-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-badges>
     <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null"  [routerLink]="['/communities/' + dso.id]" class="lead" [innerHTML]="dsoTitle"></a>
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
@@ -6098,11 +6098,11 @@
 
   "coar-notify-support.title": "COAR Notify Protocol",
 
-  "coar-notify-support-title.content": "Here, we fully support the COAR Notify protocol, which is designed to enhance the communication between repositories. To learn more about the COAR Notify protocol, visit the <a href=\\\"https://notify.coar-repositories.org/\\\">COAR Notify website</a>.",
+  "coar-notify-support-title.content": "Here, we fully support the COAR Notify protocol, which is designed to enhance the communication between repositories. To learn more about the COAR Notify protocol, visit the <a href=\"https://notify.coar-repositories.org/\" rel=\"noopener noreferrer\">COAR Notify website</a>.",
 
   "coar-notify-support.ldn-inbox.title": "LDN InBox",
 
-  "coar-notify-support.ldn-inbox.content": "For your convenience, our LDN (Linked Data Notifications) InBox is easily accessible at {ldnInboxUrl}. The LDN InBox enables seamless communication and data exchange, ensuring efficient and effective collaboration.",
+  "coar-notify-support.ldn-inbox.content": "For your convenience, our LDN (Linked Data Notifications) InBox is easily accessible at {{ ldnInboxUrl }}. The LDN InBox enables seamless communication and data exchange, ensuring efficient and effective collaboration.",
 
   "coar-notify-support.message-moderation.title": "Message Moderation",
 
diff --git a/src/assets/images/dspace-logo.png b/src/assets/images/dspace-logo.png
diff --git a/src/assets/images/n-coar.png b/src/assets/images/n-coar.png
diff --git a/src/assets/images/n-coar.svg b/src/assets/images/n-coar.svg
@@ -0,0 +1,6 @@
+<svg width="367" height="352" viewBox="1 8 367 352" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M1.000000,112.468658 C28.460188,112.000000 55.920376,112.000000 83.861267,112.000000 C83.861267,120.100616 83.861267,127.838646 83.861267,136.716187 C88.158173,133.530884 91.644302,131.017258 95.055443,128.405685	C109.562279,117.299171 126.044762,111.190887 144.069199,108.990402 C161.729889,106.834335 179.232635,107.440422 196.517853,112.003220 C199.855698,112.884315 201.765640,114.390289 203.238235,118.011223 C211.607788,138.590958 225.554047,154.635437 244.578156,166.145599 C248.466110,168.497910 252.836349,170.062042 256.679718,172.474686 C258.202148,173.430389 259.582550,175.605087 259.851746,177.401047 C261.428253,187.918213 263.677734,198.473038 263.828400,209.041840 C264.537628,258.791290 264.639313,308.549377 264.948181,358.304474 C264.950165,358.622345 264.817322,358.941071 264.666168,359.629364 C235.702515,359.629364 206.659607,359.629364 177.000198,359.629364 C177.000198,357.688354 177.000198,355.750732 177.000198,353.813110 C177.000168,311.991974 177.177307,270.169556 176.873703,228.350601 C176.799194,218.088516 174.846802,208.071838 169.533707,198.749969 C163.338669,187.880661 153.487213,183.232407 142.134903,182.210815 C123.545181,180.537918 107.253761,186.390671 97.170731,202.814651 C92.813103,209.912674 89.559502,218.904343 89.347443,227.127167 C88.262466,269.196838 88.332520,311.296265 88.001801,353.385315 C87.986267,355.362061 87.999809,357.338989 87.999809,360.000397 C59.107670,360.000397 30.522491,360.000397 1.468657,360.000183 C1.000000,277.645782 1.000000,195.291550 1.000000,112.468658z"
+    fill="#7DC34B"/>
+  <circle cx="296" cy="80" fill="#7DC34B" r="72"/>
+</svg>
diff --git a/src/themes/custom/app/login-page/login-page.component.html b/src/themes/custom/app/login-page/login-page.component.html
@@ -1,10 +0,0 @@
-<div class="container w-100 h-100">
-  <div class="text-center mt-5 row justify-content-center">
-    <div>
-      <img class="mb-4 login-logo" src="assets/images/dspace-logo.png">
-      <h1 class="h3 mb-0 font-weight-normal">{{"login.form.header" | translate}}</h1>
-      <ds-log-in
-      [isStandalonePage]="true"></ds-log-in>
-    </div>
-  </div>
-</div>
diff --git a/src/themes/custom/app/login-page/login-page.component.scss b/src/themes/custom/app/login-page/login-page.component.scss
@@ -1,4 +0,0 @@
-.login-logo {
-  height: var(--ds-login-logo-height);
-  width: var(--ds-login-logo-width);
-}
diff --git a/src/themes/custom/app/logout-page/logout-page.component.html b/src/themes/custom/app/logout-page/logout-page.component.html
@@ -1,9 +0,0 @@
-<div class="container w-100 h-100">
-  <div class="text-center mt-5 row justify-content-md-center">
-    <div class="mx-auto">
-      <img class="mb-4 login-logo" src="assets/images/dspace-logo.png">
-      <h1 class="h3 mb-0 font-weight-normal">{{"logout.form.header" | translate}}</h1>
-      <ds-log-out></ds-log-out>
-    </div>
-  </div>
-</div>
diff --git a/src/themes/custom/app/logout-page/logout-page.component.scss b/src/themes/custom/app/logout-page/logout-page.component.scss
@@ -1 +0,0 @@
-@import '../login-page/login-page.component.scss';

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,7 @@`
`1`	`1`	`.source-logo {`
`2`	`2`	`max-height: var(--ds-header-logo-height);`
	`3`	`+ max-width: 100%;`
	`4`	`+ margin: auto;`
`3`	`5`	`}`
`4`	`6`
`5`	`7`	`.source-logo-container {`