Add latest changes from gitlab-org/gitlab@master

53 files changed, 243 insertions, 270 deletions

diff --git a/app/assets/javascripts/analytics/cycle_analytics/constants.js b/app/assets/javascripts/analytics/cycle_analytics/constants.js
index 2758d686fb1..0bf4d0ef8c5 100644
--- a/app/assets/javascripts/analytics/cycle_analytics/constants.js
+++ b/app/assets/javascripts/analytics/cycle_analytics/constants.js
@@ -32,11 +32,6 @@ export const I18N_VSA_ERROR_SELECTED_STAGE = __(
   'There was an error fetching data for the selected stage',
 );
 
-export const OVERVIEW_METRICS = {
-  TIME_SUMMARY: 'TIME_SUMMARY',
-  RECENT_ACTIVITY: 'RECENT_ACTIVITY',
-};
-
 export const SUMMARY_METRICS_REQUEST = [
   { endpoint: METRIC_TYPE_SUMMARY, name: __('recent activity'), request: getValueStreamMetrics },
 ];
diff --git a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_settings.vue b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_settings.vue
index 3c6114b38ce..257c3309e10 100644
--- a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_settings.vue
+++ b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_settings.vue
@@ -38,6 +38,10 @@ export default {
       required: false,
       default: 0,
     },
+    pageInfo: {
+      type: Object,
+      required: true,
+    },
     variables: {
       type: Array,
       required: true,
@@ -87,8 +91,12 @@ export default {
         :entity="entity"
         :is-loading="isLoading"
         :max-variable-limit="maxVariableLimit"
+        :page-info="pageInfo"
         :variables="variables"
+        @handle-prev-page="$emit('handle-prev-page')"
+        @handle-next-page="$emit('handle-next-page')"
         @set-selected-variable="setSelectedVariable"
+        @sort-changed="(val) => $emit('sort-changed', val)"
       />
       <ci-variable-modal
         v-if="showModal"
diff --git a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_shared.vue b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_shared.vue
index 6e39bda0b07..9c3580a95fe 100644
--- a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_shared.vue
+++ b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_shared.vue
@@ -1,10 +1,12 @@
 <script>
 import { createAlert } from '~/flash';
 import { __ } from '~/locale';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { mapEnvironmentNames, reportMessageToSentry } from '../utils';
 import {
   ADD_MUTATION_ACTION,
   DELETE_MUTATION_ACTION,
+  SORT_DIRECTIONS,
   UPDATE_MUTATION_ACTION,
   environmentFetchErrorText,
   genericMutationErrorText,
@@ -16,6 +18,7 @@ export default {
   components: {
     CiVariableSettings,
   },
+  mixins: [glFeatureFlagsMixin()],
   inject: ['endpoint'],
   props: {
     areScopedVariablesAvailable: {
@@ -97,6 +100,7 @@ export default {
       loadingCounter: 0,
       maxVariableLimit: 0,
       pageInfo: {},
+      sortDirection: SORT_DIRECTIONS.ASC,
     };
   },
   apollo: {
@@ -107,6 +111,8 @@ export default {
       variables() {
         return {
           fullPath: this.fullPath || undefined,
+          first: this.pageSize,
+          sort: this.sortDirection,
         };
       },
       update(data) {
@@ -116,21 +122,23 @@ export default {
         this.maxVariableLimit = this.queryData.ciVariables.lookup(data)?.limit || 0;
 
         this.pageInfo = this.queryData.ciVariables.lookup(data)?.pageInfo || this.pageInfo;
-        this.hasNextPage = this.pageInfo?.hasNextPage || false;
 
-        // Because graphQL has a limit of 100 items,
-        // we batch load all the variables by making successive queries
-        // to keep the same UX. As a safeguard, we make sure that we cannot go over
-        // 20 consecutive API calls, which means 2000 variables loaded maximum.
-        if (!this.hasNextPage) {
-          this.isLoadingMoreItems = false;
-        } else if (this.loadingCounter < 20) {
-          this.hasNextPage = false;
-          this.fetchMoreVariables();
-          this.loadingCounter += 1;
-        } else {
-          createAlert({ message: this.$options.tooManyCallsError });
-          reportMessageToSentry(this.componentName, this.$options.tooManyCallsError, {});
+        if (!this.glFeatures?.ciVariablesPages) {
+          this.hasNextPage = this.pageInfo?.hasNextPage || false;
+          // Because graphQL has a limit of 100 items,
+          // we batch load all the variables by making successive queries
+          // to keep the same UX. As a safeguard, we make sure that we cannot go over
+          // 20 consecutive API calls, which means 2000 variables loaded maximum.
+          if (!this.hasNextPage) {
+            this.isLoadingMoreItems = false;
+          } else if (this.loadingCounter < 20) {
+            this.hasNextPage = false;
+            this.fetchMoreVariables();
+            this.loadingCounter += 1;
+          } else {
+            createAlert({ message: this.$options.tooManyCallsError });
+            reportMessageToSentry(this.componentName, this.$options.tooManyCallsError, {});
+          }
         }
       },
       error() {
@@ -172,6 +180,9 @@ export default {
         this.isLoadingMoreItems
       );
     },
+    pageSize() {
+      return this.glFeatures?.ciVariablesPages ? 20 : 100;
+    },
   },
   methods: {
     addVariable(variable) {
@@ -189,6 +200,31 @@ export default {
         },
       });
     },
+    handlePrevPage() {
+      this.$apollo.queries.ciVariables.fetchMore({
+        variables: {
+          before: this.pageInfo.startCursor,
+          first: null,
+          last: this.pageSize,
+        },
+      });
+    },
+    handleNextPage() {
+      this.$apollo.queries.ciVariables.fetchMore({
+        variables: {
+          after: this.pageInfo.endCursor,
+          first: this.pageSize,
+          last: null,
+        },
+      });
+    },
+    async handleSortChanged({ sortDesc }) {
+      this.sortDirection = sortDesc ? SORT_DIRECTIONS.DESC : SORT_DIRECTIONS.ASC;
+
+      // Wait for the new sort direction to be updated and then refetch
+      await this.$nextTick();
+      this.$apollo.queries.ciVariables.refetch();
+    },
     updateVariable(variable) {
       this.variableMutation(UPDATE_MUTATION_ACTION, variable);
     },
@@ -230,13 +266,17 @@ export default {
   <ci-variable-settings
     :are-scoped-variables-available="areScopedVariablesAvailable"
     :entity="entity"
+    :environments="environments"
     :hide-environment-scope="hideEnvironmentScope"
     :is-loading="isLoading"
-    :variables="ciVariables"
     :max-variable-limit="maxVariableLimit"
-    :environments="environments"
+    :page-info="pageInfo"
+    :variables="ciVariables"
     @add-variable="addVariable"
     @delete-variable="deleteVariable"
+    @handle-prev-page="handlePrevPage"
+    @handle-next-page="handleNextPage"
+    @sort-changed="handleSortChanged"
     @update-variable="updateVariable"
   />
 </template>
diff --git a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue
index 345a8def49d..5e367ff33b2 100644
--- a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue
+++ b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue
@@ -4,6 +4,7 @@ import {
   GlButton,
   GlLoadingIcon,
   GlModalDirective,
+  GlKeysetPagination,
   GlTable,
   GlTooltipDirective,
 } from '@gitlab/ui';
@@ -56,6 +57,7 @@ export default {
   components: {
     GlAlert,
     GlButton,
+    GlKeysetPagination,
     GlLoadingIcon,
     GlTable,
   },
@@ -78,6 +80,10 @@ export default {
       type: Number,
       required: true,
     },
+    pageInfo: {
+      type: Object,
+      required: true,
+    },
     variables: {
       type: Array,
       required: true,
@@ -165,6 +171,28 @@ export default {
     >
       {{ exceedsVariableLimitText }}
     </gl-alert>
+    <div
+      v-if="glFeatures.ciVariablesPages"
+      class="ci-variable-actions gl-display-flex gl-justify-content-end gl-my-3"
+    >
+      <gl-button
+        v-if="!isTableEmpty"
+        data-qa-selector="reveal_ci_variable_value_button"
+        @click="toggleHiddenState"
+        >{{ valuesButtonText }}</gl-button
+      >
+      <gl-button
+        v-gl-modal-directive="$options.modalId"
+        class="gl-mx-3"
+        data-qa-selector="add_ci_variable_button"
+        variant="confirm"
+        category="primary"
+        :aria-label="__('Add')"
+        :disabled="exceedsVariableLimit"
+        @click="setSelectedVariable()"
+        >{{ __('Add variable') }}</gl-button
+      >
+    </div>
     <gl-table
       v-if="!isLoading"
       :fields="fields"
@@ -174,11 +202,13 @@ export default {
       sort-by="key"
       sort-direction="asc"
       stacked="lg"
-      table-class="text-secondary"
+      table-class="gl-border-t"
       fixed
       show-empty
       sort-icon-left
       no-sort-reset
+      no-local-sorting
+      @sort-changed="(val) => $emit('sort-changed', val)"
     >
       <template #table-colgroup="scope">
         <col v-for="field in scope.fields" :key="field.key" :style="field.customStyle" />
@@ -275,7 +305,7 @@ export default {
     >
       {{ exceedsVariableLimitText }}
     </gl-alert>
-    <div class="ci-variable-actions gl-display-flex gl-mt-5">
+    <div v-if="!glFeatures.ciVariablesPages" class="ci-variable-actions gl-display-flex gl-mt-5">
       <gl-button
         v-gl-modal-directive="$options.modalId"
         class="gl-mr-3"
@@ -294,5 +324,14 @@ export default {
         >{{ valuesButtonText }}</gl-button
       >
     </div>
+    <div v-else class="gl-display-flex gl-justify-content-center gl-mt-6">
+      <gl-keyset-pagination
+        v-bind="pageInfo"
+        :prev-text="__('Previous')"
+        :next-text="__('Next')"
+        @prev="$emit('handle-prev-page')"
+        @next="$emit('handle-next-page')"
+      />
+    </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/ci/ci_variable_list/constants.js b/app/assets/javascripts/ci/ci_variable_list/constants.js
index 627ace1b28e..c77d8c67bc8 100644
--- a/app/assets/javascripts/ci/ci_variable_list/constants.js
+++ b/app/assets/javascripts/ci/ci_variable_list/constants.js
@@ -2,6 +2,11 @@ import { __, s__ } from '~/locale';
 
 export const ADD_CI_VARIABLE_MODAL_ID = 'add-ci-variable';
 
+export const SORT_DIRECTIONS = {
+  ASC: 'KEY_ASC',
+  DESC: 'KEY_DESC',
+};
+
 // This const will be deprecated once we remove VueX from the section
 export const displayText = {
   variableText: __('Variable'),
diff --git a/app/assets/javascripts/ci/ci_variable_list/graphql/queries/group_variables.query.graphql b/app/assets/javascripts/ci/ci_variable_list/graphql/queries/group_variables.query.graphql
index 538502fdd3b..4a64a24573e 100644
--- a/app/assets/javascripts/ci/ci_variable_list/graphql/queries/group_variables.query.graphql
+++ b/app/assets/javascripts/ci/ci_variable_list/graphql/queries/group_variables.query.graphql
@@ -1,10 +1,17 @@
 #import "~/ci/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql"
 #import "~/graphql_shared/fragments/page_info.fragment.graphql"
 
-query getGroupVariables($after: String, $first: Int = 100, $fullPath: ID!) {
+query getGroupVariables(
+  $after: String
+  $before: String
+  $first: Int
+  $fullPath: ID!
+  $last: Int
+  $sort: CiVariableSort = KEY_ASC
+) {
   group(fullPath: $fullPath) {
     id
-    ciVariables(after: $after, first: $first) {
+    ciVariables(after: $after, before: $before, first: $first, last: $last, sort: $sort) {
       limit
       pageInfo {
         ...PageInfo
diff --git a/app/assets/javascripts/ci/ci_variable_list/graphql/queries/project_variables.query.graphql b/app/assets/javascripts/ci/ci_variable_list/graphql/queries/project_variables.query.graphql
index af0cd2d0b2c..03a7142080b 100644
--- a/app/assets/javascripts/ci/ci_variable_list/graphql/queries/project_variables.query.graphql
+++ b/app/assets/javascripts/ci/ci_variable_list/graphql/queries/project_variables.query.graphql
@@ -1,10 +1,17 @@
 #import "~/ci/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql"
 #import "~/graphql_shared/fragments/page_info.fragment.graphql"
 
-query getProjectVariables($after: String, $first: Int = 100, $fullPath: ID!) {
+query getProjectVariables(
+  $after: String
+  $before: String
+  $first: Int
+  $fullPath: ID!
+  $last: Int
+  $sort: CiVariableSort = KEY_ASC
+) {
   project(fullPath: $fullPath) {
     id
-    ciVariables(after: $after, first: $first) {
+    ciVariables(after: $after, before: $before, first: $first, last: $last, sort: $sort) {
       limit
       pageInfo {
         ...PageInfo
diff --git a/app/assets/javascripts/ci/ci_variable_list/graphql/queries/variables.query.graphql b/app/assets/javascripts/ci/ci_variable_list/graphql/queries/variables.query.graphql
index b8dd6f5f562..adf539a44ae 100644
--- a/app/assets/javascripts/ci/ci_variable_list/graphql/queries/variables.query.graphql
+++ b/app/assets/javascripts/ci/ci_variable_list/graphql/queries/variables.query.graphql
@@ -1,8 +1,14 @@
 #import "~/ci/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql"
 #import "~/graphql_shared/fragments/page_info.fragment.graphql"
 
-query getVariables($after: String, $first: Int = 100) {
-  ciVariables(after: $after, first: $first) {
+query getVariables(
+  $after: String
+  $before: String
+  $first: Int
+  $last: Int
+  $sort: CiVariableSort = KEY_ASC
+) {
+  ciVariables(after: $after, before: $before, first: $first, last: $last, sort: $sort) {
     pageInfo {
       ...PageInfo
     }
diff --git a/app/assets/javascripts/ci/ci_variable_list/graphql/settings.js b/app/assets/javascripts/ci/ci_variable_list/graphql/settings.js
index cafe3df35d0..7ed0418d5f4 100644
--- a/app/assets/javascripts/ci/ci_variable_list/graphql/settings.js
+++ b/app/assets/javascripts/ci/ci_variable_list/graphql/settings.js
@@ -205,33 +205,40 @@ export const mergeVariables = (existing, incoming, { args }) => {
   return result;
 };
 
-export const cacheConfig = {
-  cacheConfig: {
-    typePolicies: {
-      Query: {
-        fields: {
-          ciVariables: {
-            keyArgs: false,
-            merge: mergeVariables,
+export const mergeOnlyIncomings = (_, incoming) => {
+  return incoming;
+};
+
+export const generateCacheConfig = (isVariablePagesEnabled = false) => {
+  const merge = isVariablePagesEnabled ? mergeOnlyIncomings : mergeVariables;
+  return {
+    cacheConfig: {
+      typePolicies: {
+        Query: {
+          fields: {
+            ciVariables: {
+              keyArgs: false,
+              merge,
+            },
           },
         },
-      },
-      Project: {
-        fields: {
-          ciVariables: {
-            keyArgs: ['fullPath', 'endpoint', 'id'],
-            merge: mergeVariables,
+        Project: {
+          fields: {
+            ciVariables: {
+              keyArgs: ['fullPath'],
+              merge,
+            },
           },
         },
-      },
-      Group: {
-        fields: {
-          ciVariables: {
-            keyArgs: ['fullPath'],
-            merge: mergeVariables,
+        Group: {
+          fields: {
+            ciVariables: {
+              keyArgs: ['fullPath'],
+              merge,
+            },
           },
         },
       },
     },
-  },
+  };
 };
diff --git a/app/assets/javascripts/ci/ci_variable_list/index.js b/app/assets/javascripts/ci/ci_variable_list/index.js
index 4270c3c67fc..3ed56201f0d 100644
--- a/app/assets/javascripts/ci/ci_variable_list/index.js
+++ b/app/assets/javascripts/ci/ci_variable_list/index.js
@@ -5,7 +5,7 @@ import { parseBoolean } from '~/lib/utils/common_utils';
 import CiAdminVariables from './components/ci_admin_variables.vue';
 import CiGroupVariables from './components/ci_group_variables.vue';
 import CiProjectVariables from './components/ci_project_variables.vue';
-import { cacheConfig, resolvers } from './graphql/settings';
+import { generateCacheConfig, resolvers } from './graphql/settings';
 
 const mountCiVariableListApp = (containerEl) => {
   const {
@@ -42,8 +42,13 @@ const mountCiVariableListApp = (containerEl) => {
 
   Vue.use(VueApollo);
 
+  // If the feature flag `ci_variables_pages` is enabled,
+  // we are using the default cache config with pages.
   const apolloProvider = new VueApollo({
-    defaultClient: createDefaultClient(resolvers, cacheConfig),
+    defaultClient: createDefaultClient(
+      resolvers,
+      generateCacheConfig(window.gon?.features?.ciVariablesPages),
+    ),
   });
 
   return new Vue({
diff --git a/app/assets/javascripts/ci/reports/constants.js b/app/assets/javascripts/ci/reports/constants.js
index bad6fa1e7b9..1137236d355 100644
--- a/app/assets/javascripts/ci/reports/constants.js
+++ b/app/assets/javascripts/ci/reports/constants.js
@@ -1,10 +1,3 @@
-export const fieldTypes = {
-  codeBlock: 'codeBlock',
-  link: 'link',
-  seconds: 'seconds',
-  text: 'text',
-};
-
 export const LOADING = 'LOADING';
 export const ERROR = 'ERROR';
 export const SUCCESS = 'SUCCESS';
@@ -15,10 +8,6 @@ export const STATUS_NEUTRAL = 'neutral';
 export const STATUS_NOT_FOUND = 'not_found';
 
 export const ICON_WARNING = 'warning';
-export const ICON_SUCCESS = 'success';
-export const ICON_NOTFOUND = 'notfound';
-export const ICON_PENDING = 'pending';
-export const ICON_FAILED = 'failed';
 
 export const status = {
   LOADING,
@@ -26,9 +15,6 @@ export const status = {
   SUCCESS,
 };
 
-export const ACCESSIBILITY_ISSUE_ERROR = 'error';
-export const ACCESSIBILITY_ISSUE_WARNING = 'warning';
-
 /**
  * Slot names for the ReportSection component, corresponding to the success,
  * loading and error statuses.
diff --git a/app/assets/javascripts/ci/runner/constants.js b/app/assets/javascripts/ci/runner/constants.js
index 1db4ff68872..054e6b954d0 100644
--- a/app/assets/javascripts/ci/runner/constants.js
+++ b/app/assets/javascripts/ci/runner/constants.js
@@ -105,7 +105,6 @@ export const I18N_JOBS = s__('Runners|Jobs');
 export const I18N_ASSIGNED_PROJECTS = s__('Runners|Assigned Projects (%{projectCount})');
 export const I18N_FILTER_PROJECTS = s__('Runners|Filter projects');
 export const I18N_CLEAR_FILTER_PROJECTS = __('Clear');
-export const I18N_NONE = __('None');
 export const I18N_NO_JOBS_FOUND = s__('Runners|This runner has not run any jobs.');
 export const I18N_NO_PROJECTS_FOUND = __('No projects found');
 
diff --git a/app/assets/javascripts/clusters/constants.js b/app/assets/javascripts/clusters/constants.js
deleted file mode 100644
index c6ca895778d..00000000000
--- a/app/assets/javascripts/clusters/constants.js
+++ /dev/null
@@ -1,16 +0,0 @@
-// These need to match the enum found in app/models/clusters/cluster.rb
-export const CLUSTER_TYPE = {
-  INSTANCE: 'instance_type',
-  GROUP: 'group_type',
-  PROJECT: 'project_type',
-};
-
-// These need to match the available providers in app/models/clusters/providers/
-export const PROVIDER_TYPE = {
-  GCP: 'gcp',
-};
-
-// These are only used client-side
-
-export const LOGGING_MODE = 'logging';
-export const BLOCKING_MODE = 'blocking';
diff --git a/app/assets/javascripts/diffs/constants.js b/app/assets/javascripts/diffs/constants.js
index 6c0c9c4e1d0..873c4819669 100644
--- a/app/assets/javascripts/diffs/constants.js
+++ b/app/assets/javascripts/diffs/constants.js
@@ -6,10 +6,8 @@ export const OLD_NO_NEW_LINE_TYPE = 'old-nonewline';
 export const NEW_NO_NEW_LINE_TYPE = 'new-nonewline';
 export const CONTEXT_LINE_TYPE = 'context';
 export const EMPTY_CELL_TYPE = 'empty-cell';
-export const COMMENT_FORM_TYPE = 'commentForm';
 export const DIFF_NOTE_TYPE = 'DiffNote';
 export const LEGACY_DIFF_NOTE_TYPE = 'LegacyDiffNote';
-export const NOTE_TYPE = 'Note';
 export const NEW_LINE_TYPE = 'new';
 export const OLD_LINE_TYPE = 'old';
 export const TEXT_DIFF_POSITION_TYPE = 'text';
@@ -17,14 +15,10 @@ export const IMAGE_DIFF_POSITION_TYPE = 'image';
 
 export const LINE_POSITION_LEFT = 'left';
 export const LINE_POSITION_RIGHT = 'right';
-export const LINE_SIDE_LEFT = 'left-side';
-export const LINE_SIDE_RIGHT = 'right-side';
 
 export const DIFF_VIEW_COOKIE_NAME = 'diff_view';
 export const DIFF_WHITESPACE_COOKIE_NAME = 'diff_whitespace';
 export const LINE_HOVER_CLASS_NAME = 'is-over';
-export const LINE_UNFOLD_CLASS_NAME = 'unfold js-unfold';
-export const CONTEXT_LINE_CLASS_NAME = 'diff-expanded';
 
 export const UNFOLD_COUNT = 20;
 export const COUNT_OF_AVATARS_IN_GUTTER = 3;
@@ -46,14 +40,12 @@ export const TREE_HIDE_STATS_WIDTH = 260;
 export const OLD_LINE_KEY = 'old_line';
 export const NEW_LINE_KEY = 'new_line';
 export const TYPE_KEY = 'type';
-export const LEFT_LINE_KEY = 'left';
 
 export const MAX_RENDERING_DIFF_LINES = 500;
 export const MAX_RENDERING_BULK_ROWS = 30;
 export const MIN_RENDERING_MS = 2;
 export const START_RENDERING_INDEX = 200;
 export const INLINE_DIFF_LINES_KEY = 'highlighted_diff_lines';
-export const PARALLEL_DIFF_LINES_KEY = 'parallel_diff_lines';
 
 export const DIFF_COMPARE_BASE_VERSION_INDEX = -1;
 export const DIFF_COMPARE_HEAD_VERSION_INDEX = -2;
diff --git a/app/assets/javascripts/editor/constants.js b/app/assets/javascripts/editor/constants.js
index 2a47eef148e..df5571d0872 100644
--- a/app/assets/javascripts/editor/constants.js
+++ b/app/assets/javascripts/editor/constants.js
@@ -21,9 +21,6 @@ export const EDITOR_TOOLBAR_RIGHT_GROUP = 'right';
 export const SOURCE_EDITOR_INSTANCE_ERROR_NO_EL = s__(
   'SourceEditor|"el" parameter is required for createInstance()',
 );
-export const ERROR_INSTANCE_REQUIRED_FOR_EXTENSION = s__(
-  'SourceEditor|Source Editor instance is required to set up an extension.',
-);
 export const EDITOR_EXTENSION_DEFINITION_ERROR = s__(
   'SourceEditor|Extension definition should be either a class or a function',
 );
diff --git a/app/assets/javascripts/feature_flags/constants.js b/app/assets/javascripts/feature_flags/constants.js
index f697f203cf5..1993ec7abf2 100644
--- a/app/assets/javascripts/feature_flags/constants.js
+++ b/app/assets/javascripts/feature_flags/constants.js
@@ -1,4 +1,3 @@
-import { property } from 'lodash';
 import { s__ } from '~/locale';
 
 export const ROLLOUT_STRATEGY_ALL_USERS = 'default';
@@ -9,15 +8,8 @@ export const ROLLOUT_STRATEGY_GITLAB_USER_LIST = 'gitlabUserList';
 
 export const PERCENT_ROLLOUT_GROUP_ID = 'default';
 
-export const DEFAULT_PERCENT_ROLLOUT = '100';
-
 export const ALL_ENVIRONMENTS_NAME = '*';
 
-export const INTERNAL_ID_PREFIX = 'internal_';
-
-export const fetchPercentageParams = property(['parameters', 'percentage']);
-export const fetchUserIdParams = property(['parameters', 'userIds']);
-
 export const NEW_VERSION_FLAG = 'new_version_flag';
 export const LEGACY_FLAG = 'legacy_flag';
 
diff --git a/app/assets/javascripts/groups/constants.js b/app/assets/javascripts/groups/constants.js
index 6fb12cd6270..6f5b03788a8 100644
--- a/app/assets/javascripts/groups/constants.js
+++ b/app/assets/javascripts/groups/constants.js
@@ -12,7 +12,6 @@ export const ACTIVE_TAB_SHARED = 'shared';
 export const ACTIVE_TAB_ARCHIVED = 'archived';
 
 export const GROUPS_LIST_HOLDER_CLASS = '.js-groups-list-holder';
-export const GROUPS_FILTER_FORM_CLASS = '.js-group-filter-form';
 export const CONTENT_LIST_CLASS = '.groups-list';
 
 export const COMMON_STR = {
diff --git a/app/assets/javascripts/header_search/constants.js b/app/assets/javascripts/header_search/constants.js
index 65e113e5084..76fbf664913 100644
--- a/app/assets/javascripts/header_search/constants.js
+++ b/app/assets/javascripts/header_search/constants.js
@@ -12,10 +12,6 @@ export const MSG_MR_IVE_CREATED = s__("GlobalSearch|Merge requests I've created"
 
 export const MSG_IN_ALL_GITLAB = s__('GlobalSearch|all GitLab');
 
-export const MSG_IN_GROUP = s__('GlobalSearch|group');
-
-export const MSG_IN_PROJECT = s__('GlobalSearch|project');
-
 export const ICON_PROJECT = 'project';
 
 export const ICON_GROUP = 'group';
diff --git a/app/assets/javascripts/invite_members/constants.js b/app/assets/javascripts/invite_members/constants.js
index 0e0734159bf..34b4e436392 100644
--- a/app/assets/javascripts/invite_members/constants.js
+++ b/app/assets/javascripts/invite_members/constants.js
@@ -79,7 +79,6 @@ export const READ_MORE_TEXT = s__(
 export const INVITE_BUTTON_TEXT = s__('InviteMembersModal|Invite');
 export const INVITE_BUTTON_TEXT_DISABLED = s__('InviteMembersModal|Manage members');
 export const CANCEL_BUTTON_TEXT = s__('InviteMembersModal|Cancel');
-export const CANCEL_BUTTON_TEXT_DISABLED = s__('InviteMembersModal|Explore paid plans');
 export const HEADER_CLOSE_LABEL = s__('InviteMembersModal|Close invite team members');
 export const MEMBER_ERROR_LIST_TEXT = s__(
   'InviteMembersModal|Review the invite errors and try again:',
diff --git a/app/assets/javascripts/issuable/components/status_box.vue b/app/assets/javascripts/issuable/components/status_box.vue
index 0c75e44443d..c27fa166b69 100644
--- a/app/assets/javascripts/issuable/components/status_box.vue
+++ b/app/assets/javascripts/issuable/components/status_box.vue
@@ -4,7 +4,7 @@ import Vue from 'vue';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { fetchPolicies } from '~/lib/graphql';
 import { __ } from '~/locale';
-import { IssuableType, TYPE_ISSUE } from '~/issues/constants';
+import { TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants';
 import { IssuableStates } from '~/vue_shared/issuable/list/constants';
 
 export const badgeState = Vue.observable({
@@ -76,7 +76,7 @@ export default {
       return [
         CLASSES[this.state],
         {
-          'gl-vertical-align-bottom': this.issuableType === IssuableType.MergeRequest,
+          'gl-vertical-align-bottom': this.issuableType === TYPE_MERGE_REQUEST,
         },
       ];
     },
@@ -84,7 +84,7 @@ export default {
       if (this.state === IssuableStates.Opened) {
         return 'success';
       } else if (this.state === IssuableStates.Closed) {
-        return this.issuableType === IssuableType.MergeRequest ? 'danger' : 'info';
+        return this.issuableType === TYPE_MERGE_REQUEST ? 'danger' : 'info';
       }
       return 'info';
     },
diff --git a/app/assets/javascripts/issues/constants.js b/app/assets/javascripts/issues/constants.js
index 52e012c1e6c..7a89ce6554a 100644
--- a/app/assets/javascripts/issues/constants.js
+++ b/app/assets/javascripts/issues/constants.js
@@ -9,6 +9,7 @@ export const TITLE_LENGTH_MAX = 255;
 export const TYPE_EPIC = 'epic';
 export const TYPE_INCIDENT = 'incident';
 export const TYPE_ISSUE = 'issue';
+export const TYPE_MERGE_REQUEST = 'merge_request';
 
 export const WORKSPACE_GROUP = 'group';
 export const WORKSPACE_PROJECT = 'project';
diff --git a/app/assets/javascripts/jobs/components/table/constants.js b/app/assets/javascripts/jobs/components/table/constants.js
index 41ce6e4d64d..1b572e60c58 100644
--- a/app/assets/javascripts/jobs/components/table/constants.js
+++ b/app/assets/javascripts/jobs/components/table/constants.js
@@ -1,7 +1,6 @@
 import { s__, __ } from '~/locale';
 
 /* Error constants */
-export const POST_FAILURE = 'post_failure';
 export const DEFAULT = 'default';
 export const RAW_TEXT_WARNING = s__(
   'Jobs|Raw text search is not currently supported for the jobs filtered search feature. Please use the available search tokens.',
diff --git a/app/assets/javascripts/members/constants.js b/app/assets/javascripts/members/constants.js
index 68c5831db62..8e5b88d362e 100644
--- a/app/assets/javascripts/members/constants.js
+++ b/app/assets/javascripts/members/constants.js
@@ -192,8 +192,6 @@ export const MEMBER_STATE_ACTIVE = 2;
 export const BADGE_LABELS_AWAITING_SIGNUP = __('Awaiting user signup');
 export const BADGE_LABELS_PENDING = __('Pending owner action');
 
-export const DAYS_TO_EXPIRE_SOON = 7;
-
 export const LEAVE_MODAL_ID = 'member-leave-modal';
 
 export const REMOVE_GROUP_LINK_MODAL_ID = 'remove-group-link-modal-id';
diff --git a/app/assets/javascripts/monitoring/constants.js b/app/assets/javascripts/monitoring/constants.js
index 1b506c6564b..faef4b01c27 100644
--- a/app/assets/javascripts/monitoring/constants.js
+++ b/app/assets/javascripts/monitoring/constants.js
@@ -226,12 +226,6 @@ export const OVERVIEW_DASHBOARD_PATH = 'config/prometheus/common_metrics.yml';
  */
 export const OUT_OF_THE_BOX_DASHBOARDS_PATH_PREFIX = 'config/prometheus/';
 
-export const OPERATORS = {
-  greaterThan: '>',
-  equalTo: '==',
-  lessThan: '<',
-};
-
 /**
  * Dashboard yml files support custom user-defined variables that
  * are rendered as input elements in the monitoring dashboard.
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/constants.js b/app/assets/javascripts/packages_and_registries/package_registry/constants.js
index b8875b5dc18..5f369bea4df 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/constants.js
+++ b/app/assets/javascripts/packages_and_registries/package_registry/constants.js
@@ -27,15 +27,7 @@ export const PACKAGE_TYPE_DEBIAN = 'DEBIAN';
 export const PACKAGE_TYPE_HELM = 'HELM';
 
 export const TRACKING_LABEL_CODE_INSTRUCTION = 'code_instruction';
-export const TRACKING_LABEL_CONAN_INSTALLATION = 'conan_installation';
 export const TRACKING_LABEL_MAVEN_INSTALLATION = 'maven_installation';
-export const TRACKING_LABEL_NPM_INSTALLATION = 'npm_installation';
-export const TRACKING_LABEL_NUGET_INSTALLATION = 'nuget_installation';
-export const TRACKING_LABEL_PYPI_INSTALLATION = 'pypi_installation';
-export const TRACKING_LABEL_COMPOSER_INSTALLATION = 'composer_installation';
-
-export const TRACKING_ACTION_INSTALLATION = 'installation';
-export const TRACKING_ACTION_REGISTRY_SETUP = 'registry_setup';
 
 export const TRACKING_ACTION_COPY_CONAN_COMMAND = 'copy_conan_command';
 export const TRACKING_ACTION_COPY_CONAN_SETUP_COMMAND = 'copy_conan_setup_command';
@@ -68,7 +60,6 @@ export const TRACKING_ACTION_COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND =
 
 export const TRACKING_LABEL_PACKAGE_ASSET = 'package_assets';
 
-export const TRACKING_ACTION_DOWNLOAD_PACKAGE_ASSET = 'download_package_asset';
 export const TRACKING_ACTION_EXPAND_PACKAGE_ASSET = 'expand_package_asset';
 export const TRACKING_ACTION_COPY_PACKAGE_ASSET_SHA = 'copy_package_asset_sha';
 
@@ -147,8 +138,6 @@ export const PACKAGE_REGISTRY_TITLE = __('Package Registry');
 
 export const PACKAGE_ERROR_STATUS = 'ERROR';
 export const PACKAGE_DEFAULT_STATUS = 'DEFAULT';
-export const PACKAGE_HIDDEN_STATUS = 'HIDDEN';
-export const PACKAGE_PROCESSING_STATUS = 'PROCESSING';
 
 export const NPM_PACKAGE_MANAGER = 'npm';
 export const YARN_PACKAGE_MANAGER = 'yarn';
diff --git a/app/assets/javascripts/packages_and_registries/settings/group/constants.js b/app/assets/javascripts/packages_and_registries/settings/group/constants.js
index c93cd7f7d78..b47759df35f 100644
--- a/app/assets/javascripts/packages_and_registries/settings/group/constants.js
+++ b/app/assets/javascripts/packages_and_registries/settings/group/constants.js
@@ -78,8 +78,4 @@ export const MAVEN_FORWARDING_FIELDS = {
 
 // Parameters
 
-export const PACKAGES_DOCS_PATH = helpPagePath('user/packages/index');
-export const MAVEN_DUPLICATES_ALLOWED = 'mavenDuplicatesAllowed';
-export const MAVEN_DUPLICATE_EXCEPTION_REGEX = 'mavenDuplicateExceptionRegex';
-
 export const DEPENDENCY_PROXY_DOCS_PATH = helpPagePath('user/packages/dependency_proxy/index');
diff --git a/app/assets/javascripts/pipelines/constants.js b/app/assets/javascripts/pipelines/constants.js
index 820501089ed..ca146ac1e87 100644
--- a/app/assets/javascripts/pipelines/constants.js
+++ b/app/assets/javascripts/pipelines/constants.js
@@ -1,7 +1,6 @@
 import { s__, __ } from '~/locale';
 
 export const CANCEL_REQUEST = 'CANCEL_REQUEST';
-export const LAYOUT_CHANGE_DELAY = 300;
 export const FILTER_PIPELINES_SEARCH_DELAY = 200;
 export const ANY_TRIGGER_AUTHOR = 'Any';
 export const SUPPORTED_FILTER_PARAMETERS = ['username', 'ref', 'status', 'source'];
@@ -35,8 +34,6 @@ export const RAW_TEXT_WARNING = s__(
 export const DEFAULT = 'default';
 export const DELETE_FAILURE = 'delete_pipeline_failure';
 export const DRAW_FAILURE = 'draw_failure';
-export const EMPTY_PIPELINE_DATA = 'empty_data';
-export const INVALID_CI_CONFIG = 'invalid_ci_config';
 export const LOAD_FAILURE = 'load_failure';
 export const PARSE_FAILURE = 'parse_failure';
 export const POST_FAILURE = 'post_failure';
diff --git a/app/assets/javascripts/protected_branches/constants.js b/app/assets/javascripts/protected_branches/constants.js
index ae5eaa8e622..b5d00cb7e82 100644
--- a/app/assets/javascripts/protected_branches/constants.js
+++ b/app/assets/javascripts/protected_branches/constants.js
@@ -9,12 +9,3 @@ export const LEVEL_TYPES = {
   GROUP: 'group',
   DEPLOY_KEY: 'deploy_key',
 };
-
-export const LEVEL_ID_PROP = {
-  ROLE: 'access_level',
-  USER: 'user_id',
-  GROUP: 'group_id',
-  DEPLOY_KEY: 'deploy_key_id',
-};
-
-export const ACCESS_LEVEL_NONE = 0;
diff --git a/app/assets/javascripts/security_configuration/components/constants.js b/app/assets/javascripts/security_configuration/components/constants.js
index 7b0ade09dff..6beb6cd4d34 100644
--- a/app/assets/javascripts/security_configuration/components/constants.js
+++ b/app/assets/javascripts/security_configuration/components/constants.js
@@ -65,7 +65,6 @@ export const DAST_PROFILES_NAME = __('DAST profiles');
 export const DAST_PROFILES_DESCRIPTION = s__(
   'SecurityConfiguration|Manage profiles for use by DAST scans.',
 );
-export const DAST_PROFILES_HELP_PATH = helpPagePath('user/application_security/dast/index');
 export const DAST_PROFILES_CONFIG_TEXT = s__('SecurityConfiguration|Manage profiles');
 
 export const SECRET_DETECTION_NAME = __('Secret Detection');
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignee_avatar.vue b/app/assets/javascripts/sidebar/components/assignees/assignee_avatar.vue
index 323f6f23df6..d65c950b33a 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignee_avatar.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/assignee_avatar.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlIcon } from '@gitlab/ui';
-import { IssuableType, TYPE_ISSUE } from '~/issues/constants';
+import { TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants';
 import { __, sprintf } from '~/locale';
 
 export default {
@@ -32,7 +32,7 @@ export default {
       );
     },
     isMergeRequest() {
-      return this.issuableType === IssuableType.MergeRequest;
+      return this.issuableType === TYPE_MERGE_REQUEST;
     },
     hasMergeIcon() {
       const canMerge = this.user.mergeRequestInteraction?.canMerge || this.user.can_merge;
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignee_avatar_link.vue b/app/assets/javascripts/sidebar/components/assignees/assignee_avatar_link.vue
index 73cd0044c16..2c6eb0e5001 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignee_avatar_link.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/assignee_avatar_link.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlTooltipDirective, GlLink } from '@gitlab/ui';
-import { IssuableType, TYPE_ISSUE } from '~/issues/constants';
+import { TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants';
 import { isGid, getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { __ } from '~/locale';
 import { isUserBusy } from '~/set_status_modal/utils';
@@ -73,7 +73,7 @@ export default {
   },
   computed: {
     isMergeRequest() {
-      return this.issuableType === IssuableType.MergeRequest;
+      return this.issuableType === TYPE_MERGE_REQUEST;
     },
     cannotMerge() {
       const canMerge = this.user.mergeRequestInteraction?.canMerge || this.user.can_merge;
diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees_widget.vue b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees_widget.vue
index 8893e90b1e5..ef27dbd4692 100644
--- a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees_widget.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees_widget.vue
@@ -2,7 +2,7 @@
 import { GlDropdownItem } from '@gitlab/ui';
 import Vue from 'vue';
 import { createAlert } from '~/flash';
-import { IssuableType, TYPE_ISSUE } from '~/issues/constants';
+import { IssuableType, TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants';
 import { __, n__ } from '~/locale';
 import UserSelect from '~/vue_shared/components/user_select/user_select.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -60,7 +60,7 @@ export default {
       required: false,
       default: TYPE_ISSUE,
       validator(value) {
-        return [TYPE_ISSUE, IssuableType.MergeRequest, IssuableType.Alert].includes(value);
+        return [TYPE_ISSUE, TYPE_MERGE_REQUEST, IssuableType.Alert].includes(value);
       },
     },
     issuableId: {
diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_participant.vue b/app/assets/javascripts/sidebar/components/assignees/sidebar_participant.vue
index ddbd8866680..8b40b48b54a 100644
--- a/app/assets/javascripts/sidebar/components/assignees/sidebar_participant.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_participant.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlAvatarLabeled, GlIcon } from '@gitlab/ui';
-import { IssuableType, TYPE_ISSUE } from '~/issues/constants';
+import { TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants';
 import { s__, sprintf } from '~/locale';
 
 const AVAILABILITY_STATUS = {
@@ -39,7 +39,7 @@ export default {
       );
     },
     hasCannotMergeIcon() {
-      return this.issuableType === IssuableType.MergeRequest && !this.user.canMerge;
+      return this.issuableType === TYPE_MERGE_REQUEST && !this.user.canMerge;
     },
   },
 };
diff --git a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
index 71f349bb87e..b424d9074d0 100644
--- a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
@@ -1,6 +1,6 @@
 <script>
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { IssuableType, TYPE_ISSUE } from '~/issues/constants';
+import { TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants';
 import { __, sprintf } from '~/locale';
 import AssigneeAvatarLink from './assignee_avatar_link.vue';
 import UserNameWithStatus from './user_name_with_status.vue';
@@ -53,7 +53,7 @@ export default {
       return `@${this.firstUser.username}`;
     },
     isMergeRequest() {
-      return this.issuableType === IssuableType.MergeRequest;
+      return this.issuableType === TYPE_MERGE_REQUEST;
     },
   },
   methods: {
@@ -61,7 +61,7 @@ export default {
       this.showLess = !this.showLess;
     },
     userAvailability(u) {
-      if (this.issuableType === IssuableType.MergeRequest) {
+      if (this.issuableType === TYPE_MERGE_REQUEST) {
         return u?.availability || '';
       }
       return u?.status?.availability || '';
diff --git a/app/assets/javascripts/sidebar/components/labels/labels_select_widget/labels_select_root.vue b/app/assets/javascripts/sidebar/components/labels/labels_select_widget/labels_select_root.vue
index bf916e26a15..7d34cdcd908 100644
--- a/app/assets/javascripts/sidebar/components/labels/labels_select_widget/labels_select_root.vue
+++ b/app/assets/javascripts/sidebar/components/labels/labels_select_widget/labels_select_root.vue
@@ -4,7 +4,7 @@ import issuableLabelsSubscription from 'ee_else_ce/sidebar/queries/issuable_labe
 import { MutationOperationMode, getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { createAlert } from '~/flash';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { IssuableType, TYPE_EPIC, TYPE_ISSUE } from '~/issues/constants';
+import { IssuableType, TYPE_EPIC, TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants';
 
 import { __ } from '~/locale';
 import { issuableLabelsQueries } from '../../../constants';
@@ -264,7 +264,7 @@ export default {
         case TYPE_ISSUE:
         case IssuableType.TestCase:
           return updateVariables;
-        case IssuableType.MergeRequest:
+        case TYPE_MERGE_REQUEST:
           return {
             ...updateVariables,
             operationMode: MutationOperationMode.Replace,
@@ -324,7 +324,7 @@ export default {
             ...removeVariables,
             removeLabelIds: [labelId],
           };
-        case IssuableType.MergeRequest:
+        case TYPE_MERGE_REQUEST:
           return {
             ...removeVariables,
             labelIds: [labelId],
diff --git a/app/assets/javascripts/sidebar/components/milestone/milestone_dropdown.vue b/app/assets/javascripts/sidebar/components/milestone/milestone_dropdown.vue
index 69ed881a1e6..24afb25e403 100644
--- a/app/assets/javascripts/sidebar/components/milestone/milestone_dropdown.vue
+++ b/app/assets/javascripts/sidebar/components/milestone/milestone_dropdown.vue
@@ -2,7 +2,12 @@
 import { GlDropdownItem } from '@gitlab/ui';
 import { TYPENAME_MILESTONE } from '~/graphql_shared/constants';
 import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
-import { IssuableType, TYPE_ISSUE, WORKSPACE_GROUP, WORKSPACE_PROJECT } from '~/issues/constants';
+import {
+  TYPE_ISSUE,
+  TYPE_MERGE_REQUEST,
+  WORKSPACE_GROUP,
+  WORKSPACE_PROJECT,
+} from '~/issues/constants';
 import { __ } from '~/locale';
 import { IssuableAttributeType } from '../../constants';
 import SidebarDropdown from '../sidebar_dropdown.vue';
@@ -37,7 +42,7 @@ export default {
       type: String,
       required: true,
       validator(value) {
-        return [TYPE_ISSUE, IssuableType.MergeRequest].includes(value);
+        return [TYPE_ISSUE, TYPE_MERGE_REQUEST].includes(value);
       },
     },
     inputName: {
diff --git a/app/assets/javascripts/sidebar/components/sidebar_dropdown.vue b/app/assets/javascripts/sidebar/components/sidebar_dropdown.vue
index 6c0038aae1f..7068ba98966 100644
--- a/app/assets/javascripts/sidebar/components/sidebar_dropdown.vue
+++ b/app/assets/javascripts/sidebar/components/sidebar_dropdown.vue
@@ -9,9 +9,9 @@ import {
 } from '@gitlab/ui';
 import { kebabCase, snakeCase } from 'lodash';
 import {
-  IssuableType,
   TYPE_EPIC,
   TYPE_ISSUE,
+  TYPE_MERGE_REQUEST,
   WORKSPACE_GROUP,
   WORKSPACE_PROJECT,
 } from '~/issues/constants';
@@ -76,7 +76,7 @@ export default {
       type: String,
       required: true,
       validator(value) {
-        return [TYPE_ISSUE, IssuableType.MergeRequest].includes(value);
+        return [TYPE_ISSUE, TYPE_MERGE_REQUEST].includes(value);
       },
     },
     workspaceType: {
diff --git a/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue b/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue
index 5df65c4aaaf..660e7b98155 100644
--- a/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue
+++ b/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue
@@ -3,7 +3,7 @@ import { GlButton, GlIcon, GlLink, GlPopover, GlTooltipDirective } from '@gitlab
 import { kebabCase, snakeCase } from 'lodash';
 import { createAlert } from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import { IssuableType, TYPE_EPIC, TYPE_ISSUE } from '~/issues/constants';
+import { TYPE_EPIC, TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants';
 import { timeFor } from '~/lib/utils/datetime_utility';
 import { __ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -71,7 +71,7 @@ export default {
       type: String,
       required: true,
       validator(value) {
-        return [TYPE_ISSUE, IssuableType.MergeRequest].includes(value);
+        return [TYPE_ISSUE, TYPE_MERGE_REQUEST].includes(value);
       },
     },
     icon: {
diff --git a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue
index cbe839d1112..226785d859c 100644
--- a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue
+++ b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlDropdownForm, GlIcon, GlLoadingIcon, GlToggle, GlTooltipDirective } from '@gitlab/ui';
 import { createAlert } from '~/flash';
-import { IssuableType, TYPE_EPIC } from '~/issues/constants';
+import { TYPE_EPIC, TYPE_MERGE_REQUEST } from '~/issues/constants';
 import { isLoggedIn } from '~/lib/utils/common_utils';
 import { __, sprintf } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -87,7 +87,7 @@ export default {
   },
   computed: {
     isMergeRequest() {
-      return this.issuableType === IssuableType.MergeRequest && this.glFeatures.movedMrSidebar;
+      return this.issuableType === TYPE_MERGE_REQUEST && this.glFeatures.movedMrSidebar;
     },
     isLoading() {
       return this.$apollo.queries?.subscribed?.loading || this.loading;
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
index c645b1649d2..f6968558122 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
@@ -8,7 +8,7 @@ import {
   GlLoadingIcon,
   GlTooltipDirective,
 } from '@gitlab/ui';
-import { IssuableType, TYPE_ISSUE } from '~/issues/constants';
+import { TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants';
 import { BV_SHOW_MODAL } from '~/lib/utils/constants';
 import { s__, __ } from '~/locale';
 
@@ -173,7 +173,7 @@ export default {
       return Boolean(this.showHelp);
     },
     isTimeReportSupported() {
-      return [TYPE_ISSUE, IssuableType.MergeRequest].includes(this.issuableType) && this.issuableId;
+      return [TYPE_ISSUE, TYPE_MERGE_REQUEST].includes(this.issuableType) && this.issuableId;
     },
     timeTrackingIconTitle() {
       return this.showHelpState ? '' : HOW_TO_TRACK_TIME;
diff --git a/app/assets/javascripts/sidebar/constants.js b/app/assets/javascripts/sidebar/constants.js
index 499e58de19e..43f29157805 100644
--- a/app/assets/javascripts/sidebar/constants.js
+++ b/app/assets/javascripts/sidebar/constants.js
@@ -7,6 +7,7 @@ import {
   IssuableType,
   TYPE_EPIC,
   TYPE_ISSUE,
+  TYPE_MERGE_REQUEST,
   WORKSPACE_GROUP,
   WORKSPACE_PROJECT,
 } from '~/issues/constants';
@@ -75,7 +76,7 @@ export const assigneesQueries = {
     subscription: issuableAssigneesSubscription,
     mutation: updateIssueAssigneesMutation,
   },
-  [IssuableType.MergeRequest]: {
+  [TYPE_MERGE_REQUEST]: {
     query: getMergeRequestAssignees,
     mutation: updateMergeRequestAssigneesMutation,
   },
@@ -89,7 +90,7 @@ export const participantsQueries = {
   [TYPE_ISSUE]: {
     query: issueParticipantsQuery,
   },
-  [IssuableType.MergeRequest]: {
+  [TYPE_MERGE_REQUEST]: {
     query: getMergeRequestParticipants,
   },
   [TYPE_EPIC]: {
@@ -105,7 +106,7 @@ export const userSearchQueries = {
   [TYPE_ISSUE]: {
     query: userSearchQuery,
   },
-  [IssuableType.MergeRequest]: {
+  [TYPE_MERGE_REQUEST]: {
     query: userSearchWithMRPermissionsQuery,
   },
 };
@@ -125,7 +126,7 @@ export const referenceQueries = {
   [TYPE_ISSUE]: {
     query: issueReferenceQuery,
   },
-  [IssuableType.MergeRequest]: {
+  [TYPE_MERGE_REQUEST]: {
     query: mergeRequestReferenceQuery,
   },
   [TYPE_EPIC]: {
@@ -148,7 +149,7 @@ export const issuableLabelsQueries = {
     mutation: updateIssueLabelsMutation,
     mutationName: 'updateIssue',
   },
-  [IssuableType.MergeRequest]: {
+  [TYPE_MERGE_REQUEST]: {
     issuableQuery: mergeRequestLabelsQuery,
     mutation: updateMergeRequestLabelsMutation,
     mutationName: 'mergeRequestSetLabels',
@@ -192,7 +193,7 @@ export const subscribedQueries = {
     query: epicSubscribedQuery,
     mutation: updateEpicSubscriptionMutation,
   },
-  [IssuableType.MergeRequest]: {
+  [TYPE_MERGE_REQUEST]: {
     query: mergeRequestSubscribed,
     mutation: updateMergeRequestSubscriptionMutation,
   },
@@ -207,7 +208,7 @@ export const timeTrackingQueries = {
   [TYPE_ISSUE]: {
     query: issueTimeTrackingQuery,
   },
-  [IssuableType.MergeRequest]: {
+  [TYPE_MERGE_REQUEST]: {
     query: mergeRequestTimeTrackingQuery,
   },
 };
@@ -234,7 +235,7 @@ export const timelogQueries = {
   [TYPE_ISSUE]: {
     query: getIssueTimelogsQuery,
   },
-  [IssuableType.MergeRequest]: {
+  [TYPE_MERGE_REQUEST]: {
     query: getMrTimelogsQuery,
   },
 };
@@ -246,7 +247,7 @@ export const issuableMilestoneQueries = {
     query: projectIssueMilestoneQuery,
     mutation: projectIssueMilestoneMutation,
   },
-  [IssuableType.MergeRequest]: {
+  [TYPE_MERGE_REQUEST]: {
     query: mergeRequestMilestone,
     mutation: mergeRequestMilestoneMutation,
   },
@@ -259,7 +260,7 @@ export const milestonesQueries = {
       [WORKSPACE_PROJECT]: projectMilestonesQuery,
     },
   },
-  [IssuableType.MergeRequest]: {
+  [TYPE_MERGE_REQUEST]: {
     query: {
       [WORKSPACE_GROUP]: groupMilestonesQuery,
       [WORKSPACE_PROJECT]: projectMilestonesQuery,
@@ -295,7 +296,7 @@ export const todoQueries = {
   [TYPE_ISSUE]: {
     query: issueTodoQuery,
   },
-  [IssuableType.MergeRequest]: {
+  [TYPE_MERGE_REQUEST]: {
     query: mergeRequestTodoQuery,
   },
 };
diff --git a/app/assets/javascripts/sidebar/mount_sidebar.js b/app/assets/javascripts/sidebar/mount_sidebar.js
index fb024d818da..510b2fb9af9 100644
--- a/app/assets/javascripts/sidebar/mount_sidebar.js
+++ b/app/assets/javascripts/sidebar/mount_sidebar.js
@@ -4,7 +4,7 @@ import { TYPENAME_ISSUE, TYPENAME_MERGE_REQUEST } from '~/graphql_shared/constan
 import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
 import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
 import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger';
-import { IssuableType, TYPE_ISSUE } from '~/issues/constants';
+import { TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants';
 import { gqlClient } from '~/issues/list/graphql';
 import {
   isInDesignPage,
@@ -81,7 +81,7 @@ function mountSidebarTodoWidget() {
           issuableType:
             isInIssuePage() || isInIncidentPage() || isInDesignPage()
               ? TYPE_ISSUE
-              : IssuableType.MergeRequest,
+              : TYPE_MERGE_REQUEST,
         },
       }),
   });
@@ -125,7 +125,7 @@ function mountSidebarAssigneesDeprecated(mediator) {
           issuableType:
             isInIssuePage() || isInIncidentPage() || isInDesignPage()
               ? TYPE_ISSUE
-              : IssuableType.MergeRequest,
+              : TYPE_MERGE_REQUEST,
           issuableId: id,
           assigneeAvailabilityStatus,
         },
@@ -142,7 +142,7 @@ function mountSidebarAssigneesWidget() {
 
   const { id, iid, fullPath, editable } = getSidebarOptions();
   const isIssuablePage = isInIssuePage() || isInIncidentPage() || isInDesignPage();
-  const issuableType = isIssuablePage ? TYPE_ISSUE : IssuableType.MergeRequest;
+  const issuableType = isIssuablePage ? TYPE_ISSUE : TYPE_MERGE_REQUEST;
   // eslint-disable-next-line no-new
   new Vue({
     el,
@@ -204,8 +204,7 @@ function mountSidebarReviewers(mediator) {
           issuableIid: String(iid),
           projectPath: fullPath,
           field: el.dataset.field,
-          issuableType:
-            isInIssuePage() || isInDesignPage() ? TYPE_ISSUE : IssuableType.MergeRequest,
+          issuableType: isInIssuePage() || isInDesignPage() ? TYPE_ISSUE : TYPE_MERGE_REQUEST,
         },
       }),
   });
@@ -275,8 +274,7 @@ function mountSidebarMilestoneWidget() {
           attrWorkspacePath: projectPath,
           workspacePath: projectPath,
           iid: issueIid,
-          issuableType:
-            isInIssuePage() || isInDesignPage() ? TYPE_ISSUE : IssuableType.MergeRequest,
+          issuableType: isInIssuePage() || isInDesignPage() ? TYPE_ISSUE : TYPE_MERGE_REQUEST,
           issuableAttribute: IssuableAttributeType.Milestone,
           icon: 'clock',
         },
@@ -313,7 +311,7 @@ export function mountMilestoneDropdown() {
           attrWorkspacePath: fullPath,
           canAdminMilestone,
           inputName,
-          issuableType: isInIssuePage() ? TYPE_ISSUE : IssuableType.MergeRequest,
+          issuableType: isInIssuePage() ? TYPE_ISSUE : TYPE_MERGE_REQUEST,
           milestoneId,
           milestoneTitle,
           projectMilestonesPath,
@@ -358,7 +356,7 @@ export function mountSidebarLabelsWidget() {
           issuableType:
             isInIssuePage() || isInIncidentPage() || isInDesignPage()
               ? TYPE_ISSUE
-              : IssuableType.MergeRequest,
+              : TYPE_MERGE_REQUEST,
           workspaceType: 'project',
           attrWorkspacePath: el.dataset.projectPath,
           labelCreateType: LabelType.project,
@@ -398,7 +396,7 @@ function mountSidebarConfidentialityWidget() {
           issuableType:
             isInIssuePage() || isInIncidentPage() || isInDesignPage()
               ? TYPE_ISSUE
-              : IssuableType.MergeRequest,
+              : TYPE_MERGE_REQUEST,
         },
       }),
   });
@@ -454,7 +452,7 @@ function mountSidebarReferenceWidget() {
           issuableType:
             isInIssuePage() || isInIncidentPage() || isInDesignPage()
               ? TYPE_ISSUE
-              : IssuableType.MergeRequest,
+              : TYPE_MERGE_REQUEST,
         },
       }),
   });
@@ -506,7 +504,7 @@ function mountSidebarParticipantsWidget() {
           issuableType:
             isInIssuePage() || isInIncidentPage() || isInDesignPage()
               ? TYPE_ISSUE
-              : IssuableType.MergeRequest,
+              : TYPE_MERGE_REQUEST,
         },
       }),
   });
@@ -536,7 +534,7 @@ function mountSidebarSubscriptionsWidget() {
           issuableType:
             isInIssuePage() || isInIncidentPage() || isInDesignPage()
               ? TYPE_ISSUE
-              : IssuableType.MergeRequest,
+              : TYPE_MERGE_REQUEST,
         },
       }),
   });
diff --git a/app/assets/javascripts/usage_quotas/storage/constants.js b/app/assets/javascripts/usage_quotas/storage/constants.js
index fab18cefc60..bd8cd372ecf 100644
--- a/app/assets/javascripts/usage_quotas/storage/constants.js
+++ b/app/assets/javascripts/usage_quotas/storage/constants.js
@@ -26,7 +26,6 @@ export const uploadsPopoverContent = s__(
   'NamespaceStorage|Uploads are not counted in namespace storage quotas.',
 );
 
-export const PROJECT_TABLE_LABEL_PROJECT = __('Project');
 export const PROJECT_TABLE_LABEL_STORAGE_TYPE = s__('UsageQuota|Storage type');
 export const PROJECT_TABLE_LABEL_USAGE = s__('UsageQuota|Usage');
 
diff --git a/app/assets/javascripts/vue_merge_request_widget/constants.js b/app/assets/javascripts/vue_merge_request_widget/constants.js
index 85ae298fcea..dbfbd35b9b6 100644
--- a/app/assets/javascripts/vue_merge_request_widget/constants.js
+++ b/app/assets/javascripts/vue_merge_request_widget/constants.js
@@ -163,9 +163,6 @@ export const EXTENSION_ICON_CLASS = {
   severityUnknown: 'gl-text-gray-400',
 };
 
-export const EXTENSION_SUMMARY_FAILED_CLASS = 'gl-text-red-500';
-export const EXTENSION_SUMMARY_NEUTRAL_CLASS = 'gl-text-gray-700';
-
 export const TELEMETRY_WIDGET_VIEWED = 'WIDGET_VIEWED';
 export const TELEMETRY_WIDGET_EXPANDED = 'WIDGET_EXPANDED';
 export const TELEMETRY_WIDGET_FULL_REPORT_CLICKED = 'WIDGET_FULL_REPORT_CLICKED';
diff --git a/app/assets/javascripts/vue_shared/components/pagination/constants.js b/app/assets/javascripts/vue_shared/components/pagination/constants.js
index 748ad178c70..f8a6d37dea1 100644
--- a/app/assets/javascripts/vue_shared/components/pagination/constants.js
+++ b/app/assets/javascripts/vue_shared/components/pagination/constants.js
@@ -1,8 +1,5 @@
 import { s__ } from '~/locale';
 
-export const PAGINATION_UI_BUTTON_LIMIT = 4;
-export const UI_LIMIT = 6;
-export const SPREAD = '...';
 export const PREV = s__('Pagination|Prev');
 export const NEXT = s__('Pagination|Next');
 export const FIRST = s__('Pagination|« First');
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/constants.js b/app/assets/javascripts/vue_shared/components/source_viewer/constants.js
index 15335ea6edc..514b626ed95 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/constants.js
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/constants.js
@@ -141,8 +141,6 @@ export const BIDI_CHARS_CLASS_LIST = 'unicode-bidi has-tooltip';
 
 export const BIDI_CHAR_TOOLTIP = 'Potentially unwanted character detected: Unicode BiDi Control';
 
-export const HLJS_ON_AFTER_HIGHLIGHT = 'after:highlight';
-
 // We fallback to highlighting these languages with Rouge, see the following issue for more detail:
 // https://gitlab.com/gitlab-org/gitlab/-/issues/384375#note_1212752013
 export const LEGACY_FALLBACKS = ['python'];
diff --git a/app/assets/javascripts/vue_shared/components/user_select/user_select.vue b/app/assets/javascripts/vue_shared/components/user_select/user_select.vue
index edcfabe7da3..abd3575d020 100644
--- a/app/assets/javascripts/vue_shared/components/user_select/user_select.vue
+++ b/app/assets/javascripts/vue_shared/components/user_select/user_select.vue
@@ -11,7 +11,7 @@ import {
 } from '@gitlab/ui';
 import { __ } from '~/locale';
 import SidebarParticipant from '~/sidebar/components/assignees/sidebar_participant.vue';
-import { IssuableType, TYPE_ISSUE } from '~/issues/constants';
+import { TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import { participantsQueries, userSearchQueries } from '~/sidebar/constants';
 import { TYPENAME_MERGE_REQUEST } from '~/graphql_shared/constants';
@@ -149,7 +149,7 @@ export default {
   },
   computed: {
     isMergeRequest() {
-      return this.issuableType === IssuableType.MergeRequest;
+      return this.issuableType === TYPE_MERGE_REQUEST;
     },
     searchUsersVariables() {
       const variables = {
diff --git a/app/assets/javascripts/vue_shared/constants.js b/app/assets/javascripts/vue_shared/constants.js
index 1463f37171c..29a31503840 100644
--- a/app/assets/javascripts/vue_shared/constants.js
+++ b/app/assets/javascripts/vue_shared/constants.js
@@ -75,8 +75,6 @@ export const timeRanges = [
 /* eslint-enable @gitlab/require-i18n-strings */
 
 export const defaultTimeRange = timeRanges.find((tr) => tr.default);
-export const getTimeWindow = (timeWindowName) =>
-  timeRanges.find((tr) => tr.name === timeWindowName);
 
 export const AVATAR_SHAPE_OPTION_CIRCLE = 'circle';
 export const AVATAR_SHAPE_OPTION_RECT = 'rect';
diff --git a/app/controllers/admin/application_settings_controller.rb b/app/controllers/admin/application_settings_controller.rb
index 66b14657134..0bbfeae6656 100644
--- a/app/controllers/admin/application_settings_controller.rb
+++ b/app/controllers/admin/application_settings_controller.rb
@@ -13,6 +13,10 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
 
   before_action :disable_query_limiting, only: [:usage_data]
 
+  before_action do
+    push_frontend_feature_flag(:ci_variables_pages, current_user)
+  end
+
   feature_category :not_owned, [ # rubocop:todo Gitlab/AvoidFeatureCategoryNotOwned
     :general, :reporting, :metrics_and_profiling, :network,
     :preferences, :update, :reset_health_check_token
diff --git a/app/controllers/groups/settings/ci_cd_controller.rb b/app/controllers/groups/settings/ci_cd_controller.rb
index 78e3ffa4af9..4bbaf92b126 100644
--- a/app/controllers/groups/settings/ci_cd_controller.rb
+++ b/app/controllers/groups/settings/ci_cd_controller.rb
@@ -12,6 +12,11 @@ module Groups
       before_action :assign_variables_to_gon, only: [:show]
 
       feature_category :continuous_integration
+
+      before_action do
+        push_frontend_feature_flag(:ci_variables_pages, current_user)
+      end
+
       urgency :low
 
       def show
diff --git a/app/controllers/projects/settings/ci_cd_controller.rb b/app/controllers/projects/settings/ci_cd_controller.rb
index b330aacf3e9..f5588a35ad5 100644
--- a/app/controllers/projects/settings/ci_cd_controller.rb
+++ b/app/controllers/projects/settings/ci_cd_controller.rb
@@ -12,6 +12,10 @@ module Projects
       before_action :check_builds_available!
       before_action :define_variables
 
+      before_action do
+        push_frontend_feature_flag(:ci_variables_pages, current_user)
+      end
+
       helper_method :highlight_badge
 
       feature_category :continuous_integration
diff --git a/app/models/clusters/applications/crossplane.rb b/app/models/clusters/applications/crossplane.rb
deleted file mode 100644
index a7b4fb57149..00000000000
--- a/app/models/clusters/applications/crossplane.rb
+++ /dev/null
@@ -1,58 +0,0 @@
-# frozen_string_literal: true
-
-module Clusters
-  module Applications
-    # DEPRECATED for removal in %14.0
-    # See https://gitlab.com/groups/gitlab-org/-/epics/4280
-    class Crossplane < ApplicationRecord
-      VERSION = '0.4.1'
-
-      self.table_name = 'clusters_applications_crossplane'
-
-      include ::Clusters::Concerns::ApplicationCore
-      include ::Clusters::Concerns::ApplicationStatus
-      include ::Clusters::Concerns::ApplicationVersion
-      include ::Clusters::Concerns::ApplicationData
-
-      attribute :version, default: VERSION
-      attribute :stack, default: ""
-
-      validates :stack, presence: true
-
-      def chart
-        'crossplane/crossplane'
-      end
-
-      def repository
-        'https://charts.crossplane.io/alpha'
-      end
-
-      def install_command
-        helm_command_module::InstallCommand.new(
-          name: 'crossplane',
-          repository: repository,
-          version: VERSION,
-          rbac: cluster.platform_kubernetes_rbac?,
-          chart: chart,
-          files: files
-        )
-      end
-
-      def values
-        crossplane_values.to_yaml
-      end
-
-      private
-
-      def crossplane_values
-        {
-          "clusterStacks" => {
-             self.stack => {
-               "deploy" => true
-            }
-          }
-        }
-      end
-    end
-  end
-end
diff --git a/app/models/clusters/cluster.rb b/app/models/clusters/cluster.rb
index a35ea6ddb46..071759318c7 100644
--- a/app/models/clusters/cluster.rb
+++ b/app/models/clusters/cluster.rb
@@ -14,7 +14,6 @@ module Clusters
     APPLICATIONS = {
       Clusters::Applications::Helm.application_name => Clusters::Applications::Helm,
       Clusters::Applications::Ingress.application_name => Clusters::Applications::Ingress,
-      Clusters::Applications::Crossplane.application_name => Clusters::Applications::Crossplane,
       Clusters::Applications::Prometheus.application_name => Clusters::Applications::Prometheus,
       Clusters::Applications::Runner.application_name => Clusters::Applications::Runner,
       Clusters::Applications::Jupyter.application_name => Clusters::Applications::Jupyter,
@@ -56,7 +55,6 @@ module Clusters
 
     has_one_cluster_application :helm
     has_one_cluster_application :ingress
-    has_one_cluster_application :crossplane
     has_one_cluster_application :prometheus
     has_one_cluster_application :runner
     has_one_cluster_application :jupyter