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

Wiki UI improvement: Move Wiki title below actions bar

See merge request gitlab-org/gitlab!44390

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

@@ -4,7 +4,6 @@
   = wiki_sidebar_toggle_button
 
   .nav-text.flex-fill
-    %h2.wiki-page-title{ data: { qa_selector: 'wiki_page_title' } }= @page.human_title
     %span.wiki-last-edit-by
       - if @page.last_version
         = (_("Last edited by %{name}") % { name: "<strong>#{@page.last_version.author_name}</strong>" }).html_safe
@@ -20,8 +19,9 @@
     - history_link = link_to s_("WikiHistoricalPage|history"), wiki_page_path(@wiki, @page, action: :history)
     = (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-3.gl-mb-3
-  .js-wiki-page-content.md{ data: { qa_selector: 'wiki_page_content', tracking_context: wiki_page_tracking_context(@page).to_json } }
+.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
+  .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)
 
 = render 'shared/wikis/sidebar'

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

+---
+title: Reposition wiki title on wiki pages
+merge_request: 44390
+author:
+type: changed

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

@@ -64,7 +64,7 @@ RSpec.shared_examples 'User previews wiki changes' do
     end
 
     it_behaves_like 'relative links' do
-      let(:element) { page.find('.js-wiki-page-content') }
+      let(:element) { page.find('[data-testid="wiki_page_content"]') }
     end
   end
 

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

@@ -41,7 +41,7 @@ RSpec.shared_examples 'User updates wiki page' do
 
       first(:link, text: 'three').click
 
-      expect(find('.nav-text')).to have_content('three')
+      expect(find('[data-testid="wiki_page_title"]')).to have_content('three')
 
       click_on('Edit')
 

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

@@ -55,7 +55,7 @@ RSpec.shared_examples 'User views a wiki page' do
 
       first(:link, text: 'three').click
 
-      expect(find('.nav-text')).to have_content('three')
+      expect(find('[data-testid="wiki_page_title"]')).to have_content('three')
 
       click_on('Edit')
 
@@ -208,7 +208,7 @@ RSpec.shared_examples 'User views a wiki page' do
     it 'preserves the special characters' do
       visit(wiki_page_path(wiki, wiki_page))
 
-      expect(page).to have_css('.wiki-page-title', text: title)
+      expect(page).to have_css('[data-testid="wiki_page_title"]', text: title)
       expect(page).to have_css('.wiki-pages li', text: title)
     end
   end
@@ -223,7 +223,7 @@ RSpec.shared_examples 'User views a wiki page' do
     it 'safely displays the page' do
       visit(wiki_page_path(wiki, wiki_page))
 
-      expect(page).to have_css('.wiki-page-title', text: title)
+      expect(page).to have_selector('[data-testid="wiki_page_title"]', text: title)
       expect(page).to have_content('foo bar')
     end
   end