Init Geo Node Form in Vue

Feature flag on DOM

Backend Tests

Frontend tests

Lint and locale

Duplicate code

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

+<script>
+export default {
+  name: 'GeoNodeFormApp',
+};
+</script>
+
+<template>
+  <article class="geo-node-form-container">
+    <h3 class="page-title">{{ __('Geo Node Form') }}</h3>
+  </article>
+</template>

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

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

ee/app/assets/javascripts/pages/admin/geo/nodes/edit/index.js

 import initForm from '../shared/init_form';
+import initGeoNodeForm from 'ee/geo_node_form';
 
-document.addEventListener('DOMContentLoaded', initForm);
+if (gon.features?.enableGeoNodeFormJs) {
+  document.addEventListener('DOMContentLoaded', initGeoNodeForm);
+} else {
+  document.addEventListener('DOMContentLoaded', initForm);
+}

ee/app/assets/javascripts/pages/admin/geo/nodes/new/index.js

 import initForm from '../shared/init_form';
+import initGeoNodeForm from 'ee/geo_node_form';
 
-document.addEventListener('DOMContentLoaded', initForm);
+if (gon.features?.enableGeoNodeFormJs) {
+  document.addEventListener('DOMContentLoaded', initGeoNodeForm);
+} else {
+  document.addEventListener('DOMContentLoaded', initForm);
+}

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

@@ -3,6 +3,7 @@
 class Admin::Geo::NodesController < Admin::Geo::ApplicationController
   before_action :check_license!, except: :index
   before_action :load_node, only: [:edit, :update]
+  before_action :push_feature_flag, except: :index
 
   # rubocop: disable CodeReuse/ActiveRecord
   def index
@@ -66,4 +67,8 @@ class Admin::Geo::NodesController < Admin::Geo::ApplicationController
   def load_node
     @node = GeoNode.find(params[:id])
   end
+
+  def push_feature_flag
+    push_frontend_feature_flag(:enable_geo_node_form_js)
+  end
 end

ee/app/views/admin/geo/nodes/edit.html.haml

-- page_title 'Edit Geo Node'
-%h3.page-title
+- page_title _('Edit Geo Node')
+
+- if Feature.enabled?(:enable_geo_node_form_js)
+  #js-geo-node-form
+- else
+  %h3.page-title
     Edit Geo Node
 
-= form_for [:admin, @node], html: { class: 'js-geo-node-form' } do |f|
+  = form_for [:admin, @node], html: { class: 'js-geo-node-form' } do |f|
     = render partial: 'form', locals: { form: f, geo_node: @node }
     .form-actions
       = f.submit 'Save changes', class: 'btn btn-success'
       = link_to 'Cancel', admin_geo_nodes_path, class: 'btn btn-cancel'
 
-%hr
+    %hr

ee/app/views/admin/geo/nodes/new.html.haml

-- page_title 'New node'
+- page_title _('New Geo Node')
 
-%h2.page-title
+- if Feature.enabled?(:enable_geo_node_form_js)
+  #js-geo-node-form
+- else
+  %h2.page-title
     %span.title-text
       New node
-%hr.page-title-separator
+  %hr.page-title-separator
 
-- if Gitlab::Geo.license_allows?
+  - if Gitlab::Geo.license_allows?
     = form_for [:admin, @node], as: :geo_node, url: admin_geo_nodes_path, html: { class: 'js-geo-node-form' } do |f|
       = render partial: 'form', locals: { form: f, geo_node: @node }
       .form-actions

ee/spec/features/admin/geo/admin_geo_nodes_spec.rb

@@ -7,6 +7,7 @@ describe 'admin Geo Nodes', :js, :geo do
 
   before do
     allow(Gitlab::Geo).to receive(:license_allows?).and_return(true)
+    stub_feature_flags(enable_geo_node_form_js: false)
     sign_in(create(:admin))
   end
 
@@ -152,12 +153,7 @@ describe 'admin Geo Nodes', :js, :geo do
     it 'updates an existing Geo Node' do
       geo_node.update(primary: true)
 
-      visit admin_geo_nodes_path
-      wait_for_requests
-
-      page.within(find('.geo-node-actions', match: :first)) do
-        page.click_link('Edit')
-      end
+      visit edit_admin_geo_node_path(geo_node)
 
       fill_in 'URL', with: 'http://newsite.com'
       fill_in 'Internal URL', with: 'http://internal-url.com'
@@ -217,4 +213,46 @@ describe 'admin Geo Nodes', :js, :geo do
       end
     end
   end
+
+  describe 'Feature(:enable_geo_node_form_js)' do
+    describe 'when true' do
+      before do
+        stub_feature_flags(enable_geo_node_form_js: true)
+      end
+
+      it '`/new` uses the Vue form instead of the HAML partial' do
+        visit new_admin_geo_node_path
+
+        expect(page).to have_css(".geo-node-form-container")
+        expect(page).not_to have_css(".js-geo-node-form")
+      end
+
+      it '`/edit` uses the Vue form instead of the HAML partial' do
+        visit edit_admin_geo_node_path(geo_node)
+
+        expect(page).to have_css(".geo-node-form-container")
+        expect(page).not_to have_css(".js-geo-node-form")
+      end
+    end
+
+    describe 'when false' do
+      before do
+        stub_feature_flags(enable_geo_node_form_js: false)
+      end
+
+      it '`/new` uses the HAML partial instead of the Vue form' do
+        visit new_admin_geo_node_path
+
+        expect(page).not_to have_css(".geo-node-form-container")
+        expect(page).to have_css(".js-geo-node-form")
+      end
+
+      it '`/edit` uses the HAML partial instead of the Vue form' do
+        visit edit_admin_geo_node_path(geo_node)
+
+        expect(page).not_to have_css(".geo-node-form-container")
+        expect(page).to have_css(".js-geo-node-form")
+      end
+    end
+  end
 end

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

+import { shallowMount } from '@vue/test-utils';
+import GeoNodeFormApp from 'ee/geo_node_form/components/app.vue';
+
+describe('GeoNodeFormApp', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(GeoNodeFormApp);
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findGeoNodeFormContainer = () => wrapper.find('.geo-node-form-container');
+
+  describe('render', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('the node form container', () => {
+      expect(findGeoNodeFormContainer().exists()).toBe(true);
+    });
+
+    it('`Geo Node Form` header text', () => {
+      expect(findGeoNodeFormContainer().text()).toContain('Geo Node Form');
+    });
+  });
+});

locale/gitlab.pot

@@ -6576,6 +6576,9 @@ msgstr ""
 msgid "Edit Deploy Key"
 msgstr ""
 
+msgid "Edit Geo Node"
+msgstr ""
+
 msgid "Edit Group Hook"
 msgstr ""
 
@@ -8303,6 +8306,9 @@ msgstr ""
 msgid "Geo Designs"
 msgstr ""
 
+msgid "Geo Node Form"
+msgstr ""
+
 msgid "Geo Nodes"
 msgstr ""
 
@@ -11969,6 +11975,9 @@ msgstr ""
 msgid "New Environment"
 msgstr ""
 
+msgid "New Geo Node"
+msgstr ""
+
 msgid "New Group"
 msgstr ""