Merge branch 'dz/fix-tooltip-on-storage' into 'master'

Hide tooltip on Storage purchase if not prorated

See merge request gitlab-org/gitlab!78537

ee/app/assets/javascripts/subscriptions/buy_addons_shared/components/app.vue

 <script>
 import emptySvg from '@gitlab/svgs/dist/illustrations/security-dashboard-empty-state.svg';
-import { GlEmptyState, GlIcon, GlAlert, GlTooltipDirective } from '@gitlab/ui';
+import { GlEmptyState, GlAlert } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import OrderSummary from 'ee/subscriptions/buy_addons_shared/components/order_summary.vue';
 import { ERROR_FETCHING_DATA_HEADER, ERROR_FETCHING_DATA_DESCRIPTION } from '~/ensure_data';
@@ -17,13 +17,9 @@ export default {
     AddonPurchaseDetails,
     Checkout,
     GlEmptyState,
-    GlIcon,
     GlAlert,
     OrderSummary,
   },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
   props: {
     config: {
       required: true,
@@ -173,15 +169,6 @@ export default {
         <template #price-per-unit="{ price }">
           {{ pricePerUnitLabel(price) }}
         </template>
-        <template #tooltip>
-          <gl-icon
-            v-gl-tooltip.right
-            :title="config.tooltipNote"
-            :aria-label="config.tooltipNote"
-            role="tooltip"
-            name="question"
-          />
-        </template>
       </order-summary>
     </div>
   </div>

ee/app/assets/javascripts/subscriptions/buy_addons_shared/components/order_summary.vue

@@ -159,9 +159,6 @@ export default {
           <template #price-per-unit="{ price }">
             <slot name="price-per-unit" :price="price"></slot>
           </template>
-          <template #tooltip>
-            <slot name="tooltip"></slot>
-          </template>
         </summary-details>
       </gl-collapse>
     </div>
@@ -184,9 +181,6 @@ export default {
         <template #price-per-unit="{ price }">
           <slot name="price-per-unit" :price="price"></slot>
         </template>
-        <template #tooltip>
-          <slot name="tooltip"></slot>
-        </template>
       </summary-details>
     </div>
   </div>

ee/app/assets/javascripts/subscriptions/buy_addons_shared/components/order_summary/summary_details.vue

 <script>
-import { GlLink, GlSprintf } from '@gitlab/ui';
+import { GlLink, GlIcon, GlTooltipDirective, GlSprintf } from '@gitlab/ui';
 import formattingMixins from 'ee/subscriptions/new/formatting_mixins';
 import { formatNumber } from '~/locale';
 import {
@@ -9,12 +9,17 @@ import {
   I18N_SUMMARY_TAX,
   I18N_SUMMARY_TAX_NOTE,
   I18N_SUMMARY_TOTAL,
+  I18N_STORAGE_TOOLTIP_NOTE,
 } from '../../constants';
 
 export default {
   components: {
     GlLink,
     GlSprintf,
+    GlIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
   },
   mixins: [formattingMixins],
   props: {
@@ -93,6 +98,7 @@ export default {
     tax: I18N_SUMMARY_TAX,
     taxNote: I18N_SUMMARY_TAX_NOTE,
     total: I18N_SUMMARY_TOTAL,
+    tooltipNote: I18N_STORAGE_TOOLTIP_NOTE,
   },
 };
 </script>
@@ -120,7 +126,14 @@ export default {
             endDate: formatDate(endDate),
           })
         }}
-        <slot name="tooltip"></slot>
+        <gl-icon
+          v-if="subscriptionEndDate"
+          v-gl-tooltip.right
+          :title="$options.i18n.tooltipNote"
+          :aria-label="$options.i18n.tooltipNote"
+          role="tooltip"
+          name="question"
+        />
       </div>
     </div>
     <div class="gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid gl-py-3">

ee/app/assets/javascripts/subscriptions/buy_minutes/components/app.vue

@@ -38,7 +38,6 @@ export default {
         summaryTitle: i18nCIMinutesSummaryTitle,
         summaryTotal: I18N_CI_MINUTES_SUMMARY_TOTAL,
         title: I18N_CI_MINUTES_TITLE,
-        tooltipNote: '',
       };
     },
   },

ee/app/assets/javascripts/subscriptions/buy_storage/components/app.vue

@@ -10,7 +10,6 @@ import {
   I18N_STORAGE_SUMMARY_TOTAL,
   I18N_STORAGE_TITLE,
   I18N_STORAGE_PRICE_PER_UNIT,
-  I18N_STORAGE_TOOLTIP_NOTE,
   planTags,
   STORAGE_PER_PACK,
 } from 'ee/subscriptions/buy_addons_shared/constants';
@@ -39,7 +38,6 @@ export default {
         summaryTitle: i18nStorageSummaryTitle,
         summaryTotal: I18N_STORAGE_SUMMARY_TOTAL,
         title: I18N_STORAGE_TITLE,
-        tooltipNote: I18N_STORAGE_TOOLTIP_NOTE,
       };
     },
   },

ee/spec/frontend/subscriptions/buy_addons_shared/app_spec.js

@@ -21,7 +21,6 @@ import {
   I18N_STORAGE_SUMMARY_TOTAL,
   I18N_STORAGE_TITLE,
   I18N_STORAGE_PRICE_PER_UNIT,
-  I18N_STORAGE_TOOLTIP_NOTE,
   I18N_API_ERROR,
   planTags,
   STORAGE_PER_PACK,
@@ -71,7 +70,6 @@ describe('Buy Addons Shared App', () => {
       summaryTitle: i18nStorageSummaryTitle,
       summaryTotal: I18N_STORAGE_SUMMARY_TOTAL,
       title: I18N_STORAGE_TITLE,
-      tooltipNote: I18N_STORAGE_TOOLTIP_NOTE,
     },
     tags: [planTags.STORAGE_PLAN],
   };
@@ -89,7 +87,6 @@ describe('Buy Addons Shared App', () => {
       summaryTitle: i18nCIMinutesSummaryTitle,
       summaryTotal: I18N_CI_MINUTES_SUMMARY_TOTAL,
       title: I18N_CI_MINUTES_TITLE,
-      tooltipNote: '',
     },
     tags: [planTags.CI_1000_MINUTES_PLAN],
   };

ee/spec/frontend/subscriptions/buy_addons_shared/components/order_summary/summary_details_spec.js

-import { GlSprintf } from '@gitlab/ui';
+import { GlSprintf, GlIcon } from '@gitlab/ui';
 import SummaryDetails from 'ee/subscriptions/buy_addons_shared/components/order_summary/summary_details.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { useFakeDate } from 'helpers/fake_date';
@@ -21,6 +21,7 @@ describe('SummaryDetails', () => {
       },
       stubs: {
         GlSprintf,
+        GlIcon,
       },
     });
   };
@@ -32,6 +33,7 @@ describe('SummaryDetails', () => {
   const findVat = () => wrapper.findByTestId('vat');
   const findVatHelpLink = () => wrapper.findByTestId('vat-help-link');
   const findVatInfoLine = () => wrapper.findByTestId('vat-info-line');
+  const findToolip = () => wrapper.findComponent(GlIcon);
 
   afterEach(() => {
     wrapper.destroy();
@@ -93,6 +95,10 @@ describe('SummaryDetails', () => {
       expect(findSubscriptionPeriod().isVisible()).toBe(true);
       expect(findSubscriptionPeriod().text()).toBe('Jan 16, 2021 - Jan 16, 2022');
     });
+
+    it('hides a tooltip', () => {
+      expect(findToolip().exists()).toBe(false);
+    });
   });
 
   describe('when subscription has expiration and the end date provided', () => {
@@ -104,6 +110,10 @@ describe('SummaryDetails', () => {
       expect(findSubscriptionPeriod().isVisible()).toBe(true);
       expect(findSubscriptionPeriod().text()).toBe('Jan 16, 2021 - Feb 6, 2021');
     });
+
+    it('shows a tooltip', () => {
+      expect(findToolip().isVisible()).toBe(true);
+    });
   });
 
   describe('when subscription does not have expiration', () => {

ee/spec/frontend/subscriptions/buy_minutes/components/app_spec.js

@@ -51,7 +51,6 @@ describe('Buy Minutes App', () => {
       summaryTitle: i18nCIMinutesSummaryTitle,
       summaryTotal: I18N_CI_MINUTES_SUMMARY_TOTAL,
       title: I18N_CI_MINUTES_TITLE,
-      tooltipNote: '',
     });
   });
 });

ee/spec/frontend/subscriptions/buy_storage/components/app_spec.js

@@ -11,7 +11,6 @@ import {
   I18N_STORAGE_SUMMARY_TOTAL,
   I18N_STORAGE_TITLE,
   I18N_STORAGE_PRICE_PER_UNIT,
-  I18N_STORAGE_TOOLTIP_NOTE,
   planTags,
   STORAGE_PER_PACK,
 } from 'ee/subscriptions/buy_addons_shared/constants';
@@ -51,7 +50,6 @@ describe('Buy Storage App', () => {
       summaryTitle: i18nStorageSummaryTitle,
       summaryTotal: I18N_STORAGE_SUMMARY_TOTAL,
       title: I18N_STORAGE_TITLE,
-      tooltipNote: I18N_STORAGE_TOOLTIP_NOTE,
     });
   });
 });