New wiki page redirects user to random slug

Previously we asked a user to enter a new slug before taking them to
the Create Page page.

As a UX improvement, we now take them to a randomly generated URI so
they can begin creating their new page.

https://gitlab.com/gitlab-org/gitlab-ce/issues/46299

6 files changed, 200 insertions, 133 deletions

diff --git a/spec/controllers/projects/wikis_controller_spec.rb b/spec/controllers/projects/wikis_controller_spec.rb
index fbca1d5740f..6fea6bca4f2 100644
--- a/spec/controllers/projects/wikis_controller_spec.rb
+++ b/spec/controllers/projects/wikis_controller_spec.rb
@@ -3,11 +3,11 @@
 require 'spec_helper'
 
 describe Projects::WikisController do
-  let(:project) { create(:project, :public, :repository) }
-  let(:user) { project.owner }
+  set(:project) { create(:project, :public, :repository) }
+  set(:user) { project.owner }
   let(:project_wiki) { ProjectWiki.new(project, user) }
   let(:wiki) { project_wiki.wiki }
-  let(:wiki_title) { 'page-title-test' }
+  let(:wiki_title) { 'page title test' }
 
   before do
     create_page(wiki_title, 'hello world')
@@ -19,6 +19,21 @@ describe Projects::WikisController do
     destroy_page(wiki_title)
   end
 
+  describe 'GET #new' do
+    subject { get :new, params: { namespace_id: project.namespace, project_id: project } }
+
+    it 'redirects to #show and appends a `random_title` param' do
+      subject
+
+      expect(response).to have_http_status(302)
+      expect(Rails.application.routes.recognize_path(response.redirect_url)).to include(
+        controller: 'projects/wikis',
+        action: 'show'
+      )
+      expect(response.redirect_url).to match(/\?random_title=true\Z/)
+    end
+  end
+
   describe 'GET #pages' do
     subject { get :pages, params: { namespace_id: project.namespace, project_id: project, id: wiki_title } }
 
@@ -75,40 +90,62 @@ describe Projects::WikisController do
   describe 'GET #show' do
     render_views
 
-    subject { get :show, params: { namespace_id: project.namespace, project_id: project, id: wiki_title } }
+    let(:random_title) { nil }
 
-    it 'limits the retrieved pages for the sidebar' do
-      expect(controller).to receive(:load_wiki).and_return(project_wiki)
+    subject { get :show, params: { namespace_id: project.namespace, project_id: project, id: id, random_title: random_title } }
 
-      # empty? call
-      expect(project_wiki).to receive(:list_pages).with(limit: 1).and_call_original
-      # Sidebar entries
-      expect(project_wiki).to receive(:list_pages).with(limit: 15).and_call_original
+    context 'when page exists' do
+      let(:id) { wiki_title }
 
-      subject
+      it 'limits the retrieved pages for the sidebar' do
+        expect(controller).to receive(:load_wiki).and_return(project_wiki)
+        expect(project_wiki).to receive(:list_pages).with(limit: 15).and_call_original
+
+        subject
+
+        expect(response).to have_http_status(:ok)
+        expect(assigns(:page).title).to eq(wiki_title)
+      end
+
+      context 'when page content encoding is invalid' do
+        it 'sets flash error' do
+          allow(controller).to receive(:valid_encoding?).and_return(false)
 
-      expect(response).to have_http_status(:ok)
-      expect(response.body).to include(wiki_title)
+          subject
+
+          expect(response).to have_http_status(:ok)
+          expect(flash[:notice]).to eq('The content of this page is not encoded in UTF-8. Edits can only be made via the Git repository.')
+        end
+      end
     end
 
-    context 'when page content encoding is invalid' do
-      it 'sets flash error' do
-        allow(controller).to receive(:valid_encoding?).and_return(false)
+    context 'when the page does not exist' do
+      let(:id) { 'does not exist' }
 
+      before do
         subject
+      end
 
-        expect(response).to have_http_status(:ok)
-        expect(flash[:notice]).to eq 'The content of this page is not encoded in UTF-8. Edits can only be made via the Git repository.'
+      it 'builds a new wiki page with the id as the title' do
+        expect(assigns(:page).title).to eq(id)
+      end
+
+      context 'when a random_title param is present' do
+        let(:random_title) { true }
+
+        it 'builds a new wiki page with no title' do
+          expect(assigns(:page).title).to be_empty
+        end
       end
     end
 
     context 'when page is a file' do
       include WikiHelpers
 
-      let(:path) { upload_file_to_wiki(project, user, file_name) }
+      let(:id) { upload_file_to_wiki(project, user, file_name) }
 
       before do
-        get :show, params: { namespace_id: project.namespace, project_id: project, id: path }
+        subject
       end
 
       context 'when file is an image' do
diff --git a/spec/features/projects/wiki/markdown_preview_spec.rb b/spec/features/projects/wiki/markdown_preview_spec.rb
index 7b511c4d3d5..5c6b04a7141 100644
--- a/spec/features/projects/wiki/markdown_preview_spec.rb
+++ b/spec/features/projects/wiki/markdown_preview_spec.rb
@@ -3,7 +3,7 @@
 require 'spec_helper'
 
 describe 'Projects > Wiki > User previews markdown changes', :js do
-  let(:user) { create(:user) }
+  set(:user) { create(:user) }
   let(:project) { create(:project, :wiki_repo, namespace: user.namespace) }
   let(:wiki_page) { create(:wiki_page, wiki: project.wiki, attrs: { title: 'home', content: '[some link](other-page)' }) }
   let(:wiki_content) do
@@ -20,23 +20,12 @@ describe 'Projects > Wiki > User previews markdown changes', :js do
     project.add_maintainer(user)
 
     sign_in(user)
-
-    visit project_wiki_path(project, wiki_page)
   end
 
   context "while creating a new wiki page" do
     context "when there are no spaces or hyphens in the page name" do
       it "rewrites relative links as expected" do
-        find('.add-new-wiki').click
-        page.within '#modal-new-wiki' do
-          fill_in :new_wiki_path, with: 'a/b/c/d'
-          click_button 'Create page'
-        end
-
-        page.within '.wiki-form' do
-          fill_in :wiki_content, with: wiki_content
-          click_on "Preview"
-        end
+        create_wiki_page('a/b/c/d', content: wiki_content)
 
         expect(page).to have_content("regular link")
 
@@ -50,16 +39,7 @@ describe 'Projects > Wiki > User previews markdown changes', :js do
 
     context "when there are spaces in the page name" do
       it "rewrites relative links as expected" do
-        click_link 'New page'
-        page.within '#modal-new-wiki' do
-          fill_in :new_wiki_path, with: 'a page/b page/c page/d page'
-          click_button 'Create page'
-        end
-
-        page.within '.wiki-form' do
-          fill_in :wiki_content, with: wiki_content
-          click_on "Preview"
-        end
+        create_wiki_page('a page/b page/c page/d page', content: wiki_content)
 
         expect(page).to have_content("regular link")
 
@@ -73,16 +53,7 @@ describe 'Projects > Wiki > User previews markdown changes', :js do
 
     context "when there are hyphens in the page name" do
       it "rewrites relative links as expected" do
-        click_link 'New page'
-        page.within '#modal-new-wiki' do
-          fill_in :new_wiki_path, with: 'a-page/b-page/c-page/d-page'
-          click_button 'Create page'
-        end
-
-        page.within '.wiki-form' do
-          fill_in :wiki_content, with: wiki_content
-          click_on "Preview"
-        end
+        create_wiki_page('a-page/b-page/c-page/d-page', content: wiki_content)
 
         expect(page).to have_content("regular link")
 
@@ -96,23 +67,9 @@ describe 'Projects > Wiki > User previews markdown changes', :js do
   end
 
   context "while editing a wiki page" do
-    def create_wiki_page(path)
-      find('.add-new-wiki').click
-
-      page.within '#modal-new-wiki' do
-        fill_in :new_wiki_path, with: path
-        click_button 'Create page'
-      end
-
-      page.within '.wiki-form' do
-        fill_in :wiki_content, with: 'content'
-        click_on "Create page"
-      end
-    end
-
     context "when there are no spaces or hyphens in the page name" do
       it "rewrites relative links as expected" do
-        create_wiki_page 'a/b/c/d'
+        create_wiki_page('a/b/c/d')
         click_link 'Edit'
 
         fill_in :wiki_content, with: wiki_content
@@ -130,7 +87,7 @@ describe 'Projects > Wiki > User previews markdown changes', :js do
 
     context "when there are spaces in the page name" do
       it "rewrites relative links as expected" do
-        create_wiki_page 'a page/b page/c page/d page'
+        create_wiki_page('a page/b page/c page/d page')
         click_link 'Edit'
 
         fill_in :wiki_content, with: wiki_content
@@ -148,7 +105,7 @@ describe 'Projects > Wiki > User previews markdown changes', :js do
 
     context "when there are hyphens in the page name" do
       it "rewrites relative links as expected" do
-        create_wiki_page 'a-page/b-page/c-page/d-page'
+        create_wiki_page('a-page/b-page/c-page/d-page')
         click_link 'Edit'
 
         fill_in :wiki_content, with: wiki_content
@@ -166,7 +123,7 @@ describe 'Projects > Wiki > User previews markdown changes', :js do
 
     context 'when rendering the preview' do
       it 'renders content with CommonMark' do
-        create_wiki_page 'a-page/b-page/c-page/common-mark'
+        create_wiki_page('a-page/b-page/c-page/common-mark')
         click_link 'Edit'
 
         fill_in :wiki_content, with: "1. one\n  - sublist\n"
@@ -180,25 +137,31 @@ describe 'Projects > Wiki > User previews markdown changes', :js do
   end
 
   it "does not linkify double brackets inside code blocks as expected" do
-    click_link 'New page'
-    page.within '#modal-new-wiki' do
-      fill_in :new_wiki_path, with: 'linkify_test'
-      click_button 'Create page'
-    end
+    wiki_content = <<-HEREDOC
+      `[[do_not_linkify]]`
+      ```
+      [[also_do_not_linkify]]
+      ```
+    HEREDOC
 
-    page.within '.wiki-form' do
-      fill_in :wiki_content, with: <<-HEREDOC
-        `[[do_not_linkify]]`
-        ```
-        [[also_do_not_linkify]]
-        ```
-      HEREDOC
-      click_on "Preview"
-    end
+    create_wiki_page('linkify_test', wiki_content)
 
     expect(page).to have_content("do_not_linkify")
 
     expect(page.html).to include('[[do_not_linkify]]')
     expect(page.html).to include('[[also_do_not_linkify]]')
   end
+
+  private
+
+  def create_wiki_page(path, content = 'content')
+    visit project_wiki_path(project, wiki_page)
+
+    click_link 'New page'
+
+    fill_in :wiki_title, with: path
+    fill_in :wiki_content, with: content
+
+    click_button 'Create page'
+  end
 end
diff --git a/spec/features/projects/wiki/user_creates_wiki_page_spec.rb b/spec/features/projects/wiki/user_creates_wiki_page_spec.rb
index cc6dbaa6eb8..56d0518015d 100644
--- a/spec/features/projects/wiki/user_creates_wiki_page_spec.rb
+++ b/spec/features/projects/wiki/user_creates_wiki_page_spec.rb
@@ -42,10 +42,10 @@ describe "User creates wiki page" do
 
         click_link("link test")
 
-        expect(page).to have_content("Create Page")
+        expect(page).to have_content("Create New Page")
       end
 
-      it "shows non-escaped link in the pages list", :js, :quarantine do
+      it "shows non-escaped link in the pages list", :quarantine do
         fill_in(:wiki_title, with: "one/two/three-test")
 
         page.within(".wiki-form") do
@@ -58,7 +58,9 @@ describe "User creates wiki page" do
         expect(page).to have_xpath("//a[@href='/#{project.full_path}/wikis/one/two/three-test']")
       end
 
-      it "has `Create home` as a commit message" do
+      it "has `Create home` as a commit message", :js do
+        wait_for_requests
+
         expect(page).to have_field("wiki[message]", with: "Create home")
       end
 
@@ -81,7 +83,7 @@ describe "User creates wiki page" do
         expect(current_path).to eq(project_wiki_path(project, "test"))
 
         page.within(:css, ".nav-text") do
-          expect(page).to have_content("test").and have_content("Create Page")
+          expect(page).to have_content("Create New Page")
         end
 
         click_link("Home")
@@ -93,7 +95,7 @@ describe "User creates wiki page" do
         expect(current_path).to eq(project_wiki_path(project, "api"))
 
         page.within(:css, ".nav-text") do
-          expect(page).to have_content("Create").and have_content("api")
+          expect(page).to have_content("Create")
         end
 
         click_link("Home")
@@ -105,7 +107,7 @@ describe "User creates wiki page" do
         expect(current_path).to eq(project_wiki_path(project, "raketasks"))
 
         page.within(:css, ".nav-text") do
-          expect(page).to have_content("Create").and have_content("rake")
+          expect(page).to have_content("Create")
         end
       end
 
@@ -150,6 +152,8 @@ describe "User creates wiki page" do
       let(:project) { create(:project, :wiki_repo, namespace: create(:group, :public)) }
 
       it "has `Create home` as a commit message" do
+        wait_for_requests
+
         expect(page).to have_field("wiki[message]", with: "Create home")
       end
 
@@ -181,20 +185,15 @@ describe "User creates wiki page" do
         it "creates a page with a single word" do
           click_link("New page")
 
-          page.within("#modal-new-wiki") do
-            fill_in(:new_wiki_path, with: "foo")
-
-            click_button("Create page")
+          page.within(".wiki-form") do
+            fill_in(:wiki_title, with: "foo")
+            fill_in(:wiki_content, with: "My awesome wiki!")
           end
 
           # Commit message field should have correct value.
           expect(page).to have_field("wiki[message]", with: "Create foo")
 
-          page.within(".wiki-form") do
-            fill_in(:wiki_content, with: "My awesome wiki!")
-
-            click_button("Create page")
-          end
+          click_button("Create page")
 
           expect(page).to have_content("foo")
                      .and have_content("Last edited by #{user.name}")
@@ -204,20 +203,15 @@ describe "User creates wiki page" do
         it "creates a page with spaces in the name" do
           click_link("New page")
 
-          page.within("#modal-new-wiki") do
-            fill_in(:new_wiki_path, with: "Spaces in the name")
-
-            click_button("Create page")
+          page.within(".wiki-form") do
+            fill_in(:wiki_title, with: "Spaces in the name")
+            fill_in(:wiki_content, with: "My awesome wiki!")
           end
 
           # Commit message field should have correct value.
           expect(page).to have_field("wiki[message]", with: "Create Spaces in the name")
 
-          page.within(".wiki-form") do
-            fill_in(:wiki_content, with: "My awesome wiki!")
-
-            click_button("Create page")
-          end
+          click_button("Create page")
 
           expect(page).to have_content("Spaces in the name")
                      .and have_content("Last edited by #{user.name}")
@@ -227,10 +221,9 @@ describe "User creates wiki page" do
         it "creates a page with hyphens in the name" do
           click_link("New page")
 
-          page.within("#modal-new-wiki") do
-            fill_in(:new_wiki_path, with: "hyphens-in-the-name")
-
-            click_button("Create page")
+          page.within(".wiki-form") do
+            fill_in(:wiki_title, with: "hyphens-in-the-name")
+            fill_in(:wiki_content, with: "My awesome wiki!")
           end
 
           # Commit message field should have correct value.
@@ -251,12 +244,6 @@ describe "User creates wiki page" do
       it "shows the emoji autocompletion dropdown" do
         click_link("New page")
 
-        page.within("#modal-new-wiki") do
-          fill_in(:new_wiki_path, with: "test-autocomplete")
-
-          click_button("Create page")
-        end
-
         page.within(".wiki-form") do
           find("#wiki_content").native.send_keys("")
 
@@ -274,20 +261,15 @@ describe "User creates wiki page" do
         it "creates a page" do
           click_link("New page")
 
-          page.within("#modal-new-wiki") do
-            fill_in(:new_wiki_path, with: "foo")
-
-            click_button("Create page")
+          page.within(".wiki-form") do
+            fill_in(:wiki_title, with: "foo")
+            fill_in(:wiki_content, with: "My awesome wiki!")
           end
 
           # Commit message field should have correct value.
           expect(page).to have_field("wiki[message]", with: "Create foo")
 
-          page.within(".wiki-form") do
-            fill_in(:wiki_content, with: "My awesome wiki!")
-
-            click_button("Create page")
-          end
+          click_button("Create page")
 
           expect(page).to have_content("foo")
                      .and have_content("Last edited by #{user.name}")
diff --git a/spec/features/projects/wiki/user_updates_wiki_page_spec.rb b/spec/features/projects/wiki/user_updates_wiki_page_spec.rb
index 2aab8fda62d..3f3711f9eb8 100644
--- a/spec/features/projects/wiki/user_updates_wiki_page_spec.rb
+++ b/spec/features/projects/wiki/user_updates_wiki_page_spec.rb
@@ -70,7 +70,7 @@ describe 'User updates wiki page' do
     context 'in a user namespace' do
       let(:project) { create(:project, :wiki_repo) }
 
-      it 'updates a page' do
+      it 'updates a page', :js do
         # Commit message field should have correct value.
         expect(page).to have_field('wiki[message]', with: 'Update home')
 
@@ -82,6 +82,18 @@ describe 'User updates wiki page' do
         expect(page).to have_content('My awesome wiki!')
       end
 
+      it 'updates the commit message as the title is changed', :js do
+        fill_in(:wiki_title, with: 'Wiki title')
+
+        expect(page).to have_field('wiki[message]', with: 'Update Wiki title')
+      end
+
+      it 'does not allow XSS', :js do
+        fill_in(:wiki_title, with: '<script>')
+
+        expect(page).to have_field('wiki[message]', with: 'Update &lt;script&gt;')
+      end
+
       it 'shows a validation error message' do
         fill_in(:wiki_content, with: '')
         click_button('Save changes')
@@ -129,7 +141,7 @@ describe 'User updates wiki page' do
     context 'in a group namespace' do
       let(:project) { create(:project, :wiki_repo, namespace: create(:group, :public)) }
 
-      it 'updates a page' do
+      it 'updates a page', :js do
         # Commit message field should have correct value.
         expect(page).to have_field('wiki[message]', with: 'Update home')
 
diff --git a/spec/features/projects/wiki/user_views_wiki_page_spec.rb b/spec/features/projects/wiki/user_views_wiki_page_spec.rb
index 05742b63c43..77e725e7f11 100644
--- a/spec/features/projects/wiki/user_views_wiki_page_spec.rb
+++ b/spec/features/projects/wiki/user_views_wiki_page_spec.rb
@@ -101,8 +101,7 @@ describe 'User views a wiki page' do
       click_on('image')
 
       expect(current_path).to match("wikis/#{path}")
-      expect(page).to have_content('New Wiki Page')
-      expect(page).to have_content('Create page')
+      expect(page).to have_content('Create New Page')
     end
   end
 
@@ -156,6 +155,6 @@ describe 'User views a wiki page' do
     find('.shortcuts-wiki').click
     click_link "Create your first page"
 
-    expect(page).to have_content('Home · Create Page')
+    expect(page).to have_content('Create New Page')
   end
 end
diff --git a/spec/frontend/wikis_spec.js b/spec/frontend/wikis_spec.js
new file mode 100644
index 00000000000..b2475488d97
--- /dev/null
+++ b/spec/frontend/wikis_spec.js
@@ -0,0 +1,74 @@
+import Wikis from '~/pages/projects/wikis/wikis';
+import { setHTMLFixture } from './helpers/fixtures';
+
+describe('Wikis', () => {
+  describe('setting the commit message when the title changes', () => {
+    const editFormHtmlFixture = args => `<form class="wiki-form ${
+      args.newPage ? 'js-new-wiki-page' : ''
+    }">
+        <input type="text" id="wiki_title" value="My title" />
+        <input type="text" id="wiki_message" />
+      </form>`;
+
+    let wikis;
+    let titleInput;
+    let messageInput;
+
+    describe('when the wiki page is being created', () => {
+      const formHtmlFixture = editFormHtmlFixture({ newPage: true });
+
+      beforeEach(() => {
+        setHTMLFixture(formHtmlFixture);
+
+        titleInput = document.getElementById('wiki_title');
+        messageInput = document.getElementById('wiki_message');
+        wikis = new Wikis();
+      });
+
+      it('binds an event listener to the title input', () => {
+        wikis.handleWikiTitleChange = jest.fn();
+
+        titleInput.dispatchEvent(new Event('keyup'));
+
+        expect(wikis.handleWikiTitleChange).toHaveBeenCalled();
+      });
+
+      it('sets the commit message when title changes', () => {
+        titleInput.value = 'My title';
+        messageInput.value = '';
+
+        titleInput.dispatchEvent(new Event('keyup'));
+
+        expect(messageInput.value).toEqual('Create My title');
+      });
+
+      it('replaces hyphens with spaces', () => {
+        titleInput.value = 'my-hyphenated-title';
+        titleInput.dispatchEvent(new Event('keyup'));
+
+        expect(messageInput.value).toEqual('Create my hyphenated title');
+      });
+    });
+
+    describe('when the wiki page is being updated', () => {
+      const formHtmlFixture = editFormHtmlFixture({ newPage: false });
+
+      beforeEach(() => {
+        setHTMLFixture(formHtmlFixture);
+
+        titleInput = document.getElementById('wiki_title');
+        messageInput = document.getElementById('wiki_message');
+        wikis = new Wikis();
+      });
+
+      it('sets the commit message when title changes, prefixing with "Update"', () => {
+        titleInput.value = 'My title';
+        messageInput.value = '';
+
+        titleInput.dispatchEvent(new Event('keyup'));
+
+        expect(messageInput.value).toEqual('Update My title');
+      });
+    });
+  });
+});