Add latest changes from gitlab-org/gitlab@14-8-stable-eev14.8.0-rc42

21 files changed, 128 insertions, 44 deletions

diff --git a/app/assets/javascripts/pages/admin/application_settings/general/components/signup_form.vue b/app/assets/javascripts/pages/admin/application_settings/general/components/signup_form.vue
index c2510a16d2f..3ef75b3ef0e 100644
--- a/app/assets/javascripts/pages/admin/application_settings/general/components/signup_form.vue
+++ b/app/assets/javascripts/pages/admin/application_settings/general/components/signup_form.vue
@@ -140,8 +140,8 @@ export default {
       return {
         id: 'signup-settings-modal',
         text: n__(
-          'ApplicationSettings|By making this change, you will automatically approve %d user with the pending approval status.',
-          'ApplicationSettings|By making this change, you will automatically approve %d users with the pending approval status.',
+          'ApplicationSettings|By making this change, you will automatically approve %d user who is pending approval.',
+          'ApplicationSettings|By making this change, you will automatically approve %d users who are pending approval.',
           pendingUserCount,
         ),
         actionPrimary: {
@@ -157,7 +157,7 @@ export default {
         actionCancel: {
           text: __('Cancel'),
         },
-        title: s__('ApplicationSettings|Approve users in the pending approval status?'),
+        title: s__('ApplicationSettings|Approve users who are pending approval?'),
       };
     },
   },
diff --git a/app/assets/javascripts/pages/admin/application_settings/payload_downloader.js b/app/assets/javascripts/pages/admin/application_settings/payload_downloader.js
new file mode 100644
index 00000000000..67eee2c3209
--- /dev/null
+++ b/app/assets/javascripts/pages/admin/application_settings/payload_downloader.js
@@ -0,0 +1,52 @@
+import createFlash from '~/flash';
+import axios from '../../../lib/utils/axios_utils';
+import { __ } from '../../../locale';
+
+export default class PayloadDownloader {
+  constructor(trigger) {
+    this.trigger = trigger;
+  }
+
+  init() {
+    this.spinner = this.trigger.querySelector('.js-spinner');
+    this.text = this.trigger.querySelector('.js-text');
+
+    this.trigger.addEventListener('click', (event) => {
+      event.preventDefault();
+
+      return this.requestPayload();
+    });
+  }
+
+  requestPayload() {
+    this.spinner.classList.add('d-inline-flex');
+
+    return axios
+      .get(this.trigger.dataset.endpoint, {
+        responseType: 'json',
+      })
+      .then(({ data }) => {
+        PayloadDownloader.downloadFile(data);
+      })
+      .catch(() => {
+        createFlash({
+          message: __('Error fetching payload data.'),
+        });
+      })
+      .finally(() => {
+        this.spinner.classList.remove('d-inline-flex');
+      });
+  }
+
+  static downloadFile(data) {
+    const blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
+
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = `${data.recorded_at.slice(0, 10)} payload.json`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(link.href);
+  }
+}
diff --git a/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js b/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js
index 08f6633f424..c017cf0afa2 100644
--- a/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js
+++ b/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js
@@ -5,7 +5,6 @@ import { __ } from '../../../locale';
 export default class PayloadPreviewer {
   constructor(trigger) {
     this.trigger = trigger;
-    this.container = document.querySelector(trigger.dataset.payloadSelector);
     this.isVisible = false;
     this.isInserted = false;
   }
@@ -23,21 +22,27 @@ export default class PayloadPreviewer {
     });
   }
 
+  getContainer() {
+    return document.querySelector(this.trigger.dataset.payloadSelector);
+  }
+
   requestPayload() {
     if (this.isInserted) return this.showPayload();
 
-    this.spinner.classList.add('d-inline-flex');
+    this.spinner.classList.add('gl-display-inline-flex');
+
+    const container = this.getContainer();
 
     return axios
-      .get(this.container.dataset.endpoint, {
+      .get(container.dataset.endpoint, {
         responseType: 'text',
       })
       .then(({ data }) => {
-        this.spinner.classList.remove('d-inline-flex');
+        this.spinner.classList.remove('gl-display-inline-flex');
         this.insertPayload(data);
       })
       .catch(() => {
-        this.spinner.classList.remove('d-inline-flex');
+        this.spinner.classList.remove('gl-display-inline-flex');
         createFlash({
           message: __('Error fetching payload data.'),
         });
@@ -46,19 +51,19 @@ export default class PayloadPreviewer {
 
   hidePayload() {
     this.isVisible = false;
-    this.container.classList.add('d-none');
+    this.getContainer().classList.add('gl-display-none');
     this.text.textContent = __('Preview payload');
   }
 
   showPayload() {
     this.isVisible = true;
-    this.container.classList.remove('d-none');
+    this.getContainer().classList.remove('gl-display-none');
     this.text.textContent = __('Hide payload');
   }
 
   insertPayload(data) {
     this.isInserted = true;
-    this.container.innerHTML = data;
+    this.getContainer().innerHTML = data;
     this.showPayload();
   }
 }
diff --git a/app/assets/javascripts/pages/admin/application_settings/service_usage_data/index.js b/app/assets/javascripts/pages/admin/application_settings/service_usage_data/index.js
new file mode 100644
index 00000000000..8a12e753847
--- /dev/null
+++ b/app/assets/javascripts/pages/admin/application_settings/service_usage_data/index.js
@@ -0,0 +1,3 @@
+import initServiceUsageData from '~/admin/application_settings/setup_service_usage_data';
+
+initServiceUsageData();
diff --git a/app/assets/javascripts/pages/admin/runners/show/index.js b/app/assets/javascripts/pages/admin/runners/show/index.js
new file mode 100644
index 00000000000..f76f3a2430d
--- /dev/null
+++ b/app/assets/javascripts/pages/admin/runners/show/index.js
@@ -0,0 +1,3 @@
+import { initAdminRunnerShow } from '~/runner/admin_runner_show';
+
+initAdminRunnerShow();
diff --git a/app/assets/javascripts/pages/groups/edit/index.js b/app/assets/javascripts/pages/groups/edit/index.js
index f6155b2ab2f..96487e14e30 100644
--- a/app/assets/javascripts/pages/groups/edit/index.js
+++ b/app/assets/javascripts/pages/groups/edit/index.js
@@ -1,8 +1,7 @@
 import { GROUP_BADGE } from '~/badges/constants';
 import dirtySubmitFactory from '~/dirty_submit/dirty_submit_factory';
 import initFilePickers from '~/file_pickers';
-import TransferDropdown from '~/groups/transfer_dropdown';
-import setupTransferEdit from '~/groups/transfer_edit';
+import initTransferGroupForm from '~/groups/init_transfer_group_form';
 import groupsSelect from '~/groups_select';
 import { initCascadingSettingsLockPopovers } from '~/namespaces/cascading_settings';
 import mountBadgeSettings from '~/pages/shared/mount_badge_settings';
@@ -15,11 +14,11 @@ document.addEventListener('DOMContentLoaded', () => {
   initFilePickers();
   initConfirmDanger();
   initSettingsPanels();
+  initTransferGroupForm();
   dirtySubmitFactory(
     document.querySelectorAll('.js-general-settings-form, .js-general-permissions-form'),
   );
   mountBadgeSettings(GROUP_BADGE);
-  setupTransferEdit('.js-group-transfer-form', '#new_parent_group_id');
 
   // Initialize Subgroups selector
   groupsSelect();
@@ -28,6 +27,4 @@ document.addEventListener('DOMContentLoaded', () => {
 
   initSearchSettings();
   initCascadingSettingsLockPopovers();
-
-  return new TransferDropdown();
 });
diff --git a/app/assets/javascripts/pages/groups/group_members/index.js b/app/assets/javascripts/pages/groups/group_members/index.js
index 01a371920f8..14ce3f775b1 100644
--- a/app/assets/javascripts/pages/groups/group_members/index.js
+++ b/app/assets/javascripts/pages/groups/group_members/index.js
@@ -1,6 +1,7 @@
 import { groupMemberRequestFormatter } from '~/groups/members/utils';
 import groupsSelect from '~/groups_select';
 import initInviteGroupTrigger from '~/invite_members/init_invite_group_trigger';
+import initInviteGroupsModal from '~/invite_members/init_invite_groups_modal';
 import initInviteMembersForm from '~/invite_members/init_invite_members_form';
 import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
 import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger';
@@ -56,6 +57,7 @@ groupsSelect();
 memberExpirationDate();
 memberExpirationDate('.js-access-expiration-date-groups');
 initInviteMembersModal();
+initInviteGroupsModal();
 initInviteMembersTrigger();
 initInviteGroupTrigger();
 
diff --git a/app/assets/javascripts/pages/projects/imports/new/index.js b/app/assets/javascripts/pages/projects/imports/new/index.js
new file mode 100644
index 00000000000..4acfc5265ac
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/imports/new/index.js
@@ -0,0 +1,3 @@
+import initProjectNew from '~/projects/project_new';
+
+initProjectNew.bindEvents();
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue
index 42c40cda601..adae97c6b6f 100644
--- a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue
+++ b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue
@@ -2,7 +2,8 @@
 import { GlProgressBar, GlSprintf, GlAlert } from '@gitlab/ui';
 import eventHub from '~/invite_members/event_hub';
 import { s__ } from '~/locale';
-import { ACTION_LABELS, ACTION_SECTIONS } from '../constants';
+import { getCookie, removeCookie, parseBoolean } from '~/lib/utils/common_utils';
+import { ACTION_LABELS, ACTION_SECTIONS, INVITE_MODAL_OPEN_COOKIE } from '../constants';
 import LearnGitlabSectionCard from './learn_gitlab_section_card.vue';
 
 export default {
@@ -26,7 +27,7 @@ export default {
       required: true,
       type: Object,
     },
-    inviteMembersOpen: {
+    inviteMembers: {
       type: Boolean,
       required: false,
       default: false,
@@ -53,7 +54,7 @@ export default {
     },
   },
   mounted() {
-    if (this.inviteMembersOpen) {
+    if (this.inviteMembers && this.getCookieForInviteMembers()) {
       this.openInviteMembersModal('celebrate');
     }
 
@@ -63,8 +64,15 @@ export default {
     eventHub.$off('showSuccessfulInvitationsAlert', this.handleShowSuccessfulInvitationsAlert);
   },
   methods: {
+    getCookieForInviteMembers() {
+      const value = parseBoolean(getCookie(INVITE_MODAL_OPEN_COOKIE));
+
+      removeCookie(INVITE_MODAL_OPEN_COOKIE);
+
+      return value;
+    },
     openInviteMembersModal(mode) {
-      eventHub.$emit('openModal', { mode, inviteeType: 'members', source: 'learn-gitlab' });
+      eventHub.$emit('openModal', { mode, source: 'learn-gitlab' });
     },
     handleShowSuccessfulInvitationsAlert() {
       this.showSuccessfulInvitationsAlert = true;
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue
index 3a401f5cb31..d0ec02bbd0c 100644
--- a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue
+++ b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue
@@ -31,14 +31,13 @@ export default {
         this.action === 'userAdded' && isExperimentVariant('invite_for_help_continuous_onboarding')
       );
     },
+    openInNewTab() {
+      return ACTION_LABELS[this.action]?.openInNewTab === true;
+    },
   },
   methods: {
     openModal() {
-      eventHub.$emit('openModal', {
-        inviteeType: 'members',
-        source: 'learn_gitlab',
-        tasksToBeDoneEnabled: true,
-      });
+      eventHub.$emit('openModal', { source: 'learn_gitlab' });
     },
   },
 };
@@ -61,8 +60,9 @@ export default {
     </gl-link>
     <gl-link
       v-else
-      target="_blank"
+      :target="openInNewTab ? '_blank' : '_self'"
       :href="value.url"
+      data-testid="uncompleted-learn-gitlab-link"
       data-track-action="click_link"
       :data-track-label="$options.i18n.ACTION_LABELS[action].title"
       data-track-property="Growth::Conversion::Experiment::LearnGitLab"
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/constants/index.js b/app/assets/javascripts/pages/projects/learn_gitlab/constants/index.js
index 9e204aa6746..880cf699e5e 100644
--- a/app/assets/javascripts/pages/projects/learn_gitlab/constants/index.js
+++ b/app/assets/javascripts/pages/projects/learn_gitlab/constants/index.js
@@ -62,6 +62,7 @@ export const ACTION_LABELS = {
     description: s__('LearnGitLab|Scan your code to uncover vulnerabilities before deploying.'),
     section: 'deploy',
     position: 1,
+    openInNewTab: true,
   },
   issueCreated: {
     title: s__('LearnGitLab|Create an issue'),
@@ -94,3 +95,5 @@ export const ACTION_SECTIONS = {
     ),
   },
 };
+
+export const INVITE_MODAL_OPEN_COOKIE = 'confetti_post_signup';
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js b/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js
index 1f91cc46946..c62cab1a425 100644
--- a/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js
+++ b/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { convertObjectPropsToCamelCase, parseBoolean } from '~/lib/utils/common_utils';
 import LearnGitlab from '../components/learn_gitlab.vue';
 
 function initLearnGitlab() {
@@ -13,13 +13,13 @@ function initLearnGitlab() {
   const actions = convertObjectPropsToCamelCase(JSON.parse(el.dataset.actions));
   const sections = convertObjectPropsToCamelCase(JSON.parse(el.dataset.sections));
   const project = convertObjectPropsToCamelCase(JSON.parse(el.dataset.project));
-  const { inviteMembersOpen } = el.dataset;
+  const { inviteMembers } = el.dataset;
 
   return new Vue({
     el,
     render(createElement) {
       return createElement(LearnGitlab, {
-        props: { actions, sections, project, inviteMembersOpen },
+        props: { actions, sections, project, inviteMembers: parseBoolean(inviteMembers) },
       });
     },
   });
diff --git a/app/assets/javascripts/pages/projects/new/index.js b/app/assets/javascripts/pages/projects/new/index.js
index 5d830872ed9..50733d8a145 100644
--- a/app/assets/javascripts/pages/projects/new/index.js
+++ b/app/assets/javascripts/pages/projects/new/index.js
@@ -1,4 +1,8 @@
-import { initNewProjectCreation, initNewProjectUrlSelect } from '~/projects/new';
+import {
+  initNewProjectCreation,
+  initNewProjectUrlSelect,
+  initDeploymentTargetSelect,
+} from '~/projects/new';
 import initProjectVisibilitySelector from '~/projects/project_visibility';
 import initProjectNew from '~/projects/project_new';
 
@@ -6,3 +10,4 @@ initProjectVisibilitySelector();
 initProjectNew.bindEvents();
 initNewProjectCreation();
 initNewProjectUrlSelect();
+initDeploymentTargetSelect();
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue
index 42b08bcaa7b..ee70ff858be 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue
@@ -1,8 +1,8 @@
 <script>
 import { GlButton } from '@gitlab/ui';
-import Cookies from 'js-cookie';
 import Vue from 'vue';
-import { parseBoolean } from '~/lib/utils/common_utils';
+import { getCookie, setCookie, parseBoolean } from '~/lib/utils/common_utils';
+
 import Translate from '../../../../../vue_shared/translate';
 
 Vue.use(Translate);
@@ -17,13 +17,13 @@ export default {
   inject: ['docsUrl', 'illustrationUrl'],
   data() {
     return {
-      calloutDismissed: parseBoolean(Cookies.get(cookieKey)),
+      calloutDismissed: parseBoolean(getCookie(cookieKey)),
     };
   },
   methods: {
     dismissCallout() {
       this.calloutDismissed = true;
-      Cookies.set(cookieKey, this.calloutDismissed, { expires: 365 });
+      setCookie(cookieKey, this.calloutDismissed);
     },
   },
 };
diff --git a/app/assets/javascripts/pages/projects/planning_hierarchy/index.js b/app/assets/javascripts/pages/projects/planning_hierarchy/index.js
new file mode 100644
index 00000000000..d5dfe2d5f37
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/planning_hierarchy/index.js
@@ -0,0 +1,3 @@
+import { initWorkItemsHierarchy } from '~/work_items_hierarchy/work_items_hierarchy_bundle';
+
+initWorkItemsHierarchy();
diff --git a/app/assets/javascripts/pages/projects/project.js b/app/assets/javascripts/pages/projects/project.js
index a26aeeb6db4..0c17bf2f344 100644
--- a/app/assets/javascripts/pages/projects/project.js
+++ b/app/assets/javascripts/pages/projects/project.js
@@ -1,7 +1,7 @@
 /* eslint-disable func-names, no-return-assign */
 
 import $ from 'jquery';
-import Cookies from 'js-cookie';
+import { setCookie } from '~/lib/utils/common_utils';
 import initClonePanel from '~/clone_panel';
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 import createFlash from '~/flash';
@@ -24,19 +24,19 @@ export default class Project {
     }
 
     $('.js-hide-no-ssh-message').on('click', function (e) {
-      Cookies.set('hide_no_ssh_message', 'false');
+      setCookie('hide_no_ssh_message', 'false');
       $(this).parents('.js-no-ssh-key-message').remove();
       return e.preventDefault();
     });
     $('.js-hide-no-password-message').on('click', function (e) {
-      Cookies.set('hide_no_password_message', 'false');
+      setCookie('hide_no_password_message', 'false');
       $(this).parents('.js-no-password-message').remove();
       return e.preventDefault();
     });
     $('.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');
+      setCookie(cookieKey, 'false');
       $(this).parents('.auto-devops-implicitly-enabled-banner').remove();
       return e.preventDefault();
     });
diff --git a/app/assets/javascripts/pages/projects/project_members/index.js b/app/assets/javascripts/pages/projects/project_members/index.js
index 947bbdacf2c..26c42247cf7 100644
--- a/app/assets/javascripts/pages/projects/project_members/index.js
+++ b/app/assets/javascripts/pages/projects/project_members/index.js
@@ -3,6 +3,7 @@ import initImportAProjectModal from '~/invite_members/init_import_a_project_moda
 import initInviteGroupTrigger from '~/invite_members/init_invite_group_trigger';
 import initInviteMembersForm from '~/invite_members/init_invite_members_form';
 import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
+import initInviteGroupsModal from '~/invite_members/init_invite_groups_modal';
 import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger';
 import { s__ } from '~/locale';
 import memberExpirationDate from '~/member_expiration_date';
@@ -17,6 +18,7 @@ memberExpirationDate();
 memberExpirationDate('.js-access-expiration-date-groups');
 initImportAProjectModal();
 initInviteMembersModal();
+initInviteGroupsModal();
 initInviteMembersTrigger();
 initInviteGroupTrigger();
 
diff --git a/app/assets/javascripts/pages/projects/security/configuration/index.js b/app/assets/javascripts/pages/projects/security/configuration/index.js
index 5f801501b2f..f13a48c1224 100644
--- a/app/assets/javascripts/pages/projects/security/configuration/index.js
+++ b/app/assets/javascripts/pages/projects/security/configuration/index.js
@@ -1,3 +1,3 @@
 import { initSecurityConfiguration } from '~/security_configuration';
 
-initSecurityConfiguration(document.querySelector('#js-security-configuration-static'));
+initSecurityConfiguration(document.querySelector('#js-security-configuration'));
diff --git a/app/assets/javascripts/pages/projects/serverless/index.js b/app/assets/javascripts/pages/projects/serverless/index.js
index 640301dd478..9ae81b327b1 100644
--- a/app/assets/javascripts/pages/projects/serverless/index.js
+++ b/app/assets/javascripts/pages/projects/serverless/index.js
@@ -1,5 +1,3 @@
 import ServerlessBundle from '~/serverless/serverless_bundle';
-import initServerlessSurveyBanner from '~/serverless/survey_banner';
 
-initServerlessSurveyBanner();
 new ServerlessBundle(); // eslint-disable-line no-new
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 d5e00f54e91..184bda4410f 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
@@ -280,7 +280,7 @@ export default {
       }
 
       return s__(
-        'ProjectSettings|View and edit files in this project. Non-project members will only have read access.',
+        'ProjectSettings|View and edit files in this project. Non-project members have only read access.',
       );
     },
     cveIdRequestIsDisabled() {
diff --git a/app/assets/javascripts/pages/users/index.js b/app/assets/javascripts/pages/users/index.js
index 58ceb524360..5cbb7a06bc1 100644
--- a/app/assets/javascripts/pages/users/index.js
+++ b/app/assets/javascripts/pages/users/index.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import Cookies from 'js-cookie';
+import { setCookie } from '~/lib/utils/common_utils';
 import UserCallout from '~/user_callout';
 import UserTabs from './user_tabs';
 
@@ -10,7 +10,7 @@ function initUserProfile(action) {
   // hide project limit message
   $('.hide-project-limit-message').on('click', (e) => {
     e.preventDefault();
-    Cookies.set('hide_project_limit_message', 'false');
+    setCookie('hide_project_limit_message', 'false');
     $(this).parents('.project-limit-message').remove();
   });
 }