UX: Show edit button on post revision modal as long as user can edit.

app/assets/javascripts/discourse/controllers/history.js.es6

@@ -2,6 +2,7 @@ import ModalFunctionality from 'discourse/mixins/modal-functionality';
 import { categoryBadgeHTML } from 'discourse/helpers/category-link';
 import computed from 'ember-addons/ember-computed-decorators';
 import { propertyGreaterThan, propertyLessThan } from 'discourse/lib/computed';
+import { on } from 'ember-addons/ember-computed-decorators';
 
 function customTagArray(fieldName) {
   return function() {
@@ -17,9 +18,10 @@ export default Ember.Controller.extend(ModalFunctionality, {
   loading: true,
   viewMode: "side_by_side",
 
-  _changeViewModeOnMobile: function() {
-    if (this.site.mobileView) { this.set("viewMode", "inline"); }
-  }.on("init"),
+  @on('init')
+  _changeViewModeOnMobile() {
+    if (this.site && this.site.mobileView) { this.set("viewMode", "inline"); }
+  },
 
   previousFeaturedLink: Em.computed.alias('model.featured_link_changes.previous'),
   currentFeaturedLink: Em.computed.alias('model.featured_link_changes.current'),
@@ -109,9 +111,14 @@ export default Ember.Controller.extend(ModalFunctionality, {
     return !prevHidden && this.currentUser && this.currentUser.get('staff');
   },
 
-  @computed("model.wiki", "model.last_revision", "model.current_revision")
-  displayEdit(wiki, lastRevision, currentRevision) {
-    return wiki && (lastRevision === currentRevision);
+  @computed("model.last_revision", "model.current_revision", "model.can_edit")
+  displayEdit(lastRevision, currentRevision, canEdit) {
+    return canEdit && (lastRevision === currentRevision);
+  },
+
+  @computed("model.wiki")
+  editButtonLabel(wiki) {
+    return `post.revisions.controls.${wiki ? 'edit_wiki' : 'edit_post'}`;
   },
 
   @computed()
@@ -192,7 +199,7 @@ export default Ember.Controller.extend(ModalFunctionality, {
     hideVersion() { this.hide(this.get("model.post_id"), this.get("model.current_revision")); },
     showVersion() { this.show(this.get("model.post_id"), this.get("model.current_revision")); },
 
-    editWiki() {
+    editPost() {
       this.get('topicController').send('editPost', this.get('post'));
       this.send('closeModal');
     },

app/assets/javascripts/discourse/templates/modal/history.hbs

@@ -1,5 +1,5 @@
 {{#d-modal-body title="history" maxHeight="80%"}}
-  <div>
+  <div id="revision">
     <div id="revision-controls">
       {{d-button action="loadFirstVersion" icon="fast-backward" title="post.revisions.controls.first" disabled=loadFirstDisabled}}
       {{d-button action="loadPreviousVersion" icon="backward" title="post.revisions.controls.previous" disabled=loadPreviousDisabled}}
@@ -12,6 +12,12 @@
       {{d-button action="loadLastVersion" icon="fast-forward" title="post.revisions.controls.last" disabled=loadLastDisabled}}
     </div>
 
+    {{#if displayEdit}}
+      {{d-button action="editPost"
+          icon="pencil"
+          label=editButtonLabel}}
+    {{/if}}
+
     <div id="display-modes">
       {{d-button action="displayInline"
           icon="square-o"
@@ -114,6 +120,8 @@
       {{{bodyDiff}}}
     {{/links-redirect}}
 
+    <hr>
+
     {{#if displayRevert}}
       {{d-button action="revertToVersion" icon="undo" label="post.revisions.controls.revert" class="btn-danger" disabled=loading}}
     {{/if}}
@@ -127,9 +135,9 @@
     {{/if}}
 
     {{#if displayEdit}}
-      {{d-button action="editWiki"
+      {{d-button action="editPost"
           icon="pencil"
-          label="post.revisions.controls.edit_wiki"}}
+          label=editButtonLabel}}
     {{/if}}
   </div>
 {{/d-modal-body}}

app/assets/stylesheets/common/base/history.scss

@@ -6,6 +6,15 @@
     min-width: 96px;
     text-align: center;
   }
+
+  #revision {
+    overflow: auto;
+  }
+
+  #revision-controls {
+    display: inline-block;
+  }
+
   #revisions .row:first-of-type {
     margin-top: 10px;
   }

app/assets/stylesheets/desktop/history.scss

@@ -8,6 +8,8 @@
   }
   #revision-controls {
     float: left;
+    padding-right: 5px;
+
     .btn[disabled] {
       cursor: not-allowed;
       background-color: dark-light-diff($primary, $secondary, 90%, -60%);
@@ -18,6 +20,9 @@
   }
   #display-modes {
     text-align: right;
+    display: inline-block;
+    float: right;
+
     .btn {
       background-color:inherit;
       color: dark-light-diff($primary, $secondary, 50%, -50%);

app/serializers/post_revision_serializer.rb

@@ -24,7 +24,8 @@ class PostRevisionSerializer < ApplicationSerializer
              :title_changes,
              :user_changes,
              :tags_changes,
-             :wiki
+             :wiki,
+             :can_edit
 
 
   # Creates a field called field_name_changes with previous and
@@ -100,6 +101,10 @@ class PostRevisionSerializer < ApplicationSerializer
     object.post.wiki
   end
 
+  def can_edit
+    scope.can_edit?(object.post)
+  end
+
   def edit_reason
     # only show 'edit_reason' when revisions are consecutive
     current["edit_reason"] if scope.can_view_hidden_post_revisions? ||

config/locales/client.en.yml

@@ -1892,7 +1892,8 @@ en:
           hide: "Hide revision"
           show: "Show revision"
           revert: "Revert to this revision"
-          edit_wiki: "Edit wiki"
+          edit_wiki: "Edit Wiki"
+          edit_post: "Edit Post"
           comparing_previous_to_current_out_of_total: "<strong>{{previous}}</strong> <i class='fa fa-arrows-h'></i> <strong>{{current}}</strong> / {{total}}"
         displays:
           inline:

test/javascripts/controllers/history-test.js.es6

@@ -0,0 +1,28 @@
+moduleFor("controller:history");
+
+test("displayEdit", function() {
+  const HistoryController = this.subject();
+
+  HistoryController.setProperties({
+    model: { last_revision: 3, current_revision: 3, can_edit: false }
+  });
+
+  equal(
+    HistoryController.get("displayEdit"), false,
+    "it should not display edit button when user cannot edit the post"
+  );
+
+  HistoryController.set("model.can_edit", true);
+
+  equal(
+    HistoryController.get("displayEdit"), true,
+    "it should display edit button when user can edit the post"
+  );
+
+  HistoryController.set("model.current_revision", 2);
+
+  equal(
+    HistoryController.get("displayEdit"), false,
+    "it should only display the edit button on the latest revision"
+  );
+});