Abstract out CSS logic for vulnerability filter

- create class that sets the filter immediately below the header
  and performance bar
- clean up computed property
- add tests

app/assets/stylesheets/pages/security_dashboard.scss

+.security_dashboard_filters {
+  top: $header-height;
+
+  .with-performance-bar & {
+    top: $header-height + $performance-bar-height;
+  }
+}

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);
@@ -8,9 +7,6 @@ export default {
     hasStickySlot() {
       return Boolean(this.$slots.sticky);
     },
-    stickyClasses() {
-      return this.hasStickySlot ? ['position-sticky', 'gl-z-index-2'] : [];
-    },
     hasAsideSlot() {
       return Boolean(this.$slots.aside);
     },
@@ -24,7 +20,7 @@ export default {
       <slot name="header"></slot>
     </header>
 
-    <section v-if="hasStickySlot" :class="stickyClasses" :style="{ top: $options.stickyHeight }">
+    <section v-if="hasStickySlot" class="position-sticky gl-z-index-2 security_dashboard_filters">
       <slot name="sticky"></slot>
     </section>
 

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

@@ -17,6 +17,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('section');
 
   afterEach(() => {
     wrapper.destroy();
@@ -34,6 +35,7 @@ describe('Security Dashboard Layout component', () => {
       ${'article'}         | ${true}
       ${'header'}          | ${false}
       ${'aside'}           | ${false}
+      ${'section section'} | ${false}
     `('should find that $element exists is $exists', ({ element, exists }) => {
       expect(wrapper.find(element).exists()).toBe(exists);
     });
@@ -64,6 +66,7 @@ describe('Security Dashboard Layout component', () => {
       ${'article'}         | ${true}
       ${'header'}          | ${true}
       ${'aside'}           | ${false}
+      ${'section section'} | ${false}
     `('should find that $element exists is $exists', ({ element, exists }) => {
       expect(wrapper.find(element).exists()).toBe(exists);
     });
@@ -80,6 +83,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}
+      ${'section section'} | ${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(() => {
@@ -94,6 +127,7 @@ describe('Security Dashboard Layout component', () => {
       ${'article'}         | ${true}
       ${'header'}          | ${false}
       ${'aside'}           | ${true}
+      ${'section section'} | ${false}
     `('should find that $element exists is $exists', ({ element, exists }) => {
       expect(wrapper.find(element).exists()).toBe(exists);
     });