Make TabGroups a standalone UI element

Summary:
Ref T10628. Currently, tabs are part of ObjectBoxes. However, the code is a bit of a mess and I want to use them in some other contexts, notably the "prose diff" dialog to show "old raw, new raw, diff".

Pull them out, and update Files to use the new stuff. My plan is:

  - Update all callsites to this stuff.
  - Remove the builtin-in ObjectBox integration to simplify ObjectBox a bit.
  - Move forward with T10628.

This is pretty straightforward. A couple of the sigils are a little weird, but I'll update the JS later. For now, the same JS can drive both old and new tabs.

Test Plan: Viewed files, everything was unchanged.

Reviewers: chad

Reviewed By: chad

Maniphest Tasks: T10628

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

Author: epriestley

src/__phutil_library_map__.php

@@ -1663,6 +1663,8 @@
     'PHUISpacesNamespaceContextView' => 'applications/spaces/view/PHUISpacesNamespaceContextView.php',
     'PHUIStatusItemView' => 'view/phui/PHUIStatusItemView.php',
     'PHUIStatusListView' => 'view/phui/PHUIStatusListView.php',
+    'PHUITabGroupView' => 'view/phui/PHUITabGroupView.php',
+    'PHUITabView' => 'view/phui/PHUITabView.php',
     'PHUITagExample' => 'applications/uiexample/examples/PHUITagExample.php',
     'PHUITagView' => 'view/phui/PHUITagView.php',
     'PHUITimelineEventView' => 'view/phui/PHUITimelineEventView.php',
@@ -6194,6 +6196,8 @@
     'PHUISpacesNamespaceContextView' => 'AphrontView',
     'PHUIStatusItemView' => 'AphrontTagView',
     'PHUIStatusListView' => 'AphrontTagView',
+    'PHUITabGroupView' => 'AphrontTagView',
+    'PHUITabView' => 'AphrontTagView',
     'PHUITagExample' => 'PhabricatorUIExample',
     'PHUITagView' => 'AphrontTagView',
     'PHUITimelineEventView' => 'AphrontView',

src/applications/files/controller/PhabricatorFileInfoController.php

@@ -182,8 +182,16 @@ private function buildPropertyViews(
     $request = $this->getRequest();
     $viewer = $request->getUser();
 
+    $tab_group = id(new PHUITabGroupView());
+    $box->addTabGroup($tab_group);
+
     $properties = id(new PHUIPropertyListView());
-    $box->addPropertyList($properties, pht('Details'));
+
+    $tab_group->addTab(
+      id(new PHUITabView())
+        ->setName(pht('Details'))
+        ->setKey('details')
+        ->appendChild($properties));
 
     if ($file->getAuthorPHID()) {
       $properties->addProperty(
@@ -195,9 +203,13 @@ private function buildPropertyViews(
       pht('Created'),
       phabricator_datetime($file->getDateCreated(), $viewer));
 
-
     $finfo = id(new PHUIPropertyListView());
-    $box->addPropertyList($finfo, pht('File Info'));
+
+    $tab_group->addTab(
+      id(new PHUITabView())
+        ->setName(pht('File Info'))
+        ->setKey('info')
+        ->appendChild($finfo));
 
     $finfo->addProperty(
       pht('Size'),
@@ -262,7 +274,12 @@ private function buildPropertyViews(
     }
 
     $storage_properties = new PHUIPropertyListView();
-    $box->addPropertyList($storage_properties, pht('Storage'));
+
+    $tab_group->addTab(
+      id(new PHUITabView())
+        ->setName(pht('Storage'))
+        ->setKey('storage')
+        ->appendChild($storage_properties));
 
     $storage_properties->addProperty(
       pht('Engine'),
@@ -285,7 +302,12 @@ private function buildPropertyViews(
     $phids = $file->getObjectPHIDs();
     if ($phids) {
       $attached = new PHUIPropertyListView();
-      $box->addPropertyList($attached, pht('Attached'));
+
+      $tab_group->addTab(
+        id(new PHUITabView())
+          ->setName(pht('Attached'))
+          ->setKey('attached')
+          ->appendChild($attached));
 
       $attached->addProperty(
         pht('Attached To'),
@@ -357,7 +379,12 @@ private function buildPropertyViews(
     if ($engine) {
       if ($engine->isChunkEngine()) {
         $chunkinfo = new PHUIPropertyListView();
-        $box->addPropertyList($chunkinfo, pht('Chunks'));
+
+        $tab_group->addTab(
+          id(new PHUITabView())
+            ->setName(pht('Chunks'))
+            ->setKey('chunks')
+            ->appendChild($chunkinfo));
 
         $chunks = id(new PhabricatorFileChunkQuery())
           ->setViewer($viewer)

src/view/phui/PHUIObjectBoxView.php

@@ -5,6 +5,7 @@ final class PHUIObjectBoxView extends AphrontTagView {
   private $headerText;
   private $color;
   private $background;
+  private $tabGroups = array();
   private $formErrors = null;
   private $formSaved = false;
   private $infoView;
@@ -128,6 +129,11 @@ public function setFormSaved($saved, $text = null) {
     return $this;
   }
 
+  public function addTabGroup(PHUITabGroupView $view) {
+    $this->tabGroups[] = $view;
+    return $this;
+  }
+
   public function setInfoView(PHUIInfoView $view) {
     $this->infoView = $view;
     return $this;
@@ -211,7 +217,7 @@ public function willRender() {
       $i = 0;
       foreach ($list as $item) {
         $group->addPropertyList($item);
-        if ($i > 0) {
+        if ($i > 0 || $this->tabGroups) {
           $item->addClass('phui-property-list-section-noninitial');
         }
         $i++;
@@ -405,6 +411,7 @@ protected function getTagContent() {
       $this->formSaved,
       $exception_errors,
       $this->form,
+      $this->tabGroups,
       $tabs,
       $this->tabLists,
       $showhide,

src/view/phui/PHUITabGroupView.php

@@ -0,0 +1,83 @@
+<?php
+
+final class PHUITabGroupView extends AphrontTagView {
+
+  private $tabs = array();
+
+  protected function canAppendChild() {
+    return false;
+  }
+
+  public function addTab(PHUITabView $tab) {
+    $key = $tab->getKey();
+    $tab->lockKey();
+
+    if (isset($this->tabs[$key])) {
+      throw new Exception(
+        pht(
+          'Each tab in a tab group must have a unique key; attempting to add '.
+          'a second tab with a duplicate key ("%s").',
+          $key));
+    }
+
+    $this->tabs[$key] = $tab;
+
+    return $this;
+  }
+
+  public function getSelectedTab() {
+    if (!$this->tabs) {
+      return null;
+    }
+
+    return head($this->tabs)->getKey();
+  }
+
+  protected function getTagAttributes() {
+    $tab_map = mpull($this->tabs, 'getContentID', 'getKey');
+
+    return array(
+      'sigil' => 'phui-object-box',
+      'meta' => array(
+        'tabMap' => $tab_map,
+      ),
+    );
+  }
+
+  protected function getTagContent() {
+    Javelin::initBehavior('phui-object-box-tabs');
+
+    $tabs = id(new PHUIListView())
+      ->setType(PHUIListView::NAVBAR_LIST);
+    $content = array();
+
+    $selected_tab = $this->getSelectedTab();
+    foreach ($this->tabs as $tab) {
+      $item = $tab->newMenuItem();
+      $tab_key = $tab->getKey();
+
+      if ($tab_key == $selected_tab) {
+        $item->setSelected(true);
+        $style = null;
+      } else {
+        $style = 'display: none;';
+      }
+
+      $tabs->addMenuItem($item);
+
+      $content[] = javelin_tag(
+        'div',
+        array(
+          'style' => $style,
+          'id' => $tab->getContentID(),
+        ),
+        $tab);
+    }
+
+    return array(
+      $tabs,
+      $content,
+    );
+  }
+
+}

src/view/phui/PHUITabView.php

@@ -0,0 +1,74 @@
+<?php
+
+final class PHUITabView extends AphrontTagView {
+
+  private $name;
+  private $key;
+  private $keyLocked;
+  private $contentID;
+
+  public function setKey($key) {
+    if ($this->keyLocked) {
+      throw new Exception(
+        pht(
+          'Attempting to change the key of a tab with a locked key ("%s").',
+          $this->key));
+    }
+
+    $this->key = $key;
+    return $this;
+  }
+
+  public function hasKey() {
+    return ($this->key !== null);
+  }
+
+  public function getKey() {
+    if (!$this->hasKey()) {
+      throw new PhutilInvalidStateException('setKey');
+    }
+
+    return $this->key;
+  }
+
+  public function lockKey() {
+    if (!$this->hasKey()) {
+      throw new PhutilInvalidStateException('setKey');
+    }
+
+    $this->keyLocked = true;
+
+    return $this;
+  }
+
+  public function setName($name) {
+    $this->name = $name;
+    return $this;
+  }
+
+  public function getName() {
+    return $this->name;
+  }
+
+  public function getContentID() {
+    if ($this->contentID === null) {
+      $this->contentID = celerity_generate_unique_node_id();
+    }
+
+    return $this->contentID;
+  }
+
+  public function newMenuItem() {
+    return id(new PHUIListItemView())
+      ->setName($this->getName())
+      ->setKey($this->getKey())
+      ->setType(PHUIListItemView::TYPE_LINK)
+      ->setHref('#')
+      ->addSigil('phui-object-box-tab')
+      ->setMetadata(
+        array(
+          'tabKey' => $this->getKey(),
+        ));
+  }
+
+}