Add latest changes from gitlab-org/gitlab@14-9-stable-eev14.9.0-rc42

2 files changed, 47 insertions, 2 deletions

diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index cbf38984e23..e1020ce656b 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -48,6 +48,11 @@ export default {
       required: false,
       default: '',
     },
+    enablePreview: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     addSpacingClasses: {
       type: Boolean,
       required: false,
@@ -113,6 +118,7 @@ export default {
       markdownPreviewLoading: false,
       previewMarkdown: false,
       suggestions: this.note.suggestions || [],
+      debouncedFetchMarkdownLoading: false,
     };
   },
   computed: {
@@ -198,12 +204,22 @@ export default {
         const justRemovedAll = hadAll && !hasAll;
 
         if (justAddedAll) {
+          this.debouncedFetchMarkdownLoading = false;
           this.debouncedFetchMarkdown();
         } else if (justRemovedAll) {
+          this.debouncedFetchMarkdownLoading = true;
           this.referencedUsers = [];
         }
       },
     },
+    enablePreview: {
+      immediate: true,
+      handler(newVal) {
+        if (!newVal) {
+          this.showWriteTab();
+        }
+      },
+    },
   },
   mounted() {
     // GLForm class handles all the toolbar buttons
@@ -271,7 +287,12 @@ export default {
     },
 
     debouncedFetchMarkdown: debounce(function debouncedFetchMarkdown() {
-      return this.fetchMarkdown();
+      return this.fetchMarkdown().then(() => {
+        if (this.debouncedFetchMarkdownLoading) {
+          this.referencedUsers = [];
+          this.debouncedFetchMarkdownLoading = false;
+        }
+      });
     }, 400),
 
     renderMarkdown(data = {}) {
@@ -301,6 +322,7 @@ export default {
       :preview-markdown="previewMarkdown"
       :line-content="lineContent"
       :can-suggest="canSuggest"
+      :enable-preview="enablePreview"
       :show-suggest-popover="showSuggestPopover"
       :suggestion-start-index="suggestionsStartIndex"
       data-testid="markdownHeader"
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 3b99afa9e3d..13189670e17 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -1,7 +1,13 @@
 <script>
 import { GlPopover, GlButton, GlTooltipDirective, GlTabs, GlTab } from '@gitlab/ui';
 import $ from 'jquery';
-import { keysFor, BOLD_TEXT, ITALIC_TEXT, LINK_TEXT } from '~/behaviors/shortcuts/keybindings';
+import {
+  keysFor,
+  BOLD_TEXT,
+  ITALIC_TEXT,
+  STRIKETHROUGH_TEXT,
+  LINK_TEXT,
+} from '~/behaviors/shortcuts/keybindings';
 import { getSelectedFragment } from '~/lib/utils/common_utils';
 import { s__, __ } from '~/locale';
 import { CopyAsGFM } from '../../../behaviors/markdown/copy_as_gfm';
@@ -43,6 +49,11 @@ export default {
       required: false,
       default: 0,
     },
+    enablePreview: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
@@ -144,6 +155,7 @@ export default {
   shortcuts: {
     bold: keysFor(BOLD_TEXT),
     italic: keysFor(ITALIC_TEXT),
+    strikethrough: keysFor(STRIKETHROUGH_TEXT),
     link: keysFor(LINK_TEXT),
   },
   i18n: {
@@ -164,6 +176,7 @@ export default {
         @click="writeMarkdownTab($event)"
       />
       <gl-tab
+        v-if="enablePreview"
         title-link-class="gl-pt-3 gl-px-3 js-md-preview-button"
         :title="$options.i18n.previewTabTitle"
         :active="previewMarkdown"
@@ -194,6 +207,16 @@ export default {
             icon="italic"
           />
           <toolbar-button
+            tag="~~"
+            :button-title="
+              sprintf(s__('MarkdownEditor|Add strikethrough text (%{modifierKey}⇧X)'), {
+                modifierKey,
+              })
+            "
+            :shortcuts="$options.shortcuts.strikethrough"
+            icon="strikethrough"
+          />
+          <toolbar-button
             :prepend="true"
             :tag="tag"
             :button-title="__('Insert a quote')"