[ENG-10371][ENG-10368] Delete draft preprint functionality was not included in Angular update (#932)

- Ticket: [ENG-10371](https://openscience.atlassian.net/browse/ENG-10371)
- Feature flag: n/a

## Summary of Changes
1. Added delete button for preprint draft.
2. Fixed issue with loader.

Author: nsemets

package-lock.json

@@ -6,7 +6,14 @@ import { Subject } from 'rxjs';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { NavigationEnd, Router } from '@angular/router';
+import {
+  NavigationCancel,
+  NavigationEnd,
+  NavigationError,
+  NavigationStart,
+  ResolveStart,
+  Router,
+} from '@angular/router';
 
 import { CookieConsentBannerComponent } from '@core/components/osf-banners/cookie-consent-banner/cookie-consent-banner.component';
 import { ENVIRONMENT } from '@core/provider/environment.provider';
@@ -18,17 +25,20 @@ import { TranslateServiceMock } from '../testing/mocks/translate.service.mock';
 import { FullScreenLoaderComponent } from './shared/components/full-screen-loader/full-screen-loader.component';
 import { ToastComponent } from './shared/components/toast/toast.component';
 import { CustomDialogService } from './shared/services/custom-dialog.service';
+import { LoaderService } from './shared/services/loader.service';
 import { AppComponent } from './app.component';
 
 import { OSFTestingModule } from '@testing/osf.testing.module';
 import { CustomDialogServiceMockBuilder } from '@testing/providers/custom-dialog-provider.mock';
+import { LoaderServiceMock } from '@testing/providers/loader-service.mock';
 import { GoogleTagManagerService } from 'angular-google-tag-manager';
 
 describe('Component: App', () => {
   let routerEvents$: Subject<any>;
   let gtmServiceMock: jest.Mocked<GoogleTagManagerService>;
   let fixture: ComponentFixture<AppComponent>;
   let mockCustomDialogService: ReturnType<CustomDialogServiceMockBuilder['build']>;
+  let loaderServiceMock: LoaderServiceMock;
 
   beforeEach(async () => {
     mockCustomDialogService = CustomDialogServiceMockBuilder.create().build();
@@ -37,6 +47,7 @@ describe('Component: App', () => {
     gtmServiceMock = {
       pushTag: jest.fn(),
     } as any;
+    loaderServiceMock = new LoaderServiceMock();
 
     await TestBed.configureTestingModule({
       imports: [
@@ -47,6 +58,7 @@ describe('Component: App', () => {
       providers: [
         provideStore([UserState, UserEmailsState]),
         MockProvider(CustomDialogService, mockCustomDialogService),
+        MockProvider(LoaderService, loaderServiceMock),
         TranslateServiceMock,
         { provide: GoogleTagManagerService, useValue: gtmServiceMock },
         {
@@ -103,4 +115,55 @@ describe('Component: App', () => {
       expect(gtmServiceMock.pushTag).not.toHaveBeenCalled();
     });
   });
+
+  describe('Loader routing behavior', () => {
+    it('should not show loader on NavigationStart', () => {
+      fixture.detectChanges();
+
+      routerEvents$.next(new NavigationStart(1, '/next'));
+
+      expect(loaderServiceMock.show).not.toHaveBeenCalled();
+    });
+
+    it('should show loader on ResolveStart', () => {
+      fixture.detectChanges();
+
+      routerEvents$.next(new ResolveStart(1, '/next', '/next', {} as any));
+
+      expect(loaderServiceMock.show).toHaveBeenCalled();
+    });
+
+    it('should hide loader on NavigationEnd after delay', () => {
+      jest.useFakeTimers();
+      fixture.detectChanges();
+
+      routerEvents$.next(new NavigationEnd(1, '/previous', '/current'));
+      jest.advanceTimersByTime(500);
+
+      expect(loaderServiceMock.hide).toHaveBeenCalled();
+      jest.useRealTimers();
+    });
+
+    it('should hide loader on NavigationCancel after delay', () => {
+      jest.useFakeTimers();
+      fixture.detectChanges();
+
+      routerEvents$.next(new NavigationCancel(1, '/current', 'cancelled'));
+      jest.advanceTimersByTime(500);
+
+      expect(loaderServiceMock.hide).toHaveBeenCalled();
+      jest.useRealTimers();
+    });
+
+    it('should hide loader on NavigationError after delay', () => {
+      jest.useFakeTimers();
+      fixture.detectChanges();
+
+      routerEvents$.next(new NavigationError(1, '/current', new Error('test')));
+      jest.advanceTimersByTime(500);
+
+      expect(loaderServiceMock.hide).toHaveBeenCalled();
+      jest.useRealTimers();
+    });
+  });
 });

src/app/app.component.spec.ts

@@ -5,14 +5,7 @@ import { switchMap, timer } from 'rxjs';
 import { isPlatformBrowser } from '@angular/common';
 import { ChangeDetectionStrategy, Component, DestroyRef, effect, inject, OnInit, PLATFORM_ID } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import {
-  NavigationCancel,
-  NavigationEnd,
-  NavigationError,
-  NavigationStart,
-  Router,
-  RouterOutlet,
-} from '@angular/router';
+import { NavigationCancel, NavigationEnd, NavigationError, ResolveStart, Router, RouterOutlet } from '@angular/router';
 
 import { ENVIRONMENT } from '@core/provider/environment.provider';
 import { GetCurrentUser } from '@core/store/user';
@@ -65,7 +58,7 @@ export class AppComponent implements OnInit {
 
     if (this.isBrowser) {
       this.router.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
-        if (event instanceof NavigationStart) {
+        if (event instanceof ResolveStart) {
           this.loaderService.show();
         } else if (
           event instanceof NavigationEnd ||

src/app/app.component.ts

@@ -226,6 +226,13 @@ <h2>{{ 'preprints.preprintStepper.authorAssertions.publicPreregistration.title'
     severity="info"
     (onClick)="backButtonClicked()"
   />
+  <p-button
+    class="w-6 md:w-6rem"
+    styleClass="w-full"
+    [label]="'common.buttons.delete' | translate"
+    severity="danger"
+    (onClick)="deletePreprint()"
+  />
   <p-button
     class="w-6 md:w-9rem"
     styleClass="w-full"

src/app/features/preprints/components/stepper/author-assertion-step/author-assertions-step.component.html

@@ -284,6 +284,15 @@ describe('AuthorAssertionsStepComponent', () => {
     expect(emitSpy).toHaveBeenCalled();
   });
 
+  it('should emit deleteClicked when deletePreprint is called', () => {
+    setup({ detectChanges: false });
+    const emitSpy = jest.spyOn(component.deleteClicked, 'emit');
+
+    component.deletePreprint();
+
+    expect(emitSpy).toHaveBeenCalled();
+  });
+
   it('should handle discard confirmation callbacks when there are unsaved changes', () => {
     setup();
     const emitSpy = jest.spyOn(component.backClicked, 'emit');

src/app/features/preprints/components/stepper/author-assertion-step/author-assertions-step.component.spec.ts

@@ -126,6 +126,7 @@ export class AuthorAssertionsStepComponent {
 
   nextClicked = output<void>();
   backClicked = output<void>();
+  deleteClicked = output<void>();
 
   constructor() {
     effect(() => {
@@ -259,6 +260,10 @@ export class AuthorAssertionsStepComponent {
     });
   }
 
+  deletePreprint() {
+    this.deleteClicked.emit();
+  }
+
   private disableAndClearValidators(control: AbstractControl): void {
     if (control instanceof FormArray) {
       while (control.length !== 0) {

src/app/features/preprints/components/stepper/author-assertion-step/author-assertions-step.component.ts

@@ -130,15 +130,6 @@ <h2>{{ 'preprints.preprintStepper.file.title' | translate }}</h2>
           <osf-icon [iconClass]="'fas fa-file'" />
           <p data-test-file-name>{{ preprintFile()!.name }}</p>
         </div>
-
-        <p-button
-          class="danger-icon-btn"
-          icon="fas fa-trash"
-          severity="danger"
-          text
-          [ariaLabel]="'common.buttons.delete' | translate"
-          (onClick)="versionFile()"
-        />
       </section>
     }
   </section>
@@ -152,6 +143,13 @@ <h2>{{ 'preprints.preprintStepper.file.title' | translate }}</h2>
     severity="info"
     (onClick)="backButtonClicked()"
   />
+  <p-button
+    class="w-6 md:w-6rem"
+    styleClass="w-full"
+    [label]="'common.buttons.delete' | translate"
+    severity="danger"
+    (onClick)="deletePreprint()"
+  />
   <p-button
     class="w-6 md:w-9rem"
     styleClass="w-full"

src/app/features/preprints/components/stepper/file-step/file-step.component.html

@@ -199,6 +199,15 @@ describe('FileStepComponent', () => {
     expect(emitSpy).toHaveBeenCalled();
   });
 
+  it('should emit deleteClicked when deletePreprint is called', () => {
+    setup({ detectChanges: false });
+    const emitSpy = jest.spyOn(component.deleteClicked, 'emit');
+
+    component.deletePreprint();
+
+    expect(emitSpy).toHaveBeenCalled();
+  });
+
   it('should handle nextButtonClicked for allowed and blocked states', () => {
     setup({ detectChanges: false });
     const emitSpy = jest.spyOn(component.nextClicked, 'emit');
@@ -303,29 +312,6 @@ describe('FileStepComponent', () => {
     expect(store.dispatch).toHaveBeenCalledWith(new FetchPreprintPrimaryFile());
   });
 
-  it('should set version mode and reset selected source on version file confirmation', () => {
-    setup({ detectChanges: false });
-
-    component.versionFile();
-    const options = confirmationServiceMock.confirmContinue.mock.calls[0][0];
-    options.onConfirm();
-
-    expect(component.versionFileMode()).toBe(true);
-    expect(store.dispatch).toHaveBeenCalledWith(new SetSelectedPreprintFileSource(PreprintFileSource.None));
-  });
-
-  it('should not change mode or selected source on version file reject', () => {
-    setup({ detectChanges: false });
-
-    component.versionFile();
-    const options = confirmationServiceMock.confirmContinue.mock.calls[0][0];
-    (store.dispatch as jest.Mock).mockClear();
-    options.onReject();
-
-    expect(component.versionFileMode()).toBe(false);
-    expect(store.dispatch).not.toHaveBeenCalledWith(new SetSelectedPreprintFileSource(PreprintFileSource.None));
-  });
-
   it('should handle cancelButtonClicked for file present and file missing states', () => {
     setup({ detectChanges: false });
 

src/app/features/preprints/components/stepper/file-step/file-step.component.spec.ts

@@ -120,6 +120,7 @@ export class FileStepComponent implements OnInit {
 
   nextClicked = output<void>();
   backClicked = output<void>();
+  deleteClicked = output<void>();
 
   isFileSourceSelected = computed(() => this.selectedFileSource() !== PreprintFileSource.None);
   canProceedToNext = computed(() => !!this.preprintFile() && !this.versionFileMode());
@@ -163,6 +164,10 @@ export class FileStepComponent implements OnInit {
     this.nextClicked.emit();
   }
 
+  deletePreprint() {
+    this.deleteClicked.emit();
+  }
+
   onFileSelected(event: Event): void {
     const input = event.target as HTMLInputElement;
     const file = input.files?.[0];
@@ -204,18 +209,6 @@ export class FileStepComponent implements OnInit {
     this.actions.copyFileFromProject(file).subscribe(() => this.actions.fetchPreprintFile());
   }
 
-  versionFile() {
-    this.customConfirmationService.confirmContinue({
-      headerKey: 'preprints.preprintStepper.file.versionFile.header',
-      messageKey: 'preprints.preprintStepper.file.versionFile.message',
-      onConfirm: () => {
-        this.versionFileMode.set(true);
-        this.actions.setSelectedFileSource(PreprintFileSource.None);
-      },
-      onReject: () => null,
-    });
-  }
-
   cancelButtonClicked() {
     if (this.preprintFile()) {
       return;

src/app/features/preprints/components/stepper/file-step/file-step.component.ts

@@ -106,6 +106,13 @@ <h2 class="mb-4">{{ 'preprints.preprintStepper.metadata.publicationCitationTitle
     severity="info"
     (onClick)="backButtonClicked()"
   />
+  <p-button
+    class="w-6 md:w-6rem"
+    styleClass="w-full"
+    [label]="'common.buttons.delete' | translate"
+    severity="danger"
+    (onClick)="deletePreprint()"
+  />
   <p-button
     class="w-6 md:w-9rem"
     styleClass="w-full"