Move integrations settings layout to Vue

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

@@ -95,10 +95,7 @@ export default {
 </script>
 
 <template>
-  <div>
-    <!-- helpHtml is trusted input -->
-    <div v-if="helpHtml" v-safe-html:[$options.helpHtmlConfig]="helpHtml"></div>
-
+  <div class="gl-mb-3">
     <override-dropdown
       v-if="defaultState !== null"
       :inherit-from-id="defaultState.id"
@@ -107,6 +104,13 @@ export default {
       @change="setOverride"
     />
 
+    <div class="row">
+      <div class="col-lg-4"></div>
+
+      <div class="col-lg-8">
+        <!-- helpHtml is trusted input -->
+        <div v-if="helpHtml" v-safe-html:[$options.helpHtmlConfig]="helpHtml"></div>
+
         <active-checkbox v-if="propsSource.showActive" :key="`${currentKey}-active-checkbox`" />
         <jira-trigger-fields
           v-if="isJira"
@@ -180,7 +184,11 @@ export default {
             <reset-confirmation-modal @reset="onResetClick" />
           </template>
 
-      <gl-button class="btn-cancel" :href="propsSource.cancelPath">{{ __('Cancel') }}</gl-button>
+          <gl-button class="btn-cancel" :href="propsSource.cancelPath">{{
+            __('Cancel')
+          }}</gl-button>
+        </div>
+      </div>
     </div>
   </div>
 </template>

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

 - if lookup_context.template_exists?('top', "projects/services/#{@service.to_param}", true)
   = render "projects/services/#{@service.to_param}/top"
 
-%h3.page-title.gl-mt-3
+%h3.page-title
   = @service.title
   - if @service.operating?
     = sprite_icon('check', css_class: 'gl-text-green-500')
 
-.row.gl-mb-3
-  .col-lg-4
-    - if @service.respond_to?(:detailed_description)
-      %p= @service.detailed_description
-  .col-lg-8
-    = form_for(@service, as: :service, url: scoped_integration_path(@service), method: :put, html: { class: 'gl-show-field-errors integration-settings-form js-integration-settings-form', data: { 'test-url' => test_project_service_path(@project, @service) } }) do |form|
+= form_for(@service, as: :service, url: scoped_integration_path(@service), method: :put, html: { class: 'gl-show-field-errors integration-settings-form js-integration-settings-form', data: { 'test-url' => test_project_service_path(@project, @service) } }) do |form|
   = render 'shared/service_settings', form: form, integration: @service
   %input{ id: 'services_redirect_to', type: 'hidden', name: 'redirect_to', value: request.referrer }
 

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

 - integration = local_assigns.fetch(:integration)
 
-%h3.page-title.gl-mt-3
+%h3.page-title
   = integration.title
 
-.row
-  .col-lg-4
-  .col-lg-8
-    = form_for integration, as: :service, url: scoped_integration_path(integration), method: :put, html: { class: 'gl-show-field-errors integration-settings-form js-integration-settings-form', data: { 'test-url' => scoped_test_integration_path(integration) } } do |form|
+= form_for integration, as: :service, url: scoped_integration_path(integration), method: :put, html: { class: 'gl-show-field-errors integration-settings-form js-integration-settings-form', data: { 'test-url' => scoped_test_integration_path(integration) } } do |form|
   = render 'shared/service_settings', form: form, integration: integration