Add Export license usage file button

Add "Export license usage file" button for exporting
the usage to a CSV file.

ee/app/assets/javascripts/admin/subscriptions/show/components/app.vue

 <script>
-import { GlAlert } from '@gitlab/ui';
+import { GlAlert, GlButton } from '@gitlab/ui';
 import {
   activateSubscription,
   noActiveSubscription,
@@ -7,6 +7,7 @@ import {
   subscriptionHistoryQueries,
   subscriptionMainTitle,
   subscriptionQueries,
+  exportLicenseUsageBtnText,
 } from '../constants';
 import SubscriptionActivationCard from './subscription_activation_card.vue';
 import SubscriptionBreakdown from './subscription_breakdown.vue';
@@ -17,6 +18,7 @@ export default {
   name: 'CloudLicenseApp',
   components: {
     GlAlert,
+    GlButton,
     SubscriptionActivationCard,
     SubscriptionBreakdown,
     SubscriptionPurchaseCard,
@@ -24,11 +26,16 @@ export default {
   },
   i18n: {
     activateSubscription,
+    exportLicenseUsageBtnText,
     noActiveSubscription,
     subscriptionActivationNotificationText,
     subscriptionMainTitle,
   },
   props: {
+    licenseUsageFilePath: {
+      type: String,
+      required: true,
+    },
     hasActiveLicense: {
       type: Boolean,
       required: false,
@@ -81,8 +88,15 @@ export default {
 </script>
 
 <template>
-  <div class="gl-display-flex gl-justify-content-center gl-flex-direction-column">
-    <h4 data-testid="subscription-main-title">{{ $options.i18n.subscriptionMainTitle }}</h4>
+  <div>
+    <div
+      class="gl-display-flex gl-flex-direction-row gl-justify-content-space-between gl-align-items-center"
+    >
+      <h4 data-testid="subscription-main-title">{{ $options.i18n.subscriptionMainTitle }}</h4>
+      <gl-button v-if="canShowSubscriptionDetails" :href="licenseUsageFilePath">{{
+        $options.i18n.exportLicenseUsageBtnText
+      }}</gl-button>
+    </div>
     <hr />
     <gl-alert
       v-if="shouldShowActivationNotification"

ee/app/assets/javascripts/admin/subscriptions/show/constants.js

@@ -144,3 +144,4 @@ export const subscriptionBannerText = s__(
 );
 export const subscriptionBannerBlogPostUrl =
   'https://about.gitlab.com/blog/2021/07/20/improved-billing-and-subscription-management/';
+export const exportLicenseUsageBtnText = s__('SuperSonics|Export license usage file');

ee/app/assets/javascripts/admin/subscriptions/show/mount_cloud_licenses.js

@@ -33,6 +33,7 @@ export default () => {
     licenseUploadPath,
     subscriptionActivationBannerCalloutName,
     subscriptionSyncPath,
+    licenseUsageFilePath,
   } = el.dataset;
   const connectivityHelpURL = helpPagePath('/user/admin_area/license.html', {
     anchor: 'there-is-a-connectivity-issue',
@@ -56,6 +57,7 @@ export default () => {
       h(CloudLicenseShowApp, {
         props: {
           hasActiveLicense: parseBoolean(hasActiveLicense),
+          licenseUsageFilePath,
         },
       }),
   });

ee/app/helpers/license_helper.rb

@@ -62,7 +62,8 @@ module LicenseHelper
       license_remove_path: admin_license_path,
       subscription_sync_path: sync_seat_link_admin_license_path,
       congratulation_svg_path: image_path('illustrations/illustration-congratulation-purchase.svg'),
-      subscription_activation_banner_callout_name: ::EE::UserCalloutsHelper::CL_SUBSCRIPTION_ACTIVATION
+      subscription_activation_banner_callout_name: ::EE::UserCalloutsHelper::CL_SUBSCRIPTION_ACTIVATION,
+      license_usage_file_path: admin_license_usage_export_path(format: :csv)
     }
   end
 

ee/spec/features/admin/subscriptions/admin_views_subscription_spec.rb

@@ -10,6 +10,12 @@ RSpec.describe 'Admin views Subscription', :js do
     gitlab_enable_admin_mode_sign_in(admin)
   end
 
+  shared_examples 'an "Export license usage file" button' do
+    it 'displays the Export License Usage File button' do
+      expect(page).to have_link('Export license usage file', href: admin_license_usage_export_path(format: :csv))
+    end
+  end
+
   context 'with a cloud license' do
     let!(:license) { create_current_license(cloud_licensing_enabled: true, plan: License::ULTIMATE_PLAN) }
 
@@ -43,6 +49,8 @@ RSpec.describe 'Admin views Subscription', :js do
           expect(page).to have_content('You can no longer sync your subscription details with GitLab. Get help for the most common connectivity issues by troubleshooting the activation code')
         end
       end
+
+      it_behaves_like 'an "Export license usage file" button'
     end
   end
 
@@ -53,6 +61,8 @@ RSpec.describe 'Admin views Subscription', :js do
       visit(admin_subscription_path)
     end
 
+    it_behaves_like 'an "Export license usage file" button'
+
     context 'when removing a license file' do
       before do
         accept_alert do
@@ -118,6 +128,10 @@ RSpec.describe 'Admin views Subscription', :js do
       end
     end
 
+    it 'does not display the Export License Usage File button' do
+      expect(page).not_to have_link('Export license usage file', href: admin_license_usage_export_path(format: :csv))
+    end
+
     context 'when activating a new subscription' do
       before do
         license = create(:license, data: create(:gitlab_license, { cloud_licensing_enabled: true, plan: License::ULTIMATE_PLAN }).export)

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

+import { GlButton } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import SubscriptionManagementApp from 'ee/admin/subscriptions/show/components/app.vue';
@@ -28,6 +29,7 @@ describe('SubscriptionManagementApp', () => {
   const findSubscriptionMainTitle = () => wrapper.findByTestId('subscription-main-title');
   const findSubscriptionActivationSuccessAlert = () =>
     wrapper.findByTestId('subscription-activation-success-alert');
+  const findExportLicenseUsageFileLink = () => wrapper.findComponent(GlButton);
 
   let currentSubscriptionResolver;
   let subscriptionHistoryResolver;
@@ -45,6 +47,7 @@ describe('SubscriptionManagementApp', () => {
         localVue,
         apolloProvider: createMockApolloProvider(resolverMock),
         propsData: {
+          licenseUsageFilePath: 'about:blank',
           ...props,
         },
       }),
@@ -92,6 +95,10 @@ describe('SubscriptionManagementApp', () => {
       it('does not show the activation success notification', () => {
         expect(findSubscriptionActivationSuccessAlert().exists()).toBe(false);
       });
+
+      it('does not render the "Export license usage file" link', () => {
+        expect(findExportLicenseUsageFileLink().exists()).toBe(false);
+      });
     });
 
     describe('activating the license', () => {
@@ -154,6 +161,10 @@ describe('SubscriptionManagementApp', () => {
       it('does not the activation success notification', () => {
         expect(findSubscriptionActivationSuccessAlert().exists()).toBe(false);
       });
+
+      it('renders the "Export license usage file" link', () => {
+        expect(findExportLicenseUsageFileLink().exists()).toBe(true);
+      });
     });
   });
 });

ee/spec/helpers/license_helper_spec.rb

@@ -101,7 +101,8 @@ RSpec.describe LicenseHelper do
                                                        license_upload_path: new_admin_license_path,
                                                        license_remove_path: admin_license_path,
                                                        congratulation_svg_path: helper.image_path('illustrations/illustration-congratulation-purchase.svg'),
-                                                       subscription_activation_banner_callout_name: ::EE::UserCalloutsHelper::CL_SUBSCRIPTION_ACTIVATION })
+                                                       subscription_activation_banner_callout_name: ::EE::UserCalloutsHelper::CL_SUBSCRIPTION_ACTIVATION,
+                                                       license_usage_file_path: admin_license_usage_export_path(format: :csv) })
       end
     end
 
@@ -117,7 +118,8 @@ RSpec.describe LicenseHelper do
                                                        license_upload_path: new_admin_license_path,
                                                        license_remove_path: admin_license_path,
                                                        congratulation_svg_path: helper.image_path('illustrations/illustration-congratulation-purchase.svg'),
-                                                       subscription_activation_banner_callout_name: ::EE::UserCalloutsHelper::CL_SUBSCRIPTION_ACTIVATION })
+                                                       subscription_activation_banner_callout_name: ::EE::UserCalloutsHelper::CL_SUBSCRIPTION_ACTIVATION,
+                                                       license_usage_file_path: admin_license_usage_export_path(format: :csv) })
       end
     end
   end

locale/gitlab.pot

@@ -31722,6 +31722,9 @@ msgstr ""
 msgid "SuperSonics|Expires on"
 msgstr ""
 
+msgid "SuperSonics|Export license usage file"
+msgstr ""
+
 msgid "SuperSonics|Free trial"
 msgstr ""