Merge branch 'integrations-one-column-jmiocene' into 'master'

Change integration two-column layout to one-column

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/126977



Merged-by: Justin Ho Tuan Duong <hduong@gitlab.com>
Approved-by: Stanislav Lashmanov <slashmanov@gitlab.com>
Approved-by: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Approved-by: Justin Ho Tuan Duong <hduong@gitlab.com>
Reviewed-by: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Reviewed-by: Coung Ngo <cngo@gitlab.com>
Reviewed-by: Justin Ho Tuan Duong <hduong@gitlab.com>
Co-authored-by: Julia Miocene <jmiocene@gitlab.com>

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"

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>

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>

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)