Hide and reset namespaces select when primary checkbox is checked

app/assets/javascripts/dispatcher.js

@@ -57,6 +57,7 @@ import UserCallout from './user_callout';
 import ShortcutsWiki from './shortcuts_wiki';
 import Pipelines from './pipelines';
 import BlobViewer from './blob/viewer/index';
+import GeoNodeForm from './geo/geo_node_form';
 import GeoNodes from './geo_nodes';
 import AutoWidthDropdownSelect from './issuable/auto_width_dropdown_select';
 import UsersSelect from './users_select';
@@ -611,6 +612,7 @@ import initGroupAnalytics from './init_group_analytics';
               break;
             case 'geo_nodes':
               new GeoNodes($('.geo-nodes'));
+              new GeoNodeForm($('.js-geo-node-form'));
               break;
           }
           break;

app/assets/javascripts/geo/geo_node_form.js

+export default class GeoNodeForm {
+  constructor(container) {
+    this.$container = $(container);
+    this.$namespaces = this.$container.find(".js-namespaces");
+    this.$namespacesSelect = this.$namespaces.find('.select2');
+    this.$primaryCheckbox = this.$container.find("input[type='checkbox']");
+    this.$primaryCheckbox.on('change', e => this.onPrimaryCheckboxChange(e));
+  }
+
+  onPrimaryCheckboxChange(event) {
+    this.$namespacesSelect.select2('data', null);
+
+    if (this.$primaryCheckbox.is(':checked')) {
+      this.$namespaces.addClass('hidden');
+    } else {
+      this.$namespaces.removeClass('hidden');
+    }
+  }
+}

app/views/admin/geo_nodes/_form.html.haml

@@ -20,9 +20,9 @@
       - unless disable_key_edit
         %p.help-block
           Paste a machine public key here for the GitLab user this node runs on. Read more about how to generate it
-          = link_to "here", help_page_path("ssh/README")
+          = link_to 'here', help_page_path('ssh/README')
 
-.form-group
+.form-group.js-namespaces{ class: ('hidden' unless geo_node.new_record? || geo_node.secondary?) }
   = form.label :namespace_ids, 'Namespaces to replicate', class: 'control-label'
   .col-sm-10
     = form.select :namespace_ids, namespaces_options(geo_node.namespace_ids), { include_hidden: true }, multiple: true, class: 'select2 select-wide', data: { field: 'group_ids' }

app/views/admin/geo_nodes/edit.html.haml

@@ -2,7 +2,7 @@
 %h3.page-title
   Edit Geo Node
 
-= form_for [:admin, @node], html: { class: 'form-horizontal' } do |f|
+= form_for [:admin, @node], html: { class: 'form-horizontal js-geo-node-form' } do |f|
   = render partial: 'form', locals: { form: f, geo_node: @node, disable_key_edit: true }
   .form-actions
     = f.submit 'Save changes', class: 'btn btn-create'

app/views/admin/geo_nodes/index.html.haml

@@ -9,7 +9,7 @@
 %hr
 
 - if Gitlab::Geo.license_allows?
-  = form_for [:admin, @node], as: :geo_node, url: admin_geo_nodes_path, html: { class: 'form-horizontal' } do |f|
+  = form_for [:admin, @node], as: :geo_node, url: admin_geo_nodes_path, html: { class: 'form-horizontal js-geo-node-form' } do |f|
     = render partial: 'form', locals: { form: f, geo_node: @node }
     .form-actions
       = f.submit 'Add Node', class: 'btn btn-create'