Fix(view-only-links): View only links files access issues

src/app/core/interceptors/view-only.interceptor.ts

@@ -15,6 +15,10 @@ export const viewOnlyInterceptor: HttpInterceptorFn = (
   const viewOnlyParam = getViewOnlyParam(router);
 
   if (!req.url.includes('/api.crossref.org/funders') && viewOnlyParam) {
+    if (req.url.includes('view_only=')) {
+      return next(req);
+    }
+
     const separator = req.url.includes('?') ? '&' : '?';
     const updatedUrl = `${req.url}${separator}view_only=${encodeURIComponent(viewOnlyParam)}`;
 

src/app/features/files/components/file-keywords/file-keywords.component.html

@@ -1,21 +1,28 @@
 <div class="p-4 flex flex-column gap-2">
   <h2>{{ 'files.detail.keywords.title' | translate }}</h2>
 
-  <div class="flex align-items-center gap-2">
-    <input pInputText class="flex-1" [formControl]="keywordControl" />
+  @if (!hasViewOnly()) {
+    <div class="flex align-items-center gap-2">
+      <input pInputText class="flex-1" [formControl]="keywordControl" />
 
-    <p-button
-      [label]="'common.buttons.add' | translate"
-      (onClick)="addTag()"
-      [disabled]="isTagsLoading() || keywordControl.invalid"
-    >
-    </p-button>
-  </div>
+      <p-button
+        [label]="'common.buttons.add' | translate"
+        (onClick)="addTag()"
+        [disabled]="isTagsLoading() || keywordControl.invalid"
+      >
+      </p-button>
+    </div>
+  }
 
   @if (!isTagsLoading()) {
     <div class="flex flex-wrap gap-1">
       @for (tag of tags(); track $index) {
-        <p-chip [label]="tag" removeIcon="fas fa-close" removable (onRemove)="deleteTag(tag)"></p-chip>
+        <p-chip
+          [label]="tag"
+          [removeIcon]="hasViewOnly() ? '' : 'fas fa-close'"
+          [removable]="!hasViewOnly()"
+          (onRemove)="deleteTag(tag)"
+        ></p-chip>
       }
     </div>
   } @else {

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

@@ -7,11 +7,12 @@ import { Chip } from 'primeng/chip';
 import { InputText } from 'primeng/inputtext';
 import { Skeleton } from 'primeng/skeleton';
 
-import { ChangeDetectionStrategy, Component, DestroyRef, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
 
-import { CustomValidators } from '@osf/shared/helpers';
+import { CustomValidators, hasViewOnlyParam } from '@osf/shared/helpers';
 import { InputLimits } from '@shared/constants';
 
 import { FilesSelectors, UpdateTags } from '../../store';
@@ -26,10 +27,12 @@ import { FilesSelectors, UpdateTags } from '../../store';
 export class FileKeywordsComponent {
   private readonly actions = createDispatchMap({ updateTags: UpdateTags });
   private readonly destroyRef = inject(DestroyRef);
+  private readonly router = inject(Router);
 
   readonly tags = select(FilesSelectors.getFileTags);
   readonly isTagsLoading = select(FilesSelectors.isFileTagsLoading);
   readonly file = select(FilesSelectors.getOpenedFile);
+  readonly hasViewOnly = computed(() => hasViewOnlyParam(this.router));
 
   keywordControl = new FormControl('', {
     nonNullable: true,

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

@@ -2,15 +2,17 @@
   <div class="flex justify-content-between">
     <h2>{{ 'files.detail.fileMetadata.title' | translate }}</h2>
 
-    <div class="flex gap-2">
-      <p-button severity="secondary" class="btn-icon-only" icon="fas fa-download" (click)="downloadFileMetadata()" />
+    @if (!hasViewOnly()) {
+      <div class="flex gap-2">
+        <p-button severity="secondary" class="btn-icon-only" icon="fas fa-download" (click)="downloadFileMetadata()" />
 
-      <p-button
-        severity="secondary"
-        (onClick)="openEditFileMetadataDialog()"
-        [label]="'files.detail.fileMetadata.edit' | translate"
-      ></p-button>
-    </div>
+        <p-button
+          severity="secondary"
+          (onClick)="openEditFileMetadataDialog()"
+          [label]="'files.detail.fileMetadata.edit' | translate"
+        ></p-button>
+      </div>
+    }
   </div>
 
   @if (isLoading()) {

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

@@ -8,11 +8,12 @@ import { Skeleton } from 'primeng/skeleton';
 
 import { filter, map, of } from 'rxjs';
 
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 import { languageCodes } from '@osf/shared/constants';
+import { hasViewOnlyParam } from '@osf/shared/helpers';
 import { LanguageCodeModel } from '@osf/shared/models';
 
 import { FileMetadataFields } from '../../constants';
@@ -33,11 +34,13 @@ import { environment } from 'src/environments/environment';
 export class FileMetadataComponent {
   private readonly actions = createDispatchMap({ setFileMetadata: SetFileMetadata });
   private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
   private readonly dialogService = inject(DialogService);
   private readonly translateService = inject(TranslateService);
 
   fileMetadata = select(FilesSelectors.getFileCustomMetadata);
   isLoading = select(FilesSelectors.isFileMetadataLoading);
+  hasViewOnly = computed(() => hasViewOnlyParam(this.router));
 
   readonly languageCodes = languageCodes;
 

src/app/features/files/components/file-resource-metadata/file-resource-metadata.component.html

@@ -98,7 +98,7 @@ <h4>{{ 'files.detail.resourceMetadata.fields.dateModified' | translate }}</h4>
   @if (isResourceContributorsLoading()) {
     <p-skeleton width="100%" height="4rem" />
   } @else {
-    @if (contributors()?.length) {
+    @if (contributors()?.length && !hasViewOnly()) {
       <div class="flex flex-column gap-2">
         <h4>{{ 'files.detail.resourceMetadata.fields.contributors' | translate }}</h4>
 

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

@@ -5,8 +5,10 @@ import { TranslatePipe } from '@ngx-translate/core';
 import { Skeleton } from 'primeng/skeleton';
 
 import { DatePipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-import { RouterLink } from '@angular/router';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { Router, RouterLink } from '@angular/router';
+
+import { hasViewOnlyParam } from '@osf/shared/helpers';
 
 import { FilesSelectors } from '../../store';
 
@@ -18,9 +20,12 @@ import { FilesSelectors } from '../../store';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FileResourceMetadataComponent {
+  private readonly router = inject(Router);
+
   resourceType = input<string>('nodes');
   resourceMetadata = select(FilesSelectors.getResourceMetadata);
   contributors = select(FilesSelectors.getContributors);
   isResourceMetadataLoading = select(FilesSelectors.isResourceMetadataLoading);
   isResourceContributorsLoading = select(FilesSelectors.isResourceContributorsLoading);
+  hasViewOnly = computed(() => hasViewOnlyParam(this.router));
 }

src/app/features/files/mappers/resource-metadata.mapper.ts

@@ -13,16 +13,19 @@ export function MapResourceMetadata(
     description: shortInfo.data.attributes.description,
     dateCreated: new Date(shortInfo.data.attributes.date_created),
     dateModified: new Date(shortInfo.data.attributes.date_modified),
-    funders: customMetadata.data.embeds.custom_metadata.data.attributes.funders.map((funder) => ({
-      funderName: funder.funder_name,
-      funderIdentifier: funder.funder_identifier,
-      funderIdentifierType: funder.funder_identifier_type,
-      awardNumber: funder.award_number,
-      awardUri: funder.award_uri,
-      awardTitle: funder.award_title,
-    })),
-    identifiers: IdentifiersMapper.fromJsonApi(shortInfo.data.embeds.identifiers),
-    language: customMetadata.data.embeds.custom_metadata.data.attributes.language,
-    resourceTypeGeneral: customMetadata.data.embeds.custom_metadata.data.attributes.resource_type_general,
+    funders:
+      customMetadata.data.embeds?.custom_metadata?.data?.attributes?.funders?.map((funder) => ({
+        funderName: funder.funder_name,
+        funderIdentifier: funder.funder_identifier,
+        funderIdentifierType: funder.funder_identifier_type,
+        awardNumber: funder.award_number,
+        awardUri: funder.award_uri,
+        awardTitle: funder.award_title,
+      })) || [],
+    identifiers: shortInfo.data.embeds?.identifiers?.data.length
+      ? IdentifiersMapper.fromJsonApi(shortInfo.data.embeds?.identifiers)
+      : [],
+    language: customMetadata.data.embeds?.custom_metadata?.data?.attributes?.language || '',
+    resourceTypeGeneral: customMetadata.data.embeds?.custom_metadata?.data?.attributes?.resource_type_general || '',
   };
 }

src/app/features/files/pages/file-detail/file-detail.component.html

@@ -1,6 +1,6 @@
 <osf-sub-header [isLoading]="isFileLoading()" title="{{ file()?.name }}" />
 
-<p-tabs [value]="selectedTab" (valueChange)="onTabChange(+$event)" class="flex-1 ml-auto mr-4">
+<p-tabs [value]="selectedTab" (valueChange)="onTabChange(+$event)" class="ml-auto mr-4">
   <p-tablist>
     <p-tab [value]="FileDetailTab.Details">{{ 'files.detail.tabs.details' | translate }}</p-tab>
     <p-tab [value]="FileDetailTab.Revisions">{{ 'files.detail.tabs.revisions' | translate }}</p-tab>
@@ -12,13 +12,13 @@
   <div class="flex">
     <div class="flex align-items-center gap-2 back-navigation font-semibold">
       <i class="pi pi-angle-left text-base"></i>
-      <a [routerLink]="['../']" class="font-semibold">
+      <a [routerLink]="['../']" queryParamsHandling="merge" class="font-semibold">
         {{ 'files.detail.backToList' | translate }}
       </a>
     </div>
 
     <div class="flex gap-3 ml-auto sm-round-padding-btn">
-      @if (!isAnonymous()) {
+      @if (!isAnonymous() && !hasViewOnly()) {
         <p-button
           severity="secondary"
           [label]="'files.detail.actions.addCommunityMetadata' | translate"
@@ -69,7 +69,7 @@
           </p-menu>
         </div>
       }
-      @if (file() && !isAnonymous()) {
+      @if (file() && !isAnonymous() && !hasViewOnly()) {
         <p-button
           severity="danger"
           [ariaLabel]="'common.buttons.delete' | translate"
@@ -108,7 +108,7 @@
       } @else if (selectedTab === FileDetailTab.Keywords) {
         <osf-file-keywords class="metadata"></osf-file-keywords>
       } @else {
-        <div class="file-metadata-tabs">
+        <div class="file-metadata-tabs flex flex-column flex-1">
           <osf-metadata-tabs
             [loading]="isLoading()"
             [tabs]="tabs()"

src/app/features/files/pages/file-detail/file-detail.component.ts

@@ -38,7 +38,7 @@ import {
 } from '@osf/features/metadata/store';
 import { LoadingSpinnerComponent, MetadataTabsComponent, SubHeaderComponent } from '@osf/shared/components';
 import { MetadataResourceEnum, ResourceType } from '@osf/shared/enums';
-import { pathJoin } from '@osf/shared/helpers';
+import { getViewOnlyParam, hasViewOnlyParam, pathJoin } from '@osf/shared/helpers';
 import { MetadataTabsModel, OsfFile } from '@osf/shared/models';
 import { CustomConfirmationService, MetaTagsService, ToastService } from '@osf/shared/services';
 import { DataciteService } from '@osf/shared/services/datacite/datacite.service';
@@ -128,6 +128,8 @@ export class FileDetailComponent {
   resourceContributors = select(FilesSelectors.getContributors);
   isResourceContributorsLoading = select(FilesSelectors.isResourceContributorsLoading);
 
+  hasViewOnly = computed(() => hasViewOnlyParam(this.router));
+
   safeLink: SafeResourceUrl | null = null;
   resourceId = '';
   resourceType = '';
@@ -221,7 +223,7 @@ export class FileDetailComponent {
       .subscribe(() => {
         const link = this.file()?.links.render;
         if (link) {
-          this.safeLink = this.sanitizer.bypassSecurityTrustResourceUrl(link);
+          this.safeLink = this.sanitizer.bypassSecurityTrustResourceUrl(this.addViewOnlyToUrl(link));
         }
         this.resourceId = this.file()?.target.id || '';
         this.resourceType = this.file()?.target.type || '';
@@ -393,4 +395,14 @@ export class FileDetailComponent {
       this.actions.getCedarTemplates();
     }
   }
+
+  private addViewOnlyToUrl(url: string): string {
+    if (!this.hasViewOnly()) return url;
+
+    const viewOnlyParam = getViewOnlyParam();
+    if (!viewOnlyParam) return url;
+
+    const separator = url.includes('?') ? '&' : '?';
+    return `${url}${separator}view_only=${encodeURIComponent(viewOnlyParam)}`;
+  }
 }

src/app/features/files/pages/files-container/files-container.component.scss

@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}

src/app/features/files/pages/files-container/files-container.component.ts

@@ -4,6 +4,7 @@ import { RouterOutlet } from '@angular/router';
 @Component({
   selector: 'osf-files-container',
   imports: [RouterOutlet],
+  styleUrl: './files-container.component.scss',
   templateUrl: './files-container.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/features/files/pages/files/files.component.spec.ts

@@ -13,6 +13,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 
+import { SENTRY_TOKEN } from '@core/factory/sentry.factory';
 import {
   FilesTreeComponent,
   FormSelectComponent,
@@ -66,6 +67,14 @@ describe('Component: Files', () => {
         MockProvider(ActivatedRoute),
         MockProvider(CustomConfirmationService),
         DialogService,
+        {
+          provide: SENTRY_TOKEN,
+          useValue: {
+            captureException: jest.fn(),
+            captureMessage: jest.fn(),
+            setUser: jest.fn(),
+          },
+        },
         provideMockStore({
           signals: [
             {

src/app/features/files/pages/files/files.component.ts

@@ -390,7 +390,10 @@ export class FilesComponent {
   }
 
   navigateToFile(file: OsfFile) {
-    this.router.navigate([file.guid], { relativeTo: this.activeRoute });
+    this.router.navigate([file.guid], {
+      relativeTo: this.activeRoute,
+      queryParamsHandling: 'merge',
+    });
   }
 
   getAddonName(addons: ConfiguredAddonModel[], provider: string): string {

src/app/features/project/overview/components/files-widget/files-widget.component.ts

@@ -218,7 +218,10 @@ export class FilesWidgetComponent {
   }
 
   navigateToFile(file: OsfFile) {
-    this.router.navigate(['files', file.guid], { relativeTo: this.activeRoute.parent });
+    this.router.navigate(['files', file.guid], {
+      relativeTo: this.activeRoute.parent,
+      queryParamsHandling: 'merge',
+    });
   }
 
   onFilesPageChange(page: number) {

src/app/shared/components/files-tree/files-tree.component.html

@@ -1,4 +1,4 @@
-<div #dropZoneContainer class="drop-zone-container">
+<div #dropZoneContainer class="drop-zone-container flex flex-1">
   @if (!hasViewOnly()) {
     <div
       class="drop-zone"
@@ -17,11 +17,11 @@
   }
 
   @if (isLoading()) {
-    <div class="w-8rem ml-auto mr-auto">
+    <div class="flex flex-1">
       <osf-loading-spinner></osf-loading-spinner>
     </div>
   } @else {
-    <div class="files-table">
+    <div class="files-table flex flex-1">
       <p-tree
         [value]="nodes()"
         styleClass="w-full md:w-[30rem]"

src/app/shared/components/files-tree/files-tree.component.scss

@@ -2,6 +2,9 @@
 
 :host {
   min-height: 180px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 }
 
 .files-table {

src/app/shared/components/metadata-tabs/metadata-tabs.component.scss

@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}