diff --git a/app/assets/javascripts/integrations/edit/components/integration_form.vue b/app/assets/javascripts/integrations/edit/components/integration_form.vue
index f119668048db46517541a3389e925251a1637d32..70ce5c8d09950a466ffce50176359dd2fcf85b14 100644
--- a/app/assets/javascripts/integrations/edit/components/integration_form.vue
+++ b/app/assets/javascripts/integrations/edit/components/integration_form.vue
@@ -217,29 +217,24 @@ export default {
@change="setOverride"
/>
- <section v-if="showHelpHtml" class="gl-lg-display-flex gl-justify-content-end gl-mb-6">
+ <!-- helpHtml is trusted input -->
+ <section v-if="showHelpHtml" class="gl-mb-6">
<!-- helpHtml is trusted input -->
- <div
- v-safe-html:[$options.helpHtmlConfig]="helpHtml"
- data-testid="help-html"
- class="gl-flex-basis-two-thirds"
- ></div>
+ <div v-safe-html:[$options.helpHtmlConfig]="helpHtml" data-testid="help-html"></div>
</section>
- <section v-if="!hasSections" class="gl-lg-display-flex gl-justify-content-end">
- <div class="gl-flex-basis-two-thirds">
- <active-checkbox
- v-if="propsSource.showActive"
- :key="`${currentKey}-active-checkbox`"
- @toggle-integration-active="onToggleIntegrationState"
- />
- <trigger-fields
- v-if="propsSource.triggerEvents.length"
- :key="`${currentKey}-trigger-fields`"
- :events="propsSource.triggerEvents"
- :type="propsSource.type"
- />
- </div>
+ <section v-if="!hasSections">
+ <active-checkbox
+ v-if="propsSource.showActive"
+ :key="`${currentKey}-active-checkbox`"
+ @toggle-integration-active="onToggleIntegrationState"
+ />
+ <trigger-fields
+ v-if="propsSource.triggerEvents.length"
+ :key="`${currentKey}-trigger-fields`"
+ :events="propsSource.triggerEvents"
+ :type="propsSource.type"
+ />
</section>
<template v-if="hasSections">
@@ -254,22 +249,19 @@ export default {
/>
</template>
- <section v-if="hasFieldsWithoutSection" class="gl-lg-display-flex gl-justify-content-end">
- <div class="gl-flex-basis-two-thirds">
- <dynamic-field
- v-for="field in fieldsWithoutSection"
- :key="`${currentKey}-${field.name}`"
- v-bind="field"
- :is-validated="isValidated"
- :data-qa-selector="`${field.name}_div`"
- />
- </div>
+ <section v-if="hasFieldsWithoutSection">
+ <dynamic-field
+ v-for="field in fieldsWithoutSection"
+ :key="`${currentKey}-${field.name}`"
+ v-bind="field"
+ :is-validated="isValidated"
+ :data-qa-selector="`${field.name}_div`"
+ />
</section>
<integration-form-actions
v-if="isEditable"
:has-sections="hasSections"
- :class="{ 'gl-lg-display-flex gl-justify-content-end': !hasSections }"
:is-saving="isSaving"
:is-testing="isTesting"
:is-resetting="isResetting"
diff --git a/app/assets/javascripts/integrations/edit/components/integration_form_actions.vue b/app/assets/javascripts/integrations/edit/components/integration_form_actions.vue
index e5ad5149cf7a702467aa79e1503e638ccdb24947..a9d73caf94bbd42ed3009b51d3617d5b3fb0e8c2 100644
--- a/app/assets/javascripts/integrations/edit/components/integration_form_actions.vue
+++ b/app/assets/javascripts/integrations/edit/components/integration_form_actions.vue
@@ -69,75 +69,69 @@ export default {
};
</script>
<template>
- <section>
- <div :class="{ 'gl-flex-basis-two-thirds': !hasSections }">
- <div
- class="footer-block row-content-block gl-lg-display-flex gl-justify-content-space-between"
+ <section class="gl-lg-display-flex gl-justify-content-space-between">
+ <div>
+ <template v-if="isInstanceOrGroupLevel">
+ <gl-button
+ v-gl-modal.confirmSaveIntegration
+ category="primary"
+ variant="confirm"
+ :loading="isSaving"
+ :disabled="disableButtons"
+ data-testid="save-button"
+ data-qa-selector="save_changes_button"
+ >
+ {{ __('Save changes') }}
+ </gl-button>
+ <confirmation-modal @submit="onSaveClick" />
+ </template>
+ <gl-button
+ v-else
+ category="primary"
+ variant="confirm"
+ type="submit"
+ :loading="isSaving"
+ :disabled="disableButtons"
+ data-testid="save-button"
+ data-qa-selector="save_changes_button"
+ @click.prevent="onSaveClick"
>
- <div>
- <template v-if="isInstanceOrGroupLevel">
- <gl-button
- v-gl-modal.confirmSaveIntegration
- category="primary"
- variant="confirm"
- :loading="isSaving"
- :disabled="disableButtons"
- data-testid="save-button"
- data-qa-selector="save_changes_button"
- >
- {{ __('Save changes') }}
- </gl-button>
- <confirmation-modal @submit="onSaveClick" />
- </template>
- <gl-button
- v-else
- category="primary"
- variant="confirm"
- type="submit"
- :loading="isSaving"
- :disabled="disableButtons"
- data-testid="save-button"
- data-qa-selector="save_changes_button"
- @click.prevent="onSaveClick"
- >
- {{ __('Save changes') }}
- </gl-button>
+ {{ __('Save changes') }}
+ </gl-button>
- <gl-button
- v-if="showTestButton"
- category="secondary"
- variant="confirm"
- :loading="isTesting"
- :disabled="disableButtons"
- data-testid="test-button"
- @click.prevent="onTestClick"
- >
- {{ __('Test settings') }}
- </gl-button>
+ <gl-button
+ v-if="showTestButton"
+ category="secondary"
+ variant="confirm"
+ :loading="isTesting"
+ :disabled="disableButtons"
+ data-testid="test-button"
+ @click.prevent="onTestClick"
+ >
+ {{ __('Test settings') }}
+ </gl-button>
- <gl-button
- :href="propsSource.cancelPath"
- data-testid="cancel-button"
- :disabled="disableButtons"
- >{{ __('Cancel') }}</gl-button
- >
- </div>
+ <gl-button
+ :href="propsSource.cancelPath"
+ data-testid="cancel-button"
+ :disabled="disableButtons"
+ >{{ __('Cancel') }}</gl-button
+ >
+ </div>
- <template v-if="showResetButton">
- <gl-button
- v-gl-modal.confirmResetIntegration
- category="tertiary"
- variant="danger"
- :loading="isResetting"
- :disabled="disableButtons"
- data-testid="reset-button"
- >
- {{ __('Reset') }}
- </gl-button>
+ <template v-if="showResetButton">
+ <gl-button
+ v-gl-modal.confirmResetIntegration
+ category="tertiary"
+ variant="danger"
+ :loading="isResetting"
+ :disabled="disableButtons"
+ data-testid="reset-button"
+ >
+ {{ __('Reset') }}
+ </gl-button>
- <reset-confirmation-modal @reset="onResetClick" />
- </template>
- </div>
- </div>
+ <reset-confirmation-modal @reset="onResetClick" />
+ </template>
</section>
</template>
diff --git a/app/assets/javascripts/integrations/edit/components/integration_forms/section.vue b/app/assets/javascripts/integrations/edit/components/integration_forms/section.vue
index 5335b7b6ee2c491bbcb51d20f21b45e1c9c5808e..85897652d34900ba5ad71d56b025f38a8b4a7c3f 100644
--- a/app/assets/javascripts/integrations/edit/components/integration_forms/section.vue
+++ b/app/assets/javascripts/integrations/edit/components/integration_forms/section.vue
@@ -63,36 +63,29 @@ export default {
};
</script>
<template>
- <section class="gl-lg-display-flex">
- <div class="gl-flex-basis-third gl-mr-4">
- <h4 class="gl-mt-0">
- {{ section.title
- }}<gl-badge
- v-if="section.plan"
- :href="propsSource.aboutPricingUrl"
- target="_blank"
- rel="noopener noreferrer"
- variant="tier"
- icon="license"
- class="gl-ml-3"
- >
- {{ $options.billingPlanNames[section.plan] }}
- </gl-badge>
- </h4>
- <p v-safe-html="section.description"></p>
- </div>
+ <section>
+ <h4 class="gl-mt-0">
+ {{ section.title
+ }}<gl-badge
+ v-if="section.plan"
+ :href="propsSource.aboutPricingUrl"
+ target="_blank"
+ rel="noopener noreferrer"
+ variant="tier"
+ icon="license"
+ class="gl-ml-3"
+ >
+ {{ $options.billingPlanNames[section.plan] }}
+ </gl-badge>
+ </h4>
+ <p v-safe-html="section.description"></p>
- <div
- v-if="$options.integrationFormSectionComponents[section.type]"
- class="gl-flex-basis-two-thirds"
- >
- <component
- :is="$options.integrationFormSectionComponents[section.type]"
- :fields="fieldsForSection(section)"
- :is-validated="isValidated"
- @toggle-integration-active="$emit('toggle-integration-active', $event)"
- @request-jira-issue-types="$emit('request-jira-issue-types', $event)"
- />
- </div>
+ <component
+ :is="$options.integrationFormSectionComponents[section.type]"
+ :fields="fieldsForSection(section)"
+ :is-validated="isValidated"
+ @toggle-integration-active="$emit('toggle-integration-active', $event)"
+ @request-jira-issue-types="$emit('request-jira-issue-types', $event)"
+ />
</section>
</template>
diff --git a/app/views/projects/settings/integrations/_form.html.haml b/app/views/projects/settings/integrations/_form.html.haml
index 39dfd4107279c250a8ec0312b49afbb180591157..97c7729de44c473891650b824bc01410ec34a759 100644
--- a/app/views/projects/settings/integrations/_form.html.haml
+++ b/app/views/projects/settings/integrations/_form.html.haml
@@ -14,10 +14,10 @@
- if integration.to_param === 'slack'
= render 'shared/integrations/slack_notifications_deprecation_alert'
-%h2.gl-mb-4
+%h2.gl-mb-0.gl-display-flex.gl-align-items-center.gl-gap-3
= integration.title
- if integration.operating?
- = sprite_icon('check', css_class: 'gl-text-green-500')
+ = render Pajamas::BadgeComponent.new(s_('FeatureFlags|Active'), variant: 'success')
= render 'shared/integration_settings', integration: integration
- if lookup_context.template_exists?('show', "shared/integrations/#{integration.to_param}", true)