Telegraph that Bitstream replacement is destructive

- Style the submission/edit Bitstream replacement modal to appear more like the delete modal
- Make sure the "replace" button is disabled until we have a file
- Sync all changes to the Bitstream replacement page

Author: ybnd

src/app/bitstream-page/replace-bitstream-page/replace-bitstream-page.component.html

@@ -38,16 +38,18 @@ <h3>{{
     <ds-loading
       message="{{'loading.bitstream' | translate}}"></ds-loading>
   }
-
+  <p class="mb-0 text-muted">
+    {{ 'bitstream.replace.page.disclaimer' | translate }}
+  </p>
   <div class="button-row bottom">
     <div class="mt-4 float-end">
       <button class="back-button btn btn-outline-secondary me-2"
               (click)="back()"><i
         class="fas fa-arrow-left"></i>
         <span class="d-none d-sm-inline">&nbsp;{{ "bitstream.replace.page.button.return" | translate }}</span>
       </button>
-      <button class="save-button btn btn-primary" (click)="save(uploader);"><i
-        class="fas fa-save"></i>
+      <button class="save-button btn btn-danger" (click)="save(uploader);" [dsBtnDisabled]="!uploader.uploader?.queue?.length"><i
+        class="fas fa-retweet"></i>
         <span class="d-none d-sm-inline">&nbsp;{{ "bitstream.replace.page.button.save" | translate }}</span>
       </button>
     </div>

src/app/bitstream-page/replace-bitstream-page/replace-bitstream-page.component.spec.ts

@@ -32,8 +32,10 @@ import {
   createSuccessfulRemoteDataObject$,
 } from '@dspace/core/utilities/remote-data.utils';
 import { TranslateModule } from '@ngx-translate/core';
+import { FileItem } from 'ng2-file-upload';
 import { of } from 'rxjs';
 
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { UploaderComponent } from '../../shared/upload/uploader/uploader.component';
 import { UploaderOptions } from '../../shared/upload/uploader/uploader-options.model';
 import { UploaderProperties } from '../../shared/upload/uploader/uploader-properties.model';
@@ -98,6 +100,7 @@ describe('ReplaceBitstreamPageComponent', () => {
         ReplaceBitstreamPageComponent,
         TranslateModule.forRoot(),
         FileSizePipe,
+        BtnDisabledDirective,
       ],
       providers: [
         { provide: Location, useValue: locationObject },
@@ -115,13 +118,16 @@ describe('ReplaceBitstreamPageComponent', () => {
     }).compileComponents();
   }),
   );
+  let uploadComponent: UploaderComponent;
 
   beforeEach(() => {
     localeService = TestBed.inject(LocaleService);
     localeService.getCurrentLanguageCode.and.returnValue(of('en'));
     fixture = TestBed.createComponent(ReplaceBitstreamPageComponent);
     component = fixture.componentInstance;
     notificationsService = TestBed.inject(NotificationsService);
+    uploadComponent = fixture.debugElement.query(By.directive(TestUploaderComponent)).context;
+    uploadComponent.uploader.queue = [];
     fixture.detectChanges();
   });
 
@@ -143,11 +149,11 @@ describe('ReplaceBitstreamPageComponent', () => {
   });
 
   describe('clicking save', () => {
-    let uploadComponent: UploaderComponent;
     beforeEach(() => {
       spyOn(component, 'save').and.callThrough();
+      uploadComponent.uploader.queue = [{} as FileItem];
+      fixture.detectChanges();
       const backButton = fixture.debugElement.query(By.css('.save-button'));
-      uploadComponent = fixture.debugElement.query(By.directive(TestUploaderComponent)).context;
       backButton.triggerEventHandler('click', {});
     });
 

src/app/bitstream-page/replace-bitstream-page/replace-bitstream-page.component.ts

@@ -40,6 +40,7 @@ import { RequestService } from '../../core/data/request.service';
 import { Bitstream } from '../../core/shared/bitstream.model';
 import { getFirstSucceededRemoteDataPayload } from '../../core/shared/operators';
 import { URLCombiner } from '../../core/url-combiner/url-combiner';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { ErrorComponent } from '../../shared/error/error.component';
 import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { UploaderComponent } from '../../shared/upload/uploader/uploader.component';
@@ -52,6 +53,7 @@ import { FileSizePipe } from '../../shared/utils/file-size-pipe';
   styleUrls: ['./replace-bitstream-page.component.scss'],
   imports: [
     AsyncPipe,
+    BtnDisabledDirective,
     ErrorComponent,
     FileSizePipe,
     FileUploadModule,

src/app/submission/sections/upload/file/replace/submission-section-upload-file-replace/submission-section-upload-file-replace.component.html

@@ -1,6 +1,6 @@
 <div>
   <div class="modal-header">
-    <h4 class="modal-title">{{
+    <h4 class="modal-title text-danger">{{
         'bitstream.replace.page.header' | translate: {
           fileName: fileName,
           fileSize: fileSizeBytes | dsFileSize
@@ -30,18 +30,21 @@ <h4 class="modal-title">{{
                  [(ngModel)]="shouldReplaceName"></ui-switch>
       <span class="font-weight-bold ms-2">{{ 'bitstream.replace.page.replace-name' | translate }}</span>
     </div>
-    @if (!shouldReplaceName) {
-      <div class="mb-2">
-        <span class="text-muted"> {{ 'bitstream.replace.page.replace-name-hint' | translate }}</span>
-      </div>
-    }
-    <div class="button-row bottom">
-      <div class="mt-4 float-end mb-2">
-        <button class="save-button btn btn-primary" (click)="saveFile(uploader);"><i
-          class="fas fa-save"></i>
-          <span class="d-none d-sm-inline">&nbsp;{{ "bitstream.replace.page.button.save" | translate }}</span>
-        </button>
-      </div>
+    <div class="mb-2">
+      <span [ngClass]="{ 'invisible': shouldReplaceName }"
+            class="text-muted"> {{ 'bitstream.replace.page.replace-name-hint' | translate }}</span>
     </div>
+    <p class="mb-0 text-muted">
+      {{ 'bitstream.replace.page.disclaimer' | translate }}
+    </p>
+  </div>
+  <div class="modal-footer">
+    <button class="save-button btn btn-secondary" (click)="closeModal()">
+      <span class="d-none d-sm-inline">&nbsp;{{ "bitstream.replace.page.button.cancel" | translate }}</span>
+    </button>
+    <button class="save-button btn btn-danger" (click)="saveFile(uploader);" [dsBtnDisabled]="!uploader.uploader?.queue?.length"><i
+      class="fas fa-retweet"></i>
+      <span class="d-none d-sm-inline">&nbsp;{{ "bitstream.replace.page.button.save" | translate }}</span>
+    </button>
   </div>
 </div>

src/app/submission/sections/upload/file/replace/submission-section-upload-file-replace/submission-section-upload-file-replace.component.spec.ts

@@ -23,6 +23,7 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 import { of } from 'rxjs';
 
+import { BtnDisabledDirective } from '../../../../../../shared/btn-disabled.directive';
 import { UploaderComponent } from '../../../../../../shared/upload/uploader/uploader.component';
 import { UploaderOptions } from '../../../../../../shared/upload/uploader/uploader-options.model';
 import { UploaderProperties } from '../../../../../../shared/upload/uploader/uploader-properties.model';
@@ -65,6 +66,7 @@ describe('SubmissionSectionUploadFileReplaceComponent', () => {
         TranslateModule.forRoot(),
         VarDirective,
         FileSizePipe,
+        BtnDisabledDirective,
       ],
       providers: [
         { provide: Location, useValue: locationObject },

src/app/submission/sections/upload/file/replace/submission-section-upload-file-replace/submission-section-upload-file-replace.component.ts

@@ -1,3 +1,4 @@
+import { NgClass } from '@angular/common';
 import {
   Component,
   Input,
@@ -27,6 +28,7 @@ import {
   first,
 } from 'rxjs/operators';
 
+import { BtnDisabledDirective } from '../../../../../../shared/btn-disabled.directive';
 import { UploaderComponent } from '../../../../../../shared/upload/uploader/uploader.component';
 import { UploaderOptions } from '../../../../../../shared/upload/uploader/uploader-options.model';
 import { FileSizePipe } from '../../../../../../shared/utils/file-size-pipe';
@@ -40,7 +42,9 @@ import { SectionsService } from '../../../../sections.service';
   templateUrl: './submission-section-upload-file-replace.component.html',
   styleUrls: ['./submission-section-upload-file-replace.component.scss'],
   imports: [
+    BtnDisabledDirective,
     FileSizePipe,
+    NgClass,
     TranslatePipe,
     UiSwitchModule,
     UploaderComponent,

src/assets/i18n/en.json5

@@ -7681,7 +7681,11 @@
 
   "bitstream.replace.page.button.return": "Back",
 
-  "bitstream.replace.page.button.save": "Save",
+  "bitstream.replace.page.disclaimer": "The original file will be deleted. This operation can't be undone.",
+
+  "bitstream.replace.page.button.cancel": "Cancel",
+
+  "bitstream.replace.page.button.save": "Replace file",
 
   "bitstream.replace.page.upload.failed": "Bitstream upload failed",