Fix toolbar buttons in Markdown field

Fix a tabs migration bug where the toolbar
buttons in the Markdown field stop working
after switching between Edit and Preview
modes

Changelog: fixed

app/assets/javascripts/vue_shared/components/markdown/header.vue

@@ -171,8 +171,12 @@ export default {
         @click="previewMarkdownTab($event)"
       />
 
-      <template v-if="!previewMarkdown" #tabs-end>
-        <div class="md-header-toolbar gl-ml-auto gl-pb-3 gl-justify-content-center">
+      <template #tabs-end>
+        <div
+          data-testid="md-header-toolbar"
+          :class="{ 'gl-display-none': previewMarkdown }"
+          class="md-header-toolbar gl-ml-auto gl-pb-3 gl-justify-content-center"
+        >
           <toolbar-button
             tag="**"
             :button-title="

spec/frontend/vue_shared/components/markdown/header_spec.js

@@ -20,6 +20,7 @@ describe('Markdown field header component', () => {
 
   const findWriteTab = () => wrapper.findByTestId('write-tab');
   const findPreviewTab = () => wrapper.findByTestId('preview-tab');
+  const findToolbar = () => wrapper.findByTestId('md-header-toolbar');
   const findToolbarButtons = () => wrapper.findAll(ToolbarButton);
   const findToolbarButtonByProp = (prop, value) =>
     findToolbarButtons()
@@ -90,6 +91,12 @@ describe('Markdown field header component', () => {
     expect(findPreviewTab().attributes('active')).toBe('true');
   });
 
+  it('hides toolbar in preview mode', () => {
+    createWrapper({ previewMarkdown: true });
+
+    expect(findToolbar().classes().includes('gl-display-none')).toBe(true);
+  });
+
   it('emits toggle markdown event when clicking preview tab', async () => {
     const eventData = { target: {} };
     findPreviewTab().vm.$emit('click', eventData);