Merge pull request #3056 from alexandrevryghem/minor-ui-improvements_…

…contribute-main Fixed item-edit.cy.ts regularly failing & minor UI improvements
DSpace · May 16, 2024 · d74e672 · d74e672
2 parents 02e91dd + 56c786d
commit d74e672
Show file tree

Hide file tree

Showing 20 changed files with 46 additions and 70 deletions.
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/...e-page/my-dspace-qa-events-notifications/my-dspace-qa-events-notifications.component.scss b/...e-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/...dit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html b/...dit-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/...-list-element/community-search-result/community-search-result-list-element.component.html b/...-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
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 +0,0 @@
		@import '../login-page/login-page.component.scss';