Fix/586 metadata page

src/app/features/collections/components/add-to-collection/project-contributors-step/project-contributors-step.component.html

@@ -41,7 +41,6 @@ <h3>{{ 'collections.addToCollection.projectContributors' | translate }}</h3>
           class="w-full"
           [contributors]="projectContributors()"
           [isLoading]="isContributorsLoading()"
-          [showCuratorColumn]="false"
           (remove)="handleRemoveContributor($event)"
         ></osf-contributors-list>
 

src/app/features/home/pages/dashboard/dashboard.component.ts

@@ -70,7 +70,7 @@ export class DashboardComponent implements OnInit {
     return this.projects().filter((project) => project.title.toLowerCase().includes(search));
   });
 
-  protected readonly existsProjects = computed(() => {
+  readonly existsProjects = computed(() => {
     return this.projects().length || !!this.searchControl.value?.length;
   });
 

src/app/features/metadata/components/metadata-affiliated-institutions/metadata-affiliated-institutions.component.html

@@ -7,6 +7,7 @@ <h2>{{ 'project.overview.metadata.affiliatedInstitutions' | translate }}</h2>
         severity="secondary"
         [label]="'common.buttons.edit' | translate"
         (onClick)="openEditAffiliatedInstitutionsDialog.emit()"
+        data-test-edit-institutions-button
       ></p-button>
     }
   </div>

src/app/features/metadata/components/metadata-contributors/metadata-contributors.component.html

@@ -7,6 +7,7 @@ <h2>{{ 'project.overview.metadata.contributors' | translate }}</h2>
         (onClick)="openEditContributorDialog.emit()"
         severity="secondary"
         [label]="'common.buttons.edit' | translate"
+        data-test-edit-contributors-button
       ></p-button>
     }
   </div>
@@ -15,7 +16,9 @@ <h2>{{ 'project.overview.metadata.contributors' | translate }}</h2>
     <div class="inline-flex gap-1 line-height-2 mt-4">
       @for (contributor of contributors(); track contributor.id) {
         <div>
-          <a class="font-bold" [routerLink]="['/user', contributor.userId]"> {{ contributor.fullName }}</a>
+          <a class="font-bold" [routerLink]="['/user', contributor.userId]" data-test-contributor-name>
+            {{ contributor.fullName }}
+          </a>
           <span>{{ $last ? '' : ',' }}</span>
         </div>
       }

src/app/features/metadata/components/metadata-description/metadata-description.component.html

@@ -7,6 +7,7 @@ <h2>{{ 'project.overview.metadata.description' | translate }}</h2>
         severity="secondary"
         [label]="'common.buttons.edit' | translate"
         (onClick)="openEditDescriptionDialog.emit()"
+        data-test-edit-description-button
       ></p-button>
     }
   </div>

src/app/features/metadata/components/metadata-funding/metadata-funding.component.html

@@ -7,6 +7,7 @@ <h2>{{ 'project.overview.metadata.fundingSupport' | translate }}</h2>
         severity="secondary"
         [label]="'common.buttons.edit' | translate"
         (onClick)="openEditFundingDialog.emit()"
+        data-test-edit-funding-button
       ></p-button>
     }
   </div>
@@ -15,22 +16,29 @@ <h2>{{ 'project.overview.metadata.fundingSupport' | translate }}</h2>
     <div class="mt-4">
       @for (funder of funders(); track funder.funderIdentifier) {
         <div class="surface-border flex flex-column gap-2" [ngClass]="{ 'mb-3 pb-3 border-bottom-1': !$last }">
-          <p>{{ 'files.detail.resourceMetadata.fields.funder' | translate }}: {{ funder.funderName }}</p>
+          <p data-test-display-funder-name>
+            {{ 'files.detail.resourceMetadata.fields.funder' | translate }}: {{ funder.funderName }}
+          </p>
+
           @if (funder.awardTitle) {
-            <p>{{ 'files.detail.resourceMetadata.fields.awardTitle' | translate }}: {{ funder.awardTitle }}</p>
+            <p data-test-display-funder-award-title>
+              {{ 'files.detail.resourceMetadata.fields.awardTitle' | translate }}: {{ funder.awardTitle }}
+            </p>
           }
 
           @if (funder.awardUri) {
             <p>
               {{ 'files.detail.resourceMetadata.fields.awardUri' | translate }}:
-              <a class="font-bold" [href]="funder.awardUri" target="_blank">
+              <a class="font-bold" [href]="funder.awardUri" target="_blank" data-test-display-funder-award-uri>
                 {{ funder.awardUri }}
               </a>
             </p>
           }
 
           @if (funder.awardNumber) {
-            <p>{{ 'files.detail.resourceMetadata.fields.awardNumber' | translate }}: {{ funder.awardNumber }}</p>
+            <p data-test-display-funder-award-number>
+              {{ 'files.detail.resourceMetadata.fields.awardNumber' | translate }}: {{ funder.awardNumber }}
+            </p>
           }
         </div>
       }

src/app/features/metadata/components/metadata-license/metadata-license.component.html

@@ -7,11 +7,12 @@ <h2>{{ 'project.overview.metadata.license' | translate }}</h2>
         severity="secondary"
         [label]="'common.buttons.edit' | translate"
         (onClick)="openEditLicenseDialog.emit()"
+        data-test-edit-license-button
       />
     }
   </div>
 
   <div class="mt-4">
-    <p>{{ license()?.name || ('project.overview.metadata.noLicense' | translate) }}</p>
+    <p data-test-target-license-name>{{ license()?.name || ('project.overview.metadata.noLicense' | translate) }}</p>
   </div>
 </p-card>

src/app/features/metadata/components/metadata-publication-doi/metadata-publication-doi.component.html

@@ -7,6 +7,7 @@ <h2>{{ 'project.overview.metadata.publication' | translate }}</h2>
         severity="secondary"
         [label]="'common.buttons.edit' | translate"
         (onClick)="openEditPublicationDoiDialog.emit()"
+        data-test-edit-doi-button
       ></p-button>
     }
   </div>

src/app/features/metadata/components/metadata-resource-information/metadata-resource-information.component.html

@@ -7,6 +7,7 @@ <h2>
         severity="secondary"
         text
         (onClick)="showResourceInfo.emit()"
+        [ariaLabel]="'project.metadata.resourceInformation.tooltipDialog.header' | translate"
       ></p-button>
     </h2>
 
@@ -15,19 +16,20 @@ <h2>
         severity="secondary"
         [label]="'common.buttons.edit' | translate"
         (onClick)="openEditResourceInformationDialog.emit()"
+        data-test-edit-resource-information-button
       ></p-button>
     }
   </div>
 
   <div class="mt-4">
     @if (customItemMetadata()?.resourceTypeGeneral) {
       <div class="flex-column flex gap-2">
-        <p class="inline-block font-bold">
+        <p class="inline-block font-bold" data-test-display-resource-type-general>
           <span> {{ 'project.overview.metadata.resourceType' | translate }}: </span>
           <span>{{ getResourceTypeName(customItemMetadata()?.resourceTypeGeneral!) }}</span>
         </p>
 
-        <p class="inline-block font-bold">
+        <p class="inline-block font-bold" data-test-display-resource-language>
           <span> {{ 'project.overview.metadata.resourceLanguage' | translate }}: </span>
           <span>{{ getLanguageName(customItemMetadata()?.language || '') }}</span>
         </p>

src/app/features/metadata/dialogs/affiliated-institutions-dialog/affiliated-institutions-dialog.component.html

@@ -7,10 +7,16 @@
 </div>
 
 <div class="flex justify-content-end gap-2">
-  <p-button severity="info" [label]="'common.buttons.cancel' | translate" (click)="cancel()" />
+  <p-button
+    severity="info"
+    [label]="'common.buttons.cancel' | translate"
+    (onClick)="cancel()"
+    data-test-cancel-editing-institutions-button
+  />
   <p-button
     (onClick)="save()"
     [label]="'common.buttons.save' | translate"
     [disabled]="areUserInstitutionsLoading() || !userInstitutions().length"
+    data-test-save-institutions-button
   />
 </div>

src/app/features/metadata/dialogs/contributors-dialog/contributors-dialog.component.html

@@ -4,62 +4,53 @@ <h3>{{ 'project.contributors.addContributor' | translate }}</h3>
 
     <p-button
       [label]="'project.contributors.addContributor' | translate"
-      [disabled]="isContributorsLoading()"
-      (click)="openAddContributorDialog()"
-      size="small"
+      [disabled]="isLoading()"
+      (onClick)="openAddContributorDialog()"
+      data-test-add-button
     ></p-button>
   </div>
 
   <div class="filters-container flex flex-column gap-3">
     <osf-search-input [control]="searchControl" [placeholder]="'project.contributors.searchPlaceholder' | translate" />
   </div>
 
-  <div class="contributors-list-container">
-    @if (isContributorsLoading()) {
-      <div class="flex flex-column gap-2">
-        @for (item of [1, 2, 3]; track item) {
-          <div class="flex align-items-center justify-content-between p-3 border-1 surface-border border-round">
-            <div class="flex align-items-center gap-3 flex-1">
-              <p-skeleton width="150px" height="1.5rem"></p-skeleton>
-              <p-skeleton width="100px" height="1.5rem"></p-skeleton>
-            </div>
-            <p-skeleton width="40px" height="2rem"></p-skeleton>
-          </div>
-        }
-      </div>
-    } @else {
-      @if (contributors().length === 0) {
-        <div class="text-center p-4 text-500">
-          {{ 'project.contributors.table.emptyMessage' | translate }}
-        </div>
-      } @else {
-        <div class="flex flex-column gap-2">
-          @for (contributor of contributors(); track contributor.id) {
-            <div class="flex align-items-center justify-content-between p-3 border-1 surface-border border-round">
-              <div class="flex align-items-center gap-3 flex-1">
-                <div class="flex flex-column">
-                  <span class="font-semibold">{{ contributor.fullName }}</span>
-                  <span class="text-sm text-500">{{ contributor.permission | translate | titlecase }}</span>
-                </div>
-              </div>
+  <osf-contributors-list
+    class="w-full"
+    [contributors]="contributors()"
+    [showEducation]="false"
+    [showEmployment]="false"
+    [isLoading]="isLoading()"
+    (remove)="removeContributor($event)"
+  ></osf-contributors-list>
 
-              <p-button
-                variant="text"
-                severity="danger"
-                icon="fas fa-trash"
-                size="small"
-                (click)="removeContributor(contributor)"
-                [pTooltip]="'common.buttons.delete' | translate"
-              ></p-button>
-            </div>
-          }
-        </div>
-      }
-    }
-  </div>
+  @if (hasChanges) {
+    <div class="flex gap-2 w-full">
+      <p-button
+        class="w-3"
+        styleClass="w-full"
+        (onClick)="cancel()"
+        severity="info"
+        [label]="'common.buttons.cancel' | translate"
+        data-test-cancel-button
+      >
+      </p-button>
+
+      <p-button
+        class="w-3"
+        styleClass="w-full"
+        [label]="'common.buttons.save' | translate"
+        (onClick)="onSave()"
+        data-test-save-button
+      ></p-button>
+    </div>
+  }
 
   <div class="flex justify-content-end gap-2 pt-3">
-    <p-button [label]="'common.buttons.cancel' | translate" severity="secondary" (click)="onClose()"></p-button>
-    <p-button [label]="'common.buttons.save' | translate" (click)="onSave()"></p-button>
+    <p-button
+      [label]="'common.buttons.close' | translate"
+      (onClick)="onClose()"
+      [disabled]="isLoading()"
+      data-test-close-button
+    ></p-button>
   </div>
 </div>

src/app/features/metadata/dialogs/contributors-dialog/contributors-dialog.component.spec.ts

@@ -8,7 +8,7 @@ import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { MOCK_STORE, TranslateServiceMock } from '@osf/shared/mocks';
+import { MOCK_STORE, MockCustomConfirmationServiceProvider, TranslateServiceMock } from '@osf/shared/mocks';
 import { ContributorsSelectors } from '@osf/shared/stores';
 
 import { ContributorsDialogComponent } from './contributors-dialog.component';
@@ -26,6 +26,7 @@ describe('ContributorsDialogComponent', () => {
       imports: [ContributorsDialogComponent, MockPipe(TranslatePipe)],
       providers: [
         TranslateServiceMock,
+        MockCustomConfirmationServiceProvider,
         MockProviders(MessageService, DynamicDialogRef, DynamicDialogConfig),
         MockProvider(Store, MOCK_STORE),
       ],