Add latest changes from gitlab-org/gitlab@15-2-stable-eev15.2.0-rc42

2 files changed, 15 insertions, 30 deletions

diff --git a/app/assets/javascripts/milestones/components/delete_milestone_modal.vue b/app/assets/javascripts/milestones/components/delete_milestone_modal.vue
index 34f9fe778ea..3a13c123d77 100644
--- a/app/assets/javascripts/milestones/components/delete_milestone_modal.vue
+++ b/app/assets/javascripts/milestones/components/delete_milestone_modal.vue
@@ -1,6 +1,6 @@
 <script>
-import { GlSafeHtmlDirective as SafeHtml, GlModal } from '@gitlab/ui';
-import createFlash from '~/flash';
+import { GlSprintf, GlModal } from '@gitlab/ui';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
 import { redirectTo } from '~/lib/utils/url_utility';
@@ -10,9 +10,7 @@ import eventHub from '../event_hub';
 export default {
   components: {
     GlModal,
-  },
-  directives: {
-    SafeHtml,
+    GlSprintf,
   },
   props: {
     issueCount: {
@@ -38,20 +36,10 @@ export default {
   },
   computed: {
     text() {
-      const milestoneTitle = sprintf('<strong>%{milestoneTitle}</strong>', {
-        milestoneTitle: this.milestoneTitle,
-      });
-
       if (this.issueCount === 0 && this.mergeRequestCount === 0) {
-        return sprintf(
-          s__(`Milestones|
+        return s__(`Milestones|
 You’re about to permanently delete the milestone %{milestoneTitle}.
-This milestone is not currently used in any issues or merge requests.`),
-          {
-            milestoneTitle,
-          },
-          false,
-        );
+This milestone is not currently used in any issues or merge requests.`);
       }
 
       return sprintf(
@@ -59,7 +47,6 @@ This milestone is not currently used in any issues or merge requests.`),
 You’re about to permanently delete the milestone %{milestoneTitle} and remove it from %{issuesWithCount} and %{mergeRequestsWithCount}.
 Once deleted, it cannot be undone or recovered.`),
         {
-          milestoneTitle,
           issuesWithCount: n__('%d issue', '%d issues', this.issueCount),
           mergeRequestsWithCount: n__(
             '%d merge request',
@@ -98,13 +85,13 @@ Once deleted, it cannot be undone or recovered.`),
           });
 
           if (error.response && error.response.status === 404) {
-            createFlash({
+            createAlert({
               message: sprintf(s__('Milestones|Milestone %{milestoneTitle} was not found'), {
                 milestoneTitle: this.milestoneTitle,
               }),
             });
           } else {
-            createFlash({
+            createAlert({
               message: sprintf(s__('Milestones|Failed to delete milestone %{milestoneTitle}'), {
                 milestoneTitle: this.milestoneTitle,
               }),
@@ -132,6 +119,10 @@ Once deleted, it cannot be undone or recovered.`),
     :action-cancel="$options.cancelProps"
     @primary="onSubmit"
   >
-    <p v-safe-html="text"></p>
+    <gl-sprintf :message="text">
+      <template #milestoneTitle>
+        <strong>{{ milestoneTitle }}</strong>
+      </template>
+    </gl-sprintf>
   </gl-modal>
 </template>
diff --git a/app/assets/javascripts/milestones/milestone.js b/app/assets/javascripts/milestones/milestone.js
index 05102f73f92..8f2721c2a5b 100644
--- a/app/assets/javascripts/milestones/milestone.js
+++ b/app/assets/javascripts/milestones/milestone.js
@@ -1,33 +1,27 @@
 import createFlash from '~/flash';
 import { sanitize } from '~/lib/dompurify';
 import axios from '~/lib/utils/axios_utils';
-import { historyPushState } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
-import { GlTabsBehavior, TAB_SHOWN_EVENT } from '~/tabs';
+import { GlTabsBehavior, TAB_SHOWN_EVENT, HISTORY_TYPE_HASH } from '~/tabs';
 
 export default class Milestone {
   constructor() {
     this.tabsEl = document.querySelector('.js-milestone-tabs');
-    this.glTabs = new GlTabsBehavior(this.tabsEl);
     this.loadedTabs = new WeakSet();
 
     this.bindTabsSwitching();
-    this.loadInitialTab();
+    // eslint-disable-next-line no-new
+    new GlTabsBehavior(this.tabsEl, { history: HISTORY_TYPE_HASH });
   }
 
   bindTabsSwitching() {
     this.tabsEl.addEventListener(TAB_SHOWN_EVENT, (event) => {
       const tab = event.target;
       const { activeTabPanel } = event.detail;
-      historyPushState(tab.getAttribute('href'));
       this.loadTab(tab, activeTabPanel);
     });
   }
 
-  loadInitialTab() {
-    const tab = this.tabsEl.querySelector(`a[href="${window.location.hash}"]`);
-    this.glTabs.activateTab(tab || this.glTabs.activeTab);
-  }
   loadTab(tab, tabPanel) {
     const { endpoint } = tab.dataset;