Add Explore Tags for Signed-In Users (#11022) [deploy]

* Adds an Explore Tag section for logged in users
  - Logged in users who follow no tags are shown Explore Tags
  - Links to the /tags page
  - Shows top 5 tags below Explore Tags header

* WIP: Adds a test around logged in users who do not follow tags

* Refactors spec to test Explore Tags functionality and adjusts id in _sidebar_nav

* Replaces cog svg with linked header

* Implements design suggestions for Explore and adjusts test

app/views/articles/_sidebar_nav.html.erb

@@ -45,29 +45,51 @@
 </nav>
 
 <nav class="mb-6" aria-label="Secondary sidebar nav">
-  <% if user_signed_in? %>
+<nav class="mb-6" aria-label="Secondary sidebar nav">
+  <% if user_signed_in? && current_user.following_tags_count.positive? %>
     <header class="p-2 pr-0 flex items-center justify-between">
       <h3 class="crayons-subtitle-3">My Tags</h3>
       <a href="/dashboard/following_tags" class="crayons-btn crayons-btn--icon crayons-btn--ghost-dimmed" aria-label="Customize tag priority" title="Customize tag priority">
         <%= inline_svg_tag("cog.svg", aria: true, class: "crayons-icon") %>
       </a>
     </header>
     <div id="sidebar-nav-followed-tags" class="overflow-y-auto mb-2" style="max-height: 42vh;"></div>
-  <% else %>
-    <h3 class="crayons-subtitle-3 p-2">Popular Tags</h3>
-    <div id="sidebar-nav-default-tags" class="overflow-y-auto" style="max-height: 42vh">
-      <% Tag.where(supported: true).order(hotness_score: :desc).limit(30).pluck(:id, :name).each do |tag_array| %>
-        <div class="sidebar-nav-element" id="default-sidebar-element-<%= tag_array.second %>">
-          <a class="crayons-link crayons-link--block py-2 px-2" href="<%= tag_path(tag_array.second) %>">
-            #<%= tag_array.second %>
-          </a>
-          <a class="follow-action-button sidebar-nav-link-follow crayons-btn crayons-btn--s"
-            href="#" id="sidebar-nav-link-follow-<%= tag_array.second %>"
-            data-info='{"id":<%= tag_array.first %>,"className":"Tag"}'>
-            Follow
-          </a>
+    <% elsif user_signed_in? %>
+     <header class="p-2 pr-0 flex items-center justify-between">
+       <h3 class="crayons-subtitle-3">Explore</h3>
+       <a href="<%= tags_path %>" class="fs-s crayons-link crayons-link--brand pr-2" title="Browse all tags">
+        All tags
+        </a>
+      </header>
+      <div id="sidebar-nav-explore-tags" class="overflow-y-auto" style="max-height: 42vh">
+        <% Tag.where(supported: true).order(hotness_score: :desc).limit(5).pluck(:id, :name).each do |tag_array| %>
+          <div class="sidebar-nav-element" id="default-sidebar-element-<%= tag_array.second %>">
+            <a class="crayons-link crayons-link--block py-2 px-2" href="<%= tag_path(tag_array.second) %>">
+              #<%= tag_array.second %>
+            </a>
+            <a class="follow-action-button sidebar-nav-link-follow crayons-btn crayons-btn--s"
+              href="#" id="sidebar-nav-link-follow-<%= tag_array.second %>"
+              data-info='{"id":<%= tag_array.first %>,"className":"Tag"}'>
+              Follow
+            </a>
         </div>
       <% end %>
     </div>
+    <% else %>
+      <h3 class="crayons-subtitle-3 p-2">Popular Tags</h3>
+      <div id="sidebar-nav-default-tags" class="overflow-y-auto" style="max-height: 42vh">
+        <% Tag.where(supported: true).order(hotness_score: :desc).limit(30).pluck(:id, :name).each do |tag_array| %>
+          <div class="sidebar-nav-element" id="default-sidebar-element-<%= tag_array.second %>">
+            <a class="crayons-link crayons-link--block py-2 px-2" href="<%= tag_path(tag_array.second) %>">
+              #<%= tag_array.second %>
+            </a>
+            <a class="follow-action-button sidebar-nav-link-follow crayons-btn crayons-btn--s"
+              href="#" id="sidebar-nav-link-follow-<%= tag_array.second %>"
+              data-info='{"id":<%= tag_array.first %>,"className":"Tag"}'>
+              Follow
+            </a>
+          </div>
+      <% end %>
+    </div>
   <% end %>
 </nav>

spec/system/homepage/user_visits_homepage_spec.rb

@@ -87,6 +87,7 @@
         user.follows.create!(followable: ruby_tag)
         user.follows.create!(followable: create(:tag, name: "go", hotness_score: 99))
         user.follows.create!(followable: create(:tag, name: "javascript"), points: 3)
+        user.update!(following_tags_count: 3)
 
         visit "/"
       end
@@ -112,6 +113,17 @@
       end
     end
 
+    context "when user does not follow tags" do
+      before do
+        visit "/"
+      end
+
+      it "shows 'Explore Tags' and links to /tags", js: true do
+        expect(page).to have_text("Explore")
+        expect(page).to have_selector(:css, 'a[href="/tags"]')
+      end
+    end
+
     context "when rendering < 5 navigation links" do
       let!(:navigation_link_1) do
         create(:navigation_link,