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