Add latest changes from gitlab-org/gitlab@13-3-stable-ee

32 files changed, 828 insertions, 849 deletions

diff --git a/spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap b/spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap
index 4c848256e5b..62a0f675cff 100644
--- a/spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap
+++ b/spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap
@@ -3,13 +3,13 @@
 exports[`Design note pin component should match the snapshot of note when repositioning 1`] = `
 <button
   aria-label="Comment form position"
-  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center btn-transparent comment-indicator"
+  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0 btn-transparent comment-indicator"
   style="left: 10px; top: 10px; cursor: move;"
   type="button"
 >
-  <icon-stub
+  <gl-icon-stub
     name="image-comment-dark"
-    size="16"
+    size="24"
   />
 </button>
 `;
@@ -17,7 +17,7 @@ exports[`Design note pin component should match the snapshot of note when reposi
 exports[`Design note pin component should match the snapshot of note with index 1`] = `
 <button
   aria-label="Comment '1' position"
-  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center js-image-badge badge badge-pill"
+  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0 js-image-badge badge badge-pill"
   style="left: 10px; top: 10px;"
   type="button"
 >
@@ -30,13 +30,13 @@ exports[`Design note pin component should match the snapshot of note with index
 exports[`Design note pin component should match the snapshot of note without index 1`] = `
 <button
   aria-label="Comment form position"
-  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center btn-transparent comment-indicator"
+  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0 btn-transparent comment-indicator"
   style="left: 10px; top: 10px;"
   type="button"
 >
-  <icon-stub
+  <gl-icon-stub
     name="image-comment-dark"
-    size="16"
+    size="24"
   />
 </button>
 `;
diff --git a/spec/frontend/design_management/components/delete_button_spec.js b/spec/frontend/design_management/components/delete_button_spec.js
index 9d3bcd98e44..cd4ef1f0ccd 100644
--- a/spec/frontend/design_management/components/delete_button_spec.js
+++ b/spec/frontend/design_management/components/delete_button_spec.js
@@ -1,11 +1,11 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlDeprecatedButton, GlModal, GlModalDirective } from '@gitlab/ui';
+import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
 import BatchDeleteButton from '~/design_management/components/delete_button.vue';
 
 describe('Batch delete button component', () => {
   let wrapper;
 
-  const findButton = () => wrapper.find(GlDeprecatedButton);
+  const findButton = () => wrapper.find(GlButton);
   const findModal = () => wrapper.find(GlModal);
 
   function createComponent(isDeleting = false) {
diff --git a/spec/frontend/design_management/components/design_notes/design_discussion_spec.js b/spec/frontend/design_management/components/design_notes/design_discussion_spec.js
index 102e8e0664c..176c10ea584 100644
--- a/spec/frontend/design_management/components/design_notes/design_discussion_spec.js
+++ b/spec/frontend/design_management/components/design_notes/design_discussion_spec.js
@@ -61,6 +61,10 @@ describe('Design discussions component', () => {
           ...data,
         };
       },
+      provide: {
+        projectPath: 'project-path',
+        issueIid: '1',
+      },
       mocks: {
         $apollo,
         $route: {
diff --git a/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap b/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap
index 9cd427f6aae..d76b6e712fe 100644
--- a/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap
+++ b/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap
@@ -8,328 +8,9 @@ exports[`Design management list item component when item appears in view after i
 />
 `;
 
-exports[`Design management list item component with no notes renders item with correct status icon for creation event 1`] = `
-<router-link-stub
-  class="card cursor-pointer text-plain js-design-list-item design-list-item"
-  to="[object Object]"
->
-  <div
-    class="card-body p-0 d-flex-center overflow-hidden position-relative"
-  >
-    <div
-      class="design-event position-absolute"
-    >
-      <span
-        aria-label="Added in this version"
-        title="Added in this version"
-      >
-        <icon-stub
-          class="text-success-500"
-          name="file-addition-solid"
-          size="18"
-        />
-      </span>
-    </div>
-     
-    <gl-intersection-observer-stub
-      options="[object Object]"
-    >
-      <!---->
-       
-      <img
-        alt="test"
-        class="block mx-auto mw-100 mh-100 design-img"
-        data-qa-selector="design_image"
-        src=""
-      />
-    </gl-intersection-observer-stub>
-  </div>
-   
-  <div
-    class="card-footer d-flex w-100"
-  >
-    <div
-      class="d-flex flex-column str-truncated-100"
-    >
-      <span
-        class="bold str-truncated-100"
-        data-qa-selector="design_file_name"
-      >
-        test
-      </span>
-       
-      <span
-        class="str-truncated-100"
-      >
-        
-        Updated 
-        <timeago-stub
-          cssclass=""
-          time="01-01-2019"
-          tooltipplacement="bottom"
-        />
-      </span>
-    </div>
-     
-    <!---->
-  </div>
-</router-link-stub>
-`;
-
-exports[`Design management list item component with no notes renders item with correct status icon for deletion event 1`] = `
-<router-link-stub
-  class="card cursor-pointer text-plain js-design-list-item design-list-item"
-  to="[object Object]"
->
-  <div
-    class="card-body p-0 d-flex-center overflow-hidden position-relative"
-  >
-    <div
-      class="design-event position-absolute"
-    >
-      <span
-        aria-label="Deleted in this version"
-        title="Deleted in this version"
-      >
-        <icon-stub
-          class="text-danger-500"
-          name="file-deletion-solid"
-          size="18"
-        />
-      </span>
-    </div>
-     
-    <gl-intersection-observer-stub
-      options="[object Object]"
-    >
-      <!---->
-       
-      <img
-        alt="test"
-        class="block mx-auto mw-100 mh-100 design-img"
-        data-qa-selector="design_image"
-        src=""
-      />
-    </gl-intersection-observer-stub>
-  </div>
-   
-  <div
-    class="card-footer d-flex w-100"
-  >
-    <div
-      class="d-flex flex-column str-truncated-100"
-    >
-      <span
-        class="bold str-truncated-100"
-        data-qa-selector="design_file_name"
-      >
-        test
-      </span>
-       
-      <span
-        class="str-truncated-100"
-      >
-        
-        Updated 
-        <timeago-stub
-          cssclass=""
-          time="01-01-2019"
-          tooltipplacement="bottom"
-        />
-      </span>
-    </div>
-     
-    <!---->
-  </div>
-</router-link-stub>
-`;
-
-exports[`Design management list item component with no notes renders item with correct status icon for modification event 1`] = `
-<router-link-stub
-  class="card cursor-pointer text-plain js-design-list-item design-list-item"
-  to="[object Object]"
->
-  <div
-    class="card-body p-0 d-flex-center overflow-hidden position-relative"
-  >
-    <div
-      class="design-event position-absolute"
-    >
-      <span
-        aria-label="Modified in this version"
-        title="Modified in this version"
-      >
-        <icon-stub
-          class="text-primary-500"
-          name="file-modified-solid"
-          size="18"
-        />
-      </span>
-    </div>
-     
-    <gl-intersection-observer-stub
-      options="[object Object]"
-    >
-      <!---->
-       
-      <img
-        alt="test"
-        class="block mx-auto mw-100 mh-100 design-img"
-        data-qa-selector="design_image"
-        src=""
-      />
-    </gl-intersection-observer-stub>
-  </div>
-   
-  <div
-    class="card-footer d-flex w-100"
-  >
-    <div
-      class="d-flex flex-column str-truncated-100"
-    >
-      <span
-        class="bold str-truncated-100"
-        data-qa-selector="design_file_name"
-      >
-        test
-      </span>
-       
-      <span
-        class="str-truncated-100"
-      >
-        
-        Updated 
-        <timeago-stub
-          cssclass=""
-          time="01-01-2019"
-          tooltipplacement="bottom"
-        />
-      </span>
-    </div>
-     
-    <!---->
-  </div>
-</router-link-stub>
-`;
-
-exports[`Design management list item component with no notes renders item with no status icon for none event 1`] = `
-<router-link-stub
-  class="card cursor-pointer text-plain js-design-list-item design-list-item"
-  to="[object Object]"
->
-  <div
-    class="card-body p-0 d-flex-center overflow-hidden position-relative"
-  >
-    <!---->
-     
-    <gl-intersection-observer-stub
-      options="[object Object]"
-    >
-      <!---->
-       
-      <img
-        alt="test"
-        class="block mx-auto mw-100 mh-100 design-img"
-        data-qa-selector="design_image"
-        src=""
-      />
-    </gl-intersection-observer-stub>
-  </div>
-   
-  <div
-    class="card-footer d-flex w-100"
-  >
-    <div
-      class="d-flex flex-column str-truncated-100"
-    >
-      <span
-        class="bold str-truncated-100"
-        data-qa-selector="design_file_name"
-      >
-        test
-      </span>
-       
-      <span
-        class="str-truncated-100"
-      >
-        
-        Updated 
-        <timeago-stub
-          cssclass=""
-          time="01-01-2019"
-          tooltipplacement="bottom"
-        />
-      </span>
-    </div>
-     
-    <!---->
-  </div>
-</router-link-stub>
-`;
-
-exports[`Design management list item component with no notes renders loading spinner when isUploading is true 1`] = `
-<router-link-stub
-  class="card cursor-pointer text-plain js-design-list-item design-list-item"
-  to="[object Object]"
->
-  <div
-    class="card-body p-0 d-flex-center overflow-hidden position-relative"
-  >
-    <!---->
-     
-    <gl-intersection-observer-stub
-      options="[object Object]"
-    >
-      <gl-loading-icon-stub
-        color="orange"
-        label="Loading"
-        size="md"
-      />
-       
-      <img
-        alt="test"
-        class="block mx-auto mw-100 mh-100 design-img"
-        data-qa-selector="design_image"
-        src=""
-        style="display: none;"
-      />
-    </gl-intersection-observer-stub>
-  </div>
-   
-  <div
-    class="card-footer d-flex w-100"
-  >
-    <div
-      class="d-flex flex-column str-truncated-100"
-    >
-      <span
-        class="bold str-truncated-100"
-        data-qa-selector="design_file_name"
-      >
-        test
-      </span>
-       
-      <span
-        class="str-truncated-100"
-      >
-        
-        Updated 
-        <timeago-stub
-          cssclass=""
-          time="01-01-2019"
-          tooltipplacement="bottom"
-        />
-      </span>
-    </div>
-     
-    <!---->
-  </div>
-</router-link-stub>
-`;
-
 exports[`Design management list item component with notes renders item with multiple comments 1`] = `
 <router-link-stub
-  class="card cursor-pointer text-plain js-design-list-item design-list-item"
+  class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
   to="[object Object]"
 >
   <div
@@ -337,9 +18,7 @@ exports[`Design management list item component with notes renders item with mult
   >
     <!---->
      
-    <gl-intersection-observer-stub
-      options="[object Object]"
-    >
+    <gl-intersection-observer-stub>
       <!---->
        
       <img
@@ -401,7 +80,7 @@ exports[`Design management list item component with notes renders item with mult
 
 exports[`Design management list item component with notes renders item with single comment 1`] = `
 <router-link-stub
-  class="card cursor-pointer text-plain js-design-list-item design-list-item"
+  class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
   to="[object Object]"
 >
   <div
@@ -409,9 +88,7 @@ exports[`Design management list item component with notes renders item with sing
   >
     <!---->
      
-    <gl-intersection-observer-stub
-      options="[object Object]"
-    >
+    <gl-intersection-observer-stub>
       <!---->
        
       <img
diff --git a/spec/frontend/design_management/components/list/item_spec.js b/spec/frontend/design_management/components/list/item_spec.js
index 705b532454f..d1c90bd57b0 100644
--- a/spec/frontend/design_management/components/list/item_spec.js
+++ b/spec/frontend/design_management/components/list/item_spec.js
@@ -1,6 +1,7 @@
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { GlIcon, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui';
 import VueRouter from 'vue-router';
+import Icon from '~/vue_shared/components/icon.vue';
 import Item from '~/design_management/components/list/item.vue';
 
 const localVue = createLocalVue();
@@ -18,6 +19,10 @@ const DESIGN_VERSION_EVENT = {
 describe('Design management list item component', () => {
   let wrapper;
 
+  const findDesignEvent = () => wrapper.find('[data-testid="designEvent"]');
+  const findEventIcon = () => findDesignEvent().find(Icon);
+  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
+
   function createComponent({
     notesCount = 0,
     event = DESIGN_VERSION_EVENT.NO_CHANGE,
@@ -134,35 +139,31 @@ describe('Design management list item component', () => {
     });
   });
 
-  describe('with no notes', () => {
-    it('renders item with no status icon for none event', () => {
-      createComponent();
-
-      expect(wrapper.element).toMatchSnapshot();
-    });
-
-    it('renders item with correct status icon for modification event', () => {
-      createComponent({ event: DESIGN_VERSION_EVENT.MODIFICATION });
-
-      expect(wrapper.element).toMatchSnapshot();
-    });
-
-    it('renders item with correct status icon for deletion event', () => {
-      createComponent({ event: DESIGN_VERSION_EVENT.DELETION });
+  it('renders loading spinner when isUploading is true', () => {
+    createComponent({ isUploading: true });
 
-      expect(wrapper.element).toMatchSnapshot();
-    });
+    expect(findLoadingIcon().exists()).toBe(true);
+  });
 
-    it('renders item with correct status icon for creation event', () => {
-      createComponent({ event: DESIGN_VERSION_EVENT.CREATION });
+  it('renders item with no status icon for none event', () => {
+    createComponent();
 
-      expect(wrapper.element).toMatchSnapshot();
-    });
-
-    it('renders loading spinner when isUploading is true', () => {
-      createComponent({ isUploading: true });
+    expect(findDesignEvent().exists()).toBe(false);
+  });
 
-      expect(wrapper.element).toMatchSnapshot();
+  describe('with associated event', () => {
+    it.each`
+      event                                | icon                     | className
+      ${DESIGN_VERSION_EVENT.MODIFICATION} | ${'file-modified-solid'} | ${'text-primary-500'}
+      ${DESIGN_VERSION_EVENT.DELETION}     | ${'file-deletion-solid'} | ${'text-danger-500'}
+      ${DESIGN_VERSION_EVENT.CREATION}     | ${'file-addition-solid'} | ${'text-success-500'}
+    `('renders item with correct status icon for $event event', ({ event, icon, className }) => {
+      createComponent({ event });
+      const eventIcon = findEventIcon();
+
+      expect(eventIcon.exists()).toBe(true);
+      expect(eventIcon.props('name')).toBe(icon);
+      expect(eventIcon.classes()).toContain(className);
     });
   });
 });
diff --git a/spec/frontend/design_management/components/toolbar/__snapshots__/pagination_spec.js.snap b/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap
index 0197b4bff79..a7d6145285c 100644
--- a/spec/frontend/design_management/components/toolbar/__snapshots__/pagination_spec.js.snap
+++ b/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap
@@ -2,28 +2,34 @@
 
 exports[`Design management pagination component hides components when designs are empty 1`] = `<!---->`;
 
-exports[`Design management pagination component renders pagination buttons 1`] = `
+exports[`Design management pagination component renders navigation buttons 1`] = `
 <div
   class="d-flex align-items-center"
 >
   
   0 of 2
   
-  <div
-    class="btn-group ml-3 mr-3"
+  <gl-button-group-stub
+    class="ml-3 mr-3"
   >
-    <pagination-button-stub
+    <gl-button-stub
+      category="primary"
       class="js-previous-design"
-      iconname="angle-left"
+      disabled="true"
+      icon="angle-left"
+      size="medium"
       title="Go to previous design"
+      variant="default"
     />
      
-    <pagination-button-stub
+    <gl-button-stub
+      category="primary"
       class="js-next-design"
-      design="[object Object]"
-      iconname="angle-right"
+      icon="angle-right"
+      size="medium"
       title="Go to next design"
+      variant="default"
     />
-  </div>
+  </gl-button-group-stub>
 </div>
 `;
diff --git a/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap
index e55cff8de3d..b286a74ebb8 100644
--- a/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap
+++ b/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap
@@ -2,60 +2,60 @@
 
 exports[`Design management toolbar component renders design and updated data 1`] = `
 <header
-  class="d-flex p-2 bg-white align-items-center js-design-header"
+  class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-bg-white gl-py-4 gl-pl-4 js-design-header"
 >
-  <a
-    aria-label="Go back to designs"
-    class="mr-3 text-plain d-flex justify-content-center align-items-center"
-  >
-    <icon-stub
-      name="close"
-      size="18"
-    />
-  </a>
-   
   <div
-    class="overflow-hidden d-flex align-items-center"
+    class="gl-display-flex gl-align-items-center"
   >
-    <h2
-      class="m-0 str-truncated-100 gl-font-base"
+    <a
+      aria-label="Go back to designs"
+      class="gl-mr-5 gl-display-flex gl-align-items-center gl-justify-content-center text-plain"
+      data-testid="close-design"
     >
-      test.jpg
-    </h2>
+      <gl-icon-stub
+        name="close"
+        size="16"
+      />
+    </a>
      
-    <small
-      class="text-secondary"
+    <div
+      class="overflow-hidden d-flex align-items-center"
     >
-      Updated 1 hour ago by Test Name
-    </small>
+      <h2
+        class="m-0 str-truncated-100 gl-font-base"
+      >
+        test.jpg
+      </h2>
+       
+      <small
+        class="text-secondary"
+      >
+        Updated 1 hour ago by Test Name
+      </small>
+    </div>
   </div>
    
-  <pagination-stub
+  <design-navigation-stub
     class="ml-auto flex-shrink-0"
     id="1"
   />
    
-  <gl-deprecated-button-stub
-    class="mr-2"
+  <gl-button-stub
+    category="primary"
     href="/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d"
-    size="md"
-    variant="secondary"
-  >
-    <icon-stub
-      name="download"
-      size="18"
-    />
-  </gl-deprecated-button-stub>
+    icon="download"
+    size="medium"
+    variant="default"
+  />
    
   <delete-button-stub
+    buttoncategory="secondary"
     buttonclass=""
-    buttonvariant="danger"
+    buttonicon="archive"
+    buttonsize="medium"
+    buttonvariant="warning"
+    class="gl-ml-3"
     hasselecteddesigns="true"
-  >
-    <icon-stub
-      name="remove"
-      size="18"
-    />
-  </delete-button-stub>
+  />
 </header>
 `;
diff --git a/spec/frontend/design_management/components/toolbar/__snapshots__/pagination_button_spec.js.snap b/spec/frontend/design_management/components/toolbar/__snapshots__/pagination_button_spec.js.snap
deleted file mode 100644
index 08662a04f15..00000000000
--- a/spec/frontend/design_management/components/toolbar/__snapshots__/pagination_button_spec.js.snap
+++ /dev/null
@@ -1,28 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Design management pagination button component disables button when no design is passed 1`] = `
-<router-link-stub
-  aria-label="Test title"
-  class="btn btn-default disabled"
-  disabled="true"
-  to="[object Object]"
->
-  <icon-stub
-    name="angle-right"
-    size="16"
-  />
-</router-link-stub>
-`;
-
-exports[`Design management pagination button component renders router-link 1`] = `
-<router-link-stub
-  aria-label="Test title"
-  class="btn btn-default"
-  to="[object Object]"
->
-  <icon-stub
-    name="angle-right"
-    size="16"
-  />
-</router-link-stub>
-`;
diff --git a/spec/frontend/design_management/components/toolbar/pagination_spec.js b/spec/frontend/design_management/components/toolbar/design_navigation_spec.js
index db5a36dadf6..1c6588a9628 100644
--- a/spec/frontend/design_management/components/toolbar/pagination_spec.js
+++ b/spec/frontend/design_management/components/toolbar/design_navigation_spec.js
@@ -1,7 +1,7 @@
 /* global Mousetrap */
 import 'mousetrap';
 import { shallowMount } from '@vue/test-utils';
-import Pagination from '~/design_management/components/toolbar/pagination.vue';
+import DesignNavigation from '~/design_management/components/toolbar/design_navigation.vue';
 import { DESIGN_ROUTE_NAME } from '~/design_management/router/constants';
 
 const push = jest.fn();
@@ -18,7 +18,7 @@ describe('Design management pagination component', () => {
   let wrapper;
 
   function createComponent() {
-    wrapper = shallowMount(Pagination, {
+    wrapper = shallowMount(DesignNavigation, {
       propsData: {
         id: '2',
       },
@@ -41,7 +41,7 @@ describe('Design management pagination component', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('renders pagination buttons', () => {
+  it('renders navigation buttons', () => {
     wrapper.setData({
       designs: [{ id: '1' }, { id: '2' }],
     });
diff --git a/spec/frontend/design_management/components/toolbar/index_spec.js b/spec/frontend/design_management/components/toolbar/index_spec.js
index 2910b2f62ba..2914365b0df 100644
--- a/spec/frontend/design_management/components/toolbar/index_spec.js
+++ b/spec/frontend/design_management/components/toolbar/index_spec.js
@@ -1,9 +1,9 @@
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueRouter from 'vue-router';
+import { GlButton } from '@gitlab/ui';
 import Toolbar from '~/design_management/components/toolbar/index.vue';
 import DeleteButton from '~/design_management/components/delete_button.vue';
 import { DESIGNS_ROUTE_NAME } from '~/design_management/router/constants';
-import { GlDeprecatedButton } from '@gitlab/ui';
 
 const localVue = createLocalVue();
 localVue.use(VueRouter);
@@ -116,7 +116,7 @@ describe('Design management toolbar component', () => {
   });
 
   it('renders download button with correct link', () => {
-    expect(wrapper.find(GlDeprecatedButton).attributes('href')).toBe(
+    expect(wrapper.find(GlButton).attributes('href')).toBe(
       '/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d',
     );
   });
diff --git a/spec/frontend/design_management/components/toolbar/pagination_button_spec.js b/spec/frontend/design_management/components/toolbar/pagination_button_spec.js
deleted file mode 100644
index b7df201795b..00000000000
--- a/spec/frontend/design_management/components/toolbar/pagination_button_spec.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import VueRouter from 'vue-router';
-import PaginationButton from '~/design_management/components/toolbar/pagination_button.vue';
-import { DESIGN_ROUTE_NAME } from '~/design_management/router/constants';
-
-const localVue = createLocalVue();
-localVue.use(VueRouter);
-const router = new VueRouter();
-
-describe('Design management pagination button component', () => {
-  let wrapper;
-
-  function createComponent(design = null) {
-    wrapper = shallowMount(PaginationButton, {
-      localVue,
-      router,
-      propsData: {
-        design,
-        title: 'Test title',
-        iconName: 'angle-right',
-      },
-      stubs: ['router-link'],
-    });
-  }
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('disables button when no design is passed', () => {
-    createComponent();
-
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
-  it('renders router-link', () => {
-    createComponent({ id: '2' });
-
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
-  describe('designLink', () => {
-    it('returns empty link when design is null', () => {
-      createComponent();
-
-      expect(wrapper.vm.designLink).toEqual({});
-    });
-
-    it('returns design link', () => {
-      createComponent({ id: '2', filename: 'test' });
-
-      wrapper.vm.$router.replace('/root/test-project/issues/1/designs/test?version=1');
-
-      expect(wrapper.vm.designLink).toEqual({
-        name: DESIGN_ROUTE_NAME,
-        params: { id: 'test' },
-        query: { version: '1' },
-      });
-    });
-  });
-});
diff --git a/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap b/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap
index 27c0ba589e6..3d7939df28e 100644
--- a/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap
+++ b/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap
@@ -4,16 +4,18 @@ exports[`Design management upload button component renders inverted upload desig
 <div
   isinverted="true"
 >
-  <gl-deprecated-button-stub
-    size="md"
+  <gl-button-stub
+    category="primary"
+    icon=""
+    size="small"
     title="Adding a design with the same filename replaces the file in a new version."
-    variant="success"
+    variant="default"
   >
     
     Upload designs
     
     <!---->
-  </gl-deprecated-button-stub>
+  </gl-button-stub>
    
   <input
     accept="image/*"
@@ -27,11 +29,13 @@ exports[`Design management upload button component renders inverted upload desig
 
 exports[`Design management upload button component renders loading icon 1`] = `
 <div>
-  <gl-deprecated-button-stub
+  <gl-button-stub
+    category="primary"
     disabled="true"
-    size="md"
+    icon=""
+    size="small"
     title="Adding a design with the same filename replaces the file in a new version."
-    variant="success"
+    variant="default"
   >
     
     Upload designs
@@ -43,7 +47,7 @@ exports[`Design management upload button component renders loading icon 1`] = `
       label="Loading"
       size="sm"
     />
-  </gl-deprecated-button-stub>
+  </gl-button-stub>
    
   <input
     accept="image/*"
@@ -57,16 +61,18 @@ exports[`Design management upload button component renders loading icon 1`] = `
 
 exports[`Design management upload button component renders upload design button 1`] = `
 <div>
-  <gl-deprecated-button-stub
-    size="md"
+  <gl-button-stub
+    category="primary"
+    icon=""
+    size="small"
     title="Adding a design with the same filename replaces the file in a new version."
-    variant="success"
+    variant="default"
   >
     
     Upload designs
     
     <!---->
-  </gl-deprecated-button-stub>
+  </gl-button-stub>
    
   <input
     accept="image/*"
diff --git a/spec/frontend/design_management/components/upload/__snapshots__/design_dropzone_spec.js.snap b/spec/frontend/design_management/components/upload/__snapshots__/design_dropzone_spec.js.snap
index 0737b9729a2..9284099b40d 100644
--- a/spec/frontend/design_management/components/upload/__snapshots__/design_dropzone_spec.js.snap
+++ b/spec/frontend/design_management/components/upload/__snapshots__/design_dropzone_spec.js.snap
@@ -5,20 +5,23 @@ exports[`Design management dropzone component when dragging renders correct temp
   class="w-100 position-relative"
 >
   <button
-    class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3"
+    class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3"
   >
     <div
-      class="d-flex-center flex-column text-center"
+      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
+      data-testid="dropzone-area"
     >
       <gl-icon-stub
-        class="mb-4"
-        name="doc-new"
-        size="48"
+        class="gl-mb-2"
+        name="upload"
+        size="24"
       />
        
-      <p>
+      <p
+        class="gl-mb-0"
+      >
         <gl-sprintf-stub
-          message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}."
+          message="Drop or %{linkStart}upload%{linkEnd} designs to attach"
         />
       </p>
     </div>
@@ -43,7 +46,9 @@ exports[`Design management dropzone component when dragging renders correct temp
         class="mw-50 text-center"
         style="display: none;"
       >
-        <h3>
+        <h3
+          class=""
+        >
           Oh no!
         </h3>
          
@@ -56,7 +61,9 @@ exports[`Design management dropzone component when dragging renders correct temp
         class="mw-50 text-center"
         style=""
       >
-        <h3>
+        <h3
+          class=""
+        >
           Incoming!
         </h3>
          
@@ -74,20 +81,23 @@ exports[`Design management dropzone component when dragging renders correct temp
   class="w-100 position-relative"
 >
   <button
-    class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3"
+    class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3"
   >
     <div
-      class="d-flex-center flex-column text-center"
+      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
+      data-testid="dropzone-area"
     >
       <gl-icon-stub
-        class="mb-4"
-        name="doc-new"
-        size="48"
+        class="gl-mb-2"
+        name="upload"
+        size="24"
       />
        
-      <p>
+      <p
+        class="gl-mb-0"
+      >
         <gl-sprintf-stub
-          message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}."
+          message="Drop or %{linkStart}upload%{linkEnd} designs to attach"
         />
       </p>
     </div>
@@ -112,7 +122,9 @@ exports[`Design management dropzone component when dragging renders correct temp
         class="mw-50 text-center"
         style="display: none;"
       >
-        <h3>
+        <h3
+          class=""
+        >
           Oh no!
         </h3>
          
@@ -125,7 +137,9 @@ exports[`Design management dropzone component when dragging renders correct temp
         class="mw-50 text-center"
         style=""
       >
-        <h3>
+        <h3
+          class=""
+        >
           Incoming!
         </h3>
          
@@ -143,20 +157,23 @@ exports[`Design management dropzone component when dragging renders correct temp
   class="w-100 position-relative"
 >
   <button
-    class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3"
+    class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3"
   >
     <div
-      class="d-flex-center flex-column text-center"
+      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
+      data-testid="dropzone-area"
     >
       <gl-icon-stub
-        class="mb-4"
-        name="doc-new"
-        size="48"
+        class="gl-mb-2"
+        name="upload"
+        size="24"
       />
        
-      <p>
+      <p
+        class="gl-mb-0"
+      >
         <gl-sprintf-stub
-          message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}."
+          message="Drop or %{linkStart}upload%{linkEnd} designs to attach"
         />
       </p>
     </div>
@@ -180,7 +197,9 @@ exports[`Design management dropzone component when dragging renders correct temp
       <div
         class="mw-50 text-center"
       >
-        <h3>
+        <h3
+          class=""
+        >
           Oh no!
         </h3>
          
@@ -193,7 +212,9 @@ exports[`Design management dropzone component when dragging renders correct temp
         class="mw-50 text-center"
         style="display: none;"
       >
-        <h3>
+        <h3
+          class=""
+        >
           Incoming!
         </h3>
          
@@ -211,20 +232,23 @@ exports[`Design management dropzone component when dragging renders correct temp
   class="w-100 position-relative"
 >
   <button
-    class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3"
+    class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3"
   >
     <div
-      class="d-flex-center flex-column text-center"
+      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
+      data-testid="dropzone-area"
     >
       <gl-icon-stub
-        class="mb-4"
-        name="doc-new"
-        size="48"
+        class="gl-mb-2"
+        name="upload"
+        size="24"
       />
        
-      <p>
+      <p
+        class="gl-mb-0"
+      >
         <gl-sprintf-stub
-          message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}."
+          message="Drop or %{linkStart}upload%{linkEnd} designs to attach"
         />
       </p>
     </div>
@@ -248,7 +272,9 @@ exports[`Design management dropzone component when dragging renders correct temp
       <div
         class="mw-50 text-center"
       >
-        <h3>
+        <h3
+          class=""
+        >
           Oh no!
         </h3>
          
@@ -261,7 +287,9 @@ exports[`Design management dropzone component when dragging renders correct temp
         class="mw-50 text-center"
         style="display: none;"
       >
-        <h3>
+        <h3
+          class=""
+        >
           Incoming!
         </h3>
          
@@ -279,20 +307,23 @@ exports[`Design management dropzone component when dragging renders correct temp
   class="w-100 position-relative"
 >
   <button
-    class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3"
+    class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3"
   >
     <div
-      class="d-flex-center flex-column text-center"
+      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
+      data-testid="dropzone-area"
     >
       <gl-icon-stub
-        class="mb-4"
-        name="doc-new"
-        size="48"
+        class="gl-mb-2"
+        name="upload"
+        size="24"
       />
        
-      <p>
+      <p
+        class="gl-mb-0"
+      >
         <gl-sprintf-stub
-          message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}."
+          message="Drop or %{linkStart}upload%{linkEnd} designs to attach"
         />
       </p>
     </div>
@@ -316,7 +347,9 @@ exports[`Design management dropzone component when dragging renders correct temp
       <div
         class="mw-50 text-center"
       >
-        <h3>
+        <h3
+          class=""
+        >
           Oh no!
         </h3>
          
@@ -329,7 +362,9 @@ exports[`Design management dropzone component when dragging renders correct temp
         class="mw-50 text-center"
         style="display: none;"
       >
-        <h3>
+        <h3
+          class=""
+        >
           Incoming!
         </h3>
          
@@ -347,20 +382,23 @@ exports[`Design management dropzone component when no slot provided renders defa
   class="w-100 position-relative"
 >
   <button
-    class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3"
+    class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3"
   >
     <div
-      class="d-flex-center flex-column text-center"
+      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
+      data-testid="dropzone-area"
     >
       <gl-icon-stub
-        class="mb-4"
-        name="doc-new"
-        size="48"
+        class="gl-mb-2"
+        name="upload"
+        size="24"
       />
        
-      <p>
+      <p
+        class="gl-mb-0"
+      >
         <gl-sprintf-stub
-          message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}."
+          message="Drop or %{linkStart}upload%{linkEnd} designs to attach"
         />
       </p>
     </div>
@@ -384,7 +422,9 @@ exports[`Design management dropzone component when no slot provided renders defa
       <div
         class="mw-50 text-center"
       >
-        <h3>
+        <h3
+          class=""
+        >
           Oh no!
         </h3>
          
@@ -397,7 +437,9 @@ exports[`Design management dropzone component when no slot provided renders defa
         class="mw-50 text-center"
         style="display: none;"
       >
-        <h3>
+        <h3
+          class=""
+        >
           Incoming!
         </h3>
          
@@ -428,7 +470,9 @@ exports[`Design management dropzone component when slot provided renders dropzon
       <div
         class="mw-50 text-center"
       >
-        <h3>
+        <h3
+          class=""
+        >
           Oh no!
         </h3>
          
@@ -441,7 +485,9 @@ exports[`Design management dropzone component when slot provided renders dropzon
         class="mw-50 text-center"
         style="display: none;"
       >
-        <h3>
+        <h3
+          class=""
+        >
           Incoming!
         </h3>
          
diff --git a/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap b/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap
index 00f1a40dfb2..d6fd09eb698 100644
--- a/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap
+++ b/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap
@@ -1,111 +1,77 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Design management design version dropdown component renders design version dropdown button 1`] = `
-<gl-dropdown-stub
-  class="design-version-dropdown"
+<gl-new-dropdown-stub
+  category="tertiary"
+  headertext=""
   issueiid=""
   projectpath=""
-  text="Showing Latest Version"
-  variant="link"
+  size="small"
+  text="Showing latest version"
+  variant="default"
 >
-  <gl-dropdown-item-stub>
-    <router-link-stub
-      class="d-flex js-version-link"
-      to="[object Object]"
-    >
-      <div
-        class="flex-grow-1 ml-2"
-      >
-        <div>
-          <strong>
-            Version 2
-            
-            <span>
-              (latest)
-            </span>
-          </strong>
-        </div>
-      </div>
-       
-      <i
-        class="fa fa-check pull-right"
-      />
-    </router-link-stub>
-  </gl-dropdown-item-stub>
-  <gl-dropdown-item-stub>
-    <router-link-stub
-      class="d-flex js-version-link"
-      to="[object Object]"
-    >
-      <div
-        class="flex-grow-1 ml-2"
-      >
-        <div>
-          <strong>
-            Version 1
-            
-            <!---->
-          </strong>
-        </div>
-      </div>
-       
-      <!---->
-    </router-link-stub>
-  </gl-dropdown-item-stub>
-</gl-dropdown-stub>
+  <gl-new-dropdown-item-stub
+    avatarurl=""
+    iconcolor=""
+    iconname=""
+    iconrightname=""
+    ischecked="true"
+    ischeckitem="true"
+    secondarytext=""
+  >
+    Version 
+        2
+       (latest)
+  </gl-new-dropdown-item-stub>
+  <gl-new-dropdown-item-stub
+    avatarurl=""
+    iconcolor=""
+    iconname=""
+    iconrightname=""
+    ischeckitem="true"
+    secondarytext=""
+  >
+    Version 
+        1
+      
+  </gl-new-dropdown-item-stub>
+</gl-new-dropdown-stub>
 `;
 
 exports[`Design management design version dropdown component renders design version list 1`] = `
-<gl-dropdown-stub
-  class="design-version-dropdown"
+<gl-new-dropdown-stub
+  category="tertiary"
+  headertext=""
   issueiid=""
   projectpath=""
-  text="Showing Latest Version"
-  variant="link"
+  size="small"
+  text="Showing latest version"
+  variant="default"
 >
-  <gl-dropdown-item-stub>
-    <router-link-stub
-      class="d-flex js-version-link"
-      to="[object Object]"
-    >
-      <div
-        class="flex-grow-1 ml-2"
-      >
-        <div>
-          <strong>
-            Version 2
-            
-            <span>
-              (latest)
-            </span>
-          </strong>
-        </div>
-      </div>
-       
-      <i
-        class="fa fa-check pull-right"
-      />
-    </router-link-stub>
-  </gl-dropdown-item-stub>
-  <gl-dropdown-item-stub>
-    <router-link-stub
-      class="d-flex js-version-link"
-      to="[object Object]"
-    >
-      <div
-        class="flex-grow-1 ml-2"
-      >
-        <div>
-          <strong>
-            Version 1
-            
-            <!---->
-          </strong>
-        </div>
-      </div>
-       
-      <!---->
-    </router-link-stub>
-  </gl-dropdown-item-stub>
-</gl-dropdown-stub>
+  <gl-new-dropdown-item-stub
+    avatarurl=""
+    iconcolor=""
+    iconname=""
+    iconrightname=""
+    ischecked="true"
+    ischeckitem="true"
+    secondarytext=""
+  >
+    Version 
+        2
+       (latest)
+  </gl-new-dropdown-item-stub>
+  <gl-new-dropdown-item-stub
+    avatarurl=""
+    iconcolor=""
+    iconname=""
+    iconrightname=""
+    ischeckitem="true"
+    secondarytext=""
+  >
+    Version 
+        1
+      
+  </gl-new-dropdown-item-stub>
+</gl-new-dropdown-stub>
 `;
diff --git a/spec/frontend/design_management/components/upload/design_dropzone_spec.js b/spec/frontend/design_management/components/upload/design_dropzone_spec.js
index 9b86b5b2878..bf97399368f 100644
--- a/spec/frontend/design_management/components/upload/design_dropzone_spec.js
+++ b/spec/frontend/design_management/components/upload/design_dropzone_spec.js
@@ -1,6 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
 import DesignDropzone from '~/design_management/components/upload/design_dropzone.vue';
-import createFlash from '~/flash';
+import { deprecatedCreateFlash as createFlash } from '~/flash';
 
 jest.mock('~/flash');
 
@@ -12,10 +13,16 @@ describe('Design management dropzone component', () => {
   };
 
   const findDropzoneCard = () => wrapper.find('.design-dropzone-card');
+  const findDropzoneArea = () => wrapper.find('[data-testid="dropzone-area"]');
+  const findIcon = () => wrapper.find(GlIcon);
 
-  function createComponent({ slots = {}, data = {} } = {}) {
+  function createComponent({ slots = {}, data = {}, props = {} } = {}) {
     wrapper = shallowMount(DesignDropzone, {
       slots,
+      propsData: {
+        hasDesigns: true,
+        ...props,
+      },
       data() {
         return data;
       },
@@ -129,4 +136,18 @@ describe('Design management dropzone component', () => {
       });
     });
   });
+
+  it('applies correct classes when there are no designs or no design saving loader', () => {
+    createComponent({ props: { hasDesigns: false } });
+    expect(findDropzoneArea().classes()).not.toContain('gl-flex-direction-column');
+    expect(findIcon().classes()).toEqual(['gl-mr-3', 'gl-text-gray-500']);
+    expect(findIcon().props('size')).toBe(16);
+  });
+
+  it('applies correct classes when there are designs or design saving loader', () => {
+    createComponent({ props: { hasDesigns: true } });
+    expect(findDropzoneArea().classes()).toContain('gl-flex-direction-column');
+    expect(findIcon().classes()).toEqual(['gl-mb-2']);
+    expect(findIcon().props('size')).toBe(24);
+  });
 });
diff --git a/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js b/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js
index 7521b9fad2a..f4206cdaeb3 100644
--- a/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js
+++ b/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js
@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
+import { GlNewDropdown, GlNewDropdownItem, GlSprintf } from '@gitlab/ui';
 import DesignVersionDropdown from '~/design_management/components/upload/design_version_dropdown.vue';
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import mockAllVersions from './mock_data/all_versions';
 
 const LATEST_VERSION_ID = 3;
@@ -30,7 +30,7 @@ describe('Design management design version dropdown component', () => {
       mocks: {
         $route,
       },
-      stubs: ['router-link'],
+      stubs: { GlSprintf },
     });
 
     wrapper.setData({
@@ -42,7 +42,7 @@ describe('Design management design version dropdown component', () => {
     wrapper.destroy();
   });
 
-  const findVersionLink = index => wrapper.findAll('.js-version-link').at(index);
+  const findVersionLink = index => wrapper.findAll(GlNewDropdownItem).at(index);
 
   it('renders design version dropdown button', () => {
     createComponent();
@@ -75,7 +75,7 @@ describe('Design management design version dropdown component', () => {
       createComponent();
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing Latest Version');
+        expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing latest version');
       });
     });
 
@@ -83,7 +83,7 @@ describe('Design management design version dropdown component', () => {
       createComponent({ maxVersions: 1 });
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing Latest Version');
+        expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing latest version');
       });
     });
 
@@ -91,7 +91,7 @@ describe('Design management design version dropdown component', () => {
       createComponent({ $route: designRouteFactory(PREVIOUS_VERSION_ID) });
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlDropdown).attributes('text')).toBe(`Showing Version #1`);
+        expect(wrapper.find(GlNewDropdown).attributes('text')).toBe(`Showing version #1`);
       });
     });
 
@@ -99,7 +99,7 @@ describe('Design management design version dropdown component', () => {
       createComponent({ $route: designRouteFactory(LATEST_VERSION_ID) });
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing Latest Version');
+        expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing latest version');
       });
     });
 
@@ -107,7 +107,7 @@ describe('Design management design version dropdown component', () => {
       createComponent();
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.findAll(GlDropdownItem)).toHaveLength(wrapper.vm.allVersions.length);
+        expect(wrapper.findAll(GlNewDropdownItem)).toHaveLength(wrapper.vm.allVersions.length);
       });
     });
   });
diff --git a/spec/frontend/design_management/components/upload/mock_data/all_versions.js b/spec/frontend/design_management/components/upload/mock_data/all_versions.js
index e76bbd261bd..237e1654f9b 100644
--- a/spec/frontend/design_management/components/upload/mock_data/all_versions.js
+++ b/spec/frontend/design_management/components/upload/mock_data/all_versions.js
@@ -1,14 +1,10 @@
 export default [
   {
-    node: {
-      id: 'gid://gitlab/DesignManagement::Version/3',
-      sha: '0945756378e0b1588b9dd40d5a6b99e8b7198f55',
-    },
+    id: 'gid://gitlab/DesignManagement::Version/3',
+    sha: '0945756378e0b1588b9dd40d5a6b99e8b7198f55',
   },
   {
-    node: {
-      id: 'gid://gitlab/DesignManagement::Version/2',
-      sha: '5b063fef0cd7213b312db65b30e24f057df21b20',
-    },
+    id: 'gid://gitlab/DesignManagement::Version/2',
+    sha: '5b063fef0cd7213b312db65b30e24f057df21b20',
   },
 ];
diff --git a/spec/frontend/design_management/mock_data/all_versions.js b/spec/frontend/design_management/mock_data/all_versions.js
index c389fdb8747..2b216574e27 100644
--- a/spec/frontend/design_management/mock_data/all_versions.js
+++ b/spec/frontend/design_management/mock_data/all_versions.js
@@ -1,8 +1,6 @@
 export default [
   {
-    node: {
-      id: 'gid://gitlab/DesignManagement::Version/1',
-      sha: 'b389071a06c153509e11da1f582005b316667001',
-    },
+    id: 'gid://gitlab/DesignManagement::Version/1',
+    sha: 'b389071a06c153509e11da1f582005b316667001',
   },
 ];
diff --git a/spec/frontend/design_management/mock_data/apollo_mock.js b/spec/frontend/design_management/mock_data/apollo_mock.js
new file mode 100644
index 00000000000..5e2df3877a5
--- /dev/null
+++ b/spec/frontend/design_management/mock_data/apollo_mock.js
@@ -0,0 +1,106 @@
+export const designListQueryResponse = {
+  data: {
+    project: {
+      id: '1',
+      issue: {
+        designCollection: {
+          designs: {
+            nodes: [
+              {
+                id: '1',
+                event: 'NONE',
+                filename: 'fox_1.jpg',
+                notesCount: 3,
+                image: 'image-1',
+                imageV432x230: 'image-1',
+              },
+              {
+                id: '2',
+                event: 'NONE',
+                filename: 'fox_2.jpg',
+                notesCount: 2,
+                image: 'image-2',
+                imageV432x230: 'image-2',
+              },
+              {
+                id: '3',
+                event: 'NONE',
+                filename: 'fox_3.jpg',
+                notesCount: 1,
+                image: 'image-3',
+                imageV432x230: 'image-3',
+              },
+            ],
+          },
+          versions: {
+            nodes: [],
+          },
+        },
+      },
+    },
+  },
+};
+
+export const permissionsQueryResponse = {
+  data: {
+    project: {
+      id: '1',
+      issue: {
+        userPermissions: { createDesign: true },
+      },
+    },
+  },
+};
+
+export const reorderedDesigns = [
+  {
+    id: '2',
+    event: 'NONE',
+    filename: 'fox_2.jpg',
+    notesCount: 2,
+    image: 'image-2',
+    imageV432x230: 'image-2',
+  },
+  {
+    id: '1',
+    event: 'NONE',
+    filename: 'fox_1.jpg',
+    notesCount: 3,
+    image: 'image-1',
+    imageV432x230: 'image-1',
+  },
+  {
+    id: '3',
+    event: 'NONE',
+    filename: 'fox_3.jpg',
+    notesCount: 1,
+    image: 'image-3',
+    imageV432x230: 'image-3',
+  },
+];
+
+export const moveDesignMutationResponse = {
+  data: {
+    designManagementMove: {
+      designCollection: {
+        designs: {
+          nodes: [...reorderedDesigns],
+        },
+      },
+      errors: [],
+    },
+  },
+};
+
+export const moveDesignMutationResponseWithErrors = {
+  data: {
+    designManagementMove: {
+      designCollection: {
+        designs: {
+          nodes: [...reorderedDesigns],
+        },
+      },
+      errors: ['Houston, we have a problem'],
+    },
+  },
+};
diff --git a/spec/frontend/design_management/mock_data/design.js b/spec/frontend/design_management/mock_data/design.js
index 675198b9408..72be33fef1d 100644
--- a/spec/frontend/design_management/mock_data/design.js
+++ b/spec/frontend/design_management/mock_data/design.js
@@ -12,14 +12,12 @@ export default {
     webPath: 'full-issue-path',
     webUrl: 'full-issue-url',
     participants: {
-      edges: [
+      nodes: [
         {
-          node: {
-            name: 'Administrator',
-            username: 'root',
-            webUrl: 'link-to-author',
-            avatarUrl: 'link-to-avatar',
-          },
+          name: 'Administrator',
+          username: 'root',
+          webUrl: 'link-to-author',
+          avatarUrl: 'link-to-avatar',
         },
       ],
     },
diff --git a/spec/frontend/design_management/mock_data/designs.js b/spec/frontend/design_management/mock_data/designs.js
index 07f5c1b7457..98a24081ae6 100644
--- a/spec/frontend/design_management/mock_data/designs.js
+++ b/spec/frontend/design_management/mock_data/designs.js
@@ -5,11 +5,7 @@ export default {
     issue: {
       designCollection: {
         designs: {
-          edges: [
-            {
-              node: design,
-            },
-          ],
+          nodes: [design],
         },
       },
     },
diff --git a/spec/frontend/design_management/mock_data/no_designs.js b/spec/frontend/design_management/mock_data/no_designs.js
index 9db0ffcade2..0ccb83492fc 100644
--- a/spec/frontend/design_management/mock_data/no_designs.js
+++ b/spec/frontend/design_management/mock_data/no_designs.js
@@ -3,7 +3,7 @@ export default {
     issue: {
       designCollection: {
         designs: {
-          edges: [],
+          nodes: [],
         },
       },
     },
diff --git a/spec/frontend/design_management/mock_data/versions_list.js b/spec/frontend/design_management/mock_data/versions_list.js
new file mode 100644
index 00000000000..e69de29bb2d
--- /dev/null
+++ b/spec/frontend/design_management/mock_data/versions_list.js
diff --git a/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap
index 3ba63fd14f0..3881b2d7679 100644
--- a/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap
+++ b/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap
@@ -1,7 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Design management index page designs does not render toolbar when there is no permission 1`] = `
-<div>
+<div
+  class="gl-mt-5"
+  data-testid="designs-root"
+>
   <!---->
    
   <div
@@ -11,18 +14,22 @@ exports[`Design management index page designs does not render toolbar when there
       class="list-unstyled row"
     >
       <li
-        class="col-md-6 col-lg-4 mb-3"
+        class="gl-flex-direction-column col-md-6 col-lg-3 gl-mb-3"
+        data-testid="design-dropzone-wrapper"
       >
         <design-dropzone-stub
-          class="design-list-item"
+          class="design-list-item design-list-item-new"
+          hasdesigns="true"
         />
       </li>
-       
       <li
-        class="col-md-6 col-lg-4 mb-3"
+        class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile"
       >
-        <design-dropzone-stub>
+        <design-dropzone-stub
+          hasdesigns="true"
+        >
           <design-stub
+            class="gl-bg-white"
             event="NONE"
             filename="design-1-name"
             id="design-1"
@@ -34,10 +41,13 @@ exports[`Design management index page designs does not render toolbar when there
         <!---->
       </li>
       <li
-        class="col-md-6 col-lg-4 mb-3"
+        class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile"
       >
-        <design-dropzone-stub>
+        <design-dropzone-stub
+          hasdesigns="true"
+        >
           <design-stub
+            class="gl-bg-white"
             event="NONE"
             filename="design-2-name"
             id="design-2"
@@ -49,10 +59,13 @@ exports[`Design management index page designs does not render toolbar when there
         <!---->
       </li>
       <li
-        class="col-md-6 col-lg-4 mb-3"
+        class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile"
       >
-        <design-dropzone-stub>
+        <design-dropzone-stub
+          hasdesigns="true"
+        >
           <design-stub
+            class="gl-bg-white"
             event="NONE"
             filename="design-3-name"
             id="design-3"
@@ -73,35 +86,50 @@ exports[`Design management index page designs does not render toolbar when there
 `;
 
 exports[`Design management index page designs renders designs list and header with upload button 1`] = `
-<div>
+<div
+  class="gl-mt-5"
+  data-testid="designs-root"
+>
   <header
     class="row-content-block border-top-0 p-2 d-flex"
   >
     <div
-      class="d-flex justify-content-between align-items-center w-100"
+      class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-w-full"
     >
-      <design-version-dropdown-stub />
+      <div>
+        <span
+          class="gl-font-weight-bold gl-mr-3"
+        >
+          Designs
+        </span>
+         
+        <design-version-dropdown-stub />
+      </div>
        
       <div
-        class="qa-selector-toolbar d-flex"
+        class="qa-selector-toolbar gl-display-flex gl-align-items-center"
       >
-        <gl-deprecated-button-stub
-          class="mr-2 js-select-all"
-          size="md"
+        <gl-button-stub
+          category="primary"
+          class="gl-mr-3 js-select-all"
+          icon=""
+          size="small"
           variant="link"
         >
           Select all
-        </gl-deprecated-button-stub>
+        
+        </gl-button-stub>
          
         <div>
           <delete-button-stub
-            buttonclass="btn-danger btn-inverted mr-2"
-            buttonvariant=""
+            buttoncategory="secondary"
+            buttonclass="gl-mr-3"
+            buttonsize="small"
+            buttonvariant="warning"
           >
             
-            Delete selected
-            
-            <!---->
+            Archive selected
+          
           </delete-button-stub>
         </div>
          
@@ -117,18 +145,22 @@ exports[`Design management index page designs renders designs list and header wi
       class="list-unstyled row"
     >
       <li
-        class="col-md-6 col-lg-4 mb-3"
+        class="gl-flex-direction-column col-md-6 col-lg-3 gl-mb-3"
+        data-testid="design-dropzone-wrapper"
       >
         <design-dropzone-stub
-          class="design-list-item"
+          class="design-list-item design-list-item-new"
+          hasdesigns="true"
         />
       </li>
-       
       <li
-        class="col-md-6 col-lg-4 mb-3"
+        class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile"
       >
-        <design-dropzone-stub>
+        <design-dropzone-stub
+          hasdesigns="true"
+        >
           <design-stub
+            class="gl-bg-white"
             event="NONE"
             filename="design-1-name"
             id="design-1"
@@ -143,10 +175,13 @@ exports[`Design management index page designs renders designs list and header wi
         />
       </li>
       <li
-        class="col-md-6 col-lg-4 mb-3"
+        class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile"
       >
-        <design-dropzone-stub>
+        <design-dropzone-stub
+          hasdesigns="true"
+        >
           <design-stub
+            class="gl-bg-white"
             event="NONE"
             filename="design-2-name"
             id="design-2"
@@ -161,10 +196,13 @@ exports[`Design management index page designs renders designs list and header wi
         />
       </li>
       <li
-        class="col-md-6 col-lg-4 mb-3"
+        class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile"
       >
-        <design-dropzone-stub>
+        <design-dropzone-stub
+          hasdesigns="true"
+        >
           <design-stub
+            class="gl-bg-white"
             event="NONE"
             filename="design-3-name"
             id="design-3"
@@ -188,7 +226,10 @@ exports[`Design management index page designs renders designs list and header wi
 `;
 
 exports[`Design management index page designs renders error 1`] = `
-<div>
+<div
+  class="gl-mt-5"
+  data-testid="designs-root"
+>
   <!---->
    
   <div
@@ -216,7 +257,10 @@ exports[`Design management index page designs renders error 1`] = `
 `;
 
 exports[`Design management index page designs renders loading icon 1`] = `
-<div>
+<div
+  class="gl-mt-5"
+  data-testid="designs-root"
+>
   <!---->
    
   <div
@@ -235,8 +279,11 @@ exports[`Design management index page designs renders loading icon 1`] = `
 </div>
 `;
 
-exports[`Design management index page when has no designs renders empty text 1`] = `
-<div>
+exports[`Design management index page when has no designs renders design dropzone 1`] = `
+<div
+  class="gl-mt-5"
+  data-testid="designs-root"
+>
   <!---->
    
   <div
@@ -246,13 +293,13 @@ exports[`Design management index page when has no designs renders empty text 1`]
       class="list-unstyled row"
     >
       <li
-        class="col-md-6 col-lg-4 mb-3"
+        class="col-12"
+        data-testid="design-dropzone-wrapper"
       >
         <design-dropzone-stub
-          class="design-list-item"
+          class=""
         />
       </li>
-       
     </ol>
   </div>
    
diff --git a/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap
index 65c4811536e..823294efc38 100644
--- a/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap
+++ b/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap
@@ -10,7 +10,7 @@ exports[`Design management design index page renders design index 1`] = `
     <design-destroyer-stub
       filenames="test.jpg"
       iid="1"
-      projectpath=""
+      project-path="project-path"
     />
      
     <!---->
@@ -41,7 +41,7 @@ exports[`Design management design index page renders design index 1`] = `
     </h2>
      
     <a
-      class="gl-text-gray-600 gl-text-decoration-none gl-mb-6 gl-display-block"
+      class="gl-text-gray-400 gl-text-decoration-none gl-mb-6 gl-display-block"
       href="full-issue-url"
     >
       ull-issue-path
@@ -60,13 +60,13 @@ exports[`Design management design index page renders design index 1`] = `
       designid="test"
       discussion="[object Object]"
       discussionwithopenform=""
-      markdownpreviewpath="//preview_markdown?target_type=Issue"
+      markdownpreviewpath="/project-path/preview_markdown?target_type=Issue"
       noteableid="design-id"
     />
      
     <gl-button-stub
-      category="tertiary"
-      class="link-inherit-color gl-text-black-normal gl-text-decoration-none gl-font-weight-bold gl-mb-4"
+      category="primary"
+      class="link-inherit-color gl-text-body gl-text-decoration-none gl-font-weight-bold gl-mb-4"
       data-testid="resolved-comments"
       icon="chevron-right"
       id="resolved-comments"
@@ -108,7 +108,7 @@ exports[`Design management design index page renders design index 1`] = `
         designid="test"
         discussion="[object Object]"
         discussionwithopenform=""
-        markdownpreviewpath="//preview_markdown?target_type=Issue"
+        markdownpreviewpath="/project-path/preview_markdown?target_type=Issue"
         noteableid="design-id"
       />
     </gl-collapse-stub>
@@ -140,7 +140,7 @@ exports[`Design management design index page with error GlAlert is rendered in c
     <design-destroyer-stub
       filenames="test.jpg"
       iid="1"
-      projectpath=""
+      project-path="project-path"
     />
      
     <div
@@ -188,7 +188,7 @@ exports[`Design management design index page with error GlAlert is rendered in c
     </h2>
      
     <a
-      class="gl-text-gray-600 gl-text-decoration-none gl-mb-6 gl-display-block"
+      class="gl-text-gray-400 gl-text-decoration-none gl-mb-6 gl-display-block"
       href="full-issue-url"
     >
       ull-issue-path
diff --git a/spec/frontend/design_management/pages/design/index_spec.js b/spec/frontend/design_management/pages/design/index_spec.js
index 82b607eb77d..369c8667f4d 100644
--- a/spec/frontend/design_management/pages/design/index_spec.js
+++ b/spec/frontend/design_management/pages/design/index_spec.js
@@ -2,7 +2,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueRouter from 'vue-router';
 import { GlAlert } from '@gitlab/ui';
 import { ApolloMutation } from 'vue-apollo';
-import createFlash from '~/flash';
+import { deprecatedCreateFlash as createFlash } from '~/flash';
 import DesignIndex from '~/design_management/pages/design/index.vue';
 import DesignSidebar from '~/design_management/components/design_sidebar.vue';
 import DesignPresentation from '~/design_management/components/design_presentation.vue';
@@ -95,9 +95,12 @@ describe('Design management design index page', () => {
         DesignSidebar,
         DesignReplyForm,
       },
+      provide: {
+        issueIid: '1',
+        projectPath: 'project-path',
+      },
       data() {
         return {
-          issueIid: '1',
           activeDiscussion: {
             id: null,
             source: null,
@@ -149,7 +152,7 @@ describe('Design management design index page', () => {
 
     expect(findSidebar().props()).toEqual({
       design,
-      markdownPreviewPath: '//preview_markdown?target_type=Issue',
+      markdownPreviewPath: '/project-path/preview_markdown?target_type=Issue',
       resolvedDiscussionsExpanded: false,
     });
   });
diff --git a/spec/frontend/design_management/pages/index_apollo_spec.js b/spec/frontend/design_management/pages/index_apollo_spec.js
new file mode 100644
index 00000000000..3ea711c2cfa
--- /dev/null
+++ b/spec/frontend/design_management/pages/index_apollo_spec.js
@@ -0,0 +1,162 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { createMockClient } from 'mock-apollo-client';
+import VueApollo from 'vue-apollo';
+import VueRouter from 'vue-router';
+import VueDraggable from 'vuedraggable';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+import Design from '~/design_management/components/list/item.vue';
+import createRouter from '~/design_management/router';
+import getDesignListQuery from '~/design_management/graphql/queries/get_design_list.query.graphql';
+import permissionsQuery from '~/design_management/graphql/queries/design_permissions.query.graphql';
+import moveDesignMutation from '~/design_management/graphql/mutations/move_design.mutation.graphql';
+import { deprecatedCreateFlash as createFlash } from '~/flash';
+import Index from '~/design_management/pages/index.vue';
+import {
+  designListQueryResponse,
+  permissionsQueryResponse,
+  moveDesignMutationResponse,
+  reorderedDesigns,
+  moveDesignMutationResponseWithErrors,
+} from '../mock_data/apollo_mock';
+
+jest.mock('~/flash');
+
+const localVue = createLocalVue();
+localVue.use(VueApollo);
+
+const router = createRouter();
+localVue.use(VueRouter);
+
+const designToMove = {
+  __typename: 'Design',
+  id: '2',
+  event: 'NONE',
+  filename: 'fox_2.jpg',
+  notesCount: 2,
+  image: 'image-2',
+  imageV432x230: 'image-2',
+};
+
+describe('Design management index page with Apollo mock', () => {
+  let wrapper;
+  let mockClient;
+  let apolloProvider;
+  let moveDesignHandler;
+
+  async function moveDesigns(localWrapper) {
+    await jest.runOnlyPendingTimers();
+    await localWrapper.vm.$nextTick();
+
+    localWrapper.find(VueDraggable).vm.$emit('input', reorderedDesigns);
+    localWrapper.find(VueDraggable).vm.$emit('change', {
+      moved: {
+        newIndex: 0,
+        element: designToMove,
+      },
+    });
+  }
+
+  const fragmentMatcher = { match: () => true };
+
+  const cache = new InMemoryCache({
+    fragmentMatcher,
+    addTypename: false,
+  });
+
+  const findDesigns = () => wrapper.findAll(Design);
+
+  function createComponent({
+    moveHandler = jest.fn().mockResolvedValue(moveDesignMutationResponse),
+  }) {
+    mockClient = createMockClient({ cache });
+
+    mockClient.setRequestHandler(
+      getDesignListQuery,
+      jest.fn().mockResolvedValue(designListQueryResponse),
+    );
+
+    mockClient.setRequestHandler(
+      permissionsQuery,
+      jest.fn().mockResolvedValue(permissionsQueryResponse),
+    );
+
+    moveDesignHandler = moveHandler;
+
+    mockClient.setRequestHandler(moveDesignMutation, moveDesignHandler);
+
+    apolloProvider = new VueApollo({
+      defaultClient: mockClient,
+    });
+
+    wrapper = shallowMount(Index, {
+      localVue,
+      apolloProvider,
+      router,
+      stubs: { VueDraggable },
+    });
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+    mockClient = null;
+    apolloProvider = null;
+  });
+
+  it('has a design with id 1 as a first one', async () => {
+    createComponent({});
+
+    await jest.runOnlyPendingTimers();
+    await wrapper.vm.$nextTick();
+
+    expect(findDesigns()).toHaveLength(3);
+    expect(
+      findDesigns()
+        .at(0)
+        .props('id'),
+    ).toBe('1');
+  });
+
+  it('calls a mutation with correct parameters and reorders designs', async () => {
+    createComponent({});
+
+    await moveDesigns(wrapper);
+
+    expect(moveDesignHandler).toHaveBeenCalled();
+
+    await wrapper.vm.$nextTick();
+
+    expect(
+      findDesigns()
+        .at(0)
+        .props('id'),
+    ).toBe('2');
+  });
+
+  it('displays flash if mutation had a recoverable error', async () => {
+    createComponent({
+      moveHandler: jest.fn().mockResolvedValue(moveDesignMutationResponseWithErrors),
+    });
+
+    await moveDesigns(wrapper);
+
+    await wrapper.vm.$nextTick();
+
+    expect(createFlash).toHaveBeenCalledWith('Houston, we have a problem');
+  });
+
+  it('displays flash if mutation had a non-recoverable error', async () => {
+    createComponent({
+      moveHandler: jest.fn().mockRejectedValue('Error'),
+    });
+
+    await moveDesigns(wrapper);
+
+    await jest.runOnlyPendingTimers();
+    await wrapper.vm.$nextTick();
+
+    expect(createFlash).toHaveBeenCalledWith(
+      'Something went wrong when reordering designs. Please try again',
+    );
+  });
+});
diff --git a/spec/frontend/design_management/pages/index_spec.js b/spec/frontend/design_management/pages/index_spec.js
index d3761bf09e9..093fa155d2e 100644
--- a/spec/frontend/design_management/pages/index_spec.js
+++ b/spec/frontend/design_management/pages/index_spec.js
@@ -1,5 +1,6 @@
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { ApolloMutation } from 'vue-apollo';
+import VueDraggable from 'vuedraggable';
 import VueRouter from 'vue-router';
 import { GlEmptyState } from '@gitlab/ui';
 import Index from '~/design_management/pages/index.vue';
@@ -12,7 +13,7 @@ import {
   EXISTING_DESIGN_DROP_MANY_FILES_MESSAGE,
   EXISTING_DESIGN_DROP_INVALID_FILENAME_MESSAGE,
 } from '~/design_management/utils/error_messages';
-import createFlash from '~/flash';
+import { deprecatedCreateFlash as createFlash } from '~/flash';
 import createRouter from '~/design_management/router';
 import * as utils from '~/design_management/utils/design_management_utils';
 import { DESIGN_DETAIL_LAYOUT_CLASSLIST } from '~/design_management/constants';
@@ -25,6 +26,9 @@ const mockPageEl = {
 };
 jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockPageEl);
 
+const scrollIntoViewMock = jest.fn();
+HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+
 const localVue = createLocalVue();
 const router = createRouter();
 localVue.use(VueRouter);
@@ -54,9 +58,7 @@ const mockDesigns = [
 ];
 
 const mockVersion = {
-  node: {
-    id: 'gid://gitlab/DesignManagement::Version/1',
-  },
+  id: 'gid://gitlab/DesignManagement::Version/1',
 };
 
 describe('Design management index page', () => {
@@ -68,7 +70,10 @@ describe('Design management index page', () => {
   const findToolbar = () => wrapper.find('.qa-selector-toolbar');
   const findDeleteButton = () => wrapper.find(DeleteButton);
   const findDropzone = () => wrapper.findAll(DesignDropzone).at(0);
+  const dropzoneClasses = () => findDropzone().classes();
+  const findDropzoneWrapper = () => wrapper.find('[data-testid="design-dropzone-wrapper"]');
   const findFirstDropzoneWithDesign = () => wrapper.findAll(DesignDropzone).at(1);
+  const findDesignsWrapper = () => wrapper.find('[data-testid="designs-root"]');
 
   function createComponent({
     loading = false,
@@ -92,19 +97,23 @@ describe('Design management index page', () => {
     };
 
     wrapper = shallowMount(Index, {
+      data() {
+        return {
+          designs,
+          allVersions,
+          permissions: {
+            createDesign,
+          },
+        };
+      },
       mocks: { $apollo },
       localVue,
       router,
-      stubs: { DesignDestroyer, ApolloMutation, ...stubs },
+      stubs: { DesignDestroyer, ApolloMutation, VueDraggable, ...stubs },
       attachToDocument: true,
-    });
-
-    wrapper.setData({
-      designs,
-      allVersions,
-      issueIid: '1',
-      permissions: {
-        createDesign,
+      provide: {
+        projectPath: 'project-path',
+        issueIid: '1',
       },
     });
   }
@@ -117,9 +126,7 @@ describe('Design management index page', () => {
     it('renders loading icon', () => {
       createComponent({ loading: true });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.element).toMatchSnapshot();
-      });
+      expect(wrapper.element).toMatchSnapshot();
     });
 
     it('renders error', () => {
@@ -135,25 +142,35 @@ describe('Design management index page', () => {
     it('renders a toolbar with buttons when there are designs', () => {
       createComponent({ designs: mockDesigns, allVersions: [mockVersion] });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findToolbar().exists()).toBe(true);
-      });
+      expect(findToolbar().exists()).toBe(true);
     });
 
     it('renders designs list and header with upload button', () => {
       createComponent({ designs: mockDesigns, allVersions: [mockVersion] });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.element).toMatchSnapshot();
-      });
+      expect(wrapper.element).toMatchSnapshot();
     });
 
     it('does not render toolbar when there is no permission', () => {
       createComponent({ designs: mockDesigns, allVersions: [mockVersion], createDesign: false });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.element).toMatchSnapshot();
-      });
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it('has correct classes applied to design dropzone', () => {
+      createComponent({ designs: mockDesigns, allVersions: [mockVersion] });
+      expect(dropzoneClasses()).toContain('design-list-item');
+      expect(dropzoneClasses()).toContain('design-list-item-new');
+    });
+
+    it('has correct classes applied to dropzone wrapper', () => {
+      createComponent({ designs: mockDesigns, allVersions: [mockVersion] });
+      expect(findDropzoneWrapper().classes()).toEqual([
+        'gl-flex-direction-column',
+        'col-md-6',
+        'col-lg-3',
+        'gl-mb-3',
+      ]);
     });
   });
 
@@ -162,11 +179,20 @@ describe('Design management index page', () => {
       createComponent();
     });
 
-    it('renders empty text', () =>
+    it('renders design dropzone', () =>
       wrapper.vm.$nextTick().then(() => {
         expect(wrapper.element).toMatchSnapshot();
       }));
 
+    it('has correct classes applied to design dropzone', () => {
+      expect(dropzoneClasses()).not.toContain('design-list-item');
+      expect(dropzoneClasses()).not.toContain('design-list-item-new');
+    });
+
+    it('has correct classes applied to dropzone wrapper', () => {
+      expect(findDropzoneWrapper().classes()).toEqual(['col-12']);
+    });
+
     it('does not render a toolbar with buttons', () =>
       wrapper.vm.$nextTick().then(() => {
         expect(findToolbar().exists()).toBe(false);
@@ -185,7 +211,7 @@ describe('Design management index page', () => {
         mutation: uploadDesignQuery,
         variables: {
           files: [{ name: 'test' }],
-          projectPath: '',
+          projectPath: 'project-path',
           iid: '1',
         },
         optimisticResponse: {
@@ -214,13 +240,10 @@ describe('Design management index page', () => {
                 },
                 versions: {
                   __typename: 'DesignVersionConnection',
-                  edges: {
-                    __typename: 'DesignVersionEdge',
-                    node: {
-                      __typename: 'DesignVersion',
-                      id: expect.anything(),
-                      sha: expect.anything(),
-                    },
+                  nodes: {
+                    __typename: 'DesignVersion',
+                    id: expect.anything(),
+                    sha: expect.anything(),
                   },
                 },
               },
@@ -231,12 +254,18 @@ describe('Design management index page', () => {
         },
       };
 
-      return wrapper.vm.$nextTick().then(() => {
-        findDropzone().vm.$emit('change', [{ name: 'test' }]);
-        expect(mutate).toHaveBeenCalledWith(mutationVariables);
-        expect(wrapper.vm.filesToBeSaved).toEqual([{ name: 'test' }]);
-        expect(wrapper.vm.isSaving).toBeTruthy();
-      });
+      return wrapper.vm
+        .$nextTick()
+        .then(() => {
+          findDropzone().vm.$emit('change', [{ name: 'test' }]);
+          expect(mutate).toHaveBeenCalledWith(mutationVariables);
+          expect(wrapper.vm.filesToBeSaved).toEqual([{ name: 'test' }]);
+          expect(wrapper.vm.isSaving).toBeTruthy();
+        })
+        .then(() => {
+          expect(dropzoneClasses()).toContain('design-list-item');
+          expect(dropzoneClasses()).toContain('design-list-item-new');
+        });
     });
 
     it('sets isSaving', () => {
@@ -384,8 +413,7 @@ describe('Design management index page', () => {
 
     it('renders toolbar buttons', () => {
       expect(findToolbar().exists()).toBe(true);
-      expect(findToolbar().classes()).toContain('d-flex');
-      expect(findToolbar().classes()).not.toContain('d-none');
+      expect(findToolbar().isVisible()).toBe(true);
     });
 
     it('adds two designs to selected designs when their checkboxes are checked', () => {
@@ -442,9 +470,9 @@ describe('Design management index page', () => {
     });
   });
 
-  it('on latest version when has no designs does not render toolbar buttons', () => {
+  it('on latest version when has no designs toolbar buttons are invisible', () => {
     createComponent({ designs: [], allVersions: [mockVersion] });
-    expect(findToolbar().exists()).toBe(false);
+    expect(findToolbar().isVisible()).toBe(false);
   });
 
   describe('on non-latest version', () => {
@@ -482,6 +510,10 @@ describe('Design management index page', () => {
       });
 
       event = new Event('paste');
+      event.clipboardData = {
+        files: [{ name: 'image.png', type: 'image/png' }],
+        getData: () => 'test.png',
+      };
 
       router.replace({
         name: DESIGNS_ROUTE_NAME,
@@ -491,43 +523,52 @@ describe('Design management index page', () => {
       });
     });
 
-    it('calls onUploadDesign with valid paste', () => {
-      event.clipboardData = {
-        files: [{ name: 'image.png', type: 'image/png' }],
-        getData: () => 'test.png',
-      };
-
+    it('does not call paste event if designs wrapper is not hovered', () => {
       document.dispatchEvent(event);
 
-      expect(wrapper.vm.onUploadDesign).toHaveBeenCalledTimes(1);
-      expect(wrapper.vm.onUploadDesign).toHaveBeenCalledWith([
-        new File([{ name: 'image.png' }], 'test.png'),
-      ]);
+      expect(wrapper.vm.onUploadDesign).not.toHaveBeenCalled();
     });
 
-    it('renames a design if it has an image.png filename', () => {
-      event.clipboardData = {
-        files: [{ name: 'image.png', type: 'image/png' }],
-        getData: () => 'image.png',
-      };
+    describe('when designs wrapper is hovered', () => {
+      beforeEach(() => {
+        findDesignsWrapper().trigger('mouseenter');
+      });
 
-      document.dispatchEvent(event);
+      it('calls onUploadDesign with valid paste', () => {
+        document.dispatchEvent(event);
 
-      expect(wrapper.vm.onUploadDesign).toHaveBeenCalledTimes(1);
-      expect(wrapper.vm.onUploadDesign).toHaveBeenCalledWith([
-        new File([{ name: 'image.png' }], `design_${Date.now()}.png`),
-      ]);
-    });
+        expect(wrapper.vm.onUploadDesign).toHaveBeenCalledTimes(1);
+        expect(wrapper.vm.onUploadDesign).toHaveBeenCalledWith([
+          new File([{ name: 'image.png' }], 'test.png'),
+        ]);
+      });
 
-    it('does not call onUploadDesign with invalid paste', () => {
-      event.clipboardData = {
-        items: [{ type: 'text/plain' }, { type: 'text' }],
-        files: [],
-      };
+      it('renames a design if it has an image.png filename', () => {
+        document.dispatchEvent(event);
 
-      document.dispatchEvent(event);
+        expect(wrapper.vm.onUploadDesign).toHaveBeenCalledTimes(1);
+        expect(wrapper.vm.onUploadDesign).toHaveBeenCalledWith([
+          new File([{ name: 'image.png' }], `design_${Date.now()}.png`),
+        ]);
+      });
 
-      expect(wrapper.vm.onUploadDesign).not.toHaveBeenCalled();
+      it('does not call onUploadDesign with invalid paste', () => {
+        event.clipboardData = {
+          items: [{ type: 'text/plain' }, { type: 'text' }],
+          files: [],
+        };
+
+        document.dispatchEvent(event);
+
+        expect(wrapper.vm.onUploadDesign).not.toHaveBeenCalled();
+      });
+
+      it('removes onPaste listener after mouseleave event', async () => {
+        findDesignsWrapper().trigger('mouseleave');
+        document.dispatchEvent(event);
+
+        expect(wrapper.vm.onUploadDesign).not.toHaveBeenCalled();
+      });
     });
   });
 
@@ -535,9 +576,18 @@ describe('Design management index page', () => {
     it('ensures fullscreen layout is not applied', () => {
       createComponent(true);
 
-      wrapper.vm.$router.push('/designs');
+      wrapper.vm.$router.push('/');
       expect(mockPageEl.classList.remove).toHaveBeenCalledTimes(1);
       expect(mockPageEl.classList.remove).toHaveBeenCalledWith(...DESIGN_DETAIL_LAYOUT_CLASSLIST);
     });
+
+    it('should trigger a scrollIntoView method if designs route is detected', () => {
+      router.replace({
+        path: '/designs',
+      });
+      createComponent(true);
+
+      expect(scrollIntoViewMock).toHaveBeenCalled();
+    });
   });
 });
diff --git a/spec/frontend/design_management/router_spec.js b/spec/frontend/design_management/router_spec.js
index d6488d3837a..2b8c7ee959b 100644
--- a/spec/frontend/design_management/router_spec.js
+++ b/spec/frontend/design_management/router_spec.js
@@ -5,11 +5,7 @@ import App from '~/design_management/components/app.vue';
 import Designs from '~/design_management/pages/index.vue';
 import DesignDetail from '~/design_management/pages/design/index.vue';
 import createRouter from '~/design_management/router';
-import {
-  ROOT_ROUTE_NAME,
-  DESIGNS_ROUTE_NAME,
-  DESIGN_ROUTE_NAME,
-} from '~/design_management/router/constants';
+import { DESIGNS_ROUTE_NAME, DESIGN_ROUTE_NAME } from '~/design_management/router/constants';
 import '~/commons/bootstrap';
 
 function factory(routeArg) {
@@ -49,7 +45,7 @@ describe('Design management router', () => {
     window.location.hash = '';
   });
 
-  describe.each([['/'], [{ name: ROOT_ROUTE_NAME }]])('root route', routeArg => {
+  describe.each([['/'], [{ name: DESIGNS_ROUTE_NAME }]])('root route', routeArg => {
     it('pushes home component', () => {
       const wrapper = factory(routeArg);
 
@@ -57,14 +53,6 @@ describe('Design management router', () => {
     });
   });
 
-  describe.each([['/designs'], [{ name: DESIGNS_ROUTE_NAME }]])('designs route', routeArg => {
-    it('pushes designs root component', () => {
-      const wrapper = factory(routeArg);
-
-      expect(wrapper.find(Designs).exists()).toBe(true);
-    });
-  });
-
   describe.each([['/designs/1'], [{ name: DESIGN_ROUTE_NAME, params: { id: '1' } }]])(
     'designs detail route',
     routeArg => {
diff --git a/spec/frontend/design_management/utils/cache_update_spec.js b/spec/frontend/design_management/utils/cache_update_spec.js
index 641d35ff9ff..e8a5cf3949d 100644
--- a/spec/frontend/design_management/utils/cache_update_spec.js
+++ b/spec/frontend/design_management/utils/cache_update_spec.js
@@ -13,7 +13,7 @@ import {
   UPDATE_IMAGE_DIFF_NOTE_ERROR,
 } from '~/design_management/utils/error_messages';
 import design from '../mock_data/design';
-import createFlash from '~/flash';
+import { deprecatedCreateFlash as createFlash } from '~/flash';
 
 jest.mock('~/flash.js');
 
diff --git a/spec/frontend/design_management/utils/design_management_utils_spec.js b/spec/frontend/design_management/utils/design_management_utils_spec.js
index 478ebadc8f6..e6d836b9157 100644
--- a/spec/frontend/design_management/utils/design_management_utils_spec.js
+++ b/spec/frontend/design_management/utils/design_management_utils_spec.js
@@ -51,7 +51,7 @@ describe('extractDiscussions', () => {
     };
   });
 
-  it('discards the edges.node artifacts of GraphQL', () => {
+  it('discards the node artifacts of GraphQL', () => {
     expect(extractDiscussions(discussions)).toEqual([
       { id: 1, notes: ['a'], index: 1 },
       { id: 2, notes: ['b'], index: 2 },
@@ -96,10 +96,7 @@ describe('optimistic responses', () => {
             discussions: { __typename: 'DesignDiscussion', nodes: [] },
             versions: {
               __typename: 'DesignVersionConnection',
-              edges: {
-                __typename: 'DesignVersionEdge',
-                node: { __typename: 'DesignVersion', id: -1, sha: -1 },
-              },
+              nodes: { __typename: 'DesignVersion', id: -1, sha: -1 },
             },
           },
         ],
diff --git a/spec/frontend/design_management/utils/error_messages_spec.js b/spec/frontend/design_management/utils/error_messages_spec.js
index 635ff931d7d..f5072c3b6b7 100644
--- a/spec/frontend/design_management/utils/error_messages_spec.js
+++ b/spec/frontend/design_management/utils/error_messages_spec.js
@@ -10,8 +10,8 @@ const mockFilenames = n =>
 
 describe('Error message', () => {
   describe('designDeletionError', () => {
-    const singularMsg = 'Could not delete a design. Please try again.';
-    const pluralMsg = 'Could not delete designs. Please try again.';
+    const singularMsg = 'Could not archive a design. Please try again.';
+    const pluralMsg = 'Could not archive designs. Please try again.';
 
     describe('when [singular=true]', () => {
       it.each([[undefined], [true]])('uses singular grammar', singularOption => {
@@ -55,7 +55,7 @@ describe('Error message', () => {
       'Upload skipped. Some of the designs you tried uploading did not change: 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg, and 2 more.',
     ],
   ])('designUploadSkippedWarning', (uploadedFiles, skippedFiles, expected) => {
-    test('returns expected warning message', () => {
+    it('returns expected warning message', () => {
       expect(designUploadSkippedWarning(uploadedFiles, skippedFiles)).toBe(expected);
     });
   });