Merge branch 'fix-md-form-tabs-double-click-toggle' into 'master'

Fix md form tab double click toggle

Closes #39624

See merge request gitlab-org/gitlab-ce!15119

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

@@ -47,8 +47,10 @@
       },
     },
     methods: {
-      toggleMarkdownPreview() {
-        this.previewMarkdown = !this.previewMarkdown;
+      showPreviewTab() {
+        if (this.previewMarkdown) return;
+
+        this.previewMarkdown = true;
 
         /*
           Can't use `$refs` as the component is technically in the parent component
@@ -56,20 +58,22 @@
         */
         const text = this.$slots.textarea[0].elm.value;
 
-        if (!this.previewMarkdown) {
-          this.markdownPreview = '';
-        } else if (text) {
+        if (text) {
           this.markdownPreviewLoading = true;
           this.$http.post(this.markdownPreviewPath, { text })
             .then(resp => resp.json())
-            .then((data) => {
-              this.renderMarkdown(data);
-            })
+            .then(data => this.renderMarkdown(data))
             .catch(() => new Flash('Error loading markdown preview'));
         } else {
           this.renderMarkdown();
         }
       },
+
+      showWriteTab() {
+        this.markdownPreview = '';
+        this.previewMarkdown = false;
+      },
+
       renderMarkdown(data = {}) {
         this.markdownPreviewLoading = false;
         this.markdownPreview = data.body || 'Nothing to preview.';
@@ -106,7 +110,8 @@
     ref="gl-form">
     <markdown-header
       :preview-markdown="previewMarkdown"
-      @toggle-markdown="toggleMarkdownPreview" />
+      @preview-markdown="showPreviewTab"
+      @write-markdown="showWriteTab" />
     <div
       class="md-write-holder"
       v-show="!previewMarkdown">

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

@@ -18,23 +18,31 @@
       icon,
     },
     methods: {
-      toggleMarkdownPreview(e, form) {
-        if (form && !form.find('.js-vue-markdown-field').length) {
-          return;
-        } else if (e.target.blur) {
-          e.target.blur();
-        }
+      isMarkdownForm(form) {
+        return form && !form.find('.js-vue-markdown-field').length;
+      },
+
+      previewMarkdownTab(event, form) {
+        if (event.target.blur) event.target.blur();
+        if (this.isMarkdownForm(form)) return;
+
+        this.$emit('preview-markdown');
+      },
+
+      writeMarkdownTab(event, form) {
+        if (event.target.blur) event.target.blur();
+        if (this.isMarkdownForm(form)) return;
 
-        this.$emit('toggle-markdown');
+        this.$emit('write-markdown');
       },
     },
     mounted() {
-      $(document).on('markdown-preview:show.vue', this.toggleMarkdownPreview);
-      $(document).on('markdown-preview:hide.vue', this.toggleMarkdownPreview);
+      $(document).on('markdown-preview:show.vue', this.previewMarkdownTab);
+      $(document).on('markdown-preview:hide.vue', this.writeMarkdownTab);
     },
     beforeDestroy() {
-      $(document).on('markdown-preview:show.vue', this.toggleMarkdownPreview);
-      $(document).off('markdown-preview:hide.vue', this.toggleMarkdownPreview);
+      $(document).off('markdown-preview:show.vue', this.previewMarkdownTab);
+      $(document).off('markdown-preview:hide.vue', this.writeMarkdownTab);
     },
   };
 </script>
@@ -44,17 +52,19 @@
     <ul class="nav-links clearfix">
       <li :class="{ active: !previewMarkdown }">
         <a
+          class="js-write-link"
           href="#md-write-holder"
           tabindex="-1"
-          @click.prevent="toggleMarkdownPreview($event)">
+          @click.prevent="writeMarkdownTab($event)">
           Write
         </a>
       </li>
       <li :class="{ active: previewMarkdown }">
         <a
+          class="js-preview-link"
           href="#md-preview-holder"
           tabindex="-1"
-          @click.prevent="toggleMarkdownPreview($event)">
+          @click.prevent="previewMarkdownTab($event)">
           Preview
         </a>
       </li>

changelogs/unreleased/fix-md-form-tabs-double-click-toggle.yml

+---
+title: Fix markdown form tabs toggling preview mode from double clicking write mode
+  button
+merge_request: 15119
+author:
+type: fixed

spec/javascripts/vue_shared/components/markdown/field_spec.js

 import Vue from 'vue';
 import fieldComponent from '~/vue_shared/components/markdown/field.vue';
 
+function assertMarkdownTabs(isWrite, writeLink, previewLink, vm) {
+  expect(writeLink.parentNode.classList.contains('active')).toEqual(isWrite);
+  expect(previewLink.parentNode.classList.contains('active')).toEqual(!isWrite);
+  expect(vm.$el.querySelector('.md-preview').style.display).toEqual(isWrite ? 'none' : '');
+}
+
 describe('Markdown field component', () => {
   let vm;
 
@@ -39,6 +45,7 @@ describe('Markdown field component', () => {
 
     describe('markdown preview', () => {
       let previewLink;
+      let writeLink;
 
       beforeEach(() => {
         spyOn(Vue.http, 'post').and.callFake(() => new Promise((resolve) => {
@@ -53,7 +60,8 @@ describe('Markdown field component', () => {
           });
         }));
 
-        previewLink = vm.$el.querySelector('.nav-links li:nth-child(2) a');
+        previewLink = vm.$el.querySelector('.nav-links .js-preview-link');
+        writeLink = vm.$el.querySelector('.nav-links .js-write-link');
       });
 
       it('sets preview link as active', (done) => {
@@ -105,6 +113,23 @@ describe('Markdown field component', () => {
           done();
         }, 0);
       });
+
+      it('clicking already active write or preview link does nothing', (done) => {
+        writeLink.click();
+        Vue.nextTick()
+          .then(() => assertMarkdownTabs(true, writeLink, previewLink, vm))
+          .then(() => writeLink.click())
+          .then(() => Vue.nextTick())
+          .then(() => assertMarkdownTabs(true, writeLink, previewLink, vm))
+          .then(() => previewLink.click())
+          .then(() => Vue.nextTick())
+          .then(() => assertMarkdownTabs(false, writeLink, previewLink, vm))
+          .then(() => previewLink.click())
+          .then(() => Vue.nextTick())
+          .then(() => assertMarkdownTabs(false, writeLink, previewLink, vm))
+          .then(done)
+          .catch(done.fail);
+      });
     });
 
     describe('markdown buttons', () => {

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

@@ -43,11 +43,13 @@ describe('Markdown field header component', () => {
   it('emits toggle markdown event when clicking preview', () => {
     spyOn(vm, '$emit');
 
-    vm.$el.querySelector('li:nth-child(2) a').click();
+    vm.$el.querySelector('.js-preview-link').click();
 
-    expect(
-      vm.$emit,
-    ).toHaveBeenCalledWith('toggle-markdown');
+    expect(vm.$emit).toHaveBeenCalledWith('preview-markdown');
+
+    vm.$el.querySelector('.js-write-link').click();
+
+    expect(vm.$emit).toHaveBeenCalledWith('write-markdown');
   });
 
   it('blurs preview link after click', (done) => {