Add button to edit custom Wiki sidebar

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

+- editing ||= false
+
 %aside.right-sidebar.right-sidebar-expanded.wiki-sidebar.js-wiki-sidebar.js-right-sidebar{ data: { "offset-top" => "50", "spy" => "affix" } }
   .sidebar-container
     .block.wiki-sidebar-header.gl-mb-3.w-100
       %a.gutter-toggle.float-right.d-block.d-md-none.js-sidebar-wiki-toggle{ href: "#" }
         = sprite_icon('chevron-double-lg-right', css_class: 'gl-icon')
 
-      - git_access_url = wiki_path(@wiki, action: :git_access)
-      = link_to git_access_url, class: active_nav_link?(path: 'wikis#git_access') ? 'active' : '', data: { qa_selector: 'clone_repository_link' } do
-        = sprite_icon('download', css_class: 'gl-mr-2')
-        %span= _("Clone repository")
+      .gl-display-flex.gl-flex-wrap
+        - git_access_url = wiki_path(@wiki, action: :git_access)
+        = link_to git_access_url, class: 'gl-mr-5' + (active_nav_link?(path: 'wikis#git_access') ? ' active' : ''), data: { qa_selector: 'clone_repository_link' } do
+          = sprite_icon('download', css_class: 'gl-mr-2')
+          %span= _("Clone repository")
+
+        - if can?(current_user, :create_wiki, @wiki)
+          - edit_sidebar_url = wiki_page_path(@wiki, Wiki::SIDEBAR, action: :edit)
+          - link_class = (editing && @page&.slug == Wiki::SIDEBAR) ? 'active' : ''
+          = link_to edit_sidebar_url, class: link_class, data: { qa_selector: 'edit_sidebar_link' } do
+            = sprite_icon('pencil-square', css_class: 'gl-mr-2')
+            %span= _("Edit sidebar")
 
     - if @sidebar_error.present?
       = render 'shared/alert_info', body: s_('Wiki|The sidebar failed to load. You can reload the page to try again.')

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

@@ -23,4 +23,4 @@
 
 = render 'shared/wikis/form', uploads_path: wiki_attachment_upload_url
 
-= render 'shared/wikis/sidebar'
+= render 'shared/wikis/sidebar', editing: true

changelogs/unreleased/23109-add-wiki-edit-button.yml

+---
+title: Add button to edit custom Wiki sidebar
+merge_request: 50323
+author: Frank Li
+type: changed

doc/user/project/wiki/index.md

@@ -204,13 +204,11 @@ otherwise they will not display when pushed to GitLab:
 
 ## Customizing sidebar
 
-On the project's Wiki page, there is a right side navigation that renders the full Wiki pages list by default, with hierarchy.
+> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/23109) in GitLab 13.8, the sidebar can be customized by clicking the **Edit sidebar** button.
 
-To customize the sidebar, you can create a file named `_sidebar` to fully replace the default navigation.
+To customize the Wiki's navigation sidebar, you need Developer permissions to the project.
 
-WARNING:
-Unless you link the `_sidebar` file from your custom nav, to edit it you'll have to access it directly
-from the browser's address bar by typing: `https://gitlab.com/<namespace>/<project_name>/-/wikis/_sidebar` (for self-managed GitLab instances, replace `gitlab.com` with your instance's URL).
+On the top-right, click **Edit sidebar** and make your changes. This creates a wiki page named `_sidebar` which fully replaces the default sidebar navigation.
 
 Example for `_sidebar` (using Markdown format):
 

locale/gitlab.pot

@@ -10284,6 +10284,9 @@ msgstr ""
 msgid "Edit public deploy key"
 msgstr ""
 
+msgid "Edit sidebar"
+msgstr ""
+
 msgid "Edit stage"
 msgstr ""
 

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

@@ -17,23 +17,55 @@ RSpec.shared_examples 'User views wiki sidebar' do
       create(:wiki_page, wiki: wiki, title: 'another', content: 'another')
     end
 
-    it 'renders a default sidebar when there is no customized sidebar' do
-      visit wiki_path(wiki)
+    context 'when there is no custom sidebar' do
+      before do
+        visit wiki_path(wiki)
+      end
 
-      expect(page).to have_content('another')
-      expect(page).not_to have_link('View All Pages')
+      it 'renders a default sidebar' do
+        within('.right-sidebar') do
+          expect(page).to have_content('another')
+          expect(page).not_to have_link('View All Pages')
+        end
+      end
+
+      it 'can create a custom sidebar' do
+        click_on 'Edit sidebar'
+        fill_in :wiki_content, with: 'My custom sidebar'
+        click_on 'Create page'
+
+        within('.right-sidebar') do
+          expect(page).to have_content('My custom sidebar')
+          expect(page).not_to have_content('another')
+        end
+      end
     end
 
-    context 'when there is a customized sidebar' do
+    context 'when there is a custom sidebar' do
       before do
-        create(:wiki_page, wiki: wiki, title: '_sidebar', content: 'My customized sidebar')
-      end
+        create(:wiki_page, wiki: wiki, title: '_sidebar', content: 'My custom sidebar')
 
-      it 'renders my customized sidebar instead of the default one' do
         visit wiki_path(wiki)
+      end
+
+      it 'renders the custom sidebar instead of the default one' do
+        within('.right-sidebar') do
+          expect(page).to have_content('My custom sidebar')
+          expect(page).not_to have_content('another')
+        end
+      end
+
+      it 'can edit the custom sidebar' do
+        click_on 'Edit sidebar'
+
+        expect(page).to have_field(:wiki_content, with: 'My custom sidebar')
+
+        fill_in :wiki_content, with: 'My other custom sidebar'
+        click_on 'Save changes'
 
-        expect(page).to have_content('My customized sidebar')
-        expect(page).not_to have_content('Another')
+        within('.right-sidebar') do
+          expect(page).to have_content('My other custom sidebar')
+        end
       end
     end
   end

spec/views/shared/wikis/_sidebar.html.haml_spec.rb

@@ -80,4 +80,28 @@ RSpec.describe 'shared/wikis/_sidebar.html.haml' do
       end
     end
   end
+
+  describe 'link to edit the sidebar' do
+    before do
+      allow(view).to receive(:can?).with(anything, :create_wiki, anything).and_return(can_edit)
+
+      render
+    end
+
+    context 'when the user has edit permission' do
+      let(:can_edit) { true }
+
+      it 'renders the link' do
+        expect(rendered).to have_link('Edit sidebar', href: wiki_page_path(wiki, Wiki::SIDEBAR, action: :edit))
+      end
+    end
+
+    context 'when the user does not have edit permission' do
+      let(:can_edit) { false }
+
+      it 'does not render the link' do
+        expect(rendered).not_to have_link('Edit sidebar')
+      end
+    end
+  end
 end