Commit 363d55d5 authored by Jose Ivan Vargas's avatar Jose Ivan Vargas

Merge branch 'enable-storage-purchase-link' into 'master'

Enable storage purchase link

See merge request gitlab-org/gitlab!46254
parents a06b4ad9 ed5794dd
...@@ -110,7 +110,10 @@ export default { ...@@ -110,7 +110,10 @@ export default {
:actual-repository-size-limit="namespace.actualRepositorySizeLimit" :actual-repository-size-limit="namespace.actualRepositorySizeLimit"
/> />
<div v-if="isAdditionalStorageFlagEnabled && storageStatistics"> <div v-if="isAdditionalStorageFlagEnabled && storageStatistics">
<usage-statistics :root-storage-statistics="storageStatistics" /> <usage-statistics
:root-storage-statistics="storageStatistics"
:purchase-storage-url="purchaseStorageUrl"
/>
</div> </div>
<div v-else class="gl-py-4 gl-px-2 gl-m-0"> <div v-else class="gl-py-4 gl-px-2 gl-m-0">
<div class="gl-display-flex gl-align-items-center"> <div class="gl-display-flex gl-align-items-center">
......
...@@ -15,6 +15,11 @@ export default { ...@@ -15,6 +15,11 @@ export default {
required: true, required: true,
type: Object, type: Object,
}, },
purchaseStorageUrl: {
required: false,
type: String,
default: '',
},
}, },
computed: { computed: {
formattedActualRepoSizeLimit() { formattedActualRepoSizeLimit() {
...@@ -43,7 +48,8 @@ export default { ...@@ -43,7 +48,8 @@ export default {
totalRepositorySizeExcess, totalRepositorySizeExcess,
additionalPurchasedStorageSize, additionalPurchasedStorageSize,
} = this.rootStorageStatistics; } = this.rootStorageStatistics;
return { return this.purchaseStorageUrl
? {
usage: this.formatSizeAndSplit( usage: this.formatSizeAndSplit(
Math.max(0, additionalPurchasedStorageSize - totalRepositorySizeExcess), Math.max(0, additionalPurchasedStorageSize - totalRepositorySizeExcess),
), ),
...@@ -51,9 +57,10 @@ export default { ...@@ -51,9 +57,10 @@ export default {
description: s__('UsageQuota|Purchased storage available'), description: s__('UsageQuota|Purchased storage available'),
link: { link: {
text: s__('UsageQuota|Purchase more storage'), text: s__('UsageQuota|Purchase more storage'),
url: '#', url: this.purchaseStorageUrl,
}, },
}; }
: null;
}, },
}, },
methods: { methods: {
...@@ -106,6 +113,7 @@ export default { ...@@ -106,6 +113,7 @@ export default {
</template> </template>
</usage-statistics-card> </usage-statistics-card>
<usage-statistics-card <usage-statistics-card
v-if="purchasedUsage"
data-testid="purchasedUsage" data-testid="purchasedUsage"
:usage="purchasedUsage.usage" :usage="purchasedUsage.usage"
:usage-total="purchasedUsage.usageTotal" :usage-total="purchasedUsage.usageTotal"
......
...@@ -7,7 +7,7 @@ import { withRootStorageStatistics } from '../mock_data'; ...@@ -7,7 +7,7 @@ import { withRootStorageStatistics } from '../mock_data';
describe('Usage Statistics component', () => { describe('Usage Statistics component', () => {
let wrapper; let wrapper;
const createComponent = () => { const createComponent = (props = {}) => {
wrapper = shallowMount(UsageStatistics, { wrapper = shallowMount(UsageStatistics, {
propsData: { propsData: {
rootStorageStatistics: { rootStorageStatistics: {
...@@ -16,6 +16,7 @@ describe('Usage Statistics component', () => { ...@@ -16,6 +16,7 @@ describe('Usage Statistics component', () => {
totalRepositorySizeExcess: withRootStorageStatistics.totalRepositorySizeExcess, totalRepositorySizeExcess: withRootStorageStatistics.totalRepositorySizeExcess,
additionalPurchasedStorageSize: withRootStorageStatistics.additionalPurchasedStorageSize, additionalPurchasedStorageSize: withRootStorageStatistics.additionalPurchasedStorageSize,
}, },
...props,
}, },
stubs: { stubs: {
UsageStatisticsCard, UsageStatisticsCard,
...@@ -27,8 +28,11 @@ describe('Usage Statistics component', () => { ...@@ -27,8 +28,11 @@ describe('Usage Statistics component', () => {
const getStatisticsCards = () => wrapper.findAll(UsageStatisticsCard); const getStatisticsCards = () => wrapper.findAll(UsageStatisticsCard);
const getStatisticsCard = testId => wrapper.find(`[data-testid="${testId}"]`); const getStatisticsCard = testId => wrapper.find(`[data-testid="${testId}"]`);
describe('with purchaseStorageUrl passed', () => {
beforeEach(() => { beforeEach(() => {
createComponent(); createComponent({
purchaseStorageUrl: 'some-fancy-url',
});
}); });
afterEach(() => { afterEach(() => {
...@@ -66,4 +70,16 @@ describe('Usage Statistics component', () => { ...@@ -66,4 +70,16 @@ describe('Usage Statistics component', () => {
.exists(), .exists(),
).toBe(true); ).toBe(true);
}); });
});
describe('with no purchaseStorageUrl', () => {
beforeEach(() => {
createComponent({
purchaseStorageUrl: null,
});
});
it('does not render purchased usage card if purchaseStorageUrl is not provided', () => {
expect(getStatisticsCard('purchasedUsage').exists()).toBe(false);
});
});
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment