Merge pull request #4274 from relative-ci/fix-bundle-modules-total-size

Fix bundle module total size view

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

@@ -5,14 +5,17 @@ import { SECTIONS, COMPONENT } from '@bundle-stats/utils';
 import type { SortAction } from '../../types';
 import config from '../../config.json';
 import I18N from '../../i18n';
-import { ComponentLink } from '../component-link';
+import { Box } from '../../layout/box';
 import { FlexStack } from '../../layout/flex-stack';
-import { InputSearch } from '../../ui/input-search';
+import { Button } from '../../ui/button';
 import { EmptySet } from '../../ui/empty-set';
 import { FileName } from '../../ui/file-name';
 import { Filters } from '../../ui/filters';
+import { InputSearch } from '../../ui/input-search';
 import { Tag } from '../../ui/tag';
 import { Toolbar } from '../../ui/toolbar';
+import { Tooltip } from '../../ui/tooltip';
+import { ComponentLink } from '../component-link';
 import { MetricsTable } from '../metrics-table';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
@@ -22,9 +25,6 @@ import { ModuleMetric } from './bundle-modules.constants';
 import type { Chunk, Job, ReportMetricModuleRow } from './bundle-modules.types';
 import * as I18N_MODULES from './bundle-modules.i18n';
 import css from './bundle-modules.module.css';
-import { Box } from '../../layout';
-import { Button } from '../../ui';
-import { Tooltip } from '../../ui/tooltip';
 
 interface RowHeaderProps {
   row: ReportMetricModuleRow;
@@ -185,7 +185,7 @@ export const BundleModules = (props: BundleModulesProps) => {
           <FlexStack space="xxsmall" as="nav">
             <Button
               outline
-              kind={moduleMetric === ModuleMetric.SIZE ? 'primary' : 'default'}
+              active={moduleMetric === ModuleMetric.SIZE}
               size="small"
               type="button"
               onClick={() => setModuleMetric(ModuleMetric.SIZE)}
@@ -194,7 +194,7 @@ export const BundleModules = (props: BundleModulesProps) => {
             </Button>
             <Button
               outline
-              kind={moduleMetric === ModuleMetric.TOTAL_SIZE ? 'primary' : 'default'}
+              active={moduleMetric === ModuleMetric.TOTAL_SIZE}
               size="small"
               type="button"
               onClick={() => setModuleMetric(ModuleMetric.TOTAL_SIZE)}

packages/ui/src/components/bundle-modules/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 // @ts-ignore
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 
@@ -17,6 +17,33 @@ import {
 import { ModuleMetric } from './bundle-modules.constants';
 import * as types from './bundle-modules.types';
 
+interface UseMetricParams {
+  metric?: string;
+  setState: ({ metric }: { metric: ModuleMetric }) => void;
+}
+
+function useModuleMetric(params: UseMetricParams): [ModuleMetric, (value: ModuleMetric) => void] {
+  const { metric, setState } = params;
+
+  const moduleMetric: ModuleMetric = useMemo(() => {
+    if (Object.values(ModuleMetric).includes(metric as ModuleMetric)) {
+      return metric as ModuleMetric;
+    }
+    return ModuleMetric.SIZE;
+  }, [metric]);
+
+  const setModuleMetric = useCallback(
+    (newModuleMetric: ModuleMetric) => {
+      if (newModuleMetric !== metric) {
+        setState({ metric: newModuleMetric });
+      }
+    },
+    [metric, setState],
+  );
+
+  return useMemo(() => [moduleMetric, setModuleMetric], [moduleMetric, setModuleMetric]);
+}
+
 interface BundleModulesProps
   extends Omit<
     React.ComponentProps<typeof BaseComponent>,
@@ -31,23 +58,23 @@ interface BundleModulesProps
     | 'updateSort'
     | 'search'
     | 'updateSearch'
-    | 'entryId'
     | 'allItems'
     | 'totalRowCount'
     | 'hideEntryInfo'
   > {
   jobs: Array<types.Job>;
   filters: Record<string, boolean>;
   search?: string;
+  metric?: string;
   setState: (params: any) => void;
   sortBy?: string;
   direction?: SortAction['direction'];
 }
 
 export const BundleModules = (props: BundleModulesProps) => {
-  const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
+  const { jobs, filters, search, setState, sortBy, direction, metric = '', ...restProps } = props;
 
-  const [moduleMetric, setModuleMetric] = useState<ModuleMetric>(ModuleMetric.SIZE);
+  const [moduleMetric, setModuleMetric] = useModuleMetric({ metric, setState });
 
   const { chunks, chunkIds } = useMemo(() => extractChunkData(jobs), [jobs]);
 

packages/utils/src/utils/component-links.ts

@@ -35,6 +35,7 @@ export type ComponentLinkFilters = Record<string, boolean>;
 export interface ComponentLinkParams {
   search?: string;
   entryId?: string;
+  metric?: string;
   filters?: ComponentLinkFilters;
 }
 
@@ -410,6 +411,7 @@ export const ComponentStateParam: QueryParamConfig<any, any> = {
 
     const search = StringParam.encode(sectionState.search);
     const entryId = StringParam.encode(sectionState.entryId);
+    const metric = StringParam.encode(sectionState.metric);
 
     const filtersEncodedValues: Record<string, string> = {};
     Object.entries(sectionState.filters || {}).forEach(([key, val]) => {
@@ -427,6 +429,10 @@ export const ComponentStateParam: QueryParamConfig<any, any> = {
       data.entryId = entryId;
     }
 
+    if (metric) {
+      data.metric = metric;
+    }
+
     if (!isEmpty(filters)) {
       data.filters = filters;
     }
@@ -442,6 +448,7 @@ export const ComponentStateParam: QueryParamConfig<any, any> = {
 
     const search = StringParam.decode(params.search);
     const entryId = StringParam.decode(params.entryId);
+    const metric = StringParam.decode(params.metric);
 
     let filters: Record<string, boolean> = {};
 
@@ -474,6 +481,10 @@ export const ComponentStateParam: QueryParamConfig<any, any> = {
       result.entryId = entryId;
     }
 
+    if (metric) {
+      result.metric = metric;
+    }
+
     if (!isEmpty(filters)) {
       result.filters = filters;
     }