Merge pull request #4851 from relative-ci/bundle-assets-i18n

fix(ui): BundleAssets - extract i18n
relative-ci · Nov 20, 2024 · 6fca63b · 6fca63b
2 parents 2cf7ed9 + 03cda3a
commit 6fca63b
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 27 deletions.
diff --git a/packages/ui/src/components/asset-info/asset-info.i18n.ts 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
@@ -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 (
     <>
       <span className={css.runNameTags}>
-        {run.isEntry && <AssetMetaTag tag="entry" title="Entry" size="small" />}
-        {run.isInitial && <AssetMetaTag tag="initial" title="Initial" size="small" />}
-        {run.isChunk && <AssetMetaTag tag="chunk" title="Chunk" size="small" />}
+        {run.isEntry && <AssetMetaTag tag="entry" title={I18N.ENTRY} size="small" />}
+        {run.isInitial && <AssetMetaTag tag="initial" title={I18N.INITIAL} size="small" />}
+        {run.isChunk && <AssetMetaTag tag="chunk" title={I18N.CHUNK} size="small" />}
       </span>
       {children}
     </>
@@ -104,7 +105,7 @@ export const AssetInfo = (props: AssetInfoProps & ComponentProps<'div'>) => {
             status={item.isEntry}
             className={css.assetNameTag}
           >
-            Entrypoint
+            {I18N.ENTRYPOINT}
           </AssetMetaTag>
         )}
         {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}
           </AssetMetaTag>
         )}
         {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}
           </AssetMetaTag>
         )}
       </FlexStack>
@@ -153,10 +154,7 @@ export const AssetInfo = (props: AssetInfoProps & ComponentProps<'div'>) => {
       className={cx(css.root, className)}
     >
       {item.fileType && (
-        <EntryInfo.Meta
-          label="File type"
-          tooltip="Asset file type: JS, CSS, image, media, fonts, HTML, or other"
-        >
+        <EntryInfo.Meta label={I18N.FILE_TYPE} tooltip={I18N.FILE_TYPE_TOOLTIP}>
           <EntryInfoMetaLink
             as={CustomComponentLink}
             {...getBundleAssetsFileTypeComponentLink(item.fileType, fileTypeLabel)}
@@ -168,10 +166,7 @@ export const AssetInfo = (props: AssetInfoProps & ComponentProps<'div'>) => {
       )}
 
       {currentChunk && (
-        <EntryInfo.Meta
-          label="Chunk"
-          tooltip="The bundler's chunk from witch the assets was originated"
-        >
+        <EntryInfo.Meta label={I18N.CHUNK} tooltip={I18N.CHUNK_TOOLTIP}>
           <EntryInfoMetaLink
             as={CustomComponentLink}
             {...getBundleAssetsByChunk(chunkIds, currentRun.chunkId)}

diff --git a/packages/ui/src/components/bundle-assets/bundle-assets.i18n.ts b/packages/ui/src/components/bundle-assets/bundle-assets.i18n.ts
@@ -1 +1,9 @@
 export const SEARCH_PLACEHOLDER = 'Search by asset path';
+export const CHANGED = 'Changed';
+export const FILE_TYPE = 'File type';
+export const CHUNKS = 'Chunks';
+export const NO_CHUNK = 'No chunk';
+export const ENTRY = 'Entry';
+export const INITIAL = 'Initial';
+export const CHUNK = 'Chunk';
+export const OTHER = 'Other';
diff --git a/packages/ui/src/components/bundle-assets/bundle-assets.tsx b/packages/ui/src/components/bundle-assets/bundle-assets.tsx
@@ -29,7 +29,7 @@ import { MetricsTableTitle } from '../metrics-table-title';
 import { MetricsDisplaySelector } from '../metrics-display-selector';
 import { MetricsTableHeader } from '../metrics-table-header';
 import { MetricsTreemap, getTreemapNodes, getTreemapNodesGroupedByPath } from '../metrics-treemap';
-import { SEARCH_PLACEHOLDER } from './bundle-assets.i18n';
+import * as BUNDLE_ASSETS_I18N from './bundle-assets.i18n';
 import { getFilters } from './bundle-assets.utils';
 import css from './bundle-assets.module.css';
 
@@ -259,7 +259,7 @@ export const BundleAssets = (props: BundleAssetsProps) => {
           <FlexStack space="xxsmall">
             <InputSearch
               className={css.toolbarSearch}
-              placeholder={SEARCH_PLACEHOLDER}
+              placeholder={BUNDLE_ASSETS_I18N.SEARCH_PLACEHOLDER}
               defaultValue={search}
               onChange={updateSearch}
             />

diff --git 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<boolean | strin
   item.key,
 ];
 
-const getFileTypeFilters = (filters: Record<string, unknown>): FilterGroupFieldData['children'] =>
-  Object.entries(FILE_TYPE_LABELS).map(([key, label]) => ({
+/* eslint-disable prettier/prettier */
+const getFileTypeFilters = (filters: Record<string, unknown>): FilterGroupFieldData['children'] => Object.entries(FILE_TYPE_LABELS).map(([key, label]) => ({
   key,
   label,
   defaultValue: get(filters, `${ASSET_FILE_TYPE}.${key}`, true) as boolean,
@@ -161,19 +163,19 @@ export const getFilters = ({
 }: GetFiltersOptions): FilterFieldsData => {
   const result: FilterFieldsData = {
     [ASSET_FILTERS.CHANGED]: {
-      label: 'Changed',
+      label: I18N.CHANGED,
       defaultValue: filters[ASSET_FILTERS.CHANGED],
       disabled: !compareMode,
     },
   };
 
   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),
   };