Merge pull request #3545 from relative-ci/metrics-table-sort

Metrics table sort

packages/ui/src/assets/icons.svg.jsx

@@ -9,7 +9,6 @@ export const SvgIcons = (props) => (
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-arrow-down"
       id="arrow"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -21,22 +20,44 @@ export const SvgIcons = (props) => (
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-arrow-right-circle"
       viewBox="0 0 24 24"
       id="arrow-right-circle"
       xmlns="http://www.w3.org/2000/svg"
     >
       <circle cx="12" cy="12" r="10" />
       <path d="M12 16l4-4-4-4M8 12h8" />
     </symbol>
+    <symbol
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      viewBox="0 0 24 24"
+      id="chevron-down"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M6 9l6 6 6-6" />
+    </symbol>
+    <symbol
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      viewBox="0 0 24 24"
+      id="chevron-up"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M18 15l-6-6-6 6" />
+    </symbol>
     <symbol
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-clock"
       id="clock"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -49,7 +70,6 @@ export const SvgIcons = (props) => (
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-x-circle"
       viewBox="0 0 24 24"
       id="close"
       xmlns="http://www.w3.org/2000/svg"
@@ -64,7 +84,6 @@ export const SvgIcons = (props) => (
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-git-commit"
       id="commit"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -90,7 +109,6 @@ export const SvgIcons = (props) => (
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-external-link"
       viewBox="0 0 24 24"
       id="external-link"
       xmlns="http://www.w3.org/2000/svg"
@@ -104,7 +122,6 @@ export const SvgIcons = (props) => (
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-bar-chart"
       id="filter"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -125,7 +142,6 @@ export const SvgIcons = (props) => (
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-help-circle"
       id="help"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -152,7 +168,6 @@ export const SvgIcons = (props) => (
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-menu"
       id="menu"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -183,7 +198,6 @@ export const SvgIcons = (props) => (
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-alert-triangle"
       id="warning"
       xmlns="http://www.w3.org/2000/svg"
     >

packages/ui/src/components/bundle-assets/bundle-assets.jsx

@@ -19,7 +19,6 @@ import { FileName } from '../../ui/file-name';
 import { HoverCard } from '../../ui/hover-card';
 import { Tag } from '../../ui/tag';
 import { Filters } from '../../ui/filters';
-import { SortDropdown } from '../../ui/sort-dropdown';
 import { EmptySet } from '../../ui/empty-set';
 import { Toolbar } from '../../ui/toolbar';
 import { AssetInfo } from '../asset-info';
@@ -170,7 +169,6 @@ export const BundleAssets = (props) => {
     filters,
     entryId,
     hasActiveFilters,
-    sortFields,
     sort,
     updateSort,
     search,
@@ -221,7 +219,6 @@ export const BundleAssets = (props) => {
           className={css.toolbar}
           renderActions={({ actionClassName }) => (
             <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
-              <SortDropdown fields={sortFields} {...sort} onChange={updateSort} />
               <MetricsTableOptions
                 handleViewAll={resetAllFilters}
                 handleResetFilters={resetFilters}
@@ -252,6 +249,8 @@ export const BundleAssets = (props) => {
             emptyMessage={emptyMessage}
             showHeaderSum
             title={metricsTableTitle}
+            sort={sort}
+            updateSort={updateSort}
           />
         </main>
       </section>
@@ -313,12 +312,6 @@ BundleAssets.propTypes = {
   }).isRequired,
   entryId: PropTypes.string,
   hasActiveFilters: PropTypes.bool,
-  sortFields: PropTypes.shape({
-    [PropTypes.string]: PropTypes.shape({
-      label: PropTypes.string,
-      defaultDirection: PropTypes.bool,
-    }),
-  }).isRequired,
   search: PropTypes.string.isRequired,
   updateSearch: PropTypes.func.isRequired,
   sort: PropTypes.shape({

packages/ui/src/components/bundle-assets/bundle-assets.utils.js

@@ -1,7 +1,5 @@
 import { ASSET_ENTRY_TYPE, ASSET_FILE_TYPE, ASSET_FILTERS, getFileType } from '@bundle-stats/utils';
 
-import { SORT_BY_NAME, SORT_BY_DELTA, SORT_BY_SIZE } from './bundle-assets.constants';
-
 export const addRowAssetFlags = (row) => {
   const { runs } = row;
 
@@ -72,25 +70,11 @@ export const getRowFilter = (filters) => (item) => {
   return true;
 };
 
-export const getCustomSort = (sortId) => (item) => {
-  if (sortId === SORT_BY_NAME) {
-    return item.key;
-  }
-
-  if (sortId === SORT_BY_DELTA) {
-    return item?.runs?.[0]?.delta ? Math.abs(item.runs[0].delta) : 0;
-  }
-
-  if (sortId === SORT_BY_SIZE) {
-    return item?.runs?.[0]?.value || 0;
-  }
-
-  return [
-    !item.isNotPredictive,
-    !item.changed,
-    !item.isInitial,
-    !item.isEntry,
-    !item.isChunk,
-    item.key,
-  ];
-};
+export const getCustomSort = (item) => [
+  !item.isNotPredictive,
+  !item.changed,
+  !item.isInitial,
+  !item.isEntry,
+  !item.isChunk,
+  item.key,
+];

packages/ui/src/components/bundle-assets/index.jsx

@@ -12,7 +12,6 @@ import { useRowsSort } from '../../hooks/rows-sort';
 import { useSearchParams } from '../../hooks/search-params';
 import { BundleAssets as BundleAssetsComponent } from './bundle-assets';
 import { addRowAssetFlags, addRowIsNotPredictive, getRowFilter, getCustomSort } from './bundle-assets.utils';
-import { SORT_BY } from './bundle-assets.constants';
 
 export const BundleAssets = (props) => {
   const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
@@ -55,7 +54,6 @@ export const BundleAssets = (props) => {
 
   const sortParams = useRowsSort({
     rows: filteredRows,
-    sortFields: SORT_BY,
     sortBy,
     sortDirection: direction,
     getCustomSort,

packages/ui/src/components/bundle-modules/bundle-modules.jsx

@@ -21,7 +21,6 @@ import { FlexStack } from '../../layout/flex-stack';
 import { EmptySet } from '../../ui/empty-set';
 import { FileName } from '../../ui/file-name';
 import { Filters } from '../../ui/filters';
-import { SortDropdown } from '../../ui/sort-dropdown';
 import { Tag } from '../../ui/tag';
 import { Toolbar } from '../../ui/toolbar';
 import { MetricsTable } from '../metrics-table';
@@ -125,7 +124,6 @@ export const BundleModules = ({
   resetAllFilters,
   filters,
   entryId,
-  sortFields,
   sort,
   updateSort,
   search,
@@ -179,12 +177,6 @@ export const BundleModules = ({
           className={css.toolbar}
           renderActions={({ actionClassName }) => (
             <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
-              <SortDropdown
-                className={css.tableDropdown}
-                fields={sortFields}
-                onChange={updateSort}
-                {...sort}
-              />
               <MetricsTableOptions
                 handleViewAll={resetAllFilters}
                 handleResetFilters={resetFilters}
@@ -216,6 +208,8 @@ export const BundleModules = ({
           emptyMessage={emptyMessage}
           showHeaderSum
           title={metricsTableTitle}
+          sort={sort}
+          updateSort={updateSort}
         />
       </div>
       {entryId && (
@@ -277,12 +271,6 @@ BundleModules.propTypes = {
 
   hasActiveFilters: PropTypes.bool,
 
-  sortFields: PropTypes.shape({
-    [PropTypes.string]: PropTypes.shape({
-      label: PropTypes.string,
-      defaultDirection: PropTypes.bool,
-    }),
-  }).isRequired,
   sort: PropTypes.shape({
     sortBy: PropTypes.string,
     direction: PropTypes.string,