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
+%section.geo-haml-form
   %h2.page-title
     = _('Geo Settings')
   %p.page-subtitle.light
@@ -20,5 +19,3 @@
           = _('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'

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,13 +15,22 @@ 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
+      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
-        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'
@@ -34,6 +43,23 @@ RSpec.describe 'Admin updates EE-only settings' do
         end
       end
 
+      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
+
+        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
+
     context 'when the license does not have Geo feature' do
       it 'shows JS alert' do
         allow(License).to receive(:feature_available?).and_return(false)

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');
+    });
+  });
+});