Make the policy control a JS dropdown with icons

Summary: Ref T603. After thinking about this for a bit I can't really come up with anything better than what Facebook does, so I'm going to implement something similar for choosing custom policies. To start with, swap this over to a JS-driven dropdown.

Test Plan: See screenshot.

Reviewers: chad, btrahan

Reviewed By: btrahan

CC: chad, aran

Maniphest Tasks: T603

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

src/view/form/control/AphrontFormPolicyControl.php

@@ -48,8 +48,11 @@ final class AphrontFormPolicyControl extends AphrontFormControl {
         }
       }
 
-      $type_name = PhabricatorPolicyType::getPolicyTypeName($policy->getType());
-      $options[$type_name][$policy->getPHID()] = $policy->getFullName();
+      $options[$policy->getType()][$policy->getPHID()] = array(
+        'name' => phutil_utf8_shorten($policy->getName(), 28),
+        'full' => $policy->getName(),
+        'icon' => $policy->getIcon(),
+      );
     }
     return $options;
   }
@@ -69,6 +72,88 @@ final class AphrontFormPolicyControl extends AphrontFormControl {
     }
     $this->setValue($policy);
 
+
+    $control_id = celerity_generate_unique_node_id();
+    $input_id = celerity_generate_unique_node_id();
+
+    $caret = phutil_tag(
+      'span',
+      array(
+        'class' => 'caret',
+      ));
+
+    $input = phutil_tag(
+      'input',
+      array(
+        'type' => 'hidden',
+        'id' => $input_id,
+        'name' => $this->getName(),
+        'value' => $this->getValue(),
+      ));
+
+    $options = $this->getOptions();
+
+    $order = array();
+    $labels = array();
+    foreach ($options as $key => $values) {
+      $order[$key] = array_keys($values);
+      $labels[$key] = PhabricatorPolicyType::getPolicyTypeName($key);
+    }
+
+    $flat_options = array_mergev($options);
+
+    $icons = array();
+    foreach (igroup($flat_options, 'icon') as $icon => $ignored) {
+      $icons[$icon] = id(new PHUIIconView())
+        ->setSpriteSheet(PHUIIconView::SPRITE_STATUS)
+        ->setSpriteIcon($icon);
+    }
+
+
+    Javelin::initBehavior(
+      'policy-control',
+      array(
+        'controlID' => $control_id,
+        'inputID' => $input_id,
+        'options' => $flat_options,
+        'groups' => array_keys($options),
+        'order' => $order,
+        'icons' => $icons,
+        'labels' => $labels,
+      ));
+
+    $selected = $flat_options[$this->getValue()];
+
+    return phutil_tag(
+      'div',
+      array(
+      ),
+      array(
+        javelin_tag(
+          'a',
+          array(
+            'class' => 'grey button dropdown has-icon policy-control',
+            'href' => '#',
+            'mustcapture' => true,
+            'sigil' => 'policy-control',
+            'id' => $control_id,
+          ),
+          array(
+            $caret,
+            javelin_tag(
+              'span',
+              array(
+                'sigil' => 'policy-label',
+                'class' => 'phui-button-text',
+              ),
+              array(
+                $icons[$selected['icon']],
+                $selected['name'],
+              )),
+          )),
+        $input,
+      ));
+
     return AphrontFormSelectControl::renderSelectTag(
       $this->getValue(),
       $this->getOptions(),