Change markdown header tab anchor links to buttons

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

 <script>
 import $ from 'jquery';
-import tooltip from '../../directives/tooltip';
-import toolbarButton from './toolbar_button.vue';
-import icon from '../icon.vue';
+import Tooltip from '../../directives/tooltip';
+import ToolbarButton from './toolbar_button.vue';
+import Icon from '../icon.vue';
 
 export default {
   directives: {
-    tooltip,
+    Tooltip,
   },
   components: {
-    toolbarButton,
-    icon,
+    ToolbarButton,
+    Icon,
   },
   props: {
     previewMarkdown: {
@@ -68,27 +68,27 @@ export default {
         :class="{ active: !previewMarkdown }"
         class="md-header-tab"
       >
-        <a
+        <button
           class="js-write-link"
-          href="#md-write-holder"
           tabindex="-1"
-          @click.prevent="writeMarkdownTab($event)"
+          type="button"
+          @click="writeMarkdownTab($event)"
         >
           Write
-        </a>
+        </button>
       </li>
       <li
         :class="{ active: previewMarkdown }"
         class="md-header-tab"
       >
-        <a
+        <button
           class="js-preview-link js-md-preview-button"
-          href="#md-preview-holder"
           tabindex="-1"
-          @click.prevent="previewMarkdownTab($event)"
+          type="button"
+          @click="previewMarkdownTab($event)"
         >
           Preview
-        </a>
+        </button>
       </li>
       <li
         :class="{ active: !previewMarkdown }"

app/assets/stylesheets/framework/gitlab_theme.scss

@@ -161,6 +161,7 @@
 
   .nav-links li {
     &.active a,
+    &.md-header-tab.active button,
     a.active {
       border-bottom: 2px solid $active-tab-border;
 

app/assets/stylesheets/framework/markdown_area.scss

@@ -72,6 +72,7 @@
 .md-header-tab {
   @include media-breakpoint-down(xs) {
     flex: 1;
+    flex-direction: column;
     width: 100%;
     border-bottom: 1px solid $border-color;
     text-align: center;

app/assets/stylesheets/framework/secondary_navigation_elements.scss

@@ -8,15 +8,17 @@
   height: auto;
   border-bottom: 1px solid $border-color;
 
-  li {
+  li:not(.md-header-toolbar) {
     display: flex;
 
-    a {
+    a,
+    button {
       padding: $gl-btn-padding;
       padding-bottom: 11px;
       font-size: 14px;
       line-height: 28px;
       color: $gl-text-color-secondary;
+      border: 0;
       border-bottom: 2px solid transparent;
       white-space: nowrap;
 
@@ -33,7 +35,12 @@
       }
     }
 
+    button {
+      padding-top: 0;
+    }
+
     &.active a,
+    &.active button,
     a.active {
       color: $black;
       font-weight: $gl-font-weight-bold;
@@ -42,6 +49,10 @@
         color: $black;
       }
     }
+
+    &.md-header-tab button {
+      line-height: 19px;
+    }
   }
 }
 

app/views/projects/_md_preview.html.haml

@@ -11,10 +11,10 @@
   .md-header
     %ul.nav.nav-tabs.nav-links.clearfix
       %li.md-header-tab.active
-        %a.js-md-write-button{ href: "#md-write-holder", tabindex: -1 }
+        %button.js-md-write-button{ tabindex: -1 }
           Write
       %li.md-header-tab
-        %a.js-md-preview-button{ href: "#md-preview-holder", tabindex: -1 }
+        %button.js-md-preview-button{ tabindex: -1 }
           Preview
 
       %li.md-header-toolbar.active

changelogs/unreleased/add-gl-link-to-markdown-header.yml

+---
+title: Change markdown header tab anchor links to buttons
+merge_request: 21988
+author: George Tsiolis
+type: other

spec/features/groups/milestone_spec.rb

@@ -23,17 +23,17 @@ describe 'Group milestones' do
 
       description.native.send_keys('')
 
-      click_link('Preview')
+      click_button('Preview')
 
       preview = find('.js-md-preview')
 
       expect(preview).to have_content('Nothing to preview.')
 
-      click_link('Write')
+      click_button('Write')
 
       description.native.send_keys(':+1: Nice')
 
-      click_link('Preview')
+      click_button('Preview')
 
       expect(preview).to have_css('gl-emoji')
       expect(find('#milestone_description', visible: false)).not_to be_visible

spec/features/issues/user_creates_issue_spec.rb

@@ -47,15 +47,15 @@ describe "User creates issue" do
         textarea = first(".gfm-form textarea")
 
         page.within(form) do
-          click_link("Preview")
+          click_button("Preview")
 
           preview = find(".js-md-preview") # this element is findable only when the "Preview" link is clicked.
 
           expect(preview).to have_content("Nothing to preview.")
 
-          click_link("Write")
+          click_button("Write")
           fill_in("Description", with: "Bug fixed :smile:")
-          click_link("Preview")
+          click_button("Preview")
 
           expect(preview).to have_css("gl-emoji")
           expect(textarea).not_to be_visible

spec/features/issues/user_edits_issue_spec.rb

@@ -17,9 +17,9 @@ describe "User edits issue", :js do
 
     page.within(form) do
       fill_in("Description", with: "Bug fixed :smile:")
-      click_link("Preview")
+      click_button("Preview")
     end
 
-    expect(form).to have_link("Write")
+    expect(form).to have_button("Write")
   end
 end

spec/features/merge_request/user_views_open_merge_request_spec.rb

@@ -41,7 +41,7 @@ describe 'User views an open merge request' do
         find('.gfm-form').fill_in(:merge_request_description, with: '')
 
         page.within('.gfm-form') do
-          click_link('Preview')
+          click_button('Preview')
 
           expect(find('.js-md-preview')).to have_content('Nothing to preview.')
         end
@@ -51,12 +51,12 @@ describe 'User views an open merge request' do
         find('.gfm-form').fill_in(:merge_request_description, with: ':+1: Nice')
 
         page.within('.gfm-form') do
-          click_link('Preview')
+          click_button('Preview')
 
           expect(find('.js-md-preview')).to have_css('gl-emoji')
         end
 
-        expect(find('.gfm-form')).to have_css('.js-md-preview').and have_link('Write')
+        expect(find('.gfm-form')).to have_css('.js-md-preview').and have_button('Write')
         expect(find('#merge_request_description', visible: false)).not_to be_visible
       end
     end

spec/features/projects/commit/comments/user_adds_comment_spec.rb

@@ -28,19 +28,19 @@ describe "User adds a comment on a commit", :js do
         fill_in("note[note]", with: "#{comment_text} #{emoji}")
 
         # Check on `Preview` tab
-        click_link("Preview")
+        click_button("Preview")
 
         expect(find(".js-md-preview")).to have_content(comment_text).and have_css("gl-emoji")
         expect(page).not_to have_css(".js-note-text")
 
         # Check on the `Write` tab
-        click_link("Write")
+        click_button("Write")
 
         expect(page).to have_field("note[note]", with: "#{comment_text} #{emoji}")
 
         # Submit comment from the `Preview` tab to get rid of a separate `it` block
         # which would specially tests if everything gets cleared from the note form.
-        click_link("Preview")
+        click_button("Preview")
         click_button("Comment")
       end
 
@@ -88,13 +88,13 @@ describe "User adds a comment on a commit", :js do
 
           # Test Preview feature for both forms.
           page.within("form[data-line-code='#{sample_commit.line_code}']") do
-            click_link("Preview")
+            click_button("Preview")
           end
 
           page.within("form[data-line-code='#{sample_commit.del_line_code}']") do
             fill_in("note[note]", with: another_comment_text)
 
-            click_link("Preview")
+            click_button("Preview")
           end
 
           expect(page).to have_css(".js-md-preview", visible: true, count: 2)

spec/features/projects/commit/user_comments_on_commit_spec.rb

@@ -25,19 +25,19 @@ describe "User comments on commit", :js do
         fill_in("note[note]", with: "#{comment_text} #{emoji_code}")
 
         # Check on `Preview` tab
-        click_link("Preview")
+        click_button("Preview")
 
         expect(find(".js-md-preview")).to have_content(comment_text).and have_css("gl-emoji")
         expect(page).not_to have_css(".js-note-text")
 
         # Check on `Write` tab
-        click_link("Write")
+        click_button("Write")
 
         expect(page).to have_field("note[note]", with: "#{comment_text} #{emoji_code}")
 
         # Submit comment from the `Preview` tab to get rid of a separate `it` block
         # which would specially tests if everything gets cleared from the note form.
-        click_link("Preview")
+        click_button("Preview")
         click_button("Comment")
       end
 

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

@@ -76,7 +76,7 @@ describe('Markdown field header component', () => {
   });
 
   it('blurs preview link after click', done => {
-    const link = vm.$el.querySelector('li:nth-child(2) a');
+    const link = vm.$el.querySelector('li:nth-child(2) button');
     spyOn(HTMLElement.prototype, 'blur');
 
     link.click();