Resolve "Error when quickly reordering designs"

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

@@ -71,6 +71,7 @@ export default {
       selectedDesigns: [],
       isDraggingDesign: false,
       reorderedDesigns: null,
+      isReorderingInProgress: false,
     };
   },
   computed: {
@@ -277,6 +278,7 @@ export default {
       return variables;
     },
     reorderDesigns({ moved: { newIndex, element } }) {
+      this.isReorderingInProgress = true;
       this.$apollo
         .mutate({
           mutation: moveDesignMutation,
@@ -287,6 +289,9 @@ export default {
         })
         .catch(() => {
           createFlash(MOVE_DESIGN_ERROR);
+        })
+        .finally(() => {
+          this.isReorderingInProgress = false;
         });
     },
     onDesignMove(designs) {
@@ -358,7 +363,7 @@ export default {
       <vue-draggable
         v-else
         :value="designs"
-        :disabled="!isLatestVersion"
+        :disabled="!isLatestVersion || isReorderingInProgress"
         v-bind="$options.dragOptions"
         tag="ol"
         draggable=".js-design-tile"

changelogs/unreleased/237923-error-when-quickly-reordering-designs.yml

+---
+title: Resolve Error when quickly reordering designs
+merge_request: 42818
+author:
+type: fixed

spec/frontend/design_management/pages/index_spec.js

@@ -99,6 +99,7 @@ describe('Design management index page', () => {
   const findFirstDropzoneWithDesign = () => wrapper.findAll(DesignDropzone).at(1);
   const findDesignsWrapper = () => wrapper.find('[data-testid="designs-root"]');
   const findDesigns = () => wrapper.findAll(Design);
+  const draggableAttributes = () => wrapper.find(VueDraggable).vm.$attrs;
 
   async function moveDesigns(localWrapper) {
     await jest.runOnlyPendingTimers();
@@ -676,6 +677,20 @@ describe('Design management index page', () => {
       ).toBe('2');
     });
 
+    it('prevents reordering when reorderDesigns mutation is in progress', async () => {
+      createComponentWithApollo({});
+
+      await moveDesigns(wrapper);
+
+      expect(draggableAttributes().disabled).toBe(true);
+
+      await jest.runOnlyPendingTimers(); // kick off the mocked GQL stuff (promises)
+      await wrapper.vm.$nextTick(); // kick off the DOM update
+      await wrapper.vm.$nextTick(); // kick off the DOM update for finally block
+
+      expect(draggableAttributes().disabled).toBe(false);
+    });
+
     it('displays flash if mutation had a recoverable error', async () => {
       createComponentWithApollo({
         moveHandler: jest.fn().mockResolvedValue(moveDesignMutationResponseWithErrors),