Merge ~pappacena/launchpad:delete-message-revision-ui into launchpad:master

[Thiago F. Pappacena]

Allowing users to delete message revision history

[Thiago F. Pappacena (pappacena)]

We are missing some tests (and applying the <a> tag to bug comments and code review), but this works fine the way it is on question messages.

Unmerged commits

6546c93... by Thiago F. Pappacena on 2021-05-28

Allowing users to delete message revisions

diff --git a/lib/canonical/launchpad/icing/css/base.scss b/lib/canonical/launchpad/icing/css/base.scss
index 1e33ca7..cff195c 100644
--- a/lib/canonical/launchpad/icing/css/base.scss
+++ b/lib/canonical/launchpad/icing/css/base.scss
@@ -624,6 +624,13 @@ body {
                 display: none;
                 padding-left: 20px;
                 padding-bottom: 10px;
+
+                // If the content was deleted, we show a default message with
+                // this CSS class.
+                .deleted-content {
+                    padding: 5px;
+                    opacity: 50%;
+                }
             }
         }
 
diff --git a/lib/lp/answers/templates/questionmessage-display.pt b/lib/lp/answers/templates/questionmessage-display.pt
index c1ed29a..346f11b 100644
--- a/lib/lp/answers/templates/questionmessage-display.pt
+++ b/lib/lp/answers/templates/questionmessage-display.pt
@@ -8,7 +8,8 @@
   tal:define="css_classes view/getBoardCommentCSSClass"
   tal:attributes="class string:${css_classes};
                   id string:comment-${context/index};
-                  data-baseurl context/fmt:url">
+                  data-baseurl context/fmt:url;
+                  data-i-can-edit view/can_edit">
   <div class="boardCommentDetails">
     <table>
       <tbody>
@@ -23,6 +24,9 @@
         <script type="text/template">
           <div class='message-revision-item'>
             <div class='message-revision-title'>
+                <a class="sprite remove action-icon message-revision-del-btn">
+                    Remove
+                </a>
                 <a class="js-action">
                     Revision #{revision}, created at  {date_created}
                 </a>
diff --git a/lib/lp/services/messages/javascript/messages.edit.js b/lib/lp/services/messages/javascript/messages.edit.js
index c6e79b6..5c565bd 100644
--- a/lib/lp/services/messages/javascript/messages.edit.js
+++ b/lib/lp/services/messages/javascript/messages.edit.js
@@ -7,6 +7,7 @@
  *  - A div container with the class .editable-message containing everything
  *      else related to the message
  *  - A data-baseurl="/path/to/msg" on the .editable-message container
+ *  - A data-i-can-edit="True|False" on the .editable-message container
  *  - A .editable-message-body container with the original msg content
  *  - A .editable-message-edit-btn element inside the main container, that will
  *      switch the view to edit form when clicked.
@@ -39,6 +40,20 @@ YUI.add('lp.services.messages.edit', function(Y) {
         "Please try again in a few minutes."
     );
 
+    module.confirm_delete_revision_msg = (
+        "Are you sure you want to delete this revision content?");
+
+    module.deleted_content_msg = (
+        "<span class='deleted-content'>" +
+        "  Content deleted by the user." +
+        "</span>"
+    );
+
+    // Making it easier to mock on tests.
+    module.confirm = function(msg) {
+        return confirm(msg)
+    };
+
     module.htmlify_msg = function(text) {
         text = text.replace(/&/g, "&amp;");
         text = text.replace(/</g, "&lt;");
@@ -182,6 +197,7 @@ YUI.add('lp.services.messages.edit', function(Y) {
     module.fillMessageRevisions = function(elements, revisions) {
         // Position the message revision list element.
         revisions = revisions.reverse();
+        var i_can_edit = elements.container.getData('i-can-edit') === "True";
         var revisions_container = elements.container.one(
             ".message-revision-container");
         var last_edit_el = elements.last_edit.getDOMNode();
@@ -198,16 +214,28 @@ YUI.add('lp.services.messages.edit', function(Y) {
                 revisions_container.setStyle('display', 'none');
             });
 
-        var content = "";
+        nodes_holder.getDOMNode().innerHTML = "";
         revisions.forEach(function(rev) {
             var attrs = rev.getAttrs();
             var date_created = new Date(attrs.date_created);
             attrs.date_created = date_created.toLocaleString();
-            attrs.content = module.htmlify_msg(attrs.content);
-            content += Y.Lang.sub(template, attrs);
+            if (!attrs.date_deleted) {
+                attrs.content = module.htmlify_msg(attrs.content);
+            }
+            else {
+                attrs.content = module.deleted_content_msg;
+            }
+            var node = Y.DOM.create(Y.Lang.sub(template, attrs));
+            node.dataset['revision_url'] = attrs.self_link;
+            nodes_holder.appendChild(node);
+
+            if(attrs.date_deleted || !i_can_edit) {
+                // If it was already deleted or I don't have permission to
+                // delete it, remove the "delete button".
+                module.removeDeleteRevisionButton(Y.Node(node));
+            }
         });
 
-        nodes_holder.getDOMNode().innerHTML = content;
         nodes_holder.all(".message-revision-item").each(function(rev_item) {
             rev_item.one(".message-revision-title").on('click', function() {
                 nodes_holder.all('.message-revision-body').setStyle(
@@ -220,9 +248,44 @@ YUI.add('lp.services.messages.edit', function(Y) {
                     'active');
                 rev_item.addClass('active');
             });
+
+            var delete_btn = rev_item.one(".message-revision-del-btn");
+            if (delete_btn) {
+                delete_btn.on('click', function() {
+                    module.deleteMessageRevisionContent(rev_item);
+                });
+            }
         });
     };
 
+    module.removeDeleteRevisionButton = function(rev_item_node) {
+        var delete_btn = rev_item_node.one('.message-revision-del-btn');
+        if (delete_btn) {
+            var node_to_remove = delete_btn.getDOMNode();
+            node_to_remove.parentNode.removeChild(node_to_remove);
+        }
+    };
+
+    module.deleteMessageRevisionContent = function(rev_item) {
+        var revision_url = rev_item.getData('revision_url');
+        if (module.confirm(module.confirm_delete_revision_msg)) {
+            var config = {
+                on: {
+                     success: function() {
+                        var body_dom = rev_item.one(
+                            '.message-revision-body').getDOMNode();
+                        body_dom.innerHTML = module.deleted_content_msg;
+                        module.removeDeleteRevisionButton(rev_item);
+                     },
+                     failure: function(err) {
+                        alert("There was an error. Please try again.");
+                     }
+                 }
+            };
+            this.lp_client.named_post(revision_url, 'deleteContent', config);
+        }
+    };
+
     module.onLastEditClick = function(elements, baseurl) {
         // Hide all open revision containers.
         Y.all('.message-revision-container').each(function(container) {