Merge branch 'feat/explore-project-topics' into 'master'

Add 'Explore topics' page

See merge request gitlab-org/gitlab!62443

app/controllers/explore/projects_controller.rb

@@ -68,6 +68,11 @@ class Explore::ProjectsController < Explore::ApplicationController
   end
   # rubocop: enable CodeReuse/ActiveRecord
 
+  def topics
+    load_project_counts
+    load_topics
+  end
+
   def topic
     load_topic
 
@@ -95,6 +100,10 @@ class Explore::ProjectsController < Explore::ApplicationController
     prepare_projects_for_rendering(projects)
   end
 
+  def load_topics
+    @topics = Projects::TopicsFinder.new(params: params.permit(:search)).execute.page(params[:page]).without_count
+  end
+
   def load_topic
     @topic = Projects::Topic.find_by_name(params[:topic_name])
   end

app/helpers/nav/top_nav_helper.rb

@@ -267,6 +267,7 @@ module Nav
       builder.add_primary_menu_item(id: 'your', title: _('Your projects'), href: dashboard_projects_path)
       builder.add_primary_menu_item(id: 'starred', title: _('Starred projects'), href: starred_dashboard_projects_path)
       builder.add_primary_menu_item(id: 'explore', title: _('Explore projects'), href: explore_root_path)
+      builder.add_primary_menu_item(id: 'topics', title: _('Explore topics'), href: topics_explore_projects_path)
       builder.add_secondary_menu_item(id: 'create', title: _('Create new project'), href: new_project_path)
       builder.build
     end

app/views/dashboard/_projects_head.html.haml

@@ -14,19 +14,7 @@
 .top-area.scrolling-tabs-container.inner-page-scroll-tabs
   .fade-left= sprite_icon('chevron-lg-left', size: 12)
   .fade-right= sprite_icon('chevron-lg-right', size: 12)
-  %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs{ class: ('border-0' if feature_project_list_filter_bar) }
-    = nav_link(page: [dashboard_projects_path, root_path]) do
-      = link_to dashboard_projects_path, class: 'shortcuts-activity', data: {placement: 'right'} do
-        = _("Your projects")
-        %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= limited_counter_with_delimiter(@total_user_projects_count)
-    = nav_link(page: starred_dashboard_projects_path) do
-      = link_to starred_dashboard_projects_path, data: {placement: 'right'} do
-        = _("Starred projects")
-        %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= limited_counter_with_delimiter(@total_starred_projects_count)
-    = nav_link(page: [explore_root_path, trending_explore_projects_path, starred_explore_projects_path, explore_projects_path]) do
-      = link_to explore_root_path, data: {placement: 'right'} do
-        = _("Explore projects")
-    = render_if_exists "dashboard/removed_projects_tab", removed_projects_count: @removed_projects_count
+  = render 'dashboard/projects_nav'
   - unless feature_project_list_filter_bar
     .nav-controls
       = render 'shared/projects/search_form'

app/views/dashboard/_projects_nav.html.haml

+- feature_project_list_filter_bar = Feature.enabled?(:project_list_filter_bar)
+
+%ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs{ class: ('gl-border-0!' if feature_project_list_filter_bar) }
+  = nav_link(page: [dashboard_projects_path, root_path]) do
+    = link_to dashboard_projects_path, class: 'shortcuts-activity', data: {placement: 'right'} do
+      = _("Your projects")
+      %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= limited_counter_with_delimiter(@total_user_projects_count)
+  = nav_link(page: starred_dashboard_projects_path) do
+    = link_to starred_dashboard_projects_path, data: {placement: 'right'} do
+      = _("Starred projects")
+      %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= limited_counter_with_delimiter(@total_starred_projects_count)
+  = nav_link(page: [explore_root_path, trending_explore_projects_path, starred_explore_projects_path, explore_projects_path]) do
+    = link_to explore_root_path, data: {placement: 'right'} do
+      = _("Explore projects")
+  = nav_link(page: topics_explore_projects_path) do
+    = link_to topics_explore_projects_path, data: {placement: 'right'} do
+      = _("Explore topics")
+  = render_if_exists "dashboard/removed_projects_tab", removed_projects_count: @removed_projects_count

app/views/explore/projects/topics.html.haml

+- @hide_top_links = true
+- page_title    _("Topics")
+- header_title  _("Topics"), topics_explore_projects_path
+
+= render_dashboard_ultimate_trial(current_user)
+
+- if current_user
+  = render 'explore/topics/head'
+- else
+  = render 'explore/head'
+
+= render partial: 'shared/topics/list'

app/views/explore/topics/_head.html.haml

+.page-title-holder.d-flex.align-items-center
+  %h1.page-title= _('Projects')
+
+.top-area.scrolling-tabs-container.inner-page-scroll-tabs
+  .fade-left= sprite_icon('chevron-lg-left', size: 12)
+  .fade-right= sprite_icon('chevron-lg-right', size: 12)
+  = render 'dashboard/projects_nav'
+  .nav-controls
+    = render 'shared/topics/search_form'

app/views/shared/topics/_list.html.haml

+- remote = local_assigns.fetch(:remote, false)
+
+- if @topics.empty?
+  = render 'shared/empty_states/topics'
+- else
+  .row.gl-mt-3
+    = render partial: 'shared/topics/topic', collection: @topics
+
+  = paginate_collection @topics, remote: remote

app/views/shared/topics/_topic.html.haml

+- max_topic_name_length = 30
+- detail_page_link = topic_explore_projects_path(topic_name: topic.name)
+
+.col-lg-3.col-md-4.col-sm-12
+  .gl-card.gl-mb-5
+    .gl-card-body.gl-display-flex.gl-align-items-center
+      .avatar-container.rect-avatar.s40.gl-flex-shrink-0
+        = link_to detail_page_link do
+          = topic_icon(topic, class: "avatar s40")
+      = link_to detail_page_link do
+        - if topic.name.length > max_topic_name_length
+          %h5.str-truncated.has-tooltip{ title: topic.name }
+            = truncate(topic.name, length: max_topic_name_length)
+        - else
+          %h5
+            = topic.name

config/routes/explore.rb

@@ -5,6 +5,7 @@ namespace :explore do
     collection do
       get :trending
       get :starred
+      get :topics
       get 'topics/:topic_name', action: :topic, as: :topic, constraints: { topic_name: /.+/ }
     end
   end

locale/gitlab.pot

@@ -13997,6 +13997,9 @@ msgstr ""
 msgid "Explore public groups"
 msgstr ""
 
+msgid "Explore topics"
+msgstr ""
+
 msgid "Export"
 msgstr ""
 

spec/features/explore/topics_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Explore Topics' do
+  context 'when no topics exist' do
+    it 'renders empty message', :aggregate_failures do
+      visit topics_explore_projects_path
+
+      expect(current_path).to eq topics_explore_projects_path
+      expect(page).to have_content('There are no topics to show.')
+    end
+  end
+
+  context 'when topics exist' do
+    let!(:topic) { create(:topic, name: 'topic1') }
+
+    it 'renders topic list' do
+      visit topics_explore_projects_path
+
+      expect(current_path).to eq topics_explore_projects_path
+      expect(page).to have_content('topic1')
+    end
+  end
+end

spec/helpers/nav/top_nav_helper_spec.rb

@@ -188,6 +188,11 @@ RSpec.describe Nav::TopNavHelper do
                 href: '/explore',
                 id: 'explore',
                 title: 'Explore projects'
+              ),
+              ::Gitlab::Nav::TopNavMenuItem.build(
+                href: '/explore/projects/topics',
+                id: 'topics',
+                title: 'Explore topics'
               )
             ]
             expect(projects_view[:linksPrimary]).to eq(expected_links_primary)