Unify EditEngine preview behavior; prepare for saving complex drafts

Summary:
Ref T9132. We currently have an old preview/draft behavior and a new actions behavior.

Let the actions behavior do drafts/previews too, so we can eventually throw away the old thing.

This is pretty much just copying the old behavior into the new one, but with a few tweaks. The major change is that we submit all the stacked actions behavior now, so the preview reflects everything the change will do (and, soon, we can save it in the draft in a consistent way).

Also includes one hack-fix that I'll clean up at some point.

Test Plan: Added a bunch of stacked actions and observed meaningful previews.

Reviewers: chad

Reviewed By: chad

Maniphest Tasks: T9132

Differential Revision: https://secure.phabricator.com/D14672

resources/celerity/map.php

@@ -427,7 +427,7 @@ return array(
     'rsrc/js/application/repository/repository-crossreference.js' => 'e5339c43',
     'rsrc/js/application/search/behavior-reorder-queries.js' => 'e9581f08',
     'rsrc/js/application/slowvote/behavior-slowvote-embed.js' => '887ad43f',
-    'rsrc/js/application/transactions/behavior-comment-actions.js' => '2ada1547',
+    'rsrc/js/application/transactions/behavior-comment-actions.js' => 'f293e8a0',
     'rsrc/js/application/transactions/behavior-reorder-fields.js' => 'b59e1e96',
     'rsrc/js/application/transactions/behavior-show-older-transactions.js' => 'dbbf48b6',
     'rsrc/js/application/transactions/behavior-transaction-comment-form.js' => 'b23b49e6',
@@ -571,7 +571,7 @@ return array(
     'javelin-behavior-audit-preview' => 'd835b03a',
     'javelin-behavior-bulk-job-reload' => 'edf8a145',
     'javelin-behavior-choose-control' => '6153c708',
-    'javelin-behavior-comment-actions' => '2ada1547',
+    'javelin-behavior-comment-actions' => 'f293e8a0',
     'javelin-behavior-config-reorder-fields' => 'b6993408',
     'javelin-behavior-conpherence-drag-and-drop-photo' => 'cf86d16a',
     'javelin-behavior-conpherence-menu' => '1d45c74d',
@@ -1043,14 +1043,6 @@ return array(
       'javelin-install',
       'javelin-util',
     ),
-    '2ada1547' => array(
-      'javelin-behavior',
-      'javelin-stratcom',
-      'javelin-workflow',
-      'javelin-dom',
-      'phuix-form-control-view',
-      'phuix-icon-view',
-    ),
     '2b8de964' => array(
       'javelin-install',
       'javelin-util',
@@ -1980,6 +1972,14 @@ return array(
       'javelin-workflow',
       'javelin-json',
     ),
+    'f293e8a0' => array(
+      'javelin-behavior',
+      'javelin-stratcom',
+      'javelin-workflow',
+      'javelin-dom',
+      'phuix-form-control-view',
+      'phuix-icon-view',
+    ),
     'f36e01af' => array(
       'javelin-behavior',
       'javelin-behavior-device',

src/applications/transactions/editfield/PhabricatorPHIDListEditField.php

@@ -44,6 +44,14 @@ abstract class PhabricatorPHIDListEditField
     return new AphrontPHIDListHTTPParameterType();
   }
 
+  public function readValueFromComment($value) {
+    // TODO: This is really hacky -- make sure we pass a plain PHID list to
+    // the edit type. This method probably needs to move down to EditType, and
+    // maybe more additional logic does too.
+    $this->setUseEdgeTransactions(false);
+    return parent::readValueFromComment($value);
+  }
+
   public function getValueForTransaction() {
     $new = parent::getValueForTransaction();
 

src/applications/transactions/view/PhabricatorApplicationTransactionCommentView.php

@@ -12,7 +12,6 @@ class PhabricatorApplicationTransactionCommentView extends AphrontView {
   private $previewTimelineID;
   private $previewToggleID;
   private $formID;
-  private $statusID;
   private $commentID;
   private $draft;
   private $requestURI;
@@ -148,23 +147,17 @@ class PhabricatorApplicationTransactionCommentView extends AphrontView {
       $preview = null;
     }
 
+    if (!$this->getEditTypes()) {
       Javelin::initBehavior(
         'phabricator-transaction-comment-form',
         array(
           'formID'        => $this->getFormID(),
           'timelineID'    => $this->getPreviewTimelineID(),
           'panelID'       => $this->getPreviewPanelID(),
-        'statusID'      => $this->getStatusID(),
-        'commentID'     => $this->getCommentID(),
-
-        'loadingString' => pht('Loading Preview...'),
-        'savingString'  => pht('Saving Draft...'),
-        'draftString'   => pht('Saved Draft'),
-
           'showPreview'   => $this->getShowPreview(),
-
           'actionURI'     => $this->getAction(),
         ));
+    }
 
     $comment_box = id(new PHUIObjectBoxView())
       ->setFlush(true)
@@ -175,13 +168,6 @@ class PhabricatorApplicationTransactionCommentView extends AphrontView {
   }
 
   private function renderCommentPanel() {
-    $status = phutil_tag(
-      'div',
-      array(
-        'id' => $this->getStatusID(),
-      ),
-      '');
-
     $draft_comment = '';
     $draft_key = null;
     if ($this->getDraft()) {
@@ -269,7 +255,11 @@ class PhabricatorApplicationTransactionCommentView extends AphrontView {
           'inputID' => $input_id,
           'formID' => $this->getFormID(),
           'placeID' => $place_id,
+          'panelID' => $this->getPreviewPanelID(),
+          'timelineID' => $this->getPreviewTimelineID(),
           'actions' => $action_map,
+          'showPreview' => $this->getShowPreview(),
+          'actionURI' => $this->getAction(),
         ));
     }
 
@@ -283,10 +273,7 @@ class PhabricatorApplicationTransactionCommentView extends AphrontView {
           ->setValue($draft_comment))
       ->appendChild(
         id(new AphrontFormSubmitControl())
-          ->setValue($this->getSubmitButtonName()))
-      ->appendChild(
-        id(new AphrontFormMarkupControl())
-          ->setValue($status));
+          ->setValue($this->getSubmitButtonName()));
 
     return $form;
   }

webroot/rsrc/js/application/transactions/behavior-comment-actions.js

@@ -34,19 +34,6 @@ JX.behavior('comment-actions', function(config) {
     }
   });
 
-  JX.DOM.listen(form_node, 'submit', null, function() {
-    var data = [];
-
-    for (var k in rows) {
-      data.push({
-        type: k,
-        value: rows[k].getValue()
-      });
-    }
-
-    input_node.value = JX.JSON.stringify(data);
-  });
-
   function add_row(option) {
     var action = action_map[option.value];
     if (!action) {
@@ -77,4 +64,65 @@ JX.behavior('comment-actions', function(config) {
     place_node.parentNode.insertBefore(node, place_node);
   }
 
+  function serialize_actions() {
+    var data = [];
+
+    for (var k in rows) {
+      data.push({
+        type: k,
+        value: rows[k].getValue()
+      });
+    }
+
+    return JX.JSON.stringify(data);
+  }
+
+  function get_data() {
+    var data = JX.DOM.convertFormToDictionary(form_node);
+
+    data.__preview__ = 1;
+    data[input_node.name] = serialize_actions();
+
+    return data;
+  }
+
+  function onresponse(response) {
+    var panel = JX.$(config.panelID);
+    if (!response.xactions.length) {
+      JX.DOM.hide(panel);
+    } else {
+      JX.DOM.setContent(
+        JX.$(config.timelineID),
+        [
+          JX.$H(response.spacer),
+          JX.$H(response.xactions.join(response.spacer))
+        ]);
+      JX.DOM.show(panel);
+    }
+  }
+
+  JX.DOM.listen(form_node, 'submit', null, function() {
+    input_node.value = serialize_actions();
+  });
+
+  if (config.showPreview) {
+    var request = new JX.PhabricatorShapedRequest(
+      config.actionURI,
+      onresponse,
+      get_data);
+
+    var trigger = JX.bind(request, request.trigger);
+
+    JX.DOM.listen(form_node, 'keydown', null, trigger);
+
+    var always_trigger = function() {
+      new JX.Request(config.actionURI, onresponse)
+        .setData(get_data())
+        .send();
+    };
+
+    JX.DOM.listen(form_node, 'shouldRefresh', null, always_trigger);
+    request.start();
+  }
+
 });