Shuffle various parts of the config edit UI around

Summary:
Fixes T9339.

  - Don't show edit control for locked config at all.
  - Don't show a "Cancel" button either.
  - Change "Value" label to "Database Value" for non-custom config.
  - Highlight effective value.
  - Move examples under current state.
  - Tweak some formatting.

Test Plan: {F777878}

Reviewers: chad, avivey

Reviewed By: chad, avivey

Subscribers: avivey

Maniphest Tasks: T9339

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'eb8c668d',
+    'core.pkg.css' => '994de4ed',
     'core.pkg.js' => '47dc9ebb',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '2de124c9',
@@ -40,7 +40,7 @@ return array(
     'rsrc/css/application/calendar/calendar-icon.css' => 'c69aa59f',
     'rsrc/css/application/chatlog/chatlog.css' => 'd295b020',
     'rsrc/css/application/conduit/conduit-api.css' => '7bc725c4',
-    'rsrc/css/application/config/config-options.css' => '7fedf08b',
+    'rsrc/css/application/config/config-options.css' => '0ede4c9b',
     'rsrc/css/application/config/config-template.css' => '8e6c6fcd',
     'rsrc/css/application/config/config-welcome.css' => '6abd79be',
     'rsrc/css/application/config/setup-issue.css' => 'db7e9c40',
@@ -93,7 +93,7 @@ return array(
     'rsrc/css/application/policy/policy-edit.css' => '815c66f7',
     'rsrc/css/application/policy/policy-transaction-detail.css' => '82100a43',
     'rsrc/css/application/policy/policy.css' => '957ea14c',
-    'rsrc/css/application/ponder/ponder-view.css' => '7b0df4da',
+    'rsrc/css/application/ponder/ponder-view.css' => 'bef48f86',
     'rsrc/css/application/projects/project-icon.css' => '4e3eaa5a',
     'rsrc/css/application/releeph/releeph-core.css' => '9b3c5733',
     'rsrc/css/application/releeph/releeph-preview-branch.css' => 'b7a6f4a5',
@@ -104,7 +104,7 @@ return array(
     'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
     'rsrc/css/application/uiexample/example.css' => '528b19de',
     'rsrc/css/core/core.css' => 'a76cefc9',
-    'rsrc/css/core/remarkup.css' => 'ef286a6e',
+    'rsrc/css/core/remarkup.css' => '73fc4395',
     'rsrc/css/core/syntax.css' => '9fd11da8',
     'rsrc/css/core/z-index.css' => '57ddcaa2',
     'rsrc/css/diviner/diviner-shared.css' => '5a337049',
@@ -141,7 +141,7 @@ return array(
     'rsrc/css/phui/phui-object-item-list-view.css' => 'ab1bf393',
     'rsrc/css/phui/phui-pager.css' => 'bea33d23',
     'rsrc/css/phui/phui-pinboard-view.css' => '2495140e',
-    'rsrc/css/phui/phui-property-list-view.css' => '03904f6b',
+    'rsrc/css/phui/phui-property-list-view.css' => '318d4dea',
     'rsrc/css/phui/phui-remarkup-preview.css' => '867f85b3',
     'rsrc/css/phui/phui-spacing.css' => '042804d6',
     'rsrc/css/phui/phui-status.css' => '888cedb8',
@@ -505,7 +505,7 @@ return array(
     'calendar-icon-css' => 'c69aa59f',
     'changeset-view-manager' => '58562350',
     'conduit-api-css' => '7bc725c4',
-    'config-options-css' => '7fedf08b',
+    'config-options-css' => '0ede4c9b',
     'config-welcome-css' => '6abd79be',
     'conpherence-durable-column-view' => '86396117',
     'conpherence-menu-css' => 'f99fee4c',
@@ -737,7 +737,7 @@ return array(
     'phabricator-object-selector-css' => '85ee8ce6',
     'phabricator-phtize' => 'd254d646',
     'phabricator-prefab' => '6920d200',
-    'phabricator-remarkup-css' => 'ef286a6e',
+    'phabricator-remarkup-css' => '73fc4395',
     'phabricator-search-results-css' => '7dea472c',
     'phabricator-shaped-request' => '7cbe244b',
     'phabricator-side-menu-view-css' => 'bec2458e',
@@ -794,7 +794,7 @@ return array(
     'phui-object-item-list-view-css' => 'ab1bf393',
     'phui-pager-css' => 'bea33d23',
     'phui-pinboard-view-css' => '2495140e',
-    'phui-property-list-view-css' => '03904f6b',
+    'phui-property-list-view-css' => '318d4dea',
     'phui-remarkup-preview-css' => '867f85b3',
     'phui-spacing-css' => '042804d6',
     'phui-status-list-view-css' => '888cedb8',
@@ -811,7 +811,7 @@ return array(
     'policy-css' => '957ea14c',
     'policy-edit-css' => '815c66f7',
     'policy-transaction-detail-css' => '82100a43',
-    'ponder-view-css' => '7b0df4da',
+    'ponder-view-css' => 'bef48f86',
     'project-icon-css' => '4e3eaa5a',
     'raphael-core' => '51ee6b43',
     'raphael-g' => '40dde778',

src/applications/config/controller/PhabricatorConfigEditController.php

@@ -122,7 +122,7 @@ final class PhabricatorConfigEditController
         ->appendChild(phutil_tag('p', array(), $msg));
     }
 
-    if ($option->getHidden()) {
+    if ($option->getHidden() || $option->getLocked()) {
       $control = null;
     } else {
       $control = $this->renderControl(
@@ -164,14 +164,20 @@ final class PhabricatorConfigEditController
     $form
       ->appendChild($control);
 
-    $submit_control = id(new AphrontFormSubmitControl())
-      ->addCancelButton($done_uri);
 
     if (!$option->getLocked()) {
-      $submit_control->setValue(pht('Save Config Entry'));
+      $form->appendChild(
+        id(new AphrontFormSubmitControl())
+          ->addCancelButton($done_uri)
+          ->setValue(pht('Save Config Entry')));
     }
 
-    $form->appendChild($submit_control);
+    if (!$option->getHidden()) {
+      $form->appendChild(
+        id(new AphrontFormMarkupControl())
+          ->setLabel(pht('Current Configuration'))
+          ->setValue($this->renderDefaults($option, $config_entry)));
+    }
 
     $examples = $this->renderExamples($option);
     if ($examples) {
@@ -181,13 +187,6 @@ final class PhabricatorConfigEditController
           ->setValue($examples));
     }
 
-    if (!$option->getHidden()) {
-      $form->appendChild(
-        id(new AphrontFormMarkupControl())
-          ->setLabel(pht('Default'))
-          ->setValue($this->renderDefaults($option, $config_entry)));
-    }
-
     $title = pht('Edit %s', $key);
     $short = pht('Edit');
 
@@ -438,16 +437,12 @@ final class PhabricatorConfigEditController
       }
 
       $control
-        ->setLabel(pht('Value'))
+        ->setLabel(pht('Database Value'))
         ->setError($e_value)
         ->setValue($display_value)
         ->setName('value');
     }
 
-    if ($option->getLocked()) {
-      $control->setDisabled(true);
-    }
-
     return $control;
   }
 
@@ -501,25 +496,41 @@ final class PhabricatorConfigEditController
       phutil_tag('th', array(), pht('Source')),
       phutil_tag('th', array(), pht('Value')),
     ));
+
+    $is_effective_value = true;
     foreach ($stack as $key => $source) {
+      $row_classes = array(
+        'column-labels',
+      );
+
       $value = $source->getKeys(
         array(
           $option->getKey(),
         ));
 
       if (!array_key_exists($option->getKey(), $value)) {
-        $value = phutil_tag('em', array(), pht('(empty)'));
+        $value = phutil_tag('em', array(), pht('(No Value Configured)'));
       } else {
         $value = $this->getDisplayValue(
           $option,
           $entry,
           $value[$option->getKey()]);
+
+        if ($is_effective_value) {
+          $is_effective_value = false;
+          $row_classes[] = 'config-options-effective-value';
+        }
       }
 
-      $table[] = phutil_tag('tr', array('class' => 'column-labels'), array(
+      $table[] = phutil_tag(
-        phutil_tag('th', array(), $source->getName()),
+        'tr',
-        phutil_tag('td', array(), $value),
+        array(
-      ));
+          'class' => implode(' ', $row_classes),
+        ),
+        array(
+          phutil_tag('th', array(), $source->getName()),
+          phutil_tag('td', array(), $value),
+        ));
     }
 
     require_celerity_resource('config-options-css');

src/applications/config/option/PhabricatorConfigOption.php

@@ -76,9 +76,9 @@ final class PhabricatorConfigOption
     }
     return pht(
       'This configuration is locked and can not be edited from the web '.
-      'interface. Use `%s` in `%s` to edit it.',
+      'interface. Use %s in %s to edit it.',
-      './bin/config',
+      phutil_tag('tt', array(), './bin/config'),
-      'phabricator/');
+      phutil_tag('tt', array(), 'phabricator/'));
   }
 
   public function addExample($value, $description) {

webroot/rsrc/css/application/config/config-options.css

@@ -49,3 +49,8 @@
 .config-options-current-value span {
   color: {$greytext};
 }
+
+.config-options-effective-value,
+.config-option-table .config-options-effective-value th {
+  background: {$lightyellow};
+}