@bundle-stats/ui 4.17.0-beta.3 → 4.17.0-beta.5

package/src/components/bundle-modules/bundle-modules.tsx

@@ -1,3 +1,4 @@
+import type { ComponentProps, ElementType } from 'react';
 import React, { useCallback, useMemo, useState } from 'react';
 import cx from 'classnames';
 import { SECTIONS, COMPONENT, type Job, ReportMetricRow } from '@bundle-stats/utils';
@@ -42,35 +43,21 @@ const DISPLAY_TYPE_GROUPS = {
 
 interface RowHeaderProps {
   row: ReportMetricRow;
-  filters?: any;
-  search?: string;
-  moduleMetric?: string;
-  customComponentLink: React.ElementType;
+  EntryComponentLink: ElementType;
 }
 
 const RowHeader = (props: RowHeaderProps) => {
-  const { row, filters, search, moduleMetric, customComponentLink: CustomComponentLink } = props;
+  const { row, EntryComponentLink } = props;
 
   const moduleRow = row as ReportMetricModuleRow;
 
   return (
-    <CustomComponentLink
-      section={SECTIONS.MODULES}
-      params={{
-        [COMPONENT.BUNDLE_MODULES]: {
-          filters,
-          search,
-          entryId: moduleRow.key,
-          metric: moduleMetric,
-        },
-      }}
-      className={css.name}
-    >
+    <EntryComponentLink entryId={row.key} className={css.name}>
       {moduleRow.duplicated && (
         <Tag className={css.nameTagDuplicated} size="small" kind={Tag.KINDS.DANGER} />
       )}
       <FileName className={css.nameText} name={moduleRow.label} />
-    </CustomComponentLink>
+    </EntryComponentLink>
   );
 };
 
@@ -209,6 +196,28 @@ export const BundleModules = (props: BundleModulesProps) => {
     [jobs, filters, chunks],
   );
 
+  const EntryComponentLink = useCallback(
+    ({
+      entryId: moduleEntryId,
+      ...moduleNameRestProps
+    }: { entryId: string } & ComponentProps<typeof CustomComponentLink>) => (
+      <CustomComponentLink
+        section={SECTIONS.MODULES}
+        params={{
+          [COMPONENT.BUNDLE_MODULES]: {
+            filters,
+            search,
+            entryId: moduleEntryId,
+            sortBy: sort.field,
+            direction: sort.direction,
+          },
+        }}
+        {...moduleNameRestProps}
+      />
+    ),
+    [CustomComponentLink, filters, search, sort],
+  );
+
   const metricsTableTitle = useMemo(
     () => (
       <MetricsTableTitle
@@ -222,16 +231,8 @@ export const BundleModules = (props: BundleModulesProps) => {
   );
 
   const renderRowHeader = useCallback(
-    (row: ReportMetricRow) => (
-      <RowHeader
-        row={row}
-        filters={filters}
-        search={search}
-        moduleMetric={moduleMetric}
-        customComponentLink={CustomComponentLink}
-      />
-    ),
-    [jobs, chunks, CustomComponentLink, filters, search, moduleMetric],
+    (row: ReportMetricRow) => <RowHeader row={row} EntryComponentLink={EntryComponentLink} />,
+    [EntryComponentLink],
   );
 
   const emptyMessage = useMemo(

package/src/components/bundle-modules/index.tsx

@@ -125,6 +125,7 @@ export const BundleModules = (props: BundleModulesProps) => {
     initialField: sortBy,
     initialDirection: direction,
     getCustomSort,
+    setQueryState: setState,
   });
 
   const [hideEntryInfo, showEntryInfo] = useEntryInfo({ setState });

package/src/components/bundle-packages/bundle-packages.jsx

@@ -46,17 +46,9 @@ const getDropdownFilters = ({ compareMode, filters }) => ({
   },
 });
 
-const PackageName = ({ packageName, showDetails, row, filters, search, CustomComponentLink }) => {
-  const params = useMemo(() => ({
-    [COMPONENT.BUNDLE_PACKAGES]: {
-      filters,
-      search,
-      entryId: showDetails ? row.key : packageName
-    }
-  }), [filters, search, row, packageName]);
-
+const PackageName = ({ row, packageName, showDetails, EntryComponentLink }) => {
   return (
-    <CustomComponentLink section={SECTIONS.PACKAGES} params={params} className={css.packageName}>
+    <EntryComponentLink entryId={showDetails ? row.key : packageName} className={css.packageName}>
       {showDetails && row.duplicate && (
         <Tag
           className={css.packageNameTagDuplicate}
@@ -66,14 +58,13 @@ const PackageName = ({ packageName, showDetails, row, filters, search, CustomCom
         />
       )}
       <span className={css.packageNameLabel}>{packageName}</span>
-    </CustomComponentLink>
+    </EntryComponentLink>
   );
 };
 
 PackageName.propTypes = {
-  packageName: PropTypes.string.isRequired,
-  showDetails: PropTypes.bool.isRequired,
   row: PropTypes.shape({
+    key: PropTypes.string,
     label: PropTypes.string,
     duplicate: PropTypes.bool,
     runs: PropTypes.arrayOf(
@@ -82,12 +73,12 @@ PackageName.propTypes = {
       }),
     ).isRequired,
   }).isRequired,
-  CustomComponentLink: PropTypes.elementType.isRequired,
-  filters: PropTypes.object, // eslint-disable-line react/forbid-props
-  search: PropTypes.string,
+  packageName: PropTypes.string.isRequired,
+  showDetails: PropTypes.bool.isRequired,
+  EntryComponentLink: PropTypes.elementType.isRequired,
 };
 
-const RowHeader = ({ row, labels, CustomComponentLink, filters, search }) => {
+const RowHeader = ({ row, EntryComponentLink }) => {
   const packageNames = row.label.split(PACKAGES_SEPARATOR);
 
   return (
@@ -96,11 +87,8 @@ const RowHeader = ({ row, labels, CustomComponentLink, filters, search }) => {
         <PackageName
           packageName={packageName}
           row={row}
-          labels={labels}
           showDetails={index === packageNames.length - 1}
-          CustomComponentLink={CustomComponentLink}
-          filters={filters}
-          search={search}
+          EntryComponentLink={EntryComponentLink}
         />
       ))}
     </span>
@@ -117,13 +105,20 @@ RowHeader.propTypes = {
       }),
     ).isRequired,
   }).isRequired,
-  CustomComponentLink: PropTypes.elementType.isRequired,
-  filters: PropTypes.object, // eslint-disable-line react/forbid-props
-  search: PropTypes.string,
+  EntryComponentLink: PropTypes.elementType.isRequired,
 };
 
 const ViewMetricsTreemap = (props) => {
-  const { metricsTableTitle, jobs, items, displayType, emptyMessage, showEntryInfo, updateSearch, search } = props;
+  const {
+    metricsTableTitle,
+    jobs,
+    items,
+    displayType,
+    emptyMessage,
+    showEntryInfo,
+    updateSearch,
+    search,
+  } = props;
 
   // Get treenodes based on group
   const treeNodes = useMemo(() => {
@@ -230,17 +225,28 @@ export const BundlePackages = (props) => {
     [items, totalRowCount],
   );
 
-  const renderRowHeader = useCallback(
-    (row) => (
-      <RowHeader
-        row={row}
-        labels={jobLabels}
-        CustomComponentLink={CustomComponentLink}
-        filters={filters}
-        search={search}
+  const PackageNameCustomComponentLink = useCallback(
+    ({ entryId: packageEntryId, ...assetNameRestProps }) => (
+      <CustomComponentLink
+        section={SECTIONS.PACKAGES}
+        params={{
+          [COMPONENT.BUNDLE_PACKAGES]: {
+            filters,
+            search,
+            entryId: packageEntryId,
+            sortBy: sort.field,
+            direction: sort.direction,
+          },
+        }}
+        {...assetNameRestProps}
       />
     ),
-    [CustomComponentLink, jobLabels, filters, search],
+    [CustomComponentLink, filters, search, sort],
+  );
+
+  const renderRowHeader = useCallback(
+    (row) => <RowHeader row={row} EntryComponentLink={PackageNameCustomComponentLink} />,
+    [PackageNameCustomComponentLink],
   );
 
   const emptyMessage = useMemo(
@@ -260,7 +266,7 @@ export const BundlePackages = (props) => {
       return null;
     }
 
-    return allItems.find(({ key }) => key === entryId)
+    return allItems.find(({ key }) => key === entryId);
   }, [allItems, entryId]);
 
   const exportDialog = useDialogState();
@@ -278,7 +284,12 @@ export const BundlePackages = (props) => {
           className={css.toolbar}
           renderActions={({ actionClassName }) => (
             <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
-              <MetricsDisplaySelector onSelect={setDisplayType} value={displayType.value} groupBy={displayType.groupBy} groups={DISPLAY_TYPE_GROUPS} />
+              <MetricsDisplaySelector
+                onSelect={setDisplayType}
+                value={displayType.value}
+                groupBy={displayType.groupBy}
+                groups={DISPLAY_TYPE_GROUPS}
+              />
               <MetricsTableOptions
                 onViewAllClick={resetAllFilters}
                 onResetClick={resetFilters}
@@ -388,15 +399,17 @@ BundlePackages.propTypes = {
   }).isRequired,
   hasActiveFilters: PropTypes.bool,
   sort: PropTypes.shape({
-    sortBy: PropTypes.string,
+    field: PropTypes.string,
     direction: PropTypes.string,
   }).isRequired,
   updateSort: PropTypes.func.isRequired,
   search: PropTypes.string.isRequired,
   updateSearch: PropTypes.func.isRequired,
-  allItems: PropTypes.arrayOf(PropTypes.shape({
-    key: PropTypes.string,
-  })).isRequired,
+  allItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string,
+    }),
+  ).isRequired,
   customComponentLink: PropTypes.elementType,
   entryId: PropTypes.string,
   hideEntryInfo: PropTypes.func.isRequired,

package/src/components/bundle-packages/index.jsx

@@ -58,6 +58,7 @@ export const BundlePackages = (props) => {
     initialField: sortBy,
     initialDirection: direction,
     getCustomSort,
+    setQueryState: setState,
   });
 
   const [hideEntryInfo, showEntryInfo] = useEntryInfo({ setState });

package/src/hooks/rows-sort.ts

@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useCallback } from 'react';
 import get from 'lodash/get';
 import orderBy from 'lodash/orderBy';
 
@@ -20,6 +20,10 @@ interface UseRowsSortParams<TRow> {
   initialField?: string;
   initialDirection?: SortAction['direction'];
   getCustomSort: (item: any) => Array<string | number | boolean>;
+  setQueryState: (queryParams: {
+    sortBy: SortAction['field'];
+    direction: SortAction['direction'];
+  }) => void;
 }
 
 interface UseRowsSort<TRow> {
@@ -33,8 +37,19 @@ export const useRowsSort = <TRow>({
   initialField = 'runs[0].delta',
   initialDirection = 'desc',
   getCustomSort,
+  setQueryState,
 }: UseRowsSortParams<TRow>): UseRowsSort<TRow> => {
-  const [sort, updateSort] = useState({ field: initialField, direction: initialDirection });
+  const [sort, setSort] = useState({ field: initialField, direction: initialDirection });
+
+  const updateSort = useCallback(
+    (newState: SortAction) => {
+      // 1. Update local state
+      setSort(newState);
+      // 2. Update query state params
+      setQueryState({ sortBy: newState.field, direction: newState.direction });
+    },
+    [setQueryState, setSort],
+  );
 
   const orderedRows = useMemo(
     () =>

package/types/components/asset-name/asset-name.d.ts

@@ -3,6 +3,6 @@ import type { ReportMetricAssetRow } from '../../types';
 export type AssetNameProps = {
     className?: string;
     row: ReportMetricAssetRow;
-    customComponentLink: ElementType;
+    EntryComponentLink: ElementType;
 };
 export declare const AssetName: (props: AssetNameProps) => React.JSX.Element;

package/types/components/bundle-assets/bundle-assets.d.ts

@@ -39,7 +39,7 @@ export namespace BundleAssets {
         export let search: PropTypes.Validator<string>;
         export let updateSearch: PropTypes.Validator<(...args: any[]) => any>;
         export let sort: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
-            sortBy: PropTypes.Requireable<string>;
+            field: PropTypes.Requireable<string>;
             direction: PropTypes.Requireable<string>;
         }>>>;
         export let updateSort: PropTypes.Validator<(...args: any[]) => any>;

package/types/components/bundle-packages/bundle-packages.d.ts

@@ -32,7 +32,7 @@ export namespace BundlePackages {
         let hasActiveFilters_1: PropTypes.Requireable<boolean>;
         export { hasActiveFilters_1 as hasActiveFilters };
         export let sort: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
-            sortBy: PropTypes.Requireable<string>;
+            field: PropTypes.Requireable<string>;
             direction: PropTypes.Requireable<string>;
         }>>>;
         export let updateSort: PropTypes.Validator<(...args: any[]) => any>;

package/types/hooks/rows-sort.d.ts

@@ -5,11 +5,15 @@ interface UseRowsSortParams<TRow> {
     initialField?: string;
     initialDirection?: SortAction['direction'];
     getCustomSort: (item: any) => Array<string | number | boolean>;
+    setQueryState: (queryParams: {
+        sortBy: SortAction['field'];
+        direction: SortAction['direction'];
+    }) => void;
 }
 interface UseRowsSort<TRow> {
     items: Array<TRow>;
     sort: SortAction;
     updateSort: (params: SortAction) => void;
 }
-export declare const useRowsSort: <TRow>({ rows, initialField, initialDirection, getCustomSort, }: UseRowsSortParams<TRow>) => UseRowsSort<TRow>;
+export declare const useRowsSort: <TRow>({ rows, initialField, initialDirection, getCustomSort, setQueryState, }: UseRowsSortParams<TRow>) => UseRowsSort<TRow>;
 export {};