Add latest changes from gitlab-org/gitlab@master

17 files changed, 201 insertions, 361 deletions

diff --git a/spec/frontend/ide/components/activity_bar_spec.js b/spec/frontend/ide/components/activity_bar_spec.js
index 657817eb3d8..39fe2c7e723 100644
--- a/spec/frontend/ide/components/activity_bar_spec.js
+++ b/spec/frontend/ide/components/activity_bar_spec.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import ActivityBar from '~/ide/components/activity_bar.vue';
 import { leftSidebarViews } from '~/ide/constants';
@@ -61,14 +61,11 @@ describe('IDE activity bar', () => {
       expect(vm.$el.querySelector('.js-ide-edit-mode').classList).toContain('active');
     });
 
-    it('sets commit item active', (done) => {
+    it('sets commit item active', async () => {
       vm.$store.state.currentActivityView = leftSidebarViews.commit.name;
 
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.js-ide-commit-mode').classList).toContain('active');
-
-        done();
-      });
+      await nextTick();
+      expect(vm.$el.querySelector('.js-ide-commit-mode').classList).toContain('active');
     });
   });
 
diff --git a/spec/frontend/ide/components/commit_sidebar/actions_spec.js b/spec/frontend/ide/components/commit_sidebar/actions_spec.js
index ed9d11246ae..c9425f6c9cd 100644
--- a/spec/frontend/ide/components/commit_sidebar/actions_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/actions_spec.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { projectData, branches } from 'jest/ide/mock_data';
 import commitActions from '~/ide/components/commit_sidebar/actions.vue';
@@ -71,15 +71,12 @@ describe('IDE commit sidebar actions', () => {
     expect(findText()).toContain('Commit to main branch');
   });
 
-  it('hides merge request option when project merge requests are disabled', (done) => {
+  it('hides merge request option when project merge requests are disabled', async () => {
     createComponent({ hasMR: false });
 
-    vm.$nextTick(() => {
-      expect(findRadios().length).toBe(2);
-      expect(findText()).not.toContain('Create a new branch and merge request');
-
-      done();
-    });
+    await nextTick();
+    expect(findRadios().length).toBe(2);
+    expect(findText()).not.toContain('Create a new branch and merge request');
   });
 
   describe('currentBranchText', () => {
@@ -105,22 +102,18 @@ describe('IDE commit sidebar actions', () => {
       expect(vm.$store.dispatch).not.toHaveBeenCalled();
     });
 
-    it('calls again after staged changes', (done) => {
+    it('calls again after staged changes', async () => {
       createComponent({ currentBranchId: null });
 
       vm.$store.state.currentBranchId = 'main';
       vm.$store.state.changedFiles.push({});
       vm.$store.state.stagedFiles.push({});
 
-      vm.$nextTick()
-        .then(() => {
-          expect(vm.$store.dispatch).toHaveBeenCalledWith(
-            ACTION_UPDATE_COMMIT_ACTION,
-            expect.anything(),
-          );
-        })
-        .then(done)
-        .catch(done.fail);
+      await nextTick();
+      expect(vm.$store.dispatch).toHaveBeenCalledWith(
+        ACTION_UPDATE_COMMIT_ACTION,
+        expect.anything(),
+      );
     });
 
     it.each`
diff --git a/spec/frontend/ide/components/commit_sidebar/list_item_spec.js b/spec/frontend/ide/components/commit_sidebar/list_item_spec.js
index b91ee88e0d6..78810da7f2c 100644
--- a/spec/frontend/ide/components/commit_sidebar/list_item_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/list_item_spec.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { trimText } from 'helpers/text_helper';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import listItem from '~/ide/components/commit_sidebar/list_item.vue';
@@ -41,26 +41,18 @@ describe('Multi-file editor commit sidebar list item', () => {
     expect(findPathText()).toContain(f.path);
   });
 
-  it('correctly renders renamed entries', (done) => {
+  it('correctly renders renamed entries', async () => {
     Vue.set(vm.file, 'prevName', 'Old name');
 
-    vm.$nextTick()
-      .then(() => {
-        expect(findPathText()).toEqual(`Old name → ${f.name}`);
-      })
-      .then(done)
-      .catch(done.fail);
+    await nextTick();
+    expect(findPathText()).toEqual(`Old name → ${f.name}`);
   });
 
-  it('correctly renders entry, the name of which did not change after rename (as within a folder)', (done) => {
+  it('correctly renders entry, the name of which did not change after rename (as within a folder)', async () => {
     Vue.set(vm.file, 'prevName', f.name);
 
-    vm.$nextTick()
-      .then(() => {
-        expect(findPathText()).toEqual(f.name);
-      })
-      .then(done)
-      .catch(done.fail);
+    await nextTick();
+    expect(findPathText()).toEqual(f.name);
   });
 
   it('opens a closed file in the editor when clicking the file path', (done) => {
@@ -134,14 +126,11 @@ describe('Multi-file editor commit sidebar list item', () => {
       expect(vm.$el.querySelector('.is-active')).toBe(null);
     });
 
-    it('adds active class when keys match', (done) => {
+    it('adds active class when keys match', async () => {
       vm.keyPrefix = 'staged';
 
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.is-active')).not.toBe(null);
-
-        done();
-      });
+      await nextTick();
+      expect(vm.$el.querySelector('.is-active')).not.toBe(null);
     });
   });
 });
diff --git a/spec/frontend/ide/components/commit_sidebar/message_field_spec.js b/spec/frontend/ide/components/commit_sidebar/message_field_spec.js
index 1514fbc2c3b..e66de6bb0b0 100644
--- a/spec/frontend/ide/components/commit_sidebar/message_field_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/message_field_spec.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import createComponent from 'helpers/vue_mount_component_helper';
 import CommitMessageField from '~/ide/components/commit_sidebar/message_field.vue';
 
@@ -23,34 +23,23 @@ describe('IDE commit message field', () => {
     vm.$destroy();
   });
 
-  it('adds is-focused class on focus', (done) => {
+  it('adds is-focused class on focus', async () => {
     vm.$el.querySelector('textarea').focus();
 
-    vm.$nextTick(() => {
-      expect(vm.$el.querySelector('.is-focused')).not.toBeNull();
-
-      done();
-    });
+    await nextTick();
+    expect(vm.$el.querySelector('.is-focused')).not.toBeNull();
   });
 
-  it('removed is-focused class on blur', (done) => {
+  it('removed is-focused class on blur', async () => {
     vm.$el.querySelector('textarea').focus();
 
-    vm.$nextTick()
-      .then(() => {
-        expect(vm.$el.querySelector('.is-focused')).not.toBeNull();
-
-        vm.$el.querySelector('textarea').blur();
+    await nextTick();
+    expect(vm.$el.querySelector('.is-focused')).not.toBeNull();
 
-        return vm.$nextTick();
-      })
-      .then(() => {
-        expect(vm.$el.querySelector('.is-focused')).toBeNull();
+    vm.$el.querySelector('textarea').blur();
 
-        done();
-      })
-      .then(done)
-      .catch(done.fail);
+    await nextTick();
+    expect(vm.$el.querySelector('.is-focused')).toBeNull();
   });
 
   it('emits input event on input', () => {
@@ -66,105 +55,78 @@ describe('IDE commit message field', () => {
 
   describe('highlights', () => {
     describe('subject line', () => {
-      it('does not highlight less than 50 characters', (done) => {
+      it('does not highlight less than 50 characters', async () => {
         vm.text = 'text less than 50 chars';
 
-        vm.$nextTick()
-          .then(() => {
-            expect(vm.$el.querySelector('.highlights span').textContent).toContain(
-              'text less than 50 chars',
-            );
+        await nextTick();
+        expect(vm.$el.querySelector('.highlights span').textContent).toContain(
+          'text less than 50 chars',
+        );
 
-            expect(vm.$el.querySelector('mark').style.display).toBe('none');
-          })
-          .then(done)
-          .catch(done.fail);
+        expect(vm.$el.querySelector('mark').style.display).toBe('none');
       });
 
-      it('highlights characters over 50 length', (done) => {
+      it('highlights characters over 50 length', async () => {
         vm.text =
           'text less than 50 chars that should not highlighted. text more than 50 should be highlighted';
 
-        vm.$nextTick()
-          .then(() => {
-            expect(vm.$el.querySelector('.highlights span').textContent).toContain(
-              'text less than 50 chars that should not highlighte',
-            );
-
-            expect(vm.$el.querySelector('mark').style.display).not.toBe('none');
-            expect(vm.$el.querySelector('mark').textContent).toBe(
-              'd. text more than 50 should be highlighted',
-            );
-          })
-          .then(done)
-          .catch(done.fail);
+        await nextTick();
+        expect(vm.$el.querySelector('.highlights span').textContent).toContain(
+          'text less than 50 chars that should not highlighte',
+        );
+
+        expect(vm.$el.querySelector('mark').style.display).not.toBe('none');
+        expect(vm.$el.querySelector('mark').textContent).toBe(
+          'd. text more than 50 should be highlighted',
+        );
       });
     });
 
     describe('body text', () => {
-      it('does not highlight body text less tan 72 characters', (done) => {
+      it('does not highlight body text less tan 72 characters', async () => {
         vm.text = 'subject line\nbody content';
 
-        vm.$nextTick()
-          .then(() => {
-            expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2);
-            expect(vm.$el.querySelectorAll('mark')[1].style.display).toBe('none');
-          })
-          .then(done)
-          .catch(done.fail);
+        await nextTick();
+        expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2);
+        expect(vm.$el.querySelectorAll('mark')[1].style.display).toBe('none');
       });
 
-      it('highlights body text more than 72 characters', (done) => {
+      it('highlights body text more than 72 characters', async () => {
         vm.text =
           'subject line\nbody content that will be highlighted when it is more than 72 characters in length';
 
-        vm.$nextTick()
-          .then(() => {
-            expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2);
-            expect(vm.$el.querySelectorAll('mark')[1].style.display).not.toBe('none');
-            expect(vm.$el.querySelectorAll('mark')[1].textContent).toBe(' in length');
-          })
-          .then(done)
-          .catch(done.fail);
+        await nextTick();
+        expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2);
+        expect(vm.$el.querySelectorAll('mark')[1].style.display).not.toBe('none');
+        expect(vm.$el.querySelectorAll('mark')[1].textContent).toBe(' in length');
       });
 
-      it('highlights body text & subject line', (done) => {
+      it('highlights body text & subject line', async () => {
         vm.text =
           'text less than 50 chars that should not highlighted\nbody content that will be highlighted when it is more than 72 characters in length';
 
-        vm.$nextTick()
-          .then(() => {
-            expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2);
-            expect(vm.$el.querySelectorAll('mark').length).toBe(2);
+        await nextTick();
+        expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2);
+        expect(vm.$el.querySelectorAll('mark').length).toBe(2);
 
-            expect(vm.$el.querySelectorAll('mark')[0].textContent).toContain('d');
-            expect(vm.$el.querySelectorAll('mark')[1].textContent).toBe(' in length');
-          })
-          .then(done)
-          .catch(done.fail);
+        expect(vm.$el.querySelectorAll('mark')[0].textContent).toContain('d');
+        expect(vm.$el.querySelectorAll('mark')[1].textContent).toBe(' in length');
       });
     });
   });
 
   describe('scrolling textarea', () => {
-    it('updates transform of highlights', (done) => {
+    it('updates transform of highlights', async () => {
       vm.text = 'subject line\n\n\n\n\n\n\n\n\n\n\nbody content';
 
-      vm.$nextTick()
-        .then(() => {
-          vm.$el.querySelector('textarea').scrollTo(0, 50);
-
-          vm.handleScroll();
-        })
-        .then(vm.$nextTick)
-        .then(() => {
-          expect(vm.scrollTop).toBe(50);
-          expect(vm.$el.querySelector('.highlights').style.transform).toBe(
-            'translate3d(0, -50px, 0)',
-          );
-        })
-        .then(done)
-        .catch(done.fail);
+      await nextTick();
+      vm.$el.querySelector('textarea').scrollTo(0, 50);
+
+      vm.handleScroll();
+
+      await nextTick();
+      expect(vm.scrollTop).toBe(50);
+      expect(vm.$el.querySelector('.highlights').style.transform).toBe('translate3d(0, -50px, 0)');
     });
   });
 });
diff --git a/spec/frontend/ide/components/commit_sidebar/new_merge_request_option_spec.js b/spec/frontend/ide/components/commit_sidebar/new_merge_request_option_spec.js
index 4474647552d..64b53264b4d 100644
--- a/spec/frontend/ide/components/commit_sidebar/new_merge_request_option_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/new_merge_request_option_spec.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { projectData, branches } from 'jest/ide/mock_data';
 import NewMergeRequestOption from '~/ide/components/commit_sidebar/new_merge_request_option.vue';
@@ -72,15 +72,11 @@ describe('create new MR checkbox', () => {
         expect(vm.$el.textContent).not.toBe('');
       });
 
-      it('has new MR', (done) => {
+      it('has new MR', async () => {
         setMR();
 
-        vm.$nextTick()
-          .then(() => {
-            expect(vm.$el.textContent).not.toBe('');
-          })
-          .then(done)
-          .catch(done.fail);
+        await nextTick();
+        expect(vm.$el.textContent).not.toBe('');
       });
     });
 
@@ -96,15 +92,11 @@ describe('create new MR checkbox', () => {
         expect(vm.$el.textContent).toBe('');
       });
 
-      it('has new MR', (done) => {
+      it('has new MR', async () => {
         setMR();
 
-        vm.$nextTick()
-          .then(() => {
-            expect(vm.$el.textContent).toBe('');
-          })
-          .then(done)
-          .catch(done.fail);
+        await nextTick();
+        expect(vm.$el.textContent).toBe('');
       });
     });
   });
@@ -121,15 +113,11 @@ describe('create new MR checkbox', () => {
         expect(vm.$el.textContent).not.toBe('');
       });
 
-      it('is rendered if MR exists', (done) => {
+      it('is rendered if MR exists', async () => {
         setMR();
 
-        vm.$nextTick()
-          .then(() => {
-            expect(vm.$el.textContent).not.toBe('');
-          })
-          .then(done)
-          .catch(done.fail);
+        await nextTick();
+        expect(vm.$el.textContent).not.toBe('');
       });
     });
 
@@ -144,15 +132,11 @@ describe('create new MR checkbox', () => {
         expect(vm.$el.textContent).not.toBe('');
       });
 
-      it('is hidden if MR exists', (done) => {
+      it('is hidden if MR exists', async () => {
         setMR();
 
-        vm.$nextTick()
-          .then(() => {
-            expect(vm.$el.textContent).toBe('');
-          })
-          .then(done)
-          .catch(done.fail);
+        await nextTick();
+        expect(vm.$el.textContent).toBe('');
       });
     });
   });
@@ -168,15 +152,11 @@ describe('create new MR checkbox', () => {
       expect(vm.$el.textContent).not.toBe('');
     });
 
-    it('is hidden if MR exists', (done) => {
+    it('is hidden if MR exists', async () => {
       setMR();
 
-      vm.$nextTick()
-        .then(() => {
-          expect(vm.$el.textContent).toBe('');
-        })
-        .then(done)
-        .catch(done.fail);
+      await nextTick();
+      expect(vm.$el.textContent).toBe('');
     });
 
     it('shows enablded checkbox', () => {
diff --git a/spec/frontend/ide/components/file_row_extra_spec.js b/spec/frontend/ide/components/file_row_extra_spec.js
index 641407c7b77..5a7a1fe7db0 100644
--- a/spec/frontend/ide/components/file_row_extra_spec.js
+++ b/spec/frontend/ide/components/file_row_extra_spec.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import FileRowExtra from '~/ide/components/file_row_extra.vue';
 import { createStore } from '~/ide/stores';
@@ -70,28 +70,22 @@ describe('IDE extra file row component', () => {
       expect(vm.$el.querySelector('.ide-tree-changes')).toBe(null);
     });
 
-    it('does not show when tree is open', (done) => {
+    it('does not show when tree is open', async () => {
       vm.file.type = 'tree';
       vm.file.opened = true;
       changesCount = 1;
 
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.ide-tree-changes')).toBe(null);
-
-        done();
-      });
+      await nextTick();
+      expect(vm.$el.querySelector('.ide-tree-changes')).toBe(null);
     });
 
-    it('shows for trees with changes', (done) => {
+    it('shows for trees with changes', async () => {
       vm.file.type = 'tree';
       vm.file.opened = false;
       changesCount = 1;
 
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.ide-tree-changes')).not.toBe(null);
-
-        done();
-      });
+      await nextTick();
+      expect(vm.$el.querySelector('.ide-tree-changes')).not.toBe(null);
     });
   });
 
@@ -100,55 +94,40 @@ describe('IDE extra file row component', () => {
       expect(vm.$el.querySelector('.file-changed-icon')).toBe(null);
     });
 
-    it('shows when file is changed', (done) => {
+    it('shows when file is changed', async () => {
       vm.file.changed = true;
 
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.file-changed-icon')).not.toBe(null);
-
-        done();
-      });
+      await nextTick();
+      expect(vm.$el.querySelector('.file-changed-icon')).not.toBe(null);
     });
 
-    it('shows when file is staged', (done) => {
+    it('shows when file is staged', async () => {
       vm.file.staged = true;
 
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.file-changed-icon')).not.toBe(null);
-
-        done();
-      });
+      await nextTick();
+      expect(vm.$el.querySelector('.file-changed-icon')).not.toBe(null);
     });
 
-    it('shows when file is a tempFile', (done) => {
+    it('shows when file is a tempFile', async () => {
       vm.file.tempFile = true;
 
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.file-changed-icon')).not.toBe(null);
-
-        done();
-      });
+      await nextTick();
+      expect(vm.$el.querySelector('.file-changed-icon')).not.toBe(null);
     });
 
-    it('shows when file is renamed', (done) => {
+    it('shows when file is renamed', async () => {
       vm.file.prevPath = 'original-file';
 
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.file-changed-icon')).not.toBe(null);
-
-        done();
-      });
+      await nextTick();
+      expect(vm.$el.querySelector('.file-changed-icon')).not.toBe(null);
     });
 
-    it('hides when file is renamed', (done) => {
+    it('hides when file is renamed', async () => {
       vm.file.prevPath = 'original-file';
       vm.file.type = 'tree';
 
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.file-changed-icon')).toBe(null);
-
-        done();
-      });
+      await nextTick();
+      expect(vm.$el.querySelector('.file-changed-icon')).toBe(null);
     });
   });
 
@@ -157,14 +136,11 @@ describe('IDE extra file row component', () => {
       expect(vm.$el.querySelector('[data-testid="git-merge-icon"]')).toBe(null);
     });
 
-    it('shows when a merge request change', (done) => {
+    it('shows when a merge request change', async () => {
       vm.file.mrChange = true;
 
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('[data-testid="git-merge-icon"]')).not.toBe(null);
-
-        done();
-      });
+      await nextTick();
+      expect(vm.$el.querySelector('[data-testid="git-merge-icon"]')).not.toBe(null);
     });
   });
 });
diff --git a/spec/frontend/ide/components/file_templates/bar_spec.js b/spec/frontend/ide/components/file_templates/bar_spec.js
index 4ca99f8d055..e8ebfa78fe9 100644
--- a/spec/frontend/ide/components/file_templates/bar_spec.js
+++ b/spec/frontend/ide/components/file_templates/bar_spec.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
 import Bar from '~/ide/components/file_templates/bar.vue';
 import { createStore } from '~/ide/stores';
@@ -46,7 +46,7 @@ describe('IDE file templates bar component', () => {
   });
 
   describe('template dropdown', () => {
-    beforeEach((done) => {
+    beforeEach(async () => {
       vm.$store.state.fileTemplates.templates = [
         {
           name: 'test',
@@ -57,7 +57,7 @@ describe('IDE file templates bar component', () => {
         key: 'gitlab_ci_ymls',
       };
 
-      vm.$nextTick(done);
+      await nextTick();
     });
 
     it('renders dropdown component', () => {
@@ -75,14 +75,11 @@ describe('IDE file templates bar component', () => {
     });
   });
 
-  it('shows undo button if updateSuccess is true', (done) => {
+  it('shows undo button if updateSuccess is true', async () => {
     vm.$store.state.fileTemplates.updateSuccess = true;
 
-    vm.$nextTick(() => {
-      expect(vm.$el.querySelector('.btn-default').style.display).not.toBe('none');
-
-      done();
-    });
+    await nextTick();
+    expect(vm.$el.querySelector('.btn-default').style.display).not.toBe('none');
   });
 
   it('calls undoFileTemplate when clicking undo button', () => {
@@ -93,7 +90,7 @@ describe('IDE file templates bar component', () => {
     expect(vm.undoFileTemplate).toHaveBeenCalled();
   });
 
-  it('calls setSelectedTemplateType if activeFile name matches a template', (done) => {
+  it('calls setSelectedTemplateType if activeFile name matches a template', async () => {
     const fileName = '.gitlab-ci.yml';
 
     jest.spyOn(vm, 'setSelectedTemplateType').mockImplementation(() => {});
@@ -101,13 +98,10 @@ describe('IDE file templates bar component', () => {
 
     vm.setInitialType();
 
-    vm.$nextTick(() => {
-      expect(vm.setSelectedTemplateType).toHaveBeenCalledWith({
-        name: fileName,
-        key: 'gitlab_ci_ymls',
-      });
-
-      done();
+    await nextTick();
+    expect(vm.setSelectedTemplateType).toHaveBeenCalledWith({
+      name: fileName,
+      key: 'gitlab_ci_ymls',
     });
   });
 });
diff --git a/spec/frontend/ide/components/ide_status_bar_spec.js b/spec/frontend/ide/components/ide_status_bar_spec.js
index f1a0b64caf2..00ef75fcf3a 100644
--- a/spec/frontend/ide/components/ide_status_bar_spec.js
+++ b/spec/frontend/ide/components/ide_status_bar_spec.js
@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { TEST_HOST } from 'helpers/test_constants';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import IdeStatusBar from '~/ide/components/ide_status_bar.vue';
@@ -73,7 +73,7 @@ describe('ideStatusBar', () => {
     });
 
     describe('pipeline status', () => {
-      it('opens right sidebar on clicking icon', (done) => {
+      it('opens right sidebar on clicking icon', async () => {
         jest.spyOn(vm, 'openRightPane').mockImplementation(() => {});
         Vue.set(vm.$store.state.pipelines, 'latestPipeline', {
           details: {
@@ -88,14 +88,10 @@ describe('ideStatusBar', () => {
           },
         });
 
-        vm.$nextTick()
-          .then(() => {
-            vm.$el.querySelector('.ide-status-pipeline button').click();
+        await nextTick();
+        vm.$el.querySelector('.ide-status-pipeline button').click();
 
-            expect(vm.openRightPane).toHaveBeenCalledWith(rightSidebarViews.pipelines);
-          })
-          .then(done)
-          .catch(done.fail);
+        expect(vm.openRightPane).toHaveBeenCalledWith(rightSidebarViews.pipelines);
       });
     });
 
diff --git a/spec/frontend/ide/components/ide_tree_list_spec.js b/spec/frontend/ide/components/ide_tree_list_spec.js
index ace51204374..a85c52f5e86 100644
--- a/spec/frontend/ide/components/ide_tree_list_spec.js
+++ b/spec/frontend/ide/components/ide_tree_list_spec.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import IdeTreeList from '~/ide/components/ide_tree_list.vue';
 import { createStore } from '~/ide/stores';
@@ -48,15 +48,12 @@ describe('IDE tree list', () => {
       expect(vm.$emit).toHaveBeenCalledWith('tree-ready');
     });
 
-    it('renders loading indicator', (done) => {
+    it('renders loading indicator', async () => {
       store.state.trees['abcproject/main'].loading = true;
 
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.multi-file-loading-container')).not.toBeNull();
-        expect(vm.$el.querySelectorAll('.multi-file-loading-container').length).toBe(3);
-
-        done();
-      });
+      await nextTick();
+      expect(vm.$el.querySelector('.multi-file-loading-container')).not.toBeNull();
+      expect(vm.$el.querySelectorAll('.multi-file-loading-container').length).toBe(3);
     });
 
     it('renders list of files', () => {
diff --git a/spec/frontend/ide/components/jobs/detail_spec.js b/spec/frontend/ide/components/jobs/detail_spec.js
index 3634599f328..9122471d421 100644
--- a/spec/frontend/ide/components/jobs/detail_spec.js
+++ b/spec/frontend/ide/components/jobs/detail_spec.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { TEST_HOST } from 'helpers/test_constants';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import JobDetail from '~/ide/components/jobs/detail.vue';
@@ -48,14 +48,11 @@ describe('IDE jobs detail view', () => {
       expect(vm.$el.querySelector('.bash').textContent).toContain('testing');
     });
 
-    it('renders empty message output', (done) => {
+    it('renders empty message output', async () => {
       vm.$store.state.pipelines.detailJob.output = '';
 
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.bash').textContent).toContain('No messages were logged');
-
-        done();
-      });
+      await nextTick();
+      expect(vm.$el.querySelector('.bash').textContent).toContain('No messages were logged');
     });
 
     it('renders loading icon', () => {
@@ -68,14 +65,11 @@ describe('IDE jobs detail view', () => {
       expect(vm.$el.querySelector('.bash').style.display).toBe('none');
     });
 
-    it('hide loading icon when isLoading is false', (done) => {
+    it('hide loading icon when isLoading is false', async () => {
       vm.$store.state.pipelines.detailJob.isLoading = false;
 
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.build-loader-animation').style.display).toBe('none');
-
-        done();
-      });
+      await nextTick();
+      expect(vm.$el.querySelector('.build-loader-animation').style.display).toBe('none');
     });
 
     it('resets detailJob when clicking header button', () => {
@@ -107,17 +101,16 @@ describe('IDE jobs detail view', () => {
       fnName          | btnName   | scrollPos
       ${'scrollDown'} | ${'down'} | ${0}
       ${'scrollUp'}   | ${'up'}   | ${1}
-    `('triggers $fnName when clicking $btnName button', ({ fnName, scrollPos }) => {
+    `('triggers $fnName when clicking $btnName button', async ({ fnName, scrollPos }) => {
       jest.spyOn(vm, fnName).mockImplementation();
 
       vm = vm.$mount();
 
       vm.scrollPos = scrollPos;
 
-      return vm.$nextTick().then(() => {
-        vm.$el.querySelector('.btn-scroll:not([disabled])').click();
-        expect(vm[fnName]).toHaveBeenCalled();
-      });
+      await nextTick();
+      vm.$el.querySelector('.btn-scroll:not([disabled])').click();
+      expect(vm[fnName]).toHaveBeenCalled();
     });
   });
 
diff --git a/spec/frontend/ide/components/jobs/item_spec.js b/spec/frontend/ide/components/jobs/item_spec.js
index 7343fc80a03..c76760a5522 100644
--- a/spec/frontend/ide/components/jobs/item_spec.js
+++ b/spec/frontend/ide/components/jobs/item_spec.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import mountComponent from 'helpers/vue_mount_component_helper';
 import JobItem from '~/ide/components/jobs/item.vue';
 import { jobs } from '../../mock_data';
@@ -27,13 +27,10 @@ describe('IDE jobs item', () => {
     expect(vm.$el.querySelector('[data-testid="status_success_borderless-icon"]')).not.toBe(null);
   });
 
-  it('does not render view logs button if not started', (done) => {
+  it('does not render view logs button if not started', async () => {
     vm.job.started = false;
 
-    vm.$nextTick(() => {
-      expect(vm.$el.querySelector('.btn')).toBe(null);
-
-      done();
-    });
+    await nextTick();
+    expect(vm.$el.querySelector('.btn')).toBe(null);
   });
 });
diff --git a/spec/frontend/ide/components/nav_dropdown_button_spec.js b/spec/frontend/ide/components/nav_dropdown_button_spec.js
index a02bfa5c391..1c14685df68 100644
--- a/spec/frontend/ide/components/nav_dropdown_button_spec.js
+++ b/spec/frontend/ide/components/nav_dropdown_button_spec.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { trimText } from 'helpers/text_helper';
 import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
 import NavDropdownButton from '~/ide/components/nav_dropdown_button.vue';
@@ -36,38 +36,26 @@ describe('NavDropdown', () => {
       expect(trimText(vm.$el.textContent)).toEqual('- -');
     });
 
-    it('renders branch name, if state has currentBranchId', (done) => {
+    it('renders branch name, if state has currentBranchId', async () => {
       vm.$store.state.currentBranchId = TEST_BRANCH_ID;
 
-      vm.$nextTick()
-        .then(() => {
-          expect(trimText(vm.$el.textContent)).toEqual(`${TEST_BRANCH_ID} -`);
-        })
-        .then(done)
-        .catch(done.fail);
+      await nextTick();
+      expect(trimText(vm.$el.textContent)).toEqual(`${TEST_BRANCH_ID} -`);
     });
 
-    it('renders mr id, if state has currentMergeRequestId', (done) => {
+    it('renders mr id, if state has currentMergeRequestId', async () => {
       vm.$store.state.currentMergeRequestId = TEST_MR_ID;
 
-      vm.$nextTick()
-        .then(() => {
-          expect(trimText(vm.$el.textContent)).toEqual(`- !${TEST_MR_ID}`);
-        })
-        .then(done)
-        .catch(done.fail);
+      await nextTick();
+      expect(trimText(vm.$el.textContent)).toEqual(`- !${TEST_MR_ID}`);
     });
 
-    it('renders branch and mr, if state has both', (done) => {
+    it('renders branch and mr, if state has both', async () => {
       vm.$store.state.currentBranchId = TEST_BRANCH_ID;
       vm.$store.state.currentMergeRequestId = TEST_MR_ID;
 
-      vm.$nextTick()
-        .then(() => {
-          expect(trimText(vm.$el.textContent)).toEqual(`${TEST_BRANCH_ID} !${TEST_MR_ID}`);
-        })
-        .then(done)
-        .catch(done.fail);
+      await nextTick();
+      expect(trimText(vm.$el.textContent)).toEqual(`${TEST_BRANCH_ID} !${TEST_MR_ID}`);
     });
 
     it('shows icons', () => {
diff --git a/spec/frontend/ide/components/nav_dropdown_spec.js b/spec/frontend/ide/components/nav_dropdown_spec.js
index 6a1be7ee964..33e638843f5 100644
--- a/spec/frontend/ide/components/nav_dropdown_spec.js
+++ b/spec/frontend/ide/components/nav_dropdown_spec.js
@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils';
 import $ from 'jquery';
+import { nextTick } from 'vue';
 import NavDropdown from '~/ide/components/nav_dropdown.vue';
 import { PERMISSION_READ_MR } from '~/ide/constants';
 import { createStore } from '~/ide/stores';
@@ -58,29 +59,19 @@ describe('IDE NavDropdown', () => {
       expect(findNavForm().exists()).toBe(false);
     });
 
-    it('renders nav form when show.bs.dropdown', (done) => {
+    it('renders nav form when show.bs.dropdown', async () => {
       showDropdown();
 
-      wrapper.vm
-        .$nextTick()
-        .then(() => {
-          expect(findNavForm().exists()).toBe(true);
-        })
-        .then(done)
-        .catch(done.fail);
+      await nextTick();
+      expect(findNavForm().exists()).toBe(true);
     });
 
-    it('destroys nav form when closed', (done) => {
+    it('destroys nav form when closed', async () => {
       showDropdown();
       hideDropdown();
 
-      wrapper.vm
-        .$nextTick()
-        .then(() => {
-          expect(findNavForm().exists()).toBe(false);
-        })
-        .then(done)
-        .catch(done.fail);
+      await nextTick();
+      expect(findNavForm().exists()).toBe(false);
     });
 
     it('renders merge request icon', () => {
diff --git a/spec/frontend/ide/components/new_dropdown/button_spec.js b/spec/frontend/ide/components/new_dropdown/button_spec.js
index 32fa2babcdb..298d7b810e1 100644
--- a/spec/frontend/ide/components/new_dropdown/button_spec.js
+++ b/spec/frontend/ide/components/new_dropdown/button_spec.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import mountComponent from 'helpers/vue_mount_component_helper';
 import Button from '~/ide/components/new_dropdown/button.vue';
 
@@ -37,14 +37,11 @@ describe('IDE new entry dropdown button component', () => {
     expect(vm.$emit).toHaveBeenCalledWith('click');
   });
 
-  it('hides label if showLabel is false', (done) => {
+  it('hides label if showLabel is false', async () => {
     vm.showLabel = false;
 
-    vm.$nextTick(() => {
-      expect(vm.$el.textContent).not.toContain('Testing');
-
-      done();
-    });
+    await nextTick();
+    expect(vm.$el.textContent).not.toContain('Testing');
   });
 
   describe('tooltipTitle', () => {
@@ -52,14 +49,11 @@ describe('IDE new entry dropdown button component', () => {
       expect(vm.tooltipTitle).toBe('');
     });
 
-    it('returns label', (done) => {
+    it('returns label', async () => {
       vm.showLabel = false;
 
-      vm.$nextTick(() => {
-        expect(vm.tooltipTitle).toBe('Testing');
-
-        done();
-      });
+      await nextTick();
+      expect(vm.tooltipTitle).toBe('Testing');
     });
   });
 });
diff --git a/spec/frontend/ide/components/new_dropdown/modal_spec.js b/spec/frontend/ide/components/new_dropdown/modal_spec.js
index 41111f5dbb4..8134248bbf4 100644
--- a/spec/frontend/ide/components/new_dropdown/modal_spec.js
+++ b/spec/frontend/ide/components/new_dropdown/modal_spec.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import createFlash from '~/flash';
 import modal from '~/ide/components/new_dropdown/modal.vue';
@@ -19,14 +19,14 @@ describe('new file modal component', () => {
     ${'tree'} | ${'Create new directory'} | ${'Create directory'} | ${false}
     ${'blob'} | ${'Create new file'}      | ${'Create file'}      | ${true}
   `('$entryType', ({ entryType, modalTitle, btnTitle, showsFileTemplates }) => {
-    beforeEach((done) => {
+    beforeEach(async () => {
       const store = createStore();
 
       vm = createComponentWithStore(Component, store).$mount();
       vm.open(entryType);
       vm.name = 'testing';
 
-      vm.$nextTick(done);
+      await nextTick();
     });
 
     afterEach(() => {
@@ -71,16 +71,13 @@ describe('new file modal component', () => {
       ${'blob'} | ${'Rename file'}   | ${'Rename file'}
     `(
       'renders title and button for renaming $entryType',
-      ({ entryType, modalTitle, btnTitle }, done) => {
+      async ({ entryType, modalTitle, btnTitle }) => {
         vm.$store.state.entries['test-path'].type = entryType;
         vm.open('rename', 'test-path');
 
-        vm.$nextTick(() => {
-          expect(document.querySelector('.modal-title').textContent.trim()).toBe(modalTitle);
-          expect(document.querySelector('.btn-success').textContent.trim()).toBe(btnTitle);
-
-          done();
-        });
+        await nextTick();
+        expect(document.querySelector('.modal-title').textContent.trim()).toBe(modalTitle);
+        expect(document.querySelector('.btn-success').textContent.trim()).toBe(btnTitle);
       },
     );
 
diff --git a/spec/frontend/ide/components/repo_editor_spec.js b/spec/frontend/ide/components/repo_editor_spec.js
index 15af2d03704..96c9baeb328 100644
--- a/spec/frontend/ide/components/repo_editor_spec.js
+++ b/spec/frontend/ide/components/repo_editor_spec.js
@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { editor as monacoEditor, Range } from 'monaco-editor';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import '~/behaviors/markdown/render_gfm';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -367,17 +367,17 @@ describe('RepoEditor', () => {
       expect(vm.$store.state.panelResizing).toBe(false); // default value
 
       vm.$store.state.panelResizing = true;
-      await vm.$nextTick();
+      await nextTick();
 
       expect(updateDimensionsSpy).not.toHaveBeenCalled();
 
       vm.$store.state.panelResizing = false;
-      await vm.$nextTick();
+      await nextTick();
 
       expect(updateDimensionsSpy).toHaveBeenCalledTimes(1);
 
       vm.$store.state.panelResizing = true;
-      await vm.$nextTick();
+      await nextTick();
 
       expect(updateDimensionsSpy).toHaveBeenCalledTimes(1);
     });
@@ -387,12 +387,12 @@ describe('RepoEditor', () => {
       expect(vm.$store.state.rightPane.isOpen).toBe(false); // default value
 
       vm.$store.state.rightPane.isOpen = true;
-      await vm.$nextTick();
+      await nextTick();
 
       expect(updateDimensionsSpy).toHaveBeenCalledTimes(1);
 
       vm.$store.state.rightPane.isOpen = false;
-      await vm.$nextTick();
+      await nextTick();
 
       expect(updateDimensionsSpy).toHaveBeenCalledTimes(2);
     });
@@ -411,7 +411,7 @@ describe('RepoEditor', () => {
     `('tabs in $mode are $isVisible', async ({ mode, isVisible } = {}) => {
       vm.$store.state.currentActivityView = leftSidebarViews[mode].name;
 
-      await vm.$nextTick();
+      await nextTick();
       expect(wrapper.find('.nav-links').exists()).toBe(isVisible);
     });
   });
@@ -436,7 +436,7 @@ describe('RepoEditor', () => {
       });
 
       changeViewMode(FILE_VIEW_MODE_PREVIEW);
-      await vm.$nextTick();
+      await nextTick();
     });
 
     it('do not show the editor', () => {
@@ -448,7 +448,7 @@ describe('RepoEditor', () => {
       expect(updateDimensionsSpy).not.toHaveBeenCalled();
 
       changeViewMode(FILE_VIEW_MODE_EDITOR);
-      await vm.$nextTick();
+      await nextTick();
 
       expect(updateDimensionsSpy).toHaveBeenCalled();
     });
@@ -460,7 +460,7 @@ describe('RepoEditor', () => {
       jest.spyOn(vm, 'shouldHideEditor', 'get').mockReturnValue(true);
 
       vm.initEditor();
-      await vm.$nextTick();
+      await nextTick();
     };
 
     it('does not fetch file information for temp entries', async () => {
@@ -511,20 +511,20 @@ describe('RepoEditor', () => {
 
       const origFile = vm.file;
       vm.file.pending = true;
-      await vm.$nextTick();
+      await nextTick();
 
       wrapper.setProps({
         file: file('testing'),
       });
       vm.file.content = 'foo'; // need to prevent full cycle of initEditor
-      await vm.$nextTick();
+      await nextTick();
 
       expect(vm.removePendingTab).toHaveBeenCalledWith(origFile);
     });
 
     it('does not call initEditor if the file did not change', async () => {
       Vue.set(vm, 'file', vm.file);
-      await vm.$nextTick();
+      await nextTick();
 
       expect(vm.initEditor).not.toHaveBeenCalled();
     });
@@ -538,7 +538,7 @@ describe('RepoEditor', () => {
           key: 'new',
         },
       });
-      await vm.$nextTick();
+      await nextTick();
 
       expect(vm.initEditor).toHaveBeenCalled();
     });
diff --git a/spec/frontend/ide/components/shared/tokened_input_spec.js b/spec/frontend/ide/components/shared/tokened_input_spec.js
index 837bfe6b574..a37c08af0a1 100644
--- a/spec/frontend/ide/components/shared/tokened_input_spec.js
+++ b/spec/frontend/ide/components/shared/tokened_input_spec.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import mountComponent from 'helpers/vue_mount_component_helper';
 import TokenedInput from '~/ide/components/shared/tokened_input.vue';
 
@@ -54,15 +54,11 @@ describe('IDE shared/TokenedInput', () => {
     expect(vm.$refs.input).toHaveValue(TEST_VALUE);
   });
 
-  it('renders placeholder, when tokens are empty', (done) => {
+  it('renders placeholder, when tokens are empty', async () => {
     vm.tokens = [];
 
-    vm.$nextTick()
-      .then(() => {
-        expect(vm.$refs.input).toHaveAttr('placeholder', TEST_PLACEHOLDER);
-      })
-      .then(done)
-      .catch(done.fail);
+    await nextTick();
+    expect(vm.$refs.input).toHaveAttr('placeholder', TEST_PLACEHOLDER);
   });
 
   it('triggers "removeToken" on token click', () => {