Disable submit button on wiki if no title and content

Wiki: "Create Page" button should be disabled unless
both title and content are in

app/assets/javascripts/pages/shared/wikis/wikis.js

@@ -26,6 +26,7 @@ export default class Wikis {
     this.isNewWikiPage = Boolean(document.querySelector('.js-new-wiki-page'));
     this.editTitleInput = document.querySelector('form.wiki-form #wiki_title');
     this.commitMessageInput = document.querySelector('form.wiki-form #wiki_message');
+    this.submitButton = document.querySelector('.js-wiki-btn-submit');
     this.commitMessageI18n = this.isNewWikiPage
       ? s__('WikiPageCreate|Create %{pageTitle}')
       : s__('WikiPageEdit|Update %{pageTitle}');
@@ -50,13 +51,11 @@ export default class Wikis {
       });
     }
 
-    const wikiTextarea = document.querySelector('form.wiki-form #wiki_content');
+    this.wikiTextarea = document.querySelector('form.wiki-form #wiki_content');
     const wikiForm = document.querySelector('form.wiki-form');
 
-    if (wikiTextarea) {
-      wikiTextarea.addEventListener('input', () => {
-        window.onbeforeunload = () => '';
-      });
+    if (this.wikiTextarea) {
+      this.wikiTextarea.addEventListener('input', () => this.handleWikiContentChange());
 
       wikiForm.addEventListener('submit', () => {
         window.onbeforeunload = null;
@@ -65,12 +64,29 @@ export default class Wikis {
 
     Wikis.trackPageView();
     Wikis.showToasts();
+
+    this.updateSubmitButton();
+  }
+
+  handleWikiContentChange() {
+    this.updateSubmitButton();
+
+    window.onbeforeunload = () => '';
   }
 
   handleWikiTitleChange(e) {
+    this.updateSubmitButton();
     this.setWikiCommitMessage(e.target.value);
   }
 
+  updateSubmitButton() {
+    if (!this.wikiTextarea) return;
+
+    const isEnabled = Boolean(this.wikiTextarea.value.trim() && this.editTitleInput.value.trim());
+    if (isEnabled) this.submitButton.removeAttribute('disabled');
+    else this.submitButton.setAttribute('disabled', 'true');
+  }
+
   setWikiCommitMessage(rawTitle) {
     let title = rawTitle;
 

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

@@ -70,10 +70,10 @@
 
   .form-actions
     - if @page && @page.persisted?
-      = f.submit _("Save changes"), class: 'btn gl-button btn-success qa-save-changes-button'
+      = f.submit _("Save changes"), class: 'btn gl-button btn-success qa-save-changes-button js-wiki-btn-submit', disabled: 'true'
       .float-right
         = link_to _("Cancel"), wiki_page_path(@wiki, @page), class: 'btn gl-button btn-cancel btn-default'
     - else
-      = f.submit s_("Wiki|Create page"), class: 'btn-success gl-button btn qa-create-page-button rspec-create-page-button'
+      = f.submit s_("Wiki|Create page"), class: 'btn-success gl-button btn qa-create-page-button rspec-create-page-button js-wiki-btn-submit', disabled: 'true'
       .float-right
         = link_to _("Cancel"), wiki_path(@wiki), class: 'btn gl-button btn-cancel btn-default'

changelogs/unreleased/288329-wiki-submit-btn.yml

+---
+title: Disable submit button on wiki if no title and content
+merge_request: 51272
+author:
+type: changed

spec/frontend/wikis_spec.js

@@ -4,7 +4,6 @@ import Wikis from '~/pages/shared/wikis/wikis';
 import Tracking from '~/tracking';
 
 describe('Wikis', () => {
-  describe('setting the commit message when the title changes', () => {
   const editFormHtmlFixture = (args) => `<form class="wiki-form ${
     args.newPage ? 'js-new-wiki-page' : ''
   }">
@@ -18,18 +17,21 @@ describe('Wikis', () => {
     </select>
     <textarea id="wiki_content"></textarea>
     <code class="js-markup-link-example">{Link title}[link:page-slug]</code>
+    <input type="submit" class="js-wiki-btn-submit">
+    </input>
   </form>
   `;
 
   let wikis;
   let titleInput;
+  let contentInput;
   let messageInput;
   let changeFormatSelect;
   let linkExample;
 
   const findBeforeUnloadWarning = () => window.onbeforeunload?.();
-    const findContent = () => document.getElementById('wiki_content');
   const findForm = () => document.querySelector('.wiki-form');
+  const findSubmitButton = () => document.querySelector('.js-wiki-btn-submit');
 
   describe('when the wiki page is being created', () => {
     const formHtmlFixture = editFormHtmlFixture({ newPage: true });
@@ -108,9 +110,9 @@ describe('Wikis', () => {
 
     describe('when wiki content is updated', () => {
       beforeEach(() => {
-          const content = findContent();
-          content.value = 'Lorem ipsum dolar sit!';
-          content.dispatchEvent(new Event('input'));
+        contentInput = document.getElementById('wiki_content');
+        contentInput.value = 'Lorem ipsum dolar sit!';
+        contentInput.dispatchEvent(new Event('input'));
       });
 
       it('sets before unload warning', () => {
@@ -123,6 +125,36 @@ describe('Wikis', () => {
       });
     });
   });
+
+  describe('submit button state', () => {
+    beforeEach(() => {
+      setHTMLFixture(editFormHtmlFixture({ newPage: true }));
+
+      titleInput = document.getElementById('wiki_title');
+      contentInput = document.getElementById('wiki_content');
+
+      wikis = new Wikis();
+    });
+
+    it.each`
+      title          | text           | buttonState   | disabledAttr
+      ${'something'} | ${'something'} | ${'enabled'}  | ${null}
+      ${''}          | ${'something'} | ${'disabled'} | ${'true'}
+      ${'something'} | ${''}          | ${'disabled'} | ${'true'}
+      ${''}          | ${''}          | ${'disabled'} | ${'true'}
+      ${'   '}       | ${'   '}       | ${'disabled'} | ${'true'}
+    `(
+      "when title='$title', content='$content', then, buttonState='$buttonState'",
+      ({ title, text, disabledAttr }) => {
+        titleInput.value = title;
+        titleInput.dispatchEvent(new Event('keyup'));
+
+        contentInput.value = text;
+        contentInput.dispatchEvent(new Event('input'));
+
+        expect(findSubmitButton().getAttribute('disabled')).toBe(disabledAttr);
+      },
+    );
   });
 
   describe('trackPageView', () => {

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

@@ -20,15 +20,25 @@ RSpec.shared_examples 'User creates wiki page' do
       click_link "Create your first page"
     end
 
-    it "shows validation error message" do
+    it "shows validation error message if the form is force submitted", :js do
       page.within(".wiki-form") do
         fill_in(:wiki_content, with: "")
 
-        click_on("Create page")
+        page.execute_script("window.onbeforeunload = null")
+        page.execute_script("document.querySelector('.wiki-form').submit()")
       end
 
       expect(page).to have_content("The form contains the following error:").and have_content("Content can't be blank")
+    end
+
+    it "disables the submit button", :js do
+      page.within(".wiki-form") do
+        fill_in(:wiki_content, with: "")
+        expect(page).to have_button('Create page', disabled: true)
+      end
+    end
 
+    it "makes sure links to unknown pages work correctly", :js do
       page.within(".wiki-form") do
         fill_in(:wiki_content, with: "[link test](test)")
 
@@ -42,7 +52,7 @@ RSpec.shared_examples 'User creates wiki page' do
       expect(page).to have_content("Create New Page")
     end
 
-    it "shows non-escaped link in the pages list" do
+    it "shows non-escaped link in the pages list", :js do
       fill_in(:wiki_title, with: "one/two/three-test")
 
       page.within(".wiki-form") do
@@ -61,7 +71,7 @@ RSpec.shared_examples 'User creates wiki page' do
       expect(page).to have_field("wiki[message]", with: "Create home")
     end
 
-    it "creates a page from the home page" do
+    it "creates a page from the home page", :js do
       fill_in(:wiki_content, with: "[test](test)\n[GitLab API doc](api)\n[Rake tasks](raketasks)\n# Wiki header\n")
       fill_in(:wiki_message, with: "Adding links to wiki")
 
@@ -142,7 +152,7 @@ RSpec.shared_examples 'User creates wiki page' do
       end
     end
 
-    it 'creates a wiki page with Org markup', :aggregate_failures do
+    it 'creates a wiki page with Org markup', :aggregate_failures, :js do
       org_content = <<~ORG
         * Heading
         ** Subheading
@@ -170,7 +180,7 @@ RSpec.shared_examples 'User creates wiki page' do
       visit wiki_path(wiki)
     end
 
-    context "via the `new wiki page` page" do
+    context "via the `new wiki page` page", :js do
       it "creates a page with a single word" do
         click_link("New page")
 
@@ -189,7 +199,7 @@ RSpec.shared_examples 'User creates wiki page' do
                     .and have_content("My awesome wiki!")
       end
 
-      it "creates a page with spaces in the name" do
+      it "creates a page with spaces in the name", :js do
         click_link("New page")
 
         page.within(".wiki-form") do
@@ -207,7 +217,7 @@ RSpec.shared_examples 'User creates wiki page' do
                     .and have_content("My awesome wiki!")
       end
 
-      it "creates a page with hyphens in the name" do
+      it "creates a page with hyphens in the name", :js do
         click_link("New page")
 
         page.within(".wiki-form") do

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

@@ -90,9 +90,11 @@ RSpec.shared_examples 'User updates wiki page' do
       expect(page).to have_field('wiki[message]', with: 'Update Wiki title')
     end
 
-    it 'shows a validation error message' do
+    it 'shows a validation error message if the form is force submitted', :js do
       fill_in(:wiki_content, with: '')
-      click_button('Save changes')
+
+      page.execute_script("window.onbeforeunload = null")
+      page.execute_script("document.querySelector('.wiki-form').submit()")
 
       expect(page).to have_selector('.wiki-form')
       expect(page).to have_content('Edit Page')
@@ -101,6 +103,13 @@ RSpec.shared_examples 'User updates wiki page' do
       expect(find('textarea#wiki_content').value).to eq('')
     end
 
+    it "disables the submit button", :js do
+      page.within(".wiki-form") do
+        fill_in(:wiki_content, with: "")
+        expect(page).to have_button('Save changes', disabled: true)
+      end
+    end
+
     it 'shows the emoji autocompletion dropdown', :js do
       find('#wiki_content').native.send_keys('')
       fill_in(:wiki_content, with: ':')
@@ -108,7 +117,7 @@ RSpec.shared_examples 'User updates wiki page' do
       expect(page).to have_selector('.atwho-view')
     end
 
-    it 'shows the error message' do
+    it 'shows the error message', :js do
       wiki_page.update(content: 'Update') # rubocop:disable Rails/SaveBang
 
       click_button('Save changes')
@@ -116,7 +125,7 @@ RSpec.shared_examples 'User updates wiki page' do
       expect(page).to have_content('Someone edited the page the same time you did.')
     end
 
-    it 'updates a page' do
+    it 'updates a page', :js do
       fill_in('Content', with: 'Updated Wiki Content')
       click_on('Save changes')
 
@@ -147,7 +156,7 @@ RSpec.shared_examples 'User updates wiki page' do
       visit wiki_page_path(wiki, wiki_page, action: :edit)
     end
 
-    it 'moves the page to the root folder' do
+    it 'moves the page to the root folder', :js do
       fill_in(:wiki_title, with: "/#{page_name}")
 
       click_button('Save changes')
@@ -155,7 +164,7 @@ RSpec.shared_examples 'User updates wiki page' do
       expect(current_path).to eq(wiki_page_path(wiki, page_name))
     end
 
-    it 'moves the page to other dir' do
+    it 'moves the page to other dir', :js do
       new_page_dir = "foo1/bar1/#{page_name}"
 
       fill_in(:wiki_title, with: new_page_dir)
@@ -165,7 +174,7 @@ RSpec.shared_examples 'User updates wiki page' do
       expect(current_path).to eq(wiki_page_path(wiki, new_page_dir))
     end
 
-    it 'remains in the same place if title has not changed' do
+    it 'remains in the same place if title has not changed', :js do
       original_path = wiki_page_path(wiki, wiki_page)
 
       fill_in(:wiki_title, with: page_name)
@@ -175,7 +184,7 @@ RSpec.shared_examples 'User updates wiki page' do
       expect(current_path).to eq(original_path)
     end
 
-    it 'can be moved to a different dir with a different name' do
+    it 'can be moved to a different dir with a different name', :js do
       new_page_dir = "foo1/bar1/new_page_name"
 
       fill_in(:wiki_title, with: new_page_dir)
@@ -185,7 +194,7 @@ RSpec.shared_examples 'User updates wiki page' do
       expect(current_path).to eq(wiki_page_path(wiki, new_page_dir))
     end
 
-    it 'can be renamed and moved to the root folder' do
+    it 'can be renamed and moved to the root folder', :js do
       new_name = 'new_page_name'
 
       fill_in(:wiki_title, with: "/#{new_name}")
@@ -195,7 +204,7 @@ RSpec.shared_examples 'User updates wiki page' do
       expect(current_path).to eq(wiki_page_path(wiki, new_name))
     end
 
-    it 'squishes the title before creating the page' do
+    it 'squishes the title before creating the page', :js do
       new_page_dir = "  foo1 /  bar1  /  #{page_name}  "
 
       fill_in(:wiki_title, with: new_page_dir)
@@ -224,7 +233,7 @@ RSpec.shared_examples 'User updates wiki page' do
       expect(page).to have_content('Wiki page was successfully updated.')
     end
 
-    it 'shows a validation error when trying to change the content' do
+    it 'shows a validation error when trying to change the content', :js do
       fill_in 'Content', with: 'new content'
       click_on 'Save changes'
 

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

@@ -53,7 +53,7 @@ RSpec.shared_examples 'User views empty wiki' do
       if writable
         element.click_link 'Create your first page'
 
-        expect(page).to have_button('Create page')
+        expect(page).to have_button('Create page', disabled: true)
       else
         expect(element).not_to have_link('Create your first page')
       end

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

@@ -29,7 +29,7 @@ RSpec.shared_examples 'User views wiki sidebar' do
         end
       end
 
-      it 'can create a custom sidebar' do
+      it 'can create a custom sidebar', :js do
         click_on 'Edit sidebar'
         fill_in :wiki_content, with: 'My custom sidebar'
         click_on 'Create page'
@@ -55,7 +55,7 @@ RSpec.shared_examples 'User views wiki sidebar' do
         end
       end
 
-      it 'can edit the custom sidebar' do
+      it 'can edit the custom sidebar', :js do
         click_on 'Edit sidebar'
 
         expect(page).to have_field(:wiki_content, with: 'My custom sidebar')