app/assets/javascripts/environments/graphql/mutations/cancel_auto_stop.mutation.graphql

-mutation cancelAutoStop($environment: LocalEnvironment) {
-  cancelAutoStop(environment: $environment) @client {
+mutation cancelAutoStop($autoStopUrl: String!) {
+  cancelAutoStop(autoStopUrl: $autoStopUrl) @client {
     errors
   }
 }

app/assets/javascripts/environments/graphql/resolvers.js

@@ -134,9 +134,9 @@ export const resolvers = (endpoint) => ({
         data: { environmentToRollback: environment },
       });
     },
-    cancelAutoStop(_, { environment: { autoStopPath } }) {
+    cancelAutoStop(_, { autoStopUrl }) {
       return axios
-        .post(autoStopPath)
+        .post(autoStopUrl)
         .then(() => buildErrors())
         .catch((err) =>
           buildErrors([

app/assets/javascripts/environments/graphql/typedefs.graphql

@@ -77,7 +77,7 @@ extend type Mutation {
   stopEnvironment(environment: LocalEnvironmentInput): LocalErrors
   deleteEnvironment(environment: LocalEnvironmentInput): LocalErrors
   rollbackEnvironment(environment: LocalEnvironmentInput): LocalErrors
-  cancelAutoStop(environment: LocalEnvironmentInput): LocalErrors
+  cancelAutoStop(autoStopUrl: String!): LocalErrors
   setEnvironmentToDelete(environment: LocalEnvironmentInput): LocalErrors
   setEnvironmentToRollback(environment: LocalEnvironmentInput): LocalErrors
   setEnvironmentToStop(environment: LocalEnvironmentInput): LocalErrors

app/assets/javascripts/files_comment_button.js

@@ -4,7 +4,7 @@
  * causes reflows, visit https://gist.github.com/paulirish/5d52fb081b3570c81e3a
  */
 
-import Cookies from 'js-cookie';
+import { getCookie } from '~/lib/utils/common_utils';
 
 const LINE_NUMBER_CLASS = 'diff-line-num';
 const UNFOLDABLE_LINE_CLASS = 'js-unfold';
@@ -29,7 +29,7 @@ export default {
         $diffFile.closest(DIFF_CONTAINER_SELECTOR).data('canCreateNote') === '';
     }
 
-    this.isParallelView = Cookies.get('diff_view') === 'parallel';
+    this.isParallelView = getCookie('diff_view') === 'parallel';
 
     if (this.userCanCreateNote) {
       $diffFile

app/assets/javascripts/google_tag_manager/index.js

+import { v4 as uuidv4 } from 'uuid';
 import { logError } from '~/lib/logger';
 
+const SKU_PREMIUM = '2c92a00d76f0d5060176f2fb0a5029ff';
+const SKU_ULTIMATE = '2c92a0ff76f0d5250176f2f8c86f305a';
+const PRODUCT_INFO = {
+  [SKU_PREMIUM]: {
+    // eslint-disable-next-line @gitlab/require-i18n-strings
+    name: 'Premium',
+    id: '0002',
+    price: 228,
+    variant: 'SaaS',
+  },
+  [SKU_ULTIMATE]: {
+    // eslint-disable-next-line @gitlab/require-i18n-strings
+    name: 'Ultimate',
+    id: '0001',
+    price: 1188,
+    variant: 'SaaS',
+  },
+};
+
+const generateProductInfo = (sku, quantity) => {
+  const product = PRODUCT_INFO[sku];
+
+  if (!product) {
+    logError('Unexpected product sku provided to generateProductInfo');
+    return {};
+  }
+
+  const productInfo = {
+    ...product,
+    brand: 'GitLab',
+    category: 'DevOps',
+    quantity,
+  };
+
+  return productInfo;
+};
+
 const isSupported = () => Boolean(window.dataLayer) && gon.features?.gitlabGtmDatalayer;
 
 const pushEvent = (event, args = {}) => {
@@ -17,6 +55,23 @@ const pushEvent = (event, args = {}) => {
   }
 };
 
+const pushEnhancedEcommerceEvent = (event, currencyCode, args = {}) => {
+  if (!window.dataLayer) {
+    return;
+  }
+
+  try {
+    window.dataLayer.push({ ecommerce: null });
+    window.dataLayer.push({
+      event,
+      currencyCode,
+      ...args,
+    });
+  } catch (e) {
+    logError('Unexpected error while pushing to dataLayer', e);
+  }
+};
+
 const pushAccountSubmit = (accountType, accountMethod) =>
   pushEvent('accountSubmit', { accountType, accountMethod });
 
@@ -120,3 +175,58 @@ export const trackSaasTrialGetStarted = () => {
     pushEvent('saasTrialGetStarted');
   });
 };
+
+export const trackCheckout = (selectedPlan, quantity) => {
+  if (!isSupported()) {
+    return;
+  }
+
+  const product = generateProductInfo(selectedPlan, quantity);
+
+  if (Object.keys(product).length === 0) {
+    return;
+  }
+
+  const eventData = {
+    ecommerce: {
+      checkout: {
+        actionField: { step: 1 },
+        products: [product],
+      },
+    },
+  };
+
+  // eslint-disable-next-line @gitlab/require-i18n-strings
+  pushEnhancedEcommerceEvent('EECCheckout', 'USD', eventData);
+};
+
+export const trackTransaction = (transactionDetails) => {
+  if (!isSupported()) {
+    return;
+  }
+
+  const transactionId = uuidv4();
+  const { paymentOption, revenue, tax, selectedPlan, quantity } = transactionDetails;
+  const product = generateProductInfo(selectedPlan, quantity);
+
+  if (Object.keys(product).length === 0) {
+    return;
+  }
+
+  const eventData = {
+    ecommerce: {
+      purchase: {
+        actionField: {
+          id: transactionId,
+          affiliation: 'GitLab',
+          option: paymentOption,
+          revenue,
+          tax,
+        },
+        products: [product],
+      },
+    },
+  };
+
+  pushEnhancedEcommerceEvent('EECtransactionSuccess', 'USD', eventData);
+};

app/assets/javascripts/groups/components/transfer_group_form.vue

+<script>
+import { GlFormGroup } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
+import ConfirmDanger from '~/vue_shared/components/confirm_danger/confirm_danger.vue';
+import NamespaceSelect from '~/vue_shared/components/namespace_select/namespace_select.vue';
+
+export const i18n = {
+  confirmationMessage: __(
+    'You are going to transfer %{group_name} to another namespace. Are you ABSOLUTELY sure?',
+  ),
+  emptyNamespaceTitle: __('No parent group'),
+  dropdownTitle: s__('GroupSettings|Select parent group'),
+};
+
+export default {
+  name: 'TransferGroupForm',
+  components: {
+    ConfirmDanger,
+    GlFormGroup,
+    NamespaceSelect,
+  },
+  props: {
+    parentGroups: {
+      type: Object,
+      required: true,
+    },
+    isPaidGroup: {
+      type: Boolean,
+      required: true,
+    },
+    confirmationPhrase: {
+      type: String,
+      required: true,
+    },
+    confirmButtonText: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      selectedId: null,
+    };
+  },
+  computed: {
+    disableSubmitButton() {
+      return this.isPaidGroup || !this.selectedId;
+    },
+  },
+  methods: {
+    handleSelected({ id }) {
+      this.selectedId = id;
+    },
+  },
+  i18n,
+};
+</script>
+<template>
+  <div>
+    <gl-form-group v-if="!isPaidGroup">
+      <namespace-select
+        :default-text="$options.i18n.dropdownTitle"
+        :data="parentGroups"
+        :empty-namespace-title="$options.i18n.emptyNamespaceTitle"
+        :include-headers="false"
+        include-empty-namespace
+        @select="handleSelected"
+      />
+      <input type="hidden" name="new_parent_group_id" :value="selectedId" />
+    </gl-form-group>
+    <confirm-danger
+      button-class="qa-transfer-button"
+      :disabled="disableSubmitButton"
+      :phrase="confirmationPhrase"
+      :button-text="confirmButtonText"
+      @confirm="$emit('confirm')"
+    />
+  </div>
+</template>

app/assets/javascripts/groups/init_transfer_group_form.js

+import Vue from 'vue';
+import { sprintf } from '~/locale';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import TransferGroupForm, { i18n } from './components/transfer_group_form.vue';
+
+const prepareGroups = (rawGroups) => {
+  if (!rawGroups) {
+    return { group: [] };
+  }
+
+  const group = JSON.parse(rawGroups).map(({ id, text: humanName }) => ({
+    id,
+    humanName,
+  }));
+
+  return { group };
+};
+
+export default () => {
+  const el = document.querySelector('.js-transfer-group-form');
+  if (!el) {
+    return false;
+  }
+
+  const {
+    targetFormId = null,
+    buttonText: confirmButtonText = '',
+    groupName = '',
+    parentGroups,
+    isPaidGroup,
+  } = el.dataset;
+
+  return new Vue({
+    el,
+    provide: {
+      confirmDangerMessage: sprintf(i18n.confirmationMessage, { group_name: groupName }),
+    },
+    render(createElement) {
+      return createElement(TransferGroupForm, {
+        props: {
+          parentGroups: prepareGroups(parentGroups),
+          isPaidGroup: parseBoolean(isPaidGroup),
+          confirmButtonText,
+          confirmationPhrase: groupName,
+        },
+        on: {
+          confirm: () => {
+            document.getElementById(targetFormId)?.submit();
+          },
+        },
+      });
+    },
+  });
+};

app/assets/javascripts/groups/landing.js

-import Cookies from 'js-cookie';
-import { parseBoolean } from '~/lib/utils/common_utils';
+import { getCookie, setCookie, parseBoolean } from '~/lib/utils/common_utils';
 
 class Landing {
   constructor(landingElement, dismissButton, cookieName) {
@@ -27,11 +26,11 @@ class Landing {
 
   dismissLanding() {
     this.landingElement.classList.add('hidden');
-    Cookies.set(this.cookieName, 'true', { expires: 365 });
+    setCookie(this.cookieName, 'true');
   }
 
   isDismissed() {
-    return parseBoolean(Cookies.get(this.cookieName));
+    return parseBoolean(getCookie(this.cookieName));
   }
 }
 

app/assets/javascripts/groups/transfer_dropdown.js

-import $ from 'jquery';
-import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
-import { __ } from '~/locale';
-
-export default class TransferDropdown {
-  constructor() {
-    this.groupDropdown = $('.js-groups-dropdown');
-    this.parentInput = $('#new_parent_group_id');
-    this.data = this.groupDropdown.data('data');
-    this.init();
-  }
-
-  init() {
-    this.buildDropdown();
-  }
-
-  buildDropdown() {
-    const extraOptions = [{ id: '-1', text: __('No parent group') }, { type: 'divider' }];
-
-    initDeprecatedJQueryDropdown(this.groupDropdown, {
-      selectable: true,
-      filterable: true,
-      toggleLabel: (item) => item.text,
-      search: { fields: ['text'] },
-      data: extraOptions.concat(this.data),
-      text: (item) => item.text,
-      clicked: (options) => {
-        const { e } = options;
-        e.preventDefault();
-        this.assignSelected(options.selectedObj);
-      },
-    });
-  }
-
-  assignSelected(selected) {
-    this.parentInput.val(selected.id);
-    this.parentInput.change();
-  }
-}

app/assets/javascripts/groups/transfer_edit.js

-import $ from 'jquery';
-
-export default function setupTransferEdit(formSelector, targetSelector) {
-  const $transferForm = $(formSelector);
-  const $selectNamespace = $transferForm.find(targetSelector);
-
-  $selectNamespace.on('change', () => {
-    $transferForm.find(':submit').prop('disabled', !$selectNamespace.val());
-  });
-  $selectNamespace.trigger('change');
-}

app/assets/javascripts/groups_select.js

@@ -28,6 +28,7 @@ const groupsSelect = () => {
         const skipGroups = $select.data('skipGroups') || [];
         const parentGroupID = $select.data('parentId');
         const groupsFilter = $select.data('groupsFilter');
+        const minAccessLevel = $select.data('minAccessLevel');
 
         $select.select2({
           placeholder: __('Search for a group'),
@@ -45,6 +46,7 @@ const groupsSelect = () => {
                 page,
                 per_page: window.GROUP_SELECT_PER_PAGE,
                 all_available: allAvailable,
+                min_access_level: minAccessLevel,
               };
             },
             results(data, page) {

app/assets/javascripts/ide/components/activity_bar.vue

 <script>
-import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlIcon, GlTooltipDirective, GlBadge } from '@gitlab/ui';
 import { mapActions, mapState } from 'vuex';
 import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
 import { leftSidebarViews } from '../constants';
@@ -7,6 +7,7 @@ import { leftSidebarViews } from '../constants';
 export default {
   components: {
     GlIcon,
+    GlBadge,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -82,9 +83,13 @@ export default {
           @click.prevent="changedActivityView($event, $options.leftSidebarViews.commit.name)"
         >
           <gl-icon name="commit" />
-          <div v-if="stagedFiles.length > 0" class="ide-commit-badge badge badge-pill">
+          <gl-badge
+            v-if="stagedFiles.length"
+            class="gl-absolute gl-px-2 gl-top-3 gl-right-3 gl-font-weight-bold gl-bg-gray-900! gl-text-white!"
+            size="sm"
+          >
             {{ stagedFiles.length }}
-          </div>
+          </gl-badge>
         </button>
       </li>
     </ul>

app/assets/javascripts/ide/components/commit_sidebar/form.vue

@@ -187,7 +187,7 @@ export default {
               class="qa-commit-button"
               category="primary"
               variant="confirm"
-              @click="commit"
+              type="submit"
             >
               {{ __('Commit') }}
             </gl-button>

app/assets/javascripts/ide/components/preview/clientside.vue

@@ -4,7 +4,12 @@ import { listen } from 'codesandbox-api';
 import { isEmpty, debounce } from 'lodash';
 import { Manager } from 'smooshpack';
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { packageJsonPath, LIVE_PREVIEW_DEBOUNCE } from '../../constants';
+import {
+  packageJsonPath,
+  LIVE_PREVIEW_DEBOUNCE,
+  PING_USAGE_PREVIEW_KEY,
+  PING_USAGE_PREVIEW_SUCCESS_KEY,
+} from '../../constants';
 import eventHub from '../../eventhub';
 import { createPathWithExt } from '../../utils';
 import Navigator from './navigator.vue';
@@ -62,6 +67,15 @@ export default {
       };
     },
   },
+  watch: {
+    sandpackReady: {
+      handler(val) {
+        if (val) {
+          this.pingUsage(PING_USAGE_PREVIEW_SUCCESS_KEY);
+        }
+      },
+    },
+  },
   mounted() {
     this.onFilesChangeCallback = debounce(() => this.update(), LIVE_PREVIEW_DEBOUNCE);
     eventHub.$on('ide.files.change', this.onFilesChangeCallback);
@@ -101,7 +115,7 @@ export default {
     initPreview() {
       if (!this.mainEntry) return null;
 
-      this.pingUsage();
+      this.pingUsage(PING_USAGE_PREVIEW_KEY);
 
       return this.loadFileContent(this.mainEntry)
         .then(() => this.$nextTick())

app/assets/javascripts/ide/constants.js

@@ -114,3 +114,7 @@ export const LIVE_PREVIEW_DEBOUNCE = 2000;
 export const MAX_MR_FILES_AUTO_OPEN = 10;
 
 export const DEFAULT_BRANCH = 'main';
+
+// Ping Usage Metrics Keys
+export const PING_USAGE_PREVIEW_KEY = 'web_ide_clientside_preview';
+export const PING_USAGE_PREVIEW_SUCCESS_KEY = 'web_ide_clientside_preview_success';

app/assets/javascripts/ide/stores/modules/clientside/actions.js

 import axios from '~/lib/utils/axios_utils';
 
-export const pingUsage = ({ rootGetters }) => {
+export const pingUsage = ({ rootGetters }, metricName) => {
   const { web_url: projectUrl } = rootGetters.currentProject;
 
-  const url = `${projectUrl}/service_ping/web_ide_clientside_preview`;
+  const url = `${projectUrl}/service_ping/${metricName}`;
 
   return axios.post(url);
 };

app/assets/javascripts/incidents/components/incidents_list.vue

@@ -12,7 +12,7 @@ import {
 } from '@gitlab/ui';
 import { isValidSlaDueAt } from 'ee_else_ce/vue_shared/components/incidents/utils';
 import { visitUrl, mergeUrlParams, joinPaths } from '~/lib/utils/url_utility';
-import { s__ } from '~/locale';
+import { s__, n__ } from '~/locale';
 import { INCIDENT_SEVERITY } from '~/sidebar/components/severity/constants';
 import SeverityToken from '~/sidebar/components/severity/severity.vue';
 import Tracking from '~/tracking';
@@ -38,6 +38,8 @@ import {
 import getIncidentsCountByStatus from '../graphql/queries/get_count_by_status.query.graphql';
 import getIncidents from '../graphql/queries/get_incidents.query.graphql';
 
+const MAX_VISIBLE_ASSIGNEES = 4;
+
 export default {
   trackIncidentCreateNewOptions,
   trackIncidentListViewsOptions,
@@ -94,6 +96,7 @@ export default {
       thAttr: TH_PUBLISHED_TEST_ID,
     },
   ],
+  MAX_VISIBLE_ASSIGNEES,
   components: {
     GlLoadingIcon,
     GlTable,
@@ -295,6 +298,13 @@ export default {
     errorAlertDismissed() {
       this.isErrorAlertDismissed = true;
     },
+    assigneesBadgeSrOnlyText(item) {
+      return n__(
+        '%d additional assignee',
+        '%d additional assignees',
+        item.assignees.nodes.length - MAX_VISIBLE_ASSIGNEES,
+      );
+    },
     isValidSlaDueAt,
   },
 };
@@ -391,10 +401,11 @@ export default {
                 <gl-avatars-inline
                   :avatars="item.assignees.nodes"
                   :collapsed="true"
-                  :max-visible="4"
+                  :max-visible="$options.MAX_VISIBLE_ASSIGNEES"
                   :avatar-size="24"
                   badge-tooltip-prop="name"
                   :badge-tooltip-max-chars="100"
+                  :badge-sr-only-text="assigneesBadgeSrOnlyText(item)"
                 >
                   <template #avatar="{ avatar }">
                     <gl-avatar-link

app/assets/javascripts/invite_members/components/group_select.vue

@@ -24,6 +24,10 @@ export default {
     prop: 'selectedGroup',
   },
   props: {
+    accessLevels: {
+      type: Object,
+      required: true,
+    },
     groupsFilter: {
       type: String,
       required: false,
@@ -34,6 +38,10 @@ export default {
       required: false,
       default: null,
     },
+    invalidGroups: {
+      type: Array,
+      required: true,
+    },
   },
   data() {
     return {
@@ -50,6 +58,13 @@ export default {
     isFetchResultEmpty() {
       return this.groups.length === 0;
     },
+    defaultFetchOptions() {
+      return {
+        exclude_internal: true,
+        active: true,
+        min_access_level: this.accessLevels.Guest,
+      };
+    },
   },
   watch: {
     searchTerm() {
@@ -64,18 +79,26 @@ export default {
       this.isFetching = true;
       return this.fetchGroups()
         .then((response) => {
-          this.groups = response.map((group) => ({
-            id: group.id,
-            name: group.full_name,
-            path: group.path,
-            avatarUrl: group.avatar_url,
-          }));
+          this.groups = this.processGroups(response);
           this.isFetching = false;
         })
         .catch(() => {
           this.isFetching = false;
         });
     }, SEARCH_DELAY),
+    processGroups(response) {
+      const rawGroups = response.map((group) => ({
+        id: group.id,
+        name: group.full_name,
+        path: group.path,
+        avatarUrl: group.avatar_url,
+      }));
+
+      return this.filterOutInvalidGroups(rawGroups);
+    },
+    filterOutInvalidGroups(groups) {
+      return groups.filter((group) => this.invalidGroups.indexOf(group.id) === -1);
+    },
     selectGroup(group) {
       this.selectedGroup = group;
 
@@ -84,13 +107,9 @@ export default {
     fetchGroups() {
       switch (this.groupsFilter) {
         case GROUP_FILTERS.DESCENDANT_GROUPS:
-          return getDescendentGroups(
-            this.parentGroupId,
-            this.searchTerm,
-            this.$options.defaultFetchOptions,
-          );
+          return getDescendentGroups(this.parentGroupId, this.searchTerm, this.defaultFetchOptions);
         default:
-          return getGroups(this.searchTerm, this.$options.defaultFetchOptions);
+          return getGroups(this.searchTerm, this.defaultFetchOptions);
       }
     },
   },
@@ -99,10 +118,6 @@ export default {
     searchPlaceholder: s__('GroupSelect|Search groups'),
     emptySearchResult: s__('GroupSelect|No matching results'),
   },
-  defaultFetchOptions: {
-    exclude_internal: true,
-    active: true,
-  },
 };
 </script>
 <template>

app/assets/javascripts/invite_members/components/invite_members_modal.vue

@@ -107,6 +107,10 @@ export default {
       type: Array,
       required: true,
     },
+    invalidGroups: {
+      type: Array,
+      required: true,
+    },
   },
   data() {
     return {
@@ -428,8 +432,10 @@ export default {
         <group-select
           v-if="isInviteGroup"
           v-model="groupToBeSharedWith"
+          :access-levels="accessLevels"
           :groups-filter="groupSelectFilter"
           :parent-group-id="groupSelectParentId"
+          :invalid-groups="invalidGroups"
           @input="handleMembersTokenSelectClear"
         />
       </gl-form-group>

app/assets/javascripts/invite_members/init_invite_members_modal.js

@@ -40,6 +40,7 @@ export default function initInviteMembersModal() {
           defaultAccessLevel: parseInt(el.dataset.defaultAccessLevel, 10),
           groupSelectFilter: el.dataset.groupsFilter,
           groupSelectParentId: parseInt(el.dataset.parentId, 10),
+          invalidGroups: JSON.parse(el.dataset.invalidGroups || '[]'),
           tasksToBeDoneOptions: JSON.parse(el.dataset.tasksToBeDoneOptions || '[]'),
           projects: JSON.parse(el.dataset.projects || '[]'),
           usersFilter: el.dataset.usersFilter,