From 8fb1a3824a92942f1c05524d0ede5c27c4b6d90f Mon Sep 17 00:00:00 2001
From: Julianna Tetreault <32834804+juliannatetreault@users.noreply.github.com>
Date: Fri, 23 Oct 2020 09:06:41 -0600
Subject: [PATCH] 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      | 50 +++++++++++++------
 .../homepage/user_visits_homepage_spec.rb     | 12 +++++
 2 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/app/views/articles/_sidebar_nav.html.erb b/app/views/articles/_sidebar_nav.html.erb
index 063d4936b..0c7f8a29b 100644
--- a/app/views/articles/_sidebar_nav.html.erb
+++ b/app/views/articles/_sidebar_nav.html.erb
@@ -45,7 +45,8 @@
 </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">
@@ -53,21 +54,42 @@
       </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>
diff --git a/spec/system/homepage/user_visits_homepage_spec.rb b/spec/system/homepage/user_visits_homepage_spec.rb
index 3468a1c82..1eb3268fe 100644
--- a/spec/system/homepage/user_visits_homepage_spec.rb
+++ b/spec/system/homepage/user_visits_homepage_spec.rb
@@ -87,6 +87,7 @@ RSpec.describe "User visits a homepage", type: :system do
         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 @@ RSpec.describe "User visits a homepage", type: :system do
       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,