Geo Settings Form - Init

This MR is an attempt at MVC.

This MR bootstraps the Vue
app that will be used for Geo Settings.

Following this MR we will add the API and
form UI elements.

ee/app/assets/javascripts/geo_settings/components/app.vue

+<script>
+export default {
+  name: 'GeoSettingsApp',
+};
+</script>
+
+<template>
+  <article data-testid="geoSettingsContainer">
+    <h3 class="page-title">{{ __('Geo Settings') }}</h3>
+  </article>
+</template>

ee/app/assets/javascripts/geo_settings/index.js

+import Vue from 'vue';
+import Translate from '~/vue_shared/translate';
+import GeoSettingsApp from './components/app.vue';
+
+Vue.use(Translate);
+
+export default () => {
+  const el = document.getElementById('js-geo-settings-form');
+
+  return new Vue({
+    el,
+    components: {
+      GeoSettingsApp,
+    },
+
+    render(createElement) {
+      return createElement('geo-settings-app');
+    },
+  });
+};

ee/app/assets/javascripts/pages/admin/geo/settings/index.js

+import initGeoSettingsForm from 'ee/geo_settings';
+
+if (gon.features?.enableGeoSettingsFormJs) {
+  document.addEventListener('DOMContentLoaded', initGeoSettingsForm);
+}

ee/app/controllers/admin/geo/settings_controller.rb

@@ -3,6 +3,9 @@
 class Admin::Geo::SettingsController < Admin::ApplicationSettingsController
   helper ::EE::GeoHelper
   before_action :check_license!, except: :show
+  before_action do
+    push_frontend_feature_flag(:enable_geo_settings_form_js)
+  end
 
   def show
   end

ee/app/views/admin/geo/settings/_form.html.haml

-- if Gitlab::Geo.license_allows?
-  %section
-    %h2.page-title
-      = _('Geo Settings')
-    %p.page-subtitle.light
-      = _('Geo allows you to replicate your GitLab instance to other geographical locations.')
+%section.geo-haml-form
+  %h2.page-title
+    = _('Geo Settings')
+  %p.page-subtitle.light
+    = _('Geo allows you to replicate your GitLab instance to other geographical locations.')
 
-    = form_for @application_setting, url: admin_geo_settings_path, html: { class: 'fieldset-form' } do |f|
-      = form_errors(@application_setting)
-      %fieldset
-        .form-group
-          = f.label :geo_status_timeout, 'Connection timeout', class: 'label-bold'
-          = f.number_field :geo_status_timeout, class: 'form-control'
-          .form-text.text-muted
-            = _('The amount of seconds after which a request to get a secondary node status will time out.')
-        .form-group
-          = f.label :geo_node_allowed_ips, 'Allowed Geo IP', class: 'label-bold'
-          = f.text_field :geo_node_allowed_ips, class: 'form-control'
-          .form-text.text-muted
-            = _('List of IPs and CIDRs of allowed secondary nodes. Comma-separated, e.g. "1.1.1.1, 2.2.2.0/24"')
+  = form_for @application_setting, url: admin_geo_settings_path, html: { class: 'fieldset-form' } do |f|
+    = form_errors(@application_setting)
+    %fieldset
+      .form-group
+        = f.label :geo_status_timeout, 'Connection timeout', class: 'label-bold'
+        = f.number_field :geo_status_timeout, class: 'form-control'
+        .form-text.text-muted
+          = _('The amount of seconds after which a request to get a secondary node status will time out.')
+      .form-group
+        = f.label :geo_node_allowed_ips, 'Allowed Geo IP', class: 'label-bold'
+        = f.text_field :geo_node_allowed_ips, class: 'form-control'
+        .form-text.text-muted
+          = _('List of IPs and CIDRs of allowed secondary nodes. Comma-separated, e.g. "1.1.1.1, 2.2.2.0/24"')
 
-      = f.submit _('Save changes'), class: "btn btn-success"
-- else
-  = render 'shared/empty_states/geo'
+    = f.submit _('Save changes'), class: "btn btn-success"

ee/app/views/admin/geo/settings/show.html.haml

 - page_title "Geo Settings"
 = render partial: 'admin/geo/shared/license_alert'
 
-= render_if_exists 'admin/geo/settings/form'
+- if Gitlab::Geo.license_allows?
+  - if Feature.enabled?(:enable_geo_settings_form_js)
+    #js-geo-settings-form
+  - else
+    = render_if_exists 'admin/geo/settings/form'
+- else
+  = render 'shared/empty_states/geo'

ee/spec/features/admin/admin_settings_spec.rb

@@ -15,22 +15,48 @@ RSpec.describe 'Admin updates EE-only settings' do
 
   context 'Geo settings' do
     context 'when the license has Geo feature' do
-      it 'hides JS alert' do
-        visit admin_geo_settings_path
-        expect(page).not_to have_content("Geo is only available for users who have at least a Premium license.")
+      context 'when enable_geo_settings_form_js is false' do
+        before do
+          stub_feature_flags(enable_geo_settings_form_js: false)
+          visit admin_geo_settings_path
+        end
+
+        it 'hides JS alert' do
+          expect(page).not_to have_content("Geo is only available for users who have at least a Premium license.")
+        end
+
+        it 'renders HAML form instead of JS' do
+          expect(page).not_to have_css("#js-geo-settings-form")
+          expect(page).to have_css(".geo-haml-form")
+        end
+
+        it 'allows users to change Geo settings' do
+          page.within('section') do
+            fill_in 'Connection timeout', with: 15
+            fill_in 'Allowed Geo IP', with: '192.34.34.34'
+            click_button 'Save changes'
+          end
+
+          expect(current_settings.geo_status_timeout).to eq(15)
+          expect(current_settings.geo_node_allowed_ips).to eq('192.34.34.34')
+          expect(page).to have_content 'Application settings saved successfully'
+        end
       end
 
-      it 'allows users to change Geo settings' do
-        visit admin_geo_settings_path
-        page.within('section') do
-          fill_in 'Connection timeout', with: 15
-          fill_in 'Allowed Geo IP', with: '192.34.34.34'
-          click_button 'Save changes'
+      context 'when enable_geo_settings_form_js is true' do
+        before do
+          stub_feature_flags(enable_geo_settings_form_js: true)
+          visit admin_geo_settings_path
         end
 
-        expect(current_settings.geo_status_timeout).to eq(15)
-        expect(current_settings.geo_node_allowed_ips).to eq('192.34.34.34')
-        expect(page).to have_content 'Application settings saved successfully'
+        it 'hides JS alert' do
+          expect(page).not_to have_content("Geo is only available for users who have at least a Premium license.")
+        end
+
+        it 'renders JS form instead of HAML' do
+          expect(page).to have_css("#js-geo-settings-form")
+          expect(page).not_to have_css(".geo-haml-form")
+        end
       end
     end
 

ee/spec/frontend/geo_settings/components/app_spec.js

+import { shallowMount } from '@vue/test-utils';
+import GeoSettingsApp from 'ee/geo_settings/components/app.vue';
+
+describe('GeoSettingsApp', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(GeoSettingsApp);
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findGeoSettingsContainer = () => wrapper.find('[data-testid="geoSettingsContainer"]');
+
+  describe('template', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders the settings container', () => {
+      expect(findGeoSettingsContainer().exists()).toBe(true);
+    });
+
+    it('`Geo Settings` header text', () => {
+      expect(findGeoSettingsContainer().text()).toContain('Geo Settings');
+    });
+  });
+});