Merge branch 'ce-1979-fe-settings-empty' into 'master'

CE Port of "(Part 1) FE multiple approval rules settings - empty state"

See merge request gitlab-org/gitlab-ce!24087

app/assets/javascripts/vue_shared/components/callout.vue

@@ -11,13 +11,14 @@ export default {
     },
     message: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
   },
 };
 </script>
 <template>
   <div :class="`bs-callout bs-callout-${category}`" role="alert" aria-live="assertive">
-    {{ message }}
+    {{ message }} <slot></slot>
   </div>
 </template>

app/assets/stylesheets/framework/animations.scss

@@ -260,3 +260,25 @@ $skeleton-line-widths: (
 .slide-down-leave-to {
   transform: translateY(-30%);
 }
+
+@keyframes spin {
+  0% { transform: rotate(0deg);}
+  100% { transform: rotate(360deg);}
+}
+
+/** COMMON ANIMATION CLASSES **/
+.transform-origin-center { @include webkit-prefix(transform-origin, 50% 50%); }
+.animate-n-spin { @include webkit-prefix(animation-name, spin); }
+.animate-c-infinite { @include webkit-prefix(animation-iteration-count, infinite); }
+.animate-t-linear { @include webkit-prefix(animation-timing-function, linear); }
+.animate-d-1 { @include webkit-prefix(animation-duration, 1s); }
+.animate-d-2 { @include webkit-prefix(animation-duration, 2s); }
+
+/** COMPOSITE ANIMATION CLASSES **/
+.gl-spinner {
+  @include webkit-prefix(animation-name, spin);
+  @include webkit-prefix(animation-iteration-count, infinite);
+  @include webkit-prefix(animation-timing-function, linear);
+  @include webkit-prefix(animation-duration, 1s);
+  transform-origin: 50% 50%;
+}

spec/javascripts/vue_shared/components/callout_spec.js

-import Vue from 'vue';
-import callout from '~/vue_shared/components/callout.vue';
-import createComponent from 'spec/helpers/vue_mount_component_helper';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import Callout from '~/vue_shared/components/callout.vue';
+
+const TEST_MESSAGE = 'This is a callout message!';
+const TEST_SLOT = '<button>This is a callout slot!</button>';
+
+const localVue = createLocalVue();
 
 describe('Callout Component', () => {
-  let CalloutComponent;
-  let vm;
-  const exampleMessage = 'This is a callout message!';
+  let wrapper;
 
-  beforeEach(() => {
-    CalloutComponent = Vue.extend(callout);
-  });
+  const factory = options => {
+    wrapper = shallowMount(localVue.extend(Callout), {
+      localVue,
+      ...options,
+    });
+  };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   it('should render the appropriate variant of callout', () => {
-    vm = createComponent(CalloutComponent, {
-      category: 'info',
-      message: exampleMessage,
+    factory({
+      propsData: {
+        category: 'info',
+        message: TEST_MESSAGE,
+      },
     });
 
-    expect(vm.$el.getAttribute('class')).toEqual('bs-callout bs-callout-info');
+    expect(wrapper.classes()).toEqual(['bs-callout', 'bs-callout-info']);
 
-    expect(vm.$el.tagName).toEqual('DIV');
+    expect(wrapper.element.tagName).toEqual('DIV');
   });
 
   it('should render accessibility attributes', () => {
-    vm = createComponent(CalloutComponent, {
-      message: exampleMessage,
+    factory({
+      propsData: {
+        message: TEST_MESSAGE,
+      },
     });
 
-    expect(vm.$el.getAttribute('role')).toEqual('alert');
-    expect(vm.$el.getAttribute('aria-live')).toEqual('assertive');
+    expect(wrapper.attributes('role')).toEqual('alert');
+    expect(wrapper.attributes('aria-live')).toEqual('assertive');
   });
 
   it('should render the provided message', () => {
-    vm = createComponent(CalloutComponent, {
-      message: exampleMessage,
+    factory({
+      propsData: {
+        message: TEST_MESSAGE,
+      },
+    });
+
+    expect(wrapper.element.innerHTML.trim()).toEqual(TEST_MESSAGE);
+  });
+
+  it('should render the provided slot', () => {
+    factory({
+      slots: {
+        default: TEST_SLOT,
+      },
     });
 
-    expect(vm.$el.innerHTML.trim()).toEqual(exampleMessage);
+    expect(wrapper.element.innerHTML.trim()).toEqual(TEST_SLOT);
   });
 });