Add Success/Fail states to PHUIObjectList

Summary:
A number of interfaces could use a more consice looking ObjectItemList for showing pass/fail/warn states.

 - Added a new "State" for PHUIObjectItemListView
 - Updated UIExamples
 - Implemented in Herald (next Harmormaster)

Test Plan: UIExamples / Herald, desktop and mobile

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
 return array(
   'names' =>
   array(
-    'core.pkg.css' => 'b39b2afb',
+    'core.pkg.css' => 'a762d94d',
     'core.pkg.js' => '417722ff',
     'darkconsole.pkg.js' => 'ca8671ce',
     'differential.pkg.css' => '8a064eb7',
@@ -106,7 +106,7 @@ return array(
     'rsrc/css/application/tokens/tokens.css' => '5f7bca25',
     'rsrc/css/application/uiexample/example.css' => '528b19de',
     'rsrc/css/core/core.css' => 'da26ddb2',
-    'rsrc/css/core/remarkup.css' => 'f27ecac4',
+    'rsrc/css/core/remarkup.css' => '98a7627b',
     'rsrc/css/core/syntax.css' => '3c18c1cb',
     'rsrc/css/core/z-index.css' => '0d89d53c',
     'rsrc/css/diviner/diviner-shared.css' => '38813222',
@@ -137,7 +137,7 @@ return array(
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-list.css' => 'ef8035b6',
     'rsrc/css/phui/phui-object-box.css' => 'ce92d8ec',
-    'rsrc/css/phui/phui-object-item-list-view.css' => '8b459abe',
+    'rsrc/css/phui/phui-object-item-list-view.css' => 'c11ec980',
     'rsrc/css/phui/phui-pinboard-view.css' => '4b346c2a',
     'rsrc/css/phui/phui-property-list-view.css' => 'c4d44192',
     'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b',
@@ -711,7 +711,7 @@ return array(
     'phabricator-prefab' => '0326e5d0',
     'phabricator-profile-css' => '33e6f703',
     'phabricator-project-tag-css' => '095c9404',
-    'phabricator-remarkup-css' => 'f27ecac4',
+    'phabricator-remarkup-css' => '98a7627b',
     'phabricator-search-results-css' => 'f240504c',
     'phabricator-settings-css' => 'ea8f5915',
     'phabricator-shaped-request' => 'dfa181a4',
@@ -759,7 +759,7 @@ return array(
     'phui-info-panel-css' => '27ea50a1',
     'phui-list-view-css' => 'ef8035b6',
     'phui-object-box-css' => 'ce92d8ec',
-    'phui-object-item-list-view-css' => '8b459abe',
+    'phui-object-item-list-view-css' => 'c11ec980',
     'phui-pinboard-view-css' => '4b346c2a',
     'phui-property-list-view-css' => 'c4d44192',
     'phui-remarkup-preview-css' => '19ad512b',

src/applications/herald/controller/HeraldTranscriptController.php

@@ -294,13 +294,15 @@ final class HeraldTranscriptController extends HeraldController {
     $rule_type_global = HeraldRuleTypeConfig::RULE_TYPE_GLOBAL;
     $action_names = $adapter->getActionNameMap($rule_type_global);
 
-    $rows = array();
+    $list = new PHUIObjectItemListView();
+    $list->setStates(true);
+    $list->setNoDataString(pht('No actions were taken.'));
     foreach ($xscript->getApplyTranscripts() as $apply_xscript) {
 
       $target = $apply_xscript->getTarget();
       switch ($apply_xscript->getAction()) {
         case HeraldAdapter::ACTION_NOTHING:
-          $target = '';
+          $target = null;
           break;
         case HeraldAdapter::ACTION_FLAG:
           $target = PhabricatorFlagColor::getColorName($target);
@@ -316,55 +318,34 @@ final class HeraldTranscriptController extends HeraldController {
                 $target[$k] = $handles[$phid]->getName();
               }
             }
-            $target = implode("\n", $target);
+            $target = implode(", ", $target);
           } else {
             $target = '<empty>';
           }
           break;
       }
 
+      $item = new PHUIObjectItemView();
+
       if ($apply_xscript->getApplied()) {
-        $outcome = phutil_tag(
+        $item->setState(PHUIObjectItemView::STATE_SUCCESS);
-          'span',
-          array('class' => 'outcome-success'),
-          pht('SUCCESS'));
       } else {
-        $outcome = phutil_tag(
+        $item->setState(PHUIObjectItemView::STATE_FAIL);
-          'span',
-          array('class' => 'outcome-failure'),
-          pht('FAILURE'));
       }
 
-      $rows[] = array(
+      $rule = idx($action_names, $apply_xscript->getAction(), pht('Unknown'));
-        idx($action_names, $apply_xscript->getAction(), pht('Unknown')),
-        $target,
-        hsprintf(
-          '<strong>Taken because:</strong> %s<br />'.
-            '<strong>Outcome:</strong> %s %s',
-          $apply_xscript->getReason(),
-          $outcome,
-          $apply_xscript->getAppliedReason()),
-      );
-    }
 
-    $table = new AphrontTableView($rows);
+      $item->setHeader(pht('%s: %s', $rule, $target));
-    $table->setNoDataString(pht('No actions were taken.'));
+      $item->addAttribute($apply_xscript->getReason());
-    $table->setHeaders(
+      $item->addAttribute(
-      array(
+        pht('Outcome: %s', $apply_xscript->getAppliedReason()));
-        pht('Action'),
+
-        pht('Target'),
+      $list->addItem($item);
-        pht('Details'),
+    }
-      ));
-    $table->setColumnClasses(
-      array(
-        '',
-        '',
-        'wide',
-      ));
 
     $box = new PHUIObjectBoxView();
     $box->setHeaderText(pht('Actions Taken'));
-    $box->appendChild($table);
+    $box->appendChild($list);
 
     return $box;
   }

src/applications/uiexample/controller/PhabricatorUIExampleRenderController.php

@@ -45,7 +45,8 @@ final class PhabricatorUIExampleRenderController extends PhabricatorController {
 
     $header = id(new PHUIHeaderView())
       ->setHeader(pht('%s (%s)', $example->getName(), get_class($example)))
-      ->setSubheader($example->getDescription());
+      ->setSubheader($example->getDescription())
+      ->setNoBackground(true);
 
     $nav->appendChild(
       array(

src/applications/uiexample/examples/PHUIObjectItemListExample.php

@@ -360,6 +360,50 @@ final class PHUIObjectItemListExample extends PhabricatorUIExample {
 
     $out[] = array($head, $list);
 
+    $head = id(new PHUIHeaderView())
+      ->setHeader(pht('States'));
+
+    $list = id(new PHUIObjectItemListView())
+      ->setStates(true);
+
+    $list->addItem(
+      id(new PHUIObjectItemView())
+        ->setObjectName('X1200')
+        ->setHeader(pht('Action Passed'))
+        ->addAttribute(pht('That went swimmingly, go you'))
+        ->setHref('#')
+        ->setState(PHUIObjectItemView::STATE_SUCCESS));
+
+    $list->addItem(
+      id(new PHUIObjectItemView())
+        ->setObjectName('X1201')
+        ->setHeader(pht('Action Failed'))
+        ->addAttribute(pht('Whoopsies, might want to fix that'))
+        ->setHref('#')
+        ->setState(PHUIObjectItemView::STATE_FAIL));
+
+    $list->addItem(
+      id(new PHUIObjectItemView())
+        ->setObjectName('X1202')
+        ->setHeader(pht('Action Warning'))
+        ->addAttribute(pht('We need to talk about things'))
+        ->setHref('#')
+        ->setState(PHUIObjectItemView::STATE_WARN));
+
+    $list->addItem(
+      id(new PHUIObjectItemView())
+        ->setObjectName('X1203')
+        ->setHeader(pht('Action Noted'))
+        ->addAttribute(pht('The weather seems nice today'))
+        ->setHref('#')
+        ->setState(PHUIObjectItemView::STATE_NOTE));
+
+    $box = id(new PHUIObjectBoxView())
+      ->setHeaderText('Test Things')
+      ->appendChild($list);
+
+    $out[] = array($head, $box);
+
     return $out;
   }
 }

src/view/phui/PHUIObjectItemListView.php

@@ -11,6 +11,7 @@ final class PHUIObjectItemListView extends AphrontTagView {
   private $flush;
   private $plain;
   private $allowEmptyList;
+  private $states;
 
 
   public function setAllowEmptyList($allow_empty_list) {
@@ -62,6 +63,11 @@ final class PHUIObjectItemListView extends AphrontTagView {
     return $this;
   }
 
+  public function setStates($states) {
+    $this->states = $states;
+    return $this;
+  }
+
   protected function getTagName() {
     return 'ul';
   }
@@ -76,6 +82,9 @@ final class PHUIObjectItemListView extends AphrontTagView {
     if ($this->cards) {
       $classes[] = 'phui-object-list-cards';
     }
+    if ($this->states) {
+      $classes[] = 'phui-object-list-states';
+    }
     if ($this->flush) {
       $classes[] = 'phui-object-list-flush';
     }

src/view/phui/PHUIObjectItemView.php

@@ -19,11 +19,18 @@ final class PHUIObjectItemView extends AphrontTagView {
   private $headIcons = array();
   private $disabled;
   private $imageURI;
+  private $state;
+  private $fontIcon;
 
   const AGE_FRESH = 'fresh';
   const AGE_STALE = 'stale';
   const AGE_OLD   = 'old';
 
+  const STATE_SUCCESS = 'green';
+  const STATE_FAIL = 'red';
+  const STATE_WARN = 'yellow';
+  const STATE_NOTE = 'blue';
+
   public function setDisabled($disabled) {
     $this->disabled = $disabled;
     return $this;
@@ -107,6 +114,27 @@ final class PHUIObjectItemView extends AphrontTagView {
     return $this->imageURI;
   }
 
+  public function setState($state) {
+    $this->state = $state;
+    switch ($state) {
+      case self::STATE_SUCCESS:
+        $fi = 'fa-check-circle green';
+      break;
+      case self::STATE_FAIL:
+        $fi = 'fa-times-circle red';
+      break;
+      case self::STATE_WARN:
+        $fi = 'fa-exclamation-circle yellow';
+      break;
+      case self::STATE_NOTE:
+        $fi = 'fa-info-circle blue';
+      break;
+    }
+    $this->fontIcon = id(new PHUIIconView())
+      ->setIconFont($fi.' fa-2x');
+    return $this;
+  }
+
   public function setEpoch($epoch, $age = self::AGE_FRESH) {
     $date = phabricator_datetime($epoch, $this->getUser());
 
@@ -234,6 +262,10 @@ final class PHUIObjectItemView extends AphrontTagView {
       $item_classes[] = 'phui-object-item-disabled';
     }
 
+    if ($this->state) {
+      $item_classes[] = 'phui-object-item-state-'.$this->state;
+    }
+
     switch ($this->effect) {
       case 'highlighted':
         $item_classes[] = 'phui-object-item-highlighted';
@@ -251,10 +283,14 @@ final class PHUIObjectItemView extends AphrontTagView {
       $item_classes[] = 'phui-object-item-grippable';
     }
 
-    if ($this->getImageuRI()) {
+    if ($this->getImageURI()) {
       $item_classes[] = 'phui-object-item-with-image';
     }
 
+    if ($this->fontIcon) {
+      $item_classes[] = 'phui-object-item-with-ficon';
+    }
+
     return array(
       'class' => $item_classes,
     );
@@ -494,6 +530,16 @@ final class PHUIObjectItemView extends AphrontTagView {
         '');
     }
 
+    $ficon = null;
+    if ($this->fontIcon) {
+      $image = phutil_tag(
+        'div',
+        array(
+          'class' => 'phui-object-item-ficon',
+        ),
+        $this->fontIcon);
+    }
+
     $box = phutil_tag(
       'div',
       array(

webroot/rsrc/css/phui/phui-object-item-list-view.css

@@ -598,3 +598,41 @@
 .phui-object-item-with-image .phui-object-item-content-box {
   margin-left: 54px;
 }
+
+/* - State ---------------------------------------------------------------------
+
+  Provides a list of object status or states, success or fail, etc
+
+*/
+
+.phui-object-item-ficon {
+  width: 26px;
+  height: 26px;
+  margin: 7px 9px 7px 0;
+  position: absolute;
+}
+
+.phui-object-item-with-ficon .phui-object-item-content-box {
+  margin-left: 24px;
+}
+
+.phui-object-box .phui-object-list-states {
+  padding: 8px 12px 0 12px;
+}
+
+.phui-object-box .phui-object-list-states li:last-child .phui-object-item-frame {
+  border: none;
+}
+
+.phui-object-list-states .phui-object-item-frame {
+  border: none;
+  border-bottom: 1px solid {$thinblueborder};
+}
+
+.phui-object-list-states .phui-object-item {
+  border: none;
+}
+
+.phui-object-list-states .phui-object-item-frame {
+  min-height: 44px;
+}