Update trial status reminder design

- https://gitlab.com/gitlab-org/gitlab/-/merge_requests/80611

Changelog: changed
EE: true

ee/app/assets/javascripts/contextual_sidebar/components/constants.js

-import { n__, s__ } from '~/locale';
+import { s__ } from '~/locale';
 
 const CLICK_BUTTON_ACTION = 'click_button';
 const RESIZE_EVENT_DEBOUNCE_MS = 150;
@@ -8,15 +8,8 @@ export const EXPERIMENT_KEY = 'group_contact_sales';
 
 export const WIDGET = {
   i18n: {
-    widgetTitle: {
-      countableTranslator(count) {
-        return n__(
-          'Trials|%{planName} Trial %{enDash} %{num} day left',
-          'Trials|%{planName} Trial %{enDash} %{num} days left',
-          count,
-        );
-      },
-    },
+    widgetTitle: s__('Trials|%{planName} Trial'),
+    widgetRemainingDays: s__('Trials|Day %{daysUsed}/%{duration}'),
   },
   trackingEvents: {
     widgetClick: { action: 'click_link', label: 'trial_status_widget' },

ee/app/assets/javascripts/contextual_sidebar/components/trial_status_widget.vue

@@ -16,6 +16,8 @@ export default {
   mixins: [trackingMixin],
   inject: {
     containerId: { default: null },
+    trialDaysUsed: {},
+    trialDuration: {},
     daysRemaining: {},
     navIconImagePath: {},
     percentageComplete: {},
@@ -24,12 +26,12 @@ export default {
   },
   computed: {
     widgetTitle() {
-      const i18nWidgetTitle = i18n.widgetTitle.countableTranslator(this.daysRemaining);
-
-      return sprintf(i18nWidgetTitle, {
-        planName: removeTrialSuffix(this.planName),
-        enDash: '–',
-        num: this.daysRemaining,
+      return sprintf(i18n.widgetTitle, { planName: removeTrialSuffix(this.planName) });
+    },
+    widgetRemainingDays() {
+      return sprintf(i18n.widgetRemainingDays, {
+        daysUsed: this.trialDaysUsed,
+        duration: this.trialDuration,
       });
     },
   },
@@ -49,17 +51,20 @@ export default {
       class="gl-display-flex gl-flex-direction-column gl-align-items-stretch gl-w-full"
       @click="onWidgetClick"
     >
-      <span class="gl-display-flex gl-align-items-center">
+      <div class="gl-display-flex gl-w-full">
         <span class="nav-icon-container svg-container">
           <img :src="navIconImagePath" width="16" class="svg" />
         </span>
-        <span class="nav-item-name gl-white-space-normal">
+        <span class="nav-item-name">
           {{ widgetTitle }}
         </span>
-      </span>
-      <span class="gl-display-flex gl-align-items-stretch gl-mt-3">
+        <span class="collapse-text gl-font-sm gl-mr-auto">
+          {{ widgetRemainingDays }}
+        </span>
+      </div>
+      <div class="gl-display-flex gl-align-items-stretch gl-mt-2">
         <gl-progress-bar :value="percentageComplete" class="gl-flex-grow-1" />
-      </span>
+      </div>
     </div>
   </gl-link>
 </template>

ee/app/assets/javascripts/contextual_sidebar/init_trial_status_widget_and_popover.js

@@ -9,6 +9,8 @@ export const initTrialStatusWidget = () => {
 
   const {
     containerId,
+    trialDaysUsed,
+    trialDuration,
     daysRemaining,
     navIconImagePath,
     percentageComplete,
@@ -20,6 +22,8 @@ export const initTrialStatusWidget = () => {
     el,
     provide: {
       containerId,
+      trialDaysUsed: Number(trialDaysUsed) || 0,
+      trialDuration: Number(trialDuration) || 0,
       daysRemaining: Number(daysRemaining),
       navIconImagePath,
       percentageComplete: Number(percentageComplete),

ee/app/helpers/trial_status_widget_helper.rb

@@ -25,6 +25,8 @@ module TrialStatusWidgetHelper
 
   def trial_status_widget_data_attrs(group)
     trial_status_common_data_attrs(group).merge(
+      trial_days_used: group.gitlab_subscription&.trial_days_used,
+      trial_duration: group.gitlab_subscription&.trial_duration,
       days_remaining: group.trial_days_remaining,
       nav_icon_image_path: image_path('illustrations/golden_tanuki.svg'),
       percentage_complete: group.trial_percentage_complete

ee/spec/frontend/contextual_sidebar/__snapshots__/trial_status_widget_spec.js.snap

@@ -3,14 +3,14 @@
 exports[`TrialStatusWidget component without the optional containerId prop matches the snapshot 1`] = `
 <gl-link-stub
   href="billing/path-for/group"
-  title="Ultimate Trial – 20 days left"
+  title="Ultimate Trial"
 >
   <div
     class="gl-display-flex gl-flex-direction-column gl-align-items-stretch gl-w-full"
     data-testid="widget-menu"
   >
-    <span
-      class="gl-display-flex gl-align-items-center"
+    <div
+      class="gl-display-flex gl-w-full"
     >
       <span
         class="nav-icon-container svg-container"
@@ -23,22 +23,30 @@ exports[`TrialStatusWidget component without the optional containerId prop match
       </span>
        
       <span
-        class="nav-item-name gl-white-space-normal"
+        class="nav-item-name"
       >
         
-        Ultimate Trial – 20 days left
+        Ultimate Trial
       
       </span>
-    </span>
+       
+      <span
+        class="collapse-text gl-font-sm gl-mr-auto"
+      >
+        
+        Day 10/30
+      
+      </span>
+    </div>
      
-    <span
-      class="gl-display-flex gl-align-items-stretch gl-mt-3"
+    <div
+      class="gl-display-flex gl-align-items-stretch gl-mt-2"
     >
       <gl-progress-bar-stub
         class="gl-flex-grow-1"
         value="10"
       />
-    </span>
+    </div>
   </div>
 </gl-link-stub>
 `;

ee/spec/frontend/contextual_sidebar/trial_status_widget_spec.js

@@ -8,14 +8,18 @@ describe('TrialStatusWidget component', () => {
   let wrapper;
 
   const { trackingEvents } = WIDGET;
-  const defaultDaysRemaining = 20;
+  const trialDaysUsed = 10;
+  const trialDuration = 30;
+  const daysRemaining = 20;
 
   const findGlLink = () => wrapper.findComponent(GlLink);
 
   const createComponent = (providers = {}) => {
     return shallowMount(TrialStatusWidget, {
       provide: {
-        daysRemaining: defaultDaysRemaining,
+        trialDaysUsed,
+        trialDuration,
+        daysRemaining,
         navIconImagePath: 'illustrations/golden_tanuki.svg',
         percentageComplete: 10,
         planName: 'Ultimate',
@@ -65,7 +69,7 @@ describe('TrialStatusWidget component', () => {
     it('does not render Trial twice if the plan name includes "Trial"', () => {
       wrapper = createComponent({ planName: 'Ultimate Trial' });
 
-      expect(wrapper.text()).toEqual('Ultimate Trial – 20 days left');
+      expect(wrapper.text()).toMatchInterpolatedText('Ultimate Trial Day 10/30');
     });
   });
 

ee/spec/helpers/trial_status_widget_helper_spec.rb

@@ -6,6 +6,7 @@ RSpec.describe TrialStatusWidgetHelper, :saas do
   describe 'data attributes for mounting Vue components', :freeze_time do
     let(:trial_length) { 30 } # days
     let(:trial_days_remaining) { 18 }
+    let(:trial_days_used) { trial_length - trial_days_remaining }
     let(:trial_end_date) { Date.current.advance(days: trial_days_remaining) }
     let(:trial_start_date) { Date.current.advance(days: trial_days_remaining - trial_length) }
     let(:trial_percentage_complete) { (trial_length - trial_days_remaining) * 100 / trial_length }
@@ -89,6 +90,8 @@ RSpec.describe TrialStatusWidgetHelper, :saas do
       it 'returns the needed data attributes for mounting the widget Vue component' do
         expect(data_attrs).to match(
           shared_expected_attrs.merge(
+            trial_days_used: trial_days_used,
+            trial_duration: trial_length,
             nav_icon_image_path: '/image-path/for-file.svg',
             percentage_complete: trial_percentage_complete
           )

locale/gitlab.pot

@@ -38575,10 +38575,8 @@ msgstr ""
 msgid "Trending"
 msgstr ""
 
-msgid "Trials|%{planName} Trial %{enDash} %{num} day left"
-msgid_plural "Trials|%{planName} Trial %{enDash} %{num} days left"
-msgstr[0] ""
-msgstr[1] ""
+msgid "Trials|%{planName} Trial"
+msgstr ""
 
 msgid "Trials|Compare all plans"
 msgstr ""
@@ -38586,6 +38584,9 @@ msgstr ""
 msgid "Trials|Create a new group to start your GitLab Ultimate trial."
 msgstr ""
 
+msgid "Trials|Day %{daysUsed}/%{duration}"
+msgstr ""
+
 msgid "Trials|Go back to GitLab"
 msgstr ""