Make ApplicationTransactions preview -> submit flow less janky

Summary: ...also make it so in Pholio when you add an inline comment the preview refreshes. Fixes T2649.

Test Plan: played around in pholio leaving commentary. noted that a new inline comment would refresh the preview.

Reviewers: epriestley, chad

Reviewed By: epriestley

CC: aran, Korvin

Maniphest Tasks: T2649

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

src/__celerity_resource_map__.php

@@ -2100,20 +2100,22 @@ celerity_register_resource_map(array(
   ),
   'javelin-behavior-phabricator-transaction-comment-form' =>
   array(
-    'uri' => '/res/7591a57f/rsrc/js/application/transactions/behavior-transaction-comment-form.js',
+    'uri' => '/res/dddc07e9/rsrc/js/application/transactions/behavior-transaction-comment-form.js',
     'type' => 'js',
     'requires' =>
     array(
       0 => 'javelin-behavior',
       1 => 'javelin-dom',
       2 => 'javelin-util',
-      3 => 'phabricator-shaped-request',
+      3 => 'javelin-fx',
+      4 => 'javelin-request',
+      5 => 'phabricator-shaped-request',
     ),
     'disk' => '/rsrc/js/application/transactions/behavior-transaction-comment-form.js',
   ),
   'javelin-behavior-phabricator-transaction-list' =>
   array(
-    'uri' => '/res/f1fbb474/rsrc/js/application/transactions/behavior-transaction-list.js',
+    'uri' => '/res/e7a015a7/rsrc/js/application/transactions/behavior-transaction-list.js',
     'type' => 'js',
     'requires' =>
     array(
@@ -2153,7 +2155,7 @@ celerity_register_resource_map(array(
   ),
   'javelin-behavior-pholio-mock-view' =>
   array(
-    'uri' => '/res/0632e7d9/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
+    'uri' => '/res/983e2e81/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
     'type' => 'js',
     'requires' =>
     array(

src/applications/pholio/controller/PholioMockViewController.php

@@ -71,8 +71,10 @@ final class PholioMockViewController extends PholioController {
     require_celerity_resource('pholio-css');
     require_celerity_resource('pholio-inline-comments-css');
 
+    $comment_form_id = celerity_generate_unique_node_id();
     $output = id(new PholioMockImagesView())
       ->setRequestURI($request->getRequestURI())
+      ->setCommentFormID($comment_form_id)
       ->setUser($user)
       ->setMock($mock)
       ->setImageID($this->imageID);
@@ -82,7 +84,7 @@ final class PholioMockViewController extends PholioController {
       ->setTransactions($xactions)
       ->setMarkupEngine($engine);
 
-    $add_comment = $this->buildAddCommentView($mock);
+    $add_comment = $this->buildAddCommentView($mock, $comment_form_id);
 
     $crumbs = $this->buildApplicationCrumbs($this->buildSideNav());
     $crumbs->setActionList($actions);
@@ -182,7 +184,7 @@ final class PholioMockViewController extends PholioController {
     return $properties;
   }
 
-  private function buildAddCommentView(PholioMock $mock) {
+  private function buildAddCommentView(PholioMock $mock, $comment_form_id) {
     $user = $this->getRequest()->getUser();
 
     $draft = PhabricatorDraft::newFromUserAndKey($user, $mock->getPHID());
@@ -202,6 +204,7 @@ final class PholioMockViewController extends PholioController {
 
     $form = id(new PhabricatorApplicationTransactionCommentView())
       ->setUser($user)
+      ->setFormID($comment_form_id)
       ->setDraft($draft)
       ->setSubmitButtonName($button_name)
       ->setAction($this->getApplicationURI('/comment/'.$mock->getID().'/'))

src/applications/pholio/view/PholioMockImagesView.php

@@ -5,6 +5,15 @@ final class PholioMockImagesView extends AphrontView {
   private $mock;
   private $imageID;
   private $requestURI;
+  private $commentFormID;
+
+  public function setCommentFormID($comment_form_id) {
+    $this->commentFormID = $comment_form_id;
+    return $this;
+  }
+  public function getCommentFormID() {
+    return $this->commentFormID;
+  }
 
   public function setRequestURI(PhutilURI $request_uri) {
     $this->requestURI = $request_uri;
@@ -72,6 +81,7 @@ final class PholioMockImagesView extends AphrontView {
       'mockID' => $mock->getID(),
       'panelID' => $panel_id,
       'viewportID' => $viewport_id,
+      'commentFormID' => $this->getCommentFormID(),
       'images' => $images,
       'selectedID' => $selected_id,
       'loggedIn' => $this->getUser()->isLoggedIn(),

src/applications/transactions/view/PhabricatorApplicationTransactionCommentView.php

@@ -172,6 +172,11 @@ class PhabricatorApplicationTransactionCommentView extends AphrontView {
     return $this->previewTimelineID;
   }
 
+  public function setFormID($id) {
+    $this->formID = $id;
+    return $this;
+  }
+
   private function getFormID() {
     if (!$this->formID) {
       $this->formID = celerity_generate_unique_node_id();

webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js

@@ -551,6 +551,7 @@ JX.behavior('pholio-mock-view', function(config) {
 
       var edit = new JX.Request(editURI, function(r) {
         load_inline_comment(data.id);
+        JX.DOM.invoke(JX.$(config.commentFormID), 'shouldRefresh');
       });
       edit.addData({
         op: 'update',
@@ -598,6 +599,7 @@ JX.behavior('pholio-mock-view', function(config) {
 
         interrupt_typing();
         redraw_inlines(active_image.id);
+        JX.DOM.invoke(JX.$(config.commentFormID), 'shouldRefresh');
       };
 
       JX.Workflow.newFromForm(form, data)
@@ -627,6 +629,7 @@ JX.behavior('pholio-mock-view', function(config) {
   }
 
   load_inline_comments();
+  JX.DOM.invoke(JX.$(config.commentFormID), 'shouldRefresh');
 
   JX.Stratcom.listen('resize', null, redraw_image);
   redraw_image();

webroot/rsrc/js/application/transactions/behavior-transaction-comment-form.js

@@ -3,6 +3,8 @@
  * @requires javelin-behavior
  *           javelin-dom
  *           javelin-util
+ *           javelin-fx
+ *           javelin-request
  *           phabricator-shaped-request
  */
 
@@ -10,9 +12,20 @@ JX.behavior('phabricator-transaction-comment-form', function(config) {
 
   var form = JX.$(config.formID);
 
-  JX.DOM.listen(form, 'willClear', null, function(e) {
+  JX.DOM.listen(form, 'willSubmit', null, function (e) {
     e.kill();
+    var preview = JX.$(config.panelID);
+    preview.style.opacity = 0.5;
+  });
+  JX.DOM.listen(form, 'willClear', null, function(e) {
     JX.$(config.commentID).value = '';
+    var preview = JX.$(config.panelID);
+    new JX.FX(preview)
+      .setDuration(500)
+      .then(function () {
+        new JX.FX(preview).setDuration(1000).start({opacity: [0, 1]});
+      })
+      .start({opacity: [0.5, 0]});
   });
 
   var getdata = function() {
@@ -47,8 +60,13 @@ JX.behavior('phabricator-transaction-comment-form', function(config) {
     onresponse,
     getdata);
   var trigger = JX.bind(request, request.trigger);
-
   JX.DOM.listen(form, 'keydown', null, trigger);
+  var always_trigger = function() {
+    new JX.Request(config.actionURI, onresponse)
+          .setData(getdata())
+          .send();
+  };
+  JX.DOM.listen(form, 'shouldRefresh', null, always_trigger);
 
   request.start();
 });

webroot/rsrc/js/application/transactions/behavior-transaction-list.js

@@ -79,9 +79,11 @@ JX.behavior('phabricator-transaction-list', function(config) {
     ['submit', 'didSyntheticSubmit'],
     'transaction-append',
     function(e) {
+      e.kill();
       var form = e.getTarget();
+      JX.DOM.invoke(form, 'willSubmit');
 
-      JX.Workflow.newFromForm(form, {anchor: next_anchor})
+      JX.Workflow.newFromForm(form, { anchor : next_anchor })
         .setHandler(function(response) {
           ontransactions(response);
 
@@ -92,7 +94,6 @@ JX.behavior('phabricator-transaction-list', function(config) {
         })
         .start();
 
-      e.kill();
     });
 
 });