Add link to buy additional storage

Adds a link on the storage usage quota page to make it possible
for users to buy more storage. The link is only visible on .com.
It's behind a feature flag for now because additional storage
purchase is not fully released yet.

ee/app/assets/javascripts/storage_counter/components/app.vue

@@ -23,6 +23,11 @@ export default {
       type: String,
       required: true,
     },
+    purchaseStorageUrl: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   apollo: {
     namespace: {
@@ -64,8 +69,8 @@ export default {
 <template>
   <div>
     <div class="pipeline-quota container-fluid py-4 px-2 m-0">
-      <div class="row py-0">
-        <div class="col-sm-12">
+      <div class="row py-0 d-flex align-items-center">
+        <div class="col-sm-8">
           <gl-sprintf :message="s__('UsageQuota|You used: %{usage} %{limit}')">
             <template #usage>
               <span class="gl-font-weight-bold" data-testid="total-usage">
@@ -91,6 +96,15 @@ export default {
             <icon name="question" :size="12" />
           </gl-link>
         </div>
+        <div v-if="purchaseStorageUrl" class="col-sm-4 text-right">
+          <gl-link
+            :href="purchaseStorageUrl"
+            class="btn btn-success"
+            target="_blank"
+            data-testid="purchase-storage-link"
+            >{{ s__('UsageQuota|Purchase more storage') }}</gl-link
+          >
+        </div>
       </div>
       <div class="row py-0">
         <div class="col-sm-12">

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

@@ -7,7 +7,7 @@ Vue.use(VueApollo);
 
 export default () => {
   const el = document.getElementById('js-storage-counter-app');
-  const { namespacePath, helpPagePath } = el.dataset;
+  const { namespacePath, helpPagePath, purchaseStorageUrl } = el.dataset;
 
   const apolloProvider = new VueApollo({
     defaultClient: createDefaultClient(),
@@ -21,6 +21,7 @@ export default () => {
         props: {
           namespacePath,
           helpPagePath,
+          purchaseStorageUrl,
         },
       });
     },

ee/app/helpers/ee/namespaces_helper.rb

@@ -40,5 +40,12 @@ module EE
         profile_usage_quotas_path(anchor: 'storage-quota-tab')
       end
     end
+
+    def purchase_storage_url
+      return unless ::Gitlab.dev_env_or_com?
+      return unless ::Feature.enabled?(:buy_storage_link)
+
+      EE::SUBSCRIPTIONS_MORE_STORAGE_URL
+    end
   end
 end

ee/app/views/groups/usage_quotas/index.html.haml

@@ -20,5 +20,5 @@
     = render "namespaces/pipelines_quota/list",
       locals: { namespace: @group, projects: @projects }
   .tab-pane#storage-quota-tab
-    #js-storage-counter-app{ data: { namespace_path: @group.full_path, help_page_path: help_page_path('user/group/index.md', anchor: 'storage-usage-quota-starter')} }
+    #js-storage-counter-app{ data: { namespace_path: @group.full_path, help_page_path: help_page_path('user/group/index.md', anchor: 'storage-usage-quota-starter'), purchase_storage_url: purchase_storage_url } }
 

ee/app/views/profiles/usage_quotas/index.html.haml

@@ -21,4 +21,4 @@
     = render "namespaces/pipelines_quota/list",
       locals: { namespace: @namespace, projects: @projects }
   .tab-pane#storage-quota-tab
-    #js-storage-counter-app{ data: { namespace_path: @namespace.full_path, help_page_path: help_page_path('user/group/index.md', anchor: 'storage-usage-quota-starter')} }
+    #js-storage-counter-app{ data: { namespace_path: @namespace.full_path, help_page_path: help_page_path('user/group/index.md', anchor: 'storage-usage-quota-starter'), purchase_storage_url: purchase_storage_url } }

ee/lib/ee.rb

@@ -4,6 +4,7 @@ module EE
   SUBSCRIPTIONS_URL = ENV.fetch('CUSTOMER_PORTAL_URL', 'https://customers.gitlab.com').freeze
   SUBSCRIPTIONS_COMPARISON_URL = "https://about.gitlab.com/pricing/gitlab-com/feature-comparison".freeze
   SUBSCRIPTIONS_MORE_MINUTES_URL = "#{SUBSCRIPTIONS_URL}/buy_pipeline_minutes".freeze
+  SUBSCRIPTIONS_MORE_STORAGE_URL = "#{SUBSCRIPTIONS_URL}/buy_storage".freeze
   SUBSCRIPTIONS_PLANS_URL = "#{SUBSCRIPTIONS_URL}/plans".freeze
   SUBSCRIPTION_PORTAL_ADMIN_EMAIL = ENV.fetch('SUBSCRIPTION_PORTAL_ADMIN_EMAIL', 'gl_com_api@gitlab.com')
   SUBSCRIPTION_PORTAL_ADMIN_TOKEN = ENV.fetch('SUBSCRIPTION_PORTAL_ADMIN_TOKEN', 'customer_admin_token')

ee/spec/frontend/storage_counter/components/app_spec.js

@@ -8,8 +8,9 @@ describe('Storage counter app', () => {
   let wrapper;
 
   const findTotalUsage = () => wrapper.find("[data-testid='total-usage']");
+  const findPurchaseStorageLink = () => wrapper.find("[data-testid='purchase-storage-link']");
 
-  function createComponent(loading = false) {
+  function createComponent(props = {}, loading = false) {
     const $apollo = {
       queries: {
         namespace: {
@@ -19,7 +20,7 @@ describe('Storage counter app', () => {
     };
 
     wrapper = mount(StorageApp, {
-      propsData: { namespacePath: 'h5bp', helpPagePath: 'help' },
+      propsData: { namespacePath: 'h5bp', helpPagePath: 'help', ...props },
       mocks: { $apollo },
     });
   }
@@ -87,4 +88,25 @@ describe('Storage counter app', () => {
       expect(findTotalUsage().text()).toContain('N/A');
     });
   });
+
+  describe('purchase storage link', () => {
+    describe('when purchaseStorageUrl is not set', () => {
+      it('does not render an additional link', () => {
+        expect(findPurchaseStorageLink().exists()).toBe(false);
+      });
+    });
+
+    describe('when purchaseStorageUrl is set', () => {
+      beforeEach(() => {
+        createComponent({ purchaseStorageUrl: 'customers.gitlab.com' });
+      });
+
+      it('does render link', () => {
+        const link = findPurchaseStorageLink();
+
+        expect(link).toExist();
+        expect(link.attributes('href')).toBe('customers.gitlab.com');
+      });
+    });
+  });
 });

ee/spec/helpers/ee/namespaces_helper_spec.rb

@@ -119,4 +119,32 @@ RSpec.describe EE::NamespacesHelper do
       it { is_expected.to eq(profile_usage_quotas_path(anchor: 'storage-quota-tab')) }
     end
   end
+
+  describe '#purchase_storage_url' do
+    subject { helper.purchase_storage_url }
+
+    context 'when on .com' do
+      before do
+        allow(::Gitlab).to receive(:com?).and_return(true)
+      end
+
+      it { is_expected.to eq(EE::SUBSCRIPTIONS_MORE_STORAGE_URL) }
+
+      context 'when feature flag disabled' do
+        before do
+          stub_feature_flags(buy_storage_link: false)
+        end
+
+        it { is_expected.to be_nil }
+      end
+    end
+
+    context 'when not on .com' do
+      before do
+        allow(::Gitlab).to receive(:com?).and_return(false)
+      end
+
+      it { is_expected.to be_nil }
+    end
+  end
 end

locale/gitlab.pot

@@ -24664,6 +24664,9 @@ msgstr ""
 msgid "UsageQuota|Pipelines"
 msgstr ""
 
+msgid "UsageQuota|Purchase more storage"
+msgstr ""
+
 msgid "UsageQuota|Repositories"
 msgstr ""