Add latest changes from gitlab-org/gitlab@master

61 files changed, 425 insertions, 469 deletions

diff --git a/app/assets/javascripts/add_context_commits_modal/components/add_context_commits_modal_wrapper.vue b/app/assets/javascripts/add_context_commits_modal/components/add_context_commits_modal_wrapper.vue
index a5f8f369604..a9fb692b299 100644
--- a/app/assets/javascripts/add_context_commits_modal/components/add_context_commits_modal_wrapper.vue
+++ b/app/assets/javascripts/add_context_commits_modal/components/add_context_commits_modal_wrapper.vue
@@ -18,6 +18,7 @@ import {
   removeIfPresent,
 } from '../utils';
 import Token from './token.vue';
+import DateOption from './date_option.vue';
 
 export default {
   components: {
@@ -73,6 +74,7 @@ export default {
           operators: OPERATORS_IS,
           token: Token,
           unique: true,
+          optionComponent: DateOption,
         },
         {
           formattedKey: __('Committed-after'),
@@ -86,6 +88,7 @@ export default {
           operators: OPERATORS_IS,
           token: Token,
           unique: true,
+          optionComponent: DateOption,
         },
       ],
     };
@@ -317,16 +320,7 @@ export default {
             :available-tokens="availableTokens"
             @clear="handleSearchCommits"
             @submit="handleSearchCommits"
-          >
-            <template #title="{ value }">
-              <div>
-                {{ value }}
-                <span v-if="shouldShowInputDateFormat(value)" class="title-hint-text">
-                  &lt;{{ __('yyyy-mm-dd') }}&gt;
-                </span>
-              </div>
-            </template>
-          </gl-filtered-search>
+          />
 
           <review-tab-container
             :is-loading="isLoadingCommits"
diff --git a/app/assets/javascripts/add_context_commits_modal/components/date_option.vue b/app/assets/javascripts/add_context_commits_modal/components/date_option.vue
new file mode 100644
index 00000000000..1945e048029
--- /dev/null
+++ b/app/assets/javascripts/add_context_commits_modal/components/date_option.vue
@@ -0,0 +1,17 @@
+<script>
+export default {
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <span
+    >{{ option.title }}
+    <span class="title-hint-text">&lt;{{ __('yyyy-mm-dd') }}&gt;</span>
+  </span>
+</template>
diff --git a/app/assets/javascripts/admin/broadcast_messages/components/message_form.vue b/app/assets/javascripts/admin/broadcast_messages/components/message_form.vue
index 3168d693234..08aec58e89d 100644
--- a/app/assets/javascripts/admin/broadcast_messages/components/message_form.vue
+++ b/app/assets/javascripts/admin/broadcast_messages/components/message_form.vue
@@ -15,7 +15,6 @@ import axios from '~/lib/utils/axios_utils';
 import { s__ } from '~/locale';
 import { createAlert, VARIANT_DANGER } from '~/alert';
 import { redirectTo } from '~/lib/utils/url_utility';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { THEMES, TYPES, TYPE_BANNER } from '../constants';
@@ -42,7 +41,6 @@ export default {
   directives: {
     SafeHtml,
   },
-  mixins: [glFeatureFlagsMixin()],
   inject: {
     targetAccessLevelOptions: {
       default: [[]],
@@ -226,11 +224,7 @@ export default {
       </gl-form-group>
     </template>
 
-    <gl-form-group
-      v-if="glFeatures.roleTargetedBroadcastMessages"
-      :label="$options.i18n.targetRoles"
-      data-testid="target-roles-checkboxes"
-    >
+    <gl-form-group :label="$options.i18n.targetRoles" data-testid="target-roles-checkboxes">
       <gl-form-checkbox-group v-model="targetAccessLevels" :options="targetAccessLevelOptions" />
       <gl-form-text>
         {{ $options.i18n.targetRolesDescription }}
diff --git a/app/assets/javascripts/admin/broadcast_messages/components/messages_table.vue b/app/assets/javascripts/admin/broadcast_messages/components/messages_table.vue
index a523dd3b391..2e8ecbd3a5d 100644
--- a/app/assets/javascripts/admin/broadcast_messages/components/messages_table.vue
+++ b/app/assets/javascripts/admin/broadcast_messages/components/messages_table.vue
@@ -3,7 +3,6 @@ import { GlButton, GlTableLite } from '@gitlab/ui';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { __ } from '~/locale';
 import { formatDate } from '~/lib/utils/datetime/date_format_utility';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 const DEFAULT_TD_CLASSES = 'gl-vertical-align-middle!';
 
@@ -16,7 +15,6 @@ export default {
   directives: {
     SafeHtml,
   },
-  mixins: [glFeatureFlagsMixin()],
   i18n: {
     edit: __('Edit'),
     delete: __('Delete'),
@@ -27,13 +25,7 @@ export default {
       required: true,
     },
   },
-  computed: {
-    fields() {
-      if (this.glFeatures.roleTargetedBroadcastMessages) return this.$options.allFields;
-      return this.$options.allFields.filter((f) => f.key !== 'target_roles');
-    },
-  },
-  allFields: [
+  fields: [
     {
       key: 'status',
       label: __('Status'),
@@ -89,7 +81,7 @@ export default {
 <template>
   <gl-table-lite
     :items="messages"
-    :fields="fields"
+    :fields="$options.fields"
     :tbody-tr-attr="{ 'data-testid': 'message-row' }"
     stacked="md"
   >
diff --git a/app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue b/app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue
index 9cf41750efe..f23a6fbcaa0 100644
--- a/app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue
+++ b/app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlSprintf, GlButton, GlAlert, GlCard } from '@gitlab/ui';
-import Mousetrap from 'mousetrap';
+import { Mousetrap } from '~/lib/mousetrap';
 import { __ } from '~/locale';
 import Tracking from '~/tracking';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
diff --git a/app/assets/javascripts/behaviors/shortcuts/keybindings.js b/app/assets/javascripts/behaviors/shortcuts/keybindings.js
index d173703f172..cc8a9baf69e 100644
--- a/app/assets/javascripts/behaviors/shortcuts/keybindings.js
+++ b/app/assets/javascripts/behaviors/shortcuts/keybindings.js
@@ -698,8 +698,8 @@ export const keybindingGroups = [
 /**
  * Gets keyboard shortcuts associated with a command
  *
- * @param {string} command The command object. All command
- * objects are available as imports from this file.
+ * @param {Object} command The command object. All command objects are
+ *     available as imports from this file.
  *
  * @returns {string[]} An array of keyboard shortcut strings bound to the command
  *
diff --git a/app/assets/javascripts/behaviors/shortcuts/shortcuts.js b/app/assets/javascripts/behaviors/shortcuts/shortcuts.js
index 301dd1c5669..5c6e4665a5c 100644
--- a/app/assets/javascripts/behaviors/shortcuts/shortcuts.js
+++ b/app/assets/javascripts/behaviors/shortcuts/shortcuts.js
@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import { flatten } from 'lodash';
-import Mousetrap from 'mousetrap';
 import Vue from 'vue';
+import { Mousetrap, addStopCallback } from '~/lib/mousetrap';
 import { getCookie, setCookie, parseBoolean } from '~/lib/utils/common_utils';
 
 import findAndFollowLink from '~/lib/utils/navigation_utility';
@@ -28,20 +28,11 @@ import {
 } from './keybindings';
 import { disableShortcuts, shouldDisableShortcuts } from './shortcuts_toggle';
 
-const defaultStopCallback = Mousetrap.prototype.stopCallback;
-Mousetrap.prototype.stopCallback = function customStopCallback(e, element, combo) {
-  if (keysFor(TOGGLE_MARKDOWN_PREVIEW).indexOf(combo) !== -1) {
-    return false;
-  }
-
-  return defaultStopCallback.call(this, e, element, combo);
-};
-
 /**
  * The key used to save and fetch the local Mousetrap instance
  * attached to a `<textarea>` element using `jQuery.data`
  */
-const LOCAL_MOUSETRAP_DATA_KEY = 'local-mousetrap-instance';
+export const LOCAL_MOUSETRAP_DATA_KEY = 'local-mousetrap-instance';
 
 /**
  * Gets a mapping of toolbar button => keyboard shortcuts
@@ -76,54 +67,38 @@ export default class Shortcuts {
     this.helpModalElement = null;
     this.helpModalVueInstance = null;
 
-    Mousetrap.bind(keysFor(TOGGLE_KEYBOARD_SHORTCUTS_DIALOG), this.onToggleHelp);
-    Mousetrap.bind(keysFor(START_SEARCH), Shortcuts.focusSearch);
-    Mousetrap.bind(keysFor(FOCUS_FILTER_BAR), this.focusFilter.bind(this));
-    Mousetrap.bind(keysFor(TOGGLE_PERFORMANCE_BAR), Shortcuts.onTogglePerfBar);
-    Mousetrap.bind(keysFor(HIDE_APPEARING_CONTENT), Shortcuts.hideAppearingContent);
-    Mousetrap.bind(keysFor(TOGGLE_CANARY), Shortcuts.onToggleCanary);
-
-    const findFileURL = document.body.dataset.findFile;
-
-    Mousetrap.bind(keysFor(GO_TO_YOUR_TODO_LIST), () => findAndFollowLink('.shortcuts-todos'));
-    Mousetrap.bind(keysFor(GO_TO_ACTIVITY_FEED), () =>
-      findAndFollowLink('.dashboard-shortcuts-activity'),
-    );
-    Mousetrap.bind(keysFor(GO_TO_YOUR_ISSUES), () =>
-      findAndFollowLink('.dashboard-shortcuts-issues'),
+    this.bindCommands([
+      [TOGGLE_KEYBOARD_SHORTCUTS_DIALOG, this.onToggleHelp],
+      [START_SEARCH, Shortcuts.focusSearch],
+      [FOCUS_FILTER_BAR, this.focusFilter.bind(this)],
+      [TOGGLE_PERFORMANCE_BAR, Shortcuts.onTogglePerfBar],
+      [HIDE_APPEARING_CONTENT, Shortcuts.hideAppearingContent],
+      [TOGGLE_CANARY, Shortcuts.onToggleCanary],
+
+      [GO_TO_YOUR_TODO_LIST, () => findAndFollowLink('.shortcuts-todos')],
+      [GO_TO_ACTIVITY_FEED, () => findAndFollowLink('.dashboard-shortcuts-activity')],
+      [GO_TO_YOUR_ISSUES, () => findAndFollowLink('.dashboard-shortcuts-issues')],
+      [GO_TO_YOUR_MERGE_REQUESTS, () => findAndFollowLink('.dashboard-shortcuts-merge_requests')],
+      [GO_TO_YOUR_REVIEW_REQUESTS, () => findAndFollowLink('.dashboard-shortcuts-review_requests')],
+      [GO_TO_YOUR_PROJECTS, () => findAndFollowLink('.dashboard-shortcuts-projects')],
+      [GO_TO_YOUR_GROUPS, () => findAndFollowLink('.dashboard-shortcuts-groups')],
+      [GO_TO_MILESTONE_LIST, () => findAndFollowLink('.dashboard-shortcuts-milestones')],
+      [GO_TO_YOUR_SNIPPETS, () => findAndFollowLink('.dashboard-shortcuts-snippets')],
+
+      [TOGGLE_MARKDOWN_PREVIEW, Shortcuts.toggleMarkdownPreview],
+    ]);
+
+    addStopCallback((e, element, combo) =>
+      keysFor(TOGGLE_MARKDOWN_PREVIEW).includes(combo) ? false : undefined,
     );
-    Mousetrap.bind(keysFor(GO_TO_YOUR_MERGE_REQUESTS), () =>
-      findAndFollowLink('.dashboard-shortcuts-merge_requests'),
-    );
-    Mousetrap.bind(keysFor(GO_TO_YOUR_REVIEW_REQUESTS), () =>
-      findAndFollowLink('.dashboard-shortcuts-review_requests'),
-    );
-    Mousetrap.bind(keysFor(GO_TO_YOUR_PROJECTS), () =>
-      findAndFollowLink('.dashboard-shortcuts-projects'),
-    );
-    Mousetrap.bind(keysFor(GO_TO_YOUR_GROUPS), () =>
-      findAndFollowLink('.dashboard-shortcuts-groups'),
-    );
-    Mousetrap.bind(keysFor(GO_TO_MILESTONE_LIST), () =>
-      findAndFollowLink('.dashboard-shortcuts-milestones'),
-    );
-    Mousetrap.bind(keysFor(GO_TO_YOUR_SNIPPETS), () =>
-      findAndFollowLink('.dashboard-shortcuts-snippets'),
-    );
-
-    Mousetrap.bind(keysFor(TOGGLE_MARKDOWN_PREVIEW), Shortcuts.toggleMarkdownPreview);
 
+    const findFileURL = document.body.dataset.findFile;
     if (typeof findFileURL !== 'undefined' && findFileURL !== null) {
-      Mousetrap.bind(keysFor(GO_TO_PROJECT_FIND_FILE), () => {
+      this.bindCommand(GO_TO_PROJECT_FIND_FILE, () => {
         visitUrl(findFileURL);
       });
     }
 
-    $(document).on('click.more_help', '.js-more-help-button', function clickMoreHelp(e) {
-      $(this).remove();
-      e.preventDefault();
-    });
-
     const shortcutsModalTriggerEvent = 'click.shortcutsModalTrigger';
     // eslint-disable-next-line @gitlab/no-global-event-off
     $(document)
@@ -135,6 +110,32 @@ export default class Shortcuts {
     }
   }
 
+  /**
+   * Bind the keyboard shortcut(s) defined by the given command to the given
+   * callback.
+   *
+   * @param {Object} command A command object.
+   * @param {Function} callback The callback to call when the command's key
+   *     combo has been pressed.
+   * @returns {void}
+   */
+  // eslint-disable-next-line class-methods-use-this
+  bindCommand(command, callback) {
+    Mousetrap.bind(keysFor(command), callback);
+  }
+
+  /**
+   * Bind the keyboard shortcut(s) defined by the given commands to the given
+   * callbacks.
+   *
+   * @param {Array<[Object, Function]>} commandsAndCallbacks An array of
+   *     command/callback pairs.
+   * @returns {void}
+   */
+  bindCommands(commandsAndCallbacks) {
+    commandsAndCallbacks.forEach((commandAndCallback) => this.bindCommand(...commandAndCallback));
+  }
+
   onToggleHelp(e) {
     if (e?.preventDefault) {
       e.preventDefault();
diff --git a/app/assets/javascripts/behaviors/shortcuts/shortcuts_blob.js b/app/assets/javascripts/behaviors/shortcuts/shortcuts_blob.js
index ab7fcbb35f1..65ae67d156f 100644
--- a/app/assets/javascripts/behaviors/shortcuts/shortcuts_blob.js
+++ b/app/assets/javascripts/behaviors/shortcuts/shortcuts_blob.js
@@ -1,5 +1,4 @@
-import Mousetrap from 'mousetrap';
-import { keysFor, PROJECT_FILES_GO_TO_PERMALINK } from '~/behaviors/shortcuts/keybindings';
+import { PROJECT_FILES_GO_TO_PERMALINK } from '~/behaviors/shortcuts/keybindings';
 import {
   getLocationHash,
   updateHistory,
@@ -11,7 +10,6 @@ import { updateRefPortionOfTitle } from '~/repository/utils/title';
 import Shortcuts from './shortcuts';
 
 const defaults = {
-  skipResetBindings: false,
   fileBlobPermalinkUrl: null,
   fileBlobPermalinkUrlElement: null,
 };
@@ -24,12 +22,12 @@ function eventHasModifierKeys(event) {
 export default class ShortcutsBlob extends Shortcuts {
   constructor(opts) {
     const options = { ...defaults, ...opts };
-    super(options.skipResetBindings);
+    super();
     this.options = options;
 
     this.shortcircuitPermalinkButton();
 
-    Mousetrap.bind(keysFor(PROJECT_FILES_GO_TO_PERMALINK), this.moveToFilePermalink.bind(this));
+    this.bindCommand(PROJECT_FILES_GO_TO_PERMALINK, this.moveToFilePermalink.bind(this));
   }
 
   moveToFilePermalink() {
diff --git a/app/assets/javascripts/behaviors/shortcuts/shortcuts_find_file.js b/app/assets/javascripts/behaviors/shortcuts/shortcuts_find_file.js
index 992e571e596..f26878cf161 100644
--- a/app/assets/javascripts/behaviors/shortcuts/shortcuts_find_file.js
+++ b/app/assets/javascripts/behaviors/shortcuts/shortcuts_find_file.js
@@ -1,4 +1,3 @@
-import Mousetrap from 'mousetrap';
 import {
   keysFor,
   PROJECT_FILES_MOVE_SELECTION_UP,
@@ -6,15 +5,14 @@ import {
   PROJECT_FILES_OPEN_SELECTION,
   PROJECT_FILES_GO_BACK,
 } from '~/behaviors/shortcuts/keybindings';
+import { addStopCallback } from '~/lib/mousetrap';
 import ShortcutsNavigation from './shortcuts_navigation';
 
 export default class ShortcutsFindFile extends ShortcutsNavigation {
   constructor(projectFindFile) {
     super();
 
-    const oldStopCallback = Mousetrap.prototype.stopCallback;
-
-    Mousetrap.prototype.stopCallback = function customStopCallback(e, element, combo) {
+    addStopCallback((e, element, combo) => {
       if (
         element === projectFindFile.inputElement[0] &&
         (keysFor(PROJECT_FILES_MOVE_SELECTION_UP).includes(combo) ||
@@ -27,12 +25,14 @@ export default class ShortcutsFindFile extends ShortcutsNavigation {
         return false;
       }
 
-      return oldStopCallback.call(this, e, element, combo);
-    };
+      return undefined;
+    });
 
-    Mousetrap.bind(keysFor(PROJECT_FILES_MOVE_SELECTION_UP), projectFindFile.selectRowUp);
-    Mousetrap.bind(keysFor(PROJECT_FILES_MOVE_SELECTION_DOWN), projectFindFile.selectRowDown);
-    Mousetrap.bind(keysFor(PROJECT_FILES_GO_BACK), projectFindFile.goToTree);
-    Mousetrap.bind(keysFor(PROJECT_FILES_OPEN_SELECTION), projectFindFile.goToBlob);
+    this.bindCommands([
+      [PROJECT_FILES_MOVE_SELECTION_UP, projectFindFile.selectRowUp],
+      [PROJECT_FILES_MOVE_SELECTION_DOWN, projectFindFile.selectRowDown],
+      [PROJECT_FILES_GO_BACK, projectFindFile.goToTree],
+      [PROJECT_FILES_OPEN_SELECTION, projectFindFile.goToBlob],
+    ]);
   }
 }
diff --git a/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js b/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js
index 64297da39cd..0c882ff9ea2 100644
--- a/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js
+++ b/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js
@@ -1,6 +1,5 @@
 import $ from 'jquery';
 import ClipboardJS from 'clipboard';
-import Mousetrap from 'mousetrap';
 import { getSelectedFragment } from '~/lib/utils/common_utils';
 import { isElementVisible } from '~/lib/utils/dom_utils';
 import { DEBOUNCE_DROPDOWN_DELAY } from '~/sidebar/components/labels/labels_select_widget/constants';
@@ -9,7 +8,6 @@ import { s__ } from '~/locale';
 import Sidebar from '~/right_sidebar';
 import { CopyAsGFM } from '../markdown/copy_as_gfm';
 import {
-  keysFor,
   ISSUE_MR_CHANGE_ASSIGNEE,
   ISSUE_MR_CHANGE_MILESTONE,
   ISSUABLE_CHANGE_LABEL,
@@ -32,18 +30,14 @@ export default class ShortcutsIssuable extends Shortcuts {
       toast(s__('GlobalShortcuts|Unable to copy the source branch name at this time.'));
     });
 
-    Mousetrap.bind(keysFor(ISSUE_MR_CHANGE_ASSIGNEE), () =>
-      ShortcutsIssuable.openSidebarDropdown('assignee'),
-    );
-    Mousetrap.bind(keysFor(ISSUE_MR_CHANGE_MILESTONE), () =>
-      ShortcutsIssuable.openSidebarDropdown('milestone'),
-    );
-    Mousetrap.bind(keysFor(ISSUABLE_CHANGE_LABEL), () =>
-      ShortcutsIssuable.openSidebarDropdown('labels'),
-    );
-    Mousetrap.bind(keysFor(ISSUABLE_COMMENT_OR_REPLY), ShortcutsIssuable.replyWithSelectedText);
-    Mousetrap.bind(keysFor(ISSUABLE_EDIT_DESCRIPTION), ShortcutsIssuable.editIssue);
-    Mousetrap.bind(keysFor(MR_COPY_SOURCE_BRANCH_NAME), () => this.copyBranchName());
+    this.bindCommands([
+      [ISSUE_MR_CHANGE_ASSIGNEE, () => ShortcutsIssuable.openSidebarDropdown('assignee')],
+      [ISSUE_MR_CHANGE_MILESTONE, () => ShortcutsIssuable.openSidebarDropdown('milestone')],
+      [ISSUABLE_CHANGE_LABEL, () => ShortcutsIssuable.openSidebarDropdown('labels')],
+      [ISSUABLE_COMMENT_OR_REPLY, ShortcutsIssuable.replyWithSelectedText],
+      [ISSUABLE_EDIT_DESCRIPTION, ShortcutsIssuable.editIssue],
+      [MR_COPY_SOURCE_BRANCH_NAME, () => this.copyBranchName()],
+    ]);
 
     /**
      * We're attaching a global focus event listener on document for
diff --git a/app/assets/javascripts/behaviors/shortcuts/shortcuts_navigation.js b/app/assets/javascripts/behaviors/shortcuts/shortcuts_navigation.js
index 33a71c3a65b..bd08dc28f7a 100644
--- a/app/assets/javascripts/behaviors/shortcuts/shortcuts_navigation.js
+++ b/app/assets/javascripts/behaviors/shortcuts/shortcuts_navigation.js
@@ -1,8 +1,6 @@
-import Mousetrap from 'mousetrap';
 import { visitUrl, constructWebIDEPath } from '~/lib/utils/url_utility';
 import findAndFollowLink from '~/lib/utils/navigation_utility';
 import {
-  keysFor,
   GO_TO_PROJECT_OVERVIEW,
   GO_TO_PROJECT_ACTIVITY_FEED,
   GO_TO_PROJECT_RELEASES,
@@ -28,40 +26,26 @@ export default class ShortcutsNavigation extends Shortcuts {
   constructor() {
     super();
 
-    Mousetrap.bind(keysFor(GO_TO_PROJECT_OVERVIEW), () => findAndFollowLink('.shortcuts-project'));
-    Mousetrap.bind(keysFor(GO_TO_PROJECT_ACTIVITY_FEED), () =>
-      findAndFollowLink('.shortcuts-project-activity'),
-    );
-    Mousetrap.bind(keysFor(GO_TO_PROJECT_RELEASES), () =>
-      findAndFollowLink('.shortcuts-deployments-releases'),
-    );
-    Mousetrap.bind(keysFor(GO_TO_PROJECT_FILES), () => findAndFollowLink('.shortcuts-tree'));
-    Mousetrap.bind(keysFor(GO_TO_PROJECT_COMMITS), () => findAndFollowLink('.shortcuts-commits'));
-    Mousetrap.bind(keysFor(GO_TO_PROJECT_JOBS), () => findAndFollowLink('.shortcuts-builds'));
-    Mousetrap.bind(keysFor(GO_TO_PROJECT_REPO_GRAPH), () =>
-      findAndFollowLink('.shortcuts-network'),
-    );
-    Mousetrap.bind(keysFor(GO_TO_PROJECT_REPO_CHARTS), () =>
-      findAndFollowLink('.shortcuts-repository-charts'),
-    );
-    Mousetrap.bind(keysFor(GO_TO_PROJECT_ISSUES), () => findAndFollowLink('.shortcuts-issues'));
-    Mousetrap.bind(keysFor(GO_TO_PROJECT_ISSUE_BOARDS), () =>
-      findAndFollowLink('.shortcuts-issue-boards'),
-    );
-    Mousetrap.bind(keysFor(GO_TO_PROJECT_MERGE_REQUESTS), () =>
-      findAndFollowLink('.shortcuts-merge_requests'),
-    );
-    Mousetrap.bind(keysFor(GO_TO_PROJECT_WIKI), () => findAndFollowLink('.shortcuts-wiki'));
-    Mousetrap.bind(keysFor(GO_TO_PROJECT_SNIPPETS), () => findAndFollowLink('.shortcuts-snippets'));
-    Mousetrap.bind(keysFor(GO_TO_PROJECT_KUBERNETES), () =>
-      findAndFollowLink('.shortcuts-kubernetes'),
-    );
-    Mousetrap.bind(keysFor(GO_TO_PROJECT_ENVIRONMENTS), () =>
-      findAndFollowLink('.shortcuts-environments'),
-    );
-    Mousetrap.bind(keysFor(GO_TO_PROJECT_METRICS), () => findAndFollowLink('.shortcuts-metrics'));
-    Mousetrap.bind(keysFor(GO_TO_PROJECT_WEBIDE), ShortcutsNavigation.navigateToWebIDE);
-    Mousetrap.bind(keysFor(NEW_ISSUE), () => findAndFollowLink('.shortcuts-new-issue'));
+    this.bindCommands([
+      [GO_TO_PROJECT_OVERVIEW, () => findAndFollowLink('.shortcuts-project')],
+      [GO_TO_PROJECT_ACTIVITY_FEED, () => findAndFollowLink('.shortcuts-project-activity')],
+      [GO_TO_PROJECT_RELEASES, () => findAndFollowLink('.shortcuts-deployments-releases')],
+      [GO_TO_PROJECT_FILES, () => findAndFollowLink('.shortcuts-tree')],
+      [GO_TO_PROJECT_COMMITS, () => findAndFollowLink('.shortcuts-commits')],
+      [GO_TO_PROJECT_JOBS, () => findAndFollowLink('.shortcuts-builds')],
+      [GO_TO_PROJECT_REPO_GRAPH, () => findAndFollowLink('.shortcuts-network')],
+      [GO_TO_PROJECT_REPO_CHARTS, () => findAndFollowLink('.shortcuts-repository-charts')],
+      [GO_TO_PROJECT_ISSUES, () => findAndFollowLink('.shortcuts-issues')],
+      [GO_TO_PROJECT_ISSUE_BOARDS, () => findAndFollowLink('.shortcuts-issue-boards')],
+      [GO_TO_PROJECT_MERGE_REQUESTS, () => findAndFollowLink('.shortcuts-merge_requests')],
+      [GO_TO_PROJECT_WIKI, () => findAndFollowLink('.shortcuts-wiki')],
+      [GO_TO_PROJECT_SNIPPETS, () => findAndFollowLink('.shortcuts-snippets')],
+      [GO_TO_PROJECT_KUBERNETES, () => findAndFollowLink('.shortcuts-kubernetes')],
+      [GO_TO_PROJECT_ENVIRONMENTS, () => findAndFollowLink('.shortcuts-environments')],
+      [GO_TO_PROJECT_METRICS, () => findAndFollowLink('.shortcuts-metrics')],
+      [GO_TO_PROJECT_WEBIDE, ShortcutsNavigation.navigateToWebIDE],
+      [NEW_ISSUE, () => findAndFollowLink('.shortcuts-new-issue')],
+    ]);
   }
 
   static navigateToWebIDE() {
diff --git a/app/assets/javascripts/behaviors/shortcuts/shortcuts_network.js b/app/assets/javascripts/behaviors/shortcuts/shortcuts_network.js
index c33c092b009..02c6af53fc2 100644
--- a/app/assets/javascripts/behaviors/shortcuts/shortcuts_network.js
+++ b/app/assets/javascripts/behaviors/shortcuts/shortcuts_network.js
@@ -1,6 +1,4 @@
-import Mousetrap from 'mousetrap';
 import {
-  keysFor,
   REPO_GRAPH_SCROLL_BOTTOM,
   REPO_GRAPH_SCROLL_DOWN,
   REPO_GRAPH_SCROLL_LEFT,
@@ -14,11 +12,13 @@ export default class ShortcutsNetwork extends ShortcutsNavigation {
   constructor(graph) {
     super();
 
-    Mousetrap.bind(keysFor(REPO_GRAPH_SCROLL_LEFT), graph.scrollLeft);
-    Mousetrap.bind(keysFor(REPO_GRAPH_SCROLL_RIGHT), graph.scrollRight);
-    Mousetrap.bind(keysFor(REPO_GRAPH_SCROLL_UP), graph.scrollUp);
-    Mousetrap.bind(keysFor(REPO_GRAPH_SCROLL_DOWN), graph.scrollDown);
-    Mousetrap.bind(keysFor(REPO_GRAPH_SCROLL_TOP), graph.scrollTop);
-    Mousetrap.bind(keysFor(REPO_GRAPH_SCROLL_BOTTOM), graph.scrollBottom);
+    this.bindCommands([
+      [REPO_GRAPH_SCROLL_LEFT, graph.scrollLeft],
+      [REPO_GRAPH_SCROLL_RIGHT, graph.scrollRight],
+      [REPO_GRAPH_SCROLL_UP, graph.scrollUp],
+      [REPO_GRAPH_SCROLL_DOWN, graph.scrollDown],
+      [REPO_GRAPH_SCROLL_TOP, graph.scrollTop],
+      [REPO_GRAPH_SCROLL_BOTTOM, graph.scrollBottom],
+    ]);
   }
 }
diff --git a/app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.js b/app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.js
index 66aa1b752ae..3f3e0c51de5 100644
--- a/app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.js
+++ b/app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.js
@@ -1,4 +1,4 @@
-import Mousetrap from 'mousetrap';
+import { Mousetrap } from '~/lib/mousetrap';
 import 'mousetrap/plugins/pause/mousetrap-pause';
 
 const shorcutsDisabledKey = 'shortcutsDisabled';
diff --git a/app/assets/javascripts/behaviors/shortcuts/shortcuts_wiki.js b/app/assets/javascripts/behaviors/shortcuts/shortcuts_wiki.js
index b2801f9118d..62d612cfa6d 100644
--- a/app/assets/javascripts/behaviors/shortcuts/shortcuts_wiki.js
+++ b/app/assets/javascripts/behaviors/shortcuts/shortcuts_wiki.js
@@ -1,12 +1,12 @@
-import Mousetrap from 'mousetrap';
 import findAndFollowLink from '~/lib/utils/navigation_utility';
-import { keysFor, EDIT_WIKI_PAGE } from './keybindings';
+import { EDIT_WIKI_PAGE } from './keybindings';
 import ShortcutsNavigation from './shortcuts_navigation';
 
 export default class ShortcutsWiki extends ShortcutsNavigation {
   constructor() {
     super();
-    Mousetrap.bind(keysFor(EDIT_WIKI_PAGE), ShortcutsWiki.editWiki);
+
+    this.bindCommand(EDIT_WIKI_PAGE, ShortcutsWiki.editWiki);
   }
 
   static editWiki() {
diff --git a/app/assets/javascripts/ci/pipeline_new/components/refs_dropdown.vue b/app/assets/javascripts/ci/pipeline_new/components/refs_dropdown.vue
index 9b57f135a40..429f8e78dbe 100644
--- a/app/assets/javascripts/ci/pipeline_new/components/refs_dropdown.vue
+++ b/app/assets/javascripts/ci/pipeline_new/components/refs_dropdown.vue
@@ -1,11 +1,10 @@
 <script>
 import { __ } from '~/locale';
 import RefSelector from '~/ref/components/ref_selector.vue';
-import { BRANCH_REF_TYPE, REF_TYPE_BRANCHES, REF_TYPE_TAGS } from '~/ref/constants';
+import { REF_TYPE_BRANCHES, REF_TYPE_TAGS } from '~/ref/constants';
 import { formatToShortName } from '../utils/format_refs';
 
 export default {
-  BRANCH_REF_TYPE,
   ENABLED_TYPE_REFS: [REF_TYPE_BRANCHES, REF_TYPE_TAGS],
   i18n: {
     /**
@@ -49,7 +48,6 @@ export default {
   <ref-selector
     :value="refShortName"
     :enabled-ref-types="$options.ENABLED_TYPE_REFS"
-    :ref-type="$options.BRANCH_REF_TYPE"
     :project-id="projectId"
     :translations="$options.i18n"
     :use-symbolic-ref-names="true"
diff --git a/app/assets/javascripts/ci/runner/admin_new_runner/admin_new_runner_app.vue b/app/assets/javascripts/ci/runner/admin_new_runner/admin_new_runner_app.vue
index 43d0dae6e78..fbfd03d2716 100644
--- a/app/assets/javascripts/ci/runner/admin_new_runner/admin_new_runner_app.vue
+++ b/app/assets/javascripts/ci/runner/admin_new_runner/admin_new_runner_app.vue
@@ -1,9 +1,9 @@
 <script>
-import { GlSprintf, GlLink, GlModalDirective } from '@gitlab/ui';
 import { createAlert, VARIANT_SUCCESS } from '~/alert';
 import { redirectTo, setUrlParams } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
-import RunnerInstructionsModal from '~/vue_shared/components/runner_instructions/runner_instructions_modal.vue';
+
+import RegistrationCompatibilityAlert from '~/ci/runner/components/registration/registration_compatibility_alert.vue';
 import RunnerPlatformsRadioGroup from '~/ci/runner/components/runner_platforms_radio_group.vue';
 import RunnerCreateForm from '~/ci/runner/components/runner_create_form.vue';
 import { DEFAULT_PLATFORM, PARAM_KEY_PLATFORM, INSTANCE_TYPE } from '../constants';
@@ -12,21 +12,10 @@ import { saveAlertToLocalStorage } from '../local_storage_alert/save_alert_to_lo
 export default {
   name: 'AdminNewRunnerApp',
   components: {
-    GlLink,
-    GlSprintf,
-    RunnerInstructionsModal,
+    RegistrationCompatibilityAlert,
     RunnerPlatformsRadioGroup,
     RunnerCreateForm,
   },
-  directives: {
-    GlModal: GlModalDirective,
-  },
-  props: {
-    legacyRegistrationToken: {
-      type: String,
-      required: true,
-    },
-  },
   data() {
     return {
       platform: DEFAULT_PLATFORM,
@@ -47,7 +36,6 @@ export default {
       createAlert({ message: error.message });
     },
   },
-  modalId: 'runners-legacy-registration-instructions-modal',
   INSTANCE_TYPE,
 };
 </script>
@@ -55,24 +43,15 @@ export default {
 <template>
   <div>
     <h1 class="gl-font-size-h2">{{ s__('Runners|New instance runner') }}</h1>
+
+    <registration-compatibility-alert />
+
     <p>
-      <gl-sprintf
-        :message="
-          s__(
-            'Runners|Create an instance runner to generate a command that registers the runner with all its configurations. %{linkStart}Prefer to use a registration token to create a runner?%{linkEnd}',
-          )
-        "
-      >
-        <template #link="{ content }">
-          <gl-link v-gl-modal="$options.modalId" data-testid="legacy-instructions-link">{{
-            content
-          }}</gl-link>
-          <runner-instructions-modal
-            :modal-id="$options.modalId"
-            :registration-token="legacyRegistrationToken"
-          />
-        </template>
-      </gl-sprintf>
+      {{
+        s__(
+          'Runners|Create an instance runner to generate a command that registers the runner with all its configurations.',
+        )
+      }}
     </p>
 
     <hr aria-hidden="true" />
diff --git a/app/assets/javascripts/ci/runner/admin_new_runner/index.js b/app/assets/javascripts/ci/runner/admin_new_runner/index.js
index 502d9d33b4d..434c1197f71 100644
--- a/app/assets/javascripts/ci/runner/admin_new_runner/index.js
+++ b/app/assets/javascripts/ci/runner/admin_new_runner/index.js
@@ -12,8 +12,6 @@ export const initAdminNewRunner = (selector = '#js-admin-new-runner') => {
     return null;
   }
 
-  const { legacyRegistrationToken } = el.dataset;
-
   const apolloProvider = new VueApollo({
     defaultClient: createDefaultClient(),
   });
@@ -22,11 +20,7 @@ export const initAdminNewRunner = (selector = '#js-admin-new-runner') => {
     el,
     apolloProvider,
     render(h) {
-      return h(AdminNewRunnerApp, {
-        props: {
-          legacyRegistrationToken,
-        },
-      });
+      return h(AdminNewRunnerApp);
     },
   });
 };
diff --git a/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue b/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
index d452adb34d9..24225acfd08 100644
--- a/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
+++ b/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
@@ -193,16 +193,17 @@ export default {
         nav-class="gl-border-none!"
       />
 
-      <gl-button v-if="shouldShowCreateRunnerWorkflow" :href="newRunnerPath" variant="confirm">
-        {{ s__('Runners|New instance runner') }}
-      </gl-button>
-      <registration-dropdown
-        v-else
-        class="gl-w-full gl-sm-w-auto gl-mr-auto"
-        :registration-token="registrationToken"
-        :type="$options.INSTANCE_TYPE"
-        right
-      />
+      <div class="gl-w-full gl-md-w-auto gl-display-flex">
+        <gl-button v-if="shouldShowCreateRunnerWorkflow" :href="newRunnerPath" variant="confirm">
+          {{ s__('Runners|New instance runner') }}
+        </gl-button>
+        <registration-dropdown
+          class="gl-ml-3"
+          :registration-token="registrationToken"
+          :type="$options.INSTANCE_TYPE"
+          right
+        />
+      </div>
     </div>
 
     <runner-filtered-search-bar
diff --git a/app/assets/javascripts/ci/runner/components/registration/registration_compatibility_alert.vue b/app/assets/javascripts/ci/runner/components/registration/registration_compatibility_alert.vue
new file mode 100644
index 00000000000..0b6716c5082
--- /dev/null
+++ b/app/assets/javascripts/ci/runner/components/registration/registration_compatibility_alert.vue
@@ -0,0 +1,33 @@
+<script>
+import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { CHANGELOG_URL } from '../../constants';
+
+export default {
+  name: 'RegistrationCompatibilityAlert',
+  components: {
+    GlAlert,
+    GlLink,
+    GlSprintf,
+  },
+  CHANGELOG_URL,
+  i18n: {
+    title: s__(
+      'Runners|This registration process is only supported in GitLab Runner 15.10 or later',
+    ),
+    message: s__(
+      'Runners|This registration process is not supported in GitLab Runner 15.9 or earlier and only available as an experimental feature in GitLab Runner 15.10 and 15.11. You should upgrade to %{linkStart}GitLab Runner 16.0%{linkEnd} or later to use a stable version of this registration process.',
+    ),
+  },
+};
+</script>
+
+<template>
+  <gl-alert class="gl-mb-4" variant="warning" :dismissible="false" :title="$options.i18n.title">
+    <gl-sprintf :message="$options.i18n.message">
+      <template #link="{ content }">
+        <gl-link :href="$options.CHANGELOG_URL" target="_blank">{{ content }}</gl-link>
+      </template>
+    </gl-sprintf>
+  </gl-alert>
+</template>
diff --git a/app/assets/javascripts/ci/runner/components/registration/registration_dropdown.vue b/app/assets/javascripts/ci/runner/components/registration/registration_dropdown.vue
index 212ad5fa5a0..c1e862f6fa8 100644
--- a/app/assets/javascripts/ci/runner/components/registration/registration_dropdown.vue
+++ b/app/assets/javascripts/ci/runner/components/registration/registration_dropdown.vue
@@ -1,6 +1,7 @@
 <script>
-import { GlDropdown, GlDropdownForm, GlDropdownItem, GlDropdownDivider } from '@gitlab/ui';
+import { GlDropdown, GlDropdownForm, GlDropdownItem, GlDropdownDivider, GlIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import RunnerInstructionsModal from '~/vue_shared/components/runner_instructions/runner_instructions_modal.vue';
 import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '../../constants';
 import RegistrationToken from './registration_token.vue';
@@ -17,10 +18,12 @@ export default {
     GlDropdownForm,
     GlDropdownItem,
     GlDropdownDivider,
+    GlIcon,
     RegistrationToken,
     RunnerInstructionsModal,
     RegistrationTokenResetDropdownItem,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     registrationToken: {
       type: String,
@@ -40,7 +43,18 @@ export default {
     };
   },
   computed: {
+    isDeprecated() {
+      // Show a compact version when used as secondary option
+      // create_runner_workflow_for_admin or create_runner_workflow_for_namespace
+      return (
+        this.glFeatures?.createRunnerWorkflowForAdmin ||
+        this.glFeatures?.createRunnerWorkflowForNamespace
+      );
+    },
     dropdownText() {
+      if (this.isDeprecated) {
+        return '';
+      }
       switch (this.type) {
         case INSTANCE_TYPE:
           return s__('Runners|Register an instance runner');
@@ -52,6 +66,24 @@ export default {
           return s__('Runners|Register a runner');
       }
     },
+    dropdownToggleClass() {
+      if (this.isDeprecated) {
+        return ['gl-px-3!'];
+      }
+      return [];
+    },
+    dropdownCategory() {
+      if (this.isDeprecated) {
+        return 'tertiary';
+      }
+      return 'primary';
+    },
+    dropdownVariant() {
+      if (this.isDeprecated) {
+        return 'default';
+      }
+      return 'confirm';
+    },
   },
   methods: {
     onShowInstructionsClick() {
@@ -71,9 +103,25 @@ export default {
     ref="runnerRegistrationDropdown"
     menu-class="gl-w-auto!"
     :text="dropdownText"
-    variant="confirm"
+    :toggle-class="dropdownToggleClass"
+    :variant="dropdownVariant"
+    :category="dropdownCategory"
     v-bind="$attrs"
   >
+    <template v-if="isDeprecated" #button-content>
+      <gl-icon name="ellipsis_v" />
+    </template>
+    <gl-dropdown-form class="gl-p-4!">
+      <registration-token input-id="token-value" :value="currentRegistrationToken">
+        <template v-if="isDeprecated" #label-description>
+          <gl-icon name="warning" class="gl-text-orange-500" />
+          <span class="gl-text-secondary">
+            {{ s__('Runners|Support for registration tokens is deprecated') }}
+          </span>
+        </template>
+      </registration-token>
+    </gl-dropdown-form>
+    <gl-dropdown-divider />
     <gl-dropdown-item @click.capture.native.stop="onShowInstructionsClick">
       {{ $options.i18n.showInstallationInstructions }}
       <runner-instructions-modal
@@ -83,10 +131,6 @@ export default {
       />
     </gl-dropdown-item>
     <gl-dropdown-divider />
-    <gl-dropdown-form class="gl-p-4!">
-      <registration-token input-id="token-value" :value="currentRegistrationToken" />
-    </gl-dropdown-form>
-    <gl-dropdown-divider />
     <registration-token-reset-dropdown-item :type="type" @tokenReset="onTokenReset" />
   </gl-dropdown>
 </template>
diff --git a/app/assets/javascripts/ci/runner/components/registration/registration_token.vue b/app/assets/javascripts/ci/runner/components/registration/registration_token.vue
index 6b4e6a929b7..b196bccf66f 100644
--- a/app/assets/javascripts/ci/runner/components/registration/registration_token.vue
+++ b/app/assets/javascripts/ci/runner/components/registration/registration_token.vue
@@ -45,5 +45,9 @@ export default {
     :copy-button-title="$options.I18N_COPY_BUTTON_TITLE"
     :form-input-group-props="formInputGroupProps"
     @copy="onCopy"
-  />
+  >
+    <template v-for="slot in Object.keys($scopedSlots)" #[slot]>
+      <slot :name="slot"></slot>
+    </template>
+  </input-copy-toggle-visibility>
 </template>
diff --git a/app/assets/javascripts/ci/runner/constants.js b/app/assets/javascripts/ci/runner/constants.js
index 1cae9df713b..84b2ed010e6 100644
--- a/app/assets/javascripts/ci/runner/constants.js
+++ b/app/assets/javascripts/ci/runner/constants.js
@@ -248,5 +248,6 @@ export const INSTALL_HELP_URL = 'https://docs.gitlab.com/runner/install';
 export const EXECUTORS_HELP_URL = 'https://docs.gitlab.com/runner/executors/';
 export const SERVICE_COMMANDS_HELP_URL =
   'https://docs.gitlab.com/runner/commands/#service-related-commands';
+export const CHANGELOG_URL = 'https://gitlab.com/gitlab-org/gitlab-runner/blob/main/CHANGELOG.md';
 export const DOCKER_HELP_URL = 'https://docs.gitlab.com/runner/install/docker.html';
 export const KUBERNETES_HELP_URL = 'https://docs.gitlab.com/runner/install/kubernetes.html';
diff --git a/app/assets/javascripts/ci/runner/group_new_runner/group_new_runner_app.vue b/app/assets/javascripts/ci/runner/group_new_runner/group_new_runner_app.vue
index 35c75a917c7..ea702cd770a 100644
--- a/app/assets/javascripts/ci/runner/group_new_runner/group_new_runner_app.vue
+++ b/app/assets/javascripts/ci/runner/group_new_runner/group_new_runner_app.vue
@@ -1,9 +1,9 @@
 <script>
-import { GlSprintf, GlLink, GlModalDirective } from '@gitlab/ui';
 import { createAlert, VARIANT_SUCCESS } from '~/alert';
 import { redirectTo, setUrlParams } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
-import RunnerInstructionsModal from '~/vue_shared/components/runner_instructions/runner_instructions_modal.vue';
+
+import RegistrationCompatibilityAlert from '~/ci/runner/components/registration/registration_compatibility_alert.vue';
 import RunnerPlatformsRadioGroup from '~/ci/runner/components/runner_platforms_radio_group.vue';
 import RunnerCreateForm from '~/ci/runner/components/runner_create_form.vue';
 import { DEFAULT_PLATFORM, GROUP_TYPE, PARAM_KEY_PLATFORM } from '../constants';
@@ -12,24 +12,15 @@ import { saveAlertToLocalStorage } from '../local_storage_alert/save_alert_to_lo
 export default {
   name: 'GroupNewRunnerApp',
   components: {
-    GlLink,
-    GlSprintf,
-    RunnerInstructionsModal,
+    RegistrationCompatibilityAlert,
     RunnerPlatformsRadioGroup,
     RunnerCreateForm,
   },
-  directives: {
-    GlModal: GlModalDirective,
-  },
   props: {
     groupId: {
       type: String,
       required: true,
     },
-    legacyRegistrationToken: {
-      type: String,
-      required: true,
-    },
   },
   data() {
     return {
@@ -51,7 +42,6 @@ export default {
       createAlert({ message: error.message });
     },
   },
-  modalId: 'runners-legacy-registration-instructions-modal',
   GROUP_TYPE,
 };
 </script>
@@ -59,24 +49,15 @@ export default {
 <template>
   <div>
     <h1 class="gl-font-size-h2">{{ s__('Runners|New group runner') }}</h1>
+
+    <registration-compatibility-alert />
+
     <p>
-      <gl-sprintf
-        :message="
-          s__(
-            'Runners|Create a group runner to generate a command that registers the runner with all its configurations. %{linkStart}Prefer to use a registration token to create a runner?%{linkEnd}',
-          )
-        "
-      >
-        <template #link="{ content }">
-          <gl-link v-gl-modal="$options.modalId" data-testid="legacy-instructions-link">{{
-            content
-          }}</gl-link>
-          <runner-instructions-modal
-            :modal-id="$options.modalId"
-            :registration-token="legacyRegistrationToken"
-          />
-        </template>
-      </gl-sprintf>
+      {{
+        s__(
+          'Runners|Create a group runner to generate a command that registers the runner with all its configurations.',
+        )
+      }}
     </p>
 
     <hr aria-hidden="true" />
diff --git a/app/assets/javascripts/ci/runner/group_new_runner/index.js b/app/assets/javascripts/ci/runner/group_new_runner/index.js
index b314c3aa1e7..9e056081e03 100644
--- a/app/assets/javascripts/ci/runner/group_new_runner/index.js
+++ b/app/assets/javascripts/ci/runner/group_new_runner/index.js
@@ -12,7 +12,7 @@ export const initGroupNewRunner = (selector = '#js-group-new-runner') => {
     return null;
   }
 
-  const { legacyRegistrationToken, groupId } = el.dataset;
+  const { groupId } = el.dataset;
 
   const apolloProvider = new VueApollo({
     defaultClient: createDefaultClient(),
@@ -25,7 +25,6 @@ export const initGroupNewRunner = (selector = '#js-group-new-runner') => {
       return h(GroupNewRunnerApp, {
         props: {
           groupId,
-          legacyRegistrationToken,
         },
       });
     },
diff --git a/app/assets/javascripts/ci/runner/group_runners/group_runners_app.vue b/app/assets/javascripts/ci/runner/group_runners/group_runners_app.vue
index f8386214698..9f3e6f247d7 100644
--- a/app/assets/javascripts/ci/runner/group_runners/group_runners_app.vue
+++ b/app/assets/javascripts/ci/runner/group_runners/group_runners_app.vue
@@ -217,7 +217,9 @@ export default {
 
 <template>
   <div>
-    <div class="gl-display-flex gl-align-items-center">
+    <div
+      class="gl-display-flex gl-align-items-center gl-flex-direction-column-reverse gl-md-flex-direction-row gl-mt-3 gl-md-mt-0"
+    >
       <runner-type-tabs
         ref="runner-type-tabs"
         v-model="search"
@@ -229,20 +231,23 @@ export default {
         nav-class="gl-border-none!"
       />
 
-      <template v-if="shouldShowCreateRunnerWorkflow">
-        <gl-button v-if="newRunnerPath" :href="newRunnerPath" variant="confirm">
+      <div class="gl-w-full gl-md-w-auto gl-display-flex">
+        <gl-button
+          v-if="shouldShowCreateRunnerWorkflow && newRunnerPath"
+          :href="newRunnerPath"
+          variant="confirm"
+        >
           {{ s__('Runners|New group runner') }}
         </gl-button>
-      </template>
-      <registration-dropdown
-        v-else-if="registrationToken"
-        class="gl-ml-auto"
-        :registration-token="registrationToken"
-        :type="$options.GROUP_TYPE"
-        right
-      />
+        <registration-dropdown
+          v-if="registrationToken"
+          class="gl-ml-3"
+          :registration-token="registrationToken"
+          :type="$options.GROUP_TYPE"
+          right
+        />
+      </div>
     </div>
-
     <div
       class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-gap-3"
       :class="$options.FILTER_CSS_CLASSES"
diff --git a/app/assets/javascripts/ci/runner/project_new_runner/index.js b/app/assets/javascripts/ci/runner/project_new_runner/index.js
index 5236f28752a..44f1a0ffdab 100644
--- a/app/assets/javascripts/ci/runner/project_new_runner/index.js
+++ b/app/assets/javascripts/ci/runner/project_new_runner/index.js
@@ -12,7 +12,7 @@ export const initProjectNewRunner = (selector = '#js-project-new-runner') => {
     return null;
   }
 
-  const { legacyRegistrationToken, projectId } = el.dataset;
+  const { projectId } = el.dataset;
 
   const apolloProvider = new VueApollo({
     defaultClient: createDefaultClient(),
@@ -25,7 +25,6 @@ export const initProjectNewRunner = (selector = '#js-project-new-runner') => {
       return h(ProjectNewRunnerApp, {
         props: {
           projectId,
-          legacyRegistrationToken,
         },
       });
     },
diff --git a/app/assets/javascripts/ci/runner/project_new_runner/project_new_runner_app.vue b/app/assets/javascripts/ci/runner/project_new_runner/project_new_runner_app.vue
index 94d3e949e86..abc2eca38f4 100644
--- a/app/assets/javascripts/ci/runner/project_new_runner/project_new_runner_app.vue
+++ b/app/assets/javascripts/ci/runner/project_new_runner/project_new_runner_app.vue
@@ -1,8 +1,6 @@
 <script>
-import { GlSprintf, GlLink, GlModalDirective } from '@gitlab/ui';
 import { createAlert, VARIANT_SUCCESS } from '~/alert';
 import { s__ } from '~/locale';
-import RunnerInstructionsModal from '~/vue_shared/components/runner_instructions/runner_instructions_modal.vue';
 import RunnerPlatformsRadioGroup from '~/ci/runner/components/runner_platforms_radio_group.vue';
 import RunnerCreateForm from '~/ci/runner/components/runner_create_form.vue';
 import { DEFAULT_PLATFORM, PROJECT_TYPE } from '../constants';
@@ -10,24 +8,14 @@ import { DEFAULT_PLATFORM, PROJECT_TYPE } from '../constants';
 export default {
   name: 'ProjectNewRunnerApp',
   components: {
-    GlLink,
-    GlSprintf,
-    RunnerInstructionsModal,
     RunnerPlatformsRadioGroup,
     RunnerCreateForm,
   },
-  directives: {
-    GlModal: GlModalDirective,
-  },
   props: {
     projectId: {
       type: String,
       required: true,
     },
-    legacyRegistrationToken: {
-      type: String,
-      required: true,
-    },
   },
   data() {
     return {
@@ -45,7 +33,6 @@ export default {
       createAlert({ message: error.message });
     },
   },
-  modalId: 'runners-legacy-registration-instructions-modal',
   PROJECT_TYPE,
 };
 </script>
@@ -54,23 +41,11 @@ export default {
   <div>
     <h1 class="gl-font-size-h2">{{ s__('Runners|New project runner') }}</h1>
     <p>
-      <gl-sprintf
-        :message="
-          s__(
-            'Runners|Create a project runner to generate a command that registers the runner with all its configurations. %{linkStart}Prefer to use a registration token to create a runner?%{linkEnd}',
-          )
-        "
-      >
-        <template #link="{ content }">
-          <gl-link v-gl-modal="$options.modalId" data-testid="legacy-instructions-link">{{
-            content
-          }}</gl-link>
-          <runner-instructions-modal
-            :modal-id="$options.modalId"
-            :registration-token="legacyRegistrationToken"
-          />
-        </template>
-      </gl-sprintf>
+      {{
+        s__(
+          'Runners|Create a project runner to generate a command that registers the runner with all its configurations.',
+        )
+      }}
     </p>
 
     <hr aria-hidden="true" />
diff --git a/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue b/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue
index 0bbbc795fff..e08eb853ad7 100644
--- a/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue
+++ b/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue
@@ -1,12 +1,11 @@
 <script>
-/* global Mousetrap */
-import 'mousetrap';
 import { GlButton, GlButtonGroup, GlTooltipDirective } from '@gitlab/ui';
 import {
   keysFor,
   ISSUE_PREVIOUS_DESIGN,
   ISSUE_NEXT_DESIGN,
 } from '~/behaviors/shortcuts/keybindings';
+import { Mousetrap } from '~/lib/mousetrap';
 import { s__, sprintf } from '~/locale';
 import allDesignsMixin from '../../mixins/all_designs';
 import { DESIGN_ROUTE_NAME } from '../../router/constants';
diff --git a/app/assets/javascripts/design_management/pages/design/index.vue b/app/assets/javascripts/design_management/pages/design/index.vue
index 2f2b2ed1a90..eeb36e59b89 100644
--- a/app/assets/javascripts/design_management/pages/design/index.vue
+++ b/app/assets/javascripts/design_management/pages/design/index.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlAlert } from '@gitlab/ui';
 import { isNull } from 'lodash';
-import Mousetrap from 'mousetrap';
+import { Mousetrap } from '~/lib/mousetrap';
 import { keysFor, ISSUE_CLOSE_DESIGN } from '~/behaviors/shortcuts/keybindings';
 import { createAlert } from '~/alert';
 import { fetchPolicies } from '~/lib/graphql';
diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index 9b3db78724d..dff95bde269 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -1,7 +1,6 @@
 <script>
 import { GlLoadingIcon, GlPagination, GlSprintf, GlAlert } from '@gitlab/ui';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
-import Mousetrap from 'mousetrap';
 import { mapState, mapGetters, mapActions } from 'vuex';
 import api from '~/api';
 import {
@@ -15,6 +14,7 @@ import { createAlert } from '~/alert';
 import { isSingleViewStyle } from '~/helpers/diffs_helper';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { parseBoolean } from '~/lib/utils/common_utils';
+import { Mousetrap } from '~/lib/mousetrap';
 import { updateHistory } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
 import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
diff --git a/app/assets/javascripts/docs/docs_bundle.js b/app/assets/javascripts/docs/docs_bundle.js
index 897439f56b0..32aa4a22cba 100644
--- a/app/assets/javascripts/docs/docs_bundle.js
+++ b/app/assets/javascripts/docs/docs_bundle.js
@@ -1,4 +1,4 @@
-import Mousetrap from 'mousetrap';
+import { Mousetrap } from '~/lib/mousetrap';
 
 function addMousetrapClick(el, key) {
   el.addEventListener('click', () => Mousetrap.trigger(key));
diff --git a/app/assets/javascripts/editor/schema/ci.json b/app/assets/javascripts/editor/schema/ci.json
index 44944a4a205..70f1dddcac9 100644
--- a/app/assets/javascripts/editor/schema/ci.json
+++ b/app/assets/javascripts/editor/schema/ci.json
@@ -360,6 +360,9 @@
             },
             "rules": {
               "$ref": "#/definitions/rules"
+            },
+            "inputs": {
+              "$ref": "#/definitions/inputs"
             }
           },
           "required": [
@@ -395,6 +398,9 @@
                   }
                 }
               ]
+            },
+            "inputs": {
+              "$ref": "#/definitions/inputs"
             }
           },
           "required": [
@@ -411,6 +417,9 @@
               "type": "string",
               "format": "uri-reference",
               "pattern": "\\.ya?ml$"
+            },
+            "inputs": {
+              "$ref": "#/definitions/inputs"
             }
           },
           "required": [
@@ -425,6 +434,9 @@
               "description": "Local path to component directory or full path to external component directory.",
               "type": "string",
               "format": "uri-reference"
+            },
+            "inputs": {
+              "$ref": "#/definitions/inputs"
             }
           },
           "required": [
@@ -440,6 +452,9 @@
               "type": "string",
               "format": "uri-reference",
               "pattern": "^https?://.+\\.ya?ml$"
+            },
+            "inputs": {
+              "$ref": "#/definitions/inputs"
             }
           },
           "required": [
@@ -1252,6 +1267,10 @@
       "markdownDescription": "Interruptible is used to indicate that a job should be canceled if made redundant by a newer pipeline run. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#interruptible).",
       "default": false
     },
+    "inputs": {
+      "markdownDescription": "Used to pass input values to included templates or components. [Learn More](https://docs.gitlab.com/ee/ci/yaml/includes.html#set-input-parameter-values-with-includeinputs).",
+      "type": "object"
+    },
     "job": {
       "allOf": [
         {
diff --git a/app/assets/javascripts/jobs/components/job/sidebar/stages_dropdown.vue b/app/assets/javascripts/jobs/components/job/sidebar/stages_dropdown.vue
index e3afe9b7c67..28a17abb20b 100644
--- a/app/assets/javascripts/jobs/components/job/sidebar/stages_dropdown.vue
+++ b/app/assets/javascripts/jobs/components/job/sidebar/stages_dropdown.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlLink, GlDropdown, GlDropdownItem, GlSprintf } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
-import Mousetrap from 'mousetrap';
+import { Mousetrap } from '~/lib/mousetrap';
 import { s__ } from '~/locale';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
diff --git a/app/assets/javascripts/lib/mousetrap.js b/app/assets/javascripts/lib/mousetrap.js
new file mode 100644
index 00000000000..ef3f54ec314
--- /dev/null
+++ b/app/assets/javascripts/lib/mousetrap.js
@@ -0,0 +1,59 @@
+// This is the only file allowed to import directly from the package.
+// eslint-disable-next-line no-restricted-imports
+import Mousetrap from 'mousetrap';
+
+const additionalStopCallbacks = [];
+const originalStopCallback = Mousetrap.prototype.stopCallback;
+
+Mousetrap.prototype.stopCallback = function customStopCallback(e, element, combo) {
+  for (const callback of additionalStopCallbacks) {
+    const returnValue = callback.call(this, e, element, combo);
+    if (returnValue !== undefined) return returnValue;
+  }
+
+  return originalStopCallback.call(this, e, element, combo);
+};
+
+/**
+ * Add a stop callback to Mousetrap.
+ *
+ * This allows overriding the default behaviour of Mousetrap#stopCallback,
+ * which is to stop the bound key handler/callback from being called if the key
+ * combo is pressed inside form fields (input, select, textareas, etc). See
+ * https://craig.is/killing/mice#api.stopCallback.
+ *
+ * The stopCallback registered here has the same signature as
+ * Mousetrap#stopCallback, with the one difference being that the callback
+ * should return `undefined` if it has no opinion on whether the current key
+ * combo should be stopped or not, and the next stop callback should be
+ * consulted instead. If a boolean is returned, no other stop callbacks are
+ * called.
+ *
+ * Note: This approach does not always work as expected when coupled with
+ * Mousetrap's pause plugin, which is used for enabling/disabling all keyboard
+ * shortcuts. That plugin assumes it's the first to execute and overwrite
+ * Mousetrap's `stopCallback` method, whereas to work correctly with this, it
+ * must execute last. This is not guaranteed or even attempted.
+ *
+ * To work correctly, we may need to reimplement the pause plugin here.
+ *
+ * @param {(e: Event, element: Element, combo: string) => boolean|undefined}
+ *     stopCallback The additional stop callback function to add to the chain
+ *     of stop callbacks.
+ * @returns {void}
+ */
+export const addStopCallback = (stopCallback) => {
+  // Unshift, since we want to iterate through them in reverse order, so that
+  // the most recently added handler is called first, and the original
+  // stopCallback method is called last.
+  additionalStopCallbacks.unshift(stopCallback);
+};
+
+/**
+ * Clear additionalStopCallbacks. Used only for tests.
+ */
+export const clearStopCallbacksForTests = () => {
+  additionalStopCallbacks.length = 0;
+};
+
+export { Mousetrap };
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index ab2b713ac9f..100ef11409f 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -8,12 +8,12 @@ import {
   GlSprintf,
   GlLink,
 } from '@gitlab/ui';
-import Mousetrap from 'mousetrap';
 import VueDraggable from 'vuedraggable';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { createAlert } from '~/alert';
 import invalidUrl from '~/lib/utils/invalid_url';
 import { ESC_KEY } from '~/lib/utils/keys';
+import { Mousetrap } from '~/lib/mousetrap';
 import { mergeUrlParams, updateHistory } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 import { defaultTimeRange } from '~/vue_shared/constants';
diff --git a/app/assets/javascripts/notes/components/discussion_navigator.vue b/app/assets/javascripts/notes/components/discussion_navigator.vue
index 03bdc7a2cc6..faef8595998 100644
--- a/app/assets/javascripts/notes/components/discussion_navigator.vue
+++ b/app/assets/javascripts/notes/components/discussion_navigator.vue
@@ -1,12 +1,11 @@
 <script>
-/* global Mousetrap */
-import 'mousetrap';
 import { throttle } from 'lodash';
 import {
   keysFor,
   MR_NEXT_UNRESOLVED_DISCUSSION,
   MR_PREVIOUS_UNRESOLVED_DISCUSSION,
 } from '~/behaviors/shortcuts/keybindings';
+import { Mousetrap } from '~/lib/mousetrap';
 import eventHub from '~/notes/event_hub';
 import discussionNavigation from '~/notes/mixins/discussion_navigation';
 
diff --git a/app/assets/javascripts/pages/projects/init_blob.js b/app/assets/javascripts/pages/projects/init_blob.js
index 097b2f33aa9..244d1d5590e 100644
--- a/app/assets/javascripts/pages/projects/init_blob.js
+++ b/app/assets/javascripts/pages/projects/init_blob.js
@@ -22,7 +22,6 @@ export default () => {
 
   // eslint-disable-next-line no-new
   new ShortcutsBlob({
-    skipResetBindings: true,
     fileBlobPermalinkUrl,
     fileBlobPermalinkUrlElement,
   });
diff --git a/app/assets/javascripts/projects/commits/index.js b/app/assets/javascripts/projects/commits/index.js
index 3179fcb14fd..1a5681adb04 100644
--- a/app/assets/javascripts/projects/commits/index.js
+++ b/app/assets/javascripts/projects/commits/index.js
@@ -48,7 +48,6 @@ export const initCommitsRefSwitcher = () => {
           projectId,
           value: useSymbolicRefNames ? `refs/${refType}/${ref}` : ref,
           useSymbolicRefNames,
-          refType,
         },
         on: {
           input(selected) {
diff --git a/app/assets/javascripts/ref/components/ref_selector.vue b/app/assets/javascripts/ref/components/ref_selector.vue
index 9a84726d42f..7f58b394547 100644
--- a/app/assets/javascripts/ref/components/ref_selector.vue
+++ b/app/assets/javascripts/ref/components/ref_selector.vue
@@ -47,11 +47,6 @@ export default {
       required: false,
       default: () => {},
     },
-    refType: {
-      type: String,
-      required: false,
-      default: null,
-    },
     projectId: {
       type: String,
       required: true,
diff --git a/app/assets/javascripts/repository/components/blob_controls.vue b/app/assets/javascripts/repository/components/blob_controls.vue
index d3e306619bf..460db0fe2ae 100644
--- a/app/assets/javascripts/repository/components/blob_controls.vue
+++ b/app/assets/javascripts/repository/components/blob_controls.vue
@@ -101,7 +101,6 @@ export default {
         fileBlobPermalinkUrlElement && fileBlobPermalinkUrlElement.getAttribute('href');
       // eslint-disable-next-line no-new
       new ShortcutsBlob({
-        skipResetBindings: true,
         fileBlobPermalinkUrl,
         fileBlobPermalinkUrlElement,
       });
diff --git a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
index 4f312c72de5..050b05a6324 100644
--- a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
+++ b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlButton } from '@gitlab/ui';
-import Mousetrap from 'mousetrap';
+import { Mousetrap } from '~/lib/mousetrap';
 import { keysFor, TOGGLE_SUPER_SIDEBAR } from '~/behaviors/shortcuts/keybindings';
 import { __ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
diff --git a/app/assets/javascripts/vue_shared/components/file_finder/index.vue b/app/assets/javascripts/vue_shared/components/file_finder/index.vue
index 5c892377f40..18f9d26a13d 100644
--- a/app/assets/javascripts/vue_shared/components/file_finder/index.vue
+++ b/app/assets/javascripts/vue_shared/components/file_finder/index.vue
@@ -1,8 +1,8 @@
 <script>
 import { GlIcon, GlLoadingIcon } from '@gitlab/ui';
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
-import Mousetrap from 'mousetrap';
 import VirtualList from 'vue-virtual-scroll-list';
+import { Mousetrap, addStopCallback } from '~/lib/mousetrap';
 import { keysFor, MR_GO_TO_FILE } from '~/behaviors/shortcuts/keybindings';
 import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes';
 import Item from './item.vue';
@@ -10,8 +10,6 @@ import Item from './item.vue';
 export const MAX_FILE_FINDER_RESULTS = 40;
 export const FILE_FINDER_ROW_HEIGHT = 55;
 
-const originalStopCallback = Mousetrap.prototype.stopCallback;
-
 export default {
   components: {
     GlIcon,
@@ -140,7 +138,7 @@ export default {
       this.toggle(!this.visible);
     });
 
-    Mousetrap.prototype.stopCallback = function customStopCallback(e, el, combo) {
+    addStopCallback(function fileFinderStopCallback(e, el, combo) {
       if (
         (combo === 't' && el.classList.contains('dropdown-input-field')) ||
         el.classList.contains('inputarea')
@@ -150,8 +148,8 @@ export default {
         return false;
       }
 
-      return originalStopCallback.call(this, e, el, combo);
-    };
+      return undefined;
+    });
   },
   methods: {
     toggle(visible) {
diff --git a/app/assets/javascripts/work_items/components/work_item_detail.vue b/app/assets/javascripts/work_items/components/work_item_detail.vue
index 155e983cbf6..c942278ba00 100644
--- a/app/assets/javascripts/work_items/components/work_item_detail.vue
+++ b/app/assets/javascripts/work_items/components/work_item_detail.vue
@@ -13,7 +13,6 @@ import {
 } from '@gitlab/ui';
 import noAccessSvg from '@gitlab/svgs/dist/illustrations/analytics/no-access.svg';
 import * as Sentry from '@sentry/browser';
-import { fetchPolicies } from '~/lib/graphql';
 import { s__ } from '~/locale';
 import { getParameterByName, updateHistory, setUrlParams } from '~/lib/utils/url_utility';
 import { isPositiveInteger } from '~/lib/utils/number_utils';
@@ -149,8 +148,6 @@ export default {
       error() {
         this.setEmptyState();
       },
-      fetchPolicy: fetchPolicies.CACHE_AND_NETWORK,
-      notifyOnNetworkStatusChange: true,
       result(res) {
         // need to handle this when the res is loading: true, netWorkStatus: 1, partial: true
         if (!res.data) {
@@ -331,7 +328,7 @@ export default {
       const widgetHierarchy = this.workItem.widgets.find(
         (widget) => widget.type === WIDGET_TYPE_HIERARCHY,
       );
-      return widgetHierarchy.children.nodes;
+      return widgetHierarchy.children?.nodes;
     },
     workItemBodyClass() {
       return {
diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_tree.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_tree.vue
index 72efe3990d1..dd0d50861e4 100644
--- a/app/assets/javascripts/work_items/components/work_item_links/work_item_tree.vue
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_tree.vue
@@ -1,9 +1,5 @@
 <script>
-import { isEmpty } from 'lodash';
-import { convertToGraphQLId } from '~/graphql_shared/utils';
-import { TYPENAME_WORK_ITEM } from '~/graphql_shared/constants';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
-import { getParameterByName } from '~/lib/utils/url_utility';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 import {
@@ -89,26 +85,6 @@ export default {
         )
         .some((hierarchy) => hierarchy.hasChildren);
     },
-    childUrlParams() {
-      const params = {};
-      if (this.fetchByIid) {
-        const iid = getParameterByName('work_item_iid');
-        if (iid) {
-          params.iid = iid;
-        }
-      } else {
-        const workItemId = getParameterByName('work_item_id');
-        if (workItemId) {
-          params.id = convertToGraphQLId(TYPENAME_WORK_ITEM, workItemId);
-        }
-      }
-      return params;
-    },
-  },
-  mounted() {
-    if (!isEmpty(this.childUrlParams)) {
-      this.addWorkItemQuery(this.childUrlParams);
-    }
   },
   methods: {
     showAddForm(formType, childType) {
@@ -123,6 +99,19 @@ export default {
     hideAddForm() {
       this.isShownAddForm = false;
     },
+    prefetchWorkItem({ id, iid }) {
+      if (this.workItemType !== WORK_ITEM_TYPE_VALUE_OBJECTIVE) {
+        this.prefetch = setTimeout(
+          () => this.addWorkItemQuery({ id, iid }),
+          DEFAULT_DEBOUNCE_AND_THROTTLE_MS,
+        );
+      }
+    },
+    clearPrefetching() {
+      if (this.prefetch) {
+        clearTimeout(this.prefetch);
+      }
+    },
     addWorkItemQuery({ id, iid }) {
       const variables = this.fetchByIid
         ? {
@@ -145,19 +134,6 @@ export default {
         },
       });
     },
-    prefetchWorkItem({ id, iid }) {
-      if (this.workItemType !== WORK_ITEM_TYPE_VALUE_OBJECTIVE) {
-        this.prefetch = setTimeout(
-          () => this.addWorkItemQuery({ id, iid }),
-          DEFAULT_DEBOUNCE_AND_THROTTLE_MS,
-        );
-      }
-    },
-    clearPrefetching() {
-      if (this.prefetch) {
-        clearTimeout(this.prefetch);
-      }
-    },
   },
 };
 </script>
diff --git a/app/assets/javascripts/zen_mode.js b/app/assets/javascripts/zen_mode.js
index ccb9d05bc90..6634d0cc617 100644
--- a/app/assets/javascripts/zen_mode.js
+++ b/app/assets/javascripts/zen_mode.js
@@ -6,7 +6,7 @@
 import autosize from 'autosize';
 import Dropzone from 'dropzone';
 import $ from 'jquery';
-import Mousetrap from 'mousetrap';
+import { Mousetrap } from '~/lib/mousetrap';
 import 'mousetrap/plugins/pause/mousetrap-pause';
 import { scrollToElement } from '~/lib/utils/common_utils';
 
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index ef75c650853..bb838437939 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -336,6 +336,7 @@ kbd kbd {
   border: 0;
 }
 .gl-avatar {
+  display: inline-flex;
   border-width: 1px;
   border-style: solid;
   border-color: rgba(251, 250, 253, 0.08);
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index 0dfc6be356f..079e59f5521 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -336,6 +336,7 @@ kbd kbd {
   border: 0;
 }
 .gl-avatar {
+  display: inline-flex;
   border-width: 1px;
   border-style: solid;
   border-color: rgba(31, 30, 36, 0.08);
diff --git a/app/controllers/admin/broadcast_messages_controller.rb b/app/controllers/admin/broadcast_messages_controller.rb
index 654b8309937..821c3cc1635 100644
--- a/app/controllers/admin/broadcast_messages_controller.rb
+++ b/app/controllers/admin/broadcast_messages_controller.rb
@@ -6,7 +6,6 @@ module Admin
 
     before_action :find_broadcast_message, only: [:edit, :update, :destroy]
     before_action :find_broadcast_messages, only: [:index, :create]
-    before_action :push_features, only: [:index, :edit]
 
     feature_category :onboarding
     urgency :low
@@ -15,8 +14,7 @@ module Admin
       @broadcast_message = BroadcastMessage.new
     end
 
-    def edit
-    end
+    def edit; end
 
     def create
       @broadcast_message = BroadcastMessage.new(broadcast_message_params)
@@ -88,18 +86,14 @@ module Admin
     def broadcast_message_params
       params.require(:broadcast_message)
         .permit(%i[
-                  theme
-                  ends_at
-                  message
-                  starts_at
-                  target_path
-                  broadcast_type
-                  dismissable
-                ], target_access_levels: []).reverse_merge!(target_access_levels: [])
-    end
-
-    def push_features
-      push_frontend_feature_flag(:role_targeted_broadcast_messages, current_user)
+          theme
+          ends_at
+          message
+          starts_at
+          target_path
+          broadcast_type
+          dismissable
+        ], target_access_levels: []).reverse_merge!(target_access_levels: [])
     end
   end
 end
diff --git a/app/controllers/groups/runners_controller.rb b/app/controllers/groups/runners_controller.rb
index f267c1cb857..4b52617d287 100644
--- a/app/controllers/groups/runners_controller.rb
+++ b/app/controllers/groups/runners_controller.rb
@@ -36,8 +36,6 @@ class Groups::RunnersController < Groups::ApplicationController
 
   def new
     render_404 unless create_runner_workflow_for_namespace_enabled?
-
-    @group_runner_registration_token = @group.runners_token
   end
 
   def register
diff --git a/app/helpers/broadcast_messages_helper.rb b/app/helpers/broadcast_messages_helper.rb
index bc3527565a6..d3a196cc0de 100644
--- a/app/helpers/broadcast_messages_helper.rb
+++ b/app/helpers/broadcast_messages_helper.rb
@@ -99,7 +99,6 @@ module BroadcastMessagesHelper
   private
 
   def current_user_access_level_for_project_or_group
-    return if Feature.disabled?(:role_targeted_broadcast_messages)
     return unless current_user.present?
 
     strong_memoize(:current_user_access_level_for_project_or_group) do
diff --git a/app/models/application_setting.rb b/app/models/application_setting.rb
index 196000ad441..02b8cf9ee28 100644
--- a/app/models/application_setting.rb
+++ b/app/models/application_setting.rb
@@ -864,33 +864,6 @@ class ApplicationSetting < MainClusterwide::ApplicationRecord
     false
   end
 
-  # Overriding the enum check for `email_confirmation_setting` as the feature flag is being removed and is taking a
-  # release M, M.N+1 strategy as noted in:
-  # https://gitlab.com/gitlab-org/gitlab/-/merge_requests/107302#note_1286005956
-  def email_confirmation_setting_off?
-    if Feature.enabled?(:soft_email_confirmation)
-      false
-    else
-      super
-    end
-  end
-
-  def email_confirmation_setting_soft?
-    if Feature.enabled?(:soft_email_confirmation)
-      true
-    else
-      super
-    end
-  end
-
-  def email_confirmation_setting_hard?
-    if Feature.enabled?(:soft_email_confirmation)
-      false
-    else
-      super
-    end
-  end
-
   private
 
   def self.human_attribute_name(attribute, *options)
diff --git a/app/models/broadcast_message.rb b/app/models/broadcast_message.rb
index 14aecbc9420..733018160cd 100644
--- a/app/models/broadcast_message.rb
+++ b/app/models/broadcast_message.rb
@@ -88,10 +88,8 @@ class BroadcastMessage < MainClusterwide::ApplicationRecord
 
     private
 
-    def fetch_messages(cache_key, current_path, user_access_level)
-      messages = cache.fetch(cache_key, as: BroadcastMessage, expires_in: cache_expires_in) do
-        yield
-      end
+    def fetch_messages(cache_key, current_path, user_access_level, &block)
+      messages = cache.fetch(cache_key, as: BroadcastMessage, expires_in: cache_expires_in, &block)
 
       now_or_future = messages.select(&:now_or_future?)
 
@@ -134,7 +132,6 @@ class BroadcastMessage < MainClusterwide::ApplicationRecord
   end
 
   def matches_current_user_access_level?(user_access_level)
-    return false if target_access_levels.present? && Feature.disabled?(:role_targeted_broadcast_messages)
     return true unless target_access_levels.present?
 
     target_access_levels.include? user_access_level
@@ -148,9 +145,7 @@ class BroadcastMessage < MainClusterwide::ApplicationRecord
     # This fixes a mismatch between requests in the GUI and CLI
     #
     # This has to be reassigned due to frozen strings being provided.
-    unless current_path.start_with?("/")
-      current_path = "/#{current_path}"
-    end
+    current_path = "/#{current_path}" unless current_path.start_with?("/")
 
     escaped = Regexp.escape(target_path).gsub('\\*', '.*')
     regexp = Regexp.new "^#{escaped}$", Regexp::IGNORECASE
diff --git a/app/services/packages/generic/create_package_file_service.rb b/app/services/packages/generic/create_package_file_service.rb
index 78c97000654..09e3fb4a825 100644
--- a/app/services/packages/generic/create_package_file_service.rb
+++ b/app/services/packages/generic/create_package_file_service.rb
@@ -47,7 +47,11 @@ module Packages
       end
 
       def target_file_is_duplicate?(package)
-        package.package_files.with_file_name(params[:file_name]).exists?
+        package
+          .package_files
+          .with_file_name(params[:file_name])
+          .not_pending_destruction
+          .exists?
       end
     end
   end
diff --git a/app/services/spam/spam_verdict_service.rb b/app/services/spam/spam_verdict_service.rb
index 4ec07bb4c5f..387d36cc7d1 100644
--- a/app/services/spam/spam_verdict_service.rb
+++ b/app/services/spam/spam_verdict_service.rb
@@ -14,57 +14,47 @@ module Spam
     end
 
     def execute
-      spamcheck_result = nil
-      spamcheck_attribs = {}
-      spamcheck_error = false
+      spamcheck_verdict = nil
 
       external_spam_check_round_trip_time = Benchmark.realtime do
-        spamcheck_result, spamcheck_attribs, spamcheck_error = spamcheck_verdict
+        spamcheck_verdict = get_spamcheck_verdict
       end
 
-      label = spamcheck_error ? 'ERROR' : spamcheck_result.to_s.upcase
+      histogram.observe({ result: spamcheck_verdict.upcase }, external_spam_check_round_trip_time) if spamcheck_verdict
 
-      histogram.observe({ result: label }, external_spam_check_round_trip_time)
-
-      # assign result to a var for logging it before reassigning to nil when monitorMode is true
-      original_spamcheck_result = spamcheck_result
-
-      spamcheck_result = nil if spamcheck_attribs&.fetch("monitorMode", "false") == "true"
-
-      akismet_result = akismet_verdict
+      akismet_verdict = get_akismet_verdict
 
       # filter out anything we don't recognise, including nils.
-      valid_results = [spamcheck_result, akismet_result].compact.select { |r| SUPPORTED_VERDICTS.key?(r) }
+      valid_verdicts = [spamcheck_verdict, akismet_verdict].compact.select { |r| SUPPORTED_VERDICTS.key?(r) }
 
       # Treat nils - such as service unavailable - as ALLOW
-      return ALLOW unless valid_results.any?
+      return ALLOW unless valid_verdicts.any?
 
-      # Favour the most restrictive result.
-      verdict = valid_results.min_by { |v| SUPPORTED_VERDICTS[v][:priority] }
+      # Favour the most restrictive verdict
+      final_verdict = valid_verdicts.min_by { |v| SUPPORTED_VERDICTS[v][:priority] }
 
       # The target can override the verdict via the `allow_possible_spam` application setting
-      verdict = OVERRIDE_VIA_ALLOW_POSSIBLE_SPAM if override_via_allow_possible_spam?(verdict: verdict)
+      final_verdict = OVERRIDE_VIA_ALLOW_POSSIBLE_SPAM if override_via_allow_possible_spam?(verdict: final_verdict)
 
       logger.info(class: self.class.name,
                   akismet_verdict: akismet_verdict,
-                  spam_check_verdict: original_spamcheck_result,
-                  extra_attributes: spamcheck_attribs,
+                  spam_check_verdict: spamcheck_verdict,
                   spam_check_rtt: external_spam_check_round_trip_time.real,
-                  final_verdict: verdict,
+                  final_verdict: final_verdict,
                   username: user.username,
                   user_id: user.id,
                   target_type: target.class.to_s,
                   project_id: target.project_id
                  )
 
-      verdict
+      final_verdict
     end
 
     private
 
     attr_reader :user, :target, :options, :context, :extra_features
 
-    def akismet_verdict
+    def get_akismet_verdict
       if akismet.spam?
         Gitlab::Recaptcha.enabled? ? CONDITIONAL_ALLOW : DISALLOW
       else
@@ -72,23 +62,14 @@ module Spam
       end
     end
 
-    def spamcheck_verdict
+    def get_spamcheck_verdict
       return unless Gitlab::CurrentSettings.spam_check_endpoint_enabled
 
       begin
-        result, attribs, _error = spamcheck_client.spam?(spammable: target, user: user, context: context,
-                                                         extra_features: extra_features)
-        # @TODO log if error is not nil https://gitlab.com/gitlab-org/gitlab/-/issues/329545
-
-        return [nil, attribs] unless result
-
-        [result, attribs]
-
+        spamcheck_client.spam?(spammable: target, user: user, context: context, extra_features: extra_features).verdict
       rescue StandardError => e
         Gitlab::ErrorTracking.log_exception(e, error: ERROR_TYPE)
-
-        # Default to ALLOW if any errors occur
-        [ALLOW, attribs, true]
+        nil
       end
     end
 
diff --git a/app/views/admin/runners/new.html.haml b/app/views/admin/runners/new.html.haml
index dd93ecfcf8c..c4e87761fee 100644
--- a/app/views/admin/runners/new.html.haml
+++ b/app/views/admin/runners/new.html.haml
@@ -2,4 +2,4 @@
 - breadcrumb_title s_('Runners|New')
 - page_title s_('Runners|Create an instance runner')
 
-#js-admin-new-runner{ data: { legacy_registration_token: Gitlab::CurrentSettings.runners_registration_token } }
+#js-admin-new-runner
diff --git a/app/views/admin/sessions/new.html.haml b/app/views/admin/sessions/new.html.haml
index a24ef5d8ea4..04d99657cfd 100644
--- a/app/views/admin/sessions/new.html.haml
+++ b/app/views/admin/sessions/new.html.haml
@@ -4,7 +4,7 @@
 .row.justify-content-center
   .col-md-5.new-session-forms-container
     .login-page
-      #signin-container
+      #signin-container{ class: "#{'borderless' if Feature.enabled?(:restyle_login_page, @project)}" }
         - if any_form_based_providers_enabled?
           = render 'devise/shared/tabs_ldap', show_password_form: allow_admin_mode_password_authentication_for_web?, render_signup_link: false
         - else
diff --git a/app/views/groups/runners/new.html.haml b/app/views/groups/runners/new.html.haml
index 12e7e458a79..db48e66185c 100644
--- a/app/views/groups/runners/new.html.haml
+++ b/app/views/groups/runners/new.html.haml
@@ -2,4 +2,4 @@
 - breadcrumb_title s_('Runners|New')
 - page_title s_('Runners|Create a group runner')
 
-#js-group-new-runner{ data: { legacy_registration_token: @group_runner_registration_token, group_id: @group.to_global_id } }
+#js-group-new-runner{ data: { group_id: @group.to_global_id } }
diff --git a/app/views/projects/runners/new.html.haml b/app/views/projects/runners/new.html.haml
index 92b79186501..4aeed910452 100644
--- a/app/views/projects/runners/new.html.haml
+++ b/app/views/projects/runners/new.html.haml
@@ -2,4 +2,4 @@
 - breadcrumb_title s_('Runners|New runner')
 - page_title s_('Runners|Create a project runner')
 
-#js-project-new-runner{ data: { legacy_registration_token: @project.runners_token, project_id: @project.to_global_id } }
+#js-project-new-runner{ data: { project_id: @project.to_global_id } }
diff --git a/app/workers/authorized_project_update/project_recalculate_worker.rb b/app/workers/authorized_project_update/project_recalculate_worker.rb
index cbf068f0b85..29ea43ad641 100644
--- a/app/workers/authorized_project_update/project_recalculate_worker.rb
+++ b/app/workers/authorized_project_update/project_recalculate_worker.rb
@@ -7,8 +7,6 @@ module AuthorizedProjectUpdate
     data_consistency :always
     include Gitlab::ExclusiveLeaseHelpers
 
-    prepend WaitableWorker
-
     feature_category :system_access
     urgency :high
     queue_namespace :authorized_project_update
diff --git a/app/workers/authorized_projects_worker.rb b/app/workers/authorized_projects_worker.rb
index b553a2cd14e..dde46a4e61b 100644
--- a/app/workers/authorized_projects_worker.rb
+++ b/app/workers/authorized_projects_worker.rb
@@ -6,7 +6,6 @@ class AuthorizedProjectsWorker
   data_consistency :always
 
   sidekiq_options retry: 3
-  prepend WaitableWorker
 
   feature_category :system_access
   urgency :high
diff --git a/app/workers/concerns/waitable_worker.rb b/app/workers/concerns/waitable_worker.rb
deleted file mode 100644
index 1fe950b7570..00000000000
--- a/app/workers/concerns/waitable_worker.rb
+++ /dev/null
@@ -1,13 +0,0 @@
-# frozen_string_literal: true
-
-module WaitableWorker
-  extend ActiveSupport::Concern
-
-  def perform(*args)
-    notify_key = args.pop if Gitlab::JobWaiter.key?(args.last)
-
-    super(*args)
-  ensure
-    Gitlab::JobWaiter.notify(notify_key, jid) if notify_key
-  end
-end