Merge branch '327997-add-promo-image-to-informational-popover' into 'master'

Add the golden tanuki promo image to the informational popover

See merge request gitlab-org/gitlab!60325

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

@@ -2,7 +2,7 @@
 import { GlPopover } from '@gitlab/ui';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import { debounce } from 'lodash';
-import { n__, s__, sprintf } from '~/locale';
+import { __, n__, s__, sprintf } from '~/locale';
 import Tracking from '~/tracking';
 
 const RESIZE_EVENT_DEBOUNCE_MS = 150;
@@ -34,6 +34,16 @@ export default {
       type: String,
       required: true,
     },
+    promoImageAltText: {
+      type: String,
+      required: false,
+      default: __('SVG illustration'),
+    },
+    promoImagePath: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
     targetId: {
       type: String,
       required: true,
@@ -107,6 +117,16 @@ export default {
   >
     <template #title>{{ popoverTitle }}</template>
 
+    <div v-if="promoImagePath" class="gl-display-flex gl-justify-content-center gl-mt-n3 gl-mb-4">
+      <img
+        :src="promoImagePath"
+        :alt="promoImageAltText"
+        height="40"
+        width="40"
+        data-testid="promo-img"
+      />
+    </div>
+
     {{ popoverContent }}
   </gl-popover>
 </template>

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

@@ -26,6 +26,8 @@ export const initPaidFeatureCalloutPopover = () => {
     featureName,
     planNameForTrial,
     planNameForUpgrade,
+    promoImageAltText,
+    promoImagePath,
     targetId,
   } = el.dataset;
 
@@ -39,6 +41,8 @@ export const initPaidFeatureCalloutPopover = () => {
           featureName,
           planNameForTrial,
           planNameForUpgrade,
+          promoImageAltText,
+          promoImagePath,
           targetId,
         },
       }),

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

@@ -12,7 +12,7 @@
           - 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) }
+          #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')) }
         = form.label :approver_ids, "Approval rules"
     .col-sm-10
       = render_if_exists 'shared/issuable/approver_suggestion', issuable: issuable, presenter: presenter

ee/spec/frontend/paid_feature_callouts/paid_feature_callout_popover_spec.js

@@ -4,6 +4,7 @@ import { shallowMount } from '@vue/test-utils';
 
 import PaidFeatureCalloutPopover from 'ee/paid_feature_callouts/components/paid_feature_callout_popover.vue';
 import { mockTracking } from 'helpers/tracking_helper';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
 describe('PaidFeatureCalloutPopover', () => {
   let trackingSpy;
@@ -20,9 +21,11 @@ describe('PaidFeatureCalloutPopover', () => {
   };
 
   const createComponent = (props = defaultProps) => {
-    return shallowMount(PaidFeatureCalloutPopover, {
-      propsData: props,
-    });
+    return extendedWrapper(
+      shallowMount(PaidFeatureCalloutPopover, {
+        propsData: props,
+      }),
+    );
   };
 
   afterEach(() => {
@@ -64,6 +67,60 @@ describe('PaidFeatureCalloutPopover', () => {
     });
   });
 
+  describe('promo image', () => {
+    const findPromoImage = () => wrapper.findByTestId('promo-img');
+
+    describe('with the optional promoImagePath prop', () => {
+      beforeEach(() => {
+        wrapper = createComponent({
+          ...defaultProps,
+          promoImagePath: 'path/to/some/image.svg',
+        });
+      });
+
+      it('renders the promo image', () => {
+        expect(findPromoImage().exists()).toBe(true);
+      });
+
+      describe('with the optional promoImageAltText prop', () => {
+        beforeEach(() => {
+          wrapper = createComponent({
+            ...defaultProps,
+            promoImagePath: 'path/to/some/image.svg',
+            promoImageAltText: 'My fancy alt text',
+          });
+        });
+
+        it('renders the promo image with the given alt text', () => {
+          expect(findPromoImage().attributes('alt')).toBe('My fancy alt text');
+        });
+      });
+
+      describe('without the optional promoImageAltText prop', () => {
+        beforeEach(() => {
+          wrapper = createComponent({
+            ...defaultProps,
+            promoImagePath: 'path/to/some/image.svg',
+          });
+        });
+
+        it('renders the promo image with default alt text', () => {
+          expect(findPromoImage().attributes('alt')).toBe('SVG illustration');
+        });
+      });
+    });
+
+    describe('without the optional promoImagePath prop', () => {
+      beforeEach(() => {
+        wrapper = createComponent();
+      });
+
+      it('does not render a promo image', () => {
+        expect(findPromoImage().exists()).toBe(false);
+      });
+    });
+  });
+
   describe('onShown', () => {
     beforeEach(() => {
       trackingSpy = mockTracking(undefined, undefined, jest.spyOn);

locale/gitlab.pot

@@ -16474,6 +16474,9 @@ msgstr ""
 msgid "Image details"
 msgstr ""
 
+msgid "ImageAltText|Sparkling golden tanuki logo"
+msgstr ""
+
 msgid "ImageDiffViewer|2-up"
 msgstr ""
 
@@ -27954,6 +27957,9 @@ msgstr ""
 msgid "SSL verification"
 msgstr ""
 
+msgid "SVG illustration"
+msgstr ""
+
 msgid "Satisfied"
 msgstr ""