Merge branch 'wiki-editor-ux-debt-1' into 'master'

Move wiki edit button inline with title

See merge request gitlab-org/gitlab!44391

app/views/shared/wikis/_main_links.html.haml

 - if @page&.persisted?
-  - if can?(current_user, :create_wiki, @wiki.container)
-    = link_to wiki_path(@wiki, action: :new), class: "btn gl-button btn-success", role: "button", data: { qa_selector: 'new_page_button' } do
-      = s_("Wiki|New page")
   = link_to wiki_page_path(@wiki, @page, action: :history), class: "btn gl-button", role: "button", data: { qa_selector: 'page_history_button' } do
     = s_("Wiki|Page history")
-  - if can?(current_user, :create_wiki, @wiki.container) && @page.latest? && @valid_encoding
-    = link_to wiki_page_path(@wiki, @page, action: :edit), class: "btn gl-button js-wiki-edit", role: "button", data: { qa_selector: 'edit_page_button' } do
-      = _("Edit")
+  - if can?(current_user, :create_wiki, @wiki.container)
+    = link_to wiki_path(@wiki, action: :new), class: "btn gl-button btn-success btn-inverted", role: "button", data: { qa_selector: 'new_page_button' } do
+      = s_("Wiki|New page")

app/views/shared/wikis/show.html.haml

@@ -20,7 +20,11 @@
     = (s_("WikiHistoricalPage|You can view the %{most_recent_link} or browse the %{history_link}.") % { most_recent_link: most_recent_link, history_link: history_link }).html_safe
 
 .gl-mt-5.gl-mb-3
-  %h2.gl-mt-0.gl-mb-5{ data: { qa_selector: 'wiki_page_title', testid: 'wiki_page_title' } }= @page.human_title
+  .gl-display-flex.gl-justify-content-space-between
+    %h2.gl-mt-0.gl-mb-5{ data: { qa_selector: 'wiki_page_title', testid: 'wiki_page_title' } }= @page.human_title
+    %div
+      - if can?(current_user, :create_wiki, @wiki.container) && @page.latest? && @valid_encoding
+        = link_to sprite_icon('pencil', css_class: 'gl-icon'), wiki_page_path(@wiki, @page, action: :edit), title: 'Edit', role: "button", class: 'btn gl-button btn-icon btn-default js-wiki-edit', data: { qa_selector: 'edit_page_button', testid: 'wiki_edit_button' }
   .js-wiki-page-content.md.gl-pt-2{ data: { qa_selector: 'wiki_page_content', testid: 'wiki_page_content', tracking_context: wiki_page_tracking_context(@page).to_json } }
     = render_wiki_content(@page)
 

changelogs/unreleased/wiki-editor-ux-debt-1.yml

+---
+title: Move wiki edit button inline with wiki title
+merge_request: 44391
+author:
+type: changed

qa/qa/page/project/wiki/show.rb

@@ -11,12 +11,12 @@ module QA
           view 'app/views/shared/wikis/show.html.haml' do
             element :wiki_page_title
             element :wiki_page_content
+            element :edit_page_button
           end
 
           view 'app/views/shared/wikis/_main_links.html.haml' do
             element :new_page_button
             element :page_history_button
-            element :edit_page_button
           end
 
           view 'app/views/shared/empty_states/_wikis.html.haml' do

spec/support/shared_examples/features/wiki/user_views_wiki_page_shared_examples.rb

@@ -121,7 +121,7 @@ RSpec.shared_examples 'User views a wiki page' do
     it 'shows the page history' do
       visit(wiki_page_path(wiki, wiki_page))
 
-      expect(page).to have_selector('a.btn', text: 'Edit')
+      expect(page).to have_selector('[data-testid="wiki_edit_button"]')
 
       click_on('Page history')
 
@@ -133,7 +133,7 @@ RSpec.shared_examples 'User views a wiki page' do
     it 'does not show the "Edit" button' do
       visit(wiki_page_path(wiki, wiki_page, version_id: wiki_page.versions.last.id))
 
-      expect(page).not_to have_selector('a.btn', text: 'Edit')
+      expect(page).not_to have_selector('[data-testid="wiki_edit_button"]')
     end
 
     context 'show the diff' do
@@ -250,7 +250,7 @@ RSpec.shared_examples 'User views a wiki page' do
     end
 
     it 'does not show "Edit" button' do
-      expect(page).not_to have_selector('a.btn', text: 'Edit')
+      expect(page).not_to have_selector('[data-testid="wiki_edit_button"]')
     end
 
     it 'shows error' do