Merge branch 'wiki-components' into 'master'

Use CrudComponent for wiki templates list

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/160798



Merged-by: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Approved-by: Julia Miocene <jmiocene@gitlab.com>
Approved-by: Himanshu Kapoor <info@fleon.org>

app/assets/stylesheets/page_bundles/wiki.scss

@@ -115,17 +115,6 @@ ul.wiki-pages-list.content-list {
   }
 }
 
-.wiki-templates-list {
-  li {
-    padding-left: $gl-spacing-scale-4 !important;
-    padding-right: $gl-spacing-scale-4 !important;
-
-    li {
-      padding: 0 !important;
-    }
-  }
-}
-
 .drawio-editor {
   position: fixed;
   top: 0;

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

-%li{ class: "!gl-px-5 #{ '!gl-border-b-0' if !wiki_page.template? }" }
+%li{ class: "#{ '!gl-border-b-0' if !wiki_page.template? }" }
   .gl-flex.gl-items-center.gl-justify-between.gl-gap-5
     .gl-flex.gl-items-baseline.gl-gap-5.gl-w-full
       .gl-flex.gl-items-baseline.gl-grow.gl-gap-2

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

@@ -3,37 +3,28 @@
 - page_title s_("Wiki|Templates"), _("Wiki")
 - add_page_specific_style 'page_bundles/wiki'
 
-.wiki-page-header
-  = render ::Layouts::PageHeadingComponent.new(s_("Wiki|Wiki templates")) do |c|
-    - c.with_actions do
-      .dropdown.inline.wiki-sort-dropdown
-        .btn-group{ role: 'group' }
-          = wiki_sort_controls(@wiki, params[:direction], action: :templates)
+= render ::Layouts::PageHeadingComponent.new(s_("Wiki|Wiki templates")) do |c|
+  - c.with_actions do
+    .dropdown.inline.wiki-sort-dropdown
+      .btn-group{ role: 'group' }
+        = wiki_sort_controls(@wiki, params[:direction], action: :templates)
 
-      #js-vue-wiki-more-actions{ data: {
-        clone_ssh_url: ssh_clone_url_to_repo(@wiki),
-        clone_http_url: http_clone_url_to_repo(@wiki),
-        wiki_url: wiki_path(@wiki),
-        new_url: wiki_page_path(@wiki, "#{Wiki::TEMPLATES_DIR}/#{SecureRandom.uuid}", random_title: true),
-        templates_url: wiki_page_path(@wiki, Wiki::TEMPLATES_DIR),
-      } }
+    #js-vue-wiki-more-actions{ data: {
+      clone_ssh_url: ssh_clone_url_to_repo(@wiki),
+      clone_http_url: http_clone_url_to_repo(@wiki),
+      wiki_url: wiki_path(@wiki),
+      new_url: wiki_page_path(@wiki, "#{Wiki::TEMPLATES_DIR}/#{SecureRandom.uuid}", random_title: true),
+      templates_url: wiki_page_path(@wiki, Wiki::TEMPLATES_DIR),
+    } }
 
-= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card gl-mt-0' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
-  - c.with_header do
-    .gl-new-card-title-wrapper.gl-flex-col
-      %h3.gl-new-card-title
-        = s_("Wiki|Templates")
-        .gl-new-card-count
-          = sprite_icon('template', css_class: 'gl-mr-2')
-          = @wiki_entries_count
-
-    .gl-new-card-actions
-      = render Pajamas::ButtonComponent.new(href: wiki_page_path(@wiki, "#{Wiki::TEMPLATES_DIR}/#{SecureRandom.uuid}", random_title: true), size: :small) do
-        = s_("Wiki|New template")
+= render ::Layouts::CrudComponent.new(s_("Wiki|Templates"), count: @wiki_entries_count, icon: 'template', body_options: { class: '' }) do |c|
+  - c.with_actions do
+    = render Pajamas::ButtonComponent.new(href: wiki_page_path(@wiki, "#{Wiki::TEMPLATES_DIR}/#{SecureRandom.uuid}", random_title: true), size: :small) do
+      = s_("Wiki|New template")
   - c.with_body do
-    %ul.wiki-pages-list.content-list.wiki-templates-list
+    %ul.wiki-pages-list.content-list.wiki-templates-list.content-list-items-padding
       - if @templates_list.empty?
-        %li.no-wiki-pages{ class: '!gl-px-5' }
+        %li.no-wiki-pages.gl-px-3
           = s_("Wiki|No templates found")
       - @wiki_entries.each do |entry|
         = render partial: entry.to_partial_path, object: entry, locals: { context: 'pages' }