Added confirmation modal when restoring a post revision (#16689)

no issue

Added confirmation modal when restoring a post revision

ghost/admin/app/components/gh-post-settings-menu.hbs

@@ -453,6 +453,7 @@
                     @model={{hash
                         post=this.post
                         editorAPI=this.editorAPI
+                        toggleSettingsMenu=this.toggleSettingsMenu
                     }}
                     @close={{this.closePostHistory}}
                     @modifier="total-overlay post-history" />

ghost/admin/app/components/modal-post-history.js

@@ -1,4 +1,5 @@
 import ModalComponent from 'ghost-admin/components/modal-base';
+import RestoreRevisionModal from '../components/modals/restore-revision';
 import diff from 'node-htmldiff';
 import {action, computed} from '@ember/object';
 import {inject as service} from '@ember/service';
@@ -20,7 +21,7 @@ function checkFinishedRendering(element, done) {
 }
 
 export default ModalComponent.extend({
-    notifications: service(),
+    modals: service(),
     selectedHTML: null,
     diffHtml: null,
     showDifferences: true,
@@ -61,6 +62,7 @@ export default ModalComponent.extend({
         this._super(...arguments);
         this.post = this.model.post;
         this.editorAPI = this.model.editorAPI;
+        this.toggleSettingsMenu = this.model.toggleSettingsMenu;
     },
 
     didInsertElement() {
@@ -93,23 +95,22 @@ export default ModalComponent.extend({
     restoreRevision: action(function (index){
         const revision = this.revisionList[index];
 
-        // Persist model
-        this.post.lexical = revision.lexical;
-        this.post.title = revision.title;
-        this.post.save();
+        this.modals.open(RestoreRevisionModal, {
+            post: this.post,
+            revision,
+            updateTitle: () => {
+                this.set('post.titleScratch', revision.title);
+            },
+            updateEditor: () => {
+                const state = this.editorAPI.editorInstance.parseEditorState(revision.lexical);
 
-        // @TODO: error handling
-
-        // Update editor title
-        this.set('post.titleScratch', this.post.title);
-
-        // Update editor content
-        const state = this.editorAPI.editorInstance.parseEditorState(this.post.lexical);
-        this.editorAPI.editorInstance.setEditorState(state);
-
-        // Close modal
-        this.closeModal();
-        this.notifications.showNotification('Revision successfully restored.', {type: 'success'});
+                this.editorAPI.editorInstance.setEditorState(state);
+            },
+            closePostHistoryModal: () => {
+                this.closeModal();
+                this.toggleSettingsMenu();
+            }
+        });
     }),
 
     toggleDifferences: action(function () {

ghost/admin/app/components/modals/restore-revision.hbs

@@ -0,0 +1,20 @@
+<div class="modal-content" {{on-key "Enter" (perform this.restoreRevisionTask)}}>
+    <header class="modal-header">
+        <h1>{{this.title}}</h1>
+    </header>
+    <button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
+
+    <div class="modal-body">
+        <p>{{this.body}}</p>
+    </div>
+
+    <div class="modal-footer">
+        <button type="button" class="gh-btn" {{on "click" @close}}><span>Cancel</span></button>
+        <GhTaskButton
+            @buttonText="Restore"
+            @successText="Restored"
+            @task={{this.restoreRevisionTask}}
+            @class="gh-btn gh-btn-black gh-btn-icon"
+        />
+    </div>
+</div>

ghost/admin/app/components/modals/restore-revision.js

@@ -0,0 +1,54 @@
+import Component from '@glimmer/component';
+import {htmlSafe} from '@ember/template';
+import {inject as service} from '@ember/service';
+import {task} from 'ember-concurrency';
+
+export default class RestoreRevisionModal extends Component {
+    @service notifications;
+
+    get title() {
+        return this.args.data.post.isPublished === true
+            ? 'Restore version for published post?'
+            : 'Restore this version?';
+    }
+
+    get body() {
+        return this.args.data.post.isPublished === true
+            ? htmlSafe(`
+                Heads up! This post has already been <strong>published</strong>, restoring a previous
+                version will automatically update the post on your site.
+            `)
+            : 'Replace your existing draft with this version of the post.';
+    }
+
+    @task
+    *restoreRevisionTask() {
+        try {
+            const {
+                post,
+                revision,
+                updateTitle,
+                updateEditor,
+                closePostHistoryModal
+            } = this.args.data;
+
+            post.lexical = revision.lexical;
+            post.title = revision.title;
+
+            yield post.save();
+
+            updateTitle();
+            updateEditor();
+
+            this.notifications.showNotification('Revision successfully restored.', {type: 'success'});
+
+            closePostHistoryModal();
+
+            return true;
+        } catch (error) {
+            this.notifications.showNotification('Failed to restore revision.', {type: 'error'});
+        } finally {
+            this.args.close();
+        }
+    }
+}

ghost/admin/app/templates/lexical-editor.hbs

@@ -110,6 +110,7 @@
                 @updateSlugTask={{this.updateSlugTask}}
                 @savePostTask={{this.savePostTask}}
                 @editorAPI={{this.editorAPI}}
+                @toggleSettingsMenu={{this.toggleSettingsMenu}}
             />
         {{/if}}
     </div>