Add latest changes from gitlab-org/gitlab@13-8-stable-eev13.8.0-rc42

22 files changed, 197 insertions, 149 deletions

diff --git a/spec/frontend/pages/admin/abuse_reports/abuse_reports_spec.js b/spec/frontend/pages/admin/abuse_reports/abuse_reports_spec.js
index 7e9aec84016..2c76adf761f 100644
--- a/spec/frontend/pages/admin/abuse_reports/abuse_reports_spec.js
+++ b/spec/frontend/pages/admin/abuse_reports/abuse_reports_spec.js
@@ -8,10 +8,10 @@ describe('Abuse Reports', () => {
 
   let $messages;
 
-  const assertMaxLength = $message => {
+  const assertMaxLength = ($message) => {
     expect($message.text().length).toEqual(MAX_MESSAGE_LENGTH);
   };
-  const findMessage = searchText =>
+  const findMessage = (searchText) =>
     $messages.filter((index, element) => element.innerText.indexOf(searchText) > -1).first();
 
   preloadFixtures(FIXTURE);
diff --git a/spec/frontend/pages/admin/application_settings/account_and_limits_spec.js b/spec/frontend/pages/admin/application_settings/account_and_limits_spec.js
index 6a239e307e9..8816609d1d2 100644
--- a/spec/frontend/pages/admin/application_settings/account_and_limits_spec.js
+++ b/spec/frontend/pages/admin/application_settings/account_and_limits_spec.js
@@ -24,7 +24,7 @@ describe('AccountAndLimits', () => {
       expect($userInternalRegex.readOnly).toBeTruthy();
     });
 
-    it('is checked', done => {
+    it('is checked', (done) => {
       if (!$userDefaultExternal.prop('checked')) $userDefaultExternal.click();
 
       expect($userDefaultExternal.prop('checked')).toBeTruthy();
diff --git a/spec/frontend/pages/admin/jobs/index/components/stop_jobs_modal_spec.js b/spec/frontend/pages/admin/jobs/index/components/stop_jobs_modal_spec.js
index c662fb7ba4a..81750b4827f 100644
--- a/spec/frontend/pages/admin/jobs/index/components/stop_jobs_modal_spec.js
+++ b/spec/frontend/pages/admin/jobs/index/components/stop_jobs_modal_spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import mountComponent from 'helpers/vue_mount_component_helper';
-import { TEST_HOST } from 'jest/helpers/test_constants';
+import { TEST_HOST } from 'helpers/test_constants';
 import { redirectTo } from '~/lib/utils/url_utility';
 import axios from '~/lib/utils/axios_utils';
 import stopJobsModal from '~/pages/admin/jobs/index/components/stop_jobs_modal.vue';
@@ -26,9 +26,9 @@ describe('stop_jobs_modal.vue', () => {
   });
 
   describe('onSubmit', () => {
-    it('stops jobs and redirects to overview page', done => {
+    it('stops jobs and redirects to overview page', (done) => {
       const responseURL = `${TEST_HOST}/stop_jobs_modal.vue/jobs`;
-      jest.spyOn(axios, 'post').mockImplementation(url => {
+      jest.spyOn(axios, 'post').mockImplementation((url) => {
         expect(url).toBe(props.url);
         return Promise.resolve({
           request: {
@@ -45,16 +45,16 @@ describe('stop_jobs_modal.vue', () => {
         .catch(done.fail);
     });
 
-    it('displays error if stopping jobs failed', done => {
+    it('displays error if stopping jobs failed', (done) => {
       const dummyError = new Error('stopping jobs failed');
-      jest.spyOn(axios, 'post').mockImplementation(url => {
+      jest.spyOn(axios, 'post').mockImplementation((url) => {
         expect(url).toBe(props.url);
         return Promise.reject(dummyError);
       });
 
       vm.onSubmit()
         .then(done.fail)
-        .catch(error => {
+        .catch((error) => {
           expect(error).toBe(dummyError);
           expect(redirectTo).not.toHaveBeenCalled();
         })
diff --git a/spec/frontend/pages/admin/users/components/delete_user_modal_spec.js b/spec/frontend/pages/admin/users/components/delete_user_modal_spec.js
index 3efefa8137f..d203a8ea0e0 100644
--- a/spec/frontend/pages/admin/users/components/delete_user_modal_spec.js
+++ b/spec/frontend/pages/admin/users/components/delete_user_modal_spec.js
@@ -11,10 +11,10 @@ describe('User Operation confirmation modal', () => {
   let wrapper;
   let formSubmitSpy;
 
-  const findButton = variant =>
+  const findButton = (variant) =>
     wrapper
       .findAll(GlButton)
-      .filter(w => w.attributes('variant') === variant)
+      .filter((w) => w.attributes('variant') === variant)
       .at(0);
   const findForm = () => wrapper.find('form');
   const findUsernameInput = () => wrapper.find(GlFormInput);
@@ -25,7 +25,7 @@ describe('User Operation confirmation modal', () => {
   const getMethodParam = () => new FormData(findForm().element).get('_method');
   const getFormAction = () => findForm().attributes('action');
 
-  const setUsername = username => {
+  const setUsername = (username) => {
     findUsernameInput().vm.$emit('input', username);
   };
 
diff --git a/spec/frontend/pages/admin/users/new/index_spec.js b/spec/frontend/pages/admin/users/new/index_spec.js
index 3896323eef7..60482860e84 100644
--- a/spec/frontend/pages/admin/users/new/index_spec.js
+++ b/spec/frontend/pages/admin/users/new/index_spec.js
@@ -20,7 +20,7 @@ describe('UserInternalRegexHandler', () => {
   });
 
   describe('Behaviour of userExternal checkbox when', () => {
-    it('matches email as internal', done => {
+    it('matches email as internal', (done) => {
       expect($warningMessage.hasClass('hidden')).toBeTruthy();
 
       $userEmail.val('test@').trigger('input');
@@ -30,7 +30,7 @@ describe('UserInternalRegexHandler', () => {
       done();
     });
 
-    it('matches email as external', done => {
+    it('matches email as external', (done) => {
       expect($warningMessage.hasClass('hidden')).toBeTruthy();
 
       $userEmail.val('test.ext@').trigger('input');
diff --git a/spec/frontend/pages/dashboard/todos/index/todos_spec.js b/spec/frontend/pages/dashboard/todos/index/todos_spec.js
index 5ecb7860103..5018b0c4f73 100644
--- a/spec/frontend/pages/dashboard/todos/index/todos_spec.js
+++ b/spec/frontend/pages/dashboard/todos/index/todos_spec.js
@@ -31,10 +31,10 @@ describe('Todos', () => {
   });
 
   describe('goToTodoUrl', () => {
-    it('opens the todo url', done => {
+    it('opens the todo url', (done) => {
       const todoLink = todoItem.dataset.url;
 
-      visitUrl.mockImplementation(url => {
+      visitUrl.mockImplementation((url) => {
         expect(url).toEqual(todoLink);
         done();
       });
@@ -61,7 +61,7 @@ describe('Todos', () => {
       });
 
       it('run native funcionality when avatar is clicked', () => {
-        $('.todos-list a').on('click', e => e.preventDefault());
+        $('.todos-list a').on('click', (e) => e.preventDefault());
         $('.todos-list img').trigger(metakeyEvent);
 
         expect(visitUrl).not.toHaveBeenCalled();
@@ -72,7 +72,7 @@ describe('Todos', () => {
     describe('on done todo click', () => {
       let onToggleSpy;
 
-      beforeEach(done => {
+      beforeEach((done) => {
         const el = document.querySelector('.js-done-todo');
         const path = el.dataset.href;
 
diff --git a/spec/frontend/pages/import/bitbucket_server/components/bitbucket_server_status_table_spec.js b/spec/frontend/pages/import/bitbucket_server/components/bitbucket_server_status_table_spec.js
index 695d1b686a5..a91fc5abe09 100644
--- a/spec/frontend/pages/import/bitbucket_server/components/bitbucket_server_status_table_spec.js
+++ b/spec/frontend/pages/import/bitbucket_server/components/bitbucket_server_status_table_spec.js
@@ -15,7 +15,7 @@ describe('BitbucketServerStatusTable', () => {
   const findReconfigureButton = () =>
     wrapper
       .findAll(GlButton)
-      .filter(w => w.props().variant === 'info')
+      .filter((w) => w.props().variant === 'info')
       .at(0);
 
   afterEach(() => {
diff --git a/spec/frontend/pages/labels/components/promote_label_modal_spec.js b/spec/frontend/pages/labels/components/promote_label_modal_spec.js
index f969808d78b..19807313c77 100644
--- a/spec/frontend/pages/labels/components/promote_label_modal_spec.js
+++ b/spec/frontend/pages/labels/components/promote_label_modal_spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import mountComponent from 'helpers/vue_mount_component_helper';
-import { TEST_HOST } from 'jest/helpers/test_constants';
+import { TEST_HOST } from 'helpers/test_constants';
 import promoteLabelModal from '~/pages/projects/labels/components/promote_label_modal.vue';
 import eventHub from '~/pages/projects/labels/event_hub';
 import axios from '~/lib/utils/axios_utils';
@@ -50,9 +50,9 @@ describe('Promote label modal', () => {
       vm.$destroy();
     });
 
-    it('redirects when a label is promoted', done => {
+    it('redirects when a label is promoted', (done) => {
       const responseURL = `${TEST_HOST}/dummy/endpoint`;
-      jest.spyOn(axios, 'post').mockImplementation(url => {
+      jest.spyOn(axios, 'post').mockImplementation((url) => {
         expect(url).toBe(labelMockData.url);
         expect(eventHub.$emit).toHaveBeenCalledWith(
           'promoteLabelModal.requestStarted',
@@ -76,10 +76,10 @@ describe('Promote label modal', () => {
         .catch(done.fail);
     });
 
-    it('displays an error if promoting a label failed', done => {
+    it('displays an error if promoting a label failed', (done) => {
       const dummyError = new Error('promoting label failed');
       dummyError.response = { status: 500 };
-      jest.spyOn(axios, 'post').mockImplementation(url => {
+      jest.spyOn(axios, 'post').mockImplementation((url) => {
         expect(url).toBe(labelMockData.url);
         expect(eventHub.$emit).toHaveBeenCalledWith(
           'promoteLabelModal.requestStarted',
@@ -89,7 +89,7 @@ describe('Promote label modal', () => {
       });
 
       vm.onSubmit()
-        .catch(error => {
+        .catch((error) => {
           expect(error).toBe(dummyError);
           expect(eventHub.$emit).toHaveBeenCalledWith('promoteLabelModal.requestFinished', {
             labelUrl: labelMockData.url,
diff --git a/spec/frontend/pages/milestones/shared/components/delete_milestone_modal_spec.js b/spec/frontend/pages/milestones/shared/components/delete_milestone_modal_spec.js
index 1d9a964c3c3..7bb637356c2 100644
--- a/spec/frontend/pages/milestones/shared/components/delete_milestone_modal_spec.js
+++ b/spec/frontend/pages/milestones/shared/components/delete_milestone_modal_spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import mountComponent from 'helpers/vue_mount_component_helper';
-import { TEST_HOST } from 'jest/helpers/test_constants';
+import { TEST_HOST } from 'helpers/test_constants';
 import { redirectTo } from '~/lib/utils/url_utility';
 import axios from '~/lib/utils/axios_utils';
 import deleteMilestoneModal from '~/pages/milestones/shared/components/delete_milestone_modal.vue';
@@ -32,9 +32,9 @@ describe('delete_milestone_modal.vue', () => {
       jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
     });
 
-    it('deletes milestone and redirects to overview page', done => {
+    it('deletes milestone and redirects to overview page', (done) => {
       const responseURL = `${TEST_HOST}/delete_milestone_modal.vue/milestoneOverview`;
-      jest.spyOn(axios, 'delete').mockImplementation(url => {
+      jest.spyOn(axios, 'delete').mockImplementation((url) => {
         expect(url).toBe(props.milestoneUrl);
         expect(eventHub.$emit).toHaveBeenCalledWith(
           'deleteMilestoneModal.requestStarted',
@@ -60,10 +60,10 @@ describe('delete_milestone_modal.vue', () => {
         .catch(done.fail);
     });
 
-    it('displays error if deleting milestone failed', done => {
+    it('displays error if deleting milestone failed', (done) => {
       const dummyError = new Error('deleting milestone failed');
       dummyError.response = { status: 418 };
-      jest.spyOn(axios, 'delete').mockImplementation(url => {
+      jest.spyOn(axios, 'delete').mockImplementation((url) => {
         expect(url).toBe(props.milestoneUrl);
         expect(eventHub.$emit).toHaveBeenCalledWith(
           'deleteMilestoneModal.requestStarted',
@@ -74,7 +74,7 @@ describe('delete_milestone_modal.vue', () => {
       });
 
       vm.onSubmit()
-        .catch(error => {
+        .catch((error) => {
           expect(error).toBe(dummyError);
           expect(redirectTo).not.toHaveBeenCalled();
           expect(eventHub.$emit).toHaveBeenCalledWith('deleteMilestoneModal.requestFinished', {
diff --git a/spec/frontend/pages/milestones/shared/components/promote_milestone_modal_spec.js b/spec/frontend/pages/milestones/shared/components/promote_milestone_modal_spec.js
index e8a6e259837..7cd94deb3da 100644
--- a/spec/frontend/pages/milestones/shared/components/promote_milestone_modal_spec.js
+++ b/spec/frontend/pages/milestones/shared/components/promote_milestone_modal_spec.js
@@ -1,99 +1,109 @@
-import Vue from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
-import { TEST_HOST } from 'jest/helpers/test_constants';
-import promoteMilestoneModal from '~/pages/milestones/shared/components/promote_milestone_modal.vue';
-import eventHub from '~/pages/milestones/shared/event_hub';
+import { GlModal } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { TEST_HOST } from 'helpers/test_constants';
+import { setHTMLFixture } from 'helpers/fixtures';
+import waitForPromises from 'helpers/wait_for_promises';
+import PromoteMilestoneModal from '~/pages/milestones/shared/components/promote_milestone_modal.vue';
 import axios from '~/lib/utils/axios_utils';
+import * as urlUtils from '~/lib/utils/url_utility';
+import * as flash from '~/flash';
+
+jest.mock('~/lib/utils/url_utility');
+jest.mock('~/flash');
 
 describe('Promote milestone modal', () => {
-  let vm;
-  const Component = Vue.extend(promoteMilestoneModal);
+  let wrapper;
   const milestoneMockData = {
     milestoneTitle: 'v1.0',
     url: `${TEST_HOST}/dummy/promote/milestones`,
     groupName: 'group',
   };
 
-  describe('Modal title and description', () => {
-    beforeEach(() => {
-      vm = mountComponent(Component, milestoneMockData);
+  const promoteButton = () => document.querySelector('.js-promote-project-milestone-button');
+
+  beforeEach(() => {
+    setHTMLFixture(`<button
+      class="js-promote-project-milestone-button"
+      data-group-name="${milestoneMockData.groupName}"
+      data-milestone-title="${milestoneMockData.milestoneTitle}"
+      data-url="${milestoneMockData.url}">
+      Promote
+      </button>`);
+    wrapper = shallowMount(PromoteMilestoneModal);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('Modal opener button', () => {
+    it('button gets disabled when the modal opens', () => {
+      expect(promoteButton().disabled).toBe(false);
+
+      promoteButton().click();
+
+      expect(promoteButton().disabled).toBe(true);
+    });
+
+    it('button gets enabled when the modal closes', () => {
+      promoteButton().click();
+
+      wrapper.findComponent(GlModal).vm.$emit('hide');
+
+      expect(promoteButton().disabled).toBe(false);
     });
+  });
 
-    afterEach(() => {
-      vm.$destroy();
+  describe('Modal title and description', () => {
+    beforeEach(() => {
+      promoteButton().click();
     });
 
     it('contains the proper description', () => {
-      expect(vm.text).toContain(
+      expect(wrapper.vm.text).toContain(
         `Promoting ${milestoneMockData.milestoneTitle} will make it available for all projects inside ${milestoneMockData.groupName}.`,
       );
     });
 
     it('contains the correct title', () => {
-      expect(vm.title).toEqual('Promote v1.0 to group milestone?');
+      expect(wrapper.vm.title).toBe('Promote v1.0 to group milestone?');
     });
   });
 
   describe('When requesting a milestone promotion', () => {
     beforeEach(() => {
-      vm = mountComponent(Component, {
-        ...milestoneMockData,
-      });
-      jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
-    });
-
-    afterEach(() => {
-      vm.$destroy();
+      promoteButton().click();
     });
 
-    it('redirects when a milestone is promoted', done => {
+    it('redirects when a milestone is promoted', async () => {
       const responseURL = `${TEST_HOST}/dummy/endpoint`;
-      jest.spyOn(axios, 'post').mockImplementation(url => {
+      jest.spyOn(axios, 'post').mockImplementation((url) => {
         expect(url).toBe(milestoneMockData.url);
-        expect(eventHub.$emit).toHaveBeenCalledWith(
-          'promoteMilestoneModal.requestStarted',
-          milestoneMockData.url,
-        );
         return Promise.resolve({
-          request: {
-            responseURL,
+          data: {
+            url: responseURL,
           },
         });
       });
 
-      vm.onSubmit()
-        .then(() => {
-          expect(eventHub.$emit).toHaveBeenCalledWith('promoteMilestoneModal.requestFinished', {
-            milestoneUrl: milestoneMockData.url,
-            successful: true,
-          });
-        })
-        .then(done)
-        .catch(done.fail);
+      wrapper.findComponent(GlModal).vm.$emit('primary');
+      await waitForPromises();
+
+      expect(urlUtils.visitUrl).toHaveBeenCalledWith(responseURL);
     });
 
-    it('displays an error if promoting a milestone failed', done => {
+    it('displays an error if promoting a milestone failed', async () => {
       const dummyError = new Error('promoting milestone failed');
       dummyError.response = { status: 500 };
-      jest.spyOn(axios, 'post').mockImplementation(url => {
+      jest.spyOn(axios, 'post').mockImplementation((url) => {
         expect(url).toBe(milestoneMockData.url);
-        expect(eventHub.$emit).toHaveBeenCalledWith(
-          'promoteMilestoneModal.requestStarted',
-          milestoneMockData.url,
-        );
         return Promise.reject(dummyError);
       });
 
-      vm.onSubmit()
-        .catch(error => {
-          expect(error).toBe(dummyError);
-          expect(eventHub.$emit).toHaveBeenCalledWith('promoteMilestoneModal.requestFinished', {
-            milestoneUrl: milestoneMockData.url,
-            successful: false,
-          });
-        })
-        .then(done)
-        .catch(done.fail);
+      wrapper.findComponent(GlModal).vm.$emit('primary');
+      await waitForPromises();
+
+      expect(flash.deprecatedCreateFlash).toHaveBeenCalledWith(dummyError);
     });
   });
 });
diff --git a/spec/frontend/pages/profiles/show/emoji_menu_spec.js b/spec/frontend/pages/profiles/show/emoji_menu_spec.js
index 08fc0b92424..f35fb57aec7 100644
--- a/spec/frontend/pages/profiles/show/emoji_menu_spec.js
+++ b/spec/frontend/pages/profiles/show/emoji_menu_spec.js
@@ -46,7 +46,7 @@ describe('EmojiMenu', () => {
     const dummyEmoji = 'tropical_fish';
     const dummyVotesBlock = () => $('<div />');
 
-    it('calls selectEmojiCallback', done => {
+    it('calls selectEmojiCallback', (done) => {
       expect(dummySelectEmojiCallback).not.toHaveBeenCalled();
 
       emojiMenu.addAward(dummyVotesBlock(), dummyAwardUrl, dummyEmoji, false, () => {
@@ -55,7 +55,7 @@ describe('EmojiMenu', () => {
       });
     });
 
-    it('does not make an axios request', done => {
+    it('does not make an axios request', (done) => {
       jest.spyOn(axios, 'request').mockReturnValue();
 
       emojiMenu.addAward(dummyVotesBlock(), dummyAwardUrl, dummyEmoji, false, () => {
diff --git a/spec/frontend/pages/projects/edit/mount_search_settings_spec.js b/spec/frontend/pages/projects/edit/mount_search_settings_spec.js
new file mode 100644
index 00000000000..b48809b3d00
--- /dev/null
+++ b/spec/frontend/pages/projects/edit/mount_search_settings_spec.js
@@ -0,0 +1,25 @@
+import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
+import initSearch from '~/search_settings';
+import mountSearchSettings from '~/pages/projects/edit/mount_search_settings';
+
+jest.mock('~/search_settings');
+
+describe('pages/projects/edit/mount_search_settings', () => {
+  afterEach(() => {
+    resetHTMLFixture();
+  });
+
+  it('initializes search settings when js-search-settings-app is available', async () => {
+    setHTMLFixture('<div class="js-search-settings-app"></div>');
+
+    await mountSearchSettings();
+
+    expect(initSearch).toHaveBeenCalled();
+  });
+
+  it('does not initialize search settings when js-search-settings-app is unavailable', async () => {
+    await mountSearchSettings();
+
+    expect(initSearch).not.toHaveBeenCalled();
+  });
+});
diff --git a/spec/frontend/pages/projects/forks/new/components/fork_groups_list_item_spec.js b/spec/frontend/pages/projects/forks/new/components/fork_groups_list_item_spec.js
index 73e3c385d33..b90c07a335b 100644
--- a/spec/frontend/pages/projects/forks/new/components/fork_groups_list_item_spec.js
+++ b/spec/frontend/pages/projects/forks/new/components/fork_groups_list_item_spec.js
@@ -30,7 +30,7 @@ describe('Fork groups list item component', () => {
 
   const DUMMY_PATH = '/dummy/path';
 
-  const createWrapper = propsData => {
+  const createWrapper = (propsData) => {
     wrapper = shallowMount(ForkGroupsListItem, {
       propsData: {
         ...DEFAULT_PROPS,
@@ -70,7 +70,7 @@ describe('Fork groups list item component', () => {
     expect(
       wrapper
         .findAll(GlLink)
-        .filter(w => w.text() === DUMMY_FULL_NAME)
+        .filter((w) => w.text() === DUMMY_FULL_NAME)
         .at(0)
         .attributes().href,
     ).toBe(DUMMY_PATH);
diff --git a/spec/frontend/pages/projects/forks/new/components/fork_groups_list_spec.js b/spec/frontend/pages/projects/forks/new/components/fork_groups_list_spec.js
index 9993e4da980..91740c7ce3b 100644
--- a/spec/frontend/pages/projects/forks/new/components/fork_groups_list_spec.js
+++ b/spec/frontend/pages/projects/forks/new/components/fork_groups_list_spec.js
@@ -21,7 +21,7 @@ describe('Fork groups list component', () => {
 
   const replyWith = (...args) => axiosMock.onGet(DEFAULT_PROPS.endpoint).reply(...args);
 
-  const createWrapper = propsData => {
+  const createWrapper = (propsData) => {
     wrapper = shallowMount(ForkGroupsList, {
       propsData: {
         ...DEFAULT_PROPS,
@@ -104,12 +104,10 @@ describe('Fork groups list component', () => {
     expect(wrapper.findAll(ForkGroupsListItem)).toHaveLength(namespaces.length);
 
     namespaces.forEach((namespace, idx) => {
-      expect(
-        wrapper
-          .findAll(ForkGroupsListItem)
-          .at(idx)
-          .props(),
-      ).toStrictEqual({ group: namespace, hasReachedProjectLimit });
+      expect(wrapper.findAll(ForkGroupsListItem).at(idx).props()).toStrictEqual({
+        group: namespace,
+        hasReachedProjectLimit,
+      });
     });
   });
 
@@ -123,11 +121,6 @@ describe('Fork groups list component', () => {
     await nextTick();
 
     expect(wrapper.findAll(ForkGroupsListItem)).toHaveLength(1);
-    expect(
-      wrapper
-        .findAll(ForkGroupsListItem)
-        .at(0)
-        .props().group.name,
-    ).toBe('otherdummy');
+    expect(wrapper.findAll(ForkGroupsListItem).at(0).props().group.name).toBe('otherdummy');
   });
 });
diff --git a/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap b/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap
index 324c9788309..c4c48ea7517 100644
--- a/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap
+++ b/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap
@@ -12,6 +12,7 @@ exports[`Code Coverage when fetching data is successful matches the snapshot 1`]
     <gl-dropdown-stub
       category="primary"
       headertext=""
+      hideheaderborder="true"
       size="medium"
       text="rspec"
       variant="default"
diff --git a/spec/frontend/pages/projects/pipeline_schedules/shared/components/interval_pattern_input_spec.js b/spec/frontend/pages/projects/pipeline_schedules/shared/components/interval_pattern_input_spec.js
index 9a119377542..27cd0fe34bf 100644
--- a/spec/frontend/pages/projects/pipeline_schedules/shared/components/interval_pattern_input_spec.js
+++ b/spec/frontend/pages/projects/pipeline_schedules/shared/components/interval_pattern_input_spec.js
@@ -26,7 +26,7 @@ describe('Interval Pattern Input Component', () => {
   const findCustomInput = () => wrapper.find('#schedule_cron');
   const findAllLabels = () => wrapper.findAll('label');
   const findSelectedRadio = () =>
-    wrapper.findAll('input[type="radio"]').wrappers.find(x => x.element.checked);
+    wrapper.findAll('input[type="radio"]').wrappers.find((x) => x.element.checked);
   const findSelectedRadioKey = () => findSelectedRadio()?.attributes('data-testid');
   const selectEveryDayRadio = () => findEveryDayRadio().trigger('click');
   const selectEveryWeekRadio = () => findEveryWeekRadio().trigger('click');
@@ -129,7 +129,7 @@ describe('Interval Pattern Input Component', () => {
     });
 
     it('renders each label for radio options properly', () => {
-      const labels = findAllLabels().wrappers.map(el => trimText(el.text()));
+      const labels = findAllLabels().wrappers.map((el) => trimText(el.text()));
 
       expect(labels).toEqual([
         'Every day (at 4:00am)',
diff --git a/spec/frontend/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js b/spec/frontend/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js
index 5efcedf678b..de63409b181 100644
--- a/spec/frontend/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js
+++ b/spec/frontend/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js
@@ -47,7 +47,7 @@ describe('Timezone Dropdown', () => {
         const data = $dropdownEl.data('data');
         const formatted = $wrapper.find(tzListSel).text();
 
-        data.forEach(item => {
+        data.forEach((item) => {
           expect(formatted).toContain(formatTimezone(item));
         });
       });
@@ -88,10 +88,7 @@ describe('Timezone Dropdown', () => {
           onSelectTimezone,
         });
 
-        $wrapper
-          .find(tzListSel)
-          .first()
-          .trigger('click');
+        $wrapper.find(tzListSel).first().trigger('click');
 
         expect(onSelectTimezone).toHaveBeenCalled();
       });
@@ -103,7 +100,7 @@ describe('Timezone Dropdown', () => {
         new TimezoneDropdown({
           $inputEl,
           $dropdownEl,
-          displayFormat: selectedItem => formatTimezone(selectedItem),
+          displayFormat: (selectedItem) => formatTimezone(selectedItem),
         });
 
         expect($wrapper.find(tzDropdownToggleText).html()).toEqual('[UTC - 2.5] Newfoundland');
@@ -118,10 +115,7 @@ describe('Timezone Dropdown', () => {
           displayFormat,
         });
 
-        $wrapper
-          .find(tzListSel)
-          .first()
-          .trigger('click');
+        $wrapper.find(tzListSel).first().trigger('click');
 
         expect(displayFormat).toHaveBeenCalled();
       });
diff --git a/spec/frontend/pages/projects/shared/permissions/components/project_feature_settings_spec.js b/spec/frontend/pages/projects/shared/permissions/components/project_feature_settings_spec.js
index 1fd9d285610..c90ebd47b08 100644
--- a/spec/frontend/pages/projects/shared/permissions/components/project_feature_settings_spec.js
+++ b/spec/frontend/pages/projects/shared/permissions/components/project_feature_settings_spec.js
@@ -6,13 +6,20 @@ import projectFeatureToggle from '~/vue_shared/components/toggle_button.vue';
 describe('Project Feature Settings', () => {
   const defaultProps = {
     name: 'Test',
-    options: [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5]],
+    options: [
+      [1, 1],
+      [2, 2],
+      [3, 3],
+      [4, 4],
+      [5, 5],
+    ],
     value: 1,
     disabledInput: false,
+    showToggle: true,
   };
   let wrapper;
 
-  const mountComponent = customProps => {
+  const mountComponent = (customProps) => {
     const propsData = { ...defaultProps, ...customProps };
     return shallowMount(projectFeatureSetting, { propsData });
   };
@@ -40,6 +47,14 @@ describe('Project Feature Settings', () => {
   });
 
   describe('Feature toggle', () => {
+    it('should be hidden if "showToggle" is passed false', async () => {
+      wrapper.setProps({ showToggle: false });
+
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.find(projectFeatureToggle).element).toBeUndefined();
+    });
+
     it('should enable the feature toggle if the value is not 0', () => {
       expect(wrapper.find(projectFeatureToggle).props().value).toBe(true);
     });
@@ -73,10 +88,7 @@ describe('Project Feature Settings', () => {
       wrapper = mount(projectFeatureSetting, { propsData: defaultProps });
 
       expect(wrapper.emitted().change).toBeUndefined();
-      wrapper
-        .find(projectFeatureToggle)
-        .find('button')
-        .trigger('click');
+      wrapper.find(projectFeatureToggle).find('button').trigger('click');
 
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().change.length).toBe(1);
@@ -110,10 +122,7 @@ describe('Project Feature Settings', () => {
 
     it('should emit the change when a new option is selected', () => {
       expect(wrapper.emitted().change).toBeUndefined();
-      wrapper
-        .findAll('option')
-        .at(1)
-        .trigger('change');
+      wrapper.findAll('option').at(1).trigger('change');
 
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().change.length).toBe(1);
diff --git a/spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js b/spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js
index 0b58260ed1c..9aee6ec7ace 100644
--- a/spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js
+++ b/spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js
@@ -20,6 +20,7 @@ const defaultProps = {
     buildsAccessLevel: 20,
     wikiAccessLevel: 20,
     snippetsAccessLevel: 20,
+    operationsAccessLevel: 20,
     pagesAccessLevel: 10,
     analyticsAccessLevel: 20,
     containerRegistryEnabled: true,
@@ -68,8 +69,12 @@ describe('Settings Panel', () => {
     });
   };
 
-  const overrideCurrentSettings = (currentSettingsProps, extraProps = {}) => {
-    return mountComponent({ ...extraProps, currentSettings: currentSettingsProps });
+  const overrideCurrentSettings = (
+    currentSettingsProps,
+    extraProps = {},
+    mountFn = shallowMount,
+  ) => {
+    return mountComponent({ ...extraProps, currentSettings: currentSettingsProps }, mountFn);
   };
 
   const findLFSSettingsRow = () => wrapper.find({ ref: 'git-lfs-settings' });
@@ -362,7 +367,7 @@ describe('Settings Panel', () => {
 
       const repositoryFeatureToggleButton = findRepositoryFeatureSetting().find('button');
       const lfsFeatureToggleButton = findLFSFeatureToggle().find('button');
-      const isToggleButtonChecked = toggleButton => toggleButton.classes('is-checked');
+      const isToggleButtonChecked = (toggleButton) => toggleButton.classes('is-checked');
 
       // assert the initial state
       expect(isToggleButtonChecked(lfsFeatureToggleButton)).toBe(true);
@@ -523,28 +528,30 @@ describe('Settings Panel', () => {
       });
     });
 
-    it('should set the visibility level description based upon the selected visibility level', () => {
-      wrapper
-        .find('[name="project[project_feature_attributes][metrics_dashboard_access_level]"]')
-        .setValue(visibilityOptions.PUBLIC);
-
-      expect(wrapper.vm.metricsDashboardAccessLevel).toBe(visibilityOptions.PUBLIC);
-    });
-
     it('should contain help text', () => {
       expect(wrapper.find({ ref: 'metrics-visibility-settings' }).props().helpText).toBe(
         'With Metrics Dashboard you can visualize this project performance metrics',
       );
     });
 
-    it('should disable the metrics visibility dropdown when the project visibility level changes to private', () => {
-      wrapper = overrideCurrentSettings({ visibilityLevel: visibilityOptions.PRIVATE });
+    it.each`
+      scenario                                                     | selectedOption                                | selectedOptionLabel
+      ${{ visibilityLevel: visibilityOptions.PRIVATE }}            | ${String(featureAccessLevel.PROJECT_MEMBERS)} | ${'Only Project Members'}
+      ${{ operationsAccessLevel: featureAccessLevel.NOT_ENABLED }} | ${String(featureAccessLevel.NOT_ENABLED)}     | ${'Enable feature to choose access level'}
+    `(
+      'should disable the metrics visibility dropdown when #scenario',
+      ({ scenario, selectedOption, selectedOptionLabel }) => {
+        wrapper = overrideCurrentSettings(scenario, {}, mount);
 
-      const metricsSettingsRow = wrapper.find({ ref: 'metrics-visibility-settings' });
+        const select = wrapper.find({ ref: 'metrics-visibility-settings' }).find('select');
+        const option = select.find('option');
 
-      expect(wrapper.vm.metricsOptionsDropdownEnabled).toBe(true);
-      expect(metricsSettingsRow.find('select').attributes('disabled')).toBe('disabled');
-    });
+        expect(select.attributes('disabled')).toBe('disabled');
+        expect(select.element.value).toBe(selectedOption);
+        expect(option.attributes('value')).toBe(selectedOption);
+        expect(option.text()).toBe(selectedOptionLabel);
+      },
+    );
   });
 
   describe('Settings panel with feature flags', () => {
@@ -568,4 +575,12 @@ describe('Settings Panel', () => {
       expect(findAnalyticsRow().exists()).toBe(true);
     });
   });
+
+  describe('Operations', () => {
+    it('should show the operations toggle', async () => {
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.find({ ref: 'operations-settings' }).exists()).toBe(true);
+    });
+  });
 });
diff --git a/spec/frontend/pages/search/show/refresh_counts_spec.js b/spec/frontend/pages/search/show/refresh_counts_spec.js
index ead268b3971..81c9bf74308 100644
--- a/spec/frontend/pages/search/show/refresh_counts_spec.js
+++ b/spec/frontend/pages/search/show/refresh_counts_spec.js
@@ -4,8 +4,11 @@ import axios from '~/lib/utils/axios_utils';
 import refreshCounts from '~/pages/search/show/refresh_counts';
 
 const URL = `${TEST_HOST}/search/count?search=lorem+ipsum&project_id=3`;
-const urlWithScope = scope => `${URL}&scope=${scope}`;
-const counts = [{ scope: 'issues', count: 4 }, { scope: 'merge_requests', count: 5 }];
+const urlWithScope = (scope) => `${URL}&scope=${scope}`;
+const counts = [
+  { scope: 'issues', count: 4 },
+  { scope: 'merge_requests', count: 5 },
+];
 const fixture = `<div class="badge">22</div>
 <div class="badge js-search-count hidden" data-url="${urlWithScope('issues')}"></div>
 <div class="badge js-search-count hidden" data-url="${urlWithScope('merge_requests')}"></div>`;
diff --git a/spec/frontend/pages/sessions/new/preserve_url_fragment_spec.js b/spec/frontend/pages/sessions/new/preserve_url_fragment_spec.js
index 4b50342bf84..8632c852720 100644
--- a/spec/frontend/pages/sessions/new/preserve_url_fragment_spec.js
+++ b/spec/frontend/pages/sessions/new/preserve_url_fragment_spec.js
@@ -2,10 +2,8 @@ import $ from 'jquery';
 import preserveUrlFragment from '~/pages/sessions/new/preserve_url_fragment';
 
 describe('preserve_url_fragment', () => {
-  const findFormAction = selector => {
-    return $(`.omniauth-container ${selector}`)
-      .parent('form')
-      .attr('action');
+  const findFormAction = (selector) => {
+    return $(`.omniauth-container ${selector}`).parent('form').attr('action');
   };
 
   preloadFixtures('sessions/new.html');
diff --git a/spec/frontend/pages/sessions/new/signin_tabs_memoizer_spec.js b/spec/frontend/pages/sessions/new/signin_tabs_memoizer_spec.js
index 589ec0ae047..f04c16d2ddb 100644
--- a/spec/frontend/pages/sessions/new/signin_tabs_memoizer_spec.js
+++ b/spec/frontend/pages/sessions/new/signin_tabs_memoizer_spec.js
@@ -56,7 +56,7 @@ describe('SigninTabsMemoizer', () => {
     };
     jest
       .spyOn(document, 'querySelector')
-      .mockImplementation(selector =>
+      .mockImplementation((selector) =>
         selector === `${tabSelector} a[href="#bogus"]` ? null : fakeTab,
       );