Add a description preview to maniphest create / edit panel

Summary: also fixes a small bug where the page title was always "Create Task".
switch it to the header name which is much more descriptive / correct IMO.

Test Plan:
created a new task and watched the description preview update.
edited an old task and saw the description preview populate with the correct
existing data.
edited an old task and edited the description and saw the description preview
update

Reviewers: epriestley

CC: aran, epriestley

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

src/__celerity_resource_map__.php

@@ -330,6 +330,17 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/js/javelin/lib/behavior.js',
   ),
+  0 =>
+  array(
+    'uri' => '/res/b6096fdd/rsrc/js/javelin/lib/__tests__/URI.js',
+    'type' => 'js',
+    'requires' =>
+    array(
+      0 => 'javelin-uri',
+      1 => 'javelin-php-serializer',
+    ),
+    'disk' => '/rsrc/js/javelin/lib/__tests__/URI.js',
+  ),
   'javelin-behavior-aphront-basic-tokenizer' =>
   array(
     'uri' => '/res/9be30797/rsrc/js/application/core/behavior-tokenizer.js',
@@ -461,7 +472,7 @@ celerity_register_resource_map(array(
   ),
   'javelin-behavior-differential-dropdown-menus' =>
   array(
-    'uri' => '/res/7bfb2fdb/rsrc/js/application/differential/behavior-dropdown-menus.js',
+    'uri' => '/res/4bb3ae9a/rsrc/js/application/differential/behavior-dropdown-menus.js',
     'type' => 'js',
     'requires' =>
     array(
@@ -616,6 +627,19 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/js/application/herald/herald-rule-editor.js',
   ),
+  'javelin-behavior-maniphest-description-preview' =>
+  array(
+    'uri' => '/res/8acd6f07/rsrc/js/application/maniphest/behavior-task-preview.js',
+    'type' => 'js',
+    'requires' =>
+    array(
+      0 => 'javelin-behavior',
+      1 => 'javelin-dom',
+      2 => 'javelin-util',
+      3 => 'phabricator-shaped-request',
+    ),
+    'disk' => '/rsrc/js/application/maniphest/behavior-task-preview.js',
+  ),
   'javelin-behavior-maniphest-project-create' =>
   array(
     'uri' => '/res/85a0eaf9/rsrc/js/application/maniphest/behavior-project-create.js',
@@ -1228,6 +1252,15 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/application/maniphest/task-detail.css',
   ),
+  'maniphest-task-edit-css' =>
+  array(
+    'uri' => '/res/68c7863e/rsrc/css/application/maniphest/task-edit.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/application/maniphest/task-edit.css',
+  ),
   'maniphest-task-summary-css' =>
   array(
     'uri' => '/res/14cb4b5d/rsrc/css/application/maniphest/task-summary.css',
@@ -1427,6 +1460,18 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/application/objectselector/object-selector.css',
   ),
+  'phabricator-prefab' =>
+  array(
+    'uri' => '/res/5784a112/rsrc/js/application/core/Prefab.js',
+    'type' => 'js',
+    'requires' =>
+    array(
+      0 => 'javelin-install',
+      1 => 'javelin-util',
+      2 => 'javelin-dom',
+    ),
+    'disk' => '/rsrc/js/application/core/Prefab.js',
+  ),
   'phabricator-profile-css' =>
   array(
     'uri' => '/res/9869d10b/rsrc/css/application/profile/profile-view.css',
@@ -1445,29 +1490,6 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/application/profile/profile-header-view.css',
   ),
-  0 =>
-  array(
-    'uri' => '/res/b6096fdd/rsrc/js/javelin/lib/__tests__/URI.js',
-    'type' => 'js',
-    'requires' =>
-    array(
-      0 => 'javelin-uri',
-      1 => 'javelin-php-serializer',
-    ),
-    'disk' => '/rsrc/js/javelin/lib/__tests__/URI.js',
-  ),
-  'phabricator-prefab' =>
-  array(
-    'uri' => '/res/5784a112/rsrc/js/application/core/Prefab.js',
-    'type' => 'js',
-    'requires' =>
-    array(
-      0 => 'javelin-install',
-      1 => 'javelin-util',
-      2 => 'javelin-dom',
-    ),
-    'disk' => '/rsrc/js/application/core/Prefab.js',
-  ),
   'phabricator-remarkup-css' =>
   array(
     'uri' => '/res/39f358b8/rsrc/css/core/remarkup.css',

src/__phutil_library_map__.php

@@ -387,6 +387,7 @@ phutil_register_library_map(array(
     'ManiphestTask' => 'applications/maniphest/storage/task',
     'ManiphestTaskAuxiliaryStorage' => 'applications/maniphest/storage/auxiliary',
     'ManiphestTaskDescriptionChangeController' => 'applications/maniphest/controller/descriptionchange',
+    'ManiphestTaskDescriptionPreviewController' => 'applications/maniphest/controller/descriptionpreview',
     'ManiphestTaskDetailController' => 'applications/maniphest/controller/taskdetail',
     'ManiphestTaskEditController' => 'applications/maniphest/controller/taskedit',
     'ManiphestTaskExtensions' => 'applications/maniphest/extensions/base',
@@ -1113,6 +1114,7 @@ phutil_register_library_map(array(
     'ManiphestTask' => 'ManiphestDAO',
     'ManiphestTaskAuxiliaryStorage' => 'ManiphestDAO',
     'ManiphestTaskDescriptionChangeController' => 'ManiphestController',
+    'ManiphestTaskDescriptionPreviewController' => 'ManiphestController',
     'ManiphestTaskDetailController' => 'ManiphestController',
     'ManiphestTaskEditController' => 'ManiphestController',
     'ManiphestTaskListController' => 'ManiphestController',

src/aphront/default/configuration/AphrontDefaultApplicationConfiguration.php

@@ -167,6 +167,8 @@ class AphrontDefaultApplicationConfiguration
           'edit/(?P<id>\d+)/$' => 'ManiphestTaskEditController',
           'descriptionchange/(?P<id>\d+)/$' =>
             'ManiphestTaskDescriptionChangeController',
+          'descriptionpreview/$' =>
+            'ManiphestTaskDescriptionPreviewController',
         ),
         'transaction/' => array(
           'save/' => 'ManiphestTransactionSaveController',

src/applications/maniphest/controller/descriptionpreview/ManiphestTaskDescriptionPreviewController.php

@@ -0,0 +1,41 @@
+<?php
+
+/*
+ * Copyright 2012 Facebook, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @group maniphest
+ */
+class ManiphestTaskDescriptionPreviewController extends ManiphestController {
+
+  public function processRequest() {
+
+    $request = $this->getRequest();
+    $description = $request->getStr('description');
+
+    $engine = PhabricatorMarkupEngine::newManiphestMarkupEngine();
+
+    $content =
+      '<div class="maniphest-task-description">'.
+        '<div class="phabricator-remarkup">'.
+          $engine->markupText($description).
+        '</div>'.
+      '</div>';
+
+    return id(new AphrontAjaxResponse())
+      ->setContent($content);
+  }
+}

src/applications/maniphest/controller/descriptionpreview/__init__.php

@@ -0,0 +1,16 @@
+<?php
+/**
+ * This file is automatically generated. Lint this module to rebuild it.
+ * @generated
+ */
+
+
+
+phutil_require_module('phabricator', 'aphront/response/ajax');
+phutil_require_module('phabricator', 'applications/maniphest/controller/base');
+phutil_require_module('phabricator', 'applications/markup/engine');
+
+phutil_require_module('phutil', 'utils');
+
+
+phutil_require_source('ManiphestTaskDescriptionPreviewController.php');

src/applications/maniphest/controller/taskedit/ManiphestTaskEditController.php

@@ -1,7 +1,7 @@
 <?php
 
 /*
- * Copyright 2011 Facebook, Inc.
+ * Copyright 2012 Facebook, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -341,6 +341,8 @@ class ManiphestTaskEditController extends ManiphestController {
       $header_name = 'Create New Task';
     }
 
+    require_celerity_resource('maniphest-task-edit-css');
+
     $project_tokenizer_id = celerity_generate_unique_node_id();
 
     $form = new AphrontFormView();
@@ -478,6 +480,7 @@ class ManiphestTaskEditController extends ManiphestController {
         id(new AphrontFormTextAreaControl())
           ->setLabel('Description')
           ->setName('description')
+          ->setID('description-textarea')
           ->setCaption($email_hint)
           ->setValue($task->getDescription()));
 
@@ -503,13 +506,34 @@ class ManiphestTaskEditController extends ManiphestController {
     $panel->setID($panel_id);
     $panel->appendChild($form);
 
+    $description_preview_panel =
+      '<div class="aphront-panel-preview aphront-panel-preview-full">
+        <div class="maniphest-description-preview-header">
+          Description Preview
+        </div>
+        <div id="description-preview">
+          <div class="aphront-panel-preview-loading-text">
+            Loading preview...
+          </div>
+        </div>
+      </div>';
+
+    Javelin::initBehavior(
+      'maniphest-description-preview',
+      array(
+        'preview'   => 'description-preview',
+        'textarea'  => 'description-textarea',
+        'uri'       => '/maniphest/task/descriptionpreview/',
+      ));
+
     return $this->buildStandardPageResponse(
       array(
         $error_view,
         $panel,
+        $description_preview_panel
       ),
       array(
-        'title' => 'Create Task',
+        'title' => $header_name,
       ));
   }
 }

webroot/rsrc/css/application/maniphest/task-edit.css

@@ -0,0 +1,9 @@
+/**
+ * @provides maniphest-task-edit-css
+ */
+
+.maniphest-description-preview-header {
+  color: #666;
+  margin-bottom: 1em;
+  font-size: 11px;
+}

webroot/rsrc/js/application/maniphest/behavior-task-preview.js

@@ -0,0 +1,29 @@
+/**
+ * @provides javelin-behavior-maniphest-description-preview
+ * @requires javelin-behavior
+ *           javelin-dom
+ *           javelin-util
+ *           phabricator-shaped-request
+ */
+
+JX.behavior('maniphest-description-preview', function(config) {
+
+  var preview = JX.$(config.preview);
+  var textarea = JX.$(config.textarea);
+
+  var callback = function(r) {
+    JX.DOM.setContent(JX.$(config.preview), JX.$H(r));
+  };
+
+  var getdata = function() {
+    return {
+      description : textarea.value
+    };
+  }
+
+  var request = new JX.PhabricatorShapedRequest(config.uri, callback, getdata);
+  var trigger = JX.bind(request, request.trigger);
+
+  JX.DOM.listen(textarea, 'keydown', null, trigger);
+  request.start();
+});