Add latest changes from gitlab-org/gitlab@master

47 files changed, 211 insertions, 388 deletions

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 ebc0db6fad1..f11d2c5ea65 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
@@ -140,7 +140,7 @@ export default {
             this.loadingCounter += 1;
           } else {
             createAlert({ message: this.$options.tooManyCallsError });
-            reportMessageToSentry(this.componentName, this.$options.tooManyCallsError, {});
+            reportMessageToSentry(this.componentName, this.$options.tooManyCallsError);
           }
         }
       },
diff --git a/app/assets/javascripts/ci/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql b/app/assets/javascripts/ci/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql
index a28ca4eebc9..f243a1cb30b 100644
--- a/app/assets/javascripts/ci/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql
+++ b/app/assets/javascripts/ci/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql
@@ -1,5 +1,4 @@
 fragment BaseCiVariable on CiVariable {
-  __typename
   id
   key
   value
diff --git a/app/assets/javascripts/ci/common/pipelines_table.vue b/app/assets/javascripts/ci/common/pipelines_table.vue
index 8b9be593a8e..9aa12ae9764 100644
--- a/app/assets/javascripts/ci/common/pipelines_table.vue
+++ b/app/assets/javascripts/ci/common/pipelines_table.vue
@@ -3,15 +3,14 @@ import { GlTableLite, GlTooltipDirective } from '@gitlab/ui';
 import { cleanLeadingSeparator } from '~/lib/utils/url_utility';
 import { s__, __ } from '~/locale';
 import Tracking from '~/tracking';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { TRACKING_CATEGORIES } from '~/ci/constants';
+import { PIPELINE_ID_KEY, PIPELINE_IID_KEY, TRACKING_CATEGORIES } from '~/ci/constants';
 import { keepLatestDownstreamPipelines } from '~/ci/pipeline_details/utils/parsing_utils';
 import LegacyPipelineMiniGraph from '~/ci/pipeline_mini_graph/legacy_pipeline_mini_graph.vue';
 import PipelineFailedJobsWidget from '~/ci/pipelines_page/components/failure_widget/pipeline_failed_jobs_widget.vue';
 import PipelineOperations from '../pipelines_page/components/pipeline_operations.vue';
 import PipelineTriggerer from '../pipelines_page/components/pipeline_triggerer.vue';
 import PipelineUrl from '../pipelines_page/components/pipeline_url.vue';
-import PipelinesStatusBadge from '../pipelines_page/components/pipelines_status_badge.vue';
+import PipelineStatusBadge from '../pipelines_page/components/pipeline_status_badge.vue';
 
 const HIDE_TD_ON_MOBILE = 'gl-display-none! gl-lg-display-table-cell!';
 const DEFAULT_TH_CLASSES =
@@ -40,16 +39,16 @@ export default {
     LegacyPipelineMiniGraph,
     PipelineFailedJobsWidget,
     PipelineOperations,
-    PipelinesStatusBadge,
+    PipelineStatusBadge,
     PipelineTriggerer,
     PipelineUrl,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  mixins: [Tracking.mixin(), glFeatureFlagMixin()],
+  mixins: [Tracking.mixin()],
   inject: {
-    withFailedJobsDetails: {
+    useFailedJobsWidget: {
       default: false,
     },
   },
@@ -58,29 +57,21 @@ export default {
       type: Array,
       required: true,
     },
-    pipelineScheduleUrl: {
-      type: String,
-      required: false,
-      default: '',
-    },
     updateGraphDropdown: {
       type: Boolean,
       required: false,
       default: false,
     },
-    viewType: {
+    pipelineIdType: {
       type: String,
-      required: true,
-    },
-    pipelineKeyOption: {
-      type: Object,
-      required: true,
+      required: false,
+      default: PIPELINE_ID_KEY,
+      validator(value) {
+        return value === PIPELINE_IID_KEY || value === PIPELINE_ID_KEY;
+      },
     },
   },
   computed: {
-    showFailedJobsWidget() {
-      return this.glFeatures.ciJobFailuresInMr;
-    },
     tableFields() {
       return [
         {
@@ -125,10 +116,10 @@ export default {
       ];
     },
     tdClasses() {
-      return this.withFailedJobsDetails ? 'gl-pb-0! gl-border-none!' : 'pl-p-5!';
+      return this.useFailedJobsWidget ? 'gl-pb-0! gl-border-none!' : 'pl-p-5!';
     },
     pipelinesWithDetails() {
-      if (this.withFailedJobsDetails) {
+      if (this.useFailedJobsWidget) {
         return this.pipelines.map((p) => {
           return { ...p, _showDetails: true };
         });
@@ -187,14 +178,13 @@ export default {
       </template>
 
       <template #cell(status)="{ item }">
-        <pipelines-status-badge :pipeline="item" :view-type="viewType" />
+        <pipeline-status-badge :pipeline="item" />
       </template>
 
       <template #cell(pipeline)="{ item }">
         <pipeline-url
           :pipeline="item"
-          :pipeline-schedule-url="pipelineScheduleUrl"
-          :pipeline-key="pipelineKeyOption.value"
+          :pipeline-id-type="pipelineIdType"
           ref-color="gl-text-black-normal"
         />
       </template>
@@ -225,7 +215,7 @@ export default {
 
       <template #row-details="{ item }">
         <pipeline-failed-jobs-widget
-          v-if="showFailedJobsWidget"
+          v-if="useFailedJobsWidget"
           :failed-jobs-count="failedJobsCount(item)"
           :is-pipeline-active="item.active"
           :pipeline-iid="item.iid"
diff --git a/app/assets/javascripts/ci/constants.js b/app/assets/javascripts/ci/constants.js
index 93c2504dd5d..5b60528f521 100644
--- a/app/assets/javascripts/ci/constants.js
+++ b/app/assets/javascripts/ci/constants.js
@@ -24,19 +24,8 @@ export const SUCCESS_STATUS = 'SUCCESS';
 export const PASSED_STATUS = 'passed';
 export const MANUAL_STATUS = 'manual';
 
-// Constants for the ID and IID selection dropdown
-export const PipelineKeyOptions = [
-  {
-    text: __('Show Pipeline ID'),
-    label: __('Pipeline ID'),
-    value: 'id',
-  },
-  {
-    text: __('Show Pipeline IID'),
-    label: __('Pipeline IID'),
-    value: 'iid',
-  },
-];
+export const PIPELINE_ID_KEY = 'id';
+export const PIPELINE_IID_KEY = 'iid';
 
 export const RAW_TEXT_WARNING = s__(
   'Pipeline|Raw text search is not currently supported. Please use the available search tokens.',
diff --git a/app/assets/javascripts/ci/inherited_ci_variables/components/inherited_ci_variables_app.vue b/app/assets/javascripts/ci/inherited_ci_variables/components/inherited_ci_variables_app.vue
index f02d59af1d9..42ec18d50aa 100644
--- a/app/assets/javascripts/ci/inherited_ci_variables/components/inherited_ci_variables_app.vue
+++ b/app/assets/javascripts/ci/inherited_ci_variables/components/inherited_ci_variables_app.vue
@@ -51,7 +51,7 @@ export default {
           this.loadingCounter += 1;
         } else {
           createAlert({ message: this.$options.i18n.tooManyCallsError });
-          reportMessageToSentry(this.$options.name, this.$options.i18n.tooManyCallsError, {});
+          reportMessageToSentry(this.$options.name, this.$options.i18n.tooManyCallsError);
         }
       },
       error() {
diff --git a/app/assets/javascripts/ci/inherited_ci_variables/graphql/queries/inherited_ci_variables.query.graphql b/app/assets/javascripts/ci/inherited_ci_variables/graphql/queries/inherited_ci_variables.query.graphql
index b25768632e1..9fac461a47d 100644
--- a/app/assets/javascripts/ci/inherited_ci_variables/graphql/queries/inherited_ci_variables.query.graphql
+++ b/app/assets/javascripts/ci/inherited_ci_variables/graphql/queries/inherited_ci_variables.query.graphql
@@ -8,7 +8,6 @@ query getInheritedCiVariables($after: String, $first: Int, $fullPath: ID!) {
         ...PageInfo
       }
       nodes {
-        __typename
         id
         key
         variableType
diff --git a/app/assets/javascripts/ci/job_details/components/manual_variables_form.vue b/app/assets/javascripts/ci/job_details/components/manual_variables_form.vue
index 1232ffffb57..b9f0a277348 100644
--- a/app/assets/javascripts/ci/job_details/components/manual_variables_form.vue
+++ b/app/assets/javascripts/ci/job_details/components/manual_variables_form.vue
@@ -57,7 +57,7 @@ export default {
       },
       error(error) {
         createAlert({ message: JOB_GRAPHQL_ERRORS.jobQueryErrorText });
-        reportMessageToSentry(this.$options.name, error, {});
+        reportMessageToSentry(this.$options.name, error);
       },
     },
   },
@@ -141,7 +141,7 @@ export default {
         }
       } catch (error) {
         createAlert({ message: JOB_GRAPHQL_ERRORS.jobMutationErrorText });
-        reportMessageToSentry(this.$options.name, error, {});
+        reportMessageToSentry(this.$options.name, error);
       }
     },
     async retryJob() {
@@ -157,7 +157,7 @@ export default {
         }
       } catch (error) {
         createAlert({ message: JOB_GRAPHQL_ERRORS.jobMutationErrorText });
-        reportMessageToSentry(this.$options.name, error, {});
+        reportMessageToSentry(this.$options.name, error);
       }
     },
     addEmptyVariable() {
diff --git a/app/assets/javascripts/ci/job_details/graphql/fragments/ci_job.fragment.graphql b/app/assets/javascripts/ci/job_details/graphql/fragments/ci_job.fragment.graphql
index 7fb887b2dd4..3a27a9a62a3 100644
--- a/app/assets/javascripts/ci/job_details/graphql/fragments/ci_job.fragment.graphql
+++ b/app/assets/javascripts/ci/job_details/graphql/fragments/ci_job.fragment.graphql
@@ -7,5 +7,4 @@ fragment BaseCiJob on CiJob {
       ...ManualCiVariable
     }
   }
-  __typename
 }
diff --git a/app/assets/javascripts/ci/job_details/graphql/fragments/ci_variable.fragment.graphql b/app/assets/javascripts/ci/job_details/graphql/fragments/ci_variable.fragment.graphql
index 0479df7bc4c..e560a2f29b6 100644
--- a/app/assets/javascripts/ci/job_details/graphql/fragments/ci_variable.fragment.graphql
+++ b/app/assets/javascripts/ci/job_details/graphql/fragments/ci_variable.fragment.graphql
@@ -1,5 +1,4 @@
 fragment ManualCiVariable on CiVariable {
-  __typename
   id
   key
   value
diff --git a/app/assets/javascripts/ci/jobs_page/components/job_cells/actions_cell.vue b/app/assets/javascripts/ci/jobs_page/components/job_cells/actions_cell.vue
index 609f2790869..abdb1f7c436 100644
--- a/app/assets/javascripts/ci/jobs_page/components/job_cells/actions_cell.vue
+++ b/app/assets/javascripts/ci/jobs_page/components/job_cells/actions_cell.vue
@@ -133,7 +133,7 @@ export default {
           variables: { id: this.job.id },
         });
         if (errors.length > 0) {
-          reportMessageToSentry(this.$options.name, errors.join(', '), {});
+          reportMessageToSentry(this.$options.name, errors.join(', '));
           this.showToastMessage();
         } else if (redirect) {
           // Retry and Play actions redirect to job detail view
@@ -143,7 +143,7 @@ export default {
           eventHub.$emit('jobActionPerformed');
         }
       } catch (failure) {
-        reportMessageToSentry(this.$options.name, failure, {});
+        reportMessageToSentry(this.$options.name, failure);
         this.showToastMessage();
       }
     },
diff --git a/app/assets/javascripts/ci/pipeline_details/constants.js b/app/assets/javascripts/ci/pipeline_details/constants.js
index bf312e66144..70b758ae6b0 100644
--- a/app/assets/javascripts/ci/pipeline_details/constants.js
+++ b/app/assets/javascripts/ci/pipeline_details/constants.js
@@ -23,8 +23,6 @@ export const PARSE_FAILURE = 'parse_failure';
 export const POST_FAILURE = 'post_failure';
 export const UNSUPPORTED_DATA = 'unsupported_data';
 
-export const CHILD_VIEW = 'child';
-
 // Pipeline tabs
 
 export const pipelineTabName = 'graph';
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/graph_component_wrapper.vue b/app/assets/javascripts/ci/pipeline_details/graph/graph_component_wrapper.vue
index bd7325f7925..5ebdc838803 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/graph_component_wrapper.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/graph_component_wrapper.vue
@@ -159,13 +159,6 @@ export default {
         reportMessageToSentry(
           this.$options.name,
           `| type: ${LOAD_FAILURE} , info: ${JSON.stringify(err)}`,
-          {
-            graphViewType: this.graphViewType,
-            graphqlResourceEtag: this.graphqlResourceEtag,
-            metricsPath: this.metricsPath,
-            projectPath: this.pipelineProjectPath,
-            pipelineIid: this.pipelineIid,
-          },
         );
       },
       result({ data, error }) {
diff --git a/app/assets/javascripts/ci/pipeline_details/pipelines_index.js b/app/assets/javascripts/ci/pipeline_details/pipelines_index.js
index d38397e7479..8a7c3367fc1 100644
--- a/app/assets/javascripts/ci/pipeline_details/pipelines_index.js
+++ b/app/assets/javascripts/ci/pipeline_details/pipelines_index.js
@@ -31,10 +31,7 @@ export const initPipelinesIndex = (selector = '#pipelines-list-vue') => {
     endpoint,
     artifactsEndpoint,
     artifactsEndpointPlaceholder,
-    pipelineScheduleUrl,
-    emptyStateSvgPath,
-    errorStateSvgPath,
-    noPipelinesSvgPath,
+    pipelineSchedulesPath,
     newPipelinePath,
     pipelineEditorPath,
     suggestedCiTemplates,
@@ -55,13 +52,14 @@ export const initPipelinesIndex = (selector = '#pipelines-list-vue') => {
     el,
     apolloProvider,
     provide: {
-      pipelineEditorPath,
       artifactsEndpoint,
       artifactsEndpointPlaceholder,
-      suggestedCiTemplates: JSON.parse(suggestedCiTemplates),
-      iosRunnersAvailable: parseBoolean(iosRunnersAvailable),
       fullPath,
+      iosRunnersAvailable: parseBoolean(iosRunnersAvailable),
       manualActionsLimit: 50,
+      pipelineEditorPath,
+      pipelineSchedulesPath,
+      suggestedCiTemplates: JSON.parse(suggestedCiTemplates),
     },
     data() {
       return {
@@ -77,22 +75,18 @@ export const initPipelinesIndex = (selector = '#pipelines-list-vue') => {
     render(createElement) {
       return createElement(Pipelines, {
         props: {
-          store: this.store,
-          endpoint,
-          pipelineScheduleUrl,
-          emptyStateSvgPath,
-          errorStateSvgPath,
-          noPipelinesSvgPath,
-          newPipelinePath,
           canCreatePipeline: parseBoolean(canCreatePipeline),
-          hasGitlabCi: parseBoolean(hasGitlabCi),
           ciLintPath,
-          resetCachePath,
-          projectId,
           defaultBranchName,
+          defaultVisibilityPipelineIdType: visibilityPipelineIdType,
+          endpoint,
+          hasGitlabCi: parseBoolean(hasGitlabCi),
+          newPipelinePath,
           params: JSON.parse(params),
+          projectId,
           registrationToken,
-          defaultVisibilityPipelineIdType: visibilityPipelineIdType,
+          resetCachePath,
+          store: this.store,
         },
       });
     },
diff --git a/app/assets/javascripts/ci/pipelines_page/components/pipeline_labels.vue b/app/assets/javascripts/ci/pipelines_page/components/pipeline_labels.vue
index d844aea2a81..35baee7e96a 100644
--- a/app/assets/javascripts/ci/pipelines_page/components/pipeline_labels.vue
+++ b/app/assets/javascripts/ci/pipelines_page/components/pipeline_labels.vue
@@ -17,16 +17,15 @@ export default {
     targetProjectFullPath: {
       default: '',
     },
+    pipelineSchedulesPath: {
+      default: '',
+    },
   },
   props: {
     pipeline: {
       type: Object,
       required: true,
     },
-    pipelineScheduleUrl: {
-      type: String,
-      required: true,
-    },
   },
   computed: {
     isScheduled() {
@@ -52,7 +51,7 @@ export default {
     <gl-badge
       v-if="isScheduled"
       v-gl-tooltip
-      :href="pipelineScheduleUrl"
+      :href="pipelineSchedulesPath"
       target="__blank"
       :title="__('This pipeline was created by a schedule.')"
       variant="info"
diff --git a/app/assets/javascripts/ci/pipelines_page/components/pipelines_status_badge.vue b/app/assets/javascripts/ci/pipelines_page/components/pipeline_status_badge.vue
index 64e2d4176bf..20e2c7e9dce 100644
--- a/app/assets/javascripts/ci/pipelines_page/components/pipelines_status_badge.vue
+++ b/app/assets/javascripts/ci/pipelines_page/components/pipeline_status_badge.vue
@@ -1,6 +1,5 @@
 <script>
 import { TRACKING_CATEGORIES } from '~/ci/constants';
-import { CHILD_VIEW } from '~/ci/pipeline_details/constants';
 import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
 import Tracking from '~/tracking';
 import PipelinesTimeago from './time_ago.vue';
@@ -16,18 +15,11 @@ export default {
       type: Object,
       required: true,
     },
-    viewType: {
-      type: String,
-      required: true,
-    },
   },
   computed: {
     pipelineStatus() {
       return this.pipeline?.details?.status ?? {};
     },
-    isChildView() {
-      return this.viewType === CHILD_VIEW;
-    },
   },
   methods: {
     trackClick() {
@@ -39,12 +31,7 @@ export default {
 
 <template>
   <div>
-    <ci-badge-link
-      class="gl-mb-3"
-      :status="pipelineStatus"
-      :show-text="!isChildView"
-      @ciStatusBadgeClick="trackClick"
-    />
+    <ci-badge-link class="gl-mb-3" :status="pipelineStatus" @ciStatusBadgeClick="trackClick" />
     <pipelines-timeago :pipeline="pipeline" />
   </div>
 </template>
diff --git a/app/assets/javascripts/ci/pipelines_page/components/pipeline_url.vue b/app/assets/javascripts/ci/pipelines_page/components/pipeline_url.vue
index aad2adff84a..9a49eefbf98 100644
--- a/app/assets/javascripts/ci/pipelines_page/components/pipeline_url.vue
+++ b/app/assets/javascripts/ci/pipelines_page/components/pipeline_url.vue
@@ -4,7 +4,7 @@ import { __ } from '~/locale';
 import Tracking from '~/tracking';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
-import { ICONS, TRACKING_CATEGORIES } from '~/ci/constants';
+import { ICONS, PIPELINE_ID_KEY, PIPELINE_IID_KEY, TRACKING_CATEGORIES } from '~/ci/constants';
 import PipelineLabels from './pipeline_labels.vue';
 
 export default {
@@ -24,13 +24,13 @@ export default {
       type: Object,
       required: true,
     },
-    pipelineScheduleUrl: {
+    pipelineIdType: {
       type: String,
-      required: true,
-    },
-    pipelineKey: {
-      type: String,
-      required: true,
+      required: false,
+      default: PIPELINE_ID_KEY,
+      validator(value) {
+        return value === PIPELINE_IID_KEY || value === PIPELINE_ID_KEY;
+      },
     },
     refClass: {
       type: String,
@@ -174,7 +174,7 @@ export default {
         class="gl-mr-1 gl-text-blue-500!"
         data-testid="pipeline-url-link"
         @click="trackClick('click_pipeline_id')"
-        >#{{ pipeline[pipelineKey] }}</gl-link
+        >#{{ pipeline[pipelineIdType] }}</gl-link
       >
       <!--Commit row-->
       <div class="gl-display-inline-flex gl-rounded-base gl-px-2 gl-bg-gray-50 gl-text-gray-700">
@@ -236,6 +236,6 @@ export default {
       />
       <!--End of commit row-->
     </div>
-    <pipeline-labels :pipeline-schedule-url="pipelineScheduleUrl" :pipeline="pipeline" />
+    <pipeline-labels :pipeline="pipeline" />
   </div>
 </template>
diff --git a/app/assets/javascripts/ci/pipelines_page/pipelines.vue b/app/assets/javascripts/ci/pipelines_page/pipelines.vue
index 94632684c3a..faa013079be 100644
--- a/app/assets/javascripts/ci/pipelines_page/pipelines.vue
+++ b/app/assets/javascripts/ci/pipelines_page/pipelines.vue
@@ -1,5 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
+import NO_PIPELINES_SVG from '@gitlab/svgs/dist/illustrations/empty-state/empty-pipeline-md.svg?url';
+import ERROR_STATE_SVG from '@gitlab/svgs/dist/illustrations/pipelines_failed.svg?url';
 import { GlEmptyState, GlIcon, GlLoadingIcon, GlCollapsibleListbox } from '@gitlab/ui';
 import { isEqual } from 'lodash';
 import * as Sentry from '@sentry/browser';
@@ -9,7 +11,8 @@ import { __, s__ } from '~/locale';
 import Tracking from '~/tracking';
 import {
   FILTER_TAG_IDENTIFIER,
-  PipelineKeyOptions,
+  PIPELINE_ID_KEY,
+  PIPELINE_IID_KEY,
   RAW_TEXT_WARNING,
   TRACKING_CATEGORIES,
 } from '~/ci/constants';
@@ -27,7 +30,6 @@ import NavigationControls from './components/nav_controls.vue';
 import PipelinesFilteredSearch from './components/pipelines_filtered_search.vue';
 
 export default {
-  PipelineKeyOptions,
   components: {
     NoCiEmptyState,
     GlCollapsibleListbox,
@@ -46,36 +48,10 @@ export default {
       type: Object,
       required: true,
     },
-    // Can be rendered in 3 different places, with some visual differences
-    // Accepts root | child
-    // `root` -> main view
-    // `child` -> rendered inside MR or Commit View
-    viewType: {
-      type: String,
-      required: false,
-      default: 'root',
-    },
     endpoint: {
       type: String,
       required: true,
     },
-    pipelineScheduleUrl: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    emptyStateSvgPath: {
-      type: String,
-      required: true,
-    },
-    errorStateSvgPath: {
-      type: String,
-      required: true,
-    },
-    noPipelinesSvgPath: {
-      type: String,
-      required: true,
-    },
     hasGitlabCi: {
       type: Boolean,
       required: true,
@@ -243,8 +219,9 @@ export default {
     },
     selectedPipelineKeyOption() {
       return (
-        this.$options.PipelineKeyOptions.find((e) => this.visibilityPipelineIdType === e.value) ||
-        this.$options.PipelineKeyOptions[0]
+        this.$options.pipelineKeyOptions.find(
+          (option) => this.visibilityPipelineIdType === option.value,
+        ) || this.$options.pipelineKeyOptions[0]
       );
     },
   },
@@ -334,11 +311,12 @@ export default {
     },
     changeVisibilityPipelineIDType(idType) {
       this.visibilityPipelineIdType = idType;
-      this.saveVisibilityPipelineIDType(idType);
+
+      if (isLoggedIn()) {
+        this.saveVisibilityPipelineIDType(idType);
+      }
     },
     saveVisibilityPipelineIDType(idType) {
-      if (!isLoggedIn()) return;
-
       this.$apollo
         .mutate({
           mutation: setSortPreferenceMutation,
@@ -354,6 +332,20 @@ export default {
         });
     },
   },
+  errorStateSvgPath: ERROR_STATE_SVG,
+  noPipelinesSvgPath: NO_PIPELINES_SVG,
+  pipelineKeyOptions: [
+    {
+      text: __('Show Pipeline ID'),
+      label: __('Pipeline ID'),
+      value: PIPELINE_ID_KEY,
+    },
+    {
+      text: __('Show Pipeline IID'),
+      label: __('Pipeline IID'),
+      value: PIPELINE_IID_KEY,
+    },
+  ],
 };
 </script>
 <template>
@@ -393,9 +385,8 @@ export default {
         />
         <gl-collapsible-listbox
           v-model="visibilityPipelineIdType"
-          data-testid="pipeline-key-collapsible-box"
           :toggle-text="selectedPipelineKeyOption.text"
-          :items="$options.PipelineKeyOptions"
+          :items="$options.pipelineKeyOptions"
           @select="changeVisibilityPipelineIDType"
         />
       </div>
@@ -411,14 +402,14 @@ export default {
 
       <no-ci-empty-state
         v-else-if="stateToRender === $options.stateMap.emptyState"
-        :empty-state-svg-path="emptyStateSvgPath"
+        :empty-state-svg-path="$options.noPipelinesSvgPath"
         :can-set-ci="canCreatePipeline"
         :registration-token="registrationToken"
       />
 
       <gl-empty-state
         v-else-if="stateToRender === $options.stateMap.error"
-        :svg-path="errorStateSvgPath"
+        :svg-path="$options.errorStateSvgPath"
         :svg-height="null"
         :title="s__('Pipelines|There was an error fetching the pipelines.')"
         :description="s__('Pipelines|Try again in a few moments or contact your support team.')"
@@ -426,7 +417,7 @@ export default {
 
       <gl-empty-state
         v-else-if="stateToRender === $options.stateMap.emptyTab"
-        :svg-path="noPipelinesSvgPath"
+        :svg-path="$options.noPipelinesSvgPath"
         :svg-height="150"
         :title="emptyTabMessage"
       />
@@ -434,10 +425,8 @@ export default {
       <div v-else-if="stateToRender === $options.stateMap.tableList">
         <pipelines-table
           :pipelines="state.pipelines"
-          :pipeline-schedule-url="pipelineScheduleUrl"
           :update-graph-dropdown="updateGraphDropdown"
-          :view-type="viewType"
-          :pipeline-key-option="selectedPipelineKeyOption"
+          :pipeline-id-type="selectedPipelineKeyOption.value"
           @cancel-pipeline="onCancelPipeline"
           @refresh-pipelines-table="onRefreshPipelinesTable"
           @retry-pipeline="onRetryPipeline"
diff --git a/app/assets/javascripts/ci/runner/components/registration/utils.js b/app/assets/javascripts/ci/runner/components/registration/utils.js
index c8a75506c9c..c1885be9585 100644
--- a/app/assets/javascripts/ci/runner/components/registration/utils.js
+++ b/app/assets/javascripts/ci/runner/components/registration/utils.js
@@ -3,8 +3,8 @@ import {
   LINUX_PLATFORM,
   MACOS_PLATFORM,
   WINDOWS_PLATFORM,
-  DOWNLOAD_LOCATIONS,
-} from '../../constants';
+  RUNNER_PACKAGE_HOST,
+} from 'jh_else_ce/ci/runner/constants';
 import linuxInstall from './scripts/linux/install.sh?raw';
 import osxInstall from './scripts/osx/install.sh?raw';
 import windowsInstall from './scripts/windows/install.ps1?raw';
@@ -27,6 +27,47 @@ const OS = {
   },
 };
 
+export const DOWNLOAD_LOCATIONS = {
+  [LINUX_PLATFORM]: [
+    {
+      arch: 'amd64',
+      url: `https://${RUNNER_PACKAGE_HOST}/latest/binaries/gitlab-runner-linux-amd64`,
+    },
+    {
+      arch: '386',
+      url: `https://${RUNNER_PACKAGE_HOST}/latest/binaries/gitlab-runner-linux-386`,
+    },
+    {
+      arch: 'arm',
+      url: `https://${RUNNER_PACKAGE_HOST}/latest/binaries/gitlab-runner-linux-arm`,
+    },
+    {
+      arch: 'arm64',
+      url: `https://${RUNNER_PACKAGE_HOST}/latest/binaries/gitlab-runner-linux-arm64`,
+    },
+  ],
+  [MACOS_PLATFORM]: [
+    {
+      arch: 'amd64',
+      url: `https://${RUNNER_PACKAGE_HOST}/latest/binaries/gitlab-runner-darwin-amd64`,
+    },
+    {
+      arch: 'arm64',
+      url: `https://${RUNNER_PACKAGE_HOST}/latest/binaries/gitlab-runner-darwin-arm64`,
+    },
+  ],
+  [WINDOWS_PLATFORM]: [
+    {
+      arch: 'amd64',
+      url: `https://${RUNNER_PACKAGE_HOST}/latest/binaries/gitlab-runner-windows-amd64.exe`,
+    },
+    {
+      arch: '386',
+      url: `https://${RUNNER_PACKAGE_HOST}/latest/binaries/gitlab-runner-windows-386.exe`,
+    },
+  ],
+};
+
 export const commandPrompt = ({ platform }) => {
   return (OS[platform] || OS[DEFAULT_PLATFORM]).commandPrompt;
 };
diff --git a/app/assets/javascripts/ci/runner/components/runner_details.vue b/app/assets/javascripts/ci/runner/components/runner_details.vue
index e219f2311f5..0ec2ef30c20 100644
--- a/app/assets/javascripts/ci/runner/components/runner_details.vue
+++ b/app/assets/javascripts/ci/runner/components/runner_details.vue
@@ -29,8 +29,6 @@ export default {
       import('ee_component/ci/runner/components/runner_maintenance_note_detail.vue'),
     RunnerGroups,
     RunnerProjects,
-    RunnerUpgradeStatusBadge: () =>
-      import('ee_component/ci/runner/components/runner_upgrade_status_badge.vue'),
     RunnerTags,
     RunnerManagersDetail,
     TimeAgo,
@@ -101,12 +99,6 @@ export default {
             <time-ago :time="runner.contactedAt" />
           </template>
         </runner-detail>
-        <runner-detail :label="s__('Runners|Version')">
-          <template v-if="runner.version" #value>
-            {{ runner.version }}
-            <runner-upgrade-status-badge size="sm" :runner="runner" />
-          </template>
-        </runner-detail>
         <runner-detail :label="s__('Runners|Configuration')">
           <template v-if="configTextProtected || configTextUntagged" #value>
             <gl-intersperse>
diff --git a/app/assets/javascripts/ci/runner/components/runner_header.vue b/app/assets/javascripts/ci/runner/components/runner_header.vue
index 55a33ef2074..0fa06537ed6 100644
--- a/app/assets/javascripts/ci/runner/components/runner_header.vue
+++ b/app/assets/javascripts/ci/runner/components/runner_header.vue
@@ -13,6 +13,8 @@ export default {
     TimeAgo,
     RunnerTypeBadge,
     RunnerStatusBadge,
+    RunnerUpgradeStatusBadge: () =>
+      import('ee_component/ci/runner/components/runner_upgrade_status_badge.vue'),
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -40,6 +42,7 @@ export default {
     <div class="gl-display-flex gl-align-items-flex-start gl-gap-3 gl-flex-wrap gl-mt-3">
       <runner-status-badge :contacted-at="runner.contactedAt" :status="runner.status" />
       <runner-type-badge :type="runner.runnerType" />
+      <runner-upgrade-status-badge :runner="runner" />
       <span v-if="runner.createdAt">
         <gl-sprintf :message="__('%{locked} created %{timeago}')">
           <template #locked>
diff --git a/app/assets/javascripts/ci/runner/constants.js b/app/assets/javascripts/ci/runner/constants.js
index 3293c68ddb8..b3cc295f8e4 100644
--- a/app/assets/javascripts/ci/runner/constants.js
+++ b/app/assets/javascripts/ci/runner/constants.js
@@ -216,54 +216,8 @@ export const LINUX_PLATFORM = 'linux';
 export const MACOS_PLATFORM = 'osx';
 export const WINDOWS_PLATFORM = 'windows';
 
-export const DOWNLOAD_LOCATIONS = {
-  [LINUX_PLATFORM]: [
-    {
-      arch: 'amd64',
-      url:
-        'https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-amd64',
-    },
-    {
-      arch: '386',
-      url:
-        'https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-386',
-    },
-    {
-      arch: 'arm',
-      url:
-        'https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-arm',
-    },
-    {
-      arch: 'arm64',
-      url:
-        'https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-arm64',
-    },
-  ],
-  [MACOS_PLATFORM]: [
-    {
-      arch: 'amd64',
-      url:
-        'https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-darwin-amd64',
-    },
-    {
-      arch: 'arm64',
-      url:
-        'https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-darwin-arm64',
-    },
-  ],
-  [WINDOWS_PLATFORM]: [
-    {
-      arch: 'amd64',
-      url:
-        'https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-windows-amd64.exe',
-    },
-    {
-      arch: '386',
-      url:
-        'https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-windows-386.exe',
-    },
-  ],
-};
+// About Gitlab Runner Package host
+export const RUNNER_PACKAGE_HOST = 'gitlab-runner-downloads.s3.amazonaws.com';
 
 export const DEFAULT_PLATFORM = LINUX_PLATFORM;
 
diff --git a/app/assets/javascripts/ci/runner/sentry_utils.js b/app/assets/javascripts/ci/runner/sentry_utils.js
index 29de1f9adae..28806a33983 100644
--- a/app/assets/javascripts/ci/runner/sentry_utils.js
+++ b/app/assets/javascripts/ci/runner/sentry_utils.js
@@ -11,10 +11,11 @@ const COMPONENT_TAG = 'vue_component';
  * @param {String} options.component - Component name in CamelCase format
  */
 export const captureException = ({ error, component }) => {
-  Sentry.withScope((scope) => {
-    if (component) {
-      scope.setTag(COMPONENT_TAG, component);
-    }
+  if (component) {
+    Sentry.captureException(error, {
+      tags: { [COMPONENT_TAG]: component },
+    });
+  } else {
     Sentry.captureException(error);
-  });
+  }
 };
diff --git a/app/assets/javascripts/ci/utils.js b/app/assets/javascripts/ci/utils.js
index eb9e9538b75..5b57f63f44f 100644
--- a/app/assets/javascripts/ci/utils.js
+++ b/app/assets/javascripts/ci/utils.js
@@ -1,17 +1,17 @@
 import * as Sentry from '@sentry/browser';
 
 export const reportToSentry = (component, failureType) => {
-  Sentry.withScope((scope) => {
-    scope.setTag('component', component);
-    Sentry.captureException(failureType);
+  Sentry.captureException(failureType, {
+    tags: {
+      component,
+    },
   });
 };
 
-export const reportMessageToSentry = (component, message, context) => {
-  Sentry.withScope((scope) => {
-    // eslint-disable-next-line @gitlab/require-i18n-strings
-    scope.setContext('Vue data', context);
-    scope.setTag('component', component);
-    Sentry.captureMessage(message);
+export const reportMessageToSentry = (component, message) => {
+  Sentry.captureMessage(message, {
+    tags: {
+      component,
+    },
   });
 };
diff --git a/app/assets/javascripts/clusters_list/store/actions.js b/app/assets/javascripts/clusters_list/store/actions.js
index 1ea18dcc97d..4537fd51fcf 100644
--- a/app/assets/javascripts/clusters_list/store/actions.js
+++ b/app/assets/javascripts/clusters_list/store/actions.js
@@ -17,9 +17,10 @@ const allNodesPresent = (clusters, retryCount) => {
 };
 
 export const reportSentryError = (_store, { error, tag }) => {
-  Sentry.withScope((scope) => {
-    scope.setTag('javascript_clusters_list', tag);
-    Sentry.captureException(error);
+  Sentry.captureException(error, {
+    tags: {
+      javascript_clusters_list: tag,
+    },
   });
 };
 
diff --git a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
index 259f76c43ea..1954f9f8f35 100644
--- a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
+++ b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
@@ -3,7 +3,7 @@ import { GlButton, GlEmptyState, GlLoadingIcon, GlModal, GlLink, GlSprintf } fro
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { getParameterByName } from '~/lib/utils/url_utility';
 import PipelinesTable from '~/ci/common/pipelines_table.vue';
-import { PipelineKeyOptions } from '~/ci/constants';
+import { PIPELINE_ID_KEY } from '~/ci/constants';
 import eventHub from '~/ci/event_hub';
 import PipelinesMixin from '~/ci/pipeline_details/mixins/pipelines_mixin';
 import PipelinesService from '~/ci/pipelines_page/services/pipelines_service';
@@ -13,7 +13,6 @@ import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { s__, __ } from '~/locale';
 
 export default {
-  PipelineKeyOptions,
   components: {
     GlButton,
     GlEmptyState,
@@ -180,6 +179,7 @@ export default {
       }
     },
   },
+  pipelineIdKey: PIPELINE_ID_KEY,
   modal: {
     actionPrimary: {
       text: s__('Pipeline|Run pipeline'),
@@ -284,7 +284,7 @@ export default {
         :pipelines="state.pipelines"
         :update-graph-dropdown="updateGraphDropdown"
         :view-type="viewType"
-        :pipeline-key-option="$options.PipelineKeyOptions[0]"
+        :pipeline-id-type="$options.pipelineIdKey"
         @cancel-pipeline="onCancelPipeline"
         @refresh-pipelines-table="onRefreshPipelinesTable"
         @retry-pipeline="onRetryPipeline"
diff --git a/app/assets/javascripts/content_editor/components/content_editor.vue b/app/assets/javascripts/content_editor/components/content_editor.vue
index d9314916ac4..48b105935b9 100644
--- a/app/assets/javascripts/content_editor/components/content_editor.vue
+++ b/app/assets/javascripts/content_editor/components/content_editor.vue
@@ -271,7 +271,8 @@ export default {
           target="_blank"
           category="tertiary"
           size="small"
-          title="Markdown is supported"
+          :title="__('Markdown is supported')"
+          :aria-label="__('Markdown is supported')"
           class="gl-px-3!"
         />
       </div>
diff --git a/app/assets/javascripts/content_editor/components/content_editor_provider.vue b/app/assets/javascripts/content_editor/components/content_editor_provider.vue
index fa842f23cc3..955fa129ce7 100644
--- a/app/assets/javascripts/content_editor/components/content_editor_provider.vue
+++ b/app/assets/javascripts/content_editor/components/content_editor_provider.vue
@@ -1,13 +1,7 @@
 <script>
 export default {
   provide() {
-    // We can't use this.contentEditor due to bug in vue-apollo when
-    // provide is called in beforeCreate
-    // See https://github.com/vuejs/vue-apollo/pull/1153 for details
-
-    // @vue-compat does not care to normalize propsData fields
-    const contentEditor =
-      this.$options.propsData.contentEditor || this.$options.propsData['content-editor'];
+    const { contentEditor } = this;
 
     return {
       contentEditor,
diff --git a/app/assets/javascripts/environments/environment_details/index.vue b/app/assets/javascripts/environments/environment_details/index.vue
index aa836299bcc..6e3ec04ba3b 100644
--- a/app/assets/javascripts/environments/environment_details/index.vue
+++ b/app/assets/javascripts/environments/environment_details/index.vue
@@ -150,10 +150,10 @@ export default {
     },
   },
   errorCaptured(error) {
-    Sentry.withScope((scope) => {
-      scope.setTag('vue_component', 'EnvironmentDetailsIndex');
-
-      Sentry.captureException(error);
+    Sentry.captureException(error, {
+      tags: {
+        vue_component: 'EnvironmentDetailsIndex',
+      },
     });
   },
   mounted() {
diff --git a/app/assets/javascripts/invite_members/components/invite_members_modal.vue b/app/assets/javascripts/invite_members/components/invite_members_modal.vue
index dbdfdfc402d..509efd31dcd 100644
--- a/app/assets/javascripts/invite_members/components/invite_members_modal.vue
+++ b/app/assets/javascripts/invite_members/components/invite_members_modal.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlAlert, GlButton, GlCollapse, GlIcon } from '@gitlab/ui';
 import { partition, isString, uniqueId, isEmpty } from 'lodash';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import InviteModalBase from 'ee_else_ce/invite_members/components/invite_modal_base.vue';
 import Api from '~/api';
 import Tracking from '~/tracking';
@@ -38,6 +39,9 @@ export default {
     ActiveTrialNotification: () =>
       import('ee_component/invite_members/components/active_trial_notification.vue'),
   },
+  directives: {
+    SafeHtml,
+  },
   mixins: [Tracking.mixin({ category: INVITE_MEMBER_MODAL_TRACKING_CATEGORY })],
   props: {
     id: {
@@ -393,7 +397,8 @@ export default {
               :key="error.member"
               data-testid="errors-limited-item"
             >
-              <strong>{{ error.displayedMemberName }}:</strong> {{ error.message }}
+              <strong>{{ error.displayedMemberName }}:</strong>
+              <span v-safe-html="error.message"></span>
             </li>
           </ul>
           <template v-if="shouldErrorsSectionExpand">
@@ -404,7 +409,8 @@ export default {
                   :key="error.member"
                   data-testid="errors-expanded-item"
                 >
-                  <strong>{{ error.displayedMemberName }}:</strong> {{ error.message }}
+                  <strong>{{ error.displayedMemberName }}:</strong>
+                  <span v-safe-html="error.message"></span>
                 </li>
               </ul>
             </gl-collapse>
diff --git a/app/assets/javascripts/issues/show/components/header_actions.vue b/app/assets/javascripts/issues/show/components/header_actions.vue
index ae5b4350512..681d2c79ba1 100644
--- a/app/assets/javascripts/issues/show/components/header_actions.vue
+++ b/app/assets/javascripts/issues/show/components/header_actions.vue
@@ -390,17 +390,6 @@ export default {
       {{ $options.i18n.edit }}
     </gl-button>
 
-    <gl-button
-      v-if="showToggleIssueStateButton && !glFeatures.moveCloseIntoDropdown"
-      class="gl-display-none gl-sm-display-inline-flex!"
-      :data-qa-selector="qaSelector"
-      :loading="isToggleStateButtonLoading"
-      data-testid="toggle-issue-state-button"
-      @click="toggleIssueState"
-    >
-      {{ buttonText }}
-    </gl-button>
-
     <gl-dropdown
       v-if="hasDesktopDropdown"
       id="new-actions-header-dropdown"
@@ -428,7 +417,7 @@ export default {
         <gl-dropdown-divider />
       </template>
       <gl-dropdown-item
-        v-if="showToggleIssueStateButton && glFeatures.moveCloseIntoDropdown"
+        v-if="showToggleIssueStateButton"
         data-testid="toggle-issue-state-button"
         @click="toggleIssueState"
       >
diff --git a/app/assets/javascripts/members/components/app.vue b/app/assets/javascripts/members/components/app.vue
index a70ee8fc865..06499b6d2c6 100644
--- a/app/assets/javascripts/members/components/app.vue
+++ b/app/assets/javascripts/members/components/app.vue
@@ -12,10 +12,7 @@ export default {
   components: { MembersTable, FilterSortContainer, GlAlert },
   provide() {
     return {
-      // We can't use this.namespace due to bug in vue-apollo when
-      // provide is called in beforeCreate
-      // See https://github.com/vuejs/vue-apollo/pull/1153 for details
-      namespace: this.$options.propsData.namespace,
+      namespace: this.namespace,
     };
   },
   props: {
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 03518d5fdd1..2095f24eb84 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -109,7 +109,7 @@ function mountPipelines() {
       manualActionsLimit: 50,
       mergeRequestId: mrWidgetData ? mrWidgetData.iid : null,
       sourceProjectFullPath: mrWidgetData?.source_project_full_path || '',
-      withFailedJobsDetails: true,
+      useFailedJobsWidget: gon.features?.ciJobFailuresInMr || false,
     },
     render(createElement) {
       return createElement('merge-request-pipelines-table', {
diff --git a/app/assets/javascripts/security_configuration/components/feature_card.vue b/app/assets/javascripts/security_configuration/components/feature_card.vue
index 7f0a049a6ad..395bdad5dcc 100644
--- a/app/assets/javascripts/security_configuration/components/feature_card.vue
+++ b/app/assets/javascripts/security_configuration/components/feature_card.vue
@@ -95,6 +95,9 @@ export default {
     showSecondaryConfigurationHelpPath() {
       return Boolean(this.available && this.feature.secondary?.configurationHelpPath);
     },
+    hyphenatedFeature() {
+      return this.feature.type.replace(/_/g, '-');
+    },
   },
   methods: {
     onError(message) {
@@ -167,7 +170,7 @@ export default {
         :href="feature.configurationPath"
         variant="confirm"
         :category="configurationButton.category"
-        :data-testid="`${feature.type}_enable_button`"
+        :data-testid="`${hyphenatedFeature}-enable-button`"
         class="gl-mt-5"
       >
         {{ configurationButton.text }}
@@ -179,7 +182,7 @@ export default {
         variant="confirm"
         :category="manageViaMrButtonCategory"
         class="gl-mt-5"
-        :data-testid="`${feature.type}_mr_button`"
+        :data-testid="`${hyphenatedFeature}-mr-button`"
         @error="onError"
       />
 
diff --git a/app/assets/javascripts/sentry/init_sentry.js b/app/assets/javascripts/sentry/init_sentry.js
index 81ae46b8dd6..8561634cf9a 100644
--- a/app/assets/javascripts/sentry/init_sentry.js
+++ b/app/assets/javascripts/sentry/init_sentry.js
@@ -9,7 +9,6 @@ import {
   // exports
   captureException,
   captureMessage,
-  withScope,
   SDK_VERSION,
 } from 'sentrybrowser';
 
@@ -84,7 +83,6 @@ const initSentry = () => {
   window._Sentry = {
     captureException,
     captureMessage,
-    withScope,
     SDK_VERSION, // used to verify compatibility with the Sentry instance
   };
 };
diff --git a/app/assets/javascripts/sentry/sentry_browser_wrapper.js b/app/assets/javascripts/sentry/sentry_browser_wrapper.js
index fbfd5d4f458..83df04a7213 100644
--- a/app/assets/javascripts/sentry/sentry_browser_wrapper.js
+++ b/app/assets/javascripts/sentry/sentry_browser_wrapper.js
@@ -21,11 +21,3 @@ export const captureMessage = (...args) => {
 
   Sentry?.captureMessage(...args);
 };
-
-/** @type {import('@sentry/core').withScope} */
-export const withScope = (...args) => {
-  // eslint-disable-next-line no-underscore-dangle
-  const Sentry = window._Sentry;
-
-  Sentry?.withScope(...args);
-};
diff --git a/app/assets/javascripts/snippets/components/snippet_title.vue b/app/assets/javascripts/snippets/components/snippet_title.vue
index b140cd855f8..0e4dbf55963 100644
--- a/app/assets/javascripts/snippets/components/snippet_title.vue
+++ b/app/assets/javascripts/snippets/components/snippet_title.vue
@@ -1,51 +1,28 @@
 <script>
-import { GlIcon, GlTooltipDirective, GlSprintf } from '@gitlab/ui';
-import { __, s__ } from '~/locale';
+import { GlSprintf } from '@gitlab/ui';
 
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import SnippetDescription from './snippet_description_view.vue';
 
 export default {
   components: {
-    GlIcon,
     TimeAgoTooltip,
     GlSprintf,
     SnippetDescription,
   },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
   props: {
     snippet: {
       type: Object,
       required: true,
     },
   },
-  i18n: {
-    hiddenTooltip: s__('Snippets|This snippet is hidden because its author has been banned'),
-    hiddenAriaLabel: __('Hidden'),
-  },
 };
 </script>
 <template>
   <div class="snippet-header limited-header-width">
-    <div class="gl-display-flex">
-      <span
-        v-if="snippet.hidden"
-        class="gl-bg-orange-50 gl-text-orange-600 gl-h-6 gl-w-6 border-radius-default gl-line-height-24 gl-text-center gl-mr-3 gl-mt-2"
-      >
-        <gl-icon
-          v-gl-tooltip.bottom
-          name="spam"
-          :title="$options.i18n.hiddenTooltip"
-          :aria-label="$options.i18n.hiddenAriaLabel"
-        />
-      </span>
-
-      <h2 class="snippet-title gl-mt-0 mb-3" data-testid="snippet-title-content">
-        {{ snippet.title }}
-      </h2>
-    </div>
+    <h2 class="snippet-title gl-mt-0 mb-3" data-testid="snippet-title-content">
+      {{ snippet.title }}
+    </h2>
 
     <snippet-description v-if="snippet.description" :description="snippet.descriptionHtml" />
 
diff --git a/app/assets/javascripts/super_sidebar/components/global_search/components/global_search.vue b/app/assets/javascripts/super_sidebar/components/global_search/components/global_search.vue
index 4cfc329f8b8..61fa360c41f 100644
--- a/app/assets/javascripts/super_sidebar/components/global_search/components/global_search.vue
+++ b/app/assets/javascripts/super_sidebar/components/global_search/components/global_search.vue
@@ -17,6 +17,7 @@ import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import { sprintf } from '~/locale';
 import { ARROW_DOWN_KEY, ARROW_UP_KEY, END_KEY, HOME_KEY, ESC_KEY } from '~/lib/utils/keys';
 import {
+  COMMAND_PALETTE,
   MIN_SEARCH_TERM,
   SEARCH_DESCRIBED_BY_WITH_RESULTS,
   SEARCH_DESCRIBED_BY_DEFAULT,
@@ -50,6 +51,7 @@ export default {
   name: 'GlobalSearchModal',
   SEARCH_MODAL_ID,
   i18n: {
+    COMMAND_PALETTE,
     SEARCH_DESCRIBED_BY_WITH_RESULTS,
     SEARCH_DESCRIBED_BY_DEFAULT,
     SEARCH_DESCRIBED_BY_UPDATED,
@@ -279,6 +281,7 @@ export default {
     hide-footer
     hide-header-close
     scrollable
+    :title="$options.i18n.COMMAND_PALETTE"
     body-class="gl-p-0!"
     modal-class="global-search-modal"
     :centered="false"
diff --git a/app/assets/javascripts/super_sidebar/components/sidebar_menu.vue b/app/assets/javascripts/super_sidebar/components/sidebar_menu.vue
index 6f9a086aff4..772072c0996 100644
--- a/app/assets/javascripts/super_sidebar/components/sidebar_menu.vue
+++ b/app/assets/javascripts/super_sidebar/components/sidebar_menu.vue
@@ -21,10 +21,7 @@ export default {
     return {
       pinnedItemIds: this.changedPinnedItemIds,
       panelSupportsPins: this.supportsPins,
-      // We can't use this.panelType due to bug in vue-apollo when
-      // provide is called in beforeCreate
-      // See https://github.com/vuejs/vue-apollo/pull/1153 for details
-      panelType: this.$options.propsData.panelType,
+      panelType: this.panelType,
     };
   },
   props: {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
index 0ce8389579d..ac434c5be4e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
@@ -634,7 +634,6 @@ export default {
                   variant="confirm"
                   :disabled="isMergeButtonDisabled"
                   :loading="isMakingRequest"
-                  data-qa-selector="merge_button"
                   @click="handleMergeButtonClick(isAutoMergeAvailable)"
                   >{{ mergeButtonText }}</gl-button
                 >
@@ -644,7 +643,6 @@ export default {
                   :disabled="isMergeButtonDisabled"
                   variant="confirm"
                   data-testid="merge-immediately-dropdown"
-                  data-qa-selector="merge_moment_dropdown"
                   toggle-class="btn-icon js-merge-moment"
                 >
                   <template #button-content>
@@ -655,7 +653,6 @@ export default {
                     icon-name="warning"
                     button-class="accept-merge-request"
                     data-testid="merge-immediately-button"
-                    data-qa-selector="merge_immediately_menu_item"
                     @click="handleMergeImmediatelyButtonClick"
                   >
                     {{ __('Merge immediately') }}
@@ -692,7 +689,7 @@ export default {
             <div
               v-else
               class="gl-w-full gl-order-n1 mr-widget-merge-details"
-              data-qa-selector="merged_status_content"
+              data-testid="merged-status-content"
             >
               <p v-if="showMergeDetailsHeader" class="gl-mb-2 gl-text-gray-900">
                 {{ __('Merge details') }}
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
index 68ba01ee06a..c0c8c4735e7 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
@@ -133,6 +133,7 @@ export default {
         category="tertiary"
         size="small"
         :title="__('Markdown is supported')"
+        :aria-label="__('Markdown is supported')"
         class="gl-px-3!"
       />
     </div>
diff --git a/app/assets/javascripts/vue_shared/components/vuex_module_provider.vue b/app/assets/javascripts/vue_shared/components/vuex_module_provider.vue
index 9665e188469..46496d2e483 100644
--- a/app/assets/javascripts/vue_shared/components/vuex_module_provider.vue
+++ b/app/assets/javascripts/vue_shared/components/vuex_module_provider.vue
@@ -2,12 +2,7 @@
 export default {
   provide() {
     return {
-      // We can't use this.vuexModule due to bug in vue-apollo when
-      // provide is called in beforeCreate
-      // See https://github.com/vuejs/vue-apollo/pull/1153 for details
-
-      // @vue-compat does not care to normalize propsData fields
-      vuexModule: this.$options.propsData.vuexModule ?? this.$options.propsData['vuex-module'],
+      vuexModule: this.vuexModule,
     };
   },
   props: {
diff --git a/app/assets/javascripts/vue_shared/global_search/constants.js b/app/assets/javascripts/vue_shared/global_search/constants.js
index 43110c0c9af..14ea0389bad 100644
--- a/app/assets/javascripts/vue_shared/global_search/constants.js
+++ b/app/assets/javascripts/vue_shared/global_search/constants.js
@@ -8,6 +8,7 @@ export const ALL_GITLAB = __('All GitLab');
 export const SEARCH_GITLAB = s__('GlobalSearch|Search GitLab');
 export const PLACES = s__('GlobalSearch|Places');
 
+export const COMMAND_PALETTE = s__('GlobalSearch|Command palette');
 export const SEARCH_DESCRIBED_BY_DEFAULT = s__(
   'GlobalSearch|%{count} default results provided. Use the up and down arrow keys to navigate search results list.',
 );
diff --git a/app/assets/javascripts/work_items/components/shared/work_item_link_child_contents.vue b/app/assets/javascripts/work_items/components/shared/work_item_link_child_contents.vue
index 24cd0c2296b..a80a2dc5737 100644
--- a/app/assets/javascripts/work_items/components/shared/work_item_link_child_contents.vue
+++ b/app/assets/javascripts/work_items/components/shared/work_item_link_child_contents.vue
@@ -158,7 +158,7 @@ export default {
           </span>
           <gl-link
             :href="childPath"
-            class="gl-text-truncate gl-font-weight-semibold"
+            class="gl-overflow-break-word gl-font-weight-semibold"
             data-testid="item-title"
             @click="$emit('click', $event)"
             @mouseover="$emit('mouseover')"
diff --git a/app/assets/javascripts/work_items/components/work_item_actions.vue b/app/assets/javascripts/work_items/components/work_item_actions.vue
index b19236e5961..b2f1bbb7c89 100644
--- a/app/assets/javascripts/work_items/components/work_item_actions.vue
+++ b/app/assets/javascripts/work_items/components/work_item_actions.vue
@@ -7,7 +7,6 @@ import {
   GlModalDirective,
   GlToggle,
 } from '@gitlab/ui';
-import { produce } from 'immer';
 
 import * as Sentry from '@sentry/browser';
 
@@ -15,8 +14,6 @@ import { __, s__ } from '~/locale';
 import Tracking from '~/tracking';
 import toast from '~/vue_shared/plugins/global_toast';
 import { isLoggedIn } from '~/lib/utils/common_utils';
-import groupWorkItemByIidQuery from '../graphql/group_work_item_by_iid.query.graphql';
-import workItemByIidQuery from '../graphql/work_item_by_iid.query.graphql';
 
 import {
   sprintfWorkItem,
@@ -29,7 +26,6 @@ import {
   TEST_ID_PROMOTE_ACTION,
   TEST_ID_COPY_CREATE_NOTE_EMAIL_ACTION,
   TEST_ID_COPY_REFERENCE_ACTION,
-  WIDGET_TYPE_NOTIFICATIONS,
   I18N_WORK_ITEM_ERROR_CONVERTING,
   WORK_ITEM_TYPE_VALUE_KEY_RESULT,
   WORK_ITEM_TYPE_VALUE_OBJECTIVE,
@@ -128,10 +124,6 @@ export default {
       required: false,
       default: false,
     },
-    workItemIid: {
-      type: String,
-      required: true,
-    },
   },
   apollo: {
     workItemTypes: {
@@ -200,80 +192,31 @@ export default {
       }
     },
     toggleNotifications(subscribed) {
-      const inputVariables = {
-        projectPath: this.fullPath,
-        iid: this.workItemIid,
-        subscribedState: subscribed,
-      };
       this.$apollo
         .mutate({
           mutation: updateWorkItemNotificationsMutation,
           variables: {
-            input: inputVariables,
-          },
-          optimisticResponse: {
-            updateWorkItemNotificationsSubscription: {
-              issue: {
-                id: this.workItemId,
-                subscribed,
-              },
-              errors: [],
-            },
-          },
-          update: (
-            cache,
-            {
-              data: {
-                updateWorkItemNotificationsSubscription: { issue = {} },
-              },
+            input: {
+              id: this.workItemId,
+              subscribed,
             },
-          ) => {
-            // As the mutation and the query both are different,
-            // overwrite the subscribed value in the cache
-            this.updateWorkItemNotificationsWidgetCache({
-              cache,
-              issue,
-            });
           },
         })
-        .then(
-          ({
-            data: {
-              updateWorkItemNotificationsSubscription: { errors },
-            },
-          }) => {
-            if (errors?.length) {
-              throw new Error(errors[0]);
-            }
-            toast(
-              subscribed ? this.$options.i18n.notificationOn : this.$options.i18n.notificationOff,
-            );
-          },
-        )
+        .then(({ data }) => {
+          const { errors } = data.workItemSubscribe;
+          if (errors?.length) {
+            throw new Error(errors[0]);
+          }
+
+          toast(
+            subscribed ? this.$options.i18n.notificationOn : this.$options.i18n.notificationOff,
+          );
+        })
         .catch((error) => {
           this.$emit('error', error.message);
           Sentry.captureException(error);
         });
     },
-    updateWorkItemNotificationsWidgetCache({ cache, issue }) {
-      const query = {
-        query: this.isGroup ? groupWorkItemByIidQuery : workItemByIidQuery,
-        variables: { fullPath: this.fullPath, iid: this.workItemIid },
-      };
-      // Read the work item object
-      const sourceData = cache.readQuery(query);
-
-      const newData = produce(sourceData, (draftState) => {
-        const { widgets } = draftState.workspace.workItems.nodes[0];
-
-        const widgetNotifications = widgets.find(({ type }) => type === WIDGET_TYPE_NOTIFICATIONS);
-        // overwrite the subscribed value
-        widgetNotifications.subscribed = issue.subscribed;
-      });
-
-      // write to the cache
-      cache.writeQuery({ ...query, data: newData });
-    },
     throwConvertError() {
       this.$emit('error', this.i18n.convertError);
     },
@@ -338,7 +281,6 @@ export default {
               :data-testid="$options.notificationsToggleTestId"
               class="work-item-notification-toggle"
               label-position="left"
-              label-id="notifications-toggle"
               @change="toggleNotifications($event)"
             />
           </template>
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 ff1b45c4b9e..fe3b8845be3 100644
--- a/app/assets/javascripts/work_items/components/work_item_detail.vue
+++ b/app/assets/javascripts/work_items/components/work_item_detail.vue
@@ -479,7 +479,6 @@ export default {
             :work-item-reference="workItem.reference"
             :work-item-create-note-email="workItem.createNoteEmail"
             :is-modal="isModal"
-            :work-item-iid="workItemIid"
             @deleteWorkItem="$emit('deleteWorkItem', { workItemType, workItemId: workItem.id })"
             @toggleWorkItemConfidentiality="toggleConfidentiality"
             @error="updateError = $event"
@@ -554,7 +553,6 @@ export default {
                   :work-item-reference="workItem.reference"
                   :work-item-create-note-email="workItem.createNoteEmail"
                   :is-modal="isModal"
-                  :work-item-iid="workItemIid"
                   @deleteWorkItem="
                     $emit('deleteWorkItem', { workItemType, workItemId: workItem.id })
                   "
diff --git a/app/assets/javascripts/work_items/graphql/update_work_item_notifications.mutation.graphql b/app/assets/javascripts/work_items/graphql/update_work_item_notifications.mutation.graphql
index f28317b79b5..9d71d452430 100644
--- a/app/assets/javascripts/work_items/graphql/update_work_item_notifications.mutation.graphql
+++ b/app/assets/javascripts/work_items/graphql/update_work_item_notifications.mutation.graphql
@@ -1,9 +1,14 @@
-mutation updateWorkItemNotificationsWidget($input: IssueSetSubscriptionInput!) {
-  updateWorkItemNotificationsSubscription: issueSetSubscription(input: $input) {
-    issue {
+mutation workItemSubscribe($input: WorkItemSubscribeInput!) {
+  workItemSubscribe(input: $input) {
+    errors
+    workItem {
       id
-      subscribed
+      widgets {
+        ... on WorkItemWidgetNotifications {
+          type
+          subscribed
+        }
+      }
     }
-    errors
   }
 }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 8b741be6e65..a4bb39e0764 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -481,7 +481,7 @@ $count-arrow-border: #dce0e5;
 $general-hover-transition-duration: 100ms;
 $general-hover-transition-curve: linear;
 $highlight-changes-color: rgb(235, 255, 232);
-$performance-bar-height: 40px;
+$performance-bar-height: 2.5rem;
 $system-header-height: 16px;
 $system-footer-height: $system-header-height;
 $mr-sticky-header-height: 72px;