Merge branch '347506-integration-form-haml-to-vue' into 'master'

Move integration settings form from HAML to Vue

See merge request gitlab-org/gitlab!77934

app/assets/javascripts/integrations/constants.js

@@ -26,3 +26,5 @@ export const I18N_SUCCESSFUL_CONNECTION_MESSAGE = s__('Integrations|Connection s
 
 export const settingsTabTitle = __('Settings');
 export const overridesTabTitle = s__('Integrations|Projects using custom settings');
+
+export const INTEGRATION_FORM_SELECTOR = '.js-integration-settings-form';

app/assets/javascripts/integrations/edit/components/integration_form.vue

 <script>
-import { GlButton, GlModalDirective, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { GlButton, GlModalDirective, GlSafeHtmlDirective as SafeHtml, GlForm } from '@gitlab/ui';
 import axios from 'axios';
 import * as Sentry from '@sentry/browser';
 import { mapState, mapActions, mapGetters } from 'vuex';
@@ -9,9 +9,11 @@ import {
   I18N_FETCH_TEST_SETTINGS_DEFAULT_ERROR_MESSAGE,
   I18N_DEFAULT_ERROR_MESSAGE,
   I18N_SUCCESSFUL_CONNECTION_MESSAGE,
+  INTEGRATION_FORM_SELECTOR,
   integrationLevels,
 } from '~/integrations/constants';
 import { refreshCurrentPage } from '~/lib/utils/url_utility';
+import csrf from '~/lib/utils/csrf';
 import eventHub from '../event_hub';
 import { testIntegrationSettings } from '../api';
 import ActiveCheckbox from './active_checkbox.vue';
@@ -35,6 +37,7 @@ export default {
     ConfirmationModal,
     ResetConfirmationModal,
     GlButton,
+    GlForm,
   },
   directives: {
     GlModal: GlModalDirective,
@@ -42,10 +45,6 @@ export default {
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
-    formSelector: {
-      type: String,
-      required: true,
-    },
     helpHtml: {
       type: String,
       required: false,
@@ -84,10 +83,28 @@ export default {
     disableButtons() {
       return Boolean(this.isSaving || this.isResetting || this.isTesting);
     },
+    useVueForm() {
+      return this.glFeatures?.vueIntegrationForm;
+    },
+    formContainerProps() {
+      return this.useVueForm
+        ? {
+            ref: 'integrationForm',
+            method: 'post',
+            class: 'gl-mb-3 gl-show-field-errors integration-settings-form',
+            action: this.propsSource.formPath,
+            novalidate: !this.integrationActive,
+          }
+        : {};
+    },
+    formContainer() {
+      return this.useVueForm ? GlForm : 'div';
+    },
   },
   mounted() {
-    // this form element is defined in Haml
-    this.form = document.querySelector(this.formSelector);
+    this.form = this.useVueForm
+      ? this.$refs.integrationForm.$el
+      : document.querySelector(INTEGRATION_FORM_SELECTOR);
   },
   methods: {
     ...mapActions(['setOverride', 'fetchResetIntegration', 'requestJiraIssueTypes']),
@@ -152,7 +169,7 @@ export default {
     },
     onToggleIntegrationState(integrationActive) {
       this.integrationActive = integrationActive;
-      if (!this.form) {
+      if (!this.form || this.useVueForm) {
         return;
       }
 
@@ -169,11 +186,23 @@ export default {
     ADD_TAGS: ['use'], // to support icon SVGs
     FORBID_ATTR: [], // This is trusted input so we can override the default config to allow data-* attributes
   },
+  csrf,
 };
 </script>
 
 <template>
-  <div class="gl-mb-3">
+  <component :is="formContainer" v-bind="formContainerProps">
+    <template v-if="useVueForm">
+      <input type="hidden" name="_method" value="put" />
+      <input type="hidden" name="authenticity_token" :value="$options.csrf.token" />
+      <input
+        type="hidden"
+        name="redirect_to"
+        :value="propsSource.redirectTo"
+        data-testid="redirect-to-field"
+      />
+    </template>
+
     <override-dropdown
       v-if="defaultState !== null"
       :inherit-from-id="defaultState.id"
@@ -282,5 +311,5 @@ export default {
         </div>
       </div>
     </div>
-  </div>
+  </component>
 </template>

app/assets/javascripts/integrations/edit/index.js

@@ -28,9 +28,11 @@ function parseDatasetToProps(data) {
     cancelPath,
     testPath,
     resetPath,
+    formPath,
     vulnerabilitiesIssuetype,
     jiraIssueTransitionAutomatic,
     jiraIssueTransitionId,
+    redirectTo,
     ...booleanAttributes
   } = data;
   const {
@@ -57,6 +59,7 @@ function parseDatasetToProps(data) {
     canTest,
     testPath,
     resetPath,
+    formPath,
     triggerFieldsProps: {
       initialTriggerCommit: commitEvents,
       initialTriggerMergeRequest: mergeRequestEvents,
@@ -82,10 +85,11 @@ function parseDatasetToProps(data) {
     inheritFromId: parseInt(inheritFromId, 10),
     integrationLevel,
     id: parseInt(id, 10),
+    redirectTo,
   };
 }
 
-export default function initIntegrationSettingsForm(formSelector) {
+export default function initIntegrationSettingsForm() {
   const customSettingsEl = document.querySelector('.js-vue-integration-settings');
   const defaultSettingsEl = document.querySelector('.js-vue-default-integration-settings');
 
@@ -115,7 +119,6 @@ export default function initIntegrationSettingsForm(formSelector) {
       return createElement(IntegrationForm, {
         props: {
           helpHtml,
-          formSelector,
         },
       });
     },

app/assets/javascripts/pages/admin/integrations/edit/index.js

 import initIntegrationSettingsForm from '~/integrations/edit';
 import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics';
 
-initIntegrationSettingsForm('.js-integration-settings-form');
+initIntegrationSettingsForm();
 
 const prometheusSettingsSelector = '.js-prometheus-metrics-monitoring';
 const prometheusSettingsWrapper = document.querySelector(prometheusSettingsSelector);

app/assets/javascripts/pages/groups/settings/integrations/edit/index.js

 import initIntegrationSettingsForm from '~/integrations/edit';
 import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics';
 
-initIntegrationSettingsForm('.js-integration-settings-form');
+initIntegrationSettingsForm();
 
 const prometheusSettingsSelector = '.js-prometheus-metrics-monitoring';
 const prometheusSettingsWrapper = document.querySelector(prometheusSettingsSelector);

app/assets/javascripts/pages/projects/services/edit/index.js

@@ -2,7 +2,7 @@ import initIntegrationSettingsForm from '~/integrations/edit';
 import PrometheusAlerts from '~/prometheus_alerts';
 import CustomMetrics from '~/prometheus_metrics/custom_metrics';
 
-initIntegrationSettingsForm('.js-integration-settings-form');
+initIntegrationSettingsForm();
 
 const prometheusSettingsSelector = '.js-prometheus-metrics-monitoring';
 const prometheusSettingsWrapper = document.querySelector(prometheusSettingsSelector);

app/controllers/concerns/integrations/actions.rb

@@ -8,6 +8,9 @@ module Integrations::Actions
     include IntegrationsHelper
 
     before_action :integration, only: [:edit, :update, :overrides, :test]
+    before_action do
+      push_frontend_feature_flag(:vue_integration_form, current_user, default_enabled: :yaml)
+    end
 
     urgency :low, [:test]
   end

app/controllers/projects/services_controller.rb

@@ -12,6 +12,9 @@ class Projects::ServicesController < Projects::ApplicationController
   before_action :web_hook_logs, only: [:edit, :update]
   before_action :set_deprecation_notice_for_prometheus_integration, only: [:edit, :update]
   before_action :redirect_deprecated_prometheus_integration, only: [:update]
+  before_action do
+    push_frontend_feature_flag(:vue_integration_form, current_user, default_enabled: :yaml)
+  end
 
   respond_to :html
 

app/helpers/integrations_helper.rb

@@ -90,7 +90,9 @@ module IntegrationsHelper
       cancel_path: scoped_integrations_path(project: project, group: group),
       can_test: integration.testable?.to_s,
       test_path: scoped_test_integration_path(integration, project: project, group: group),
-      reset_path: scoped_reset_integration_path(integration, group: group)
+      reset_path: scoped_reset_integration_path(integration, group: group),
+      form_path: scoped_integration_path(integration, project: project, group: group),
+      redirect_to: request.referer
     }
 
     if integration.is_a?(Integrations::Jira)
@@ -226,6 +228,10 @@ module IntegrationsHelper
       name: integration.to_param
     }
   end
+
+  def vue_integration_form_enabled?
+    Feature.enabled?(:vue_integration_form, current_user, default_enabled: :yaml)
+  end
 end
 
 IntegrationsHelper.prepend_mod_with('IntegrationsHelper')

app/views/projects/services/_form.html.haml

@@ -6,9 +6,12 @@
   - if integration.operating?
     = sprite_icon('check', css_class: 'gl-text-green-500')
 
-= form_for(integration, as: :service, url: scoped_integration_path(integration, project: @project, group: @group), method: :put, html: { class: 'gl-show-field-errors integration-settings-form js-integration-settings-form', data: { 'test-url' => test_project_integration_path(@project, integration) } }) do |form|
-  = render 'shared/service_settings', form: form, integration: integration
-  %input{ id: 'services_redirect_to', type: 'hidden', name: 'redirect_to', value: request.referer }
+- if vue_integration_form_enabled?
+  = render 'shared/integration_settings', integration: integration
+- else
+  = form_for(integration, as: :service, url: scoped_integration_path(integration, project: @project, group: @group), method: :put, html: { class: 'gl-show-field-errors integration-settings-form js-integration-settings-form', data: { 'test-url' => test_project_integration_path(@project, integration), testid: 'integration-form' } }) do |form|
+    = render 'shared/integration_settings', form: form, integration: integration
+    %input{ id: 'services_redirect_to', type: 'hidden', name: 'redirect_to', value: request.referer }
 
 - if lookup_context.template_exists?('show', "projects/services/#{integration.to_param}", true)
   %hr

app/views/shared/_service_settings.html.haml → app/views/shared/_integration_settings.html.haml

 = form_errors(integration)
 
-.service-settings
+%div{ data: { testid: "integration-settings-form" } }
   - if @default_integration
     .js-vue-default-integration-settings{ data: integration_form_data(@default_integration, group: @group, project: @project) }
   .js-vue-integration-settings{ data: integration_form_data(integration, group: @group, project: @project) }

app/views/shared/integrations/_form.html.haml

 - integration = local_assigns.fetch(:integration)
 
-= form_for integration, as: :service, url: scoped_integration_path(integration, group: @group), method: :put, html: { class: 'gl-show-field-errors integration-settings-form js-integration-settings-form', data: { 'test-url' => scoped_test_integration_path(integration, group: @group) } } do |form|
-  = render 'shared/service_settings', form: form, integration: integration
+= form_for integration, as: :service, url: scoped_integration_path(integration, group: @group), method: :put, html: { class: 'gl-show-field-errors integration-settings-form js-integration-settings-form', data: { 'test-url' => scoped_test_integration_path(integration, group: @group), testid: 'integration-form' } } do |form|
+  = render 'shared/integration_settings', form: form, integration: integration

app/views/shared/integrations/edit.html.haml

@@ -7,4 +7,7 @@
   = @integration.title
 
 = render 'shared/integrations/tabs', integration: @integration, active_tab: 'edit' do
-  = render 'shared/integrations/form', integration: @integration
+  - if vue_integration_form_enabled?
+    = render 'shared/integration_settings', integration: @integration
+  - else
+    = render 'shared/integrations/form', integration: @integration

config/feature_flags/development/vue_integration_form.yml

+---
+name: vue_integration_form
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/77934
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/350444
+milestone: '14.7'
+type: development
+group: group::integrations
+default_enabled: false

ee/spec/features/projects/settings/slack_application_spec.rb

@@ -22,7 +22,7 @@ RSpec.describe 'Slack application' do
   it 'I can edit slack integration' do
     visit slack_application_form_path
 
-    within '.js-integration-settings-form' do
+    within '[data-testid="integration-settings-form"]' do
       click_link 'Edit'
     end
 
@@ -31,7 +31,7 @@ RSpec.describe 'Slack application' do
 
     expect(page).to have_content('The project alias was updated successfully')
 
-    within '.js-integration-settings-form' do
+    within '[data-testid="integration-settings-form"]' do
       expect(page).to have_content('alias-edited')
     end
   end

spec/features/admin/integrations/user_activates_mattermost_slash_command_spec.rb

@@ -19,4 +19,19 @@ RSpec.describe 'User activates the instance-level Mattermost Slash Command integ
     expect(page).to have_link('Settings', href: edit_path)
     expect(page).to have_link('Projects using custom settings', href: overrides_path)
   end
+
+  it 'does not render integration form element' do
+    expect(page).not_to have_selector('[data-testid="integration-form"]')
+  end
+
+  context 'when `vue_integration_form` feature flag is disabled' do
+    before do
+      stub_feature_flags(vue_integration_form: false)
+      visit_instance_integration('Mattermost slash commands')
+    end
+
+    it 'renders integration form element' do
+      expect(page).to have_selector('[data-testid="integration-form"]')
+    end
+  end
 end

spec/features/projects/integrations/user_activates_jira_spec.rb

@@ -41,7 +41,7 @@ RSpec.describe 'User activates Jira', :js do
         fill_in 'service_password', with: 'password'
         click_test_integration
 
-        page.within('.service-settings') do
+        page.within('[data-testid="integration-settings-form"]') do
           expect(page).to have_content('This field is required.')
         end
       end

spec/frontend/integrations/edit/components/integration_form_spec.js

+import { GlForm } from '@gitlab/ui';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import * as Sentry from '@sentry/browser';
 import { setHTMLFixture } from 'helpers/fixtures';
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import ActiveCheckbox from '~/integrations/edit/components/active_checkbox.vue';
 import ConfirmationModal from '~/integrations/edit/components/confirmation_modal.vue';
@@ -36,12 +37,18 @@ describe('IntegrationForm', () => {
   let dispatch;
   let mockAxios;
   let mockForm;
+  let vueIntegrationFormFeatureFlag;
+
+  const createForm = () => {
+    mockForm = document.createElement('form');
+    jest.spyOn(document, 'querySelector').mockReturnValue(mockForm);
+  };
 
   const createComponent = ({
     customStateProps = {},
-    featureFlags = {},
     initialState = {},
     props = {},
+    mountFn = shallowMountExtended,
   } = {}) => {
     const store = createStore({
       customState: { ...mockIntegrationProps, ...customStateProps },
@@ -49,11 +56,12 @@ describe('IntegrationForm', () => {
     });
     dispatch = jest.spyOn(store, 'dispatch').mockImplementation();
 
-    wrapper = shallowMountExtended(IntegrationForm, {
-      propsData: { ...props, formSelector: '.test' },
-      provide: {
-        glFeatures: featureFlags,
-      },
+    if (!vueIntegrationFormFeatureFlag) {
+      createForm();
+    }
+
+    wrapper = mountFn(IntegrationForm, {
+      propsData: { ...props },
       store,
       stubs: {
         OverrideDropdown,
@@ -67,16 +75,14 @@ describe('IntegrationForm', () => {
           show: mockToastShow,
         },
       },
+      provide: {
+        glFeatures: {
+          vueIntegrationForm: vueIntegrationFormFeatureFlag,
+        },
+      },
     });
   };
 
-  const createForm = ({ isValid = true } = {}) => {
-    mockForm = document.createElement('form');
-    jest.spyOn(document, 'querySelector').mockReturnValue(mockForm);
-    jest.spyOn(mockForm, 'checkValidity').mockReturnValue(isValid);
-    jest.spyOn(mockForm, 'submit');
-  };
-
   const findOverrideDropdown = () => wrapper.findComponent(OverrideDropdown);
   const findActiveCheckbox = () => wrapper.findComponent(ActiveCheckbox);
   const findConfirmationModal = () => wrapper.findComponent(ConfirmationModal);
@@ -88,6 +94,14 @@ describe('IntegrationForm', () => {
   const findJiraTriggerFields = () => wrapper.findComponent(JiraTriggerFields);
   const findJiraIssuesFields = () => wrapper.findComponent(JiraIssuesFields);
   const findTriggerFields = () => wrapper.findComponent(TriggerFields);
+  const findGlForm = () => wrapper.findComponent(GlForm);
+  const findRedirectToField = () => wrapper.findByTestId('redirect-to-field');
+  const findFormElement = () => (vueIntegrationFormFeatureFlag ? findGlForm().element : mockForm);
+
+  const mockFormFunctions = ({ checkValidityReturn }) => {
+    jest.spyOn(findFormElement(), 'checkValidity').mockReturnValue(checkValidityReturn);
+    jest.spyOn(findFormElement(), 'submit');
+  };
 
   beforeEach(() => {
     mockAxios = new MockAdapter(axios);
@@ -223,6 +237,7 @@ describe('IntegrationForm', () => {
 
         createComponent({
           customStateProps: { type: 'jira', testPath: '/test' },
+          mountFn: mountExtended,
         });
       });
 
@@ -341,6 +356,19 @@ describe('IntegrationForm', () => {
         });
       });
     });
+
+    describe('when `vueIntegrationForm` feature flag is $vueIntegrationFormEnabled', () => {
+      it('renders hidden fields', () => {
+        vueIntegrationFormFeatureFlag = true;
+        createComponent({
+          customStateProps: {
+            redirectTo: '/services',
+          },
+        });
+
+        expect(findRedirectToField().attributes('value')).toBe('/services');
+      });
+    });
   });
 
   describe('ActiveCheckbox', () => {
@@ -361,193 +389,216 @@ describe('IntegrationForm', () => {
     });
 
     describe.each`
-      formActive | novalidate
-      ${true}    | ${null}
-      ${false}   | ${'true'}
+      formActive | vueIntegrationFormEnabled | novalidate
+      ${true}    | ${true}                   | ${null}
+      ${false}   | ${true}                   | ${'novalidate'}
+      ${true}    | ${false}                  | ${null}
+      ${false}   | ${false}                  | ${'true'}
     `(
-      'when `toggle-integration-active` is emitted with $formActive',
-      ({ formActive, novalidate }) => {
+      'when `vueIntegrationForm` feature flag is $vueIntegrationFormEnabled and `toggle-integration-active` is emitted with $formActive',
+      ({ formActive, vueIntegrationFormEnabled, novalidate }) => {
         beforeEach(async () => {
-          createForm();
+          vueIntegrationFormFeatureFlag = vueIntegrationFormEnabled;
+
           createComponent({
             customStateProps: {
               showActive: true,
               initialActivated: false,
             },
+            mountFn: mountExtended,
           });
+          mockFormFunctions({ checkValidityReturn: false });
 
           await findActiveCheckbox().vm.$emit('toggle-integration-active', formActive);
         });
 
         it(`sets noValidate to ${novalidate}`, () => {
-          expect(mockForm.getAttribute('novalidate')).toBe(novalidate);
+          expect(findFormElement().getAttribute('novalidate')).toBe(novalidate);
         });
       },
     );
   });
 
-  describe('when `save` button is clicked', () => {
-    describe('buttons', () => {
-      beforeEach(async () => {
-        createForm();
-        createComponent({
-          customStateProps: {
-            showActive: true,
-            canTest: true,
-            initialActivated: true,
-          },
-        });
-
-        await findProjectSaveButton().vm.$emit('click', new Event('click'));
-      });
-
-      it('sets save button `loading` prop to `true`', () => {
-        expect(findProjectSaveButton().props('loading')).toBe(true);
-      });
-
-      it('sets test button `disabled` prop to `true`', () => {
-        expect(findTestButton().props('disabled')).toBe(true);
-      });
-    });
-
-    describe.each`
-      checkValidityReturn | integrationActive
-      ${true}             | ${false}
-      ${true}             | ${true}
-      ${false}            | ${false}
-    `(
-      'when form is valid (checkValidity returns $checkValidityReturn and integrationActive is $integrationActive)',
-      ({ integrationActive, checkValidityReturn }) => {
-        beforeEach(async () => {
-          createForm({ isValid: checkValidityReturn });
-          createComponent({
-            customStateProps: {
-              showActive: true,
-              canTest: true,
-              initialActivated: integrationActive,
-            },
+  describe.each`
+    vueIntegrationFormEnabled
+    ${true}
+    ${false}
+  `(
+    'when `vueIntegrationForm` feature flag is $vueIntegrationFormEnabled',
+    ({ vueIntegrationFormEnabled }) => {
+      beforeEach(() => {
+        vueIntegrationFormFeatureFlag = vueIntegrationFormEnabled;
+      });
+
+      describe('when `save` button is clicked', () => {
+        describe('buttons', () => {
+          beforeEach(async () => {
+            createComponent({
+              customStateProps: {
+                showActive: true,
+                canTest: true,
+                initialActivated: true,
+              },
+              mountFn: mountExtended,
+            });
+
+            await findProjectSaveButton().vm.$emit('click', new Event('click'));
           });
 
-          await findProjectSaveButton().vm.$emit('click', new Event('click'));
-        });
+          it('sets save button `loading` prop to `true`', () => {
+            expect(findProjectSaveButton().props('loading')).toBe(true);
+          });
 
-        it('submit form', () => {
-          expect(mockForm.submit).toHaveBeenCalledTimes(1);
+          it('sets test button `disabled` prop to `true`', () => {
+            expect(findTestButton().props('disabled')).toBe(true);
+          });
         });
-      },
-    );
 
-    describe('when form is invalid (checkValidity returns false and integrationActive is true)', () => {
-      beforeEach(async () => {
-        createForm({ isValid: false });
-        createComponent({
-          customStateProps: {
-            showActive: true,
-            canTest: true,
-            initialActivated: true,
+        describe.each`
+          checkValidityReturn | integrationActive
+          ${true}             | ${false}
+          ${true}             | ${true}
+          ${false}            | ${false}
+        `(
+          'when form is valid (checkValidity returns $checkValidityReturn and integrationActive is $integrationActive)',
+          ({ integrationActive, checkValidityReturn }) => {
+            beforeEach(async () => {
+              createComponent({
+                customStateProps: {
+                  showActive: true,
+                  canTest: true,
+                  initialActivated: integrationActive,
+                },
+                mountFn: mountExtended,
+              });
+
+              mockFormFunctions({ checkValidityReturn });
+
+              await findProjectSaveButton().vm.$emit('click', new Event('click'));
+            });
+
+            it('submits form', () => {
+              expect(findFormElement().submit).toHaveBeenCalledTimes(1);
+            });
           },
-        });
-
-        await findProjectSaveButton().vm.$emit('click', new Event('click'));
-      });
-
-      it('does not submit form', () => {
-        expect(mockForm.submit).not.toHaveBeenCalled();
-      });
+        );
+
+        describe('when form is invalid (checkValidity returns false and integrationActive is true)', () => {
+          beforeEach(async () => {
+            createComponent({
+              customStateProps: {
+                showActive: true,
+                canTest: true,
+                initialActivated: true,
+              },
+              mountFn: mountExtended,
+            });
+            mockFormFunctions({ checkValidityReturn: false });
+
+            await findProjectSaveButton().vm.$emit('click', new Event('click'));
+          });
 
-      it('sets save button `loading` prop to `false`', () => {
-        expect(findProjectSaveButton().props('loading')).toBe(false);
-      });
+          it('does not submit form', () => {
+            expect(findFormElement().submit).not.toHaveBeenCalled();
+          });
 
-      it('sets test button `disabled` prop to `false`', () => {
-        expect(findTestButton().props('disabled')).toBe(false);
-      });
+          it('sets save button `loading` prop to `false`', () => {
+            expect(findProjectSaveButton().props('loading')).toBe(false);
+          });
 
-      it('emits `VALIDATE_INTEGRATION_FORM_EVENT`', () => {
-        expect(eventHub.$emit).toHaveBeenCalledWith(VALIDATE_INTEGRATION_FORM_EVENT);
-      });
-    });
-  });
+          it('sets test button `disabled` prop to `false`', () => {
+            expect(findTestButton().props('disabled')).toBe(false);
+          });
 
-  describe('when `test` button is clicked', () => {
-    describe('when form is invalid', () => {
-      it('emits `VALIDATE_INTEGRATION_FORM_EVENT` event to the event hub', () => {
-        createForm({ isValid: false });
-        createComponent({
-          customStateProps: {
-            showActive: true,
-            canTest: true,
-          },
+          it('emits `VALIDATE_INTEGRATION_FORM_EVENT`', () => {
+            expect(eventHub.$emit).toHaveBeenCalledWith(VALIDATE_INTEGRATION_FORM_EVENT);
+          });
         });
-
-        findTestButton().vm.$emit('click', new Event('click'));
-
-        expect(eventHub.$emit).toHaveBeenCalledWith(VALIDATE_INTEGRATION_FORM_EVENT);
       });
-    });
 
-    describe('when form is valid', () => {
-      const mockTestPath = '/test';
+      describe('when `test` button is clicked', () => {
+        describe('when form is invalid', () => {
+          it('emits `VALIDATE_INTEGRATION_FORM_EVENT` event to the event hub', () => {
+            createComponent({
+              customStateProps: {
+                showActive: true,
+                canTest: true,
+              },
+              mountFn: mountExtended,
+            });
+            mockFormFunctions({ checkValidityReturn: false });
 
-      beforeEach(() => {
-        createForm({ isValid: true });
-        createComponent({
-          customStateProps: {
-            showActive: true,
-            canTest: true,
-            testPath: mockTestPath,
-          },
-        });
-      });
-
-      describe('buttons', () => {
-        beforeEach(async () => {
-          await findTestButton().vm.$emit('click', new Event('click'));
-        });
+            findTestButton().vm.$emit('click', new Event('click'));
 
-        it('sets test button `loading` prop to `true`', () => {
-          expect(findTestButton().props('loading')).toBe(true);
+            expect(eventHub.$emit).toHaveBeenCalledWith(VALIDATE_INTEGRATION_FORM_EVENT);
+          });
         });
 
-        it('sets save button `disabled` prop to `true`', () => {
-          expect(findProjectSaveButton().props('disabled')).toBe(true);
-        });
-      });
+        describe('when form is valid', () => {
+          const mockTestPath = '/test';
 
-      describe.each`
-        scenario                                   | replyStatus                         | errorMessage  | expectToast                           | expectSentry
-        ${'when "test settings" request fails'}    | ${httpStatus.INTERNAL_SERVER_ERROR} | ${undefined}  | ${I18N_DEFAULT_ERROR_MESSAGE}         | ${true}
-        ${'when "test settings" returns an error'} | ${httpStatus.OK}                    | ${'an error'} | ${'an error'}                         | ${false}
-        ${'when "test settings" succeeds'}         | ${httpStatus.OK}                    | ${undefined}  | ${I18N_SUCCESSFUL_CONNECTION_MESSAGE} | ${false}
-      `('$scenario', ({ replyStatus, errorMessage, expectToast, expectSentry }) => {
-        beforeEach(async () => {
-          mockAxios.onPut(mockTestPath).replyOnce(replyStatus, {
-            error: Boolean(errorMessage),
-            message: errorMessage,
+          beforeEach(() => {
+            createComponent({
+              customStateProps: {
+                showActive: true,
+                canTest: true,
+                testPath: mockTestPath,
+              },
+              mountFn: mountExtended,
+            });
+            mockFormFunctions({ checkValidityReturn: true });
           });
 
-          await findTestButton().vm.$emit('click', new Event('click'));
-          await waitForPromises();
-        });
+          describe('buttons', () => {
+            beforeEach(async () => {
+              await findTestButton().vm.$emit('click', new Event('click'));
+            });
 
-        it(`calls toast with '${expectToast}'`, () => {
-          expect(mockToastShow).toHaveBeenCalledWith(expectToast);
-        });
+            it('sets test button `loading` prop to `true`', () => {
+              expect(findTestButton().props('loading')).toBe(true);
+            });
 
-        it('sets `loading` prop of test button to `false`', () => {
-          expect(findTestButton().props('loading')).toBe(false);
-        });
-
-        it('sets save button `disabled` prop to `false`', () => {
-          expect(findProjectSaveButton().props('disabled')).toBe(false);
-        });
+            it('sets save button `disabled` prop to `true`', () => {
+              expect(findProjectSaveButton().props('disabled')).toBe(true);
+            });
+          });
 
-        it(`${expectSentry ? 'does' : 'does not'} capture exception in Sentry`, () => {
-          expect(Sentry.captureException).toHaveBeenCalledTimes(expectSentry ? 1 : 0);
+          describe.each`
+            scenario                                   | replyStatus                         | errorMessage  | expectToast                           | expectSentry
+            ${'when "test settings" request fails'}    | ${httpStatus.INTERNAL_SERVER_ERROR} | ${undefined}  | ${I18N_DEFAULT_ERROR_MESSAGE}         | ${true}
+            ${'when "test settings" returns an error'} | ${httpStatus.OK}                    | ${'an error'} | ${'an error'}                         | ${false}
+            ${'when "test settings" succeeds'}         | ${httpStatus.OK}                    | ${undefined}  | ${I18N_SUCCESSFUL_CONNECTION_MESSAGE} | ${false}
+          `('$scenario', ({ replyStatus, errorMessage, expectToast, expectSentry }) => {
+            beforeEach(async () => {
+              mockAxios.onPut(mockTestPath).replyOnce(replyStatus, {
+                error: Boolean(errorMessage),
+                message: errorMessage,
+              });
+
+              await findTestButton().vm.$emit('click', new Event('click'));
+              await waitForPromises();
+            });
+
+            it(`calls toast with '${expectToast}'`, () => {
+              expect(mockToastShow).toHaveBeenCalledWith(expectToast);
+            });
+
+            it('sets `loading` prop of test button to `false`', () => {
+              expect(findTestButton().props('loading')).toBe(false);
+            });
+
+            it('sets save button `disabled` prop to `false`', () => {
+              expect(findProjectSaveButton().props('disabled')).toBe(false);
+            });
+
+            it(`${expectSentry ? 'does' : 'does not'} capture exception in Sentry`, () => {
+              expect(Sentry.captureException).toHaveBeenCalledTimes(expectSentry ? 1 : 0);
+            });
+          });
         });
       });
-    });
-  });
+    },
+  );
 
   describe('when `reset-confirmation-modal` emits `reset` event', () => {
     const mockResetPath = '/reset';

spec/helpers/integrations_helper_spec.rb

@@ -20,6 +20,12 @@ RSpec.describe IntegrationsHelper do
   end
 
   describe '#integration_form_data' do
+    before do
+      allow(helper).to receive_messages(
+        request: double(referer: '/services')
+      )
+    end
+
     let(:fields) do
       [
         :id,
@@ -39,7 +45,9 @@ RSpec.describe IntegrationsHelper do
         :cancel_path,
         :can_test,
         :test_path,
-        :reset_path
+        :reset_path,
+        :form_path,
+        :redirect_to
       ]
     end
 
@@ -61,6 +69,10 @@ RSpec.describe IntegrationsHelper do
       specify do
         expect(subject[:reset_path]).to eq(helper.scoped_reset_integration_path(integration))
       end
+
+      specify do
+        expect(subject[:redirect_to]).to eq('/services')
+      end
     end
 
     context 'Jira service' do

spec/views/projects/services/_form.haml_spec.rb

@@ -20,13 +20,33 @@ RSpec.describe 'projects/services/_form' do
     )
   end
 
-  context 'commit_events and merge_request_events' do
-    it 'display merge_request_events and commit_events descriptions' do
-      allow(Integrations::Redmine).to receive(:supported_events).and_return(%w(commit merge_request))
-
+  context 'integrations form' do
+    it 'does not render form element' do
       render
 
-      expect(rendered).to have_css("input[name='redirect_to'][value='/services']", count: 1, visible: false)
+      expect(rendered).not_to have_selector('[data-testid="integration-form"]')
+    end
+
+    context 'when vue_integration_form feature flag is disabled' do
+      before do
+        stub_feature_flags(vue_integration_form: false)
+      end
+
+      it 'renders form element' do
+        render
+
+        expect(rendered).to have_selector('[data-testid="integration-form"]')
+      end
+
+      context 'commit_events and merge_request_events' do
+        it 'display merge_request_events and commit_events descriptions' do
+          allow(Integrations::Redmine).to receive(:supported_events).and_return(%w(commit merge_request))
+
+          render
+
+          expect(rendered).to have_css("input[name='redirect_to'][value='/services']", count: 1, visible: false)
+        end
+      end
     end
   end
 end