@bundle-stats/ui 4.17.0 → 4.18.0-beta.0

package/lib-esm/hooks/rows-sort.js

@@ -2,14 +2,26 @@ import { useState, useMemo, useCallback } from 'react';
 import get from 'lodash/get';
 import orderBy from 'lodash/orderBy';
 import { SORT } from '../constants';
+const getSortDirection = (directionParam) => {
+    if (typeof directionParam === 'undefined') {
+        return '';
+    }
+    if (['asc', 'desc'].includes(directionParam)) {
+        return directionParam;
+    }
+    return '';
+};
 export const getSortFn = (fieldPath, getCustomSort) => (item) => {
     if (!fieldPath) {
         return getCustomSort(item);
     }
     return get(item, fieldPath) || 0;
 };
-export const useRowsSort = ({ rows, initialField = 'runs[0].delta', initialDirection = 'desc', getCustomSort, setQueryState, }) => {
-    const [sort, setSort] = useState({ field: initialField, direction: initialDirection });
+export const useRowsSort = ({ rows, initialField = 'runs[0].delta', initialDirection, getCustomSort, setQueryState, }) => {
+    const [sort, setSort] = useState({
+        field: initialField,
+        direction: getSortDirection(initialDirection),
+    });
     const updateSort = useCallback((newState) => {
         setSort(newState);
         setQueryState({ sortBy: newState.field, direction: newState.direction });

package/lib-esm/hooks/rows-sort.js.map

@@ -1 +1 @@
-{"version":3,"file":"rows-sort.js","sourceRoot":"","sources":["../../src/hooks/rows-sort.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,GAAG,MAAM,YAAY,CAAC;AAC7B,OAAO,OAAO,MAAM,gBAAgB,CAAC;AAGrC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,MAAM,CAAC,MAAM,SAAS,GACpB,CAAO,SAAiB,EAAE,aAAuD,EAAE,EAAE,CACrF,CAAC,IAAU,EAAE,EAAE;IACb,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,aAAa,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAED,OAAO,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;AACnC,CAAC,CAAC;AAmBJ,MAAM,CAAC,MAAM,WAAW,GAAG,CAAO,EAChC,IAAI,EACJ,YAAY,GAAG,eAAe,EAC9B,gBAAgB,GAAG,MAAM,EACzB,aAAa,EACb,aAAa,GACW,EAAqB,EAAE;IAC/C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,CAAC;IAEvF,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,QAAoB,EAAE,EAAE;QAEvB,OAAO,CAAC,QAAQ,CAAC,CAAC;QAElB,aAAa,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC;IAC3E,CAAC,EACD,CAAC,aAAa,EAAE,OAAO,CAAC,CACzB,CAAC;IAEF,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CACH,OAAO,CACP,IAAI,EACJ,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC,EAEpC,IAAI,CAAC,SAAS,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAE,IAAI,CAAC,GAAW,CAC3D,EACD,CAAC,IAAI,EAAE,IAAI,CAAC,CACb,CAAC;IAEF,OAAO;QACL,IAAI;QACJ,UAAU;QACV,KAAK,EAAE,WAAW;KACnB,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"rows-sort.js","sourceRoot":"","sources":["../../src/hooks/rows-sort.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,GAAG,MAAM,YAAY,CAAC;AAC7B,OAAO,OAAO,MAAM,gBAAgB,CAAC;AAGrC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAKpC,MAAM,gBAAgB,GAAG,CAAC,cAAkC,EAA2B,EAAE;IACvF,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE,CAAC;QAC1C,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC;QAC7C,OAAO,cAAyC,CAAC;IACnD,CAAC;IAED,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GACpB,CAAO,SAAiB,EAAE,aAAuD,EAAE,EAAE,CACrF,CAAC,IAAU,EAAE,EAAE;IACb,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,aAAa,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAED,OAAO,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;AACnC,CAAC,CAAC;AAmBJ,MAAM,CAAC,MAAM,WAAW,GAAG,CAAO,EAChC,IAAI,EACJ,YAAY,GAAG,eAAe,EAC9B,gBAAgB,EAChB,aAAa,EACb,aAAa,GACW,EAAqB,EAAE;IAC/C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC;QAC/B,KAAK,EAAE,YAAY;QACnB,SAAS,EAAE,gBAAgB,CAAC,gBAAgB,CAAC;KAC9C,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,QAAoB,EAAE,EAAE;QAEvB,OAAO,CAAC,QAAQ,CAAC,CAAC;QAElB,aAAa,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC;IAC3E,CAAC,EACD,CAAC,aAAa,EAAE,OAAO,CAAC,CACzB,CAAC;IAEF,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CACH,OAAO,CACP,IAAI,EACJ,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC,EAEpC,IAAI,CAAC,SAAS,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAE,IAAI,CAAC,GAAW,CAC3D,EACD,CAAC,IAAI,EAAE,IAAI,CAAC,CACb,CAAC;IAEF,OAAO;QACL,IAAI;QACJ,UAAU;QACV,KAAK,EAAE,WAAW;KACnB,CAAC;AACJ,CAAC,CAAC"}

package/lib-esm/hooks/search-params.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-params.js","sourceRoot":"","sources":["../../src/hooks/search-params.js"],"names":[],"mappings":"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"}
+{"version":3,"file":"search-params.js","sourceRoot":"","sources":["../../src/hooks/search-params.js"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.17.0",
+  "version": "4.18.0-beta.0",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -74,7 +74,7 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.17.0",
+    "@bundle-stats/utils": "^4.18.0-beta.0",
     "ariakit": "2.0.0-next.44",
     "d3": "7.9.0",
     "modern-css-reset": "1.4.0",
@@ -82,5 +82,5 @@
     "snarkdown": "2.0.0",
     "use-query-params": "2.2.1"
   },
-  "gitHead": "b24d870b9d317c63f3eaf9fb3ace65a5c42e32c6"
+  "gitHead": "dba19d987f23eb3c299573cabbc6a051846d7e2a"
 }

package/src/components/asset-info/asset-info.tsx

@@ -2,15 +2,15 @@ import type { ComponentProps, ElementType, ReactNode } from 'react';
 import React, { useMemo } from 'react';
 import cx from 'classnames';
 import noop from 'lodash/noop';
+import type { WebpackChunk } from '@bundle-stats/utils';
 import {
   FILE_TYPE_LABELS,
-  MetricRunInfo,
   getBundleModulesByChunk,
   getBundleAssetsByEntryType,
   getBundleAssetsFileTypeComponentLink,
   getModuleFileType,
+  getBundleAssetsByChunk,
 } from '@bundle-stats/utils';
-import type { AssetMetricRun, MetaChunk } from '@bundle-stats/utils/types/webpack';
 
 import type { ReportMetricAssetRow } from '../../types';
 import { FlexStack } from '../../layout/flex-stack';
@@ -21,31 +21,24 @@ import css from './asset-info.module.css';
 
 interface ChunkModulesLinkProps {
   as: ElementType;
-  chunks: Array<MetaChunk>;
-  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
@@ -74,17 +67,8 @@ const AssetRunName = (props: AssetRunNameProps) => {
 };
 
 interface AssetInfoProps {
-  item: {
-    label: string;
-    changed?: boolean;
-    isChunk?: boolean;
-    isEntry?: boolean;
-    isInitial?: boolean;
-    isNotPredictive?: boolean;
-    fileType?: string;
-    runs: Array<AssetMetricRun & MetricRunInfo>;
-  };
-  chunks?: Array<MetaChunk>;
+  item: ReportMetricAssetRow;
+  chunks?: Array<WebpackChunk>;
   labels: Array<string>;
   customComponentLink?: ElementType;
   onClose: () => void;
@@ -154,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
@@ -179,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}
           />

package/src/components/bundle-assets/__tests__/add-metric-report-asset-row-data.ts

@@ -41,7 +41,7 @@ describe('BundleAssets / addMetricReportAssetRowData', () => {
     });
   });
 
-  test('should add add data when baseline run is null', () => {
+  test('should add data when baseline run is null', () => {
     expect(
       addMetricReportAssetRowData({
         key: 'assets/main.js',
@@ -83,7 +83,7 @@ describe('BundleAssets / addMetricReportAssetRowData', () => {
     });
   });
 
-  test('should add add data when curent run is null', () => {
+  test('should add data when current run is null', () => {
     expect(
       addMetricReportAssetRowData({
         key: 'assets/main.js',

package/src/components/bundle-assets/bundle-assets.stories.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import {
+  ASSET_ENTRY_TYPE,
+  ASSET_FILE_TYPE,
+  ASSET_FILTERS,
+  FILE_TYPE_JS,
+  createJobs,
+} from '@bundle-stats/utils';
+import merge from 'lodash/merge';
+import set from 'lodash/set';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+/* eslint-disable import/no-relative-packages */
+import baselineStats from '../../../../../fixtures/webpack-stats.baseline.json';
+import currentStats from '../../../../../fixtures/webpack-stats.current.json';
+/* eslint-enable import/no-relative-packages */
+import { getWrapperDecorator } from '../../stories';
+import { BundleAssets } from '.';
+
+const JOBS = createJobs([{ webpack: currentStats }, { webpack: baselineStats }]);
+const [currentJob, baselineJob] = JOBS;
+const setState = (params) => console.info(params);
+
+const meta: Meta<typeof BundleAssets> = {
+  title: 'Components/BundleAssets',
+  component: BundleAssets,
+  decorators: [getWrapperDecorator()],
+  args: {
+    setState: action('STATE'),
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BundleAssets>;
+
+export const Default: Story = {
+  args: {
+    jobs: [baselineJob],
+  },
+};
+
+export const MultipleJobs: Story = {
+  args: {
+    jobs: JOBS,
+  },
+};
+
+export const CustomFilters: Story = {
+  args: {
+    jobs: JOBS,
+    filters: {
+      [`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`]: true,
+      [`${ASSET_FILE_TYPE}.${FILE_TYPE_JS}`]: true,
+    },
+  },
+};
+
+export const EmptyBaseline: Story = {
+  args: {
+    jobs: createJobs([{ webpack: currentStats }, {}]),
+  },
+};
+
+export const NoAssets: Story = {
+  args: {
+    jobs: JOBS.map((job) => set(merge({}, job), 'metrics.webpack.assets', {})),
+  },
+};
+
+export const EmptyFilteredData: Story = {
+  args: {
+    jobs: [
+      set(merge({}, currentJob), 'metrics.webpack.assets', { 'main.js': { value: 100 } }),
+      set(merge({}, baselineJob), 'metrics.webpack.assets', { 'main.js': { value: 100 } }),
+    ],
+    search: 'vendors',
+  },
+};
+
+export const NotPredictive: Story = {
+  args: {
+    jobs: [
+      set(merge({}, currentJob), 'metrics.webpack.assets', {
+        'static/js/not-predictive.js': {
+          name: 'static/js/not-predictive.93191a1.js',
+          value: 2989,
+        },
+      }),
+      set(merge({}, baselineJob), 'metrics.webpack.assets', {
+        'static/js/not-predictive.js': {
+          name: 'static/js/not-predictive.93191a1.js',
+          value: 2988,
+        },
+      }),
+    ],
+  },
+};

package/src/components/bundle-assets/{bundle-assets.jsx → bundle-assets.tsx}

@@ -1,17 +1,11 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import PropTypes from 'prop-types';
+import type { ElementType, ReactNode } from 'react';
+import React, { ComponentProps, useCallback, useMemo, useState } from 'react';
 import cx from 'classnames';
-import get from 'lodash/get';
 import escapeRegExp from 'lodash/escapeRegExp';
-import {
-  ASSET_ENTRY_TYPE,
-  ASSET_FILE_TYPE,
-  ASSET_FILTERS,
-  COMPONENT,
-  FILE_TYPE_LABELS,
-  SECTIONS,
-} from '@bundle-stats/utils';
+import type { Job, ReportMetricRow, WebpackChunk } from '@bundle-stats/utils';
+import { COMPONENT, SECTIONS } from '@bundle-stats/utils';
 
+import type { ReportMetricAssetRow, SortAction } from '../../types';
 import config from '../../config.json';
 import I18N from '../../i18n';
 import { MetricsDisplayType } from '../../constants';
@@ -26,6 +20,7 @@ import { Filters } from '../../ui/filters';
 import { EmptySet } from '../../ui/empty-set';
 import { Toolbar } from '../../ui/toolbar';
 import { AssetInfo } from '../asset-info';
+import { AssetName } from '../asset-name';
 import { ComponentLink } from '../component-link';
 import { MetricsTable } from '../metrics-table';
 import { MetricsTableExport } from '../metrics-table-export';
@@ -35,58 +30,25 @@ 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 { getFilters } from './bundle-assets.utils';
 import css from './bundle-assets.module.css';
-import { AssetName } from '../asset-name';
 
 const DISPLAY_TYPE_GROUPS = {
   [MetricsDisplayType.TREEMAP]: ['folder'],
 };
 
-const getFileTypeFilters = (filters) =>
-  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]: {
-    label: 'Changed',
-    defaultValue: filters[ASSET_FILTERS.CHANGED],
-    disabled: !compareMode,
-  },
-  [ASSET_ENTRY_TYPE]: {
-    label: 'Type',
-    children: [
-      {
-        key: ASSET_FILTERS.ENTRY,
-        label: 'Entry',
-        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`, true),
-      },
-      {
-        key: ASSET_FILTERS.INITIAL,
-        label: 'Initial',
-        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`, true),
-      },
-      {
-        key: ASSET_FILTERS.CHUNK,
-        label: 'Chunk',
-        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`, true),
-      },
-      {
-        key: ASSET_FILTERS.OTHER,
-        label: 'Other',
-        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.OTHER}`, true),
-      },
-    ],
-  },
-  [ASSET_FILE_TYPE]: {
-    label: 'File type',
-    children: getFileTypeFilters(filters),
-  },
-});
+interface ViewMetricsTreemapProps {
+  metricsTableTitle: ReactNode;
+  jobs: Array<Job>;
+  items: Array<ReportMetricAssetRow>;
+  displayType: { value: MetricsDisplayType; groupBy?: string };
+  emptyMessage: ReactNode;
+  showEntryInfo: (entryId: string) => void;
+  updateSearch: (search: string) => void;
+  search: string;
+}
 
-const ViewMetricsTreemap = (props) => {
+const ViewMetricsTreemap = (props: ViewMetricsTreemapProps) => {
   const {
     metricsTableTitle,
     jobs,
@@ -109,7 +71,7 @@ const ViewMetricsTreemap = (props) => {
 
   // Search based on the group path on group title click
   const onGroupClick = useCallback(
-    (groupPath) => {
+    (groupPath: string) => {
       // Clear seach when groupPath is emty (root)
       if (groupPath === '') {
         updateSearch('');
@@ -147,22 +109,29 @@ const ViewMetricsTreemap = (props) => {
   );
 };
 
-ViewMetricsTreemap.propTypes = {
-  jobs: PropTypes.arrayOf(PropTypes.object).isRequired, // eslint-disable-line react/forbid-prop-types
-  items: PropTypes.arrayOf(PropTypes.object).isRequired, // eslint-disable-line react/forbid-prop-types
-  metricsTableTitle: PropTypes.node.isRequired,
-  displayType: PropTypes.shape({
-    groupBy: PropTypes.string,
-  }).isRequired,
-  emptyMessage: PropTypes.node.isRequired,
-  showEntryInfo: PropTypes.func.isRequired,
-  updateSearch: PropTypes.func.isRequired,
-  search: PropTypes.string.isRequired,
-};
+export interface BundleAssetsProps extends ComponentProps<typeof Stack> {
+  jobs: Array<Job>;
+  chunks: Array<WebpackChunk>;
+  items: Array<ReportMetricAssetRow>;
+  allItems: Array<ReportMetricAssetRow>;
+  filters: Record<string, boolean>;
+  updateFilters: (newFilters: Record<string, boolean>) => void;
+  resetFilters: () => void;
+  resetAllFilters: () => void;
+  totalRowCount?: number;
+  entryId?: string;
+  sort: SortAction;
+  updateSort: (params: SortAction) => void;
+  search: string;
+  updateSearch: (search: string) => void;
+  customComponentLink?: ElementType;
+  hideEntryInfo: () => void;
+  showEntryInfo: (entryId: string) => void;
+}
 
-export const BundleAssets = (props) => {
+export const BundleAssets = (props: BundleAssetsProps) => {
   const {
-    className,
+    className = '',
     jobs,
     chunks,
     items,
@@ -170,15 +139,14 @@ export const BundleAssets = (props) => {
     updateFilters,
     resetFilters,
     resetAllFilters,
-    totalRowCount,
+    totalRowCount = 0,
     filters,
-    entryId,
-    hasActiveFilters,
+    entryId = '',
     sort,
     updateSort,
     search,
     updateSearch,
-    customComponentLink: CustomComponentLink,
+    customComponentLink: CustomComponentLink = ComponentLink,
     hideEntryInfo,
     showEntryInfo,
   } = props;
@@ -187,9 +155,9 @@ export const BundleAssets = (props) => {
 
   const [displayType, setDisplayType] = useMetricsDisplayType(DISPLAY_TYPE_GROUPS);
 
-  const dropdownFilters = useMemo(
-    () => getFilters({ compareMode: jobs?.length > 1, filters }),
-    [jobs, filters],
+  const filterFieldsData = useMemo(
+    () => getFilters({ compareMode: jobs?.length > 1, filters, chunks }),
+    [jobs, filters, chunks],
   );
 
   const metricsTableTitle = useMemo(
@@ -205,7 +173,10 @@ export const BundleAssets = (props) => {
   );
 
   const EntryComponentLink = useCallback(
-    ({ entryId: assetEntryId, ...assetNameRestProps }) => (
+    ({
+      entryId: assetEntryId,
+      ...assetNameRestProps
+    }: { entryId: string } & ComponentProps<typeof CustomComponentLink>) => (
       <CustomComponentLink
         section={SECTIONS.ASSETS}
         params={{
@@ -224,8 +195,12 @@ export const BundleAssets = (props) => {
   );
 
   const renderRowHeader = useCallback(
-    (row) => (
-      <AssetName row={row} EntryComponentLink={EntryComponentLink} className={css.assetName} />
+    (row: ReportMetricRow) => (
+      <AssetName
+        row={row as ReportMetricAssetRow}
+        EntryComponentLink={EntryComponentLink}
+        className={css.assetName}
+      />
     ),
     [EntryComponentLink],
   );
@@ -251,12 +226,15 @@ export const BundleAssets = (props) => {
   }, [allItems, entryId]);
 
   const exportDialog = useDialogState();
-  const [exportSourceType, setExportSourceType] = useState(undefined);
+  const [exportSourceType, setExportSourceType] = useState<string>();
 
-  const handleExportClick = useCallback((sourceType) => {
-    setExportSourceType(sourceType);
-    exportDialog.toggle();
-  }, []);
+  const handleExportClick = useCallback(
+    (sourceType: string) => {
+      setExportSourceType(sourceType);
+      exportDialog.toggle();
+    },
+    [exportDialog, setExportSourceType],
+  );
 
   return (
     <>
@@ -287,8 +265,7 @@ export const BundleAssets = (props) => {
             />
             <Filters
               className={css.toolbarFilters}
-              filters={dropdownFilters}
-              hasActiveFilters={hasActiveFilters}
+              filters={filterFieldsData}
               onChange={updateFilters}
             />
           </FlexStack>
@@ -344,62 +321,3 @@ export const BundleAssets = (props) => {
     </>
   );
 };
-
-BundleAssets.defaultProps = {
-  className: '',
-  totalRowCount: 0,
-  hasActiveFilters: false,
-  customComponentLink: ComponentLink,
-  entryId: '',
-};
-
-BundleAssets.propTypes = {
-  className: PropTypes.string,
-  jobs: PropTypes.arrayOf(
-    PropTypes.shape({
-      internalBuildNumber: PropTypes.number,
-      label: PropTypes.string,
-    }),
-  ).isRequired,
-  chunks: PropTypes.arrayOf({
-    id: PropTypes.string,
-    name: PropTypes.string,
-  }).isRequired,
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      key: PropTypes.string,
-      label: PropTypes.string,
-      runs: PropTypes.arrayOf(
-        PropTypes.shape({
-          displayValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-          displayDelta: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-        }),
-      ),
-    }),
-  ).isRequired,
-  updateFilters: PropTypes.func.isRequired,
-  resetFilters: PropTypes.func.isRequired,
-  resetAllFilters: PropTypes.func.isRequired,
-  totalRowCount: PropTypes.number,
-  filters: PropTypes.shape({
-    changed: PropTypes.bool,
-    id: PropTypes.string,
-  }).isRequired,
-  entryId: PropTypes.string,
-  hasActiveFilters: PropTypes.bool,
-  search: PropTypes.string.isRequired,
-  updateSearch: PropTypes.func.isRequired,
-  sort: PropTypes.shape({
-    field: PropTypes.string,
-    direction: PropTypes.string,
-  }).isRequired,
-  updateSort: PropTypes.func.isRequired,
-  allItems: PropTypes.arrayOf(
-    PropTypes.shape({
-      key: PropTypes.string,
-    }),
-  ).isRequired,
-  customComponentLink: PropTypes.elementType,
-  hideEntryInfo: PropTypes.func.isRequired,
-  showEntryInfo: PropTypes.func.isRequired,
-};