Merge branch '23535-folders-in-wiki-repository' into 'master'

Show directory hierarchy when listing wiki pages

Closes #23535

See merge request !8133

app/assets/stylesheets/pages/wiki.scss

+.new-wiki-page {
+  .new-wiki-page-slug-tip {
+    display: inline-block;
+    max-width: 100%;
+    margin-top: 5px;
+  }
+}
+
 .title .edit-wiki-header {
   width: 780px;
   margin-left: auto;
@@ -9,12 +17,18 @@
   @extend .top-area;
   position: relative;
 
+  .wiki-breadcrumb {
+    border-bottom: 1px solid $white-normal;
+    padding: 11px 0;
+  }
+
   .wiki-page-title {
     margin: 0;
     font-size: 22px;
   }
 
   .wiki-last-edit-by {
+    display: block;
     color: $gl-text-color-secondary;
 
     strong {
@@ -121,6 +135,10 @@
     margin: 5px 0 10px;
   }
 
+  ul.wiki-pages ul {
+    padding-left: 15px;
+  }
+
   .wiki-sidebar-header {
     padding: 0 $gl-padding $gl-padding;
 
@@ -129,3 +147,15 @@
     }
   }
 }
+
+ul.wiki-pages-list.content-list {
+  & ul {
+    list-style: none;
+    margin-left: 0;
+    padding-left: 15px;
+  }
+
+  & ul li {
+    padding: 5px 0;
+  }
+}

app/controllers/projects/wikis_controller.rb

@@ -8,6 +8,7 @@ class Projects::WikisController < Projects::ApplicationController
 
   def pages
     @wiki_pages = Kaminari.paginate_array(@project_wiki.pages).page(params[:page])
+    @wiki_entries = WikiPage.group_by_directory(@wiki_pages)
   end
 
   def show
@@ -116,7 +117,7 @@ class Projects::WikisController < Projects::ApplicationController
     # Call #wiki to make sure the Wiki Repo is initialized
     @project_wiki.wiki
 
-    @sidebar_wiki_pages = @project_wiki.pages.first(15)
+    @sidebar_wiki_entries = WikiPage.group_by_directory(@project_wiki.pages.first(15))
   rescue ProjectWiki::CouldNotCreateWikiError
     flash[:notice] = "Could not create Wiki Repository at this time. Please try again later."
     redirect_to project_path(@project)

app/helpers/wiki_helper.rb

+module WikiHelper
+  # Produces a pure text breadcrumb for a given page.
+  #
+  # page_slug - The slug of a WikiPage object.
+  #
+  # Returns a String composed of the capitalized name of each directory and the
+  # capitalized name of the page itself.
+  def breadcrumb(page_slug)
+    page_slug.split('/').
+      map { |dir_or_page| WikiPage.unhyphenize(dir_or_page).capitalize }.
+      join(' / ')
+  end
+end

app/models/wiki_directory.rb

+class WikiDirectory
+  include ActiveModel::Validations
+
+  attr_accessor :slug, :pages
+
+  validates :slug, presence: true
+
+  def initialize(slug, pages = [])
+    @slug = slug
+    @pages = pages
+  end
+
+  # Relative path to the partial to be used when rendering collections
+  # of this object.
+  def to_partial_path
+    'projects/wikis/wiki_directory'
+  end
+end

app/models/wiki_page.rb

@@ -12,6 +12,32 @@ class WikiPage
     ActiveModel::Name.new(self, nil, 'wiki')
   end
 
+  # Sorts and groups pages by directory.
+  #
+  # pages - an array of WikiPage objects.
+  #
+  # Returns an array of WikiPage and WikiDirectory objects. The entries are
+  # sorted by alphabetical order (directories and pages inside each directory).
+  # Pages at the root level come before everything.
+  def self.group_by_directory(pages)
+    return [] if pages.blank?
+
+    pages.sort_by { |page| [page.directory, page.slug] }.
+      group_by(&:directory).
+      map do |dir, pages|
+        if dir.present?
+          WikiDirectory.new(dir, pages)
+        else
+          pages
+        end
+      end.
+      flatten
+  end
+
+  def self.unhyphenize(name)
+    name.gsub(/-+/, ' ')
+  end
+
   def to_key
     [:slug]
   end
@@ -56,7 +82,7 @@ class WikiPage
   # The formatted title of this page.
   def title
     if @attributes[:title]
-      @attributes[:title].gsub(/-+/, ' ')
+      self.class.unhyphenize(@attributes[:title])
     else
       ""
     end
@@ -72,6 +98,11 @@ class WikiPage
     @attributes[:content] ||= @page&.text_data
   end
 
+  # The hierarchy of the directory this page is contained in.
+  def directory
+    wiki.page_title_and_dir(slug).last
+  end
+
   # The processed/formatted content of this page.
   def formatted_content
     @attributes[:formatted_content] ||= @page&.formatted_data
@@ -170,6 +201,12 @@ class WikiPage
     end
   end
 
+  # Relative path to the partial to be used when rendering collections
+  # of this object.
+  def to_partial_path
+    'projects/wikis/wiki_page'
+  end
+
   private
 
   def set_attributes

app/views/projects/wikis/_new.html.haml

@@ -13,5 +13,9 @@
               = label_tag :new_wiki_path do
                 %span Page slug
               = text_field_tag :new_wiki_path, nil, placeholder: 'how-to-setup', class: 'form-control', required: true, :'data-wikis-path' => namespace_project_wikis_path(@project.namespace, @project), autofocus: true
+              %span.new-wiki-page-slug-tip
+                = icon('lightbulb-o')
+                Tip: You can specify the full path for the new file.
+                We will automatically create any missing directories.
             .form-actions
               = button_tag 'Create Page', class: 'build-new-wiki btn btn-create'

app/views/projects/wikis/_pages_wiki_page.html.haml

+%li
+  = link_to wiki_page.title, namespace_project_wiki_path(@project.namespace, @project, wiki_page)
+  %small (#{wiki_page.format})
+  .pull-right
+    %small Last edited #{time_ago_with_tooltip(wiki_page.commit.authored_date)}

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

@@ -12,10 +12,8 @@
   .blocks-container
     .block.block-first
       %ul.wiki-pages
-        - @sidebar_wiki_pages.each do |wiki_page|
-          %li{ class: params[:id] == wiki_page.slug ? 'active' : '' }
-            = link_to namespace_project_wiki_path(@project.namespace, @project, wiki_page) do
-              = wiki_page.title.capitalize
+        = render @sidebar_wiki_entries, context: 'sidebar'
+
     .block
       = link_to namespace_project_wikis_pages_path(@project.namespace, @project), class: 'btn btn-block' do
         More Pages

app/views/projects/wikis/_sidebar_wiki_page.html.haml

+%li{ class: params[:id] == wiki_page.slug ? 'active' : '' }
+  = link_to namespace_project_wiki_path(@project.namespace, @project, wiki_page) do
+    = wiki_page.title.capitalize

app/views/projects/wikis/_wiki_directory.html.haml

+%li
+  = wiki_directory.slug
+  %ul
+    = render wiki_directory.pages, context: context

app/views/projects/wikis/_wiki_page.html.haml

+= render "#{context}_wiki_page", wiki_page: wiki_page

app/views/projects/wikis/pages.html.haml

@@ -13,11 +13,7 @@
         = icon('cloud-download')
         Clone repository
 
-  %ul.content-list
-    - @wiki_pages.each do |wiki_page|
-      %li
-        = link_to wiki_page.title, namespace_project_wiki_path(@project.namespace, @project, wiki_page)
-        %small (#{wiki_page.format})
-        .pull-right
-          %small Last edited #{time_ago_with_tooltip(wiki_page.commit.authored_date)}
+  %ul.wiki-pages-list.content-list
+    = render @wiki_entries, context: 'pages'
+
   = paginate @wiki_pages, theme: 'gitlab'

app/views/projects/wikis/show.html.haml

@@ -6,9 +6,11 @@
     %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
       = icon('angle-double-left')
 
+    .wiki-breadcrumb
+      %span= breadcrumb(@page.slug)
+
     .nav-text
       %h2.wiki-page-title= @page.title.capitalize
-
       %span.wiki-last-edit-by
         Last edited by
         %strong

changelogs/unreleased/23535-folders-in-wiki-repository.yml

+---
+title: Show directory hierarchy when listing wiki pages
+merge_request: 8133
+author: Alex Braha Stoll

spec/factories/wiki_directories.rb

+FactoryGirl.define do
+  factory :wiki_directory do
+    slug '/path_up_to/dir'
+    initialize_with { new(slug) }
+  end
+end

spec/helpers/wiki_helper_spec.rb

+require 'spec_helper'
+
+describe WikiHelper do
+  describe '#breadcrumb' do
+    context 'when the page is at the root level' do
+      it 'returns the capitalized page name' do
+        slug = 'page-name'
+
+        expect(helper.breadcrumb(slug)).to eq('Page name')
+      end
+    end
+
+    context 'when the page is inside a directory' do
+      it 'returns the capitalized name of each directory and of the page itself' do
+        slug = 'dir_1/page-name'
+
+        expect(helper.breadcrumb(slug)).to eq('Dir_1 / Page name')
+      end
+    end
+  end
+end

spec/models/wiki_directory_spec.rb

+require 'spec_helper'
+
+RSpec.describe WikiDirectory, models: true do
+  describe 'validations' do
+    subject { build(:wiki_directory) }
+
+    it { is_expected.to validate_presence_of(:slug) }
+  end
+
+  describe '#initialize' do
+    context 'when there are pages' do
+      let(:pages) { [build(:wiki_page)] }
+      let(:directory) { WikiDirectory.new('/path_up_to/dir', pages) }
+
+      it 'sets the slug attribute' do
+        expect(directory.slug).to eq('/path_up_to/dir')
+      end
+
+      it 'sets the pages attribute' do
+        expect(directory.pages).to eq(pages)
+      end
+    end
+
+    context 'when there are no pages' do
+      let(:directory) { WikiDirectory.new('/path_up_to/dir') }
+
+      it 'sets the slug attribute' do
+        expect(directory.slug).to eq('/path_up_to/dir')
+      end
+
+      it 'sets the pages attribute to an empty array' do
+        expect(directory.pages).to eq([])
+      end
+    end
+  end
+
+  describe '#to_partial_path' do
+    it 'returns the relative path to the partial to be used' do
+      directory = build(:wiki_directory)
+
+      expect(directory.to_partial_path).to eq('projects/wikis/wiki_directory')
+    end
+  end
+end

spec/models/wiki_page_spec.rb

@@ -7,6 +7,75 @@ describe WikiPage, models: true do
 
   subject { WikiPage.new(wiki) }
 
+  describe '.group_by_directory' do
+    context 'when there are no pages' do
+      it 'returns an empty array' do
+        expect(WikiPage.group_by_directory(nil)).to eq([])
+        expect(WikiPage.group_by_directory([])).to eq([])
+      end
+    end
+
+    context 'when there are pages' do
+      before do
+        create_page('dir_1/dir_1_1/page_3', 'content')
+        create_page('dir_1/page_2', 'content')
+        create_page('dir_2/page_5', 'content')
+        create_page('dir_2/page_4', 'content')
+        create_page('page_1', 'content')
+      end
+      let(:page_1) { wiki.find_page('page_1') }
+      let(:dir_1) do
+        WikiDirectory.new('dir_1', [wiki.find_page('dir_1/page_2')])
+      end
+      let(:dir_1_1) do
+        WikiDirectory.new('dir_1/dir_1_1', [wiki.find_page('dir_1/dir_1_1/page_3')])
+      end
+      let(:dir_2) do
+        pages = [wiki.find_page('dir_2/page_5'),
+                 wiki.find_page('dir_2/page_4')]
+        WikiDirectory.new('dir_2', pages)
+      end
+
+      it 'returns an array with pages and directories' do
+        expected_grouped_entries = [page_1, dir_1, dir_1_1, dir_2]
+
+        grouped_entries = WikiPage.group_by_directory(wiki.pages)
+
+        grouped_entries.each_with_index do |page_or_dir, i|
+          expected_page_or_dir = expected_grouped_entries[i]
+          expected_slugs = get_slugs(expected_page_or_dir)
+          slugs = get_slugs(page_or_dir)
+
+          expect(slugs).to match_array(expected_slugs)
+        end
+      end
+
+      it 'returns an array sorted by alphabetical position' do
+        # Directories and pages within directories are sorted alphabetically.
+        # Pages at root come before everything.
+        expected_order = ['page_1', 'dir_1/page_2', 'dir_1/dir_1_1/page_3',
+                          'dir_2/page_4', 'dir_2/page_5']
+
+        grouped_entries = WikiPage.group_by_directory(wiki.pages)
+
+        actual_order =
+          grouped_entries.map do |page_or_dir|
+            get_slugs(page_or_dir)
+          end.
+          flatten
+        expect(actual_order).to eq(expected_order)
+      end
+    end
+  end
+
+  describe '.unhyphenize' do
+    it 'removes hyphens from a name' do
+      name = 'a-name--with-hyphens'
+
+      expect(WikiPage.unhyphenize(name)).to eq('a name with hyphens')
+    end
+  end
+
   describe "#initialize" do
     context "when initialized with an existing gollum page" do
       before do
@@ -189,6 +258,26 @@ describe WikiPage, models: true do
     end
   end
 
+  describe '#directory' do
+    context 'when the page is at the root directory' do
+      it 'returns an empty string' do
+        create_page('file', 'content')
+        page = wiki.find_page('file')
+
+        expect(page.directory).to eq('')
+      end
+    end
+
+    context 'when the page is inside an actual directory' do
+      it 'returns the full directory hierarchy' do
+        create_page('dir_1/dir_1_1/file', 'content')
+        page = wiki.find_page('dir_1/dir_1_1/file')
+
+        expect(page.directory).to eq('dir_1/dir_1_1')
+      end
+    end
+  end
+
   describe '#historical?' do
     before do
       create_page('Update', 'content')
@@ -221,6 +310,14 @@ describe WikiPage, models: true do
     end
   end
 
+  describe '#to_partial_path' do
+    it 'returns the relative path to the partial to be used' do
+      page = build(:wiki_page)
+
+      expect(page.to_partial_path).to eq('projects/wikis/wiki_page')
+    end
+  end
+
   private
 
   def remove_temp_repo(path)
@@ -239,4 +336,12 @@ describe WikiPage, models: true do
     page = wiki.wiki.paged(title)
     wiki.wiki.delete_page(page, commit_details)
   end
+
+  def get_slugs(page_or_dir)
+    if page_or_dir.is_a? WikiPage
+      [page_or_dir.slug]
+    else
+      page_or_dir.pages.present? ? page_or_dir.pages.map(&:slug) : []
+    end
+  end
 end