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

17 files changed, 320 insertions, 686 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',
   },
 ];