Merge branch '342955-configuration-page-layout-ux-improvements' into 'master'

Improve ConfigurationPageLayout UX

See merge request gitlab-org/gitlab!73071

ee/app/assets/javascripts/on_demand_scans/components/on_demand_scans.vue

@@ -72,7 +72,7 @@ export default {
 </script>
 
 <template>
-  <configuration-page-layout v-if="hasData">
+  <configuration-page-layout v-if="hasData" no-border>
     <template #heading>
       {{ $options.i18n.title }}
     </template>

ee/app/assets/javascripts/security_configuration/components/configuration_page_layout.vue

+<script>
+export default {
+  props: {
+    noBorder: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+};
+</script>
+
 <template>
   <article>
     <slot name="alert"></slot>
     <header
-      class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid gl-display-flex gl-justify-content-space-between"
+      class="gl-mt-5 gl-display-flex gl-justify-content-space-between"
+      :class="{
+        ['gl-mb-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid']: !noBorder,
+      }"
     >
-      <div>
-        <h4 class="gl-mt-0">
-          <slot name="heading"></slot>
-        </h4>
-        <p>
-          <slot name="description"></slot>
-        </p>
-      </div>
-      <div>
-        <slot name="actions"></slot>
+      <div
+        class="gl-display-flex gl-flex-direction-column gl-w-full gl-justify-content-space-between gl-md-flex-direction-row"
+      >
+        <div>
+          <h4 class="gl-mt-0">
+            <slot name="heading"></slot>
+          </h4>
+          <p>
+            <slot name="description"></slot>
+          </p>
+        </div>
+        <div class="">
+          <slot name="actions"></slot>
+        </div>
       </div>
     </header>
     <slot></slot>

ee/spec/frontend/security_configuration/components/__snapshots__/configuration_page_layout_spec.js.snap

@@ -4,22 +4,26 @@ exports[`Security Configuration Page Layout component matches the snapshot 1`] =
 <article>
   Page alert 
   <header
-    class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid gl-display-flex gl-justify-content-space-between"
+    class="gl-mt-5 gl-display-flex gl-justify-content-space-between gl-mb-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid"
   >
-    <div>
-      <h4
-        class="gl-mt-0"
-      >
-        Page title
-      </h4>
+    <div
+      class="gl-display-flex gl-flex-direction-column gl-w-full gl-justify-content-space-between gl-md-flex-direction-row"
+    >
+      <div>
+        <h4
+          class="gl-mt-0"
+        >
+          Page title
+        </h4>
+         
+        <p>
+          Scanner description
+        </p>
+      </div>
        
-      <p>
-        Scanner description
-      </p>
-    </div>
-     
-    <div>
-      Action
+      <div>
+        Action
+      </div>
     </div>
   </header>
    

ee/spec/frontend/security_configuration/components/configuration_page_layout_spec.js

+import { within } from '@testing-library/dom';
 import ConfigurationPageLayout from 'ee/security_configuration/components/configuration_page_layout.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 describe('Security Configuration Page Layout component', () => {
   let wrapper;
 
+  const withinComponent = () => within(wrapper.element);
+  const findHeader = () => withinComponent().getByRole('banner');
+
   const createComponent = (options = {}) => {
     wrapper = shallowMountExtended(ConfigurationPageLayout, {
       slots: {
@@ -25,4 +29,24 @@ describe('Security Configuration Page Layout component', () => {
     createComponent();
     expect(wrapper.element).toMatchSnapshot();
   });
+
+  describe('border', () => {
+    const borderClasses = 'gl-mb-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid';
+
+    it('adds border classes by default', () => {
+      createComponent();
+
+      expect(findHeader().className).toContain(borderClasses);
+    });
+
+    it('does not add border classes if no-border is true', () => {
+      createComponent({
+        propsData: {
+          noBorder: true,
+        },
+      });
+
+      expect(findHeader().className).not.toContain(borderClasses);
+    });
+  });
 });