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

33 files changed, 180 insertions, 129 deletions

diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js
index a96b88732b4..57c4ffd3933 100644
--- a/app/assets/javascripts/pages/projects/blob/show/index.js
+++ b/app/assets/javascripts/pages/projects/blob/show/index.js
@@ -41,7 +41,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const { codeNavigationPath, blobPath, definitionPathPrefix } = codeNavEl.dataset;
 
     // eslint-disable-next-line promise/catch-or-return
-    import('~/code_navigation').then(m =>
+    import('~/code_navigation').then((m) =>
       m.default({
         blobs: [{ path: blobPath, codeNavigationPath }],
         definitionPathPrefix,
diff --git a/app/assets/javascripts/pages/projects/commit/show/index.js b/app/assets/javascripts/pages/projects/commit/show/index.js
index 0750f472341..5cfdb125e4f 100644
--- a/app/assets/javascripts/pages/projects/commit/show/index.js
+++ b/app/assets/javascripts/pages/projects/commit/show/index.js
@@ -14,6 +14,8 @@ import flash from '~/flash';
 import { __ } from '~/locale';
 import loadAwardsHandler from '~/awards_handler';
 import { initCommitBoxInfo } from '~/projects/commit_box/info';
+import initRevertCommitTrigger from '~/projects/commit/init_revert_commit_trigger';
+import initRevertCommitModal from '~/projects/commit/init_revert_commit_modal';
 
 const hasPerfBar = document.querySelector('.with-performance-bar');
 const performanceHeight = hasPerfBar ? 35 : 0;
@@ -45,3 +47,5 @@ if (filesContainer.length) {
   new Diff();
 }
 loadAwardsHandler();
+initRevertCommitModal();
+initRevertCommitTrigger();
diff --git a/app/assets/javascripts/pages/projects/edit/index.js b/app/assets/javascripts/pages/projects/edit/index.js
index 7eeb0c852e5..5f1d3edc3ba 100644
--- a/app/assets/javascripts/pages/projects/edit/index.js
+++ b/app/assets/javascripts/pages/projects/edit/index.js
@@ -10,6 +10,7 @@ import initProjectPermissionsSettings from '../shared/permissions';
 import initProjectDeleteButton from '~/projects/project_delete_button';
 import UserCallout from '~/user_callout';
 import initServiceDesk from '~/projects/settings_service_desk';
+import mountSearchSettings from './mount_search_settings';
 
 document.addEventListener('DOMContentLoaded', () => {
   initFilePickers();
@@ -30,4 +31,6 @@ document.addEventListener('DOMContentLoaded', () => {
       '.js-general-settings-form, .js-mr-settings-form, .js-mr-approvals-form',
     ),
   );
+
+  mountSearchSettings();
 });
diff --git a/app/assets/javascripts/pages/projects/edit/mount_search_settings.js b/app/assets/javascripts/pages/projects/edit/mount_search_settings.js
new file mode 100644
index 00000000000..6c477dd7e80
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/edit/mount_search_settings.js
@@ -0,0 +1,12 @@
+const mountSearchSettings = async () => {
+  const el = document.querySelector('.js-search-settings-app');
+
+  if (el) {
+    const { default: initSearch } = await import(
+      /* webpackChunkName: 'search_settings' */ '~/search_settings'
+    );
+    initSearch({ el });
+  }
+};
+
+export default mountSearchSettings;
diff --git a/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list.vue b/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list.vue
index 6c0d20c55e9..a614443bcd9 100644
--- a/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list.vue
+++ b/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list.vue
@@ -31,7 +31,9 @@ export default {
   },
   computed: {
     filteredNamespaces() {
-      return this.namespaces.filter(n => n.name.toLowerCase().includes(this.filter.toLowerCase()));
+      return this.namespaces.filter((n) =>
+        n.name.toLowerCase().includes(this.filter.toLowerCase()),
+      );
     },
   },
 
@@ -43,7 +45,7 @@ export default {
     loadGroups() {
       axios
         .get(this.endpoint)
-        .then(response => {
+        .then((response) => {
           this.namespaces = response.data.namespaces;
         })
         .catch(() => createFlash(__('There was a problem fetching groups.')));
diff --git a/app/assets/javascripts/pages/projects/graphs/charts/index.js b/app/assets/javascripts/pages/projects/graphs/charts/index.js
index 6cf36463bda..ea38b8e15a4 100644
--- a/app/assets/javascripts/pages/projects/graphs/charts/index.js
+++ b/app/assets/javascripts/pages/projects/graphs/charts/index.js
@@ -5,7 +5,7 @@ import { __ } from '~/locale';
 import CodeCoverage from '../components/code_coverage.vue';
 import SeriesDataMixin from './series_data_mixin';
 
-const seriesDataToBarData = raw => Object.entries(raw).map(([name, data]) => ({ name, data }));
+const seriesDataToBarData = (raw) => Object.entries(raw).map(([name, data]) => ({ name, data }));
 
 document.addEventListener('DOMContentLoaded', () => {
   waitForCSSLoaded(() => {
@@ -43,7 +43,7 @@ document.addEventListener('DOMContentLoaded', () => {
       },
       computed: {
         seriesData() {
-          return [{ name: 'full', data: this.chartData.map(d => [d.label, d.value]) }];
+          return [{ name: 'full', data: this.chartData.map((d) => [d.label, d.value]) }];
         },
       },
       render(h) {
diff --git a/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue b/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue
index 6dd50958fa4..3b5e764b712 100644
--- a/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue
+++ b/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue
@@ -74,7 +74,7 @@ export default {
       );
     },
     formattedData() {
-      return this.sortedData.map(value => [dateFormat(value.date, 'mmm dd'), value.coverage]);
+      return this.sortedData.map((value) => [dateFormat(value.date, 'mmm dd'), value.coverage]);
     },
     chartData() {
       return [
@@ -161,9 +161,7 @@ export default {
           <template #coveragePercentage>
             {{ coveragePercentage }}
           </template>
-          <template #percentSymbol>
-            %
-          </template>
+          <template #percentSymbol> % </template>
         </gl-sprintf>
       </template>
     </gl-area-chart>
diff --git a/app/assets/javascripts/pages/projects/init_form.js b/app/assets/javascripts/pages/projects/init_form.js
index 019efe077f7..9f20a3e4e46 100644
--- a/app/assets/javascripts/pages/projects/init_form.js
+++ b/app/assets/javascripts/pages/projects/init_form.js
@@ -1,7 +1,7 @@
 import ZenMode from '~/zen_mode';
 import GLForm from '~/gl_form';
 
-export default function($formEl) {
+export default function ($formEl) {
   new ZenMode(); // eslint-disable-line no-new
   new GLForm($formEl); // eslint-disable-line no-new
 }
diff --git a/app/assets/javascripts/pages/projects/issues/service_desk/filtered_search.js b/app/assets/javascripts/pages/projects/issues/service_desk/filtered_search.js
index fc0922d9112..ccb453a59ea 100644
--- a/app/assets/javascripts/pages/projects/issues/service_desk/filtered_search.js
+++ b/app/assets/javascripts/pages/projects/issues/service_desk/filtered_search.js
@@ -21,7 +21,7 @@ export default class FilteredSearchServiceDesk extends FilteredSearchManager {
 
   modifyUrlParams(paramsArray) {
     const supportBotParamPair = `${AUTHOR_PARAM_KEY}=${this.supportBotData.username}`;
-    const onlyValidParams = paramsArray.filter(param => param.indexOf(AUTHOR_PARAM_KEY) === -1);
+    const onlyValidParams = paramsArray.filter((param) => param.indexOf(AUTHOR_PARAM_KEY) === -1);
 
     // unshift ensures author param is always first token element
     onlyValidParams.unshift(supportBotParamPair);
diff --git a/app/assets/javascripts/pages/projects/issues/show.js b/app/assets/javascripts/pages/projects/issues/show.js
index 614f8262e5b..7068574ecb8 100644
--- a/app/assets/javascripts/pages/projects/issues/show.js
+++ b/app/assets/javascripts/pages/projects/issues/show.js
@@ -16,7 +16,7 @@ import initInviteMemberModal from '~/invite_member/init_invite_member_modal';
 
 import { IssuableType } from '~/issuable_show/constants';
 
-export default function() {
+export default function () {
   const initialDataEl = document.getElementById('js-issuable-app');
   const { issueType, ...issuableData } = parseIssuableData(initialDataEl);
 
@@ -37,7 +37,7 @@ export default function() {
   initRelatedMergeRequestsApp();
 
   import(/* webpackChunkName: 'design_management' */ '~/design_management')
-    .then(module => module.default())
+    .then((module) => module.default())
     .catch(() => {});
 
   new ZenMode(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/projects/jobs/index/index.js b/app/assets/javascripts/pages/projects/jobs/index/index.js
index ae04d070e62..c343a37b292 100644
--- a/app/assets/javascripts/pages/projects/jobs/index/index.js
+++ b/app/assets/javascripts/pages/projects/jobs/index/index.js
@@ -5,7 +5,7 @@ import Tracking from '~/tracking';
 document.addEventListener('DOMContentLoaded', () => {
   const remainingTimeElements = document.querySelectorAll('.js-remaining-time');
   remainingTimeElements.forEach(
-    el =>
+    (el) =>
       new Vue({
         ...GlCountdown,
         el,
@@ -22,5 +22,5 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   };
   const buttons = document.querySelectorAll('.js-empty-state-button');
-  buttons.forEach(button => button.addEventListener('click', trackButtonClick));
+  buttons.forEach((button) => button.addEventListener('click', trackButtonClick));
 });
diff --git a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
index 7b5e0f70b7b..8626fd18233 100644
--- a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
+++ b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
@@ -58,14 +58,14 @@ export default {
       eventHub.$emit('promoteLabelModal.requestStarted', this.url);
       return axios
         .post(this.url, { params: { format: 'json' } })
-        .then(response => {
+        .then((response) => {
           eventHub.$emit('promoteLabelModal.requestFinished', {
             labelUrl: this.url,
             successful: true,
           });
           visitUrl(response.data.url);
         })
-        .catch(error => {
+        .catch((error) => {
           eventHub.$emit('promoteLabelModal.requestFinished', {
             labelUrl: this.url,
             successful: false,
diff --git a/app/assets/javascripts/pages/projects/labels/index/index.js b/app/assets/javascripts/pages/projects/labels/index/index.js
index ee129011f9a..4f5e5c8cceb 100644
--- a/app/assets/javascripts/pages/projects/labels/index/index.js
+++ b/app/assets/javascripts/pages/projects/labels/index/index.js
@@ -19,7 +19,7 @@ const initLabelIndex = () => {
     }
   };
 
-  const onRequestStarted = labelUrl => {
+  const onRequestStarted = (labelUrl) => {
     const button = document.querySelector(
       `.js-promote-project-label-button[data-url="${labelUrl}"]`,
     );
@@ -46,7 +46,7 @@ const initLabelIndex = () => {
       eventHub.$on('promoteLabelModal.props', this.setModalProps);
       eventHub.$emit('promoteLabelModal.mounted');
 
-      promoteLabelButtons.forEach(button => {
+      promoteLabelButtons.forEach((button) => {
         button.removeAttribute('disabled');
         button.addEventListener('click', () => {
           this.$root.$emit('bv::show::modal', 'promote-label-modal');
@@ -77,5 +77,4 @@ const initLabelIndex = () => {
     },
   });
 };
-
-document.addEventListener('DOMContentLoaded', initLabelIndex);
+initLabelIndex();
diff --git a/app/assets/javascripts/pages/projects/labels/new/index.js b/app/assets/javascripts/pages/projects/labels/new/index.js
index 83d6ac9fd14..2e8308fe084 100644
--- a/app/assets/javascripts/pages/projects/labels/new/index.js
+++ b/app/assets/javascripts/pages/projects/labels/new/index.js
@@ -1,3 +1,4 @@
 import Labels from 'ee_else_ce/labels';
 
-document.addEventListener('DOMContentLoaded', () => new Labels());
+// eslint-disable-next-line no-new
+new Labels();
diff --git a/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare.js b/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare.js
index 46f3f55a400..eb2692c7cb4 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare.js
@@ -19,7 +19,7 @@ const updateCommitList = (url, $loadingIndicator, $commitList, params) => {
     });
 };
 
-export default mrNewCompareNode => {
+export default (mrNewCompareNode) => {
   const { sourceBranchUrl, targetBranchUrl } = mrNewCompareNode.dataset;
   initTargetProjectDropdown();
 
@@ -29,9 +29,7 @@ export default mrNewCompareNode => {
       $(mrNewCompareNode).find('.js-source-loading'),
       $(mrNewCompareNode).find('.mr_source_commit'),
       {
-        ref: $(mrNewCompareNode)
-          .find("input[name='merge_request[source_branch]']")
-          .val(),
+        ref: $(mrNewCompareNode).find("input[name='merge_request[source_branch]']").val(),
       },
     );
   const updateTargetBranchCommitList = () =>
@@ -43,12 +41,10 @@ export default mrNewCompareNode => {
         target_project_id: $(mrNewCompareNode)
           .find("input[name='merge_request[target_project_id]']")
           .val(),
-        ref: $(mrNewCompareNode)
-          .find("input[name='merge_request[target_branch]']")
-          .val(),
+        ref: $(mrNewCompareNode).find("input[name='merge_request[target_branch]']").val(),
       },
     );
-  initCompareAutocomplete('branches', $dropdown => {
+  initCompareAutocomplete('branches', ($dropdown) => {
     if ($dropdown.is('.js-target-branch')) {
       updateTargetBranchCommitList();
     } else if ($dropdown.is('.js-source-branch')) {
diff --git a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
index 0714fc21b17..1a0c5860991 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
@@ -1,3 +1,4 @@
+import Vue from 'vue';
 import ZenMode from '~/zen_mode';
 import initIssuableSidebar from '~/init_issuable_sidebar';
 import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
@@ -7,8 +8,9 @@ import initSourcegraph from '~/sourcegraph';
 import loadAwardsHandler from '~/awards_handler';
 import initInviteMemberTrigger from '~/invite_member/init_invite_member_trigger';
 import initInviteMemberModal from '~/invite_member/init_invite_member_modal';
+import StatusBox from '~/merge_request/components/status_box.vue';
 
-export default function() {
+export default function () {
   new ZenMode(); // eslint-disable-line no-new
   initIssuableSidebar();
   initPipelines();
@@ -18,4 +20,17 @@ export default function() {
   loadAwardsHandler();
   initInviteMemberModal();
   initInviteMemberTrigger();
+
+  const el = document.querySelector('.js-mr-status-box');
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    render(h) {
+      return h(StatusBox, {
+        props: {
+          initialState: el.dataset.state,
+        },
+      });
+    },
+  });
 }
diff --git a/app/assets/javascripts/pages/projects/new/index.js b/app/assets/javascripts/pages/projects/new/index.js
index 19aeb1d1ecf..88f4db3ec08 100644
--- a/app/assets/javascripts/pages/projects/new/index.js
+++ b/app/assets/javascripts/pages/projects/new/index.js
@@ -10,7 +10,7 @@ document.addEventListener('DOMContentLoaded', () => {
   import(
     /* webpackChunkName: 'experiment_new_project_creation' */ '../../../projects/experiment_new_project_creation'
   )
-    .then(m => {
+    .then((m) => {
       const el = document.querySelector('.js-experiment-new-project-creation');
 
       if (!el) {
@@ -20,6 +20,7 @@ document.addEventListener('DOMContentLoaded', () => {
       const config = {
         hasErrors: 'hasErrors' in el.dataset,
         isCiCdAvailable: 'isCiCdAvailable' in el.dataset,
+        newProjectGuidelines: el.dataset.newProjectGuidelines,
       };
       m.default(el, config);
     })
diff --git a/app/assets/javascripts/pages/projects/pages_domains/form.js b/app/assets/javascripts/pages/projects/pages_domains/form.js
index ae5368179b1..169530685ad 100644
--- a/app/assets/javascripts/pages/projects/pages_domains/form.js
+++ b/app/assets/javascripts/pages/projects/pages_domains/form.js
@@ -1,7 +1,7 @@
 import setupToggleButtons from '~/toggle_buttons';
 
 function updateVisibility(selector, isVisible) {
-  Array.from(document.querySelectorAll(selector)).forEach(el => {
+  Array.from(document.querySelectorAll(selector)).forEach((el) => {
     if (isVisible) {
       el.classList.remove('d-none');
     } else {
@@ -14,12 +14,12 @@ export default () => {
   const toggleContainer = document.querySelector('.js-auto-ssl-toggle-container');
 
   if (toggleContainer) {
-    const onToggleButtonClicked = isAutoSslEnabled => {
+    const onToggleButtonClicked = (isAutoSslEnabled) => {
       updateVisibility('.js-shown-unless-auto-ssl', !isAutoSslEnabled);
 
       updateVisibility('.js-shown-if-auto-ssl', isAutoSslEnabled);
 
-      Array.from(document.querySelectorAll('.js-enabled-unless-auto-ssl')).forEach(el => {
+      Array.from(document.querySelectorAll('.js-enabled-unless-auto-ssl')).forEach((el) => {
         if (isAutoSslEnabled) {
           el.setAttribute('disabled', 'disabled');
         } else {
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js b/app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js
index 90d2df50d5a..40730ec7e60 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js
@@ -13,12 +13,12 @@ document.addEventListener('DOMContentLoaded', () => {
   // eslint-disable-next-line no-new
   new Vue({
     el,
-    render(createElement) {
-      return createElement(PipelineSchedulesCallout);
-    },
     provide: {
       docsUrl,
       illustrationUrl,
     },
+    render(createElement) {
+      return createElement(PipelineSchedulesCallout);
+    },
   });
 });
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
index 5ef1f959b2c..aa7414f3ae7 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
@@ -125,7 +125,7 @@ export default {
         :data-testid="option.value"
       >
         <gl-sprintf v-if="option.link" :message="option.text">
-          <template #link="{content}">
+          <template #link="{ content }">
             <gl-link :href="option.link" target="_blank" class="gl-font-sm">
               {{ content }}
             </gl-link>
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/target_branch_dropdown.js b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/target_branch_dropdown.js
index 4b203891640..6017cd653e4 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/target_branch_dropdown.js
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/target_branch_dropdown.js
@@ -15,19 +15,19 @@ export default class TargetBranchDropdown {
       data: this.formatBranchesList(),
       filterable: true,
       selectable: true,
-      toggleLabel: item => item.name,
+      toggleLabel: (item) => item.name,
       search: {
         fields: ['name'],
       },
-      clicked: cfg => this.updateInputValue(cfg),
-      text: item => item.name,
+      clicked: (cfg) => this.updateInputValue(cfg),
+      text: (item) => item.name,
     });
 
     this.setDropdownToggle();
   }
 
   formatBranchesList() {
-    return this.$dropdown.data('data').map(val => ({ name: val }));
+    return this.$dropdown.data('data').map((val) => ({ name: val }));
   }
 
   setDropdownToggle() {
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js
index 2a58e015ff1..16c4a6191b2 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js
@@ -5,10 +5,10 @@ const defaults = {
   $inputEl: null,
   $dropdownEl: null,
   onSelectTimezone: null,
-  displayFormat: item => item.name,
+  displayFormat: (item) => item.name,
 };
 
-export const formatUtcOffset = offset => {
+export const formatUtcOffset = (offset) => {
   const parsed = parseInt(offset, 10);
   if (Number.isNaN(parsed) || parsed === 0) {
     return `0`;
@@ -17,11 +17,11 @@ export const formatUtcOffset = offset => {
   return `${prefix} ${Math.abs(offset / 3600)}`;
 };
 
-export const formatTimezone = item => `[UTC ${formatUtcOffset(item.offset)}] ${item.name}`;
+export const formatTimezone = (item) => `[UTC ${formatUtcOffset(item.offset)}] ${item.name}`;
 
 export const findTimezoneByIdentifier = (tzList = [], identifier = null) => {
   if (tzList && tzList.length && identifier && identifier.length) {
-    return tzList.find(tz => tz.identifier === identifier) || null;
+    return tzList.find((tz) => tz.identifier === identifier) || null;
   }
   return null;
 };
@@ -52,8 +52,8 @@ export default class TimezoneDropdown {
       search: {
         fields: ['name'],
       },
-      clicked: cfg => this.updateInputValue(cfg),
-      text: item => formatTimezone(item),
+      clicked: (cfg) => this.updateInputValue(cfg),
+      text: (item) => formatTimezone(item),
     });
 
     this.setDropdownToggle(this.displayFormat(this.initialTimezone));
diff --git a/app/assets/javascripts/pages/projects/pipelines/charts/index.js b/app/assets/javascripts/pages/projects/pipelines/charts/index.js
index d77b84a3b24..44d7555e639 100644
--- a/app/assets/javascripts/pages/projects/pipelines/charts/index.js
+++ b/app/assets/javascripts/pages/projects/pipelines/charts/index.js
@@ -1,3 +1,3 @@
 import initProjectPipelinesChartsApp from '~/projects/pipelines/charts/index';
 
-document.addEventListener('DOMContentLoaded', initProjectPipelinesChartsApp);
+initProjectPipelinesChartsApp();
diff --git a/app/assets/javascripts/pages/projects/pipelines/init_pipelines.js b/app/assets/javascripts/pages/projects/pipelines/init_pipelines.js
index 5fd3fce88aa..0c29f8817e7 100644
--- a/app/assets/javascripts/pages/projects/pipelines/init_pipelines.js
+++ b/app/assets/javascripts/pages/projects/pipelines/init_pipelines.js
@@ -6,7 +6,7 @@ export default () => {
   const fullMergeRequestList = document.querySelector('.js-full-mr-list');
 
   if (mergeRequestListToggle) {
-    mergeRequestListToggle.addEventListener('click', e => {
+    mergeRequestListToggle.addEventListener('click', (e) => {
       e.preventDefault();
       truncatedMergeRequestList.classList.toggle('hide');
       fullMergeRequestList.classList.toggle('hide');
diff --git a/app/assets/javascripts/pages/projects/pipelines/new/index.js b/app/assets/javascripts/pages/projects/pipelines/new/index.js
index d5563143f0c..08c31f2b3c6 100644
--- a/app/assets/javascripts/pages/projects/pipelines/new/index.js
+++ b/app/assets/javascripts/pages/projects/pipelines/new/index.js
@@ -3,17 +3,15 @@ import NewBranchForm from '~/new_branch_form';
 import setupNativeFormVariableList from '~/ci_variable_list/native_form_variable_list';
 import initNewPipeline from '~/pipeline_new/index';
 
-document.addEventListener('DOMContentLoaded', () => {
-  const el = document.getElementById('js-new-pipeline');
+const el = document.getElementById('js-new-pipeline');
 
-  if (el) {
-    initNewPipeline();
-  } else {
-    new NewBranchForm($('.js-new-pipeline-form')); // eslint-disable-line no-new
+if (el) {
+  initNewPipeline();
+} else {
+  new NewBranchForm($('.js-new-pipeline-form')); // eslint-disable-line no-new
 
-    setupNativeFormVariableList({
-      container: $('.js-ci-variable-list-section'),
-      formField: 'variables_attributes',
-    });
-  }
-});
+  setupNativeFormVariableList({
+    container: $('.js-ci-variable-list-section'),
+    formField: 'variables_attributes',
+  });
+}
diff --git a/app/assets/javascripts/pages/projects/project.js b/app/assets/javascripts/pages/projects/project.js
index 8c7aa04a0b6..ef6953db83b 100644
--- a/app/assets/javascripts/pages/projects/project.js
+++ b/app/assets/javascripts/pages/projects/project.js
@@ -18,34 +18,26 @@ export default class Project {
     // Ref switcher
     if (document.querySelector('.js-project-refs-dropdown')) {
       Project.initRefSwitcher();
-      $('.project-refs-select').on('change', function() {
-        return $(this)
-          .parents('form')
-          .trigger('submit');
+      $('.project-refs-select').on('change', function () {
+        return $(this).parents('form').trigger('submit');
       });
     }
 
-    $('.hide-no-ssh-message').on('click', function(e) {
+    $('.hide-no-ssh-message').on('click', function (e) {
       Cookies.set('hide_no_ssh_message', 'false');
-      $(this)
-        .parents('.no-ssh-key-message')
-        .remove();
+      $(this).parents('.no-ssh-key-message').remove();
       return e.preventDefault();
     });
-    $('.hide-no-password-message').on('click', function(e) {
+    $('.hide-no-password-message').on('click', function (e) {
       Cookies.set('hide_no_password_message', 'false');
-      $(this)
-        .parents('.no-password-message')
-        .remove();
+      $(this).parents('.no-password-message').remove();
       return e.preventDefault();
     });
-    $('.hide-auto-devops-implicitly-enabled-banner').on('click', function(e) {
+    $('.hide-auto-devops-implicitly-enabled-banner').on('click', function (e) {
       const projectId = $(this).data('project-id');
       const cookieKey = `hide_auto_devops_implicitly_enabled_banner_${projectId}`;
       Cookies.set(cookieKey, 'false');
-      $(this)
-        .parents('.auto-devops-implicitly-enabled-banner')
-        .remove();
+      $(this).parents('.auto-devops-implicitly-enabled-banner').remove();
       return e.preventDefault();
     });
 
@@ -54,7 +46,7 @@ export default class Project {
 
   static projectSelectDropdown() {
     projectSelect();
-    $('.project-item-select').on('click', e => Project.changeProject($(e.currentTarget).val()));
+    $('.project-item-select').on('click', (e) => Project.changeProject($(e.currentTarget).val()));
   }
 
   static changeProject(url) {
@@ -67,7 +59,7 @@ export default class Project {
 
     refLink.href = '#';
 
-    return $('.js-project-refs-dropdown').each(function() {
+    return $('.js-project-refs-dropdown').each(function () {
       const $dropdown = $(this);
       const selected = $dropdown.data('selected');
       const fieldName = $dropdown.data('fieldName');
@@ -132,7 +124,7 @@ export default class Project {
 
             if (loc.includes('/-/')) {
               const refs = this.fullData.Branches.concat(this.fullData.Tags);
-              const currentRef = refs.find(ref => loc.indexOf(ref) > -1);
+              const currentRef = refs.find((ref) => loc.indexOf(ref) > -1);
               if (currentRef) {
                 const targetPath = loc.split(currentRef)[1].slice(1);
                 selectedUrl.searchParams.set('path', targetPath);
diff --git a/app/assets/javascripts/pages/projects/project_members/index.js b/app/assets/javascripts/pages/projects/project_members/index.js
index e146592e134..3e0a48ee6a2 100644
--- a/app/assets/javascripts/pages/projects/project_members/index.js
+++ b/app/assets/javascripts/pages/projects/project_members/index.js
@@ -1,9 +1,11 @@
 import Vue from 'vue';
-import Members from 'ee_else_ce/members';
+import Members from '~/members';
 import memberExpirationDate from '~/member_expiration_date';
 import UsersSelect from '~/users_select';
 import groupsSelect from '~/groups_select';
 import RemoveMemberModal from '~/vue_shared/components/remove_member_modal.vue';
+import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
+import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger';
 
 function mountRemoveMemberModal() {
   const el = document.querySelector('.js-remove-member-modal');
@@ -24,6 +26,8 @@ document.addEventListener('DOMContentLoaded', () => {
   memberExpirationDate();
   memberExpirationDate('.js-access-expiration-date-groups');
   mountRemoveMemberModal();
+  initInviteMembersModal();
+  initInviteMembersTrigger();
 
   new Members(); // eslint-disable-line no-new
   new UsersSelect(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js b/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
index 83bec0092cb..1321155b7ec 100644
--- a/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
+++ b/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
@@ -5,6 +5,7 @@ import initVariableList from '~/ci_variable_list';
 import initDeployFreeze from '~/deploy_freeze';
 import initSettingsPipelinesTriggers from '~/ci_settings_pipeline_triggers';
 import initSharedRunnersToggle from '~/projects/settings/mount_shared_runners_toggle';
+import initArtifactsSettings from '~/artifacts_settings';
 
 document.addEventListener('DOMContentLoaded', () => {
   // Initialize expandable settings panels
@@ -23,7 +24,7 @@ document.addEventListener('DOMContentLoaded', () => {
   // hide extra auto devops settings based checkbox state
   const autoDevOpsExtraSettings = document.querySelector('.js-extra-settings');
   const instanceDefaultBadge = document.querySelector('.js-instance-default-badge');
-  document.querySelector('.js-toggle-extra-settings').addEventListener('click', event => {
+  document.querySelector('.js-toggle-extra-settings').addEventListener('click', (event) => {
     const { target } = event;
     if (instanceDefaultBadge) instanceDefaultBadge.style.display = 'none';
     autoDevOpsExtraSettings.classList.toggle('hidden', !target.checked);
@@ -33,6 +34,7 @@ document.addEventListener('DOMContentLoaded', () => {
   initDeployFreeze();
 
   initSettingsPipelinesTriggers();
+  initArtifactsSettings();
 
   if (gon?.features?.vueifySharedRunnersToggle) {
     initSharedRunnersToggle();
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue
index 242c58c4981..eee666bea05 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue
+++ b/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue
@@ -33,6 +33,11 @@ export default {
       required: false,
       default: false,
     },
+    showToggle: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   computed: {
     featureEnabled() {
@@ -74,6 +79,7 @@ export default {
   >
     <input v-if="name" :name="name" :value="value" type="hidden" />
     <project-feature-toggle
+      v-if="showToggle"
       class="gl-flex-grow-0 gl-mr-3"
       :value="featureEnabled"
       :disabled-input="disabledInput"
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
index be197a50775..4af476fbd68 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
+++ b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
@@ -12,6 +12,7 @@ import {
   featureAccessLevelMembers,
   featureAccessLevelEveryone,
   featureAccessLevel,
+  featureAccessLevelNone,
 } from '../constants';
 import { toggleHiddenClassBySelector } from '../external';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -140,6 +141,7 @@ export default {
       metricsDashboardAccessLevel: featureAccessLevel.PROJECT_MEMBERS,
       analyticsAccessLevel: featureAccessLevel.EVERYONE,
       requirementsAccessLevel: featureAccessLevel.EVERYONE,
+      operationsAccessLevel: featureAccessLevel.EVERYONE,
       containerRegistryEnabled: true,
       lfsEnabled: true,
       requestAccessEnabled: true,
@@ -167,6 +169,14 @@ export default {
       );
     },
 
+    operationsFeatureAccessLevelOptions() {
+      if (!this.operationsEnabled) return [featureAccessLevelNone];
+
+      return this.featureAccessLevelOptions.filter(
+        ([value]) => value <= this.operationsAccessLevel,
+      );
+    },
+
     pagesFeatureAccessLevelOptions() {
       const options = [featureAccessLevelMembers];
 
@@ -186,8 +196,12 @@ export default {
       return options;
     },
 
-    metricsOptionsDropdownEnabled() {
-      return this.featureAccessLevelOptions.length < 2;
+    metricsOptionsDropdownDisabled() {
+      return this.operationsFeatureAccessLevelOptions.length < 2 || !this.operationsEnabled;
+    },
+
+    operationsEnabled() {
+      return this.operationsAccessLevel > featureAccessLevel.NOT_ENABLED;
     },
 
     repositoryEnabled() {
@@ -250,6 +264,10 @@ export default {
           featureAccessLevel.PROJECT_MEMBERS,
           this.requirementsAccessLevel,
         );
+        this.operationsAccessLevel = Math.min(
+          featureAccessLevel.PROJECT_MEMBERS,
+          this.operationsAccessLevel,
+        );
         if (this.pagesAccessLevel === featureAccessLevel.EVERYONE) {
           // When from Internal->Private narrow access for only members
           this.pagesAccessLevel = featureAccessLevel.PROJECT_MEMBERS;
@@ -277,6 +295,8 @@ export default {
           this.metricsDashboardAccessLevel = featureAccessLevel.EVERYONE;
         if (this.requirementsAccessLevel === featureAccessLevel.PROJECT_MEMBERS)
           this.requirementsAccessLevel = featureAccessLevel.EVERYONE;
+        if (this.operationsAccessLevel === featureAccessLevel.PROJECT_MEMBERS)
+          this.operationsAccessLevel = featureAccessLevel.EVERYONE;
 
         this.highlightChanges();
       }
@@ -334,18 +354,21 @@ export default {
               <option
                 :value="visibilityOptions.PRIVATE"
                 :disabled="!visibilityAllowed(visibilityOptions.PRIVATE)"
-                >{{ s__('ProjectSettings|Private') }}</option
               >
+                {{ s__('ProjectSettings|Private') }}
+              </option>
               <option
                 :value="visibilityOptions.INTERNAL"
                 :disabled="!visibilityAllowed(visibilityOptions.INTERNAL)"
-                >{{ s__('ProjectSettings|Internal') }}</option
               >
+                {{ s__('ProjectSettings|Internal') }}
+              </option>
               <option
                 :value="visibilityOptions.PUBLIC"
                 :disabled="!visibilityAllowed(visibilityOptions.PUBLIC)"
-                >{{ s__('ProjectSettings|Public') }}</option
               >
+                {{ s__('ProjectSettings|Public') }}
+              </option>
             </select>
             <gl-icon
               name="chevron-down"
@@ -354,6 +377,11 @@ export default {
             />
           </div>
         </div>
+        <span v-if="!visibilityAllowed(visibilityLevel)" class="form-text text-muted">{{
+          s__(
+            'ProjectSettings|Visibility options for this fork are limited by the current visibility of the source project.',
+          )
+        }}</span>
         <span class="form-text text-muted">{{ visibilityLevelDescription }}</span>
         <label v-if="visibilityLevel !== visibilityOptions.PRIVATE" class="gl-line-height-28">
           <input
@@ -562,41 +590,34 @@ export default {
         />
       </project-setting-row>
       <project-setting-row
-        ref="metrics-visibility-settings"
-        :label="__('Metrics Dashboard')"
-        :help-text="
-          s__(
-            'ProjectSettings|With Metrics Dashboard you can visualize this project performance metrics',
-          )
-        "
+        ref="operations-settings"
+        :label="s__('ProjectSettings|Operations')"
+        :help-text="s__('ProjectSettings|Environments, logs, cluster management, and more')"
       >
-        <div class="project-feature-controls gl-display-flex gl-align-items-center gl-my-3 gl-mx-0">
-          <div class="select-wrapper gl-flex-fill-1">
-            <select
-              v-model="metricsDashboardAccessLevel"
-              :disabled="metricsOptionsDropdownEnabled"
-              name="project[project_feature_attributes][metrics_dashboard_access_level]"
-              class="form-control project-repo-select select-control"
-            >
-              <option
-                :value="featureAccessLevelMembers[0]"
-                :disabled="!visibilityAllowed(visibilityOptions.INTERNAL)"
-                >{{ featureAccessLevelMembers[1] }}</option
-              >
-              <option
-                :value="featureAccessLevelEveryone[0]"
-                :disabled="!visibilityAllowed(visibilityOptions.PUBLIC)"
-                >{{ featureAccessLevelEveryone[1] }}</option
-              >
-            </select>
-            <gl-icon
-              name="chevron-down"
-              data-hidden="true"
-              class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500"
-            />
-          </div>
-        </div>
+        <project-feature-setting
+          v-model="operationsAccessLevel"
+          :options="featureAccessLevelOptions"
+          name="project[project_feature_attributes][operations_access_level]"
+        />
       </project-setting-row>
+      <div class="project-feature-setting-group gl-pl-7 gl-sm-pl-5">
+        <project-setting-row
+          ref="metrics-visibility-settings"
+          :label="__('Metrics Dashboard')"
+          :help-text="
+            s__(
+              'ProjectSettings|With Metrics Dashboard you can visualize this project performance metrics',
+            )
+          "
+        >
+          <project-feature-setting
+            v-model="metricsDashboardAccessLevel"
+            :show-toggle="false"
+            :options="operationsFeatureAccessLevelOptions"
+            name="project[project_feature_attributes][metrics_dashboard_access_level]"
+          />
+        </project-setting-row>
+      </div>
     </div>
     <project-setting-row v-if="canDisableEmails" ref="email-settings" class="mb-3">
       <label class="js-emails-disabled">
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/external.js b/app/assets/javascripts/pages/projects/shared/permissions/external.js
index 460af4a2111..49f6ebcc20f 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/external.js
+++ b/app/assets/javascripts/pages/projects/shared/permissions/external.js
@@ -14,5 +14,5 @@ export function toggleHiddenClassBySelector(selector, hidden) {
   if (!selectorCache[selector]) {
     selectorCache[selector] = document.querySelectorAll(selector);
   }
-  selectorCache[selector].forEach(elm => toggleHiddenClass(elm, hidden));
+  selectorCache[selector].forEach((elm) => toggleHiddenClass(elm, hidden));
 }
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/index.js b/app/assets/javascripts/pages/projects/shared/permissions/index.js
index dbde8dda634..d7bae44e96e 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/index.js
+++ b/app/assets/javascripts/pages/projects/shared/permissions/index.js
@@ -8,6 +8,6 @@ export default function initProjectPermissionsSettings() {
 
   return new Vue({
     el: mountPoint,
-    render: createElement => createElement(settingsPanel, { props: { ...componentProps } }),
+    render: (createElement) => createElement(settingsPanel, { props: { ...componentProps } }),
   });
 }
diff --git a/app/assets/javascripts/pages/projects/tags/index/index.js b/app/assets/javascripts/pages/projects/tags/index/index.js
index ec56fa3e075..96e52850936 100644
--- a/app/assets/javascripts/pages/projects/tags/index/index.js
+++ b/app/assets/javascripts/pages/projects/tags/index/index.js
@@ -2,11 +2,8 @@ import { initRemoveTag } from '../remove_tag';
 
 document.addEventListener('DOMContentLoaded', () => {
   initRemoveTag({
-    onDelete: path => {
-      document
-        .querySelector(`[data-path="${path}"]`)
-        .closest('.js-tag-list')
-        .remove();
+    onDelete: (path) => {
+      document.querySelector(`[data-path="${path}"]`).closest('.js-tag-list').remove();
     },
   });
 });