Merge pull request #966 from geonetwork/ME/draft-rollback

ME: draft rollback

apps/metadata-editor-e2e/src/e2e/undo.cy.ts

@@ -0,0 +1,33 @@
+describe('undo', () => {
+  beforeEach(() => {
+    cy.login('admin', 'admin', false)
+    cy.visit('/catalog/search')
+  })
+
+  it('should restore the record and refresh the interface', () => {
+    // First create a record and its draft
+    cy.get('[data-cy="create-record"]').click()
+    cy.get('gn-ui-form-field[ng-reflect-model=abstract] textarea').type(
+      'record abstract'
+    )
+    cy.intercept({
+      method: 'PUT',
+      pathname: '**/records',
+    }).as('insertRecord')
+    cy.get('md-editor-publish-button').click()
+    cy.wait('@insertRecord')
+    cy.url().should('contain', '/edit/')
+    cy.get('[data-cy="undo-button"] button').should('be.disabled')
+    cy.get('gn-ui-form-field[ng-reflect-model=abstract] textarea').type(
+      'draft abstract'
+    )
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(1000) // waiting for draft saving to kick in
+    cy.get('[data-cy="undo-button"]').click()
+    cy.get('[data-cy="confirm-button"]').click()
+    cy.get('gn-ui-form-field[ng-reflect-model=abstract] textarea').should(
+      'have.value',
+      'record abstract'
+    )
+  })
+})

apps/metadata-editor/src/app/edit/components/top-toolbar/top-toolbar.component.html

@@ -8,9 +8,22 @@
   <gn-ui-button type="light">
     <mat-icon class="material-symbols-outlined">download</mat-icon>
   </gn-ui-button>
-  <gn-ui-button type="light">
-    <mat-icon class="material-symbols-outlined">undo</mat-icon>
-  </gn-ui-button>
+  <ng-container *ngrxLet="saveStatus$ as saveStatus">
+    <gn-ui-button
+      type="light"
+      (buttonClick)="confirmUndo()"
+      [disabled]="saveStatus !== 'draft_changes_pending'"
+      [matTooltip]="
+        (saveStatus === 'draft_changes_pending'
+          ? 'editor.record.undo.tooltip.enabled'
+          : 'editor.record.undo.tooltip.disabled'
+        ) | translate
+      "
+      data-cy="undo-button"
+    >
+      <mat-icon class="material-symbols-outlined">undo</mat-icon>
+    </gn-ui-button>
+  </ng-container>
   <div
     class="grow flex flex-row items-center justify-center gap-1 text-[14px]"
     data-cy="save-status"

apps/metadata-editor/src/app/edit/components/top-toolbar/top-toolbar.component.ts

@@ -1,12 +1,16 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { PublishButtonComponent } from '../publish-button/publish-button.component'
-import { ButtonComponent } from '@geonetwork-ui/ui/inputs'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { MatDialog, MatDialogModule } from '@angular/material/dialog'
 import { MatIconModule } from '@angular/material/icon'
+import { MatTooltipModule } from '@angular/material/tooltip'
 import { EditorFacade } from '@geonetwork-ui/feature/editor'
+import { ConfirmationDialogComponent } from '@geonetwork-ui/ui/elements'
+import { ButtonComponent } from '@geonetwork-ui/ui/inputs'
+import { LetDirective } from '@ngrx/component'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { combineLatest, Observable } from 'rxjs'
 import { map } from 'rxjs/operators'
-import { TranslateModule } from '@ngx-translate/core'
+import { PublishButtonComponent } from '../publish-button/publish-button.component'
 
 @Component({
   selector: 'md-editor-top-toolbar',
@@ -15,7 +19,10 @@ import { TranslateModule } from '@ngx-translate/core'
     CommonModule,
     PublishButtonComponent,
     ButtonComponent,
+    LetDirective,
     MatIconModule,
+    MatTooltipModule,
+    MatDialogModule,
     TranslateModule,
   ],
   templateUrl: './top-toolbar.component.html',
@@ -46,5 +53,35 @@ export class TopToolbarComponent {
       })
     )
 
-  constructor(private editorFacade: EditorFacade) {}
+  constructor(
+    public dialog: MatDialog,
+    private translateService: TranslateService,
+    private editorFacade: EditorFacade
+  ) {}
+
+  confirmUndo() {
+    const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+      data: {
+        title: this.translateService.instant(
+          'editor.record.undo.confirmation.title'
+        ),
+        message: this.translateService.instant(
+          'editor.record.undo.confirmation.message'
+        ),
+        confirmText: this.translateService.instant(
+          'editor.record.undo.confirmation.confirmText'
+        ),
+        cancelText: this.translateService.instant(
+          'editor.record.undo.confirmation.cancelText'
+        ),
+      },
+      restoreFocus: true,
+    })
+
+    dialogRef.afterClosed().subscribe((confirmed) => {
+      if (confirmed) {
+        this.editorFacade.undoRecordDraft()
+      }
+    })
+  }
 }

libs/feature/editor/src/lib/+state/editor.actions.ts

@@ -29,6 +29,8 @@ export const saveRecordFailure = createAction(
 
 export const draftSaveSuccess = createAction('[Editor] Draft save success')
 
+export const undoRecordDraft = createAction('[Editor] Undo record draft')
+
 export const setCurrentPage = createAction(
   '[Editor] Set current page',
   props<{ page: number }>()

libs/feature/editor/src/lib/+state/editor.effects.ts

@@ -70,6 +70,21 @@ export class EditorEffects {
     )
   )
 
+  undoRecordDraft$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(EditorActions.undoRecordDraft),
+      withLatestFrom(this.store.select(selectRecord)),
+      switchMap(([, record]) => this.editorService.undoRecordDraft(record)),
+      map(([record, recordSource, alreadySavedOnce]) =>
+        EditorActions.openRecord({
+          record,
+          alreadySavedOnce,
+          recordSource,
+        })
+      )
+    )
+  )
+
   checkHasChangesOnOpen$ = createEffect(() =>
     this.actions$.pipe(
       ofType(EditorActions.openRecord),

libs/feature/editor/src/lib/+state/editor.facade.ts

@@ -46,6 +46,10 @@ export class EditorFacade {
     this.store.dispatch(EditorActions.saveRecord())
   }
 
+  undoRecordDraft() {
+    this.store.dispatch(EditorActions.undoRecordDraft())
+  }
+
   updateRecordField(field: string, value: unknown) {
     this.store.dispatch(EditorActions.updateRecordField({ field, value }))
   }

libs/feature/editor/src/lib/components/overview-upload/overview-upload.component.html

@@ -1,7 +1,7 @@
 <gn-ui-image-input
   [maxSizeMB]="5"
   [previewUrl]="resourceUrl"
-  [altText]="resourceAltText"
+  [altText]="altText"
   (fileChange)="handleFileChange($event)"
   (urlChange)="handleUrlChange($event)"
   (altTextChange)="handleAltTextChange($event)"