Merge remote-tracking branch 'upstream/feature/pbs-25-24' into fix/ENG-9838

Author: nsemets

src/app/app.routes.ts

@@ -156,6 +156,13 @@ export const routes: Routes = [
           import('./core/components/forbidden-page/forbidden-page.component').then((mod) => mod.ForbiddenPageComponent),
         data: { skipBreadcrumbs: true },
       },
+      {
+        path: 'preprints/:providerId/:id/pending-moderation',
+        loadComponent: () =>
+          import(
+            '@osf/features/preprints/pages/preprint-pending-moderation/preprint-pending-moderation.component'
+          ).then((mod) => mod.PreprintPendingModerationComponent),
+      },
       {
         path: 'request-access/:id',
         loadComponent: () =>

src/app/features/preprints/pages/preprint-details/preprint-details.component.ts

@@ -383,6 +383,15 @@ export class PreprintDetailsComponent implements OnInit, OnDestroy {
           }
         }
       },
+      error: (error) => {
+        if (
+          error instanceof HttpErrorResponse &&
+          error.status === 403 &&
+          error?.error?.errors[0]?.detail === 'This preprint is pending moderation and is not yet publicly available.'
+        ) {
+          this.router.navigate(['/preprints', this.providerId(), preprintId, 'pending-moderation']);
+        }
+      },
     });
   }
 

src/app/features/preprints/pages/preprint-pending-moderation/preprint-pending-moderation.component.html

@@ -0,0 +1,4 @@
+<section class="container text-center flex flex-column flex-1 my-7 mx-3 p-3 md:p-4">
+  <h2>{{ 'preprints.details.moderationStatusBanner.pendingDetails.title' | translate }}</h2>
+  <p class="mt-4">{{ 'preprints.details.moderationStatusBanner.pendingDetails.body' | translate }}</p>
+</section>

src/app/features/preprints/pages/preprint-pending-moderation/preprint-pending-moderation.component.scss

@@ -0,0 +1,11 @@
+@use "styles/mixins" as mix;
+
+:host {
+  @include mix.flex-center;
+  flex: 1;
+  background: var(--gradient-3);
+}
+
+.container {
+  max-width: mix.rem(448px);
+}

src/app/features/preprints/pages/preprint-pending-moderation/preprint-pending-moderation.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PreprintPendingModerationComponent } from './preprint-pending-moderation.component';
+
+import { OSFTestingModule } from '@testing/osf.testing.module';
+
+describe('PreprintPendingModerationComponent', () => {
+  let component: PreprintPendingModerationComponent;
+  let fixture: ComponentFixture<PreprintPendingModerationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PreprintPendingModerationComponent, OSFTestingModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PreprintPendingModerationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/preprints/pages/preprint-pending-moderation/preprint-pending-moderation.component.ts

@@ -0,0 +1,12 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'osf-preprint-pending-moderation',
+  templateUrl: './preprint-pending-moderation.component.html',
+  styleUrl: './preprint-pending-moderation.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [TranslatePipe],
+})
+export class PreprintPendingModerationComponent {}

src/app/features/settings/account-settings/components/add-email/add-email.component.html

@@ -12,7 +12,7 @@
       styleClass="w-full"
       (onClick)="dialogRef.close()"
       severity="info"
-      [label]="'settings.accountSettings.addEmail.buttons.cancel' | translate"
+      [label]="'common.buttons.cancel' | translate"
     >
     </p-button>
 
@@ -22,7 +22,7 @@
       [disabled]="emailControl.invalid"
       (click)="addEmail()"
       [loading]="isSubmitting()"
-      [label]="'settings.accountSettings.addEmail.buttons.add' | translate"
+      [label]="'common.buttons.add' | translate"
     >
     </p-button>
   </div>

src/app/shared/components/wiki/compare-section/compare-section.component.html

@@ -8,17 +8,20 @@
     <ng-template #header>
       <h2 class="mr-2">{{ 'project.wiki.compare' | translate }}</h2>
     </ng-template>
-    <div class="flex flex-wrap align-items-center mb-2 lg:flex-nowrap">
-      <span class="mr-2">Live preview to</span>
+
+    <div class="flex flex-wrap align-items-center mb-4 lg:flex-nowrap">
+      <span class="min-w-max mr-2">{{ 'project.wiki.livePreviewTo' | translate }}:</span>
+
       <p-select
+        class="w-full"
+        styleClass="select-version"
         [options]="mappedVersions()"
         [ngModel]="selectedVersion"
         (onChange)="onVersionChange($event.value)"
-        placeholder="Version"
-        class="w-full"
-        styleClass="select-version"
+        [placeholder]="'project.wiki.version.title' | translate"
       />
     </div>
+
     <p-panel styleClass="compare-view" showHeader="false">
       <div lass="mt-3" [innerHTML]="content()"></div>
     </p-panel>

src/app/shared/components/wiki/compare-section/compare-section.component.spec.ts

@@ -1,15 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { provideNoopAnimations } from '@angular/platform-browser/animations';
 
 import { WikiVersion } from '@shared/models/wiki/wiki.model';
 
 import { CompareSectionComponent } from './compare-section.component';
 
 import { TranslateServiceMock } from '@testing/mocks/translate.service.mock';
+import { OSFTestingModule } from '@testing/osf.testing.module';
 
 describe('CompareSectionComponent', () => {
   let component: CompareSectionComponent;
   let fixture: ComponentFixture<CompareSectionComponent>;
+  let translateServiceMock: any;
 
   const mockVersions: WikiVersion[] = [
     {
@@ -22,32 +23,35 @@ describe('CompareSectionComponent', () => {
       createdAt: '2024-01-02T10:00:00Z',
       createdBy: 'Jane Smith',
     },
+    {
+      id: 'version-3',
+      createdAt: '2024-01-03T10:00:00Z',
+      createdBy: 'Bob Johnson',
+    },
   ];
 
   const mockVersionContent = 'Original content';
   const mockPreviewContent = 'Updated content with changes';
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [CompareSectionComponent],
-      providers: [TranslateServiceMock, provideNoopAnimations()],
+      imports: [CompareSectionComponent, OSFTestingModule],
+      providers: [TranslateServiceMock],
     }).compileComponents();
 
+    translateServiceMock = TestBed.inject(TranslateServiceMock.provide);
+    translateServiceMock.instant.mockReturnValue('Current');
+
     fixture = TestBed.createComponent(CompareSectionComponent);
     component = fixture.componentInstance;
 
     fixture.componentRef.setInput('versions', mockVersions);
     fixture.componentRef.setInput('versionContent', mockVersionContent);
     fixture.componentRef.setInput('previewContent', mockPreviewContent);
     fixture.componentRef.setInput('isLoading', false);
-
     fixture.detectChanges();
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
   it('should set versions input', () => {
     expect(component.versions()).toEqual(mockVersions);
   });
@@ -64,14 +68,60 @@ describe('CompareSectionComponent', () => {
     expect(component.isLoading()).toBe(false);
   });
 
-  it('should emit selectVersion when version changes', () => {
+  it('should handle empty versions array', () => {
+    fixture.componentRef.setInput('versions', []);
+    fixture.detectChanges();
+
+    expect(component.versions()).toEqual([]);
+    expect(component.selectedVersion).toBeUndefined();
+  });
+
+  it('should initialize with first version selected and emit selectVersion', () => {
+    expect(component.selectedVersion).toBe(mockVersions[0].id);
+  });
+
+  it('should not emit when no versions available', () => {
     const emitSpy = jest.spyOn(component.selectVersion, 'emit');
-    const versionId = 'version-2';
 
-    component.onVersionChange(versionId);
+    fixture.componentRef.setInput('versions', []);
+    fixture.detectChanges();
 
-    expect(component.selectedVersion).toBe(versionId);
-    expect(emitSpy).toHaveBeenCalledWith(versionId);
+    expect(component.selectedVersion).toBeUndefined();
+    expect(emitSpy).not.toHaveBeenCalled();
+  });
+
+  it('should map versions correctly', () => {
+    const mappedVersions = component.mappedVersions();
+
+    expect(mappedVersions).toHaveLength(3);
+    expect(mappedVersions[0].value).toBe('version-1');
+    expect(mappedVersions[0].label).toContain('(Current)');
+    expect(mappedVersions[0].label).toContain('John Doe');
+    expect(mappedVersions[1].value).toBe('version-2');
+    expect(mappedVersions[1].label).toContain('(2)');
+    expect(mappedVersions[1].label).toContain('Jane Smith');
+    expect(mappedVersions[2].value).toBe('version-3');
+    expect(mappedVersions[2].label).toContain('(1)');
+    expect(mappedVersions[2].label).toContain('Bob Johnson');
+  });
+
+  it('should handle version with undefined createdBy', () => {
+    const versionsWithUndefinedCreator: WikiVersion[] = [
+      {
+        id: 'version-1',
+        createdAt: '2024-01-01T10:00:00Z',
+        createdBy: undefined,
+      },
+    ];
+
+    fixture.componentRef.setInput('versions', versionsWithUndefinedCreator);
+    fixture.detectChanges();
+
+    const mappedVersions = component.mappedVersions();
+    expect(mappedVersions).toHaveLength(1);
+    expect(mappedVersions[0].value).toBe('version-1');
+    expect(mappedVersions[0].label).toContain('(Current)');
+    expect(mappedVersions[0].label).toContain('1/1/2024');
   });
 
   it('should handle single version', () => {
@@ -84,7 +134,61 @@ describe('CompareSectionComponent', () => {
     expect(mappedVersions[0].label).toContain('(Current)');
   });
 
-  it('should initialize with first version selected', () => {
-    expect(component.selectedVersion).toBe(mockVersions[0].id);
+  it('should compute content diff correctly', () => {
+    const content = component.content();
+
+    expect(content).toContain('<span class="removed">Original</span>');
+    expect(content).toContain('<span class="added">Updated</span>');
+    expect(content).toContain('content');
+    expect(content).toContain('<span class="added">with changes</span>');
+  });
+
+  it('should handle identical content', () => {
+    fixture.componentRef.setInput('previewContent', mockVersionContent);
+    fixture.detectChanges();
+
+    const content = component.content();
+    expect(content).toBe(mockVersionContent);
+  });
+
+  it('should handle empty version content', () => {
+    fixture.componentRef.setInput('versionContent', '');
+    fixture.detectChanges();
+
+    const content = component.content();
+    expect(content).toContain('<span class="added">Updated content with changes</span>');
+  });
+
+  it('should handle empty preview content', () => {
+    fixture.componentRef.setInput('previewContent', '');
+    fixture.detectChanges();
+
+    const content = component.content();
+    expect(content).toContain('<span class="removed">Original content</span>');
+  });
+
+  it('should update selectedVersion and emit selectVersion', () => {
+    const emitSpy = jest.spyOn(component.selectVersion, 'emit');
+    const versionId = 'version-2';
+
+    component.onVersionChange(versionId);
+
+    expect(component.selectedVersion).toBe(versionId);
+    expect(emitSpy).toHaveBeenCalledWith(versionId);
+    expect(emitSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should emit correct version id when called multiple times', () => {
+    const emitSpy = jest.spyOn(component.selectVersion, 'emit');
+
+    component.onVersionChange('version-2');
+    component.onVersionChange('version-3');
+    component.onVersionChange('version-1');
+
+    expect(component.selectedVersion).toBe('version-1');
+    expect(emitSpy).toHaveBeenCalledTimes(3);
+    expect(emitSpy).toHaveBeenNthCalledWith(1, 'version-2');
+    expect(emitSpy).toHaveBeenNthCalledWith(2, 'version-3');
+    expect(emitSpy).toHaveBeenNthCalledWith(3, 'version-1');
   });
 });

src/app/shared/components/wiki/compare-section/compare-section.component.ts

@@ -1,10 +1,10 @@
-import { TranslatePipe } from '@ngx-translate/core';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
 import { Panel } from 'primeng/panel';
 import { Select } from 'primeng/select';
 import { Skeleton } from 'primeng/skeleton';
 
-import { ChangeDetectionStrategy, Component, computed, effect, input, output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, inject, input, output } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { WikiVersion } from '@osf/shared/models/wiki/wiki.model';
@@ -25,20 +25,23 @@ export class CompareSectionComponent {
   isLoading = input.required<boolean>();
   selectVersion = output<string>();
 
+  translateService = inject(TranslateService);
+
   selectedVersion: string | null = null;
 
+  private readonly currentLabel = this.translateService.instant('project.wiki.version.current');
+  private readonly unknownAuthorLabel = this.translateService.instant('project.wiki.version.unknownAuthor');
+
   mappedVersions = computed(() => [
-    ...this.versions().map((version, index) => {
-      const labelPrefix = index === 0 ? '(Current)' : `(${this.versions().length - index})`;
-      return {
-        label: `${labelPrefix} ${version.createdBy}: (${new Date(version.createdAt).toLocaleString()})`,
-        value: version.id,
-      };
-    }),
+    ...this.versions().map((version, index) => ({
+      label: this.formatVersionLabel(version, index),
+      value: version.id,
+    })),
   ]);
 
   content = computed(() => {
     const changes = Diff.diffWords(this.versionContent(), this.previewContent());
+
     return changes
       .map((change) => {
         if (change.added) {
@@ -54,13 +57,21 @@ export class CompareSectionComponent {
   constructor() {
     effect(() => {
       this.selectedVersion = this.versions()[0]?.id;
+
       if (this.selectedVersion) {
         this.selectVersion.emit(this.selectedVersion);
       }
     });
   }
+
   onVersionChange(versionId: string): void {
     this.selectedVersion = versionId;
     this.selectVersion.emit(versionId);
   }
+
+  private formatVersionLabel(version: WikiVersion, index: number): string {
+    const prefix = index === 0 ? `(${this.currentLabel})` : `(${this.versions().length - index})`;
+    const creator = version.createdBy || this.unknownAuthorLabel;
+    return `${prefix} ${creator}: (${new Date(version.createdAt).toLocaleString()})`;
+  }
 }