Commit eb69a2db authored by Ammar Alakkad's avatar Ammar Alakkad

Rename usage column in storage projects-list

Changelog: other
EE: true
parent 6360cbf0
......@@ -9,7 +9,7 @@ import {
} from '@gitlab/ui';
import { parseBoolean } from '~/lib/utils/common_utils';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import { PROJECTS_PER_PAGE } from '../constants';
import { PROJECTS_PER_PAGE, PROJECT_TABLE_LABEL_STORAGE_USAGE } from '../constants';
import query from '../queries/namespace_storage.query.graphql';
import { formatUsageSize, parseGetStorageResults } from '../utils';
import ProjectList from './project_list.vue';
......@@ -35,6 +35,9 @@ export default {
directives: {
GlModalDirective,
},
i18n: {
PROJECT_TABLE_LABEL_STORAGE_USAGE,
},
mixins: [glFeatureFlagsMixin()],
inject: ['namespacePath', 'purchaseStorageUrl', 'isTemporaryStorageIncreaseVisible', 'helpLinks'],
apollo: {
......@@ -212,6 +215,7 @@ export default {
:projects="namespaceProjects"
:is-loading="isQueryLoading"
:additional-purchased-storage-size="namespace.additionalPurchasedStorageSize || 0"
:usage-label="$options.i18n.PROJECT_TABLE_LABEL_STORAGE_USAGE"
@search="handleSearch"
/>
<div class="gl-display-flex gl-justify-content-center gl-mt-5">
......
......@@ -23,10 +23,14 @@ export default {
required: false,
default: false,
},
usageLabel: {
type: String,
required: false,
default: PROJECT_TABLE_LABEL_USAGE,
},
},
i18n: {
PROJECT_TABLE_LABEL_PROJECT,
PROJECT_TABLE_LABEL_USAGE,
},
};
</script>
......@@ -40,8 +44,12 @@ export default {
<div class="table-section section-70 gl-font-weight-bold" role="columnheader">
{{ $options.i18n.PROJECT_TABLE_LABEL_PROJECT }}
</div>
<div class="table-section section-30 gl-font-weight-bold" role="columnheader">
{{ $options.i18n.PROJECT_TABLE_LABEL_USAGE }}
<div
class="table-section section-30 gl-font-weight-bold"
role="columnheader"
data-testid="usage-label"
>
{{ usageLabel }}
</div>
</div>
<projects-skeleton-loader v-if="isLoading" />
......
......@@ -60,6 +60,7 @@ export const PROJECT_STORAGE_TYPES = [
export const PROJECT_TABLE_LABEL_PROJECT = __('Project');
export const PROJECT_TABLE_LABEL_STORAGE_TYPE = s__('UsageQuota|Storage type');
export const PROJECT_TABLE_LABEL_USAGE = s__('UsageQuota|Usage');
export const PROJECT_TABLE_LABEL_STORAGE_USAGE = s__('UsageQuota|Storage used');
export const SKELETON_LOADER_ROWS = 5;
......
import { shallowMount } from '@vue/test-utils';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import CollapsibleProjectStorageDetail from 'ee/usage_quotas/storage/components/collapsible_project_storage_detail.vue';
import ProjectList from 'ee/usage_quotas/storage/components/project_list.vue';
import {
PROJECT_TABLE_LABEL_STORAGE_USAGE,
PROJECT_TABLE_LABEL_USAGE,
} from 'ee/usage_quotas/storage/constants';
import { projects } from '../mock_data';
let wrapper;
const createComponent = ({ additionalRepoStorageByNamespace = false } = {}) => {
wrapper = shallowMount(ProjectList, {
const createComponent = ({ props = {}, additionalRepoStorageByNamespace = false } = {}) => {
wrapper = shallowMountExtended(ProjectList, {
propsData: {
projects,
additionalPurchasedStorageSize: 0,
...props,
},
provide: {
glFeatures: {
......@@ -20,6 +25,7 @@ const createComponent = ({ additionalRepoStorageByNamespace = false } = {}) => {
};
const findTableRows = () => wrapper.findAllComponents(CollapsibleProjectStorageDetail);
const findUsageLabel = () => wrapper.findByTestId('usage-label');
describe('ProjectList', () => {
beforeEach(() => {
......@@ -34,6 +40,20 @@ describe('ProjectList', () => {
expect(findTableRows()).toHaveLength(3);
});
describe('usage column', () => {
it('renders passed `usageLabel` as column label', () => {
createComponent({ props: { usageLabel: PROJECT_TABLE_LABEL_STORAGE_USAGE } });
expect(findUsageLabel().text()).toBe(PROJECT_TABLE_LABEL_STORAGE_USAGE);
});
it('renders `Usage` as column label by default', () => {
createComponent();
expect(findUsageLabel().text()).toBe(PROJECT_TABLE_LABEL_USAGE);
});
});
describe('with additional repo storage feature flag ', () => {
beforeEach(() => {
createComponent({ additionalRepoStorageByNamespace: true });
......
......@@ -39279,6 +39279,9 @@ msgstr ""
msgid "UsageQuota|Storage type"
msgstr ""
msgid "UsageQuota|Storage used"
msgstr ""
msgid "UsageQuota|This is the total amount of storage used across your projects within this namespace."
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