Make browse view show tokens instead of raw data

Summary: Ref T5750. Move the server-side token rendering code to a shared location and use it in the browse view.

Test Plan: {F372252}

Reviewers: btrahan

Reviewed By: btrahan

Subscribers: epriestley

Maniphest Tasks: T5750

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

src/__phutil_library_map__.php

@@ -2633,6 +2633,7 @@ phutil_register_library_map(array(
     'PhabricatorTypeaheadOwnerDatasource' => 'applications/typeahead/datasource/PhabricatorTypeaheadOwnerDatasource.php',
     'PhabricatorTypeaheadResult' => 'applications/typeahead/storage/PhabricatorTypeaheadResult.php',
     'PhabricatorTypeaheadRuntimeCompositeDatasource' => 'applications/typeahead/datasource/PhabricatorTypeaheadRuntimeCompositeDatasource.php',
+    'PhabricatorTypeaheadTokenView' => 'applications/typeahead/view/PhabricatorTypeaheadTokenView.php',
     'PhabricatorUIConfigOptions' => 'applications/config/option/PhabricatorUIConfigOptions.php',
     'PhabricatorUIExample' => 'applications/uiexample/examples/PhabricatorUIExample.php',
     'PhabricatorUIExampleRenderController' => 'applications/uiexample/controller/PhabricatorUIExampleRenderController.php',
@@ -6030,6 +6031,7 @@ phutil_register_library_map(array(
     'PhabricatorTypeaheadNoOwnerDatasource' => 'PhabricatorTypeaheadDatasource',
     'PhabricatorTypeaheadOwnerDatasource' => 'PhabricatorTypeaheadCompositeDatasource',
     'PhabricatorTypeaheadRuntimeCompositeDatasource' => 'PhabricatorTypeaheadCompositeDatasource',
+    'PhabricatorTypeaheadTokenView' => 'AphrontTagView',
     'PhabricatorUIConfigOptions' => 'PhabricatorApplicationConfigOptions',
     'PhabricatorUIExampleRenderController' => 'PhabricatorController',
     'PhabricatorUIExamplesApplication' => 'PhabricatorApplication',

src/applications/meta/phid/PhabricatorApplicationApplicationPHIDType.php

@@ -9,6 +9,10 @@ final class PhabricatorApplicationApplicationPHIDType
     return pht('Application');
   }
 
+  public function getTypeIcon() {
+    return 'fa-globe';
+  }
+
   public function newObject() {
     return null;
   }

src/applications/typeahead/controller/PhabricatorTypeaheadModularDatasourceController.php

@@ -38,7 +38,7 @@ final class PhabricatorTypeaheadModularDatasourceController
         ->setRawQuery($raw_query);
 
       if ($is_browse) {
-        $limit = 3;
+        $limit = 10;
         $offset = $request->getInt('offset');
         $composite
           ->setLimit($limit + 1)
@@ -60,18 +60,22 @@ final class PhabricatorTypeaheadModularDatasourceController
             pht('Next Page'));
         }
 
-        $rows = array();
+        $items = array();
         foreach ($results as $result) {
-          // TODO: Render nicely.
+          $token = PhabricatorTypeaheadTokenView::newForTypeaheadResult(
-          $rows[] = array_slice($result->getWireFormat(), 0, 3, true);
+            $result);
+          $items[] = phutil_tag(
+            'div',
+            array(
+              'class' => 'grouped',
+            ),
+            $token);
         }
 
-        $table = id(new AphrontTableView($rows));
-
         return $this->newDialog()
           ->setWidth(AphrontDialogView::WIDTH_FORM)
           ->setTitle(get_class($source)) // TODO: Provide nice names.
-          ->appendChild($table)
+          ->appendChild($items)
           ->appendChild($next_link)
           ->addCancelButton('/', pht('Close'));
       }

src/applications/typeahead/storage/PhabricatorTypeaheadResult.php

@@ -73,6 +73,18 @@ final class PhabricatorTypeaheadResult {
     return $this->name;
   }
 
+  public function getDisplayName() {
+    return coalesce($this->displayName, $this->getName());
+  }
+
+  public function getIcon() {
+    return nonempty($this->icon, $this->getDefaultIcon());
+  }
+
+  public function getPHID() {
+    return $this->phid;
+  }
+
   public function getWireFormat() {
     $data = array(
       $this->name,
@@ -83,7 +95,7 @@ final class PhabricatorTypeaheadResult {
       $this->displayType,
       $this->imageURI ? (string)$this->imageURI : null,
       $this->priorityType,
-      ($this->icon === null) ? $this->getDefaultIcon() : $this->icon,
+      $this->getIcon(),
       $this->closed,
       $this->imageSprite ? (string)$this->imageSprite : null,
     );

src/applications/typeahead/view/PhabricatorTypeaheadTokenView.php

@@ -0,0 +1,99 @@
+<?php
+
+final class PhabricatorTypeaheadTokenView
+  extends AphrontTagView {
+
+  private $key;
+  private $icon;
+  private $inputName;
+  private $value;
+
+  public static function newForTypeaheadResult(
+    PhabricatorTypeaheadResult $result) {
+
+    return id(new PhabricatorTypeaheadTokenView())
+      ->setKey($result->getPHID())
+      ->setIcon($result->getIcon())
+      ->setValue($result->getDisplayName());
+  }
+
+  public function setKey($key) {
+    $this->key = $key;
+    return $this;
+  }
+
+  public function getKey() {
+    return $this->key;
+  }
+
+  public function setInputName($input_name) {
+    $this->inputName = $input_name;
+    return $this;
+  }
+
+  public function getInputName() {
+    return $this->inputName;
+  }
+
+  public function setIcon($icon) {
+    $this->icon = $icon;
+    return $this;
+  }
+
+  public function getIcon() {
+    return $this->icon;
+  }
+
+  public function setValue($value) {
+    $this->value = $value;
+    return $this;
+  }
+
+  public function getValue() {
+    return $this->value;
+  }
+
+  protected function getTagName() {
+    return 'a';
+  }
+
+  protected function getTagAttributes() {
+    return array(
+      'class' => 'jx-tokenizer-token',
+    );
+  }
+
+  protected function getTagContent() {
+    $input_name = $this->getInputName();
+    if ($input_name) {
+      $input_name .= '[]';
+    }
+
+    $value = $this->getValue();
+
+    $icon = $this->getIcon();
+    if ($icon) {
+      $value = array(
+        phutil_tag(
+          'span',
+          array(
+            'class' => 'phui-icon-view phui-font-fa bluetext '.$icon,
+          )),
+        $value,
+      );
+    }
+
+    return array(
+      $value,
+      phutil_tag(
+        'input',
+        array(
+          'type'  => 'hidden',
+          'name'  => $input_name,
+          'value' => $this->getKey(),
+        )),
+      phutil_tag('span', array('class' => 'jx-tokenizer-x-placeholder'), ''),
+    );
+  }
+
+}

src/view/control/AphrontTokenizerTemplateView.php

@@ -71,38 +71,11 @@ final class AphrontTokenizerTemplateView extends AphrontView {
   }
 
   private function renderToken($key, $value, $icon) {
-    $input_name = $this->getName();
+    return id(new PhabricatorTypeaheadTokenView())
-    if ($input_name) {
+      ->setKey($key)
-      $input_name .= '[]';
+      ->setValue($value)
-    }
+      ->setIcon($icon)
-
+      ->setInputName($this->getName());
-    if ($icon) {
-      $value = array(
-        phutil_tag(
-          'span',
-          array(
-            'class' => 'phui-icon-view phui-font-fa bluetext '.$icon,
-          )),
-        $value,
-      );
-    }
-
-    return phutil_tag(
-      'a',
-      array(
-        'class' => 'jx-tokenizer-token',
-      ),
-      array(
-        $value,
-        phutil_tag(
-          'input',
-          array(
-            'type'  => 'hidden',
-            'name'  => $input_name,
-            'value' => $key,
-          )),
-        phutil_tag('span', array('class' => 'jx-tokenizer-x-placeholder'), ''),
-      ));
   }
 
 }