Merge branch '215355-pin-filters' into 'master'

Create sticky section in security dashboard layout

See merge request gitlab-org/gitlab!33651

ee/app/assets/javascripts/security_dashboard/components/first_class_group_security_dashboard.vue

@@ -52,7 +52,7 @@ export default {
 
 <template>
   <security-dashboard-layout>
-    <template #header>
+    <template #sticky>
       <filters :projects="projects" @filterChange="handleFilterChange" />
     </template>
     <group-security-vulnerabilities

ee/app/assets/javascripts/security_dashboard/components/first_class_instance_security_dashboard.vue

@@ -118,6 +118,8 @@ export default {
           >{{ toggleButtonProps.text }}</gl-button
         >
       </header>
+    </template>
+    <template #sticky>
       <filters
         v-if="shouldShowDashboard"
         :projects="graphqlProjectList"

ee/app/assets/javascripts/security_dashboard/components/first_class_project_security_dashboard.vue

@@ -112,6 +112,8 @@ export default {
             <csv-export-button :vulnerabilities-export-endpoint="vulnerabilitiesExportEndpoint" />
           </div>
           <vulnerabilities-count-list :project-full-path="projectFullPath" />
+        </template>
+        <template #sticky>
           <filters @filterChange="handleFilterChange" />
         </template>
         <project-vulnerabilities-app

ee/app/assets/javascripts/security_dashboard/components/security_dashboard_layout.vue

@@ -4,6 +4,9 @@ export default {
     hasHeaderSlot() {
       return Boolean(this.$slots.header);
     },
+    hasStickySlot() {
+      return Boolean(this.$slots.sticky);
+    },
     hasAsideSlot() {
       return Boolean(this.$slots.aside);
     },
@@ -17,6 +20,14 @@ export default {
       <slot name="header"></slot>
     </header>
 
+    <section
+      v-if="hasStickySlot"
+      data-testid="sticky-section"
+      class="position-sticky gl-z-index-2 security_dashboard_filters"
+    >
+      <slot name="sticky"></slot>
+    </section>
+
     <div class="row mt-4">
       <article class="col" :class="{ 'col-xl-7': hasAsideSlot }">
         <slot></slot>

ee/app/assets/stylesheets/pages/security_dashboard.scss

@@ -23,3 +23,10 @@
   }
 }
 
+.security_dashboard_filters {
+  top: $header-height;
+
+  .with-performance-bar & {
+    top: $header-height + $performance-bar-height;
+  }
+}

ee/changelogs/unreleased/215355-pin-filters.yml

+---
+title: Create sticky section in security dashboard layout
+merge_request: 33651
+author:
+type: added

ee/spec/frontend/security_dashboard/components/security_dashboard_layout_spec.js

@@ -4,6 +4,7 @@ import SecurityDashboardLayout from 'ee/security_dashboard/components/security_d
 describe('Security Dashboard Layout component', () => {
   let wrapper;
   const SMALLER_SECTION_CLASS = 'col-xl-7';
+  const STICKY_SECTION_SELECTOR = '[data-testid="sticky-section"]';
 
   const DummyComponent = {
     name: 'dummy-component',
@@ -17,6 +18,7 @@ describe('Security Dashboard Layout component', () => {
   const findArticle = () => wrapper.find('article');
   const findHeader = () => wrapper.find('header');
   const findAside = () => wrapper.find('aside');
+  const findStickySection = () => wrapper.find(STICKY_SECTION_SELECTOR);
 
   afterEach(() => {
     wrapper.destroy();
@@ -30,10 +32,11 @@ describe('Security Dashboard Layout component', () => {
     });
 
     it.each`
-      element      | exists
-      ${'article'} | ${true}
-      ${'header'}  | ${false}
-      ${'aside'}   | ${false}
+      element                    | exists
+      ${'article'}               | ${true}
+      ${'header'}                | ${false}
+      ${'aside'}                 | ${false}
+      ${STICKY_SECTION_SELECTOR} | ${false}
     `('should find that $element exists is $exists', ({ element, exists }) => {
       expect(wrapper.find(element).exists()).toBe(exists);
     });
@@ -60,10 +63,11 @@ describe('Security Dashboard Layout component', () => {
     });
 
     it.each`
-      element      | exists
-      ${'article'} | ${true}
-      ${'header'}  | ${true}
-      ${'aside'}   | ${false}
+      element                    | exists
+      ${'article'}               | ${true}
+      ${'header'}                | ${true}
+      ${'aside'}                 | ${false}
+      ${STICKY_SECTION_SELECTOR} | ${false}
     `('should find that $element exists is $exists', ({ element, exists }) => {
       expect(wrapper.find(element).exists()).toBe(exists);
     });
@@ -80,6 +84,36 @@ describe('Security Dashboard Layout component', () => {
       expect(header.find(DummyComponent).exists()).toBe(true);
     });
   });
+  describe('with the sticky section and main slots', () => {
+    beforeEach(() => {
+      createWrapper({
+        default: DummyComponent,
+        sticky: DummyComponent,
+      });
+    });
+
+    it.each`
+      element                    | exists
+      ${'article'}               | ${true}
+      ${'header'}                | ${false}
+      ${'aside'}                 | ${false}
+      ${STICKY_SECTION_SELECTOR} | ${true}
+    `('should find that $element exists is $exists', ({ element, exists }) => {
+      expect(wrapper.find(element).exists()).toBe(exists);
+    });
+
+    it('should render the dummy component in the main section', () => {
+      const article = findArticle();
+
+      expect(article.find(DummyComponent).exists()).toBe(true);
+    });
+
+    it('should render the dummy component in the sticky section', () => {
+      const section = findStickySection();
+
+      expect(section.find(DummyComponent).exists()).toBe(true);
+    });
+  });
 
   describe('with the aside and main slots', () => {
     beforeEach(() => {
@@ -90,10 +124,11 @@ describe('Security Dashboard Layout component', () => {
     });
 
     it.each`
-      element      | exists
-      ${'article'} | ${true}
-      ${'header'}  | ${false}
-      ${'aside'}   | ${true}
+      element                    | exists
+      ${'article'}               | ${true}
+      ${'header'}                | ${false}
+      ${'aside'}                 | ${true}
+      ${STICKY_SECTION_SELECTOR} | ${false}
     `('should find that $element exists is $exists', ({ element, exists }) => {
       expect(wrapper.find(element).exists()).toBe(exists);
     });