From 7caa2a849c1847177e1cd2b0bbd981c67a65a7c1 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Thu, 16 Jan 2025 11:23:52 +0100
Subject: [PATCH] Integrations detail page: Migrations and small visual fixes

Migrates the page header to the PageHeading component, changes
the size of the Avatar to match the one we use on projects &
groups and fixes some spacing and alignments with form actions.

Changelog: changed
---
 .../components/integration_form_actions.vue   |  4 +--
 .../edit/components/override_dropdown.vue     | 15 +++++------
 .../edit/components/trigger_fields.vue        |  3 +--
 app/views/projects/_home_panel.html.haml      |  2 +-
 .../settings/integrations/_form.html.haml     | 17 ++++++------
 app/views/shared/integrations/edit.html.haml  |  9 ++++---
 .../configuration_instructions.vue            | 14 +++++-----
 .../edit/components/google_cloud_iam/form.vue |  8 +++---
 .../google_cloud_iam/manual_setup.vue         | 21 ++++++++-------
 .../google_cloud_iam/setup_script.vue         |  8 +++---
 .../sections/google_artifact_management.vue   | 27 ++++++++++---------
 .../configuration_instructions_spec.js        |  4 ++-
 .../components/google_cloud_iam/form_spec.js  |  2 +-
 .../google_artifact_management_spec.js        |  4 ++-
 .../edit/components/override_dropdown_spec.js |  2 +-
 15 files changed, 72 insertions(+), 68 deletions(-)

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 2fc033c5d4dac3..4602cdf530d5d7 100644
--- a/app/assets/javascripts/integrations/edit/components/integration_form_actions.vue
+++ b/app/assets/javascripts/integrations/edit/components/integration_form_actions.vue
@@ -74,8 +74,8 @@ export default {
 };
 </script>
 <template>
-  <section class="gl-justify-between lg:gl-flex">
-    <div>
+  <section class="gl-flex gl-flex-wrap gl-justify-between gl-gap-3">
+    <div class="gl-flex gl-flex-wrap gl-gap-3">
       <template v-if="isInstanceOrGroupLevel">
         <gl-button
           v-gl-modal.confirmSaveIntegration
diff --git a/app/assets/javascripts/integrations/edit/components/override_dropdown.vue b/app/assets/javascripts/integrations/edit/components/override_dropdown.vue
index bb7f212180272d..6ed6677c4a0805 100644
--- a/app/assets/javascripts/integrations/edit/components/override_dropdown.vue
+++ b/app/assets/javascripts/integrations/edit/components/override_dropdown.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlCollapsibleListbox, GlLink } from '@gitlab/ui';
+import { GlCard, GlCollapsibleListbox, GlLink } from '@gitlab/ui';
 // eslint-disable-next-line no-restricted-imports
 import { mapState } from 'vuex';
 import { s__ } from '~/locale';
@@ -20,6 +20,7 @@ export default {
   dropdownOptions,
   name: 'OverrideDropdown',
   components: {
+    GlCard,
     GlCollapsibleListbox,
     GlLink,
   },
@@ -66,14 +67,12 @@ export default {
 </script>
 
 <template>
-  <div
-    class="gl-mb-6 gl-mt-5 gl-flex gl-items-baseline gl-justify-between gl-border-b-1 gl-border-t-1 gl-border-default gl-py-4 gl-border-b-solid gl-border-t-solid"
-  >
+  <gl-card body-class="gl-flex gl-flex-wrap gl-gap-3 gl-items-center gl-justify-between">
     <span
       >{{ description }}
-      <gl-link v-if="learnMorePath" :href="learnMorePath" target="_blank">{{
-        __('Learn more')
-      }}</gl-link>
+      <gl-link v-if="learnMorePath" :href="learnMorePath" target="_blank"
+        >{{ __('Learn more') }}.</gl-link
+      >
     </span>
     <input name="service[inherit_from_id]" :value="override ? '' : inheritFromId" type="hidden" />
     <gl-collapsible-listbox
@@ -82,5 +81,5 @@ export default {
       :items="$options.dropdownOptions"
       @select="onSelect"
     />
-  </div>
+  </gl-card>
 </template>
diff --git a/app/assets/javascripts/integrations/edit/components/trigger_fields.vue b/app/assets/javascripts/integrations/edit/components/trigger_fields.vue
index 96ce95856c96e4..76dd3cdc72d330 100644
--- a/app/assets/javascripts/integrations/edit/components/trigger_fields.vue
+++ b/app/assets/javascripts/integrations/edit/components/trigger_fields.vue
@@ -41,12 +41,11 @@ export default {
 
 <template>
   <gl-form-group
-    class="gl-pt-3"
     :label="__('Trigger')"
     label-for="trigger-fields"
     data-testid="trigger-fields-group"
   >
-    <div id="trigger-fields" class="gl-pt-3">
+    <div id="trigger-fields">
       <gl-form-group v-for="event in events" :key="event.name" :description="event.description">
         <input :name="checkboxName(event.name)" type="hidden" :value="event.value || false" />
         <gl-form-checkbox v-model="event.value" :disabled="isInheriting">
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index cb5fc64cd58404..debfeea86d0295 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -3,7 +3,7 @@
 %header.project-home-panel.js-show-on-project-root.gl-mt-5{ class: [("empty-project" if empty_repo)] }
   .gl-flex.gl-justify-between.gl-flex-wrap.gl-flex-col.md:gl-flex-row.gl-gap-5
     .home-panel-title-row.gl-flex.gl-items-center
-      = render Pajamas::AvatarComponent.new(@project, alt: @project.name, class: 'gl-self-start gl-shrink-0 gl-mr-3', size: 48, avatar_options: { itemprop: 'image' })
+      = render Pajamas::AvatarComponent.new(@project, alt: @project.name, class: 'gl-self-start gl-shrink-0 gl-mr-4', size: 48, avatar_options: { itemprop: 'image' })
       %h1.home-panel-title.gl-heading-1.gl-flex.gl-items-center.gl-flex-wrap.gl-gap-3.gl-break-anywhere.gl-mb-0{ data: { testid: 'project-name-content' }, itemprop: 'name' }
         = @project.name
         = visibility_level_content(@project, css_class: 'visibility-icon gl-inline-flex gl-fill-icon-subtle', icon_css_class: 'icon')
diff --git a/app/views/projects/settings/integrations/_form.html.haml b/app/views/projects/settings/integrations/_form.html.haml
index 4c274a6094007c..2da5315b7f7c44 100644
--- a/app/views/projects/settings/integrations/_form.html.haml
+++ b/app/views/projects/settings/integrations/_form.html.haml
@@ -14,14 +14,15 @@
 - if integration.to_param === 'slack'
   = render 'shared/integrations/slack_notifications_deprecation_alert'
 
-.gl-flex.gl-items-center.gl-gap-3
-  = render Pajamas::AvatarComponent.new(integration, size: 64, alt: '')
-  %h2.gl-m-0
-    = integration.title
-    - if integration.operating?
-      = render Pajamas::BadgeComponent.new(_('Active'), variant: 'success', icon: 'status-success')
-    - elsif integration.persisted?
-      = render Pajamas::BadgeComponent.new(_('Inactive'), variant: 'neutral', icon: 'status-paused')
+= render ::Layouts::PageHeadingComponent.new(@integration.title) do |c|
+  - c.with_heading do
+    .gl-flex.gl-items-center.gl-gap-4
+      = render Pajamas::AvatarComponent.new(integration, size: 48, alt: '')
+      = integration.title
+      - if integration.operating?
+        = render Pajamas::BadgeComponent.new(_('Active'), variant: 'success', icon: 'status-success', class: 'gl-pl-2')
+      - elsif integration.persisted?
+        = render Pajamas::BadgeComponent.new(_('Inactive'), variant: 'neutral', icon: 'status-paused', class: 'gl-pl-2')
 
 = render 'shared/integration_settings', integration: integration
 - if lookup_context.template_exists?('show', "shared/integrations/#{integration.to_param}", true)
diff --git a/app/views/shared/integrations/edit.html.haml b/app/views/shared/integrations/edit.html.haml
index 278014611197fd..98ea676c7e2ced 100644
--- a/app/views/shared/integrations/edit.html.haml
+++ b/app/views/shared/integrations/edit.html.haml
@@ -2,10 +2,11 @@
 - breadcrumb_title @integration.title
 - page_title @integration.title, _('Integrations')
 
-.gl-flex.gl-items-center.gl-gap-3.gl-mt-5
-  = render Pajamas::AvatarComponent.new(@integration, size: 64, alt: '')
-  %h2.gl-m-0
-    = @integration.title
+= render ::Layouts::PageHeadingComponent.new(@integration.title) do |c|
+  - c.with_heading do
+    .gl-flex.gl-items-center.gl-gap-4
+      = render Pajamas::AvatarComponent.new(@integration, size: 48, alt: '')
+      = @integration.title
 
 = render 'shared/integrations/tabs', integration: @integration, active_tab: 'edit' do
   = render 'shared/integration_settings', integration: @integration
diff --git a/ee/app/assets/javascripts/integrations/edit/components/google_artifact_management/configuration_instructions.vue b/ee/app/assets/javascripts/integrations/edit/components/google_artifact_management/configuration_instructions.vue
index e7c8487cd9df92..6d27bba69a32f4 100644
--- a/ee/app/assets/javascripts/integrations/edit/components/google_artifact_management/configuration_instructions.vue
+++ b/ee/app/assets/javascripts/integrations/edit/components/google_artifact_management/configuration_instructions.vue
@@ -5,6 +5,7 @@ import { GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import CodeBlockHighlighted from '~/vue_shared/components/code_block_highlighted.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import SettingsSection from '~/vue_shared/components/settings/settings_section.vue';
 
 export default {
   components: {
@@ -13,6 +14,7 @@ export default {
     GlIcon,
     GlLink,
     GlSprintf,
+    SettingsSection,
   },
   props: {
     id: {
@@ -62,11 +64,8 @@ gcloud projects add-iam-policy-binding ${this.googleCloudProjectId} \\
 </script>
 
 <template>
-  <div class="gl-mb-5">
-    <h3>
-      {{ s__('GoogleArtifactRegistry|2. Set up permissions') }}
-    </h3>
-    <p>
+  <settings-section :heading="s__('GoogleArtifactRegistry|2. Set up permissions')">
+    <template #description>
       <gl-sprintf
         :message="
           s__(
@@ -89,7 +88,8 @@ gcloud projects add-iam-policy-binding ${this.googleCloudProjectId} \\
           </gl-link>
         </template>
       </gl-sprintf>
-    </p>
+    </template>
+
     <ol>
       <li>
         <gl-sprintf
@@ -175,5 +175,5 @@ gcloud projects add-iam-policy-binding ${this.googleCloudProjectId} \\
         </gl-sprintf>
       </li>
     </ol>
-  </div>
+  </settings-section>
 </template>
diff --git a/ee/app/assets/javascripts/integrations/edit/components/google_cloud_iam/form.vue b/ee/app/assets/javascripts/integrations/edit/components/google_cloud_iam/form.vue
index 3867d8930a59e6..4a14b9f78f21c1 100644
--- a/ee/app/assets/javascripts/integrations/edit/components/google_cloud_iam/form.vue
+++ b/ee/app/assets/javascripts/integrations/edit/components/google_cloud_iam/form.vue
@@ -49,7 +49,7 @@ export default {
 
 <template>
   <div>
-    <h4 class="gl-mt-0">{{ s__('GoogleCloud|Google Cloud project') }}</h4>
+    <h3 class="gl-heading-3 gl-mt-6">{{ s__('GoogleCloud|Google Cloud project') }}</h3>
     <p>
       <gl-sprintf
         :message="
@@ -72,11 +72,11 @@ export default {
     <configuration
       :fields="gcProjectFields"
       field-class="gl-grow gl-basis-0"
-      class="gl-mb-6 gl-flex-row gl-gap-5 md:gl-flex"
+      class="gl-mb-4 gl-flex-row gl-gap-5 md:gl-flex"
       v-on="$listeners"
     />
 
-    <h4 class="gl-mt-0">{{ s__('GoogleCloud|Workload identity federation') }}</h4>
+    <h3 class="gl-heading-3">{{ s__('GoogleCloud|Workload identity federation') }}</h3>
     <p>
       <gl-sprintf :message="avoidCollisionMessage">
         <template #suggested>
@@ -91,7 +91,5 @@ export default {
       class="gl-mb-6 gl-flex-row gl-gap-5 md:gl-flex"
       v-on="$listeners"
     />
-
-    <hr />
   </div>
 </template>
diff --git a/ee/app/assets/javascripts/integrations/edit/components/google_cloud_iam/manual_setup.vue b/ee/app/assets/javascripts/integrations/edit/components/google_cloud_iam/manual_setup.vue
index 659ab674535ab2..df5780d1cb7807 100644
--- a/ee/app/assets/javascripts/integrations/edit/components/google_cloud_iam/manual_setup.vue
+++ b/ee/app/assets/javascripts/integrations/edit/components/google_cloud_iam/manual_setup.vue
@@ -4,6 +4,7 @@ import { __ } from '~/locale';
 import { helpPagePath } from '~/helpers/help_page_helper';
 
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import SettingsSection from '~/vue_shared/components/settings/settings_section.vue';
 
 export default {
   components: {
@@ -14,6 +15,7 @@ export default {
     GlSprintf,
     InviteMembersTrigger: () => import('~/invite_members/components/invite_members_trigger.vue'),
     ClipboardButton,
+    SettingsSection,
   },
   props: {
     wlifIssuer: {
@@ -52,15 +54,14 @@ export default {
 </script>
 
 <template>
-  <div class="gl-mb-4">
-    <h3>{{ s__('GoogleCloud|1. Connection') }}</h3>
-    <p>
-      {{
-        s__(
-          'GoogleCloud|To connect to a Google Cloud project, it must have a specific configuration of workload identity federation that you can set up in the next step. To improve security, the project should be just for identity management.',
-        )
-      }}
-    </p>
+  <settings-section
+    :heading="s__('GoogleCloud|1. Connection')"
+    :description="
+      s__(
+        'GoogleCloud|To connect to a Google Cloud project, it must have a specific configuration of workload identity federation that you can set up in the next step. To improve security, the project should be just for identity management.',
+      )
+    "
+  >
     <gl-button variant="link" @click="toggleModal">
       {{ s__('GoogleCloud|What if I cannot manage workload identity federation in Google Cloud?') }}
     </gl-button>
@@ -159,5 +160,5 @@ export default {
         </li>
       </ol>
     </gl-modal>
-  </div>
+  </settings-section>
 </template>
diff --git a/ee/app/assets/javascripts/integrations/edit/components/google_cloud_iam/setup_script.vue b/ee/app/assets/javascripts/integrations/edit/components/google_cloud_iam/setup_script.vue
index 734ea820d7b4bd..fd1cf2c0a32745 100644
--- a/ee/app/assets/javascripts/integrations/edit/components/google_cloud_iam/setup_script.vue
+++ b/ee/app/assets/javascripts/integrations/edit/components/google_cloud_iam/setup_script.vue
@@ -4,6 +4,7 @@ import { GlAlert, GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import CodeBlockHighlighted from '~/vue_shared/components/code_block_highlighted.vue';
+import SettingsSection from '~/vue_shared/components/settings/settings_section.vue';
 
 export default {
   components: {
@@ -13,6 +14,7 @@ export default {
     GlSprintf,
     ClipboardButton,
     CodeBlockHighlighted,
+    SettingsSection,
   },
   props: {
     wlifIssuer: {
@@ -66,9 +68,7 @@ gcloud iam workload-identity-pools providers create-oidc "${this.identityProvide
 </script>
 
 <template>
-  <div>
-    <h3>{{ s__('GoogleCloud|2. Set up workload identity federation') }}</h3>
-
+  <settings-section :heading="s__('GoogleCloud|2. Set up workload identity federation')">
     <gl-alert :dismissible="false">
       <gl-sprintf
         :message="
@@ -150,5 +150,5 @@ gcloud iam workload-identity-pools providers create-oidc "${this.identityProvide
         </gl-sprintf>
       </li>
     </ol>
-  </div>
+  </settings-section>
 </template>
diff --git a/ee/app/assets/javascripts/integrations/edit/components/sections/google_artifact_management.vue b/ee/app/assets/javascripts/integrations/edit/components/sections/google_artifact_management.vue
index e47c68039b239a..cea0d809d1a27e 100644
--- a/ee/app/assets/javascripts/integrations/edit/components/sections/google_artifact_management.vue
+++ b/ee/app/assets/javascripts/integrations/edit/components/sections/google_artifact_management.vue
@@ -6,6 +6,7 @@ import Configuration from '~/integrations/edit/components/sections/configuration
 import Connection from '~/integrations/edit/components/sections/connection.vue';
 import ConfigurationInstructions from 'ee/integrations/edit/components/google_artifact_management/configuration_instructions.vue';
 import EmptyState from 'ee/integrations/edit/components/google_artifact_management/empty_state.vue';
+import SettingsSection from '~/vue_shared/components/settings/settings_section.vue';
 
 const PROJECT_ID_FIELD_NAME = 'artifact_registry_project_id';
 
@@ -17,6 +18,7 @@ export default {
     Connection,
     EmptyState,
     GlButton,
+    SettingsSection,
   },
   props: {
     isValidated: {
@@ -71,7 +73,7 @@ export default {
 <template>
   <div v-if="editable">
     <template v-if="operating">
-      <div class="gl-flex gl-gap-3">
+      <div class="gl-border-b gl-mb-6 gl-flex gl-gap-3 gl-pb-6">
         <gl-button
           :href="artifactRegistryPath"
           icon="deployments"
@@ -81,23 +83,22 @@ export default {
           {{ s__('GoogleArtifactRegistry|View artifacts') }}
         </gl-button>
       </div>
-      <hr />
     </template>
     <connection @toggle-integration-active="$emit('toggle-integration-active', $event)" />
-    <h3 class="gl-mt-0">{{ s__('GoogleArtifactRegistry|1. Repository') }}</h3>
-    <p>
-      {{
+    <settings-section
+      :heading="s__('GoogleArtifactRegistry|1. Repository')"
+      :description="
         s__(
           'GoogleArtifactRegistry|To improve security, use a Google Cloud project for resources only, separate from CI/CD and identity management projects.',
         )
-      }}
-    </p>
-    <configuration
-      :fields="dynamicFields"
-      :is-validated="isValidated"
-      @update="updateGoogleCloudProjectId"
-    />
-    <hr />
+      "
+    >
+      <configuration
+        :fields="dynamicFields"
+        :is-validated="isValidated"
+        @update="updateGoogleCloudProjectId"
+      />
+    </settings-section>
     <configuration-instructions :id="derivedGoogleCloudProjectId" />
   </div>
   <empty-state v-else :path="workloadIdentityFederationPath" />
diff --git a/ee/spec/frontend/integrations/edit/components/google_artifact_management/configuration_instructions_spec.js b/ee/spec/frontend/integrations/edit/components/google_artifact_management/configuration_instructions_spec.js
index d4630f4f21d275..35ccd4e3c3f503 100644
--- a/ee/spec/frontend/integrations/edit/components/google_artifact_management/configuration_instructions_spec.js
+++ b/ee/spec/frontend/integrations/edit/components/google_artifact_management/configuration_instructions_spec.js
@@ -4,12 +4,13 @@ import ConfigurationInstructions from 'ee/integrations/edit/components/google_ar
 import CodeBlockHighlighted from '~/vue_shared/components/code_block_highlighted.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import { createStore } from '~/integrations/edit/store';
+import SettingsSection from '~/vue_shared/components/settings/settings_section.vue';
 import { mockIntegrationProps } from '../../mock_data';
 
 describe('ConfigurationInstructions', () => {
   let wrapper;
 
-  const findHeader = () => wrapper.find('h3');
+  const findHeader = () => wrapper.find('h2');
   const findCodeBlockHighlighted = () => wrapper.findComponent(CodeBlockHighlighted);
   const findClipboardButton = () => wrapper.findComponent(ClipboardButton);
   const findLinks = () => wrapper.findAllComponents(GlLink);
@@ -26,6 +27,7 @@ describe('ConfigurationInstructions', () => {
       store,
       stubs: {
         GlSprintf,
+        SettingsSection,
       },
     });
   };
diff --git a/ee/spec/frontend/integrations/edit/components/google_cloud_iam/form_spec.js b/ee/spec/frontend/integrations/edit/components/google_cloud_iam/form_spec.js
index 305cf4f24e723e..0aed52db7a22d7 100644
--- a/ee/spec/frontend/integrations/edit/components/google_cloud_iam/form_spec.js
+++ b/ee/spec/frontend/integrations/edit/components/google_cloud_iam/form_spec.js
@@ -20,7 +20,7 @@ describe('IntegrationSectionGoogleCloudIAM', () => {
   };
 
   const findConfigurations = () => wrapper.findAllComponents(Configuration);
-  const findHeaders = () => wrapper.findAll('h4');
+  const findHeaders = () => wrapper.findAll('h3');
 
   it('shows two headers', () => {
     createComponent();
diff --git a/ee/spec/frontend/integrations/edit/components/sections/google_artifact_management_spec.js b/ee/spec/frontend/integrations/edit/components/sections/google_artifact_management_spec.js
index 65e2baa2511b53..b5c080b5b865aa 100644
--- a/ee/spec/frontend/integrations/edit/components/sections/google_artifact_management_spec.js
+++ b/ee/spec/frontend/integrations/edit/components/sections/google_artifact_management_spec.js
@@ -5,6 +5,7 @@ import IntegrationSectionGoogleArtifactManagement from 'ee/integrations/edit/com
 import Configuration from '~/integrations/edit/components/sections/configuration.vue';
 import Connection from '~/integrations/edit/components/sections/connection.vue';
 import ConfigurationInstructions from 'ee/integrations/edit/components/google_artifact_management/configuration_instructions.vue';
+import SettingsSection from '~/vue_shared/components/settings/settings_section.vue';
 import EmptyState from 'ee/integrations/edit/components/google_artifact_management/empty_state.vue';
 import { createStore } from '~/integrations/edit/store';
 import { mockIntegrationProps } from '../../mock_data';
@@ -17,7 +18,7 @@ describe('IntegrationSectionGoogleArtifactManagement', () => {
   const findConfigurationInstructions = () => wrapper.findComponent(ConfigurationInstructions);
   const findConfiguration = () => wrapper.findComponent(Configuration);
   const findConnection = () => wrapper.findComponent(Connection);
-  const findTitle = () => wrapper.find('h3');
+  const findTitle = () => wrapper.find('h2');
 
   const createComponent = (customState = {}) => {
     const store = createStore({
@@ -32,6 +33,7 @@ describe('IntegrationSectionGoogleArtifactManagement', () => {
         isValidated: false,
       },
       store,
+      stubs: { SettingsSection },
     });
   };
 
diff --git a/spec/frontend/integrations/edit/components/override_dropdown_spec.js b/spec/frontend/integrations/edit/components/override_dropdown_spec.js
index a528816971a0e6..af7a20f7e8406c 100644
--- a/spec/frontend/integrations/edit/components/override_dropdown_spec.js
+++ b/spec/frontend/integrations/edit/components/override_dropdown_spec.js
@@ -91,7 +91,7 @@ describe('OverrideDropdown', () => {
           learnMorePath: '/docs',
         });
 
-        expect(findGlLink().text()).toBe('Learn more');
+        expect(findGlLink().text()).toBe('Learn more.');
         expect(findGlLink().attributes('href')).toBe('/docs');
       });
     });
-- 
GitLab