dynamically disable/enable visibility options when changing namespaces in new project form

3 files changed, 40 insertions, 1 deletions

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 2bba7f55de1..feb8735752b 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -74,6 +74,7 @@ import PerformanceBar from './performance_bar';
 import initNotes from './init_notes';
 import initLegacyFilters from './init_legacy_filters';
 import initIssuableSidebar from './init_issuable_sidebar';
+import initProjectVisibilitySelector from './project_visibility';
 import GpgBadges from './gpg_badges';
 import UserFeatureHelper from './helpers/user_feature_helper';
 import initChangesDropdown from './init_changes_dropdown';
@@ -575,6 +576,7 @@ import initChangesDropdown from './init_changes_dropdown';
               break;
             case 'new':
               new ProjectNew();
+              initProjectVisibilitySelector();
               break;
             case 'show':
               new Star();
diff --git a/app/assets/javascripts/project_visibility.js b/app/assets/javascripts/project_visibility.js
new file mode 100644
index 00000000000..b43c8ba56e2
--- /dev/null
+++ b/app/assets/javascripts/project_visibility.js
@@ -0,0 +1,37 @@
+function setVisibilityOptions(namespaceSelector) {
+  if (!namespaceSelector || !('selectedIndex' in namespaceSelector)) {
+    return;
+  }
+  const selectedNamespace = namespaceSelector.options[namespaceSelector.selectedIndex];
+  const { name, visibility, visibilityLevel } = selectedNamespace.dataset;
+
+  document.querySelectorAll('.visibility-level-setting .radio').forEach((option) => {
+    const optionInput = option.querySelector('input[type=radio]');
+    const optionValue = optionInput ? optionInput.value : 0;
+    const optionTitle = option.querySelector('.option-title');
+    const optionName = optionTitle ? optionTitle.innerText.toLowerCase() : '';
+
+    // don't change anything if the option is restricted by admin
+    if (!option.classList.contains('restricted')) {
+      if (visibilityLevel < optionValue) {
+        option.classList.add('disabled');
+        optionInput.disabled = true;
+        const reason = option.querySelector('.option-disabled-reason');
+        if (reason) {
+          reason.innerText = `This project cannot be ${optionName} because the visibility of ${name} is ${visibility}.`;
+        }
+      } else {
+        option.classList.remove('disabled');
+        optionInput.disabled = false;
+      }
+    }
+  });
+}
+
+export default function initProjectVisibilitySelector() {
+  const namespaceSelector = document.querySelector('select.js-select-namespace');
+  if (namespaceSelector) {
+    $('.select2.js-select-namespace').on('change', () => setVisibilityOptions(namespaceSelector));
+    setVisibilityOptions(namespaceSelector);
+  }
+}
diff --git a/app/helpers/namespaces_helper.rb b/app/helpers/namespaces_helper.rb
index df8b247aff5..ca149ac2c20 100644
--- a/app/helpers/namespaces_helper.rb
+++ b/app/helpers/namespaces_helper.rb
@@ -41,7 +41,7 @@ module NamespacesHelper
 
     elements = namespaces.sort_by(&:human_name).map! do |n|
       [display_path ? n.full_path : n.human_name, n.id,
-       data: { options_parent: type, visibility_level: n.visibility_level_value, name: n.human_name }]
+       data: { options_parent: type, visibility_level: n.visibility_level_value, visibility: n.visibility, name: n.name }]
     end
 
     [type.camelize, elements]