fix(ui): BundleAssets - use all jobs chunks to generate module filters

relative-ci · May 18, 2024 · a3b385b · a3b385b
1 parent 5b84195
commit a3b385b
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 42 deletions.
diff --git a/packages/ui/src/components/bundle-assets/bundle-assets.jsx b/packages/ui/src/components/bundle-assets/bundle-assets.jsx
@@ -48,12 +48,11 @@ const DISPLAY_TYPE_GROUPS = {
 };
 
 const getFileTypeFilters = (filters) =>
-  Object.entries(FILE_TYPE_LABELS)
-    .map(([key, label]) => ({
-      key,
-      label,
-      defaultValue: get(filters, `${ASSET_FILE_TYPE}.${key}`, true),
-    }));
+  Object.entries(FILE_TYPE_LABELS).map(([key, label]) => ({
+  key,
+  label,
+  defaultValue: get(filters, `${ASSET_FILE_TYPE}.${key}`, true),
+}));
 
 const getFilters = ({ compareMode, filters }) => ({
   [ASSET_FILTERS.CHANGED]: {
@@ -146,29 +145,26 @@ const RowHeader = ({ row, customComponentLink: CustomComponentLink, filters, sea
 
 RowHeader.propTypes = {
   row: PropTypes.shape({
+    key: PropTypes.string,
     label: PropTypes.string,
     isNotPredictive: PropTypes.bool,
     isChunk: PropTypes.bool,
     isInitial: PropTypes.bool,
     isEntry: PropTypes.bool,
     runs: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
   }).isRequired,
-  chunks: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      name: PropTypes.string,
-    }),
-  ),
-  labels: PropTypes.arrayOf(PropTypes.string).isRequired,
-  CustomComponentLink: PropTypes.elementType.isRequired,
+  customComponentLink: PropTypes.elementType.isRequired,
+  filters: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  search: PropTypes.string,
 };
 
 RowHeader.defaultProps = {
-  chunks: [],
+  search: '',
 };
 
 const ViewMetricsTreemap = (props) => {
-  const { metricsTableTitle, jobs, items, displayType, emptyMessage, showEntryInfo, updateSearch } = props;
+  const { metricsTableTitle, jobs, items, displayType, emptyMessage, showEntryInfo, updateSearch } =
+    props;
 
   const treeNodes = useMemo(() => {
     if (displayType.groupBy === 'folder') {
@@ -225,6 +221,7 @@ export const BundleAssets = (props) => {
   const {
     className,
     jobs,
+    chunks,
     items,
     allItems,
     updateFilters,
@@ -252,14 +249,17 @@ export const BundleAssets = (props) => {
     [jobs, filters],
   );
 
-  const metricsTableTitle = useMemo(() => (
-    <MetricsTableTitle
-      title={I18N.ASSETS}
-      info={`${items.length}/${totalRowCount}`}
-      popoverInfo={I18N.ASSETS_INFO}
-      popoverHref={config.documentation.assets}
-    />
-  ), [items, totalRowCount]);
+  const metricsTableTitle = useMemo(
+    () => (
+      <MetricsTableTitle
+        title={I18N.ASSETS}
+        info={`${items.length}/${totalRowCount}`}
+        popoverInfo={I18N.ASSETS_INFO}
+        popoverHref={config.documentation.assets}
+      />
+    ),
+    [items, totalRowCount],
+  );
 
   const renderRowHeader = useCallback(
     (row) => (
@@ -273,21 +273,24 @@ export const BundleAssets = (props) => {
     [CustomComponentLink, filters, search],
   );
 
-  const emptyMessage = useMemo(() => (
-    <EmptySet
-      resources="assets"
-      filtered={totalRowCount !== 0}
-      handleResetFilters={resetFilters}
-      handleViewAll={resetAllFilters}
-    />
-  ), [totalRowCount, resetFilters, resetAllFilters]);
+  const emptyMessage = useMemo(
+    () => (
+      <EmptySet
+        resources="assets"
+        filtered={totalRowCount !== 0}
+        handleResetFilters={resetFilters}
+        handleViewAll={resetAllFilters}
+      />
+    ),
+    [totalRowCount, resetFilters, resetAllFilters],
+  );
 
   const entryItem = useMemo(() => {
     if (!entryId) {
       return null;
     }
 
-    return allItems.find(({ key }) => key === entryId)
+    return allItems.find(({ key }) => key === entryId);
   }, [allItems, entryId]);
 
   return (
@@ -355,7 +358,7 @@ export const BundleAssets = (props) => {
           className={css.assetInfo}
           item={entryItem}
           labels={jobLabels}
-          chunks={jobs[0]?.meta?.webpack?.chunks || []}
+          chunks={chunks}
           customComponentLink={CustomComponentLink}
           onClose={hideEntryInfo}
         />
@@ -378,13 +381,12 @@ BundleAssets.propTypes = {
     PropTypes.shape({
       internalBuildNumber: PropTypes.number,
       label: PropTypes.string,
-      meta: PropTypes.shape({
-        webpack: PropTypes.shape({
-          chunks: PropTypes.array, // eslint-disable-line react/forbid-prop-types
-        }),
-      }),
     }),
   ).isRequired,
+  chunks: PropTypes.arrayOf({
+    id: PropTypes.string,
+    name: PropTypes.string,
+  }).isRequired,
   items: PropTypes.arrayOf(
     PropTypes.shape({
       key: PropTypes.string,
@@ -414,9 +416,11 @@ BundleAssets.propTypes = {
     direction: PropTypes.string,
   }).isRequired,
   updateSort: PropTypes.func.isRequired,
-  allItems: PropTypes.arrayOf(PropTypes.shape({
-    key: PropTypes.string,
-  })).isRequired,
+  allItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string,
+    }),
+  ).isRequired,
   customComponentLink: PropTypes.elementType,
   hideEntryInfo: PropTypes.func.isRequired,
   showEntryInfo: PropTypes.func.isRequired,

diff --git a/packages/ui/src/components/bundle-assets/index.jsx b/packages/ui/src/components/bundle-assets/index.jsx
@@ -11,6 +11,7 @@ import { useRowsFilter } from '../../hooks/rows-filter';
 import { useRowsSort } from '../../hooks/rows-sort';
 import { useSearchParams } from '../../hooks/search-params';
 import { useEntryInfo } from '../../hooks/entry-info';
+import { getJobsChunksData } from '../../utils/jobs';
 import { BundleAssets as BundleAssetsComponent } from './bundle-assets';
 import {
   addRowAssetFlags,
@@ -22,6 +23,8 @@ import {
 export const BundleAssets = (props) => {
   const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
 
+  const { chunks } = useMemo(() => getJobsChunksData(jobs), [jobs]);
+
   const { defaultFilters, allEntriesFilters } = useMemo(
     () => ({
       defaultFilters: {
@@ -70,6 +73,7 @@ export const BundleAssets = (props) => {
   return (
     <BundleAssetsComponent
       jobs={jobs}
+      chunks={chunks}
       {...restProps}
       {...searchParams}
       {...sortParams}