Add latest changes from gitlab-org/gitlab@master

19 files changed, 219 insertions, 117 deletions

diff --git a/app/assets/javascripts/behaviors/markdown/render_math.js b/app/assets/javascripts/behaviors/markdown/render_math.js
index 097f2617c1d..9d33f051ad0 100644
--- a/app/assets/javascripts/behaviors/markdown/render_math.js
+++ b/app/assets/javascripts/behaviors/markdown/render_math.js
@@ -1,17 +1,19 @@
+import { escape } from 'lodash';
 import { spriteIcon } from '~/lib/utils/common_utils';
 import { differenceInMilliseconds } from '~/lib/utils/datetime_utility';
-import { s__ } from '~/locale';
+import { s__, sprintf } from '~/locale';
 import { unrestrictedPages } from './constants';
 
-// Renders math using KaTeX in any element with the
-// `js-render-math` class
+// Renders math using KaTeX in an element.
 //
-// ### Example Markup
-//
-//   <code class="js-render-math"></div>
+// Typically for elements with the `js-render-math` class such as
+//   <code class="js-render-math"></code>
 //
+// See app/assets/javascripts/behaviors/markdown/render_gfm.js
 
 const MAX_MATH_CHARS = 1000;
+const MAX_MACRO_EXPANSIONS = 1000;
+const MAX_USER_SPECIFIED_EMS = 20;
 const MAX_RENDER_TIME_MS = 2000;
 
 // Wait for the browser to reflow the layout. Reflowing SVG takes time.
@@ -74,13 +76,23 @@ class SafeMathRenderer {
       const { parentNode } = el;
       parentNode.replaceChild(wrapperElement, el);
 
+      let message;
+      if (text.length > MAX_MATH_CHARS) {
+        message = sprintf(
+          s__(
+            'math|This math block exceeds %{maxMathChars} characters, and may cause performance issues on this page.',
+          ),
+          { maxMathChars: MAX_MATH_CHARS },
+        );
+      } else {
+        message = s__('math|Displaying this math block may cause performance issues on this page.');
+      }
+
       const html = `
           <div class="alert gl-alert gl-alert-warning alert-dismissible lazy-render-math-container js-lazy-render-math-container fade show" role="alert">
             ${spriteIcon('warning', 'text-warning-600 s16 gl-alert-icon')}
             <div class="display-flex gl-alert-content">
-              <div>${s__(
-                'math|Displaying this math block may cause performance issues on this page',
-              )}</div>
+              <div>${message}</div>
               <div class="gl-alert-actions">
                 <button class="js-lazy-render-math btn gl-alert-action btn-confirm btn-md gl-button">Display anyway</button>
               </div>
@@ -117,8 +129,10 @@ class SafeMathRenderer {
         displayContainer.innerHTML = this.katex.renderToString(text, {
           displayMode: el.dataset.mathStyle === 'display',
           throwOnError: true,
-          maxSize: 20,
-          maxExpand: 20,
+          maxSize: MAX_USER_SPECIFIED_EMS,
+          // See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/111107 for
+          // reasoning behind this value
+          maxExpand: MAX_MACRO_EXPANSIONS,
           trust: (context) =>
             // this config option restores the KaTeX pre-v0.11.0
             // behavior of allowing certain commands and protocols
@@ -128,8 +142,17 @@ class SafeMathRenderer {
         });
       } catch (e) {
         // Don't show a flash for now because it would override an existing flash message
-        el.textContent = s__('math|There was an error rendering this math block');
-        // el.style.color = '#d00';
+        if (e.message.match(/Too many expansions/)) {
+          // this is controlled by the maxExpand parameter
+          el.textContent = s__('math|Too many expansions. Consider using multiple math blocks.');
+        } else {
+          // According to https://katex.org/docs/error.html, we need to ensure that
+          // the error message is escaped.
+          el.textContent = sprintf(
+            s__('math|There was an error rendering this math block. %{katexMessage}'),
+            { katexMessage: escape(e.message) },
+          );
+        }
         el.className = 'katex-error';
       }
 
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/bold_text.vue b/app/assets/javascripts/vue_merge_request_widget/components/bold_text.vue
new file mode 100644
index 00000000000..bef1d79a655
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/bold_text.vue
@@ -0,0 +1,26 @@
+<script>
+import { GlSprintf } from '@gitlab/ui';
+
+export default {
+  name: 'BoldText',
+  components: {
+    GlSprintf,
+  },
+  props: {
+    message: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <span>
+    <gl-sprintf :message="message">
+      <template #bold="{ content }">
+        <span class="gl-font-weight-bold" v-text="content"></span>
+      </template>
+    </gl-sprintf>
+  </span>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/merge_checks_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/merge_checks_failed.vue
index e5688091cc7..6d7ec607557 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/merge_checks_failed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/merge_checks_failed.vue
@@ -1,17 +1,23 @@
 <script>
 import { s__ } from '~/locale';
+import BoldText from '~/vue_merge_request_widget/components/bold_text.vue';
 import StateContainer from '../state_container.vue';
 import { DETAILED_MERGE_STATUS } from '../../constants';
 
 export default {
   i18n: {
-    approvalNeeded: s__('mrWidget|Merge blocked: all required approvals must be given.'),
+    approvalNeeded: s__(
+      'mrWidget|%{boldStart}Merge blocked:%{boldEnd} all required approvals must be given.',
+    ),
     blockingMergeRequests: s__(
-      'mrWidget|Merge blocked: you can only merge after the above items are resolved.',
+      'mrWidget|%{boldStart}Merge blocked:%{boldEnd} you can only merge after the above items are resolved.',
+    ),
+    externalStatusChecksFailed: s__(
+      'mrWidget|%{boldStart}Merge blocked:%{boldEnd} all status checks must pass.',
     ),
-    externalStatusChecksFailed: s__('mrWidget|Merge blocked: all status checks must pass.'),
   },
   components: {
+    BoldText,
     StateContainer,
   },
   props: {
@@ -38,10 +44,8 @@ export default {
 
 <template>
   <state-container :mr="mr" status="failed">
-    <span
-      class="gl-ml-3 gl-font-weight-bold gl-w-100 gl-flex-grow-1 gl-md-mr-3 gl-ml-0! gl-text-body!"
-    >
-      {{ failedText }}
+    <span class="gl-ml-3 gl-w-100 gl-flex-grow-1 gl-md-mr-3 gl-ml-0! gl-text-body!">
+      <bold-text :message="failedText" />
     </span>
   </state-container>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
index 79e878431ed..837f8b32637 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
@@ -1,9 +1,17 @@
 <script>
+import { s__ } from '~/locale';
+import BoldText from '~/vue_merge_request_widget/components/bold_text.vue';
 import StateContainer from '../state_container.vue';
 
+const message = s__(
+  'mrWidget|%{boldStart}Merge unavailable:%{boldEnd} merge requests are read-only on archived projects.',
+);
+
 export default {
   name: 'MRWidgetArchived',
+  message,
   components: {
+    BoldText,
     StateContainer,
   },
   props: {
@@ -17,8 +25,6 @@ export default {
 
 <template>
   <state-container :mr="mr" status="failed">
-    <span class="gl-font-weight-bold">
-      {{ s__('mrWidget|Merge unavailable: merge requests are read-only on archived projects.') }}
-    </span>
+    <bold-text :message="$options.message" />
   </state-container>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
index 922075516f3..670bd36d61e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
@@ -16,8 +16,6 @@ export default {
 </script>
 <template>
   <state-container :mr="mr" status="loading">
-    <span class="gl-font-weight-bold">
-      {{ s__('mrWidget|Checking if merge request can be merged…') }}
-    </span>
+    {{ s__('mrWidget|Checking if merge request can be merged…') }}
   </state-container>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
index a5d982fe221..19701125978 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
@@ -1,5 +1,7 @@
 <script>
 import { GlButton, GlSkeletonLoader } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import BoldText from '~/vue_merge_request_widget/components/bold_text.vue';
 import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
 import userPermissionsQuery from '../../queries/permissions.query.graphql';
 import conflictsStateQuery from '../../queries/states/conflicts.query.graphql';
@@ -8,6 +10,7 @@ import StateContainer from '../state_container.vue';
 export default {
   name: 'MRWidgetConflicts',
   components: {
+    BoldText,
     GlSkeletonLoader,
     GlButton,
     StateContainer,
@@ -55,6 +58,17 @@ export default {
       );
     },
   },
+  i18n: {
+    shouldBeRebased: s__(
+      'mrWidget|%{boldStart}Merge blocked:%{boldEnd} fast-forward merge is not possible. To merge this request, first rebase locally.',
+    ),
+    shouldBeResolved: s__(
+      'mrWidget|%{boldStart}Merge blocked:%{boldEnd} merge conflicts must be resolved.',
+    ),
+    usersWriteBranches: s__(
+      'mrWidget|%{boldStart}Merge blocked:%{boldEnd} Users who can write to the source or target branches can resolve the conflicts.',
+    ),
+  },
 };
 </script>
 <template>
@@ -67,21 +81,14 @@ export default {
       </gl-skeleton-loader>
     </template>
     <template v-if="!isLoading">
-      <span v-if="state.shouldBeRebased" class="bold gl-ml-0! gl-text-body!">
-        {{
-          s__(`mrWidget|Merge blocked: fast-forward merge is not possible.
-  To merge this request, first rebase locally.`)
-        }}
+      <span v-if="state.shouldBeRebased" class="gl-ml-0! gl-text-body!">
+        <bold-text :message="$options.i18n.shouldBeRebased" />
       </span>
       <template v-else>
-        <span class="bold gl-ml-0! gl-text-body! gl-flex-grow-1 gl-w-full gl-md-w-auto gl-mr-2">
-          {{ s__('mrWidget|Merge blocked: merge conflicts must be resolved.') }}
+        <span class="gl-ml-0! gl-text-body! gl-flex-grow-1 gl-w-full gl-md-w-auto gl-mr-2">
+          <bold-text :message="$options.i18n.shouldBeResolved" />
           <span v-if="!userPermissions.canMerge">
-            {{
-              s__(
-                `mrWidget|Users who can write to the source or target branches can resolve the conflicts.`,
-              )
-            }}
+            {{ $options.i18n.usersWriteBranches }}
           </span>
         </span>
       </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
index 8a7f15d8d1a..bfc2c282f4c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
@@ -101,12 +101,14 @@ export default {
     </span>
   </state-container>
   <state-container v-else :mr="mr" status="failed" :actions="actions">
-    <span class="gl-font-weight-bold">
-      <span v-if="mr.mergeError" class="has-error-message" data-testid="merge-error">
-        {{ mergeError }}
-      </span>
-      <span v-else> {{ s__('mrWidget|Merge failed.') }} </span>
-      <span :class="{ 'has-custom-error': mr.mergeError }"> {{ timerText }} </span>
+    <span
+      v-if="mr.mergeError"
+      class="has-error-message gl-font-weight-bold"
+      data-testid="merge-error"
+    >
+      {{ mergeError }}
     </span>
+    <span v-else class="gl-font-weight-bold"> {{ s__('mrWidget|Merge failed.') }} </span>
+    <span :class="{ 'has-custom-error': mr.mergeError }"> {{ timerText }} </span>
   </state-container>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue
index 51ac2576f75..c94718ca756 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue
@@ -2,6 +2,7 @@
 import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests';
 import simplePoll from '~/lib/utils/simple_poll';
 import MergeRequest from '~/merge_request';
+import BoldText from '~/vue_merge_request_widget/components/bold_text.vue';
 import eventHub from '../../event_hub';
 import { MERGE_ACTIVE_STATUS_PHRASES, STATE_MACHINE } from '../../constants';
 import StatusIcon from '../mr_widget_status_icon.vue';
@@ -12,6 +13,7 @@ const { MERGE_FAILURE } = transitions;
 export default {
   name: 'MRWidgetMerging',
   components: {
+    BoldText,
     StatusIcon,
   },
   props: {
@@ -83,11 +85,9 @@ export default {
 <template>
   <div class="mr-widget-body mr-state-locked media">
     <status-icon status="loading" />
-    <div class="media-body">
-      <h4>
-        {{ mergeStatus.message }}
-        <gl-emoji :data-name="mergeStatus.emoji" />
-      </h4>
+    <div class="media-body" data-testid="merging-state">
+      <bold-text :message="mergeStatus.message" />
+      <gl-emoji :data-name="mergeStatus.emoji" />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
index 5e073bf7c04..f1ddf94597b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
@@ -63,12 +63,14 @@ export default {
     <status-icon :show-disabled-button="true" status="failed" />
 
     <div class="media-body space-children">
-      <span class="gl-font-weight-bold js-branch-text" data-testid="widget-content">
-        <gl-sprintf :message="warning">
-          <template #code="{ content }">
-            <code>{{ content }}</code>
-          </template>
-        </gl-sprintf>
+      <span class="js-branch-text" data-testid="widget-content">
+        <span class="gl-font-weight-bold">
+          <gl-sprintf :message="warning">
+            <template #code="{ content }">
+              <code>{{ content }}</code>
+            </template>
+          </gl-sprintf>
+        </span>
         {{ restore }}
         <gl-icon
           v-gl-tooltip
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue
index d837551a813..536e61e57d3 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue
@@ -1,9 +1,17 @@
 <script>
+import { s__ } from '~/locale';
+import BoldText from '~/vue_merge_request_widget/components/bold_text.vue';
 import StatusIcon from '../mr_widget_status_icon.vue';
 
+const message = s__(
+  'mrWidget|%{boldStart}Ready to be merged automatically.%{boldEnd} Ask someone with write access to this repository to merge this request.',
+);
+
 export default {
   name: 'MRWidgetNotAllowed',
+  message,
   components: {
+    BoldText,
     StatusIcon,
   },
 };
@@ -13,12 +21,7 @@ export default {
   <div class="mr-widget-body media">
     <status-icon status="success" />
     <div class="media-body space-children">
-      <span class="gl-font-weight-bold">
-        {{
-          s__(`mrWidget|Ready to be merged automatically.
-Ask someone with write access to this repository to merge this request`)
-        }}
-      </span>
+      <bold-text :message="$options.message" />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue
index 13920daca15..beb6310992f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue
@@ -1,10 +1,18 @@
 <script>
+import { s__ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import BoldText from '~/vue_merge_request_widget/components/bold_text.vue';
 import StatusIcon from '../mr_widget_status_icon.vue';
 
+const message = s__(
+  "mrWidget|%{boldStart}Merge blocked:%{boldEnd} pipeline must succeed. It's waiting for a manual action to continue.",
+);
+
 export default {
   name: 'MRWidgetPipelineBlocked',
+  message,
   components: {
+    BoldText,
     StatusIcon,
   },
   mixins: [glFeatureFlagMixin()],
@@ -14,13 +22,7 @@ export default {
   <div class="mr-widget-body media">
     <status-icon status="failed" />
     <div class="media-body space-children">
-      <span class="gl-font-weight-bold">
-        {{
-          s__(
-            `mrWidget|Merge blocked: pipeline must succeed. It's waiting for a manual action to continue.`,
-          )
-        }}
-      </span>
+      <bold-text :message="$options.message" />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
index d687f0346c7..ec6c2cf34c0 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
@@ -1,16 +1,24 @@
 <script>
 import { GlButton, GlSkeletonLoader } from '@gitlab/ui';
 import { createAlert } from '~/flash';
-import { __ } from '~/locale';
+import { __, s__ } from '~/locale';
 import toast from '~/vue_shared/plugins/global_toast';
 import simplePoll from '~/lib/utils/simple_poll';
+import BoldText from '~/vue_merge_request_widget/components/bold_text.vue';
 import eventHub from '../../event_hub';
 import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
 import rebaseQuery from '../../queries/states/rebase.query.graphql';
 import StateContainer from '../state_container.vue';
 
+const i18n = {
+  rebaseError: s__(
+    'mrWidget|%{boldStart}Merge blocked:%{boldEnd} the source branch must be rebased onto the target branch.',
+  ),
+};
+
 export default {
   name: 'MRWidgetRebase',
+  i18n,
   apollo: {
     state: {
       query: rebaseQuery,
@@ -21,6 +29,7 @@ export default {
     },
   },
   components: {
+    BoldText,
     GlSkeletonLoader,
     GlButton,
     StateContainer,
@@ -69,9 +78,6 @@ export default {
       }
       return 'success';
     },
-    fastForwardMergeText() {
-      return __('Merge blocked: the source branch must be rebased onto the target branch.');
-    },
     showRebaseWithoutPipeline() {
       return (
         !this.mr.onlyAllowMergeIfPipelineSucceeds ||
@@ -146,29 +152,29 @@ export default {
     <template v-if="!isLoading">
       <span
         v-if="rebaseInProgress || isMakingRequest"
-        class="gl-ml-0! gl-text-body! gl-font-weight-bold"
+        class="gl-ml-0! gl-text-body!"
         data-testid="rebase-message"
-        >{{ __('Rebase in progress') }}</span
+        >{{ s__('mrWidget|Rebase in progress') }}</span
       >
       <span
         v-if="!rebaseInProgress && !canPushToSourceBranch"
-        class="gl-text-body! gl-font-weight-bold gl-ml-0!"
+        class="gl-text-body! gl-ml-0!"
         data-testid="rebase-message"
-        >{{ fastForwardMergeText }}</span
       >
+        <bold-text :message="$options.i18n.rebaseError" />
+      </span>
       <div
         v-if="!rebaseInProgress && canPushToSourceBranch && !isMakingRequest"
         class="accept-merge-holder clearfix js-toggle-container media gl-md-display-flex gl-flex-wrap gl-flex-grow-1"
       >
         <span
           v-if="!rebasingError"
-          class="gl-font-weight-bold gl-w-100 gl-md-w-auto gl-flex-grow-1 gl-ml-0! gl-text-body! gl-md-mr-3"
+          class="gl-w-100 gl-md-w-auto gl-flex-grow-1 gl-ml-0! gl-text-body! gl-md-mr-3"
           data-testid="rebase-message"
           data-qa-selector="no_fast_forward_message_content"
-          >{{
-            __('Merge blocked: the source branch must be rebased onto the target branch.')
-          }}</span
         >
+          <bold-text :message="$options.i18n.rebaseError" />
+        </span>
         <span
           v-else
           class="gl-font-weight-bold danger gl-w-100 gl-md-w-auto gl-flex-grow-1 gl-md-mr-3"
@@ -187,7 +193,7 @@ export default {
         class="gl-align-self-start"
         @click="rebase"
       >
-        {{ __('Rebase') }}
+        {{ s__('mrWidget|Rebase') }}
       </gl-button>
       <gl-button
         v-if="showRebaseWithoutPipeline"
@@ -199,7 +205,7 @@ export default {
         class="gl-align-self-start gl-mr-2"
         @click="rebaseWithoutCi"
       >
-        {{ __('Rebase without pipeline') }}
+        {{ s__('mrWidget|Rebase without pipeline') }}
       </gl-button>
     </template>
   </state-container>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue
index 853895a4296..1896851952b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue
@@ -2,11 +2,13 @@
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { s__ } from '~/locale';
+import BoldText from '~/vue_merge_request_widget/components/bold_text.vue';
 import StatusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'PipelineFailed',
   components: {
+    BoldText,
     GlLink,
     GlSprintf,
     StatusIcon,
@@ -24,7 +26,10 @@ export default {
   },
   i18n: {
     failedMessage: s__(
-      `mrWidget|Merge blocked: pipeline must succeed. Push a commit that fixes the failure, or %{linkStart}learn about other solutions.%{linkEnd}`,
+      `mrWidget|%{boldStart}Merge blocked:%{boldEnd} pipeline must succeed. Push a commit that fixes the failure or %{linkStart}learn about other solutions.%{linkEnd}`,
+    ),
+    blockedMessage: s__(
+      "mrWidget|%{boldStart}Merge blocked:%{boldEnd} pipeline must succeed. It's waiting for a manual action to continue.",
     ),
   },
 };
@@ -34,20 +39,17 @@ export default {
   <div class="mr-widget-body media">
     <status-icon status="failed" />
     <div class="media-body space-children">
-      <span class="gl-font-weight-bold">
-        <span v-if="mr.isPipelineBlocked">
-          {{
-            s__(
-              `mrWidget|Merge blocked: pipeline must succeed. It's waiting for a manual action to continue.`,
-            )
-          }}
-        </span>
+      <span>
+        <bold-text v-if="mr.isPipelineBlocked" :message="$options.i18n.blockedMessage" />
         <gl-sprintf v-else :message="$options.i18n.failedMessage">
           <template #link="{ content }">
             <gl-link :href="troubleshootingDocsPath" target="_blank">
               {{ content }}
             </gl-link>
           </template>
+          <template #bold="{ content }">
+            <span class="gl-font-weight-bold">{{ content }}</span>
+          </template>
         </gl-sprintf>
       </span>
     </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue
index 27919f90cc3..2aa345b420e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue
@@ -1,11 +1,13 @@
 <script>
 import { GlButton } from '@gitlab/ui';
+import BoldText from '~/vue_merge_request_widget/components/bold_text.vue';
 import { I18N_SHA_MISMATCH } from '../../i18n';
 import StateContainer from '../state_container.vue';
 
 export default {
   name: 'ShaMismatch',
   components: {
+    BoldText,
     GlButton,
     StateContainer,
   },
@@ -24,10 +26,10 @@ export default {
 <template>
   <state-container :mr="mr" status="failed">
     <span
-      class="gl-font-weight-bold gl-md-mr-3 gl-flex-grow-1 gl-ml-0! gl-text-body!"
+      class="gl-md-mr-3 gl-flex-grow-1 gl-ml-0! gl-text-body!"
       data-qa-selector="head_mismatch_content"
     >
-      {{ $options.i18n.I18N_SHA_MISMATCH.warningMessage }}
+      <bold-text :message="$options.i18n.I18N_SHA_MISMATCH.warningMessage" />
     </span>
     <template #actions>
       <gl-button
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
index 9f3748599dc..0fd5551979d 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
@@ -1,11 +1,17 @@
 <script>
 import { GlButton } from '@gitlab/ui';
+import { s__ } from '~/locale';
 import notesEventHub from '~/notes/event_hub';
+import BoldText from '~/vue_merge_request_widget/components/bold_text.vue';
 import StateContainer from '../state_container.vue';
 
+const message = s__('mrWidget|%{boldStart}Merge blocked:%{boldEnd} all threads must be resolved.');
+
 export default {
   name: 'UnresolvedDiscussions',
+  message,
   components: {
+    BoldText,
     GlButton,
     StateContainer,
   },
@@ -25,10 +31,8 @@ export default {
 
 <template>
   <state-container :mr="mr" status="failed">
-    <span
-      class="gl-ml-3 gl-font-weight-bold gl-w-100 gl-flex-grow-1 gl-md-mr-3 gl-ml-0! gl-text-body!"
-    >
-      {{ s__('mrWidget|Merge blocked: all threads must be resolved.') }}
+    <span class="gl-ml-3 gl-w-100 gl-flex-grow-1 gl-md-mr-3 gl-ml-0! gl-text-body!">
+      <bold-text :message="$options.message" />
     </span>
     <template #actions>
       <gl-button
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
index 1004f2ab3ad..02d4f2499fe 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
@@ -4,6 +4,7 @@ import { produce } from 'immer';
 import { createAlert } from '~/flash';
 import { __, s__ } from '~/locale';
 import MergeRequest from '~/merge_request';
+import BoldText from '~/vue_merge_request_widget/components/bold_text.vue';
 import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
 import getStateQuery from '../../queries/get_state.query.graphql';
 import draftQuery from '../../queries/states/draft.query.graphql';
@@ -12,14 +13,12 @@ import StateContainer from '../state_container.vue';
 
 // Export for testing
 export const MSG_SOMETHING_WENT_WRONG = __('Something went wrong. Please try again.');
-export const MSG_MERGE_BLOCKED = __(
-  "Merge blocked: merge request must be marked as ready. It's still marked as draft.",
-);
 export const MSG_MARK_READY = s__('mrWidget|Mark as ready');
 
 export default {
   name: 'WorkInProgress',
   components: {
+    BoldText,
     GlButton,
     StateContainer,
   },
@@ -128,15 +127,19 @@ export default {
         });
     },
   },
-  MSG_MERGE_BLOCKED,
+  i18n: {
+    removeDraftStatus: s__(
+      'mrWidget|%{boldStart}Merge blocked:%{boldEnd} Select %{boldStart}Mark as ready%{boldEnd} to remove it from Draft status.',
+    ),
+  },
   MSG_MARK_READY,
 };
 </script>
 
 <template>
   <state-container :mr="mr" status="failed">
-    <span class="gl-font-weight-bold gl-ml-0! gl-text-body! gl-flex-grow-1">
-      {{ $options.MSG_MERGE_BLOCKED }}
+    <span class="gl-ml-0! gl-text-body! gl-flex-grow-1">
+      <bold-text :message="$options.i18n.removeDraftStatus" />
     </span>
     <template #actions>
       <gl-button
diff --git a/app/assets/javascripts/vue_merge_request_widget/constants.js b/app/assets/javascripts/vue_merge_request_widget/constants.js
index 7109bed7743..85ae298fcea 100644
--- a/app/assets/javascripts/vue_merge_request_widget/constants.js
+++ b/app/assets/javascripts/vue_merge_request_widget/constants.js
@@ -4,9 +4,7 @@ import { stateToComponentMap as classStateMap, stateKey } from './stores/state_m
 
 export const SUCCESS = 'success';
 export const WARNING = 'warning';
-export const DANGER = 'danger';
 export const INFO = 'info';
-export const CONFIRM = 'confirm';
 
 export const MWPS_MERGE_STRATEGY = 'merge_when_pipeline_succeeds';
 export const MTWPS_MERGE_STRATEGY = 'add_to_merge_train_when_pipeline_succeeds';
@@ -28,39 +26,39 @@ export const SP_ICON_NAME = 'status_notfound';
 
 export const MERGE_ACTIVE_STATUS_PHRASES = [
   {
-    message: s__('mrWidget|Merging! Drum roll, please…'),
+    message: s__('mrWidget|%{boldStart}Merging!%{boldEnd} Drum roll, please…'),
     emoji: 'drum',
   },
   {
-    message: s__("mrWidget|Merging! We're almost there…"),
+    message: s__("mrWidget|%{boldStart}Merging!%{boldEnd} We're almost there…"),
     emoji: 'sparkles',
   },
   {
-    message: s__('mrWidget|Merging! Changes will land soon…'),
+    message: s__('mrWidget|%{boldStart}Merging!%{boldEnd} Changes will land soon…'),
     emoji: 'airplane_arriving',
   },
   {
-    message: s__('mrWidget|Merging! Changes are being shipped…'),
+    message: s__('mrWidget|%{boldStart}Merging!%{boldEnd} Changes are being shipped…'),
     emoji: 'ship',
   },
   {
-    message: s__("mrWidget|Merging! Everything's good…"),
+    message: s__("mrWidget|%{boldStart}Merging!%{boldEnd} Everything's good…"),
     emoji: 'relieved',
   },
   {
-    message: s__('mrWidget|Merging! This is going to be great…'),
+    message: s__('mrWidget|%{boldStart}Merging!%{boldEnd} This is going to be great…'),
     emoji: 'heart_eyes',
   },
   {
-    message: s__('mrWidget|Merging! Lift-off in 5… 4… 3…'),
+    message: s__('mrWidget|%{boldStart}Merging!%{boldEnd} Lift-off in 5… 4… 3…'),
     emoji: 'rocket',
   },
   {
-    message: s__('mrWidget|Merging! The changes are leaving the station…'),
+    message: s__('mrWidget|%{boldStart}Merging!%{boldEnd} The changes are leaving the station…'),
     emoji: 'bullettrain_front',
   },
   {
-    message: s__('mrWidget|Merging! Take a deep breath and relax…'),
+    message: s__('mrWidget|%{boldStart}Merging!%{boldEnd} Take a deep breath and relax…'),
     emoji: 'sunglasses',
   },
 ];
diff --git a/app/assets/javascripts/vue_merge_request_widget/i18n.js b/app/assets/javascripts/vue_merge_request_widget/i18n.js
index 5380bcae003..5ca56074031 100644
--- a/app/assets/javascripts/vue_merge_request_widget/i18n.js
+++ b/app/assets/javascripts/vue_merge_request_widget/i18n.js
@@ -17,7 +17,7 @@ export const SQUASH_BEFORE_MERGE = {
 };
 
 export const I18N_SHA_MISMATCH = {
-  warningMessage: __('Merge blocked: new changes were just added.'),
+  warningMessage: s__('mrWidget|%{boldStart}Merge blocked:%{boldEnd} new changes were just added.'),
   actionButtonLabel: __('Review changes'),
 };
 
diff --git a/app/assets/javascripts/vue_shared/components/url_sync.vue b/app/assets/javascripts/vue_shared/components/url_sync.vue
index ba5bce32b40..ad81c14d9e5 100644
--- a/app/assets/javascripts/vue_shared/components/url_sync.vue
+++ b/app/assets/javascripts/vue_shared/components/url_sync.vue
@@ -1,7 +1,9 @@
 <script>
-import { historyPushState } from '~/lib/utils/common_utils';
+import { historyPushState, historyReplaceState } from '~/lib/utils/common_utils';
 import { mergeUrlParams, setUrlParams } from '~/lib/utils/url_utility';
 
+export const HISTORY_PUSH_UPDATE_METHOD = 'push';
+export const HISTORY_REPLACE_UPDATE_METHOD = 'replace';
 export const URL_SET_PARAMS_STRATEGY = 'set';
 export const URL_MERGE_PARAMS_STRATEGY = 'merge';
 
@@ -24,6 +26,13 @@ export default {
       default: URL_MERGE_PARAMS_STRATEGY,
       validator: (value) => [URL_MERGE_PARAMS_STRATEGY, URL_SET_PARAMS_STRATEGY].includes(value),
     },
+    historyUpdateMethod: {
+      type: String,
+      required: false,
+      default: HISTORY_PUSH_UPDATE_METHOD,
+      validator: (value) =>
+        [HISTORY_PUSH_UPDATE_METHOD, HISTORY_REPLACE_UPDATE_METHOD].includes(value),
+    },
   },
   watch: {
     query: {
@@ -42,7 +51,12 @@ export default {
         this.urlParamsUpdateStrategy === URL_SET_PARAMS_STRATEGY
           ? setUrlParams(this.query, window.location.href, true, true, true)
           : mergeUrlParams(newQuery, window.location.href, { spreadArrays: true });
-      historyPushState(url);
+
+      if (this.historyUpdateMethod === HISTORY_PUSH_UPDATE_METHOD) {
+        historyPushState(url);
+      } else {
+        historyReplaceState(url);
+      }
     },
   },
   render() {