Merge branch 'design-management-large-image-component' into 'master'

Added image component to design detail view

See merge request gitlab-org/gitlab-ee!10480

ee/app/assets/javascripts/design_management/components/image.vue

+<script>
+import { GlLoadingIcon } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlLoadingIcon,
+  },
+  props: {
+    image: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    name: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    isLoading: {
+      type: Boolean,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="d-flex align-items-center h-100 w-100 p-3 overflow-hidden js-design-image">
+    <gl-loading-icon v-if="isLoading" class="ml-auto mr-auto" size="md" color="light" />
+    <img v-else :src="image" :alt="name" class="ml-auto mr-auto img-fluid mh-100" />
+  </div>
+</template>

ee/app/assets/javascripts/design_management/graphql.js

@@ -8,7 +8,7 @@ Vue.use(VueApollo);
 
 const createMockDesign = id => ({
   id: Number(id),
-  image: 'http://via.placeholder.com/300',
+  image: 'http://via.placeholder.com/1000',
   name: 'test.jpg',
   commentsCount: 2,
   updatedAt: new Date().toString(),

ee/app/assets/javascripts/design_management/pages/design/index.vue

 <script>
 import Toolbar from '../../components/toolbar/index.vue';
+import DesignImage from '../../components/image.vue';
 import getDesignQuery from '../../queries/getDesign.graphql';
 
 export default {
   components: {
+    DesignImage,
     Toolbar,
   },
   props: {
@@ -36,12 +38,13 @@ export default {
 </script>
 
 <template>
-  <div class="design-detail fixed-top w-100 h-100">
+  <div class="design-detail fixed-top w-100 position-bottom-0 d-flex flex-column">
     <toolbar
       :is-loading="isLoading"
       :name="design.name"
       :updated-at="design.updatedAt"
       :updated-by="design.updatedBy"
     />
+    <design-image :is-loading="isLoading" :image="design.image" :name="design.name" />
   </div>
 </template>

ee/spec/features/projects/issues/design_management/user_views_design_spec.rb

@@ -19,5 +19,7 @@ describe 'User views issue designs', :js do
       expect(page).to have_content('test.jpg')
       expect(page).to have_content('Test Name')
     end
+
+    expect(page).to have_selector('.js-design-image')
   end
 end

ee/spec/frontend/design_management/components/__snapshots__/image_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Design management large image component renders image 1`] = `
+<div
+  class="d-flex align-items-center h-100 w-100 p-3 overflow-hidden js-design-image"
+>
+  <img
+    alt="test"
+    class="ml-auto mr-auto img-fluid mh-100"
+    src="test.jpg"
+  />
+</div>
+`;
+
+exports[`Design management large image component renders loading state 1`] = `
+<div
+  class="d-flex align-items-center h-100 w-100 p-3 overflow-hidden js-design-image"
+>
+  <glloadingicon-stub
+    class="ml-auto mr-auto"
+    color="light"
+    label="Loading"
+    size="md"
+  />
+</div>
+`;

ee/spec/frontend/design_management/components/image_spec.js

+import { shallowMount } from '@vue/test-utils';
+import DesignImage from 'ee/design_management/components/image.vue';
+
+describe('Design management large image component', () => {
+  let vm;
+
+  function createComponent(propsData) {
+    vm = shallowMount(DesignImage, {
+      propsData,
+    });
+  }
+
+  afterEach(() => {
+    vm.destroy();
+  });
+
+  it('renders loading state', () => {
+    createComponent({
+      isLoading: true,
+    });
+
+    expect(vm.element).toMatchSnapshot();
+  });
+
+  it('renders image', () => {
+    createComponent({
+      isLoading: false,
+      image: 'test.jpg',
+      name: 'test',
+    });
+
+    expect(vm.element).toMatchSnapshot();
+  });
+});

ee/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Design management design index page sets loading state 1`] = `
+exports[`Design management design index page renders design index 1`] = `
 <div
-  class="design-detail fixed-top w-100 h-100"
+  class="design-detail fixed-top w-100 position-bottom-0 d-flex flex-column"
 >
   <toolbar-stub
-    isloading="true"
-    name=""
+    name="test.jpg"
     updatedat=""
     updatedby="[object Object]"
   />
+   
+  <designimage-stub
+    image="test.jpg"
+    name="test.jpg"
+  />
 </div>
 `;
 
-exports[`Design management design index page sets loading state 2`] = `
+exports[`Design management design index page sets loading state 1`] = `
 <div
-  class="design-detail fixed-top w-100 h-100"
+  class="design-detail fixed-top w-100 position-bottom-0 d-flex flex-column"
 >
   <toolbar-stub
-    name="test.jpg"
-    updatedat="01-01-2019"
+    isloading="true"
+    name=""
+    updatedat=""
     updatedby="[object Object]"
   />
+   
+  <designimage-stub
+    image=""
+    isloading="true"
+    name=""
+  />
 </div>
 `;

ee/spec/frontend/design_management/pages/design/index_spec.js

@@ -25,12 +25,13 @@ describe('Design management design index page', () => {
     expect(vm.element).toMatchSnapshot();
   });
 
-  it('sets loading state', () => {
+  it('renders design index', () => {
     createComponent();
 
     vm.setData({
       design: {
         name: 'test.jpg',
+        image: 'test.jpg',
         updatedAt: '01-01-2019',
         updatedBy: {
           name: 'test',