Update `versionedPreviewPath` implementationbw-enable-commonmark-preview

2 files changed, 108 insertions, 114 deletions

diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index a70612155e2..80d13d81603 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -1,133 +1,131 @@
 <script>
-  import $ from 'jquery';
-  import Flash from '../../../flash';
-  import GLForm from '../../../gl_form';
-  import markdownHeader from './header.vue';
-  import markdownToolbar from './toolbar.vue';
-  import icon from '../icon.vue';
+import $ from 'jquery';
+import Flash from '../../../flash';
+import GLForm from '../../../gl_form';
+import markdownHeader from './header.vue';
+import markdownToolbar from './toolbar.vue';
+import icon from '../icon.vue';
 
-  export default {
-    components: {
-      markdownHeader,
-      markdownToolbar,
-      icon,
+export default {
+  components: {
+    markdownHeader,
+    markdownToolbar,
+    icon,
+  },
+  props: {
+    markdownPreviewPath: {
+      type: String,
+      required: false,
+      default: '',
     },
-    props: {
-      markdownPreviewPath: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      markdownDocsPath: {
-        type: String,
-        required: true,
-      },
-      markdownVersion: {
-        type: Number,
-        required: false,
-        default: 0,
-      },
-      addSpacingClasses: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      quickActionsDocsPath: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      canAttachFile: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      enableAutocomplete: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
+    markdownDocsPath: {
+      type: String,
+      required: true,
     },
-    data() {
-      return {
-        markdownPreview: '',
-        referencedCommands: '',
-        referencedUsers: '',
-        markdownPreviewLoading: false,
-        previewMarkdown: false,
-      };
+    markdownVersion: {
+      type: Number,
+      required: false,
+      default: 0,
     },
-    computed: {
-      shouldShowReferencedUsers() {
-        const referencedUsersThreshold = 10;
-        return this.referencedUsers.length >= referencedUsersThreshold;
-      },
+    addSpacingClasses: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
-    mounted() {
-      /*
-        GLForm class handles all the toolbar buttons
-      */
-      return new GLForm($(this.$refs['gl-form']), this.enableAutocomplete);
+    quickActionsDocsPath: {
+      type: String,
+      required: false,
+      default: '',
     },
-    beforeDestroy() {
-      const glForm = $(this.$refs['gl-form']).data('glForm');
-      if (glForm) {
-        glForm.destroy();
-      }
+    canAttachFile: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
-    methods: {
-      showPreviewTab() {
-        if (this.previewMarkdown) return;
+    enableAutocomplete: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      markdownPreview: '',
+      referencedCommands: '',
+      referencedUsers: '',
+      markdownPreviewLoading: false,
+      previewMarkdown: false,
+    };
+  },
+  computed: {
+    shouldShowReferencedUsers() {
+      const referencedUsersThreshold = 10;
+      return this.referencedUsers.length >= referencedUsersThreshold;
+    },
+  },
+  mounted() {
+    /*
+        GLForm class handles all the toolbar buttons
+      */
+    return new GLForm($(this.$refs['gl-form']), this.enableAutocomplete);
+  },
+  beforeDestroy() {
+    const glForm = $(this.$refs['gl-form']).data('glForm');
+    if (glForm) {
+      glForm.destroy();
+    }
+  },
+  methods: {
+    showPreviewTab() {
+      if (this.previewMarkdown) return;
 
-        this.previewMarkdown = true;
+      this.previewMarkdown = true;
 
-        /*
+      /*
           Can't use `$refs` as the component is technically in the parent component
           so we access the VNode & then get the element
         */
-        const text = this.$slots.textarea[0].elm.value;
-
-        if (text) {
-          this.markdownPreviewLoading = true;
-          this.$http.post(this.versionedPreviewPath(), { text })
-            .then(resp => resp.json())
-            .then(data => this.renderMarkdown(data))
-            .catch(() => new Flash('Error loading markdown preview'));
-        } else {
-          this.renderMarkdown();
-        }
-      },
+      const text = this.$slots.textarea[0].elm.value;
 
-      showWriteTab() {
-        this.markdownPreview = '';
-        this.previewMarkdown = false;
-      },
-
-      renderMarkdown(data = {}) {
-        this.markdownPreviewLoading = false;
-        this.markdownPreview = data.body || 'Nothing to preview.';
+      if (text) {
+        this.markdownPreviewLoading = true;
+        this.$http
+          .post(this.versionedPreviewPath(), { text })
+          .then(resp => resp.json())
+          .then(data => this.renderMarkdown(data))
+          .catch(() => new Flash('Error loading markdown preview'));
+      } else {
+        this.renderMarkdown();
+      }
+    },
 
-        if (data.references) {
-          this.referencedCommands = data.references.commands;
-          this.referencedUsers = data.references.users;
-        }
+    showWriteTab() {
+      this.markdownPreview = '';
+      this.previewMarkdown = false;
+    },
 
-        this.$nextTick(() => {
-          $(this.$refs['markdown-preview']).renderGFM();
-        });
-      },
+    renderMarkdown(data = {}) {
+      this.markdownPreviewLoading = false;
+      this.markdownPreview = data.body || 'Nothing to preview.';
 
-      versionedPreviewPath() {
-        let separator = '&';
+      if (data.references) {
+        this.referencedCommands = data.references.commands;
+        this.referencedUsers = data.references.users;
+      }
 
-        if (this.markdownPreviewPath.indexOf('?') == -1) {
-          separator = '?';
-        }
+      this.$nextTick(() => {
+        $(this.$refs['markdown-preview']).renderGFM();
+      });
+    },
 
-        return this.markdownPreviewPath + separator + `markdown_version=${this.markdownVersion}`;
-      },
+    versionedPreviewPath() {
+      const { markdownPreviewPath, markdownVersion } = this;
+      return `${markdownPreviewPath}${
+        markdownPreviewPath.indexOf('?') === -1 ? '?' : '&'
+      }markdown_version=${markdownVersion}`;
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/spec/javascripts/notes/components/note_form_spec.js b/spec/javascripts/notes/components/note_form_spec.js
index ee954920996..f841a408d09 100644
--- a/spec/javascripts/notes/components/note_form_spec.js
+++ b/spec/javascripts/notes/components/note_form_spec.js
@@ -57,10 +57,6 @@ describe('issue_note_form component', () => {
       expect(vm.$el.querySelector(`a[href="${markdownDocsPath}"]`).textContent.trim()).toEqual('Markdown');
     });
 
-    it('should have a markdown version', () => {
-      expect(vm.$el.querySelector('textarea').getAttribute('data-markdown-version')).toEqual('0');
-    });
-
     describe('keyboard events', () => {
       describe('up', () => {
         it('should ender edit mode', () => {