Feat: implement rss functionality for profile edit overflow menu

* Add RSS subscription link to the newly introduced overflow menu.
* Add test cases against the addition.

app/assets/javascripts/users/profile/actions/components/user_actions_app.vue

@@ -11,13 +11,17 @@ export default {
       type: String,
       required: true,
     },
+    rssSubscriptionPath: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
-      // Only implement the copy function in MR for now
+      // Only implement the copy function and RSS subscription in MR for now
       // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/122971
       // The rest will be implemented in the upcoming MR.
-      dropdownItems: [
+      defaultDropdownItems: [
         {
           action: this.onUserIdCopy,
           text: sprintf(this.$options.i18n.userId, { id: this.userId }),
@@ -28,6 +32,23 @@ export default {
       ],
     };
   },
+  computed: {
+    dropdownItems() {
+      if (this.rssSubscriptionPath) {
+        return [
+          ...this.defaultDropdownItems,
+          {
+            href: this.rssSubscriptionPath,
+            text: this.$options.i18n.rssSubscribe,
+            extraAttrs: {
+              'data-testid': 'user-profile-rss-subscription-link',
+            },
+          },
+        ];
+      }
+      return this.defaultDropdownItems;
+    },
+  },
   methods: {
     onUserIdCopy() {
       this.$toast.show(this.$options.i18n.userIdCopied);
@@ -36,6 +57,7 @@ export default {
   i18n: {
     userId: s__('UserProfile|Copy user ID: %{id}'),
     userIdCopied: s__('UserProfile|User ID copied to clipboard'),
+    rssSubscribe: s__('UserProfile|Subscribe'),
   },
 };
 </script>

app/assets/javascripts/users/profile/actions/index.js

@@ -7,7 +7,7 @@ export const initUserActionsApp = () => {
 
   if (!mountingEl) return false;
 
-  const { userId } = mountingEl.dataset;
+  const { userId, rssSubscriptionPath } = mountingEl.dataset;
 
   Vue.use(GlToast);
 
@@ -18,6 +18,7 @@ export const initUserActionsApp = () => {
       return createElement(UserActionsApp, {
         props: {
           userId,
+          rssSubscriptionPath,
         },
       });
     },

app/views/users/show.html.haml

@@ -26,7 +26,7 @@
               = s_("UserProfile|Edit profile")
           = render 'users/view_gpg_keys'
           = render 'users/view_user_in_admin_area'
-          .js-user-profile-actions{ data: { user_id: @user.id } }
+          .js-user-profile-actions{ data: { user_id: @user.id, rss_subscription_path: can?(current_user, :read_user_profile, @user) ? user_path(@user, rss_url_options) : '' } }
       - else
         = render layout: 'users/cover_controls' do
           - if @user == current_user

spec/features/users/rss_spec.rb

@@ -6,28 +6,53 @@
   let(:user) { create(:user) }
   let(:path) { user_path(create(:user)) }
 
-  before do
-    stub_feature_flags(user_profile_overflow_menu_vue: false)
-  end
-
-  context 'when signed in' do
+  describe 'with "user_profile_overflow_menu_vue" feature flag off' do
     before do
-      sign_in(user)
-      visit path
+      stub_feature_flags(user_profile_overflow_menu_vue: false)
     end
 
-    it_behaves_like "it has an RSS button with current_user's feed token"
-  end
+    context 'when signed in' do
+      before do
+        sign_in(user)
+        visit path
+      end
 
-  context 'when signed out' do
-    before do
-      visit path
+      it_behaves_like "it has an RSS button with current_user's feed token"
     end
 
-    it_behaves_like "it has an RSS button without a feed token"
+    context 'when signed out' do
+      before do
+        visit path
+      end
+
+      it_behaves_like "it has an RSS button without a feed token"
+    end
   end
 
-  # TODO: implement tests before the FF "user_profile_overflow_menu_vue" is turned on
-  # See: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/122971
-  # Related Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/416974
+  describe 'with "user_profile_overflow_menu_vue" feature flag on', :js do
+    context 'when signed in' do
+      before do
+        sign_in(user)
+        visit path
+      end
+
+      it 'shows the RSS link with overflow menu' do
+        find('[data-testid="base-dropdown-toggle"').click
+
+        expect(page).to have_link 'Subscribe', href: /feed_token=glft-.*-#{user.id}/
+      end
+    end
+
+    context 'when signed out' do
+      before do
+        visit path
+      end
+
+      it 'has an RSS without a feed token' do
+        find('[data-testid="base-dropdown-toggle"').click
+
+        expect(page).not_to have_link 'Subscribe', href: /feed_token=glft-.*-#{user.id}/
+      end
+    end
+  end
 end

spec/frontend/users/profile/actions/components/user_actions_app_spec.js

@@ -6,11 +6,13 @@ describe('User Actions App', () => {
   let wrapper;
 
   const USER_ID = 'test-id';
+  const DEFAULT_SUBSCRIPTION_PATH = '';
 
   const createWrapper = (propsData = {}) => {
     wrapper = mountExtended(UserActionsApp, {
       propsData: {
         userId: USER_ID,
+        rssSubscriptionPath: DEFAULT_SUBSCRIPTION_PATH,
         ...propsData,
       },
     });
@@ -19,15 +21,25 @@ describe('User Actions App', () => {
   const findDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
   const findActions = () => wrapper.findAllByTestId('disclosure-dropdown-item');
   const findAction = (position = 0) => findActions().at(position);
+  const findSubscriptionLink = () => wrapper.findByTestId('user-profile-rss-subscription-link');
 
   it('shows dropdown', () => {
     createWrapper();
     expect(findDropdown().exists()).toBe(true);
   });
 
-  it('shows actions correctly', () => {
-    createWrapper();
-    expect(findActions()).toHaveLength(1);
+  describe('shows user action items', () => {
+    it('should show items without RSS subscriptions', () => {
+      createWrapper();
+      expect(findActions()).toHaveLength(1);
+    });
+
+    it('should show items with RSS subscriptions', () => {
+      createWrapper({
+        rssSubscriptionPath: '/test/path',
+      });
+      expect(findActions()).toHaveLength(2);
+    });
   });
 
   it('shows copy user id action', () => {
@@ -35,4 +47,17 @@ describe('User Actions App', () => {
     expect(findAction().text()).toBe(`Copy user ID: ${USER_ID}`);
     expect(findAction().findComponent('button').attributes('data-clipboard-text')).toBe(USER_ID);
   });
+
+  it('shows subscription link when subscription url was presented', () => {
+    const testSubscriptionPath = '/test/path';
+
+    createWrapper({
+      rssSubscriptionPath: testSubscriptionPath,
+    });
+
+    const rssLink = findSubscriptionLink();
+    expect(rssLink.exists()).toBe(true);
+    expect(rssLink.attributes('href')).toBe(testSubscriptionPath);
+    expect(rssLink.text()).toBe('Subscribe');
+  });
 });