Files
dspace-angular/src/app/submission/form/footer/submission-form-footer.component.html
Yura Bondarenko d69a02e6cc 90978: Fix e2e tests failing due to interactions before page fully loaded
Now that we use initialNavigation: 'enabledBlocking', pages can appear to be loaded before some functionality is fully active.
In some cases this trips up Cypress, and it tries to interact with the app too soon.

We address this by introducing a new dsBrowserOnly pipe in order to defer the data-test attributes Cypress relies on to CSR.
2022-05-04 15:25:46 +02:00

73 lines
4.0 KiB
HTML

<div class="row" *ngIf="!!submissionId">
<div class="col">
<button *ngIf="(showDepositAndDiscard | async)"
type="button"
id="discard"
[attr.data-test]="'discard' | dsBrowserOnly"
class="btn btn-danger"
[disabled]="(processingSaveStatus | async) || (processingDepositStatus | async)"
(click)="$event.preventDefault();confirmDiscard(content)">
<i class="fas fa-trash"></i> {{'submission.general.discard.submit' | translate}}
</button>
</div>
<div class="col text-right d-flex justify-content-end align-items-center">
<span *ngIf="!(hasUnsavedModification | async) && !(processingSaveStatus | async) && !(processingDepositStatus | async)">
<i class="fas fa-check-circle"></i> {{'submission.general.info.saved' | translate}}
</span>
<span *ngIf="(hasUnsavedModification | async) && !(processingSaveStatus | async) && !(processingDepositStatus | async)">
<i class="fas fa-exclamation-circle"></i> {{'submission.general.info.pending-changes' | translate}}
</span>
<div *ngIf="(processingSaveStatus | async) || (processingDepositStatus | async)" class="col d-flex justify-content-end align-items-center">
<div class="progress w-75">
<div *ngIf="(processingSaveStatus | async)" class="progress-bar progress-bar-striped progress-bar-animated bg-info" [style.width]="'100%'" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Saving...</div>
<div *ngIf="(processingDepositStatus | async)" class="progress-bar progress-bar-striped progress-bar-animated bg-info" [style.width]="'100%'" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Depositing...</div>
</div>
</div>
<div class="ml-2 space-children-mr">
<button type="button"
class="btn btn-secondary"
id="save"
[attr.data-test]="'save' | dsBrowserOnly"
[disabled]="(processingSaveStatus | async) || !(hasUnsavedModification | async)"
(click)="save($event)">
<span><i class="fas fa-save"></i> {{'submission.general.save' | translate}}</span>
</button>
<button type="button"
[class.btn-primary]="!(showDepositAndDiscard | async)"
[class.btn-secondary]="(showDepositAndDiscard | async)"
class="btn"
id="saveForLater"
[attr.data-test]="'save-for-later' | dsBrowserOnly"
[disabled]="(processingSaveStatus | async) || (processingDepositStatus | async)"
(click)="saveLater($event)">
<span><i class="fas fa-save"></i> {{'submission.general.save-later' | translate}}</span>
</button>
<button *ngIf="(showDepositAndDiscard | async)"
type="button"
id="deposit"
[attr.data-test]="'deposit' | dsBrowserOnly"
class="btn btn-success"
[disabled]="(processingSaveStatus | async) || (processingDepositStatus | async)"
(click)="deposit($event)">
<span><i class="fas fa-plus"></i> {{'submission.general.deposit' | translate}}</span>
</button>
</div>
</div>
</div>
<ng-template #content let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title text-danger">{{'submission.general.discard.confirm.title' | translate}}</h4>
<button type="button" class="close" aria-label="Close" (click)="d('cancel')">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>{{'submission.general.discard.confirm.info' | translate}}</p>
</div>
<div class="modal-footer space-children-mr">
<button type="button" id="discard_cancel" class="btn btn-secondary" (click)="c('cancel')">{{'submission.general.discard.confirm.cancel' | translate}}</button>
<button type="button" id="discard_submit" class="btn btn-danger" (click)="c('ok')">{{'submission.general.discard.confirm.submit' | translate}}</button>
</div>
</ng-template>