UX: Update plugin's user page navigation to be compatible with new nav

assets/javascripts/discourse/connectors/user-main-nav/follow-user-container.hbs

@@ -1,3 +1,6 @@
 {{#if model.can_see_network_tab}}
-  {{#link-to "follow"}}{{d-icon "users"}}{{i18n "user.follow_nav"}}{{/link-to}}
+  {{#link-to "follow"}}
+    {{d-icon "users"}}
+    <span>{{i18n "user.follow_nav"}}</span>
+  {{/link-to}}
 {{/if}}

assets/javascripts/discourse/templates/follow.hbs

@@ -1,22 +1,50 @@
-{{#d-section pageClass="user-follow" class="user-secondary-navigation" scrollTop=false}}
-  {{#mobile-nav class="activity-nav" desktopClass="action-list follow-list nav-stacked"}}
-    {{#if (eq model.id currentUser.id)}}
-      <li>
-        {{#link-to "feed"}}{{i18n "user.feed.label"}}{{/link-to}}
-      </li>
-    {{/if}}
-    {{#if model.can_see_following}}
-      <li>
-        {{#link-to "following"}}{{i18n "user.following.label"}}{{/link-to}}
-      </li>
-    {{/if}}
-    {{#if (and model.can_see_followers model.allow_people_to_follow_me)}}
-      <li>
-        {{#link-to "followers"}}{{i18n "user.followers.label"}}{{/link-to}}
-      </li>
-    {{/if}}
-  {{/mobile-nav}}
-{{/d-section}}
+{{#if this.currentUser.redesigned_user_page_nav_enabled}}
+  <DSection @pageClass="user-follow" />
+
+  <div class="user-navigation user-navigation-secondary">
+    <HorizontalOverflowNav>
+      {{#if (eq model.id currentUser.id)}}
+        <DNavigationItem @route="feed">
+          <span>{{i18n "user.feed.label"}}</span>
+        </DNavigationItem>
+      {{/if}}
+
+      {{#if model.can_see_following}}
+        <DNavigationItem @route="following">
+          <span>{{i18n "user.following.label"}}</span>
+        </DNavigationItem>
+      {{/if}}
+
+      {{#if (and model.can_see_followers model.allow_people_to_follow_me)}}
+        <DNavigationItem @route="followers">
+          <span>{{i18n "user.followers.label"}}</span>
+        </DNavigationItem>
+      {{/if}}
+    </HorizontalOverflowNav>
+  </div>
+{{else}}
+  {{#d-section pageClass="user-follow" class="user-secondary-navigation" scrollTop=false}}
+    {{#mobile-nav class="activity-nav" desktopClass="action-list follow-list nav-stacked"}}
+      {{#if (eq model.id currentUser.id)}}
+        <li>
+          {{#link-to "feed"}}{{i18n "user.feed.label"}}{{/link-to}}
+        </li>
+      {{/if}}
+
+      {{#if model.can_see_following}}
+        <li>
+          {{#link-to "following"}}{{i18n "user.following.label"}}{{/link-to}}
+        </li>
+      {{/if}}
+
+      {{#if (and model.can_see_followers model.allow_people_to_follow_me)}}
+        <li>
+          {{#link-to "followers"}}{{i18n "user.followers.label"}}{{/link-to}}
+        </li>
+      {{/if}}
+    {{/mobile-nav}}
+  {{/d-section}}
+{{/if}}
 
 <section class="user-content user-follows-tab">
   {{outlet}}

spec/system/follow_user_pages_spec.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+RSpec.describe "Follow user pages", type: :system, js: true do
+  fab!(:user1) { Fabricate(:user) }
+  fab!(:user2) { Fabricate(:user) }
+  fab!(:user3) { Fabricate(:user) }
+  fab!(:user2_post) { Fabricate(:post, user: user2) }
+  let(:everyone_group) { Group[:everyone] }
+
+  before do
+    SiteSetting.discourse_follow_enabled = true
+    SiteSetting.follow_followers_visible = FollowPagesVisibility::EVERYONE
+    SiteSetting.follow_following_visible = FollowPagesVisibility::EVERYONE
+
+    Follow::Updater.new(user1, user2).watch_follow
+    Follow::Updater.new(user3, user1).watch_follow
+  end
+
+  describe 'when user has redesigned user page navigation enabled' do
+    before do
+      everyone_group.add(user1)
+      SiteSetting.enable_new_user_profile_nav_groups = everyone_group.name
+      sign_in(user1)
+    end
+
+    it 'should allow user to navigate to the follow user profile pages' do
+      follow_page = PageObjects::Pages::Follow.new(user1)
+      follow_page.visit
+
+      expect(follow_page).to have_following_topic(user2_post.topic)
+
+      follow_page.click_on_followers
+
+      expect(follow_page).to have_follower(user3)
+
+      follow_page.click_on_following
+
+      expect(follow_page).to have_following(user2)
+    end
+  end
+end

spec/system/page_objects/pages/follow.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Pages
+    class Follow < PageObjects::Pages::Base
+      CONTENT_CLASS = '.user-follows-tab'
+
+      def initialize(user)
+        super()
+        @user = user
+      end
+
+      def visit
+        page.visit("/u/#{@user.username}")
+        click_on I18n.t('js.user.follow_nav')
+        self
+      end
+
+      def click_on_followers
+        click_on I18n.t("js.user.followers.label")
+        self
+      end
+
+      def click_on_following
+        click_on I18n.t("js.user.following.label")
+        self
+      end
+
+      def has_follower?(user)
+        within(CONTENT_CLASS) do
+          page.has_content?(user.username)
+        end
+      end
+      alias_method :has_following?, :has_follower?
+
+      def has_following_topic?(topic)
+        within(CONTENT_CLASS) do
+          page.has_content?(topic.title)
+        end
+      end
+    end
+  end
+end