Merge branch '216134_01-bootstrap-geo-form' into 'master'

Geo Settings Form - Init

See merge request gitlab-org/gitlab!34099

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