diff --git a/packages/ui/src/components/asset-info/asset-info.i18n.ts b/packages/ui/src/components/asset-info/asset-info.i18n.ts new file mode 100644 index 0000000000..abc9639bc1 --- /dev/null +++ b/packages/ui/src/components/asset-info/asset-info.i18n.ts @@ -0,0 +1,7 @@ +export const ENTRY = 'Entry'; +export const INITIAL = 'Initial'; +export const CHUNK = 'Chunk'; +export const CHUNK_TOOLTIP = "The bundler's chunk from which the assets originated"; +export const ENTRYPOINT = 'Entrypoint'; +export const FILE_TYPE = 'File type'; +export const FILE_TYPE_TOOLTIP = 'Asset file type: JS, CSS, image, media, fonts, HTML, or other'; diff --git a/packages/ui/src/components/asset-info/asset-info.tsx b/packages/ui/src/components/asset-info/asset-info.tsx index 5144946aee..fefe6491d7 100644 --- a/packages/ui/src/components/asset-info/asset-info.tsx +++ b/packages/ui/src/components/asset-info/asset-info.tsx @@ -17,6 +17,7 @@ import { FlexStack } from '../../layout/flex-stack'; import { AssetMetaTag } from '../asset-meta-tag'; import { ComponentLink } from '../component-link'; import { EntryInfo, EntryInfoMetaLink } from '../entry-info'; +import * as I18N from './asset-info.i18n'; import css from './asset-info.module.css'; interface ChunkModulesLinkProps { @@ -57,9 +58,9 @@ const AssetRunName = (props: AssetRunNameProps) => { return ( <> - {run.isEntry && } - {run.isInitial && } - {run.isChunk && } + {run.isEntry && } + {run.isInitial && } + {run.isChunk && } {children} @@ -104,7 +105,7 @@ export const AssetInfo = (props: AssetInfoProps & ComponentProps<'div'>) => { status={item.isEntry} className={css.assetNameTag} > - Entrypoint + {I18N.ENTRYPOINT} )} {item.isInitial && ( @@ -117,7 +118,7 @@ export const AssetInfo = (props: AssetInfoProps & ComponentProps<'div'>) => { status={item.isInitial} className={cx(css.assetNameTag, css.assetNameTagInitial)} > - Initial + {I18N.INITIAL} )} {item.isChunk && ( @@ -130,7 +131,7 @@ export const AssetInfo = (props: AssetInfoProps & ComponentProps<'div'>) => { status={item.isChunk} className={cx(css.assetNameTag, css.assetNameTagChunk)} > - Chunk + {I18N.CHUNK} )} @@ -153,10 +154,7 @@ export const AssetInfo = (props: AssetInfoProps & ComponentProps<'div'>) => { className={cx(css.root, className)} > {item.fileType && ( - + ) => { )} {currentChunk && ( - + { diff --git a/packages/ui/src/components/bundle-assets/bundle-assets.utils.ts b/packages/ui/src/components/bundle-assets/bundle-assets.utils.ts index 8f5ab66098..98e3344787 100644 --- a/packages/ui/src/components/bundle-assets/bundle-assets.utils.ts +++ b/packages/ui/src/components/bundle-assets/bundle-assets.utils.ts @@ -12,12 +12,14 @@ import { FILE_TYPE_LABELS, getFileType, } from '@bundle-stats/utils'; + import type { FilterFieldsData, ReportMetricAssetRow, ReportMetricAssetRowMetaStatus, FilterGroupFieldData, } from '../../types'; +import * as I18N from './bundle-assets.i18n'; const NO_CHUNK_FILTER = 'NO_CHUNK'; @@ -141,8 +143,8 @@ export const getCustomSort = (item: ReportMetricAssetRow): Array): FilterGroupFieldData['children'] => - Object.entries(FILE_TYPE_LABELS).map(([key, label]) => ({ +/* eslint-disable prettier/prettier */ +const getFileTypeFilters = (filters: Record): FilterGroupFieldData['children'] => Object.entries(FILE_TYPE_LABELS).map(([key, label]) => ({ key, label, defaultValue: get(filters, `${ASSET_FILE_TYPE}.${key}`, true) as boolean, @@ -161,7 +163,7 @@ export const getFilters = ({ }: GetFiltersOptions): FilterFieldsData => { const result: FilterFieldsData = { [ASSET_FILTERS.CHANGED]: { - label: 'Changed', + label: I18N.CHANGED, defaultValue: filters[ASSET_FILTERS.CHANGED], disabled: !compareMode, }, @@ -169,11 +171,11 @@ export const getFilters = ({ if (!isEmpty(chunks)) { const chunksFilter: FilterGroupFieldData = { - label: 'Chunks', + label: I18N.CHUNKS, children: [ { key: NO_CHUNK_FILTER, - label: 'No chunk', + label: I18N.NO_CHUNK, defaultValue: filters[`${ASSET_CHUNK}.${NO_CHUNK_FILTER}`] ?? true, }, ], @@ -193,33 +195,33 @@ export const getFilters = ({ } result[ASSET_ENTRY_TYPE] = { - label: 'Type', + label: I18N.FILE_TYPE, children: [ { key: ASSET_FILTERS.ENTRY, - label: 'Entry', + label: I18N.ENTRY, defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`, true), }, { key: ASSET_FILTERS.INITIAL, - label: 'Initial', + label: I18N.INITIAL, defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`, true), }, { key: ASSET_FILTERS.CHUNK, - label: 'Chunk', + label: I18N.CHUNK, defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`, true), }, { key: ASSET_FILTERS.OTHER, - label: 'Other', + label: I18N.OTHER, defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.OTHER}`, true), }, ], }; result[ASSET_FILE_TYPE] = { - label: 'File type', + label: I18N.FILE_TYPE, children: getFileTypeFilters(filters), };