fix(ui): BundleAssets/Modules/Packages - do not clear sort params whe…

…n openning entry side info
relative-ci · Nov 7, 2024 · 80a7c7c · 80a7c7c
1 parent a7a7ff2
commit 80a7c7c
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 82 deletions.
diff --git a/packages/ui/src/components/asset-name/asset-name.tsx b/packages/ui/src/components/asset-name/asset-name.tsx
@@ -16,11 +16,11 @@ const RUNS_LABELS = [RUN_TITLE_CURRENT, RUN_TITLE_BASELINE];
 export type AssetNameProps = {
   className?: string;
   row: ReportMetricAssetRow;
-  customComponentLink: ElementType;
+  EntryComponentLink: ElementType;
 };
 
 export const AssetName = (props: AssetNameProps) => {
-  const { className = '', customComponentLink: CustomComponentLink, row } = props;
+  const { className = '', EntryComponentLink, row } = props;
   const { label, isNotPredictive, runs, isChunk, isEntry, isInitial } = row;
 
   return (
@@ -35,7 +35,7 @@ export const AssetName = (props: AssetNameProps) => {
         </HoverCard>
       )}
 
-      <CustomComponentLink entryId={row.key} className={css.name}>
+      <EntryComponentLink entryId={row.key} className={css.name}>
         <span className={css.metaTags}>
           {isEntry && (
             <AssetMetaTag className={css.metaTag} title="Entrypoint" tag="entry" status={isEntry} />
@@ -53,7 +53,7 @@ export const AssetName = (props: AssetNameProps) => {
           )}
         </span>
         <FileName className={css.nameText} name={label} />
-      </CustomComponentLink>
+      </EntryComponentLink>
     </span>
   );
 };
diff --git a/packages/ui/src/components/bundle-assets/bundle-assets.jsx b/packages/ui/src/components/bundle-assets/bundle-assets.jsx
@@ -204,26 +204,30 @@ export const BundleAssets = (props) => {
     [items, totalRowCount],
   );
 
-  const assetNameCustomComponentLink = useCallback(
+  const EntryComponentLink = useCallback(
     ({ entryId: assetEntryId, ...assetNameRestProps }) => (
       <CustomComponentLink
         section={SECTIONS.ASSETS}
-        params={{ [COMPONENT.BUNDLE_ASSETS]: { filters, search, entryId: assetEntryId } }}
+        params={{
+          [COMPONENT.BUNDLE_ASSETS]: {
+            filters,
+            search,
+            entryId: assetEntryId,
+            sortBy: sort.field,
+            direction: sort.direction,
+          },
+        }}
         {...assetNameRestProps}
       />
     ),
-    [CustomComponentLink, filters, search],
+    [CustomComponentLink, filters, search, sort],
   );
 
   const renderRowHeader = useCallback(
     (row) => (
-      <AssetName
-        row={row}
-        customComponentLink={assetNameCustomComponentLink}
-        className={css.assetName}
-      />
+      <AssetName row={row} EntryComponentLink={EntryComponentLink} className={css.assetName} />
     ),
-    [CustomComponentLink, filters, search],
+    [EntryComponentLink],
   );
 
   const emptyMessage = useMemo(
@@ -386,7 +390,7 @@ BundleAssets.propTypes = {
   search: PropTypes.string.isRequired,
   updateSearch: PropTypes.func.isRequired,
   sort: PropTypes.shape({
-    sortBy: PropTypes.string,
+    field: PropTypes.string,
     direction: PropTypes.string,
   }).isRequired,
   updateSort: PropTypes.func.isRequired,

diff --git a/packages/ui/src/components/bundle-modules/bundle-modules.tsx b/packages/ui/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(

diff --git a/packages/ui/src/components/bundle-packages/bundle-packages.jsx b/packages/ui/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,