Commit 5f36182d authored by Dhiraj Bodicherla's avatar Dhiraj Bodicherla

Removes usage statistics docs links

This MR removes docs links in the usage quotas
page
parent fa71f106
......@@ -85,6 +85,7 @@ export default {
return {
totalRepositorySize: this.namespace.totalRepositorySize,
actualRepositorySizeLimit: this.namespace.actualRepositorySizeLimit,
totalRepositorySizeExcess: this.namespace.totalRepositorySizeExcess,
additionalPurchasedStorageSize: this.namespace.additionalPurchasedStorageSize,
};
......
<script>
import { GlButton } from '@gitlab/ui';
import { GlButton, GlSprintf } from '@gitlab/ui';
import UsageStatisticsCard from './usage_statistics_card.vue';
import { s__ } from '~/locale';
import { formatUsageSize } from '../utils';
......@@ -7,6 +7,7 @@ import { formatUsageSize } from '../utils';
export default {
components: {
GlButton,
GlSprintf,
UsageStatisticsCard,
},
props: {
......@@ -16,24 +17,25 @@ export default {
},
},
computed: {
formattedActualRepoSizeLimit() {
return formatUsageSize(this.rootStorageStatistics.actualRepositorySizeLimit);
},
totalUsage() {
return {
usage: this.formatSize(this.rootStorageStatistics.totalRepositorySize),
usage: this.formatSizeAndSplit(this.rootStorageStatistics.totalRepositorySize),
description: s__('UsageQuota|Total namespace storage used'),
link: {
text: s__('UsageQuota|Learn more about usage quotas'),
url: '#',
},
footerNote: s__(
'UsageQuota|This is the total amount of storage used across your projects within this namespace.',
),
};
},
excessUsage() {
return {
usage: this.formatSize(this.rootStorageStatistics.totalRepositorySizeExcess),
usage: this.formatSizeAndSplit(this.rootStorageStatistics.totalRepositorySizeExcess),
description: s__('UsageQuota|Total excess storage used'),
link: {
text: s__('UsageQuota|Learn more about excess storage usage'),
url: '#',
},
footerNote: s__(
'UsageQuota|This is the total amount of storage used by projects above the free %{actualRepositorySizeLimit} storage limit.',
),
};
},
purchasedUsage() {
......@@ -42,10 +44,10 @@ export default {
additionalPurchasedStorageSize,
} = this.rootStorageStatistics;
return {
usage: this.formatSize(
usage: this.formatSizeAndSplit(
Math.max(0, additionalPurchasedStorageSize - totalRepositorySizeExcess),
),
usageTotal: this.formatSize(additionalPurchasedStorageSize),
usageTotal: this.formatSizeAndSplit(additionalPurchasedStorageSize),
description: s__('UsageQuota|Purchased storage available'),
link: {
text: s__('UsageQuota|Purchase more storage'),
......@@ -65,7 +67,7 @@ export default {
* @params {Number} size size in bytes
* @returns {Object} value and unit of formatted size
*/
formatSize(size) {
formatSizeAndSplit(size) {
const formattedSize = formatUsageSize(size);
return {
value: formattedSize.slice(0, -3),
......@@ -83,14 +85,26 @@ export default {
:link="totalUsage.link"
:description="totalUsage.description"
css-class="gl-mr-4"
/>
>
<template #footer="{}">
{{ totalUsage.footerNote }}
</template>
</usage-statistics-card>
<usage-statistics-card
data-testid="excessUsage"
:usage="excessUsage.usage"
:link="excessUsage.link"
:description="excessUsage.description"
css-class="gl-mx-4"
/>
>
<template #footer="{}">
<gl-sprintf :message="excessUsage.footerNote">
<template #actualRepositorySizeLimit>
{{ formattedActualRepoSizeLimit }}
</template>
</gl-sprintf>
</template>
</usage-statistics-card>
<usage-statistics-card
data-testid="purchasedUsage"
:usage="purchasedUsage.usage"
......@@ -99,7 +113,7 @@ export default {
:description="purchasedUsage.description"
css-class="gl-ml-4"
>
<template #link="{link}">
<template #footer="{link}">
<gl-button
target="_blank"
:href="link.url"
......
......@@ -60,8 +60,11 @@ export default {
<p class="gl-border-b-2 gl-border-b-solid gl-border-b-gray-100 gl-font-weight-bold gl-pb-3">
{{ description }}
</p>
<p class="gl-mb-0">
<slot v-bind="{ link }" name="link">
<p
class="gl-mb-0 gl-text-gray-900 gl-font-sm gl-white-space-normal"
data-testid="statisticsCardFooter"
>
<slot v-bind="{ link }" name="footer">
<gl-link target="_blank" :href="link.url">
<span class="text-truncate">{{ link.text }}</span>
<gl-icon name="external-link" class="gl-ml-2 gl-flex-shrink-0 gl-text-black-normal" />
......
import { shallowMount } from '@vue/test-utils';
import { GlButton, GlLink } from '@gitlab/ui';
import { GlButton, GlSprintf } from '@gitlab/ui';
import UsageStatistics from 'ee/storage_counter/components/usage_statistics.vue';
import UsageStatisticsCard from 'ee/storage_counter/components/usage_statistics_card.vue';
import { withRootStorageStatistics } from '../mock_data';
......@@ -10,11 +10,16 @@ describe('Usage Statistics component', () => {
const createComponent = () => {
wrapper = shallowMount(UsageStatistics, {
propsData: {
rootStorageStatistics: withRootStorageStatistics.rootStorageStatistics,
rootStorageStatistics: {
totalRepositorySize: withRootStorageStatistics.totalRepositorySize,
actualRepositorySizeLimit: withRootStorageStatistics.actualRepositorySizeLimit,
totalRepositorySizeExcess: withRootStorageStatistics.totalRepositorySizeExcess,
additionalPurchasedStorageSize: withRootStorageStatistics.additionalPurchasedStorageSize,
},
},
stubs: {
UsageStatisticsCard,
GlLink,
GlSprintf,
},
});
};
......@@ -34,15 +39,30 @@ describe('Usage Statistics component', () => {
expect(getStatisticsCards()).toHaveLength(3);
});
it.each`
cardName | componentName | componentType
${'totalUsage'} | ${'GlLink'} | ${GlLink}
${'excessUsage'} | ${'GlLink'} | ${GlLink}
${'purchasedUsage'} | ${'GlButton'} | ${GlButton}
`('renders $componentName in $cardName', ({ cardName, componentType }) => {
it('renders text in total usage card footer', () => {
expect(
getStatisticsCard(cardName)
.find(componentType)
getStatisticsCard('totalUsage')
.find('[data-testid="statisticsCardFooter"]')
.text(),
).toMatchInterpolatedText(
'This is the total amount of storage used across your projects within this namespace.',
);
});
it('renders text in excess usage card footer', () => {
expect(
getStatisticsCard('excessUsage')
.find('[data-testid="statisticsCardFooter"]')
.text(),
).toMatchInterpolatedText(
'This is the total amount of storage used by projects above the free 978.8KiB storage limit.',
);
});
it('renders button in purchased usage card footer', () => {
expect(
getStatisticsCard('purchasedUsage')
.find(GlButton)
.exists(),
).toBe(true);
});
......
......@@ -28629,12 +28629,6 @@ msgstr ""
msgid "UsageQuota|LFS Storage"
msgstr ""
msgid "UsageQuota|Learn more about excess storage usage"
msgstr ""
msgid "UsageQuota|Learn more about usage quotas"
msgstr ""
msgid "UsageQuota|Packages"
msgstr ""
......@@ -28659,6 +28653,12 @@ msgstr ""
msgid "UsageQuota|Storage"
msgstr ""
msgid "UsageQuota|This is the total amount of storage used across your projects within this namespace."
msgstr ""
msgid "UsageQuota|This is the total amount of storage used by projects above the free %{actualRepositorySizeLimit} storage limit."
msgstr ""
msgid "UsageQuota|This namespace contains locked projects"
msgstr ""
......
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