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,80 +104,91 @@ export default {
       @change="setOverride"
     />
 
-    <active-checkbox v-if="propsSource.showActive" :key="`${currentKey}-active-checkbox`" />
-    <jira-trigger-fields
-      v-if="isJira"
-      :key="`${currentKey}-jira-trigger-fields`"
-      v-bind="propsSource.triggerFieldsProps"
-    />
-    <trigger-fields
-      v-else-if="propsSource.triggerEvents.length"
-      :key="`${currentKey}-trigger-fields`"
-      :events="propsSource.triggerEvents"
-      :type="propsSource.type"
-    />
-    <dynamic-field
-      v-for="field in propsSource.fields"
-      :key="`${currentKey}-${field.name}`"
-      v-bind="field"
-    />
-    <jira-issues-fields
-      v-if="showJiraIssuesFields"
-      :key="`${currentKey}-jira-issues-fields`"
-      v-bind="propsSource.jiraIssuesProps"
-    />
-    <div v-if="isEditable" class="footer-block row-content-block">
-      <template v-if="isInstanceOrGroupLevel">
-        <gl-button
-          v-gl-modal.confirmSaveIntegration
-          category="primary"
-          variant="success"
-          :loading="isSaving"
-          :disabled="isDisabled"
-          data-qa-selector="save_changes_button"
-        >
-          {{ __('Save changes') }}
-        </gl-button>
-        <confirmation-modal @submit="onSaveClick" />
-      </template>
-      <gl-button
-        v-else
-        category="primary"
-        variant="success"
-        type="submit"
-        :loading="isSaving"
-        :disabled="isDisabled"
-        data-qa-selector="save_changes_button"
-        @click.prevent="onSaveClick"
-      >
-        {{ __('Save changes') }}
-      </gl-button>
+    <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"
+          :key="`${currentKey}-jira-trigger-fields`"
+          v-bind="propsSource.triggerFieldsProps"
+        />
+        <trigger-fields
+          v-else-if="propsSource.triggerEvents.length"
+          :key="`${currentKey}-trigger-fields`"
+          :events="propsSource.triggerEvents"
+          :type="propsSource.type"
+        />
+        <dynamic-field
+          v-for="field in propsSource.fields"
+          :key="`${currentKey}-${field.name}`"
+          v-bind="field"
+        />
+        <jira-issues-fields
+          v-if="showJiraIssuesFields"
+          :key="`${currentKey}-jira-issues-fields`"
+          v-bind="propsSource.jiraIssuesProps"
+        />
+        <div v-if="isEditable" class="footer-block row-content-block">
+          <template v-if="isInstanceOrGroupLevel">
+            <gl-button
+              v-gl-modal.confirmSaveIntegration
+              category="primary"
+              variant="success"
+              :loading="isSaving"
+              :disabled="isDisabled"
+              data-qa-selector="save_changes_button"
+            >
+              {{ __('Save changes') }}
+            </gl-button>
+            <confirmation-modal @submit="onSaveClick" />
+          </template>
+          <gl-button
+            v-else
+            category="primary"
+            variant="success"
+            type="submit"
+            :loading="isSaving"
+            :disabled="isDisabled"
+            data-qa-selector="save_changes_button"
+            @click.prevent="onSaveClick"
+          >
+            {{ __('Save changes') }}
+          </gl-button>
 
-      <gl-button
-        v-if="propsSource.canTest"
-        :loading="isTesting"
-        :disabled="isDisabled"
-        :href="propsSource.testPath"
-        @click.prevent="onTestClick"
-      >
-        {{ __('Test settings') }}
-      </gl-button>
+          <gl-button
+            v-if="propsSource.canTest"
+            :loading="isTesting"
+            :disabled="isDisabled"
+            :href="propsSource.testPath"
+            @click.prevent="onTestClick"
+          >
+            {{ __('Test settings') }}
+          </gl-button>
 
-      <template v-if="showReset">
-        <gl-button
-          v-gl-modal.confirmResetIntegration
-          category="secondary"
-          variant="default"
-          :loading="isResetting"
-          :disabled="isDisabled"
-          data-testid="reset-button"
-        >
-          {{ __('Reset') }}
-        </gl-button>
-        <reset-confirmation-modal @reset="onResetClick" />
-      </template>
+          <template v-if="showReset">
+            <gl-button
+              v-gl-modal.confirmResetIntegration
+              category="secondary"
+              variant="default"
+              :loading="isResetting"
+              :disabled="isDisabled"
+              data-testid="reset-button"
+            >
+              {{ __('Reset') }}
+            </gl-button>
+            <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|
-      = render 'shared/service_settings', form: form, integration: @service
-      %input{ id: 'services_redirect_to', type: 'hidden', name: 'redirect_to', value: request.referrer }
+= 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 }
 
 - if lookup_context.template_exists?('show', "projects/services/#{@service.to_param}", true)
   %hr

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|
-      = render 'shared/service_settings', form: form, integration: integration
+= 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