app/assets/javascripts/analytics/cycle_analytics/store/index.js

@@ -6,6 +6,7 @@
  */
 
 import Vue from 'vue';
+// eslint-disable-next-line no-restricted-imports
 import Vuex from 'vuex';
 import filters from '~/vue_shared/components/filtered_search_bar/store/modules/filters';
 import * as actions from './actions';

app/assets/javascripts/api/groups_api.js

@@ -9,7 +9,7 @@ const GROUP_ALL_MEMBERS_PATH = '/api/:version/groups/:id/members/all';
 const DESCENDANT_GROUPS_PATH = '/api/:version/groups/:id/descendant_groups';
 const GROUP_TRANSFER_LOCATIONS_PATH = 'api/:version/groups/:id/transfer_locations';
 
-const axiosGet = (url, query, options, callback) => {
+const axiosGet = (url, query, options, callback, axiosOptions = {}) => {
   return axios
     .get(url, {
       params: {
@@ -17,6 +17,7 @@ const axiosGet = (url, query, options, callback) => {
         per_page: DEFAULT_PER_PAGE,
         ...options,
       },
+      ...axiosOptions,
     })
     .then(({ data, headers }) => {
       callback(data);
@@ -25,14 +26,20 @@ const axiosGet = (url, query, options, callback) => {
     });
 };
 
-export function getGroups(query, options, callback = () => {}) {
+export function getGroups(query, options, callback = () => {}, axiosOptions = {}) {
   const url = buildApiUrl(GROUPS_PATH);
-  return axiosGet(url, query, options, callback);
+  return axiosGet(url, query, options, callback, axiosOptions);
 }
 
-export function getDescendentGroups(parentGroupId, query, options, callback = () => {}) {
+export function getDescendentGroups(
+  parentGroupId,
+  query,
+  options,
+  callback = () => {},
+  axiosOptions = {},
+) {
   const url = buildApiUrl(DESCENDANT_GROUPS_PATH.replace(':id', parentGroupId));
-  return axiosGet(url, query, options, callback);
+  return axiosGet(url, query, options, callback, axiosOptions);
 }
 
 export function updateGroup(groupId, data = {}) {

app/assets/javascripts/badges/components/badge_form.vue

 <script>
 import { GlLoadingIcon, GlFormInput, GlFormGroup, GlButton } from '@gitlab/ui';
 import { escape, debounce } from 'lodash';
+// eslint-disable-next-line no-restricted-imports
 import { mapActions, mapState } from 'vuex';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { createAlert, VARIANT_INFO } from '~/alert';
@@ -213,7 +214,7 @@ export default {
     novalidate
     @submit.prevent.stop="onSubmit"
   >
-    <gl-form-group :label="s__('Badges|Name')" label-for="badge-name">
+    <gl-form-group :label="s__('Badges|Name')" label-for="badge-name" class="gl-max-w-48">
       <gl-form-input id="badge-name" v-model="name" data-qa-selector="badge_name_field" />
     </gl-form-group>
 
@@ -225,7 +226,7 @@ export default {
         v-model="linkUrl"
         data-qa-selector="badge_link_url_field"
         type="URL"
-        class="form-control gl-form-input"
+        class="form-control gl-form-input gl-max-w-80"
         required
         @input="updatePreview"
       />
@@ -241,7 +242,7 @@ export default {
         v-model="imageUrl"
         data-qa-selector="badge_image_url_field"
         type="URL"
-        class="form-control gl-form-input"
+        class="form-control gl-form-input gl-max-w-80"
         required
         @input="updatePreview"
       />

app/assets/javascripts/badges/components/badge_list.vue

@@ -7,6 +7,7 @@ import {
   GlButton,
   GlModalDirective,
 } from '@gitlab/ui';
+// eslint-disable-next-line no-restricted-imports
 import { mapActions, mapState } from 'vuex';
 import { __, s__ } from '~/locale';
 import { GROUP_BADGE, PROJECT_BADGE, INITIAL_PAGE, PAGE_SIZE } from '../constants';

app/assets/javascripts/badges/components/badge_settings.vue

 <script>
 import { GlButton, GlCard, GlModal, GlIcon, GlSprintf } from '@gitlab/ui';
+// eslint-disable-next-line no-restricted-imports
 import { mapState, mapActions } from 'vuex';
 import { createAlert, VARIANT_INFO } from '~/alert';
 import { __, s__ } from '~/locale';
@@ -110,11 +111,7 @@ export default {
 
       <div v-if="addFormVisible" class="gl-new-card-add-form gl-m-5">
         <h4 class="gl-mt-0">{{ $options.i18n.addFormTitle }}</h4>
-        <badge-form
-          :is-editing="false"
-          data-testid="add-new-badge"
-          @close-add-form="closeAddForm"
-        />
+        <badge-form :is-editing="false" @close-add-form="closeAddForm" />
       </div>
 
       <badge-list />

app/assets/javascripts/badges/store/index.js

 import Vue from 'vue';
+// eslint-disable-next-line no-restricted-imports
 import Vuex from 'vuex';
 import actions from './actions';
 import mutations from './mutations';

app/assets/javascripts/batch_comments/components/diff_file_drafts.vue

 <script>
+// eslint-disable-next-line no-restricted-imports
 import { mapGetters } from 'vuex';
 import imageDiff from '~/diffs/mixins/image_diff';
 import DesignNotePin from '~/vue_shared/components/design_management/design_note_pin.vue';

app/assets/javascripts/batch_comments/components/draft_note.vue

 <script>
 import { GlBadge, GlTooltipDirective } from '@gitlab/ui';
+// eslint-disable-next-line no-restricted-imports
 import { mapActions, mapGetters, mapState } from 'vuex';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import NoteableNote from '~/notes/components/noteable_note.vue';

app/assets/javascripts/batch_comments/components/drafts_count.vue

 <script>
 import { GlBadge } from '@gitlab/ui';
+// eslint-disable-next-line no-restricted-imports
 import { mapGetters } from 'vuex';
 
 export default {

app/assets/javascripts/batch_comments/components/preview_dropdown.vue

 <script>
 import { GlIcon, GlDisclosureDropdown, GlButton } from '@gitlab/ui';
+// eslint-disable-next-line no-restricted-imports
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { setUrlParams, visitUrl } from '~/lib/utils/url_utility';
 import PreviewItem from './preview_item.vue';

app/assets/javascripts/batch_comments/components/preview_item.vue

 <script>
 import { GlSprintf, GlIcon } from '@gitlab/ui';
+// eslint-disable-next-line no-restricted-imports
 import { mapGetters } from 'vuex';
 import { IMAGE_DIFF_POSITION_TYPE } from '~/diffs/constants';
 import { sprintf, __ } from '~/locale';

app/assets/javascripts/batch_comments/components/review_bar.vue

 <script>
+// eslint-disable-next-line no-restricted-imports
 import { mapActions, mapGetters } from 'vuex';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { SET_REVIEW_BAR_RENDERED } from '~/batch_comments/stores/modules/batch_comments/mutation_types';

app/assets/javascripts/batch_comments/components/submit_dropdown.vue

 <script>
 import { GlDropdown, GlButton, GlIcon, GlForm, GlFormCheckbox } from '@gitlab/ui';
+// eslint-disable-next-line no-restricted-imports
 import { mapGetters, mapActions, mapState } from 'vuex';
 import { __ } from '~/locale';
 import { createAlert } from '~/alert';

app/assets/javascripts/batch_comments/index.js

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
+// eslint-disable-next-line no-restricted-imports
 import { mapActions, mapGetters } from 'vuex';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import { apolloProvider } from '~/graphql_shared/issuable_client';

app/assets/javascripts/batch_comments/mixins/resolved_status.js

+// eslint-disable-next-line no-restricted-imports
 import { mapGetters } from 'vuex';
 import { sprintf, s__, __ } from '~/locale';
 

app/assets/javascripts/batch_comments/stores/index.js

 import Vue from 'vue';
+// eslint-disable-next-line no-restricted-imports
 import Vuex from 'vuex';
 import batchComments from './modules/batch_comments';
 

app/assets/javascripts/behaviors/index.js

@@ -8,6 +8,7 @@ import initCopyAsGFM from './markdown/copy_as_gfm';
 import './quick_submit';
 import './requires_input';
 import initPageShortcuts from './shortcuts';
+import { initToastMessages } from './toasts';
 import './toggler_behavior';
 import './preview_markdown';
 
@@ -21,6 +22,8 @@ initCopyToClipboard();
 initPageShortcuts();
 initCollapseSidebarOnWindowResize();
 
+initToastMessages();
+
 window.requestIdleCallback(
   () => {
     // Check if we have to Load GFM Input

app/assets/javascripts/behaviors/shortcuts/keybindings.js

@@ -399,6 +399,12 @@ export const ISSUABLE_CHANGE_LABEL = {
   defaultKeys: ['l'],
 };
 
+export const ISSUABLE_COPY_REF = {
+  id: 'issuables.copyIssuableRef',
+  description: __('Copy reference'),
+  defaultKeys: ['c r'], // eslint-disable-line @gitlab/require-i18n-strings
+};
+
 export const ISSUE_MR_CHANGE_ASSIGNEE = {
   id: 'issuesMRs.changeAssignee',
   description: __('Change assignee'),
@@ -606,7 +612,12 @@ const PROJECT_FILES_SHORTCUTS_GROUP = {
 const ISSUABLE_SHORTCUTS_GROUP = {
   id: 'issuables',
   name: __('Epics, issues, and merge requests'),
-  keybindings: [ISSUABLE_COMMENT_OR_REPLY, ISSUABLE_EDIT_DESCRIPTION, ISSUABLE_CHANGE_LABEL],
+  keybindings: [
+    ISSUABLE_COMMENT_OR_REPLY,
+    ISSUABLE_EDIT_DESCRIPTION,
+    ISSUABLE_CHANGE_LABEL,
+    ISSUABLE_COPY_REF,
+  ],
 };
 
 const ISSUE_MR_SHORTCUTS_GROUP = {

app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js

@@ -14,6 +14,7 @@ import {
   ISSUABLE_COMMENT_OR_REPLY,
   ISSUABLE_EDIT_DESCRIPTION,
   MR_COPY_SOURCE_BRANCH_NAME,
+  ISSUABLE_COPY_REF,
 } from './keybindings';
 import Shortcuts from './shortcuts';
 
@@ -21,15 +22,24 @@ export default class ShortcutsIssuable extends Shortcuts {
   constructor() {
     super();
 
-    this.inMemoryButton = document.createElement('button');
-    this.clipboardInstance = new ClipboardJS(this.inMemoryButton);
-    this.clipboardInstance.on('success', () => {
+    this.branchInMemoryButton = document.createElement('button');
+    this.branchClipboardInstance = new ClipboardJS(this.branchInMemoryButton);
+    this.branchClipboardInstance.on('success', () => {
       toast(s__('GlobalShortcuts|Copied source branch name to clipboard.'));
     });
-    this.clipboardInstance.on('error', () => {
+    this.branchClipboardInstance.on('error', () => {
       toast(s__('GlobalShortcuts|Unable to copy the source branch name at this time.'));
     });
 
+    this.refInMemoryButton = document.createElement('button');
+    this.refClipboardInstance = new ClipboardJS(this.refInMemoryButton);
+    this.refClipboardInstance.on('success', () => {
+      toast(s__('GlobalShortcuts|Copied reference to clipboard.'));
+    });
+    this.refClipboardInstance.on('error', () => {
+      toast(s__('GlobalShortcuts|Unable to copy the reference at this time.'));
+    });
+
     this.bindCommands([
       [ISSUE_MR_CHANGE_ASSIGNEE, () => ShortcutsIssuable.openSidebarDropdown('assignee')],
       [ISSUE_MR_CHANGE_MILESTONE, () => ShortcutsIssuable.openSidebarDropdown('milestone')],
@@ -37,6 +47,7 @@ export default class ShortcutsIssuable extends Shortcuts {
       [ISSUABLE_COMMENT_OR_REPLY, ShortcutsIssuable.replyWithSelectedText],
       [ISSUABLE_EDIT_DESCRIPTION, ShortcutsIssuable.editIssue],
       [MR_COPY_SOURCE_BRANCH_NAME, () => this.copyBranchName()],
+      [ISSUABLE_COPY_REF, () => this.copyIssuableRef()],
     ]);
 
     /**
@@ -163,9 +174,20 @@ export default class ShortcutsIssuable extends Shortcuts {
     const branchName = button?.dataset.clipboardText;
 
     if (branchName) {
-      this.inMemoryButton.dataset.clipboardText = branchName;
+      this.branchInMemoryButton.dataset.clipboardText = branchName;
+
+      this.branchInMemoryButton.dispatchEvent(new CustomEvent('click'));
+    }
+  }
+
+  async copyIssuableRef() {
+    const refButton = document.querySelector('.js-copy-reference');
+    const copiedRef = refButton?.dataset.clipboardText;
+
+    if (copiedRef) {
+      this.refInMemoryButton.dataset.clipboardText = copiedRef;
 
-      this.inMemoryButton.dispatchEvent(new CustomEvent('click'));
+      this.refInMemoryButton.dispatchEvent(new CustomEvent('click'));
     }
   }
 }

app/assets/javascripts/behaviors/toasts.js

+export async function initToastMessages() {
+  const toasts = document.querySelectorAll('.js-toast-message');
+  if (!toasts.length) {
+    return;
+  }
+
+  const { default: showToast } = await import('~/vue_shared/plugins/global_toast');
+  toasts.forEach((toast) => showToast(toast.dataset.message));
+}