Add latest changes from gitlab-org/gitlab@13-6-stable-eev13.6.0-rc42

16 files changed, 220 insertions, 1210 deletions

diff --git a/spec/frontend/design_management/components/__snapshots__/design_scaler_spec.js.snap b/spec/frontend/design_management/components/__snapshots__/design_scaler_spec.js.snap
deleted file mode 100644
index 0679b485f77..00000000000
--- a/spec/frontend/design_management/components/__snapshots__/design_scaler_spec.js.snap
+++ /dev/null
@@ -1,115 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Design management design scaler component minus and reset buttons are disabled when scale === 1 1`] = `
-<div
-  class="design-scaler btn-group"
-  role="group"
->
-  <button
-    class="btn"
-    disabled="disabled"
-  >
-    <span
-      class="gl-display-flex gl-justify-content-center gl-align-items-center gl-icon s16"
-    >
-      
-      –
-    
-    </span>
-  </button>
-   
-  <button
-    class="btn"
-    disabled="disabled"
-  >
-    <gl-icon-stub
-      name="redo"
-      size="16"
-    />
-  </button>
-   
-  <button
-    class="btn"
-  >
-    <gl-icon-stub
-      name="plus"
-      size="16"
-    />
-  </button>
-</div>
-`;
-
-exports[`Design management design scaler component minus and reset buttons are enabled when scale > 1 1`] = `
-<div
-  class="design-scaler btn-group"
-  role="group"
->
-  <button
-    class="btn"
-  >
-    <span
-      class="gl-display-flex gl-justify-content-center gl-align-items-center gl-icon s16"
-    >
-      
-      –
-    
-    </span>
-  </button>
-   
-  <button
-    class="btn"
-  >
-    <gl-icon-stub
-      name="redo"
-      size="16"
-    />
-  </button>
-   
-  <button
-    class="btn"
-  >
-    <gl-icon-stub
-      name="plus"
-      size="16"
-    />
-  </button>
-</div>
-`;
-
-exports[`Design management design scaler component plus button is disabled when scale === 2 1`] = `
-<div
-  class="design-scaler btn-group"
-  role="group"
->
-  <button
-    class="btn"
-  >
-    <span
-      class="gl-display-flex gl-justify-content-center gl-align-items-center gl-icon s16"
-    >
-      
-      –
-    
-    </span>
-  </button>
-   
-  <button
-    class="btn"
-  >
-    <gl-icon-stub
-      name="redo"
-      size="16"
-    />
-  </button>
-   
-  <button
-    class="btn"
-    disabled="disabled"
-  >
-    <gl-icon-stub
-      name="plus"
-      size="16"
-    />
-  </button>
-</div>
-`;
diff --git a/spec/frontend/design_management/components/design_overlay_spec.js b/spec/frontend/design_management/components/design_overlay_spec.js
index 4ef067e3f5e..f4fd4c70dfc 100644
--- a/spec/frontend/design_management/components/design_overlay_spec.js
+++ b/spec/frontend/design_management/components/design_overlay_spec.js
@@ -243,11 +243,11 @@ describe('Design overlay component', () => {
         });
     });
 
-    describe('without [adminNote] permission', () => {
+    describe('without [repositionNote] permission', () => {
       const mockNoteNotAuthorised = {
         ...notes[0],
         userPermissions: {
-          adminNote: false,
+          repositionNote: false,
         },
       };
 
@@ -412,18 +412,18 @@ describe('Design overlay component', () => {
 
   describe('canMoveNote', () => {
     it.each`
-      adminNotePermission | canMoveNoteResult
-      ${true}             | ${true}
-      ${false}            | ${false}
-      ${undefined}        | ${false}
+      repositionNotePermission | canMoveNoteResult
+      ${true}                  | ${true}
+      ${false}                 | ${false}
+      ${undefined}             | ${false}
     `(
-      'returns [$canMoveNoteResult] when [adminNote permission] is [$adminNotePermission]',
-      ({ adminNotePermission, canMoveNoteResult }) => {
+      'returns [$canMoveNoteResult] when [repositionNote permission] is [$repositionNotePermission]',
+      ({ repositionNotePermission, canMoveNoteResult }) => {
         createComponent();
 
         const note = {
           userPermissions: {
-            adminNote: adminNotePermission,
+            repositionNote: repositionNotePermission,
           },
         };
         expect(wrapper.vm.canMoveNote(note)).toBe(canMoveNoteResult);
diff --git a/spec/frontend/design_management/components/design_scaler_spec.js b/spec/frontend/design_management/components/design_scaler_spec.js
index b06d2f924df..290ec3a18e3 100644
--- a/spec/frontend/design_management/components/design_scaler_spec.js
+++ b/spec/frontend/design_management/components/design_scaler_spec.js
@@ -1,67 +1,93 @@
 import { shallowMount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
 import DesignScaler from '~/design_management/components/design_scaler.vue';
 
 describe('Design management design scaler component', () => {
   let wrapper;
 
-  function createComponent(propsData, data = {}) {
-    wrapper = shallowMount(DesignScaler, {
-      propsData,
-    });
-    wrapper.setData(data);
-  }
+  const getButtons = () => wrapper.findAll(GlButton);
+  const getDecreaseScaleButton = () => getButtons().at(0);
+  const getResetScaleButton = () => getButtons().at(1);
+  const getIncreaseScaleButton = () => getButtons().at(2);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
+  const setScale = scale => wrapper.vm.setScale(scale);
 
-  const getButton = type => {
-    const buttonTypeOrder = ['minus', 'reset', 'plus'];
-    const buttons = wrapper.findAll('button');
-    return buttons.at(buttonTypeOrder.indexOf(type));
+  const createComponent = () => {
+    wrapper = shallowMount(DesignScaler);
   };
 
-  it('emits @scale event when "plus" button clicked', () => {
+  beforeEach(() => {
     createComponent();
+  });
 
-    getButton('plus').trigger('click');
-    expect(wrapper.emitted('scale')).toEqual([[1.2]]);
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
   });
 
-  it('emits @scale event when "reset" button clicked (scale > 1)', () => {
-    createComponent({}, { scale: 1.6 });
-    return wrapper.vm.$nextTick().then(() => {
-      getButton('reset').trigger('click');
-      expect(wrapper.emitted('scale')).toEqual([[1]]);
+  describe('when `scale` value is greater than 1', () => {
+    beforeEach(async () => {
+      setScale(1.6);
+      await wrapper.vm.$nextTick();
     });
-  });
 
-  it('emits @scale event when "minus" button clicked (scale > 1)', () => {
-    createComponent({}, { scale: 1.6 });
+    it('emits @scale event when "reset" button clicked', () => {
+      getResetScaleButton().vm.$emit('click');
+      expect(wrapper.emitted('scale')[1]).toEqual([1]);
+    });
 
-    return wrapper.vm.$nextTick().then(() => {
-      getButton('minus').trigger('click');
-      expect(wrapper.emitted('scale')).toEqual([[1.4]]);
+    it('emits @scale event when "decrement" button clicked', async () => {
+      getDecreaseScaleButton().vm.$emit('click');
+      expect(wrapper.emitted('scale')[1]).toEqual([1.4]);
     });
-  });
 
-  it('minus and reset buttons are disabled when scale === 1', () => {
-    createComponent();
+    it('enables the "reset" button', () => {
+      const resetButton = getResetScaleButton();
+
+      expect(resetButton.exists()).toBe(true);
+      expect(resetButton.props('disabled')).toBe(false);
+    });
+
+    it('enables the "decrement" button', () => {
+      const decrementButton = getDecreaseScaleButton();
 
-    expect(wrapper.element).toMatchSnapshot();
+      expect(decrementButton.exists()).toBe(true);
+      expect(decrementButton.props('disabled')).toBe(false);
+    });
+  });
+
+  it('emits @scale event when "plus" button clicked', () => {
+    getIncreaseScaleButton().vm.$emit('click');
+    expect(wrapper.emitted('scale')).toEqual([[1.2]]);
   });
 
-  it('minus and reset buttons are enabled when scale > 1', () => {
-    createComponent({}, { scale: 1.2 });
-    return wrapper.vm.$nextTick().then(() => {
-      expect(wrapper.element).toMatchSnapshot();
+  describe('when `scale` value is 1', () => {
+    it('disables the "reset" button', () => {
+      const resetButton = getResetScaleButton();
+
+      expect(resetButton.exists()).toBe(true);
+      expect(resetButton.props('disabled')).toBe(true);
+    });
+
+    it('disables the "decrement" button', () => {
+      const decrementButton = getDecreaseScaleButton();
+
+      expect(decrementButton.exists()).toBe(true);
+      expect(decrementButton.props('disabled')).toBe(true);
     });
   });
 
-  it('plus button is disabled when scale === 2', () => {
-    createComponent({}, { scale: 2 });
-    return wrapper.vm.$nextTick().then(() => {
-      expect(wrapper.element).toMatchSnapshot();
+  describe('when `scale` value is 2 (maximum)', () => {
+    beforeEach(async () => {
+      setScale(2);
+      await wrapper.vm.$nextTick();
+    });
+
+    it('disables the "increment" button', () => {
+      const incrementButton = getIncreaseScaleButton();
+
+      expect(incrementButton.exists()).toBe(true);
+      expect(incrementButton.props('disabled')).toBe(true);
     });
   });
 });
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 723ac0491a7..e2ad4c68bea 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
@@ -46,6 +46,7 @@ exports[`Design management toolbar component renders design and updated data 1`]
     href="/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d"
     icon="download"
     size="medium"
+    title="Download design"
     variant="default"
   />
    
@@ -57,6 +58,7 @@ exports[`Design management toolbar component renders design and updated data 1`]
     buttonvariant="warning"
     class="gl-ml-3"
     hasselecteddesigns="true"
+    title="Archive design"
   />
 </header>
 `;
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 eaa7460ae15..2f857247303 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
@@ -14,41 +14,7 @@ exports[`Design management upload button component renders inverted upload desig
   >
     
     Upload designs
-    
-    <!---->
-  </gl-button-stub>
-   
-  <input
-    accept="image/*"
-    class="hide"
-    multiple="multiple"
-    name="design_file"
-    type="file"
-  />
-</div>
-`;
-
-exports[`Design management upload button component renders loading icon 1`] = `
-<div>
-  <gl-button-stub
-    buttontextclasses=""
-    category="primary"
-    disabled="true"
-    icon=""
-    size="small"
-    title="Adding a design with the same filename replaces the file in a new version."
-    variant="default"
-  >
-    
-    Upload designs
-    
-    <gl-loading-icon-stub
-      class="ml-1"
-      color="orange"
-      inline="true"
-      label="Loading"
-      size="sm"
-    />
+  
   </gl-button-stub>
    
   <input
@@ -73,8 +39,7 @@ exports[`Design management upload button component renders upload design button
   >
     
     Upload designs
-    
-    <!---->
+  
   </gl-button-stub>
    
   <input
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
deleted file mode 100644
index 1ca5360fa59..00000000000
--- a/spec/frontend/design_management/components/upload/__snapshots__/design_dropzone_spec.js.snap
+++ /dev/null
@@ -1,501 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Design management dropzone component when dragging renders correct template when drag event contains files 1`] = `
-<div
-  class="gl-w-full gl-relative"
->
-  <button
-    class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
-  >
-    <div
-      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="gl-mb-2"
-        name="upload"
-        size="24"
-      />
-       
-      <p
-        class="gl-mb-0"
-      >
-        <gl-sprintf-stub
-          message="Drop or %{linkStart}upload%{linkEnd} designs to attach"
-        />
-      </p>
-    </div>
-  </button>
-   
-  <input
-    accept="image/*"
-    class="hide"
-    multiple="multiple"
-    name="design_file"
-    type="file"
-  />
-   
-  <transition-stub
-    name="design-dropzone-fade"
-  >
-    <div
-      class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white"
-      style=""
-    >
-      <div
-        class="mw-50 gl-text-center"
-        style="display: none;"
-      >
-        <h3
-          class=""
-        >
-          Oh no!
-        </h3>
-         
-        <span>
-          You are trying to upload something other than an image. Please upload a .png, .jpg, .jpeg, .gif, .bmp, .tiff or .ico.
-        </span>
-      </div>
-       
-      <div
-        class="mw-50 gl-text-center"
-        style=""
-      >
-        <h3
-          class=""
-        >
-          Incoming!
-        </h3>
-         
-        <span>
-          Drop your designs to start your upload.
-        </span>
-      </div>
-    </div>
-  </transition-stub>
-</div>
-`;
-
-exports[`Design management dropzone component when dragging renders correct template when drag event contains files and text 1`] = `
-<div
-  class="gl-w-full gl-relative"
->
-  <button
-    class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
-  >
-    <div
-      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="gl-mb-2"
-        name="upload"
-        size="24"
-      />
-       
-      <p
-        class="gl-mb-0"
-      >
-        <gl-sprintf-stub
-          message="Drop or %{linkStart}upload%{linkEnd} designs to attach"
-        />
-      </p>
-    </div>
-  </button>
-   
-  <input
-    accept="image/*"
-    class="hide"
-    multiple="multiple"
-    name="design_file"
-    type="file"
-  />
-   
-  <transition-stub
-    name="design-dropzone-fade"
-  >
-    <div
-      class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white"
-      style=""
-    >
-      <div
-        class="mw-50 gl-text-center"
-        style="display: none;"
-      >
-        <h3
-          class=""
-        >
-          Oh no!
-        </h3>
-         
-        <span>
-          You are trying to upload something other than an image. Please upload a .png, .jpg, .jpeg, .gif, .bmp, .tiff or .ico.
-        </span>
-      </div>
-       
-      <div
-        class="mw-50 gl-text-center"
-        style=""
-      >
-        <h3
-          class=""
-        >
-          Incoming!
-        </h3>
-         
-        <span>
-          Drop your designs to start your upload.
-        </span>
-      </div>
-    </div>
-  </transition-stub>
-</div>
-`;
-
-exports[`Design management dropzone component when dragging renders correct template when drag event contains text 1`] = `
-<div
-  class="gl-w-full gl-relative"
->
-  <button
-    class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
-  >
-    <div
-      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="gl-mb-2"
-        name="upload"
-        size="24"
-      />
-       
-      <p
-        class="gl-mb-0"
-      >
-        <gl-sprintf-stub
-          message="Drop or %{linkStart}upload%{linkEnd} designs to attach"
-        />
-      </p>
-    </div>
-  </button>
-   
-  <input
-    accept="image/*"
-    class="hide"
-    multiple="multiple"
-    name="design_file"
-    type="file"
-  />
-   
-  <transition-stub
-    name="design-dropzone-fade"
-  >
-    <div
-      class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white"
-      style=""
-    >
-      <div
-        class="mw-50 gl-text-center"
-      >
-        <h3
-          class=""
-        >
-          Oh no!
-        </h3>
-         
-        <span>
-          You are trying to upload something other than an image. Please upload a .png, .jpg, .jpeg, .gif, .bmp, .tiff or .ico.
-        </span>
-      </div>
-       
-      <div
-        class="mw-50 gl-text-center"
-        style="display: none;"
-      >
-        <h3
-          class=""
-        >
-          Incoming!
-        </h3>
-         
-        <span>
-          Drop your designs to start your upload.
-        </span>
-      </div>
-    </div>
-  </transition-stub>
-</div>
-`;
-
-exports[`Design management dropzone component when dragging renders correct template when drag event is empty 1`] = `
-<div
-  class="gl-w-full gl-relative"
->
-  <button
-    class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
-  >
-    <div
-      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="gl-mb-2"
-        name="upload"
-        size="24"
-      />
-       
-      <p
-        class="gl-mb-0"
-      >
-        <gl-sprintf-stub
-          message="Drop or %{linkStart}upload%{linkEnd} designs to attach"
-        />
-      </p>
-    </div>
-  </button>
-   
-  <input
-    accept="image/*"
-    class="hide"
-    multiple="multiple"
-    name="design_file"
-    type="file"
-  />
-   
-  <transition-stub
-    name="design-dropzone-fade"
-  >
-    <div
-      class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white"
-      style=""
-    >
-      <div
-        class="mw-50 gl-text-center"
-      >
-        <h3
-          class=""
-        >
-          Oh no!
-        </h3>
-         
-        <span>
-          You are trying to upload something other than an image. Please upload a .png, .jpg, .jpeg, .gif, .bmp, .tiff or .ico.
-        </span>
-      </div>
-       
-      <div
-        class="mw-50 gl-text-center"
-        style="display: none;"
-      >
-        <h3
-          class=""
-        >
-          Incoming!
-        </h3>
-         
-        <span>
-          Drop your designs to start your upload.
-        </span>
-      </div>
-    </div>
-  </transition-stub>
-</div>
-`;
-
-exports[`Design management dropzone component when dragging renders correct template when dragging stops 1`] = `
-<div
-  class="gl-w-full gl-relative"
->
-  <button
-    class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
-  >
-    <div
-      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="gl-mb-2"
-        name="upload"
-        size="24"
-      />
-       
-      <p
-        class="gl-mb-0"
-      >
-        <gl-sprintf-stub
-          message="Drop or %{linkStart}upload%{linkEnd} designs to attach"
-        />
-      </p>
-    </div>
-  </button>
-   
-  <input
-    accept="image/*"
-    class="hide"
-    multiple="multiple"
-    name="design_file"
-    type="file"
-  />
-   
-  <transition-stub
-    name="design-dropzone-fade"
-  >
-    <div
-      class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white"
-      style="display: none;"
-    >
-      <div
-        class="mw-50 gl-text-center"
-      >
-        <h3
-          class=""
-        >
-          Oh no!
-        </h3>
-         
-        <span>
-          You are trying to upload something other than an image. Please upload a .png, .jpg, .jpeg, .gif, .bmp, .tiff or .ico.
-        </span>
-      </div>
-       
-      <div
-        class="mw-50 gl-text-center"
-        style="display: none;"
-      >
-        <h3
-          class=""
-        >
-          Incoming!
-        </h3>
-         
-        <span>
-          Drop your designs to start your upload.
-        </span>
-      </div>
-    </div>
-  </transition-stub>
-</div>
-`;
-
-exports[`Design management dropzone component when no slot provided renders default dropzone card 1`] = `
-<div
-  class="gl-w-full gl-relative"
->
-  <button
-    class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
-  >
-    <div
-      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="gl-mb-2"
-        name="upload"
-        size="24"
-      />
-       
-      <p
-        class="gl-mb-0"
-      >
-        <gl-sprintf-stub
-          message="Drop or %{linkStart}upload%{linkEnd} designs to attach"
-        />
-      </p>
-    </div>
-  </button>
-   
-  <input
-    accept="image/*"
-    class="hide"
-    multiple="multiple"
-    name="design_file"
-    type="file"
-  />
-   
-  <transition-stub
-    name="design-dropzone-fade"
-  >
-    <div
-      class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white"
-      style="display: none;"
-    >
-      <div
-        class="mw-50 gl-text-center"
-      >
-        <h3
-          class=""
-        >
-          Oh no!
-        </h3>
-         
-        <span>
-          You are trying to upload something other than an image. Please upload a .png, .jpg, .jpeg, .gif, .bmp, .tiff or .ico.
-        </span>
-      </div>
-       
-      <div
-        class="mw-50 gl-text-center"
-        style="display: none;"
-      >
-        <h3
-          class=""
-        >
-          Incoming!
-        </h3>
-         
-        <span>
-          Drop your designs to start your upload.
-        </span>
-      </div>
-    </div>
-  </transition-stub>
-</div>
-`;
-
-exports[`Design management dropzone component when slot provided renders dropzone with slot content 1`] = `
-<div
-  class="gl-w-full gl-relative"
->
-  <div>
-    dropzone slot
-  </div>
-   
-  <transition-stub
-    name="design-dropzone-fade"
-  >
-    <div
-      class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white"
-      style="display: none;"
-    >
-      <div
-        class="mw-50 gl-text-center"
-      >
-        <h3
-          class=""
-        >
-          Oh no!
-        </h3>
-         
-        <span>
-          You are trying to upload something other than an image. Please upload a .png, .jpg, .jpeg, .gif, .bmp, .tiff or .ico.
-        </span>
-      </div>
-       
-      <div
-        class="mw-50 gl-text-center"
-        style="display: none;"
-      >
-        <h3
-          class=""
-        >
-          Incoming!
-        </h3>
-         
-        <span>
-          Drop your designs to start your upload.
-        </span>
-      </div>
-    </div>
-  </transition-stub>
-</div>
-`;
diff --git a/spec/frontend/design_management/components/upload/button_spec.js b/spec/frontend/design_management/components/upload/button_spec.js
index c0a9693dc37..ea738496ad6 100644
--- a/spec/frontend/design_management/components/upload/button_spec.js
+++ b/spec/frontend/design_management/components/upload/button_spec.js
@@ -1,10 +1,11 @@
 import { shallowMount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
 import UploadButton from '~/design_management/components/upload/button.vue';
 
 describe('Design management upload button component', () => {
   let wrapper;
 
-  function createComponent(isSaving = false, isInverted = false) {
+  function createComponent({ isSaving = false, isInverted = false } = {}) {
     wrapper = shallowMount(UploadButton, {
       propsData: {
         isSaving,
@@ -24,15 +25,19 @@ describe('Design management upload button component', () => {
   });
 
   it('renders inverted upload design button', () => {
-    createComponent(false, true);
+    createComponent({ isInverted: true });
 
     expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('renders loading icon', () => {
-    createComponent(true);
+  describe('when `isSaving` prop is `true`', () => {
+    it('Button `loading` prop is `true`', () => {
+      createComponent({ isSaving: true });
 
-    expect(wrapper.element).toMatchSnapshot();
+      const button = wrapper.find(GlButton);
+      expect(button.exists()).toBe(true);
+      expect(button.props('loading')).toBe(true);
+    });
   });
 
   describe('onFileUploadChange', () => {
diff --git a/spec/frontend/design_management/components/upload/design_dropzone_spec.js b/spec/frontend/design_management/components/upload/design_dropzone_spec.js
deleted file mode 100644
index bf97399368f..00000000000
--- a/spec/frontend/design_management/components/upload/design_dropzone_spec.js
+++ /dev/null
@@ -1,153 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { GlIcon } from '@gitlab/ui';
-import DesignDropzone from '~/design_management/components/upload/design_dropzone.vue';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
-
-jest.mock('~/flash');
-
-describe('Design management dropzone component', () => {
-  let wrapper;
-
-  const mockDragEvent = ({ types = ['Files'], files = [] }) => {
-    return { dataTransfer: { types, files } };
-  };
-
-  const findDropzoneCard = () => wrapper.find('.design-dropzone-card');
-  const findDropzoneArea = () => wrapper.find('[data-testid="dropzone-area"]');
-  const findIcon = () => wrapper.find(GlIcon);
-
-  function createComponent({ slots = {}, data = {}, props = {} } = {}) {
-    wrapper = shallowMount(DesignDropzone, {
-      slots,
-      propsData: {
-        hasDesigns: true,
-        ...props,
-      },
-      data() {
-        return data;
-      },
-    });
-  }
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  describe('when slot provided', () => {
-    it('renders dropzone with slot content', () => {
-      createComponent({
-        slots: {
-          default: ['<div>dropzone slot</div>'],
-        },
-      });
-
-      expect(wrapper.element).toMatchSnapshot();
-    });
-  });
-
-  describe('when no slot provided', () => {
-    it('renders default dropzone card', () => {
-      createComponent();
-
-      expect(wrapper.element).toMatchSnapshot();
-    });
-
-    it('triggers click event on file input element when clicked', () => {
-      createComponent();
-      const clickSpy = jest.spyOn(wrapper.find('input').element, 'click');
-
-      findDropzoneCard().trigger('click');
-      expect(clickSpy).toHaveBeenCalled();
-    });
-  });
-
-  describe('when dragging', () => {
-    it.each`
-      description                  | eventPayload
-      ${'is empty'}                | ${{}}
-      ${'contains text'}           | ${mockDragEvent({ types: ['text'] })}
-      ${'contains files and text'} | ${mockDragEvent({ types: ['Files', 'text'] })}
-      ${'contains files'}          | ${mockDragEvent({ types: ['Files'] })}
-    `('renders correct template when drag event $description', ({ eventPayload }) => {
-      createComponent();
-
-      wrapper.trigger('dragenter', eventPayload);
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.element).toMatchSnapshot();
-      });
-    });
-
-    it('renders correct template when dragging stops', () => {
-      createComponent();
-
-      wrapper.trigger('dragenter');
-      return wrapper.vm
-        .$nextTick()
-        .then(() => {
-          wrapper.trigger('dragleave');
-          return wrapper.vm.$nextTick();
-        })
-        .then(() => {
-          expect(wrapper.element).toMatchSnapshot();
-        });
-    });
-  });
-
-  describe('when dropping', () => {
-    it('emits upload event', () => {
-      createComponent();
-      const mockFile = { name: 'test', type: 'image/jpg' };
-      const mockEvent = mockDragEvent({ files: [mockFile] });
-
-      wrapper.trigger('dragenter', mockEvent);
-      return wrapper.vm
-        .$nextTick()
-        .then(() => {
-          wrapper.trigger('drop', mockEvent);
-          return wrapper.vm.$nextTick();
-        })
-        .then(() => {
-          expect(wrapper.emitted().change[0]).toEqual([[mockFile]]);
-        });
-    });
-  });
-
-  describe('ondrop', () => {
-    const mockData = { dragCounter: 1, isDragDataValid: true };
-
-    describe('when drag data is valid', () => {
-      it('emits upload event for valid files', () => {
-        createComponent({ data: mockData });
-
-        const mockFile = { type: 'image/jpg' };
-        const mockEvent = mockDragEvent({ files: [mockFile] });
-
-        wrapper.vm.ondrop(mockEvent);
-        expect(wrapper.emitted().change[0]).toEqual([[mockFile]]);
-      });
-
-      it('calls createFlash when files are invalid', () => {
-        createComponent({ data: mockData });
-
-        const mockEvent = mockDragEvent({ files: [{ type: 'audio/midi' }] });
-
-        wrapper.vm.ondrop(mockEvent);
-        expect(createFlash).toHaveBeenCalledTimes(1);
-      });
-    });
-  });
-
-  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/mock_data/apollo_mock.js b/spec/frontend/design_management/mock_data/apollo_mock.js
index 5e41210221b..e53ad2e6afe 100644
--- a/spec/frontend/design_management/mock_data/apollo_mock.js
+++ b/spec/frontend/design_management/mock_data/apollo_mock.js
@@ -1,13 +1,18 @@
 export const designListQueryResponse = {
   data: {
     project: {
+      __typename: 'Project',
       id: '1',
       issue: {
+        __typename: 'Issue',
         designCollection: {
+          __typename: 'DesignCollection',
           copyState: 'READY',
           designs: {
+            __typename: 'DesignConnection',
             nodes: [
               {
+                __typename: 'Design',
                 id: '1',
                 event: 'NONE',
                 filename: 'fox_1.jpg',
@@ -15,10 +20,12 @@ export const designListQueryResponse = {
                 image: 'image-1',
                 imageV432x230: 'image-1',
                 currentUserTodos: {
+                  __typename: 'ToDo',
                   nodes: [],
                 },
               },
               {
+                __typename: 'Design',
                 id: '2',
                 event: 'NONE',
                 filename: 'fox_2.jpg',
@@ -26,10 +33,12 @@ export const designListQueryResponse = {
                 image: 'image-2',
                 imageV432x230: 'image-2',
                 currentUserTodos: {
+                  __typename: 'ToDo',
                   nodes: [],
                 },
               },
               {
+                __typename: 'Design',
                 id: '3',
                 event: 'NONE',
                 filename: 'fox_3.jpg',
@@ -37,12 +46,14 @@ export const designListQueryResponse = {
                 image: 'image-3',
                 imageV432x230: 'image-3',
                 currentUserTodos: {
+                  __typename: 'ToDo',
                   nodes: [],
                 },
               },
             ],
           },
           versions: {
+            __typename: 'DesignVersion',
             nodes: [],
           },
         },
@@ -82,9 +93,11 @@ export const designUploadMutationUpdatedResponse = {
 export const permissionsQueryResponse = {
   data: {
     project: {
+      __typename: 'Project',
       id: '1',
       issue: {
-        userPermissions: { createDesign: true },
+        __typename: 'Issue',
+        userPermissions: { __typename: 'UserPermissions', createDesign: true },
       },
     },
   },
@@ -92,6 +105,7 @@ export const permissionsQueryResponse = {
 
 export const reorderedDesigns = [
   {
+    __typename: 'Design',
     id: '2',
     event: 'NONE',
     filename: 'fox_2.jpg',
@@ -99,10 +113,12 @@ export const reorderedDesigns = [
     image: 'image-2',
     imageV432x230: 'image-2',
     currentUserTodos: {
+      __typename: 'ToDo',
       nodes: [],
     },
   },
   {
+    __typename: 'Design',
     id: '1',
     event: 'NONE',
     filename: 'fox_1.jpg',
@@ -110,10 +126,12 @@ export const reorderedDesigns = [
     image: 'image-1',
     imageV432x230: 'image-1',
     currentUserTodos: {
+      __typename: 'ToDo',
       nodes: [],
     },
   },
   {
+    __typename: 'Design',
     id: '3',
     event: 'NONE',
     filename: 'fox_3.jpg',
@@ -121,6 +139,7 @@ export const reorderedDesigns = [
     image: 'image-3',
     imageV432x230: 'image-3',
     currentUserTodos: {
+      __typename: 'ToDo',
       nodes: [],
     },
   },
@@ -130,7 +149,9 @@ export const moveDesignMutationResponse = {
   data: {
     designManagementMove: {
       designCollection: {
+        __typename: 'DesignCollection',
         designs: {
+          __typename: 'DesignConnection',
           nodes: [...reorderedDesigns],
         },
       },
diff --git a/spec/frontend/design_management/mock_data/discussion.js b/spec/frontend/design_management/mock_data/discussion.js
index fbf9a2fdcc1..0e59ef29f8f 100644
--- a/spec/frontend/design_management/mock_data/discussion.js
+++ b/spec/frontend/design_management/mock_data/discussion.js
@@ -18,7 +18,7 @@ export default {
       },
       createdAt: '2020-05-08T07:10:45Z',
       userPermissions: {
-        adminNote: true,
+        repositionNote: true,
       },
       resolved: false,
     },
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 2d29b79e31c..abd455ae750 100644
--- a/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap
+++ b/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap
@@ -1,240 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Design management index page designs does not render toolbar when there is no permission 1`] = `
-<div
-  class="gl-mt-5"
-  data-testid="designs-root"
->
-  <!---->
-   
-  <div
-    class="gl-mt-6"
-  >
-    <ol
-      class="list-unstyled row"
-    >
-      <li
-        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 design-list-item-new"
-          data-qa-selector="design_dropzone_content"
-          hasdesigns="true"
-        />
-      </li>
-      <li
-        class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile"
-      >
-        <design-dropzone-stub
-          hasdesigns="true"
-        >
-          <design-stub
-            class="gl-bg-white"
-            event="NONE"
-            filename="design-1-name"
-            id="design-1"
-            image="design-1-image"
-            notescount="0"
-          />
-        </design-dropzone-stub>
-         
-        <!---->
-      </li>
-      <li
-        class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile"
-      >
-        <design-dropzone-stub
-          hasdesigns="true"
-        >
-          <design-stub
-            class="gl-bg-white"
-            event="NONE"
-            filename="design-2-name"
-            id="design-2"
-            image="design-2-image"
-            notescount="1"
-          />
-        </design-dropzone-stub>
-         
-        <!---->
-      </li>
-      <li
-        class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile"
-      >
-        <design-dropzone-stub
-          hasdesigns="true"
-        >
-          <design-stub
-            class="gl-bg-white"
-            event="NONE"
-            filename="design-3-name"
-            id="design-3"
-            image="design-3-image"
-            notescount="0"
-          />
-        </design-dropzone-stub>
-         
-        <!---->
-      </li>
-    </ol>
-  </div>
-   
-  <router-view-stub
-    name="default"
-  />
-</div>
-`;
-
-exports[`Design management index page designs renders designs list and header with upload button 1`] = `
-<div
-  class="gl-mt-5"
-  data-testid="designs-root"
->
-  <header
-    class="row-content-block gl-border-t-0 gl-p-3 gl-display-flex"
-  >
-    <div
-      class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-w-full"
-    >
-      <div>
-        <span
-          class="gl-font-weight-bold gl-mr-3"
-        >
-          Designs
-        </span>
-         
-        <design-version-dropdown-stub />
-      </div>
-       
-      <div
-        class="qa-selector-toolbar gl-display-flex gl-align-items-center"
-      >
-        <gl-button-stub
-          buttontextclasses=""
-          category="primary"
-          class="gl-mr-4 js-select-all"
-          icon=""
-          size="small"
-          variant="link"
-        >
-          Select all
-        
-        </gl-button-stub>
-         
-        <div>
-          <delete-button-stub
-            buttoncategory="secondary"
-            buttonclass="gl-mr-3"
-            buttonsize="small"
-            buttonvariant="warning"
-            data-qa-selector="archive_button"
-          >
-            
-            Archive selected
-          
-          </delete-button-stub>
-        </div>
-         
-        <upload-button-stub />
-      </div>
-    </div>
-  </header>
-   
-  <div
-    class="gl-mt-6"
-  >
-    <ol
-      class="list-unstyled row"
-    >
-      <li
-        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 design-list-item-new"
-          data-qa-selector="design_dropzone_content"
-          hasdesigns="true"
-        />
-      </li>
-      <li
-        class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile"
-      >
-        <design-dropzone-stub
-          hasdesigns="true"
-        >
-          <design-stub
-            class="gl-bg-white"
-            event="NONE"
-            filename="design-1-name"
-            id="design-1"
-            image="design-1-image"
-            notescount="0"
-          />
-        </design-dropzone-stub>
-         
-        <input
-          class="design-checkbox"
-          data-qa-design="design-1-name"
-          data-qa-selector="design_checkbox"
-          type="checkbox"
-        />
-      </li>
-      <li
-        class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile"
-      >
-        <design-dropzone-stub
-          hasdesigns="true"
-        >
-          <design-stub
-            class="gl-bg-white"
-            event="NONE"
-            filename="design-2-name"
-            id="design-2"
-            image="design-2-image"
-            notescount="1"
-          />
-        </design-dropzone-stub>
-         
-        <input
-          class="design-checkbox"
-          data-qa-design="design-2-name"
-          data-qa-selector="design_checkbox"
-          type="checkbox"
-        />
-      </li>
-      <li
-        class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile"
-      >
-        <design-dropzone-stub
-          hasdesigns="true"
-        >
-          <design-stub
-            class="gl-bg-white"
-            event="NONE"
-            filename="design-3-name"
-            id="design-3"
-            image="design-3-image"
-            notescount="0"
-          />
-        </design-dropzone-stub>
-         
-        <input
-          class="design-checkbox"
-          data-qa-design="design-3-name"
-          data-qa-selector="design_checkbox"
-          type="checkbox"
-        />
-      </li>
-    </ol>
-  </div>
-   
-  <router-view-stub
-    name="default"
-  />
-</div>
-`;
-
 exports[`Design management index page designs renders error 1`] = `
 <div
   class="gl-mt-5"
@@ -277,7 +42,7 @@ exports[`Design management index page designs renders loading icon 1`] = `
     class="gl-mt-6"
   >
     <gl-loading-icon-stub
-      color="orange"
+      color="dark"
       label="Loading"
       size="md"
     />
@@ -288,34 +53,3 @@ exports[`Design management index page designs renders loading icon 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
-    class="gl-mt-6"
-  >
-    <ol
-      class="list-unstyled row"
-    >
-      <li
-        class="col-12"
-        data-testid="design-dropzone-wrapper"
-      >
-        <design-dropzone-stub
-          class=""
-          data-qa-selector="design_dropzone_content"
-        />
-      </li>
-    </ol>
-  </div>
-   
-  <router-view-stub
-    name="default"
-  />
-</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 3d6c2561ff6..03ae77d4977 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
@@ -136,7 +136,7 @@ exports[`Design management design index page sets loading state 1`] = `
 >
   <gl-loading-icon-stub
     class="gl-align-self-center"
-    color="orange"
+    color="dark"
     label="Loading"
     size="xl"
   />
diff --git a/spec/frontend/design_management/pages/design/index_spec.js b/spec/frontend/design_management/pages/design/index_spec.js
index d9f7146d258..88892bb1878 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 { deprecatedCreateFlash as createFlash } from '~/flash';
+import 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';
@@ -24,7 +24,13 @@ import mockAllVersions from '../../mock_data/all_versions';
 jest.mock('~/flash');
 
 const focusInput = jest.fn();
-
+const mutate = jest.fn().mockResolvedValue();
+const mockPageLayoutElement = {
+  classList: {
+    add: jest.fn(),
+    remove: jest.fn(),
+  },
+};
 const DesignReplyForm = {
   template: '<div><textarea ref="textarea"></textarea></div>',
   methods: {
@@ -37,6 +43,32 @@ const mockDesignNoDiscussions = {
     nodes: [],
   },
 };
+const newComment = 'new comment';
+const annotationCoordinates = {
+  x: 10,
+  y: 10,
+  width: 100,
+  height: 100,
+};
+const createDiscussionMutationVariables = {
+  mutation: createImageDiffNoteMutation,
+  update: expect.anything(),
+  variables: {
+    input: {
+      body: newComment,
+      noteableId: design.id,
+      position: {
+        headSha: 'headSha',
+        baseSha: 'baseSha',
+        startSha: 'startSha',
+        paths: {
+          newPath: 'full-design-path',
+        },
+        ...annotationCoordinates,
+      },
+    },
+  },
+};
 
 const localVue = createLocalVue();
 localVue.use(VueRouter);
@@ -45,35 +77,6 @@ describe('Design management design index page', () => {
   let wrapper;
   let router;
 
-  const newComment = 'new comment';
-  const annotationCoordinates = {
-    x: 10,
-    y: 10,
-    width: 100,
-    height: 100,
-  };
-  const createDiscussionMutationVariables = {
-    mutation: createImageDiffNoteMutation,
-    update: expect.anything(),
-    variables: {
-      input: {
-        body: newComment,
-        noteableId: design.id,
-        position: {
-          headSha: 'headSha',
-          baseSha: 'baseSha',
-          startSha: 'startSha',
-          paths: {
-            newPath: 'full-design-path',
-          },
-          ...annotationCoordinates,
-        },
-      },
-    },
-  };
-
-  const mutate = jest.fn().mockResolvedValue();
-
   const findDiscussionForm = () => wrapper.find(DesignReplyForm);
   const findSidebar = () => wrapper.find(DesignSidebar);
   const findDesignPresentation = () => wrapper.find(DesignPresentation);
@@ -122,19 +125,44 @@ describe('Design management design index page', () => {
     wrapper.destroy();
   });
 
-  describe('when navigating', () => {
-    it('applies fullscreen layout', () => {
-      const mockEl = {
-        classList: {
-          add: jest.fn(),
-          remove: jest.fn(),
-        },
-      };
-      jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockEl);
+  describe('when navigating to component', () => {
+    it('applies fullscreen layout class', () => {
+      jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockPageLayoutElement);
       createComponent({ loading: true });
 
-      expect(mockEl.classList.add).toHaveBeenCalledTimes(1);
-      expect(mockEl.classList.add).toHaveBeenCalledWith(...DESIGN_DETAIL_LAYOUT_CLASSLIST);
+      expect(mockPageLayoutElement.classList.add).toHaveBeenCalledTimes(1);
+      expect(mockPageLayoutElement.classList.add).toHaveBeenCalledWith(
+        ...DESIGN_DETAIL_LAYOUT_CLASSLIST,
+      );
+    });
+  });
+
+  describe('when navigating within the component', () => {
+    it('`scale` prop of DesignPresentation component is 1', async () => {
+      jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockPageLayoutElement);
+      createComponent({ loading: false }, { data: { design, scale: 2 } });
+
+      await wrapper.vm.$nextTick();
+      expect(findDesignPresentation().props('scale')).toBe(2);
+
+      DesignIndex.beforeRouteUpdate.call(wrapper.vm, {}, {}, jest.fn());
+      await wrapper.vm.$nextTick();
+
+      expect(findDesignPresentation().props('scale')).toBe(1);
+    });
+  });
+
+  describe('when navigating away from component', () => {
+    it('removes fullscreen layout class', async () => {
+      jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockPageLayoutElement);
+      createComponent({ loading: true });
+
+      wrapper.vm.$options.beforeRouteLeave[0].call(wrapper.vm, {}, {}, jest.fn());
+
+      expect(mockPageLayoutElement.classList.remove).toHaveBeenCalledTimes(1);
+      expect(mockPageLayoutElement.classList.remove).toHaveBeenCalledWith(
+        ...DESIGN_DETAIL_LAYOUT_CLASSLIST,
+      );
     });
   });
 
@@ -267,7 +295,7 @@ describe('Design management design index page', () => {
         wrapper.vm.onDesignQueryResult({ data: mockResponseNoDesigns, loading: false });
         return wrapper.vm.$nextTick().then(() => {
           expect(createFlash).toHaveBeenCalledTimes(1);
-          expect(createFlash).toHaveBeenCalledWith(DESIGN_NOT_FOUND_ERROR);
+          expect(createFlash).toHaveBeenCalledWith({ message: DESIGN_NOT_FOUND_ERROR });
           expect(router.push).toHaveBeenCalledTimes(1);
           expect(router.push).toHaveBeenCalledWith({ name: DESIGNS_ROUTE_NAME });
         });
@@ -288,7 +316,7 @@ describe('Design management design index page', () => {
         wrapper.vm.onDesignQueryResult({ data: mockResponseWithDesigns, loading: false });
         return wrapper.vm.$nextTick().then(() => {
           expect(createFlash).toHaveBeenCalledTimes(1);
-          expect(createFlash).toHaveBeenCalledWith(DESIGN_VERSION_NOT_EXIST_ERROR);
+          expect(createFlash).toHaveBeenCalledWith({ message: DESIGN_VERSION_NOT_EXIST_ERROR });
           expect(router.push).toHaveBeenCalledTimes(1);
           expect(router.push).toHaveBeenCalledWith({ name: DESIGNS_ROUTE_NAME });
         });
diff --git a/spec/frontend/design_management/pages/index_spec.js b/spec/frontend/design_management/pages/index_spec.js
index 27a91b11448..05238efd761 100644
--- a/spec/frontend/design_management/pages/index_spec.js
+++ b/spec/frontend/design_management/pages/index_spec.js
@@ -5,10 +5,12 @@ import VueRouter from 'vue-router';
 import { GlEmptyState } from '@gitlab/ui';
 import createMockApollo from 'jest/helpers/mock_apollo_helper';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
+import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql';
+import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql';
 import Index from '~/design_management/pages/index.vue';
 import uploadDesignQuery from '~/design_management/graphql/mutations/upload_design.mutation.graphql';
 import DesignDestroyer from '~/design_management/components/design_destroyer.vue';
-import DesignDropzone from '~/design_management/components/upload/design_dropzone.vue';
+import DesignDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue';
 import DeleteButton from '~/design_management/components/delete_button.vue';
 import Design from '~/design_management/components/list/item.vue';
 import { DESIGNS_ROUTE_NAME } from '~/design_management/router/constants';
@@ -16,10 +18,9 @@ import {
   EXISTING_DESIGN_DROP_MANY_FILES_MESSAGE,
   EXISTING_DESIGN_DROP_INVALID_FILENAME_MESSAGE,
 } from '~/design_management/utils/error_messages';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import 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';
 import {
   designListQueryResponse,
   designUploadMutationCreatedResponse,
@@ -29,8 +30,6 @@ import {
   reorderedDesigns,
   moveDesignMutationResponseWithErrors,
 } from '../mock_data/apollo_mock';
-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 { DESIGN_TRACKING_PAGE_NAME } from '~/design_management/utils/tracking';
 
@@ -106,6 +105,8 @@ describe('Design management index page', () => {
   const findDesignsWrapper = () => wrapper.find('[data-testid="designs-root"]');
   const findDesigns = () => wrapper.findAll(Design);
   const draggableAttributes = () => wrapper.find(VueDraggable).vm.$attrs;
+  const findDesignUploadButton = () => wrapper.find('[data-testid="design-upload-button"]');
+  const findDesignToolbarWrapper = () => wrapper.find('[data-testid="design-toolbar-wrapper"]');
 
   async function moveDesigns(localWrapper) {
     await jest.runOnlyPendingTimers();
@@ -215,13 +216,17 @@ describe('Design management index page', () => {
     it('renders designs list and header with upload button', () => {
       createComponent({ allVersions: [mockVersion] });
 
-      expect(wrapper.element).toMatchSnapshot();
+      expect(findDesignsWrapper().exists()).toBe(true);
+      expect(findDesigns().length).toBe(3);
+      expect(findDesignToolbarWrapper().exists()).toBe(true);
+      expect(findDesignUploadButton().exists()).toBe(true);
     });
 
     it('does not render toolbar when there is no permission', () => {
       createComponent({ designs: mockDesigns, allVersions: [mockVersion], createDesign: false });
 
-      expect(wrapper.element).toMatchSnapshot();
+      expect(findDesignToolbarWrapper().exists()).toBe(false);
+      expect(findDesignUploadButton().exists()).toBe(false);
     });
 
     it('has correct classes applied to design dropzone', () => {
@@ -248,7 +253,7 @@ describe('Design management index page', () => {
 
     it('renders design dropzone', () =>
       wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.element).toMatchSnapshot();
+        expect(findDropzone().exists()).toBe(true);
       }));
 
     it('has correct classes applied to design dropzone', () => {
@@ -444,10 +449,10 @@ describe('Design management index page', () => {
 
       return uploadDesign.then(() => {
         expect(createFlash).toHaveBeenCalledTimes(1);
-        expect(createFlash).toHaveBeenCalledWith(
-          'Upload skipped. test.jpg did not change.',
-          'warning',
-        );
+        expect(createFlash).toHaveBeenCalledWith({
+          message: 'Upload skipped. test.jpg did not change.',
+          types: 'warning',
+        });
       });
     });
 
@@ -483,7 +488,7 @@ describe('Design management index page', () => {
         designDropzone.vm.$emit('change', eventPayload);
 
         expect(createFlash).toHaveBeenCalledTimes(1);
-        expect(createFlash).toHaveBeenCalledWith(message);
+        expect(createFlash).toHaveBeenCalledWith({ message });
       });
     });
 
@@ -682,13 +687,6 @@ describe('Design management index page', () => {
   });
 
   describe('when navigating', () => {
-    it('ensures fullscreen layout is not applied', () => {
-      createComponent({ loading: true });
-
-      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',
@@ -755,7 +753,7 @@ describe('Design management index page', () => {
 
       await wrapper.vm.$nextTick();
 
-      expect(createFlash).toHaveBeenCalledWith('Houston, we have a problem');
+      expect(createFlash).toHaveBeenCalledWith({ message: 'Houston, we have a problem' });
     });
 
     it('displays flash if mutation had a non-recoverable error', async () => {
@@ -769,9 +767,9 @@ describe('Design management index page', () => {
       await jest.runOnlyPendingTimers(); // kick off the mocked GQL stuff (promises)
       await wrapper.vm.$nextTick(); // kick off the DOM update for flash
 
-      expect(createFlash).toHaveBeenCalledWith(
-        'Something went wrong when reordering designs. Please try again',
-      );
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'Something went wrong when reordering designs. Please try again',
+      });
     });
   });
 });
diff --git a/spec/frontend/design_management/utils/cache_update_spec.js b/spec/frontend/design_management/utils/cache_update_spec.js
index 6c859e8c3e8..2fb08c3ef05 100644
--- a/spec/frontend/design_management/utils/cache_update_spec.js
+++ b/spec/frontend/design_management/utils/cache_update_spec.js
@@ -3,7 +3,7 @@ import {
   updateStoreAfterDesignsDelete,
   updateStoreAfterAddImageDiffNote,
   updateStoreAfterUploadDesign,
-  updateStoreAfterUpdateImageDiffNote,
+  updateStoreAfterRepositionImageDiffNote,
 } from '~/design_management/utils/cache_update';
 import {
   designDeletionError,
@@ -11,7 +11,7 @@ import {
   UPDATE_IMAGE_DIFF_NOTE_ERROR,
 } from '~/design_management/utils/error_messages';
 import design from '../mock_data/design';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 
 jest.mock('~/flash.js');
 
@@ -26,16 +26,16 @@ describe('Design Management cache update', () => {
 
   describe('error handling', () => {
     it.each`
-      fnName                                   | subject                                | errorMessage                               | extraArgs
-      ${'updateStoreAfterDesignsDelete'}       | ${updateStoreAfterDesignsDelete}       | ${designDeletionError({ singular: true })} | ${[[design]]}
-      ${'updateStoreAfterAddImageDiffNote'}    | ${updateStoreAfterAddImageDiffNote}    | ${ADD_IMAGE_DIFF_NOTE_ERROR}               | ${[]}
-      ${'updateStoreAfterUploadDesign'}        | ${updateStoreAfterUploadDesign}        | ${mockErrors[0]}                           | ${[]}
-      ${'updateStoreAfterUpdateImageDiffNote'} | ${updateStoreAfterUpdateImageDiffNote} | ${UPDATE_IMAGE_DIFF_NOTE_ERROR}            | ${[]}
+      fnName                                   | subject                                    | errorMessage                               | extraArgs
+      ${'updateStoreAfterDesignsDelete'}       | ${updateStoreAfterDesignsDelete}           | ${designDeletionError({ singular: true })} | ${[[design]]}
+      ${'updateStoreAfterAddImageDiffNote'}    | ${updateStoreAfterAddImageDiffNote}        | ${ADD_IMAGE_DIFF_NOTE_ERROR}               | ${[]}
+      ${'updateStoreAfterUploadDesign'}        | ${updateStoreAfterUploadDesign}            | ${mockErrors[0]}                           | ${[]}
+      ${'updateStoreAfterUpdateImageDiffNote'} | ${updateStoreAfterRepositionImageDiffNote} | ${UPDATE_IMAGE_DIFF_NOTE_ERROR}            | ${[]}
     `('$fnName handles errors in response', ({ subject, extraArgs, errorMessage }) => {
       expect(createFlash).not.toHaveBeenCalled();
       expect(() => subject(mockStore, { errors: mockErrors }, {}, ...extraArgs)).toThrow();
       expect(createFlash).toHaveBeenCalledTimes(1);
-      expect(createFlash).toHaveBeenCalledWith(errorMessage);
+      expect(createFlash).toHaveBeenCalledWith({ message: errorMessage });
     });
   });
 });
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 232cfa2f4ca..368448ead10 100644
--- a/spec/frontend/design_management/utils/design_management_utils_spec.js
+++ b/spec/frontend/design_management/utils/design_management_utils_spec.js
@@ -3,7 +3,7 @@ import {
   extractDiscussions,
   findVersionId,
   designUploadOptimisticResponse,
-  updateImageDiffNoteOptimisticResponse,
+  repositionImageDiffNoteOptimisticResponse,
   isValidDesignFile,
   extractDesign,
   extractDesignNoteId,
@@ -112,7 +112,7 @@ describe('optimistic responses', () => {
     expect(designUploadOptimisticResponse([{ name: 'test' }])).toEqual(expectedResponse);
   });
 
-  it('correctly generated for updateImageDiffNoteOptimisticResponse', () => {
+  it('correctly generated for repositionImageDiffNoteOptimisticResponse', () => {
     const mockNote = {
       id: 'test-note-id',
     };
@@ -126,8 +126,8 @@ describe('optimistic responses', () => {
 
     const expectedResponse = {
       __typename: 'Mutation',
-      updateImageDiffNote: {
-        __typename: 'UpdateImageDiffNotePayload',
+      repositionImageDiffNote: {
+        __typename: 'RepositionImageDiffNotePayload',
         note: {
           ...mockNote,
           position: mockPosition,
@@ -135,7 +135,7 @@ describe('optimistic responses', () => {
         errors: [],
       },
     };
-    expect(updateImageDiffNoteOptimisticResponse(mockNote, { position: mockPosition })).toEqual(
+    expect(repositionImageDiffNoteOptimisticResponse(mockNote, { position: mockPosition })).toEqual(
       expectedResponse,
     );
   });