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