Get mapped fields (Github and Redis) working

static/css/core-ui.css

@@ -70,7 +70,7 @@
   width: 100%;
   display: table-cell;
   float: none;
-  padding: 10px;
+  padding: 20px;
 }
 
 .co-tabs li {

static/css/quay.css

@@ -4918,3 +4918,9 @@ i.slack-icon {
   vertical-align: middle;
   color: rgb(53, 186, 53);
 }
+
+.registry-logo-preview {
+  border: 1px solid #eee;
+  vertical-align: middle;
+  padding: 4px;
+}

static/directives/config/config-setup-tool.html

@@ -1,6 +1,6 @@
 <div class="config-setup-tool-element">
   <div class="quay-spinner" ng-if="!config"></div>
-  <div ng-if="config">
+  <div ng-show="config && config['SERVER_HOSTNAME']">
     <!-- Basic Configuration -->
     <div class="co-panel">
       <div class="co-panel-heading">
@@ -12,13 +12,13 @@
             <td>Enterprise Logo URL:</td>
             <td>
               <span class="config-string-field" binding="config.ENTERPRISE_LOGO_URL"
-                    placeholder="URL of a logo to use for your enterprise"></span>
+                    placeholder="http://example.com/logo.png"></span>
               <div class="help-text">
-                This is optional. If not specified, the default logo will be used.
+                Enter the full URL to your company's logo.
               </div>
             </td>
             <td>
-              <img ng-src="{{ config.ENTERPRISE_LOGO_URL }}">
+              <img class="registry-logo-preview" ng-src="{{ config.ENTERPRISE_LOGO_URL }}">
             </td>
           </tr>
           <tr>
@@ -44,13 +44,14 @@
           </tr>
           <tr>
             <td>User Creation:</td>
-            <td>
+            <td colspan="2">
               <div class="co-checkbox">
                 <input id="ftuc" type="checkbox" ng-model="config.FEATURE_USER_CREATION">
-                <label for="ftuc">Enable User Creation</label>
+                <label for="ftuc">Enable Open User Creation</label>
               </div>
               <div class="help-text">
-                 If enabled, users can be created from the registry UI.
+                 If enabled, user accounts can be created by anyone.
+                 Users can always be created in the users panel under this superuser view.
               </div>
             </td>
           </tr>
@@ -83,7 +84,7 @@
       <div class="co-panel-body">
         <table class="config-table">
           <tr>
-            <td>Server hostname:</td>
+            <td>Server Hostname:</td>
             <td>
               <span class="config-string-field" binding="config.SERVER_HOSTNAME"
                     placeholder="Hostname (and optional port if non-standard)"></span>
@@ -141,9 +142,9 @@
 
         <table class="config-table">
           <tr>
-            <td>Redis hostname:</td>
+            <td>Redis Hostname:</td>
             <td>
-              <span class="config-string-field" binding="mapped.redis.hostname"
+              <span class="config-string-field" binding="mapped.redis.host"
                     placeholder="The redis server hostname"></span>
             </td>
           </tr>
@@ -160,8 +161,8 @@
           <tr>
             <td>Redis password:</td>
             <td>
-              <span class="config-string-field" binding="mapped.redis.password"
+              <input class="form-control" type="password" ng-model="mapped.redis.password"
-                    placeholder="Optional password for connecting to redis"></span>
+                     placeholder="Optional password for connecting to redis">
             </td>
           </tr>
         </table>
@@ -489,24 +490,22 @@
 
         <table class="config-table" ng-show="config.FEATURE_GITHUB_LOGIN">
           <tr>
-            <td>Github Endpoint:</td>
+            <td>Github:</td>
             <td>
-              <span class="config-string-field" binding="config.GITHUB_LOGIN_CONFIG.GITHUB_ENDPOINT"
+              <select ng-model="mapped.GITHUB_LOGIN_KIND">
-                    placeholder="The Github server">
+                <option value="hosted">Github.com</option>
-              </span>
+                <option value="enterprise">Github Enterprise</option>
-              <div class="help-text">
+              </select>
-                https://github.com/ for github.com. For Github enterprise, the internal Github endpoint.
-              </div>
             </td>
           </tr>
-          <tr>
+          <tr ng-show="mapped.GITHUB_LOGIN_KIND == 'enterprise'">
-            <td>API Endpoint:</td>
+            <td>Github Endpoint:</td>
             <td>
               <span class="config-string-field" binding="config.GITHUB_LOGIN_CONFIG.API_ENDPOINT"
-                    placeholder="API server endpoint">
+                    placeholder="https://my.githubserver">
               </span>
               <div class="help-text">
-                https://api.github.com/ for github.com. For Github Enterprise, leave empty.
+                The Github Enterprise endpoint.
               </div>
             </td>
           </tr>
@@ -609,24 +608,22 @@
 
         <table class="config-table" ng-show="config.FEATURE_GITHUB_BUILD">
           <tr>
-            <td>Github Endpoint:</td>
+            <td>Github:</td>
             <td>
-              <span class="config-string-field" binding="config.GITHUB_TRIGGER_CONFIG.GITHUB_ENDPOINT"
+              <select ng-model="mapped.GITHUB_TRIGGER_KIND">
-                    placeholder="The Github server">
+                <option value="hosted">Github.com</option>
-              </span>
+                <option value="enterprise">Github Enterprise</option>
-              <div class="help-text">
+              </select>
-                https://github.com/ for github.com. For Github enterprise, the internal Github endpoint.
-              </div>
             </td>
           </tr>
-          <tr>
+          <tr ng-show="mapped.GITHUB_TRIGGER_KIND == 'enterprise'">
-            <td>API Endpoint:</td>
+            <td>Github Endpoint:</td>
             <td>
               <span class="config-string-field" binding="config.GITHUB_TRIGGER_CONFIG.API_ENDPOINT"
-                    placeholder="API server endpoint">
+                    placeholder="https://my.githubserver">
               </span>
               <div class="help-text">
-                https://api.github.com/ for github.com. For Github Enterprise, leave empty.
+                The Github Enterprise endpoint.
               </div>
             </td>
           </tr>

static/js/core-config-setup.js

@@ -11,6 +11,7 @@ angular.module("core-config-setup", ['angularFileUpload'])
       },
       controller: function($rootScope, $scope, $element, $timeout, ApiService) {
         $scope.config = null;
+        $scope.mapped = {};
 
         $scope.parseDbUri = function(value) {
           if (!value) { return null; }
@@ -41,11 +42,89 @@ angular.module("core-config-setup", ['angularFileUpload'])
           return uri;
         };
 
+        var githubSelector = function(key) {
+          return function(value) {
+            if (!value || !$scope.config) { return; }
+
+            if (!$scope.config[key]) {
+              $scope.config[key] = {};
+            }
+
+            if (value == 'enterprise') {
+              $scope.config[key]['GITHUB_ENDPOINT'] = '';
+              $scope.config[key]['API_ENDPOINT'] = '';
+            } else if (value == 'hosted') {
+              $scope.config[key]['GITHUB_ENDPOINT'] = 'https://github.com/';
+              $scope.config[key]['API_ENDPOINT'] = 'https://api.github.com/';
+            }
+          };
+        };
+
+        var getKey = function(config, path) {
+          var parts = path.split('.');
+          var current = config;
+          for (var i = 0; i < parts.length; ++i) {
+            var part = parts[i];
+            if (!config[part]) { return null; }
+            current = config[part];
+          }
+          return current;
+        };
+
+        var initializeMappedLogic = function(config) {
+          var gle = getKey(config, 'GITHUB_LOGIN_CONFIG.GITHUB_ENDPOINT');
+          var gte = getKey(config, 'GITHUB_TRIGGER_CONFIG.GITHUB_ENDPOINT');
+
+          $scope.mapped['GITHUB_LOGIN_KIND'] = gle == 'https://github.com/' ? 'hosted' : 'enterprise';
+          $scope.mapped['GITHUB_TRIGGER_KIND'] = gte == 'https://github.com/' ? 'hosted' : 'enterprise';
+
+          $scope.mapped['redis'] = {};
+          $scope.mapped['redis']['host'] = getKey(config, 'BUILDLOGS_REDIS.host') || getKey(config, 'USER_EVENTS_REDIS.host');
+          $scope.mapped['redis']['port'] = getKey(config, 'BUILDLOGS_REDIS.port') || getKey(config, 'USER_EVENTS_REDIS.port');
+          $scope.mapped['redis']['password'] = getKey(config, 'BUILDLOGS_REDIS.password') || getKey(config, 'USER_EVENTS_REDIS.password');
+        };
+
+        var redisSetter = function(keyname) {
+          return function(value) {
+            if (value == null || !$scope.config) { return; }
+
+            if (!$scope.config['BUILDLOGS_REDIS']) {
+              $scope.config['BUILDLOGS_REDIS'] = {};
+            }
+
+            if (!$scope.config['USER_EVENTS_REDIS']) {
+              $scope.config['USER_EVENTS_REDIS'] = {};
+            }
+
+            if (!value) {
+              delete $scope.config['BUILDLOGS_REDIS'][keyname];
+              delete $scope.config['USER_EVENTS_REDIS'][keyname];
+              return;
+            }
+
+            $scope.config['BUILDLOGS_REDIS'][keyname] = value;
+            $scope.config['USER_EVENTS_REDIS'][keyname] = value;
+          };
+        };
+
+        // Add mapped logic.
+        $scope.$watch('mapped.GITHUB_LOGIN_KIND', githubSelector('GITHUB_LOGIN_CONFIG'));
+        $scope.$watch('mapped.GITHUB_TRIGGER_KIND', githubSelector('GITHUB_TRIGGER_CONFIG'));
+
+        $scope.$watch('mapped.redis.host', redisSetter('host'));
+        $scope.$watch('mapped.redis.port', redisSetter('port'));
+        $scope.$watch('mapped.redis.password', redisSetter('password'));
+
+        $scope.$watch('config', function(value) {
+          window.console.log(value);
+        }, true);
+
         $scope.$watch('isActive', function(value) {
           if (!value) { return; }
 
           ApiService.scGetConfig().then(function(resp) {
             $scope.config = resp['config'];
+            initializeMappedLogic($scope.config);
           });
         });
       }