Add feature name to paid feature callout's tooltip

- Fallback to the previous, generic tooltip title when no featureName
  prop is given
- Translate the feature name string in the haml view

ee/app/assets/javascripts/paid_feature_callouts/components/paid_feature_callout_badge.vue

@@ -2,7 +2,7 @@
 import { GlBadge, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import { debounce } from 'lodash';
-import { __ } from '~/locale';
+import { __, sprintf } from '~/locale';
 import Tracking from '~/tracking';
 
 const RESIZE_EVENT_DEBOUNCE_MS = 150;
@@ -16,14 +16,31 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   mixins: [Tracking.mixin()],
+  props: {
+    featureName: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
   i18n: {
-    title: __('This feature is part of your GitLab Ultimate trial.'),
+    title: {
+      generic: __('This feature is part of your GitLab Ultimate trial.'),
+      specific: __('The %{featureName} feature is part of your GitLab Ultimate trial.'),
+    },
   },
   data() {
     return {
       tooltipDisabled: false,
     };
   },
+  computed: {
+    title() {
+      if (this.featureName === '') return this.$options.i18n.title.generic;
+
+      return sprintf(this.$options.i18n.title.specific, { featureName: this.featureName });
+    },
+  },
   created() {
     this.debouncedResize = debounce(() => this.onResize(), RESIZE_EVENT_DEBOUNCE_MS);
     window.addEventListener('resize', this.debouncedResize);
@@ -55,7 +72,7 @@ export default {
 <template>
   <gl-badge
     v-gl-tooltip="{ disabled: tooltipDisabled }"
-    :title="$options.i18n.title"
+    :title="title"
     tabindex="0"
     size="sm"
     class="feature-highlight-badge"

ee/app/assets/javascripts/paid_feature_callouts/index.js

@@ -7,11 +7,12 @@ export const initPaidFeatureCalloutBadge = () => {
 
   if (!el) return undefined;
 
-  const { id } = el.dataset;
+  const { featureName, id } = el.dataset;
 
   return new Vue({
     el,
-    render: (createElement) => createElement(PaidFeatureCalloutBadge, { attrs: { id } }),
+    render: (createElement) =>
+      createElement(PaidFeatureCalloutBadge, { props: { featureName }, attrs: { id } }),
   });
 };
 

ee/app/helpers/paid_feature_callout_helper.rb

@@ -14,20 +14,24 @@ module PaidFeatureCalloutHelper
   end
 
   def paid_feature_badge_data_attrs(feature_name)
-    { id: feature_callout_container_id(feature_name) }
+    base_attrs = base_paid_feature_data_attrs(feature_name)
+
+    base_attrs.merge({
+      id: feature_callout_container_id(feature_name)
+    })
   end
 
   def paid_feature_popover_data_attrs(group:, feature_name:)
+    base_attrs = base_paid_feature_data_attrs(feature_name)
     container_id = feature_callout_container_id(feature_name)
 
-    {
+    base_attrs.merge({
       container_id: container_id,
       days_remaining: group.trial_days_remaining,
-      feature_name: feature_name,
       plan_name_for_trial: group.gitlab_subscription&.plan_title,
       plan_name_for_upgrade: 'Premium',
       target_id: container_id
-    }
+    })
   end
 
   private
@@ -35,4 +39,8 @@ module PaidFeatureCalloutHelper
   def feature_callout_container_id(feature_name)
     "#{feature_name.parameterize}-callout"
   end
+
+  def base_paid_feature_data_attrs(feature_name)
+    { feature_name: feature_name }
+  end
 end

ee/app/views/shared/issuable/_approvals.html.haml

@@ -9,7 +9,7 @@
       .gl-display-flex.gl-align-items-center.gl-sm-justify-content-end
         - root_group = @project.group&.root_ancestor
         - run_highlight_paid_features_during_active_trial_experiment(root_group) do
-          - feature_name = 'merge request approvals'
+          - feature_name = _('merge request approvals')
           .gl-xs-ml-3.gl-sm-mr-3.gl-mb-2.gl-order-1.gl-sm-order-init
             #js-paid-feature-badge{ data: paid_feature_badge_data_attrs(feature_name) }
           #js-paid-feature-popover{ data: paid_feature_popover_data_attrs(group: root_group, feature_name: feature_name).merge(promo_image_path: image_path('illustrations/golden_tanuki.svg'), promo_image_alt_text: s_('ImageAltText|Sparkling golden tanuki logo')) }

ee/spec/frontend/paid_feature_callouts/paid_feature_callout_badge_spec.js

@@ -12,15 +12,15 @@ describe('PaidFeatureCalloutBadge component', () => {
   const findGlBadge = () => wrapper.findComponent(GlBadge);
   const findGlIcon = () => wrapper.findComponent(GlIcon);
 
-  const createComponent = () => {
-    return shallowMount(PaidFeatureCalloutBadge);
+  const createComponent = (props = {}) => {
+    return shallowMount(PaidFeatureCalloutBadge, { propsData: props });
   };
 
   afterEach(() => {
     wrapper.destroy();
   });
 
-  describe('with some default props', () => {
+  describe('default rendering', () => {
     beforeEach(() => {
       wrapper = createComponent();
     });
@@ -42,6 +42,26 @@ describe('PaidFeatureCalloutBadge component', () => {
     });
   });
 
+  describe('title', () => {
+    describe('when no featureName is provided', () => {
+      it('sets the title to a sensible default', () => {
+        wrapper = createComponent();
+        expect(findGlBadge().attributes('title')).toBe(
+          'This feature is part of your GitLab Ultimate trial.',
+        );
+      });
+    });
+
+    describe('when an optional featureName is provided', () => {
+      it('sets the title using the given feature name', () => {
+        wrapper = createComponent({ featureName: 'fantastical thing' });
+        expect(findGlBadge().attributes('title')).toBe(
+          'The fantastical thing feature is part of your GitLab Ultimate trial.',
+        );
+      });
+    });
+  });
+
   describe('tracking', () => {
     beforeEach(() => {
       trackingSpy = mockTracking(undefined, undefined, jest.spyOn);

ee/spec/helpers/paid_feature_callout_helper_spec.rb

@@ -65,7 +65,7 @@ RSpec.describe PaidFeatureCalloutHelper do
     subject { helper.paid_feature_badge_data_attrs('some feature') }
 
     it 'returns the set of data attributes needed to bootstrap the PaidFeatureCalloutBadge component' do
-      is_expected.to eq({ id: 'some-feature-callout' })
+      is_expected.to eq({ id: 'some-feature-callout', feature_name: 'some feature' })
     end
   end
 

locale/gitlab.pot

@@ -31747,6 +31747,9 @@ msgstr ""
 msgid "The \"Require approval from CODEOWNERS\" setting was moved to %{banner_link_start}Protected Branches%{banner_link_end}"
 msgstr ""
 
+msgid "The %{featureName} feature is part of your GitLab Ultimate trial."
+msgstr ""
+
 msgid "The %{link_start}true-up model%{link_end} allows having more users, and additional users will incur a retroactive charge on renewal."
 msgstr ""
 
@@ -38207,6 +38210,9 @@ msgid_plural "merge requests"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "merge request approvals"
+msgstr ""
+
 msgid "merged %{timeAgo}"
 msgstr ""