feat(metadata): added download metadata logic

Author: nsemets

src/app/features/files/components/file-metadata/file-metadata.component.spec.ts

@@ -133,13 +133,11 @@ describe('FileMetadataComponent', () => {
 
   it('should open metadata url when file guid exists', () => {
     setup({ routeParams: { fileGuid: 'guid-123' } });
-    const focus = vi.fn();
-    const openSpy = vi.spyOn(window, 'open').mockReturnValue({ focus } as unknown as Window);
+    const openSpy = vi.spyOn(window, 'open').mockReturnValue(null);
 
     component.downloadFileMetadata();
 
-    expect(openSpy).toHaveBeenCalledWith(expect.stringMatching(/\/metadata\/guid-123$/));
-    expect(focus).toHaveBeenCalled();
+    expect(openSpy).toHaveBeenCalledWith(expect.stringMatching(/\/metadata\/guid-123$/), '_blank');
   });
 
   it('should not open metadata url when file guid is missing', () => {

src/app/features/files/components/file-metadata/file-metadata.component.ts

@@ -11,9 +11,9 @@ import { ChangeDetectionStrategy, Component, DestroyRef, inject } from '@angular
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, Router } from '@angular/router';
 
-import { ENVIRONMENT } from '@core/provider/environment.provider';
 import { LanguageLabelPipe } from '@osf/shared/pipes/language-label.pipe';
 import { CustomDialogService } from '@osf/shared/services/custom-dialog.service';
+import { MetadataRecordsService } from '@osf/shared/services/metadata-records.service';
 import { ViewOnlyLinkHelperService } from '@osf/shared/services/view-only-link-helper.service';
 
 import { FileMetadataFields } from '../../constants';
@@ -33,7 +33,7 @@ export class FileMetadataComponent {
   private readonly router = inject(Router);
   private readonly destroyRef = inject(DestroyRef);
   private readonly customDialogService = inject(CustomDialogService);
-  private readonly environment = inject(ENVIRONMENT);
+  private readonly metadataRecordsService = inject(MetadataRecordsService);
   private readonly viewOnlyService = inject(ViewOnlyLinkHelperService);
 
   private readonly actions = createDispatchMap({ setFileMetadata: SetFileMetadata });
@@ -49,8 +49,10 @@ export class FileMetadataComponent {
   readonly metadataFields = FileMetadataFields;
 
   downloadFileMetadata(): void {
-    if (this.fileGuid()) {
-      window.open(`${this.environment.webUrl}/metadata/${this.fileGuid()}`)?.focus();
+    const fileGuid = this.fileGuid();
+
+    if (fileGuid) {
+      this.metadataRecordsService.downloadMetadata(fileGuid);
     }
   }
 

src/app/features/metadata/components/cedar-template-form/cedar-template-form.component.ts

@@ -23,6 +23,7 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute } from '@angular/router';
 
 import { ENVIRONMENT } from '@core/provider/environment.provider';
+import { MetadataRecordsService } from '@osf/shared/services/metadata-records.service';
 import { SocialShareService } from '@osf/shared/services/social-share.service';
 
 import { CEDAR_CONFIG, CEDAR_VIEWER_CONFIG } from '../../constants';
@@ -63,6 +64,7 @@ export class CedarTemplateFormComponent {
 
   private route = inject(ActivatedRoute);
   readonly environment = inject(ENVIRONMENT);
+  private readonly metadataRecordsService = inject(MetadataRecordsService);
   private readonly socialShareService = inject(SocialShareService);
 
   readonly recordId = signal<string>('');
@@ -136,8 +138,10 @@ export class CedarTemplateFormComponent {
   }
 
   downloadMetadadaRecord() {
-    if (this.fileGuid()) {
-      window.open(`${this.environment.webUrl}/metadata/${this.fileGuid()}`)?.focus();
+    const fileGuid = this.fileGuid();
+
+    if (fileGuid) {
+      this.metadataRecordsService.downloadMetadata(fileGuid);
     } else {
       window.open(this.downloadUrl(), '_blank');
     }

src/app/features/project/overview/components/project-overview-metadata/project-overview-metadata.component.html

@@ -7,13 +7,23 @@
     <div class="metadata-header flex align-items-center justify-content-between">
       <h2>{{ 'common.labels.metadata' | translate }}</h2>
 
-      @if (canEdit()) {
+      <div class="flex gap-2">
         <p-button
-          [routerLink]="'../metadata'"
           severity="secondary"
-          [label]="'common.buttons.edit' | translate"
-        ></p-button>
-      }
+          class="btn-icon-only"
+          icon="fas fa-download"
+          [attr.aria-label]="'common.buttons.download' | translate"
+          (onClick)="downloadMetadata()"
+        />
+
+        @if (canEdit()) {
+          <p-button
+            [routerLink]="'../metadata'"
+            severity="secondary"
+            [label]="'common.buttons.edit' | translate"
+          ></p-button>
+        }
+      </div>
     </div>
 
     <div class="flex flex-column gap-2">

src/app/features/project/overview/components/project-overview-metadata/project-overview-metadata.component.spec.ts

@@ -18,6 +18,7 @@ import { ResourceLicenseComponent } from '@osf/shared/components/resource-licens
 import { SubjectsListComponent } from '@osf/shared/components/subjects-list/subjects-list.component';
 import { TagsListComponent } from '@osf/shared/components/tags-list/tags-list.component';
 import { CurrentResourceType, ResourceType } from '@osf/shared/enums/resource-type.enum';
+import { MetadataRecordsService } from '@osf/shared/services/metadata-records.service';
 import { CollectionsSelectors, GetProjectSubmissions } from '@osf/shared/stores/collections';
 import {
   ContributorsSelectors,
@@ -50,6 +51,7 @@ describe('ProjectOverviewMetadataComponent', () => {
   let store: Store;
   let dispatchMock: Mock;
   let mockRouter: RouterMockType;
+  let metadataRecordsService: { downloadMetadata: Mock };
 
   interface SetupOverrides {
     project?: typeof MOCK_PROJECT_OVERVIEW | null;
@@ -58,6 +60,7 @@ describe('ProjectOverviewMetadataComponent', () => {
   function setup(overrides: SetupOverrides = {}) {
     const project = 'project' in overrides ? overrides.project : MOCK_PROJECT_OVERVIEW;
     mockRouter = RouterMockBuilder.create().withUrl('/project/project-1/overview').build();
+    metadataRecordsService = { downloadMetadata: vi.fn() };
 
     TestBed.configureTestingModule({
       imports: [
@@ -77,6 +80,7 @@ describe('ProjectOverviewMetadataComponent', () => {
       ],
       providers: [
         provideOSFCore(),
+        MockProvider(MetadataRecordsService, metadataRecordsService),
         MockProvider(Router, mockRouter),
         provideMockStore({
           signals: [
@@ -166,6 +170,22 @@ describe('ProjectOverviewMetadataComponent', () => {
     );
   });
 
+  it('should download metadata for current project', () => {
+    setup();
+
+    component.downloadMetadata();
+
+    expect(metadataRecordsService.downloadMetadata).toHaveBeenCalledWith('project-1');
+  });
+
+  it('should not download metadata when project is missing', () => {
+    setup({ project: null });
+
+    component.downloadMetadata();
+
+    expect(metadataRecordsService.downloadMetadata).not.toHaveBeenCalled();
+  });
+
   it('should navigate to search when clicking a tag', () => {
     setup();
 

src/app/features/project/overview/components/project-overview-metadata/project-overview-metadata.component.ts

@@ -21,6 +21,7 @@ import { TruncatedTextComponent } from '@osf/shared/components/truncated-text/tr
 import { CurrentResourceType, ResourceType } from '@osf/shared/enums/resource-type.enum';
 import { LanguageLabelPipe } from '@osf/shared/pipes/language-label.pipe';
 import { ResourceTypeGeneralLabelPipe } from '@osf/shared/pipes/resource-type-general-label.pipe';
+import { MetadataRecordsService } from '@osf/shared/services/metadata-records.service';
 import { CollectionsSelectors, GetProjectSubmissions } from '@osf/shared/stores/collections';
 import {
   ContributorsSelectors,
@@ -67,6 +68,7 @@ import { OverviewSupplementsComponent } from '../overview-supplements/overview-s
 })
 export class ProjectOverviewMetadataComponent {
   private readonly router = inject(Router);
+  private readonly metadataRecordsService = inject(MetadataRecordsService);
 
   readonly currentProject = select(ProjectOverviewSelectors.getProject);
   readonly isAnonymous = select(ProjectOverviewSelectors.isProjectAnonymous);
@@ -122,6 +124,14 @@ export class ProjectOverviewMetadataComponent {
     });
   }
 
+  downloadMetadata(): void {
+    const projectId = this.currentProject()?.id;
+
+    if (projectId) {
+      this.metadataRecordsService.downloadMetadata(projectId);
+    }
+  }
+
   onCustomCitationUpdated(citation: string): void {
     this.actions.setCustomCitation(citation);
   }

src/app/shared/services/metadata-records.service.spec.ts

@@ -31,6 +31,31 @@ describe('MetadataRecordsService', () => {
     expect(service.webUrl).toBe(environment.webUrl);
   });
 
+  it('builds metadata download url', () => {
+    const osfid = 'ezcuj';
+    const environment = TestBed.inject(ENVIRONMENT);
+
+    expect(service.getMetadataDownloadUrl(osfid)).toBe(`${environment.webUrl}/metadata/${osfid}`);
+  });
+
+  it('opens metadata download url in a new tab', () => {
+    const osfid = 'ezcuj';
+    const environment = TestBed.inject(ENVIRONMENT);
+    const openSpy = vi.spyOn(window, 'open').mockReturnValue(null);
+
+    service.downloadMetadata(osfid);
+
+    expect(openSpy).toHaveBeenCalledWith(`${environment.webUrl}/metadata/${osfid}`, '_blank');
+  });
+
+  it('does not open metadata download url when osfid is empty', () => {
+    const openSpy = vi.spyOn(window, 'open').mockReturnValue(null);
+
+    service.downloadMetadata('');
+
+    expect(openSpy).not.toHaveBeenCalled();
+  });
+
   it('requests metadata record in text format', () => {
     const osfid = 'ezcuj';
     let responseBody = '';

src/app/shared/services/metadata-records.service.ts

@@ -16,8 +16,20 @@ export class MetadataRecordsService {
     return this.environment.webUrl;
   }
 
-  getMetadataRecord(osfid: string, format: MetadataRecordFormat) {
-    const url = `${this.webUrl}/metadata/${osfid}/?format=${format}`;
+  getMetadataDownloadUrl(id: string): string {
+    return `${this.webUrl}/metadata/${id}`;
+  }
+
+  downloadMetadata(id: string): void {
+    if (!id) {
+      return;
+    }
+
+    window.open(this.getMetadataDownloadUrl(id), '_blank');
+  }
+
+  getMetadataRecord(id: string, format: MetadataRecordFormat) {
+    const url = `${this.webUrl}/metadata/${id}/?format=${format}`;
     return this.http.get(url, {
       responseType: 'text',
       headers: new HttpHeaders({ 'X-No-Auth-Redirect': 'true' }),