Merge branch 'dashboard-template' into 'master'

Adds a new `security_dashboard_layout` component

See merge request gitlab-org/gitlab!27674

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

+<script>
+export default {
+  computed: {
+    hasHeaderSlot() {
+      return Boolean(this.$slots.header);
+    },
+    hasAsideSlot() {
+      return Boolean(this.$slots.aside);
+    },
+  },
+};
+</script>
+
+<template>
+  <section>
+    <header v-if="hasHeaderSlot">
+      <slot name="header"></slot>
+    </header>
+
+    <div class="row mt-4">
+      <article class="col" :class="{ 'col-xl-7': hasAsideSlot }">
+        <slot></slot>
+      </article>
+
+      <aside v-if="hasAsideSlot" class="col-xl-5">
+        <slot name="aside"></slot>
+      </aside>
+    </div>
+  </section>
+</template>

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

+import { shallowMount } from '@vue/test-utils';
+import SecurityDashboardLayout from 'ee/security_dashboard/components/security_dashboard_layout.vue';
+
+describe('Security Dashboard Layout component', () => {
+  let wrapper;
+  const SMALLER_SECTION_CLASS = 'col-xl-7';
+
+  const DummyComponent = {
+    name: 'dummy-component',
+    template: '<p>dummy component</p>',
+  };
+
+  const createWrapper = slots => {
+    wrapper = shallowMount(SecurityDashboardLayout, { slots });
+  };
+
+  const findArticle = () => wrapper.find('article');
+  const findHeader = () => wrapper.find('header');
+  const findAside = () => wrapper.find('aside');
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('with the main slot only', () => {
+    beforeEach(() => {
+      createWrapper({
+        default: DummyComponent,
+      });
+    });
+
+    it.each`
+      element      | exists
+      ${'article'} | ${true}
+      ${'header'}  | ${false}
+      ${'aside'}   | ${false}
+    `('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 = wrapper.find('article');
+
+      expect(article.find(DummyComponent).exists()).toBe(true);
+    });
+
+    it('should not make the main section smaller', () => {
+      const article = wrapper.find('article');
+
+      expect(article.classes()).not.toContain(SMALLER_SECTION_CLASS);
+    });
+  });
+
+  describe('with the header and main slots', () => {
+    beforeEach(() => {
+      createWrapper({
+        default: DummyComponent,
+        header: DummyComponent,
+      });
+    });
+
+    it.each`
+      element      | exists
+      ${'article'} | ${true}
+      ${'header'}  | ${true}
+      ${'aside'}   | ${false}
+    `('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 header section', () => {
+      const header = findHeader();
+
+      expect(header.find(DummyComponent).exists()).toBe(true);
+    });
+  });
+
+  describe('with the aside and main slots', () => {
+    beforeEach(() => {
+      createWrapper({
+        default: DummyComponent,
+        aside: DummyComponent,
+      });
+    });
+
+    it.each`
+      element      | exists
+      ${'article'} | ${true}
+      ${'header'}  | ${false}
+      ${'aside'}   | ${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 header section', () => {
+      const aside = findAside();
+
+      expect(aside.find(DummyComponent).exists()).toBe(true);
+    });
+
+    it('should make the main section smaller', () => {
+      const article = findArticle();
+
+      expect(article.classes()).toContain(SMALLER_SECTION_CLASS);
+    });
+  });
+});