1 files changed, 60 insertions, 6 deletions

diff --git a/app/assets/javascripts/project_new.js b/app/assets/javascripts/project_new.js
index 798f15e40a0..0d3fb31a9cf 100644
--- a/app/assets/javascripts/project_new.js
+++ b/app/assets/javascripts/project_new.js
@@ -1,9 +1,13 @@
+/* eslint-disable */
 (function() {
   var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
 
   this.ProjectNew = (function() {
     function ProjectNew() {
       this.toggleSettings = bind(this.toggleSettings, this);
+      this.$selects = $('.features select');
+      this.$repoSelects = this.$selects.filter('.js-repo-select');
+
       $('.project-edit-container').on('ajax:before', (function(_this) {
         return function() {
           $('.project-edit-container').hide();
@@ -12,27 +16,77 @@
       })(this));
       this.toggleSettings();
       this.toggleSettingsOnclick();
+      this.toggleRepoVisibility();
     }
 
     ProjectNew.prototype.toggleSettings = function() {
-      this._showOrHide('#project_builds_enabled', '.builds-feature');
-      return this._showOrHide('#project_merge_requests_enabled', '.merge-requests-feature');
+      var self = this;
+
+      this.$selects.each(function () {
+        var $select = $(this),
+            className = $select.data('field').replace(/_/g, '-')
+              .replace('access-level', 'feature');
+        self._showOrHide($select, '.' + className);
+      });
     };
 
     ProjectNew.prototype.toggleSettingsOnclick = function() {
-      return $('#project_builds_enabled, #project_merge_requests_enabled').on('click', this.toggleSettings);
+      this.$selects.on('change', this.toggleSettings);
     };
 
     ProjectNew.prototype._showOrHide = function(checkElement, container) {
-      var $container;
-      $container = $(container);
-      if ($(checkElement).prop('checked')) {
+      var $container = $(container);
+
+      if ($(checkElement).val() !== '0') {
         return $container.show();
       } else {
         return $container.hide();
       }
     };
 
+    ProjectNew.prototype.toggleRepoVisibility = function () {
+      var $repoAccessLevel = $('.js-repo-access-level select'),
+          containerRegistry = document.querySelectorAll('.js-container-registry')[0],
+          containerRegistryCheckbox = document.getElementById('project_container_registry_enabled');
+
+      this.$repoSelects.find("option[value='" + $repoAccessLevel.val() + "']")
+        .nextAll()
+        .hide();
+
+      $repoAccessLevel.off('change')
+        .on('change', function () {
+          var selectedVal = parseInt($repoAccessLevel.val());
+
+          this.$repoSelects.each(function () {
+            var $this = $(this),
+                repoSelectVal = parseInt($this.val());
+
+            $this.find('option').show();
+
+            if (selectedVal < repoSelectVal) {
+              $this.val(selectedVal);
+            }
+
+            $this.find("option[value='" + selectedVal + "']").nextAll().hide();
+          });
+
+          if (selectedVal) {
+            this.$repoSelects.removeClass('disabled');
+
+            if (containerRegistry) {
+              containerRegistry.style.display = '';
+            }
+          } else {
+            this.$repoSelects.addClass('disabled');
+
+            if (containerRegistry) {
+              containerRegistry.style.display = 'none';
+              containerRegistryCheckbox.checked = false;
+            }
+          }
+        }.bind(this));
+    };
+
     return ProjectNew;
 
   })();