From be37dbf3a02472aafbb970de3239fedb42fa2d9c Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Thu, 16 Jan 2025 10:28:15 +0100
Subject: [PATCH] Integrations: Update heading and crud table borders

---
 .../javascripts/vue_shared/components/crud_component.vue   | 2 +-
 app/assets/stylesheets/framework/crud.scss                 | 3 ++-
 app/components/layouts/crud_component.haml                 | 2 +-
 .../admin/application_settings/integrations.html.haml      | 7 ++++---
 app/views/shared/integrations/overrides.html.haml          | 3 +--
 5 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/crud_component.vue b/app/assets/javascripts/vue_shared/components/crud_component.vue
index c00aa3a5b2c5a9..ef970cb2c72eae 100644
--- a/app/assets/javascripts/vue_shared/components/crud_component.vue
+++ b/app/assets/javascripts/vue_shared/components/crud_component.vue
@@ -171,7 +171,7 @@ export default {
     :class="{ 'gl-mt-5': isCollapsible }"
   >
     <header
-      class="crud-header gl-border-b gl-flex gl-flex-wrap gl-justify-between gl-gap-x-5 gl-gap-y-2 gl-rounded-t-base gl-border-section gl-bg-section gl-px-5 gl-py-4"
+      class="crud-header gl-border-b gl-relative gl-flex gl-flex-wrap gl-justify-between gl-gap-x-5 gl-gap-y-2 gl-rounded-t-base gl-border-section gl-bg-section gl-px-5 gl-py-4"
       :class="[
         headerClass,
         {
diff --git a/app/assets/stylesheets/framework/crud.scss b/app/assets/stylesheets/framework/crud.scss
index 7fff0bc7384e44..4f1f8f6506c6c6 100644
--- a/app/assets/stylesheets/framework/crud.scss
+++ b/app/assets/stylesheets/framework/crud.scss
@@ -50,6 +50,7 @@ $crud-header-min-height: px-to-rem(49px);
     }
   }
 
+  table.b-table-fixed,
   table.b-table-stacked-sm,
   table.b-table-stacked-md,
   table.b-table-stacked-lg {
@@ -64,7 +65,7 @@ $crud-header-min-height: px-to-rem(49px);
     }
 
     tr th, tr td {
-      @apply gl-border-section;
+      @apply gl-border-subtle;
     }
   }
 
diff --git a/app/components/layouts/crud_component.haml b/app/components/layouts/crud_component.haml
index ce09e46d1a835f..51f4c614b1d004 100644
--- a/app/components/layouts/crud_component.haml
+++ b/app/components/layouts/crud_component.haml
@@ -1,6 +1,6 @@
 %section
   .crud.gl-bg-subtle.gl-border.gl-border-section.gl-rounded-base{ @options, class: ('js-toggle-container' if @toggle_text) }
-    %header.crud-header.gl-flex.gl-flex-wrap.gl-justify-between.gl-gap-x-5.gl-gap-y-2.gl-px-5.gl-py-4.gl-bg-section.gl-border-b.gl-border-section.gl-rounded-t-base
+    %header.crud-header.gl-flex.gl-flex-wrap.gl-justify-between.gl-gap-x-5.gl-gap-y-2.gl-px-5.gl-py-4.gl-bg-section.gl-border-b.gl-border-section.gl-rounded-t-base.gl-relative
       .gl-flex.gl-flex-col.gl-self-center
         %h2.gl-text-base.gl-font-bold.gl-leading-normal.gl-inline-flex.gl-gap-3.gl-m-0{ data: { testid: 'crud-title' } }
           = @title
diff --git a/app/views/admin/application_settings/integrations.html.haml b/app/views/admin/application_settings/integrations.html.haml
index 86a81c8885b166..9948e19a225f4a 100644
--- a/app/views/admin/application_settings/integrations.html.haml
+++ b/app/views/admin/application_settings/integrations.html.haml
@@ -5,8 +5,9 @@
 
 %div{ data: { event_tracking_load: 'true', event_tracking: 'view_admin_application_settings_integrations_pageload' } }
 
-%h3= s_('Integrations|Instance-level integration management')
+= render ::Layouts::PageHeadingComponent.new(s_('Integrations|Instance-level integration management')) do |c|
+  - c.with_description do
+    - integrations_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: integrations_help_page_path }
+    = s_("Integrations|GitLab administrators can set up integrations that all groups and projects inherit and use by default. These integrations apply to all groups and projects that don't already use custom settings. You can override custom settings for a group or project if the settings are necessary at that level. Learn more about %{integrations_link_start}instance-level integration management%{link_end}.").html_safe % { integrations_link_start: integrations_link_start, link_end: "</a>".html_safe }
 
-- integrations_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: integrations_help_page_path }
-%p= s_("Integrations|GitLab administrators can set up integrations that all groups and projects inherit and use by default. These integrations apply to all groups and projects that don't already use custom settings. You can override custom settings for a group or project if the settings are necessary at that level. Learn more about %{integrations_link_start}instance-level integration management%{link_end}.").html_safe % { integrations_link_start: integrations_link_start, link_end: "</a>".html_safe }
 = render 'shared/integrations/index', integrations: @integrations
diff --git a/app/views/shared/integrations/overrides.html.haml b/app/views/shared/integrations/overrides.html.haml
index b54bbf394f6d47..5ea6d21dc8ec26 100644
--- a/app/views/shared/integrations/overrides.html.haml
+++ b/app/views/shared/integrations/overrides.html.haml
@@ -2,8 +2,7 @@
 - breadcrumb_title @integration.title
 - page_title @integration.title, _('Integrations')
 
-%h1.page-title.gl-text-size-h-display
-  = @integration.title
+= render ::Layouts::PageHeadingComponent.new(@integration.title)
 
 - if @integration.title == 'Beyond Identity'
   .js-vue-beyond-identity-exclusions{ data: integration_overrides_data(@integration) }
-- 
GitLab