Add latest changes from gitlab-org/gitlab@master

8 files changed, 322 insertions, 327 deletions

diff --git a/app/assets/javascripts/vue_shared/components/markdown/comment_templates_dropdown.vue b/app/assets/javascripts/vue_shared/components/markdown/comment_templates_dropdown.vue
index feee132629f..1377a40fcf0 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/comment_templates_dropdown.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/comment_templates_dropdown.vue
@@ -86,6 +86,7 @@ export default {
       category="tertiary"
       placement="right"
       searchable
+      size="small"
       class="comment-template-dropdown"
       :searching="$apollo.queries.savedReplies.loading"
       @shown="fetchCommentTemplates"
diff --git a/app/assets/javascripts/vue_shared/components/markdown/drawio_toolbar_button.vue b/app/assets/javascripts/vue_shared/components/markdown/drawio_toolbar_button.vue
index a66becb5c92..e88c7f75745 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/drawio_toolbar_button.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/drawio_toolbar_button.vue
@@ -43,6 +43,7 @@ export default {
     :aria-label="__('Insert or edit diagram')"
     category="tertiary"
     icon="diagram"
+    size="small"
     @click="launchDrawioEditor"
   />
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/editor_mode_dropdown.vue b/app/assets/javascripts/vue_shared/components/markdown/editor_mode_dropdown.vue
deleted file mode 100644
index 7803d6f53e0..00000000000
--- a/app/assets/javascripts/vue_shared/components/markdown/editor_mode_dropdown.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<script>
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import { __ } from '~/locale';
-
-export default {
-  components: {
-    GlDropdown,
-    GlDropdownItem,
-  },
-  props: {
-    size: {
-      type: String,
-      required: false,
-      default: 'medium',
-    },
-    value: {
-      type: String,
-      required: true,
-    },
-  },
-  computed: {
-    markdownEditorSelected() {
-      return this.value === 'markdown';
-    },
-    text() {
-      return this.markdownEditorSelected ? __('Editing markdown') : __('Editing rich text');
-    },
-  },
-};
-</script>
-<template>
-  <gl-dropdown
-    category="tertiary"
-    data-qa-selector="editing_mode_switcher"
-    :size="size"
-    :text="text"
-    right
-  >
-    <gl-dropdown-item
-      is-check-item
-      :is-checked="!markdownEditorSelected"
-      @click="$emit('input', 'richText')"
-      ><div class="gl-font-weight-bold">{{ __('Rich text') }}</div>
-      <div class="gl-text-secondary">
-        {{ __('View the formatted output in real-time as you edit.') }}
-      </div>
-    </gl-dropdown-item>
-    <gl-dropdown-item
-      is-check-item
-      :is-checked="markdownEditorSelected"
-      @click="$emit('input', 'markdown')"
-      ><div class="gl-font-weight-bold">{{ __('Markdown') }}</div>
-      <div class="gl-text-secondary">
-        {{ __('View and edit markdown, with the option to preview the formatted output.') }}
-      </div></gl-dropdown-item
-    >
-  </gl-dropdown>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/editor_mode_switcher.vue b/app/assets/javascripts/vue_shared/components/markdown/editor_mode_switcher.vue
new file mode 100644
index 00000000000..645975ca565
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/markdown/editor_mode_switcher.vue
@@ -0,0 +1,32 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  components: {
+    GlButton,
+  },
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    markdownEditorSelected() {
+      return this.value === 'markdown';
+    },
+    text() {
+      return this.markdownEditorSelected ? __('Switch to rich text') : __('Switch to Markdown');
+    },
+  },
+};
+</script>
+<template>
+  <gl-button
+    class="btn btn-default btn-sm gl-button btn-default-tertiary"
+    data-qa-selector="editing_mode_switcher"
+    @click="$emit('input')"
+    >{{ text }}</gl-button
+  >
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index cc153747765..3c4070105d1 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import $ from 'jquery';
 import { debounce, unescape } from 'lodash';
 import { createAlert } from '~/alert';
@@ -27,6 +27,7 @@ export default {
   },
   directives: {
     SafeHtml,
+    GlTooltip: GlTooltipDirective,
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
@@ -245,7 +246,7 @@ export default {
       immediate: true,
       handler(newVal) {
         if (!newVal) {
-          this.showWriteTab();
+          this.hidePreview();
         }
       },
     },
@@ -277,7 +278,7 @@ export default {
     }
   },
   methods: {
-    showPreviewTab() {
+    showPreview() {
       if (this.previewMarkdown) return;
 
       this.previewMarkdown = true;
@@ -297,7 +298,7 @@ export default {
         this.renderMarkdown();
       }
     },
-    showWriteTab() {
+    hidePreview() {
       this.markdownPreview = '';
       this.previewMarkdown = false;
     },
@@ -365,9 +366,11 @@ export default {
       :drawio-enabled="drawioEnabled"
       data-testid="markdownHeader"
       :restricted-tool-bar-items="restrictedToolBarItems"
-      @preview-markdown="showPreviewTab"
-      @write-markdown="showWriteTab"
+      :show-content-editor-switcher="showContentEditorSwitcher"
+      @showPreview="showPreview"
+      @hidePreview="hidePreview"
       @handleSuggestDismissed="() => $emit('handleSuggestDismissed')"
+      @enableContentEditor="$emit('enableContentEditor')"
     />
     <div v-show="!previewMarkdown" class="md-write-holder">
       <div class="zen-backdrop">
@@ -384,8 +387,6 @@ export default {
           :quick-actions-docs-path="quickActionsDocsPath"
           :can-attach-file="canAttachFile"
           :show-comment-tool-bar="showCommentToolBar"
-          :show-content-editor-switcher="showContentEditorSwitcher"
-          @enableContentEditor="$emit('enableContentEditor')"
         />
       </div>
     </div>
@@ -393,7 +394,7 @@ export default {
       <div
         v-show="previewMarkdown"
         ref="markdown-preview"
-        class="js-vue-md-preview md-preview-holder"
+        class="js-vue-md-preview md-preview-holder gl-px-5"
       >
         <suggestions
           v-if="hasSuggestion"
@@ -410,13 +411,13 @@ export default {
         v-show="previewMarkdown"
         ref="markdown-preview"
         v-safe-html:[$options.safeHtmlConfig]="markdownPreview"
-        class="js-vue-md-preview md md-preview-holder"
+        class="js-vue-md-preview md md-preview-holder gl-px-5"
       ></div>
     </template>
     <div
       v-if="referencedCommands && previewMarkdown && !markdownPreviewLoading"
       v-safe-html:[$options.safeHtmlConfig]="referencedCommands"
-      class="referenced-commands gl-mx-n5"
+      class="referenced-commands gl-mx-2 gl-mb-2 gl-px-4 gl-rounded-bottom-left-base gl-rounded-bottom-right-base"
       data-testid="referenced-commands"
     ></div>
     <div v-if="shouldShowReferencedUsers" class="referenced-users">
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 53a3913ebda..17d9a2daf0b 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlPopover, GlButton, GlTooltipDirective, GlTabs, GlTab } from '@gitlab/ui';
+import { GlPopover, GlButton, GlTooltipDirective } from '@gitlab/ui';
 import $ from 'jquery';
 import {
   keysFor,
@@ -19,17 +19,17 @@ import { updateText } from '~/lib/utils/text_markdown';
 import ToolbarButton from './toolbar_button.vue';
 import DrawioToolbarButton from './drawio_toolbar_button.vue';
 import CommentTemplatesDropdown from './comment_templates_dropdown.vue';
+import EditorModeSwitcher from './editor_mode_switcher.vue';
 
 export default {
   components: {
     ToolbarButton,
     GlPopover,
     GlButton,
-    GlTabs,
-    GlTab,
     DrawioToolbarButton,
     CommentTemplatesDropdown,
     AiActionsDropdown: () => import('ee_component/ai/components/ai_actions_dropdown.vue'),
+    EditorModeSwitcher,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -91,6 +91,11 @@ export default {
       required: false,
       default: false,
     },
+    showContentEditorSwitcher: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -121,6 +126,9 @@ export default {
       const expandText = s__('MarkdownEditor|Click to expand');
       return [`<details><summary>${expandText}</summary>`, `{text}`, '</details>'].join('\n');
     },
+    showEditorModeSwitcher() {
+      return this.showContentEditorSwitcher && !this.previewMarkdown;
+    },
   },
   watch: {
     showSuggestPopover() {
@@ -128,14 +136,14 @@ export default {
     },
   },
   mounted() {
-    $(document).on('markdown-preview:show.vue', this.previewMarkdownTab);
-    $(document).on('markdown-preview:hide.vue', this.writeMarkdownTab);
+    $(document).on('markdown-preview:show.vue', this.showMarkdownPreview);
+    $(document).on('markdown-preview:hide.vue', this.hideMarkdownPreview);
 
     this.updateSuggestPopoverVisibility();
   },
   beforeDestroy() {
-    $(document).off('markdown-preview:show.vue', this.previewMarkdownTab);
-    $(document).off('markdown-preview:hide.vue', this.writeMarkdownTab);
+    $(document).off('markdown-preview:show.vue', this.showMarkdownPreview);
+    $(document).off('markdown-preview:hide.vue', this.hideMarkdownPreview);
   },
   methods: {
     async updateSuggestPopoverVisibility() {
@@ -149,19 +157,15 @@ export default {
         (form.find('.js-vue-markdown-field').length && $(this.$el).closest('form')[0] === form[0])
       );
     },
-
-    previewMarkdownTab(event, form) {
-      if (event.target.blur) event.target.blur();
+    showMarkdownPreview(_, form) {
       if (!this.isValid(form)) return;
 
-      this.$emit('preview-markdown');
+      this.$emit('showPreview');
     },
-
-    writeMarkdownTab(event, form) {
-      if (event.target.blur) event.target.blur();
+    hideMarkdownPreview(_, form) {
       if (!this.isValid(form)) return;
 
-      this.$emit('write-markdown');
+      this.$emit('hidePreview');
     },
     handleSuggestDismissed() {
       this.$emit('handleSuggestDismissed');
@@ -204,6 +208,16 @@ export default {
         });
       }
     },
+    handleEditorModeChanged() {
+      this.$emit('enableContentEditor');
+    },
+    switchPreview() {
+      if (this.previewMarkdown) {
+        this.hideMarkdownPreview();
+      } else {
+        this.showMarkdownPreview();
+      }
+    },
   },
   shortcuts: {
     bold: keysFor(BOLD_TEXT),
@@ -214,225 +228,240 @@ export default {
     outdent: keysFor(OUTDENT_LINE),
   },
   i18n: {
-    writeTabTitle: __('Write'),
-    previewTabTitle: __('Preview'),
+    preview: __('Preview'),
+    hidePreview: __('Continue editing'),
   },
 };
 </script>
 
 <template>
-  <div class="md-header">
-    <gl-tabs content-class="gl-display-none">
-      <gl-tab
-        title-link-class="gl-py-4 gl-px-3 js-md-write-button"
-        :title="$options.i18n.writeTabTitle"
-        :active="!previewMarkdown"
-        data-testid="write-tab"
-        @click="writeMarkdownTab($event)"
-      />
-      <gl-tab
-        v-if="enablePreview"
-        title-link-class="gl-py-4 gl-px-3 js-md-preview-button"
-        :title="$options.i18n.previewTabTitle"
-        :active="previewMarkdown"
-        data-testid="preview-tab"
-        @click="previewMarkdownTab($event)"
-      />
-
-      <template #tabs-end>
-        <div
-          data-testid="md-header-toolbar"
-          :class="{ 'gl-display-none!': previewMarkdown }"
-          class="md-header-toolbar gl-ml-auto gl-py-2 gl-justify-content-center"
-        >
-          <template v-if="canSuggest">
-            <toolbar-button
-              ref="suggestButton"
-              :tag="mdSuggestion"
-              :prepend="true"
-              :button-title="__('Insert suggestion')"
-              :cursor-offset="4"
-              :tag-content="lineContent"
-              icon="doc-code"
-              data-qa-selector="suggestion_button"
-              class="js-suggestion-btn"
-              @click="handleSuggestDismissed"
-            />
-            <gl-popover
-              v-if="suggestPopoverVisible"
-              :target="$refs.suggestButton.$el"
-              :css-classes="['diff-suggest-popover']"
-              placement="bottom"
-              :show="suggestPopoverVisible"
-            >
-              <strong>{{ __('New! Suggest changes directly') }}</strong>
-              <p class="mb-2">
-                {{
-                  __(
-                    'Suggest code changes which can be immediately applied in one click. Try it out!',
-                  )
-                }}
-              </p>
-              <gl-button
-                variant="confirm"
-                category="primary"
-                size="small"
-                data-qa-selector="dismiss_suggestion_popover_button"
-                @click="handleSuggestDismissed"
-              >
-                {{ __('Got it') }}
-              </gl-button>
-            </gl-popover>
-          </template>
-          <ai-actions-dropdown
-            v-if="editorAiActions.length"
-            :actions="editorAiActions"
-            @input="insertIntoTextarea"
-          />
-          <toolbar-button
-            tag="**"
-            :button-title="
-              /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
-              sprintf(s__('MarkdownEditor|Add bold text (%{modifierKey}B)'), {
-                modifierKey,
-              }) /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */
-            "
-            :shortcuts="$options.shortcuts.bold"
-            icon="bold"
-          />
-          <toolbar-button
-            tag="_"
-            :button-title="
-              /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
-              sprintf(s__('MarkdownEditor|Add italic text (%{modifierKey}I)'), {
-                modifierKey,
-              }) /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */
-            "
-            :shortcuts="$options.shortcuts.italic"
-            icon="italic"
-          />
-          <toolbar-button
-            v-if="!restrictedToolBarItems.includes('strikethrough')"
-            tag="~~"
-            :button-title="
-              /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
-              sprintf(s__('MarkdownEditor|Add strikethrough text (%{modifierKey}⇧X)'), {
-                modifierKey /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */,
-              })
-            "
-            :shortcuts="$options.shortcuts.strikethrough"
-            icon="strikethrough"
-          />
-          <toolbar-button
-            v-if="!restrictedToolBarItems.includes('quote')"
-            :prepend="true"
-            :tag="tag"
-            :button-title="__('Insert a quote')"
-            icon="quote"
-            @click="handleQuote"
-          />
-          <toolbar-button tag="`" tag-block="```" :button-title="__('Insert code')" icon="code" />
-          <toolbar-button
-            tag="[{text}](url)"
-            tag-select="url"
-            :button-title="
-              /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
-              sprintf(s__('MarkdownEditor|Add a link (%{modifierKey}K)'), {
-                modifierKey,
-              }) /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */
-            "
-            :shortcuts="$options.shortcuts.link"
-            icon="link"
-          />
+  <div class="md-header gl-bg-gray-50 gl-px-2 gl-rounded-base gl-mx-2 gl-mt-2">
+    <div
+      class="gl-display-flex gl-align-items-center gl-flex-wrap"
+      :class="{
+        'gl-justify-content-end': previewMarkdown,
+        'gl-justify-content-space-between': !previewMarkdown,
+      }"
+    >
+      <div
+        data-testid="md-header-toolbar"
+        class="md-header-toolbar gl-display-flex gl-py-2 gl-flex-wrap"
+        :class="{ 'gl-display-none!': previewMarkdown }"
+      >
+        <template v-if="canSuggest">
           <toolbar-button
-            v-if="!restrictedToolBarItems.includes('bullet-list')"
+            ref="suggestButton"
+            :tag="mdSuggestion"
             :prepend="true"
-            tag="- "
-            :button-title="__('Add a bullet list')"
-            icon="list-bulleted"
+            :button-title="__('Insert suggestion')"
+            :cursor-offset="4"
+            :tag-content="lineContent"
+            icon="doc-code"
+            data-qa-selector="suggestion_button"
+            class="js-suggestion-btn"
+            @click="handleSuggestDismissed"
           />
-          <toolbar-button
-            v-if="!restrictedToolBarItems.includes('numbered-list')"
-            :prepend="true"
-            tag="1. "
-            :button-title="__('Add a numbered list')"
-            icon="list-numbered"
-          />
-          <toolbar-button
-            v-if="!restrictedToolBarItems.includes('task-list')"
-            :prepend="true"
-            tag="- [ ] "
-            :button-title="__('Add a checklist')"
-            icon="list-task"
-          />
-          <toolbar-button
-            v-if="!restrictedToolBarItems.includes('indent')"
-            class="gl-display-none"
-            :button-title="
-              /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
-              sprintf(s__('MarkdownEditor|Indent line (%{modifierKey}])'), {
-                modifierKey /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */,
-              })
-            "
-            :shortcuts="$options.shortcuts.indent"
-            command="indentLines"
-            icon="list-indent"
-          />
-          <toolbar-button
-            v-if="!restrictedToolBarItems.includes('outdent')"
-            class="gl-display-none"
-            :button-title="
-              /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
-              sprintf(s__('MarkdownEditor|Outdent line (%{modifierKey}[)'), {
-                modifierKey /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */,
-              })
-            "
-            :shortcuts="$options.shortcuts.outdent"
-            command="outdentLines"
-            icon="list-outdent"
-          />
-          <toolbar-button
-            v-if="!restrictedToolBarItems.includes('collapsible-section')"
-            :tag="mdCollapsibleSection"
-            :prepend="true"
-            tag-select="Click to expand"
-            :button-title="__('Add a collapsible section')"
-            icon="details-block"
-          />
-          <toolbar-button
-            v-if="!restrictedToolBarItems.includes('table')"
-            :tag="mdTable"
-            :prepend="true"
-            :button-title="__('Add a table')"
-            icon="table"
-          />
-          <gl-button
-            v-if="!restrictedToolBarItems.includes('attach-file')"
-            v-gl-tooltip
-            :title="__('Attach a file or image')"
-            data-testid="button-attach-file"
-            category="tertiary"
-            icon="paperclip"
-            @click="handleAttachFile"
-          />
-          <drawio-toolbar-button
-            v-if="drawioEnabled"
-            :uploads-path="uploadsPath"
-            :markdown-preview-path="markdownPreviewPath"
-          />
-          <comment-templates-dropdown
-            v-if="newCommentTemplatePath && glFeatures.savedReplies"
-            :new-comment-template-path="newCommentTemplatePath"
-          />
-          <toolbar-button
-            v-if="!restrictedToolBarItems.includes('full-screen')"
-            class="js-zen-enter"
-            :prepend="true"
-            :button-title="__('Go full screen')"
-            icon="maximize"
-          />
-        </div>
-      </template>
-    </gl-tabs>
+          <gl-popover
+            v-if="suggestPopoverVisible"
+            :target="$refs.suggestButton.$el"
+            :css-classes="['diff-suggest-popover']"
+            placement="bottom"
+            :show="suggestPopoverVisible"
+          >
+            <strong>{{ __('New! Suggest changes directly') }}</strong>
+            <p class="mb-2">
+              {{
+                __(
+                  'Suggest code changes which can be immediately applied in one click. Try it out!',
+                )
+              }}
+            </p>
+            <gl-button
+              variant="confirm"
+              category="primary"
+              size="small"
+              data-qa-selector="dismiss_suggestion_popover_button"
+              @click="handleSuggestDismissed"
+            >
+              {{ __('Got it') }}
+            </gl-button>
+          </gl-popover>
+        </template>
+        <ai-actions-dropdown
+          v-if="editorAiActions.length"
+          :actions="editorAiActions"
+          @input="insertIntoTextarea"
+        />
+        <toolbar-button
+          tag="**"
+          :button-title="
+            /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
+            sprintf(s__('MarkdownEditor|Add bold text (%{modifierKey}B)'), {
+              modifierKey,
+            }) /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */
+          "
+          :shortcuts="$options.shortcuts.bold"
+          icon="bold"
+        />
+        <toolbar-button
+          tag="_"
+          :button-title="
+            /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
+            sprintf(s__('MarkdownEditor|Add italic text (%{modifierKey}I)'), {
+              modifierKey,
+            }) /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */
+          "
+          :shortcuts="$options.shortcuts.italic"
+          icon="italic"
+        />
+        <toolbar-button
+          v-if="!restrictedToolBarItems.includes('strikethrough')"
+          tag="~~"
+          :button-title="
+            /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
+            sprintf(s__('MarkdownEditor|Add strikethrough text (%{modifierKey}⇧X)'), {
+              modifierKey /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */,
+            })
+          "
+          :shortcuts="$options.shortcuts.strikethrough"
+          icon="strikethrough"
+        />
+        <toolbar-button
+          v-if="!restrictedToolBarItems.includes('quote')"
+          :prepend="true"
+          :tag="tag"
+          :button-title="__('Insert a quote')"
+          icon="quote"
+          @click="handleQuote"
+        />
+        <toolbar-button tag="`" tag-block="```" :button-title="__('Insert code')" icon="code" />
+        <toolbar-button
+          tag="[{text}](url)"
+          tag-select="url"
+          :button-title="
+            /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
+            sprintf(s__('MarkdownEditor|Add a link (%{modifierKey}K)'), {
+              modifierKey,
+            }) /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */
+          "
+          :shortcuts="$options.shortcuts.link"
+          icon="link"
+        />
+        <toolbar-button
+          v-if="!restrictedToolBarItems.includes('bullet-list')"
+          :prepend="true"
+          tag="- "
+          :button-title="__('Add a bullet list')"
+          icon="list-bulleted"
+        />
+        <toolbar-button
+          v-if="!restrictedToolBarItems.includes('numbered-list')"
+          :prepend="true"
+          tag="1. "
+          :button-title="__('Add a numbered list')"
+          icon="list-numbered"
+        />
+        <toolbar-button
+          v-if="!restrictedToolBarItems.includes('task-list')"
+          :prepend="true"
+          tag="- [ ] "
+          :button-title="__('Add a checklist')"
+          icon="list-task"
+        />
+        <toolbar-button
+          v-if="!restrictedToolBarItems.includes('indent')"
+          class="gl-display-none"
+          :button-title="
+            /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
+            sprintf(s__('MarkdownEditor|Indent line (%{modifierKey}])'), {
+              modifierKey /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */,
+            })
+          "
+          :shortcuts="$options.shortcuts.indent"
+          command="indentLines"
+          icon="list-indent"
+        />
+        <toolbar-button
+          v-if="!restrictedToolBarItems.includes('outdent')"
+          class="gl-display-none"
+          :button-title="
+            /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
+            sprintf(s__('MarkdownEditor|Outdent line (%{modifierKey}[)'), {
+              modifierKey /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */,
+            })
+          "
+          :shortcuts="$options.shortcuts.outdent"
+          command="outdentLines"
+          icon="list-outdent"
+        />
+        <toolbar-button
+          v-if="!restrictedToolBarItems.includes('collapsible-section')"
+          :tag="mdCollapsibleSection"
+          :prepend="true"
+          tag-select="Click to expand"
+          :button-title="__('Add a collapsible section')"
+          icon="details-block"
+        />
+        <toolbar-button
+          v-if="!restrictedToolBarItems.includes('table')"
+          :tag="mdTable"
+          :prepend="true"
+          :button-title="__('Add a table')"
+          icon="table"
+        />
+        <gl-button
+          v-if="!restrictedToolBarItems.includes('attach-file')"
+          v-gl-tooltip
+          :title="__('Attach a file or image')"
+          class="gl-mr-2"
+          data-testid="button-attach-file"
+          category="tertiary"
+          icon="paperclip"
+          size="small"
+          @click="handleAttachFile"
+        />
+        <drawio-toolbar-button
+          v-if="drawioEnabled"
+          :uploads-path="uploadsPath"
+          :markdown-preview-path="markdownPreviewPath"
+        />
+        <comment-templates-dropdown
+          v-if="newCommentTemplatePath && glFeatures.savedReplies"
+          :new-comment-template-path="newCommentTemplatePath"
+        />
+      </div>
+      <div class="switch-preview gl-py-2 gl-display-flex gl-align-items-center gl-ml-auto">
+        <editor-mode-switcher
+          v-if="showEditorModeSwitcher"
+          size="small"
+          class="gl-mr-2"
+          value="markdown"
+          @input="handleEditorModeChanged"
+        />
+        <gl-button
+          v-if="enablePreview"
+          data-testid="preview-toggle"
+          value="preview"
+          :label="$options.i18n.previewTabTitle"
+          class="js-md-preview-button gl-flex-direction-row-reverse gl-align-items-center gl-font-weight-normal!"
+          size="small"
+          category="tertiary"
+          @click="switchPreview"
+          >{{ previewMarkdown ? $options.i18n.hidePreview : $options.i18n.preview }}</gl-button
+        >
+        <gl-button
+          v-if="!restrictedToolBarItems.includes('full-screen')"
+          v-gl-tooltip
+          :class="{ 'gl-display-none!': previewMarkdown }"
+          class="js-zen-enter gl-ml-2"
+          category="tertiary"
+          icon="maximize"
+          size="small"
+          :title="__('Go full screen')"
+          :prepend="true"
+          :button-title="__('Go full screen')"
+        />
+      </div>
+    </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
index e8be242f660..4733afb7504 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
@@ -1,6 +1,5 @@
 <script>
 import { GlButton, GlLink, GlLoadingIcon, GlSprintf, GlIcon } from '@gitlab/ui';
-import EditorModeDropdown from './editor_mode_dropdown.vue';
 
 export default {
   components: {
@@ -9,7 +8,6 @@ export default {
     GlLoadingIcon,
     GlSprintf,
     GlIcon,
-    EditorModeDropdown,
   },
   props: {
     markdownDocsPath: {
@@ -31,30 +29,21 @@ export default {
       required: false,
       default: true,
     },
-    showContentEditorSwitcher: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
   computed: {
     hasQuickActionsDocsPath() {
       return this.quickActionsDocsPath !== '';
     },
   },
-  methods: {
-    handleEditorModeChanged(mode) {
-      if (mode === 'richText') {
-        this.$emit('enableContentEditor');
-      }
-    },
-  },
 };
 </script>
 
 <template>
-  <div v-if="showCommentToolBar" class="comment-toolbar clearfix">
-    <div class="toolbar-text">
+  <div
+    v-if="showCommentToolBar"
+    class="comment-toolbar gl-mx-2 gl-mb-2 gl-px-4 gl-bg-gray-10 gl-rounded-bottom-left-base gl-rounded-bottom-right-base clearfix"
+  >
+    <div class="toolbar-text gl-font-sm">
       <template v-if="!hasQuickActionsDocsPath && markdownDocsPath">
         <gl-sprintf
           :message="
@@ -62,7 +51,9 @@ export default {
           "
         >
           <template #markdownDocsLink="{ content }">
-            <gl-link :href="markdownDocsPath" target="_blank">{{ content }}</gl-link>
+            <gl-link :href="markdownDocsPath" target="_blank" class="gl-font-sm">{{
+              content
+            }}</gl-link>
           </template>
         </gl-sprintf>
       </template>
@@ -75,18 +66,22 @@ export default {
           "
         >
           <template #markdownDocsLink="{ content }">
-            <gl-link :href="markdownDocsPath" target="_blank">{{ content }}</gl-link>
+            <gl-link :href="markdownDocsPath" target="_blank" class="gl-font-sm">{{
+              content
+            }}</gl-link>
           </template>
           <template #keyboard="{ content }">
             <kbd>{{ content }}</kbd>
           </template>
           <template #quickActionsDocsLink="{ content }">
-            <gl-link :href="quickActionsDocsPath" target="_blank">{{ content }}</gl-link>
+            <gl-link :href="quickActionsDocsPath" target="_blank" class="gl-font-sm">{{
+              content
+            }}</gl-link>
           </template>
         </gl-sprintf>
       </template>
     </div>
-    <span v-if="canAttachFile" class="uploading-container gl-line-height-32">
+    <span v-if="canAttachFile" class="uploading-container gl-font-sm gl-line-height-32">
       <span class="uploading-progress-container hide">
         <gl-icon name="paperclip" />
         <span class="attaching-file-message"></span>
@@ -111,7 +106,7 @@ export default {
             <gl-button
               variant="link"
               category="primary"
-              class="retry-uploading-link gl-vertical-align-baseline"
+              class="retry-uploading-link gl-vertical-align-baseline gl-font-sm!"
             >
               {{ content }}
             </gl-button>
@@ -120,7 +115,7 @@ export default {
             <gl-button
               variant="link"
               category="primary"
-              class="markdown-selector attach-new-file gl-vertical-align-baseline"
+              class="markdown-selector attach-new-file gl-vertical-align-baseline gl-font-sm!"
             >
               {{ content }}
             </gl-button>
@@ -130,17 +125,10 @@ export default {
       <gl-button
         variant="link"
         category="primary"
-        class="button-cancel-uploading-files gl-vertical-align-baseline hide"
+        class="button-cancel-uploading-files gl-vertical-align-baseline hide gl-font-sm!"
       >
         {{ __('Cancel') }}
       </gl-button>
     </span>
-    <editor-mode-dropdown
-      v-if="showContentEditorSwitcher"
-      size="small"
-      class="gl-float-right gl-line-height-28 gl-display-block"
-      value="markdown"
-      @input="handleEditorModeChanged"
-    />
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
index 5ca21522d33..636c89c99d4 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
@@ -92,7 +92,8 @@ export default {
     :icon="icon"
     type="button"
     category="tertiary"
-    class="js-md"
+    size="small"
+    class="js-md gl-mr-3"
     data-container="body"
     @click="$emit('click', $event)"
   />