Provide a clearer UI for "view all results" in partial result panels

Summary:
In some cases, we show a limited number of one type of object somewhere else, like "Recent Such-And-Such" or "Herald Rules Which Use This" or whatever.

We don't do a very good job of communicating that these are partial lists, or how to see all the results. Usually there's a button in the upper right, which is fine, but this could be better.

Add an explicit "more stuff" button that shows up where a pager would appear and makes it clear that (a) the list is partial; and (b) you can click the button to see everything.

Test Plan: {F6302793}

Reviewers: amckinley

Reviewed By: amckinley

Subscribers: PHID-OPKG-gm6ozazyms6q6i22gyam

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

resources/celerity/map.php

@@ -9,7 +9,7 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => '3c8a0668',
     'conpherence.pkg.js' => '020aebcf',
-    'core.pkg.css' => 'b797945d',
+    'core.pkg.css' => '2dd936d6',
     'core.pkg.js' => 'eb53fc5b',
     'differential.pkg.css' => '8d8360fb',
     'differential.pkg.js' => '67e02996',
@@ -132,7 +132,7 @@ return array(
     'rsrc/css/phui/object-item/phui-oi-color.css' => 'b517bfa0',
     'rsrc/css/phui/object-item/phui-oi-drag-ui.css' => 'da15d3dc',
     'rsrc/css/phui/object-item/phui-oi-flush-ui.css' => '490e2e2e',
-    'rsrc/css/phui/object-item/phui-oi-list-view.css' => '909f3844',
+    'rsrc/css/phui/object-item/phui-oi-list-view.css' => 'a65865a7',
     'rsrc/css/phui/object-item/phui-oi-simple-ui.css' => '6a30fa46',
     'rsrc/css/phui/phui-action-list.css' => 'c4972757',
     'rsrc/css/phui/phui-action-panel.css' => '6c386cbf',
@@ -853,7 +853,7 @@ return array(
     'phui-oi-color-css' => 'b517bfa0',
     'phui-oi-drag-ui-css' => 'da15d3dc',
     'phui-oi-flush-ui-css' => '490e2e2e',
-    'phui-oi-list-view-css' => '909f3844',
+    'phui-oi-list-view-css' => 'a65865a7',
     'phui-oi-simple-ui-css' => '6a30fa46',
     'phui-pager-css' => 'd022c7ad',
     'phui-pinboard-view-css' => '1f08f5d8',

src/applications/harbormaster/controller/HarbormasterPlanViewController.php

@@ -455,12 +455,16 @@ final class HarbormasterPlanViewController extends HarbormasterPlanController {
   private function newBuildsView(HarbormasterBuildPlan $plan) {
     $viewer = $this->getViewer();
 
+    $limit = 10;
     $builds = id(new HarbormasterBuildQuery())
       ->setViewer($viewer)
       ->withBuildPlanPHIDs(array($plan->getPHID()))
-      ->setLimit(10)
+      ->setLimit($limit + 1)
       ->execute();
 
+    $more_results = (count($builds) > $limit);
+    $builds = array_slice($builds, 0, $limit);
+
     $list = id(new HarbormasterBuildView())
       ->setViewer($viewer)
       ->setBuilds($builds)
@@ -472,6 +476,11 @@ final class HarbormasterPlanViewController extends HarbormasterPlanController {
       $this->getApplicationURI('/build/'),
       array('plan' => $plan->getPHID()));
 
+    if ($more_results) {
+      $list->newTailButton()
+        ->setHref($more_href);
+    }
+
     $more_link = id(new PHUIButtonView())
       ->setTag('a')
       ->setIcon('fa-list-ul')
@@ -491,14 +500,18 @@ final class HarbormasterPlanViewController extends HarbormasterPlanController {
   private function newRulesView(HarbormasterBuildPlan $plan) {
     $viewer = $this->getViewer();
 
+    $limit = 10;
     $rules = id(new HeraldRuleQuery())
       ->setViewer($viewer)
       ->withDisabled(false)
       ->withAffectedObjectPHIDs(array($plan->getPHID()))
       ->needValidateAuthors(true)
-      ->setLimit(10)
+      ->setLimit($limit + 1)
       ->execute();
 
+    $more_results = (count($rules) > $limit);
+    $rules = array_slice($rules, 0, $limit);
+
     $list = id(new HeraldRuleListView())
       ->setViewer($viewer)
       ->setRules($rules)
@@ -510,6 +523,11 @@ final class HarbormasterPlanViewController extends HarbormasterPlanController {
       '/herald/',
       array('affectedPHID' => $plan->getPHID()));
 
+    if ($more_results) {
+      $list->newTailButton()
+        ->setHref($more_href);
+    }
+
     $more_link = id(new PHUIButtonView())
       ->setTag('a')
       ->setIcon('fa-list-ul')

src/view/phui/PHUIObjectItemListView.php

@@ -12,6 +12,7 @@ final class PHUIObjectItemListView extends AphrontTagView {
   private $drag;
   private $allowEmptyList;
   private $itemClass = 'phui-oi-standard';
+  private $tail = array();
 
   public function setAllowEmptyList($allow_empty_list) {
     $this->allowEmptyList = $allow_empty_list;
@@ -72,6 +73,18 @@ final class PHUIObjectItemListView extends AphrontTagView {
     return 'ul';
   }
 
+  public function newTailButton() {
+    $button = id(new PHUIButtonView())
+      ->setTag('a')
+      ->setColor(PHUIButtonView::GREY)
+      ->setIcon('fa-chevron-down')
+      ->setText(pht('View All Results'));
+
+    $this->tail[] = $button;
+
+    return $button;
+  }
+
   protected function getTagAttributes() {
     $classes = array();
     $classes[] = 'phui-oi-list-view';
@@ -149,9 +162,20 @@ final class PHUIObjectItemListView extends AphrontTagView {
       $pager = $this->pager;
     }
 
+    $tail = array();
+    foreach ($this->tail as $tail_item) {
+      $tail[] = phutil_tag(
+        'li',
+        array(
+          'class' => 'phui-oi-tail',
+        ),
+        $tail_item);
+    }
+
     return array(
       $header,
       $items,
+      $tail,
       $pager,
       $this->renderChildren(),
     );

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

@@ -720,3 +720,9 @@ ul.phui-oi-list-view .phui-oi-selectable
 .differential-revision-small .phui-icon-view {
   color: #6699ba;
 }
+
+.phui-oi-tail {
+  text-align: center;
+  padding: 8px 0;
+  background: linear-gradient({$lightbluebackground}, #fff 66%, #fff);
+}