From 7abe0f2589dbbc85514115296cb69e8d523c3b17 Mon Sep 17 00:00:00 2001
From: Frank L <lifrank1994@gmail.com>
Date: Fri, 18 Dec 2020 14:40:12 +0100
Subject: [PATCH 1/4] Add button to edit custom Wiki sidebar

---
 app/views/shared/wikis/_sidebar.html.haml     | 17 +++++++++----
 app/views/shared/wikis/edit.html.haml         |  2 +-
 .../unreleased/23109-add-wiki-edit-button.yml |  5 ++++
 doc/user/project/wiki/index.md                | 10 ++++----
 locale/gitlab.pot                             |  3 +++
 .../shared/wikis/_sidebar.html.haml_spec.rb   | 24 +++++++++++++++++++
 6 files changed, 51 insertions(+), 10 deletions(-)
 create mode 100644 changelogs/unreleased/23109-add-wiki-edit-button.yml

diff --git a/app/views/shared/wikis/_sidebar.html.haml b/app/views/shared/wikis/_sidebar.html.haml
index a906bf7aa63619e2..acac6f51065c52c5 100644
--- a/app/views/shared/wikis/_sidebar.html.haml
+++ b/app/views/shared/wikis/_sidebar.html.haml
@@ -1,13 +1,22 @@
+- 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_to edit_sidebar_url, class: (editing && @page&.slug == Wiki::SIDEBAR ? ' active' : ''), 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.')
diff --git a/app/views/shared/wikis/edit.html.haml b/app/views/shared/wikis/edit.html.haml
index 834749caaba2e774..b289c01801594233 100644
--- a/app/views/shared/wikis/edit.html.haml
+++ b/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
diff --git a/changelogs/unreleased/23109-add-wiki-edit-button.yml b/changelogs/unreleased/23109-add-wiki-edit-button.yml
new file mode 100644
index 0000000000000000..b5130d78b19e2106
--- /dev/null
+++ b/changelogs/unreleased/23109-add-wiki-edit-button.yml
@@ -0,0 +1,5 @@
+---
+title: Add button to edit custom Wiki sidebar
+merge_request: 50323
+author: Frank Li
+type: changed
diff --git a/doc/user/project/wiki/index.md b/doc/user/project/wiki/index.md
index 7802f2ba95e9fe72..cff3dd7938653ea2 100644
--- a/doc/user/project/wiki/index.md
+++ b/doc/user/project/wiki/index.md
@@ -204,13 +204,13 @@ 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.
+> - The button to edit the sidebar was [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/23109) in GitLab 13.8.
 
-To customize the sidebar, you can create a file named `_sidebar` to fully replace the default navigation.
+On the project's wiki page, there is a right side navigation that renders the full wiki pages list by default, with hierarchy.
 
-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).
+To customize the sidebar, you can click on **Edit sidebar** if you have editing permissions.
+
+This creates a file named `_sidebar` in the repository which fully replaces the default sidebar navigation.
 
 Example for `_sidebar` (using Markdown format):
 
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 41532b59f4a7d0e5..bcaa2c9cdd3f406d 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -10260,6 +10260,9 @@ msgstr ""
 msgid "Edit public deploy key"
 msgstr ""
 
+msgid "Edit sidebar"
+msgstr ""
+
 msgid "Edit stage"
 msgstr ""
 
diff --git a/spec/views/shared/wikis/_sidebar.html.haml_spec.rb b/spec/views/shared/wikis/_sidebar.html.haml_spec.rb
index 3e6918629376fcd7..7099136950624777 100644
--- a/spec/views/shared/wikis/_sidebar.html.haml_spec.rb
+++ b/spec/views/shared/wikis/_sidebar.html.haml_spec.rb
@@ -80,4 +80,28 @@
       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
-- 
GitLab


From 08b7da7ec9db43eb8fd73b4c15a9bfafa5ef45f0 Mon Sep 17 00:00:00 2001
From: Markus Koller <mkoller@gitlab.com>
Date: Wed, 23 Dec 2020 13:29:04 +0100
Subject: [PATCH 2/4] Define CSS class on separate line

---
 app/views/shared/wikis/_sidebar.html.haml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/views/shared/wikis/_sidebar.html.haml b/app/views/shared/wikis/_sidebar.html.haml
index acac6f51065c52c5..4e9fdc8b95acf647 100644
--- a/app/views/shared/wikis/_sidebar.html.haml
+++ b/app/views/shared/wikis/_sidebar.html.haml
@@ -14,7 +14,8 @@
 
         - if can?(current_user, :create_wiki, @wiki)
           - edit_sidebar_url = wiki_page_path(@wiki, Wiki::SIDEBAR, action: :edit)
-          = link_to edit_sidebar_url, class: (editing && @page&.slug == Wiki::SIDEBAR ? ' active' : ''), data: { qa_selector: 'edit_sidebar_link' } do
+          - 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")
 
-- 
GitLab


From c1f062a696d396eda4ebd556c3643cff1f20ee93 Mon Sep 17 00:00:00 2001
From: Markus Koller <mkoller@gitlab.com>
Date: Wed, 23 Dec 2020 13:29:24 +0100
Subject: [PATCH 3/4] Add feature spec

---
 ...user_views_wiki_sidebar_shared_examples.rb | 52 +++++++++++++++----
 1 file changed, 42 insertions(+), 10 deletions(-)

diff --git a/spec/support/shared_examples/features/wiki/user_views_wiki_sidebar_shared_examples.rb b/spec/support/shared_examples/features/wiki/user_views_wiki_sidebar_shared_examples.rb
index a7ba7a8ad0786155..9be7d73906537b5f 100644
--- a/spec/support/shared_examples/features/wiki/user_views_wiki_sidebar_shared_examples.rb
+++ b/spec/support/shared_examples/features/wiki/user_views_wiki_sidebar_shared_examples.rb
@@ -17,23 +17,55 @@
       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
-- 
GitLab


From 6bb689231514fa643a639973c0b7f866444e9038 Mon Sep 17 00:00:00 2001
From: Markus Koller <mkoller@gitlab.com>
Date: Wed, 23 Dec 2020 13:45:45 +0100
Subject: [PATCH 4/4] Improve sidebar docs

---
 doc/user/project/wiki/index.md | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/doc/user/project/wiki/index.md b/doc/user/project/wiki/index.md
index cff3dd7938653ea2..779179a66659488b 100644
--- a/doc/user/project/wiki/index.md
+++ b/doc/user/project/wiki/index.md
@@ -204,13 +204,11 @@ otherwise they will not display when pushed to GitLab:
 
 ## Customizing sidebar
 
-> - The button to edit the sidebar was [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/23109) in GitLab 13.8.
+> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/23109) in GitLab 13.8, the sidebar can be customized by clicking the **Edit sidebar** button.
 
-On the project's wiki page, there is a right side navigation that renders the full wiki pages list by default, with hierarchy.
+To customize the Wiki's navigation sidebar, you need Developer permissions to the project.
 
-To customize the sidebar, you can click on **Edit sidebar** if you have editing permissions.
-
-This creates a file named `_sidebar` in the repository which fully replaces the default sidebar navigation.
+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):
 
-- 
GitLab