feat(ui): AssetInfo - show asset chunk and link to filter

relative-ci · Nov 17, 2024 · f4bd60c · f4bd60c
1 parent 00fdf0b
commit f4bd60c
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 15 deletions.
diff --git a/packages/ui/src/components/asset-info/asset-info.tsx b/packages/ui/src/components/asset-info/asset-info.tsx
@@ -9,6 +9,7 @@ import {
   getBundleAssetsByEntryType,
   getBundleAssetsFileTypeComponentLink,
   getModuleFileType,
+  getBundleAssetsByChunk,
 } from '@bundle-stats/utils';
 
 import type { ReportMetricAssetRow } from '../../types';
@@ -20,31 +21,24 @@ import css from './asset-info.module.css';
 
 interface ChunkModulesLinkProps {
   as: ElementType;
-  chunks: Array<WebpackChunk>;
-  chunkId: string;
+  chunk: WebpackChunk;
+  chunkIds: Array<string>;
   name: string;
 }
 
 const ChunkModulesLink = ({
   as: Component,
-  chunks,
-  chunkId,
+  chunk,
+  chunkIds,
   name,
   onClick,
 }: ChunkModulesLinkProps & ComponentProps<'a'>) => {
-  const chunk = chunks?.find(({ id }) => id === chunkId);
-
-  if (!chunk) {
-    return null;
-  }
-
-  const chunkIds = chunks.map(({ id }) => id);
   const fileType = getModuleFileType(name);
 
   return (
     <Component
       className={css.viewModules}
-      {...getBundleModulesByChunk(chunkIds, chunkId, fileType)}
+      {...getBundleModulesByChunk(chunkIds, chunk.id, fileType)}
       onClick={onClick}
     >
       View chunk modules
@@ -144,6 +138,10 @@ export const AssetInfo = (props: AssetInfoProps & ComponentProps<'div'>) => {
   }, [item]);
 
   const fileTypeLabel = FILE_TYPE_LABELS[item.fileType as keyof typeof FILE_TYPE_LABELS];
+  const currentChunk = chunks?.find(
+    (chunk) => currentRun?.chunkId && currentRun.chunkId === chunk.id,
+  );
+  const chunkIds: Array<string> = chunks?.filter(Boolean).map((chunk) => chunk.id) || [];
 
   return (
     <EntryInfo
@@ -169,12 +167,27 @@ export const AssetInfo = (props: AssetInfoProps & ComponentProps<'div'>) => {
         </EntryInfo.Meta>
       )}
 
-      {currentRun?.chunkId && chunks && (
+      {currentChunk && (
+        <EntryInfo.Meta
+          label="Chunk"
+          tooltip="The bundler's chunk from witch the assets was originated"
+        >
+          <EntryInfoMetaLink
+            as={CustomComponentLink}
+            {...getBundleAssetsByChunk(chunkIds, currentRun.chunkId)}
+            onClick={onClick}
+          >
+            {currentChunk.name}
+          </EntryInfoMetaLink>
+        </EntryInfo.Meta>
+      )}
+
+      {currentChunk && (
         <div>
           <ChunkModulesLink
             as={CustomComponentLink}
-            chunks={chunks}
-            chunkId={currentRun?.chunkId}
+            chunk={currentChunk}
+            chunkIds={chunkIds}
             name={currentRun?.name}
             onClick={onClick}
           />

diff --git a/packages/utils/src/i18n.js b/packages/utils/src/i18n.js
@@ -6,6 +6,7 @@ export default {
   COMPONENT_LINK_BUNDLE_ASSETS_CACHE_INVALIDATION: 'View changed assets',
   COMPONENT_LINK_BUNDLE_ASSETS_COUNT: 'View assets',
   COMPONENT_LINK_BUNDLE_ASSETS_CHUNK_COUNT: 'View chunks',
+  COMPONENT_LINK_BUNDLE_ASSETS_CHUNKS: 'View chunk assets',
   COMPONENT_LINK_MODULES: 'View modules',
   COMPONENT_LINK_MODULES_DUPLICATE: 'View duplicate modules',
   COMPONENT_LINK_MODULES_BY_FILE_TYPE: (fileType) => `View ${fileType} modules`,

diff --git a/packages/utils/src/utils/component-links.ts b/packages/utils/src/utils/component-links.ts
@@ -16,6 +16,7 @@ import {
   MODULE_SOURCE_FILE_TYPES,
 } from '../config/file-types';
 import {
+  ASSET_CHUNK,
   ASSET_ENTRY_TYPE,
   ASSET_FILE_TYPE,
   ASSET_FILTERS,
@@ -216,6 +217,23 @@ export const getBundleAssetsFileTypeComponentLink = (
   },
 });
 
+export const getBundleAssetsByChunk = (
+  chunkIds: Array<string>,
+  chunkId: string,
+): ComponentLink => ({
+  section: SECTIONS.ASSETS,
+  title: I18N.COMPONENT_LINK_BUNDLE_ASSETS_CHUNKS,
+  params: {
+    [COMPONENT.BUNDLE_ASSETS]: {
+      filters: {
+        [ASSET_FILTERS.CHUNK]: false,
+        ...getModuleChunkFilters(chunkIds, false),
+        [`${ASSET_CHUNK}.${chunkId}`]: true,
+      },
+    },
+  },
+});
+
 export const BUNDLE_MODULES: ComponentLink = {
   section: SECTIONS.MODULES,
   title: I18N.COMPONENT_LINK_MODULES,