[Redesign] Add Show/Hide functions to PHUIObjectBoxView

Summary: Ref T8099, adds 'show/hide' functions to PHUIObjectBoxView, rolls them out in Application Search for trial.

Test Plan:
Test doing a couple searches in Projects, Audit, etc. Seems to work ok. Design might need more?

{F437207}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T8099

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '9d77cbde',
+    'core.pkg.css' => '247930e0',
     'core.pkg.js' => '9db3e620',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => 'bb338e4b',
@@ -140,7 +140,7 @@ return array(
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-info-view.css' => '33e54618',
     'rsrc/css/phui/phui-list.css' => 'e448b6ba',
-    'rsrc/css/phui/phui-object-box.css' => 'e3441f90',
+    'rsrc/css/phui/phui-object-box.css' => 'fc4b0f93',
     'rsrc/css/phui/phui-object-item-list-view.css' => 'fef025d8',
     'rsrc/css/phui/phui-pinboard-view.css' => '55b27bc3',
     'rsrc/css/phui/phui-property-list-view.css' => 'd2d143ea',
@@ -776,7 +776,7 @@ return array(
     'phui-info-view-css' => '33e54618',
     'phui-inline-comment-view-css' => '2174771a',
     'phui-list-view-css' => 'e448b6ba',
-    'phui-object-box-css' => 'e3441f90',
+    'phui-object-box-css' => 'fc4b0f93',
     'phui-object-item-list-view-css' => 'fef025d8',
     'phui-pinboard-view-css' => '55b27bc3',
     'phui-property-list-view-css' => 'd2d143ea',

src/applications/search/controller/PhabricatorApplicationSearchController.php

@@ -174,32 +174,11 @@ final class PhabricatorApplicationSearchController
     // we sort out T5307.
 
     $form->appendChild($submit);
-    $filter_view = id(new AphrontListFilterView())->appendChild($form);
-
-    if ($run_query && $named_query) {
-      if ($named_query->getIsBuiltin()) {
-        $description = pht(
-          'Showing results for query "%s".',
-          $named_query->getQueryName());
-      } else {
-        $description = pht(
-          'Showing results for saved query "%s".',
-          $named_query->getQueryName());
-      }
-
-      $filter_view->setCollapsed(
-        pht('Edit Query...'),
-        pht('Hide Query'),
-        $description,
-        $this->getApplicationURI('query/advanced/?query='.$query_key));
-    }
 
     if ($this->getPreface()) {
       $nav->appendChild($this->getPreface());
     }
 
-    $nav->appendChild($filter_view);
-
     if ($named_query) {
       $title = $named_query->getQueryName();
     } else {
@@ -207,9 +186,8 @@ final class PhabricatorApplicationSearchController
     }
 
     if ($run_query) {
-      $nav->appendChild(
-        $anchor = id(new PhabricatorAnchorView())
-          ->setAnchorName('R'));
+      $anchor = id(new PhabricatorAnchorView())
+        ->setAnchorName('R');
 
       try {
         $query = $engine->buildQueryFromSavedQuery($saved_query);
@@ -234,7 +212,14 @@ final class PhabricatorApplicationSearchController
         }
 
         $box = id(new PHUIObjectBoxView())
-          ->setHeaderText($title);
+          ->setHeaderText($title)
+          ->setAnchor($anchor);
+
+        $box->setShowHide(
+          pht('Edit Query'),
+          pht('Hide Query'),
+          $form,
+          $this->getApplicationURI('query/advanced/?query='.$query_key));
 
         if ($list instanceof AphrontTableView) {
           $box->setTable($list);
@@ -246,7 +231,6 @@ final class PhabricatorApplicationSearchController
         // TODO: This is a bit hacky.
         if ($list instanceof PHUIObjectItemListView) {
           $list->setNoDataString(pht('No results found for this query.'));
-          $list->setPager($pager);
         } else {
           if ($pager->willShowPagingControls()) {
             $pager_box = id(new PHUIBoxView())

src/view/phui/PHUIObjectBoxView.php

@@ -18,6 +18,12 @@ final class PHUIObjectBoxView extends AphrontView {
   private $objectList;
   private $table;
   private $collapsed = false;
+  private $anchor;
+
+  private $showAction;
+  private $hideAction;
+  private $showHideHref;
+  private $showHideContent;
 
   private $tabs = array();
   private $propertyLists = array();
@@ -162,6 +168,19 @@ final class PHUIObjectBoxView extends AphrontView {
     return $this;
   }
 
+  public function setAnchor(PhabricatorAnchorView $anchor) {
+    $this->anchor = $anchor;
+    return $this;
+  }
+
+  public function setShowHide($show, $hide, $content, $href) {
+    $this->showAction = $show;
+    $this->hideAction = $hide;
+    $this->showHideContent = $content;
+    $this->showHideHref = $href;
+    return $this;
+  }
+
   public function setValidationException(
     PhabricatorApplicationTransactionValidationException $ex = null) {
     $this->validationException = $ex;
@@ -178,6 +197,55 @@ final class PHUIObjectBoxView extends AphrontView {
         ->setHeader($this->headerText);
     }
 
+    $showhide = null;
+    if ($this->showAction !== null) {
+      Javelin::initBehavior('phabricator-reveal-content');
+
+      $hide_action_id = celerity_generate_unique_node_id();
+      $show_action_id = celerity_generate_unique_node_id();
+      $content_id = celerity_generate_unique_node_id();
+
+      $hide_action = id(new PHUIButtonView())
+        ->setTag('a')
+        ->addSigil('reveal-content')
+        ->setID($hide_action_id)
+        ->setHref($this->showHideHref)
+        ->setMetaData(
+          array(
+            'hideIDs' => array($hide_action_id),
+            'showIDs' => array($content_id, $show_action_id),
+          ))
+        ->setText($this->showAction);
+
+      $show_action = id(new PHUIButtonView())
+        ->setTag('a')
+        ->addSigil('reveal-content')
+        ->setStyle('display: none;')
+        ->setHref('#')
+        ->setID($show_action_id)
+        ->setMetaData(
+          array(
+            'hideIDs' => array($content_id, $show_action_id),
+            'showIDs' => array($hide_action_id),
+          ))
+        ->setText($this->hideAction);
+
+      $header->addActionLink($hide_action);
+      $header->addActionLink($show_action);
+
+      $showhide = array(
+        phutil_tag(
+          'div',
+          array(
+            'class' => 'phui-object-box-hidden-content',
+            'id' => $content_id,
+            'style' => 'display: none;',
+          ),
+          $this->showHideContent),
+      );
+    }
+
+
     if ($this->actionListID) {
       $icon_id = celerity_generate_unique_node_id();
       $icon = id(new PHUIIconView())
@@ -284,6 +352,7 @@ final class PHUIObjectBoxView extends AphrontView {
     $content = id(new PHUIBoxView())
       ->appendChild(
         array(
+          $this->anchor,
           $header,
           $this->infoView,
           $this->formErrors,
@@ -292,6 +361,7 @@ final class PHUIObjectBoxView extends AphrontView {
           $this->form,
           $tabs,
           $tab_lists,
+          $showhide,
           $property_lists,
           $this->table,
           $this->renderChildren(),

webroot/rsrc/css/phui/phui-object-box.css

@@ -90,6 +90,12 @@ div.phui-object-box.phui-object-box-flush {
   border-bottom-color: {$lightred};
 }
 
+.phui-object-box-hidden-content {
+  background: {$lightgreybackground};
+  border-bottom: 1px solid {$thinblueborder};
+  margin-bottom: 4px;
+}
+
 /* - Double Object Box Override --------------------------------------------- */
 
 .phui-object-box .phui-object-box {