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),
};