Create sticky section in security dashboard layout

- put filters section into it
- update it on project, group, and instance level dashboard

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

 <script>
 export default {
+  stickyHeight: process.env.NODE_ENV === 'development' ? '75px' : '40px',
   computed: {
     hasHeaderSlot() {
       return Boolean(this.$slots.header);
     },
+    hasStickySlot() {
+      return Boolean(this.$slots.sticky);
+    },
+    stickyClasses() {
+      return this.hasStickySlot ? ['position-sticky', 'gl-z-index-2'] : [];
+    },
     hasAsideSlot() {
       return Boolean(this.$slots.aside);
     },
@@ -17,6 +24,10 @@ export default {
       <slot name="header"></slot>
     </header>
 
+    <section v-if="hasStickySlot" :class="stickyClasses" :style="{ top: $options.stickyHeight }">
+      <slot name="sticky"></slot>
+    </section>
+
     <div class="row mt-4">
       <article class="col" :class="{ 'col-xl-7': hasAsideSlot }">
         <slot></slot>

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

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