Merge pull request #4767 from relative-ci/improve-metrics-table-export

Improve metrics table export
relative-ci · Oct 9, 2024 · 3179af7 · 3179af7
2 parents af787f2 + 996cd2e
commit 3179af7
Show file tree

Hide file tree

Showing 15 changed files with 157 additions and 101 deletions.
diff --git a/packages/ui/src/components/bundle-assets-totals/bundle-assets-totals.jsx b/packages/ui/src/components/bundle-assets-totals/bundle-assets-totals.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import {
@@ -73,8 +73,10 @@ export const BundleAssetsTotals = ({
   );
 
   const exportDialog = useDialogState();
+  const [exportSourceType, setExportSourceType] = useState(undefined);
 
-  const handleExportClick = useCallback(() => {
+  const handleExportClick = useCallback((sourceType) => {
+    setExportSourceType(sourceType);
     exportDialog.toggle();
   }, []);
 
@@ -120,7 +122,13 @@ export const BundleAssetsTotals = ({
       </Stack>
 
       <Dialog title={I18N.EXPORT} width="wide" state={exportDialog}>
-        {exportDialog.open && <MetricsTableExport items={items} download="bundle-stats--totals" />}
+        {exportDialog.open && (
+          <MetricsTableExport
+            items={items}
+            initialSourceType={exportSourceType}
+            download="bundle-stats--totals"
+          />
+        )}
       </Dialog>
     </>
   );

diff --git a/packages/ui/src/components/bundle-assets/bundle-assets.jsx b/packages/ui/src/components/bundle-assets/bundle-assets.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import get from 'lodash/get';
@@ -316,8 +316,10 @@ export const BundleAssets = (props) => {
   }, [allItems, entryId]);
 
   const exportDialog = useDialogState();
+  const [exportSourceType, setExportSourceType] = useState(undefined);
 
-  const handleExportClick = useCallback(() => {
+  const handleExportClick = useCallback((sourceType) => {
+    setExportSourceType(sourceType);
     exportDialog.toggle();
   }, []);
 
@@ -396,7 +398,13 @@ export const BundleAssets = (props) => {
       )}
 
       <Dialog title={I18N.EXPORT} width="wide" state={exportDialog}>
-        {exportDialog.open && <MetricsTableExport items={items} download="bundle-stats--assets" />}
+        {exportDialog.open && (
+          <MetricsTableExport
+            items={items}
+            initialSourceType={exportSourceType}
+            download="bundle-stats--assets"
+          />
+        )}
       </Dialog>
     </>
   );

diff --git a/packages/ui/src/components/bundle-modules/bundle-modules.tsx b/packages/ui/src/components/bundle-modules/bundle-modules.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import cx from 'classnames';
 import { SECTIONS, COMPONENT, type Job, ReportMetricRow } from '@bundle-stats/utils';
 import escapeRegExp from 'lodash/escapeRegExp';
@@ -255,8 +255,10 @@ export const BundleModules = (props: BundleModulesProps) => {
   }, [allItems, entryId]);
 
   const exportDialog = useDialogState();
+  const [exportSourceType, setExportSourceType] = useState<string | undefined>(undefined);
 
-  const handleExportClick = useCallback(() => {
+  const handleExportClick = useCallback((sourceType: string) => {
+    setExportSourceType(sourceType);
     exportDialog.toggle();
   }, []);
 
@@ -374,7 +376,13 @@ export const BundleModules = (props: BundleModulesProps) => {
       )}
 
       <Dialog title={I18N.EXPORT} width="wide" state={exportDialog}>
-        {exportDialog.open && <MetricsTableExport items={items} download="bundle-stats--modules"/>}
+        {exportDialog.open && (
+          <MetricsTableExport
+            items={items}
+            initialSourceType={exportSourceType}
+            download="bundle-stats--modules"
+          />
+        )}
       </Dialog>
     </>
   );

diff --git a/packages/ui/src/components/bundle-packages/bundle-packages.jsx b/packages/ui/src/components/bundle-packages/bundle-packages.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import escapeRegExp from 'lodash/escapeRegExp';
@@ -264,8 +264,10 @@ export const BundlePackages = (props) => {
   }, [allItems, entryId]);
 
   const exportDialog = useDialogState();
+  const [exportSourceType, setExportSourceType] = useState(undefined);
 
-  const handleExportClick = useCallback(() => {
+  const handleExportClick = useCallback((sourceType) => {
+    setExportSourceType(sourceType);
     exportDialog.toggle();
   }, []);
 
@@ -338,7 +340,13 @@ export const BundlePackages = (props) => {
       )}
 
       <Dialog title={I18N.EXPORT} width="wide" state={exportDialog}>
-        {exportDialog.open && <MetricsTableExport items={items} download="bundle-stats--packages"/>}
+        {exportDialog.open && (
+          <MetricsTableExport
+            items={items}
+            initialSourceType={exportSourceType}
+            download="bundle-stats--packages"
+          />
+        )}
       </Dialog>
     </>
   );

diff --git a/packages/ui/src/components/metrics-table-export/metrics-table-export.tsx b/packages/ui/src/components/metrics-table-export/metrics-table-export.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import type { ReportMetricRow } from '@bundle-stats/utils';
 
 import { Stack } from '../../layout/stack';
-import { Tabs } from '../../ui/tabs';
+import { Tabs, TabItem } from '../../ui/tabs';
 import { PreviewSource } from '../preview-source';
 
 const generateSourceJSON = (items: Array<ReportMetricRow>): string => {
@@ -49,49 +49,58 @@ const generateSourceCSV = (items: Array<ReportMetricRow>): string => {
   return output.join('\r');
 };
 
-const SOURCES = [
-  {
+const SOURCES = {
+  csv: {
     label: 'CSV',
     transformFn: generateSourceCSV,
-    extension: 'csv',
+    extension: '.csv',
   },
-  {
+  json: {
     label: 'JSON',
     transformFn: generateSourceJSON,
-    extension: 'json',
+    extension: '.json',
   },
-];
+};
+
+const SOURCE_ENTRIES = Object.entries(SOURCES);
+const SOURCE_KEYS = Object.keys(SOURCES);
 
 type MetricsTableExportProps = {
   items: Array<ReportMetricRow>;
+  initialSourceType?: string;
   download: string;
 } & ComponentProps<typeof Stack>;
 
 export const MetricsTableExport = (props: MetricsTableExportProps) => {
-  const { items, download, ...restProps } = props;
-  const [selectedId, setSelectedId] = useState(SOURCES[0].label);
+  const { initialSourceType = SOURCE_KEYS[0], items, download, ...restProps } = props;
+  const [selectedSourceType, setSelectedSourceType] = useState(initialSourceType);
 
   return (
     <Stack space="small" {...restProps}>
       <Tabs>
-        {SOURCES.map((source) => (
-          <Tabs.Item
-            onClick={() => setSelectedId(source.label)}
-            isTabActive={selectedId === source.label}
-            key={source.label}
+        {SOURCE_ENTRIES.map(([sourceId, source]) => (
+          <TabItem
+            onClick={() => setSelectedSourceType(sourceId)}
+            isTabActive={selectedSourceType === sourceId}
+            id={`metrics-table-export-tab-${sourceId}`}
+            aria-controls={`metrics-table-export-panel-${sourceId}`}
+            key={sourceId}
           >
             {source.label}
-          </Tabs.Item>
+          </TabItem>
         ))}
       </Tabs>
       <div>
-        {SOURCES.map(
-          (source) =>
-            selectedId === source.label && (
+        {SOURCE_ENTRIES.map(
+          ([sourceId, source]) =>
+            selectedSourceType === sourceId && (
               <PreviewSource
                 source={source.transformFn(items)}
                 rows={20}
-                download={`${download}.${source.extension}`}
+                download={`${download}${source.extension}`}
+                role="tabpanel"
+                id={`metrics-table-export-panel-${sourceId}`}
+                aria-labelledby={`metrics-table-export-tab-${sourceId}`}
                 key={source.label}
               />
           ),

diff --git a/packages/ui/src/components/metrics-table-options/metrics-table-options.module.css b/packages/ui/src/components/metrics-table-options/metrics-table-options.module.css
@@ -0,0 +1,5 @@
+.group + .group {
+  margin-top: calc(var(--space-xxxsmall) / 2);
+  padding-top: calc(var(--space-xxxsmall) / 2);
+  border-top: 1px solid var(--color-outline);
+}
diff --git a/packages/ui/src/components/metrics-table-options/metrics-table-options.tsx b/packages/ui/src/components/metrics-table-options/metrics-table-options.tsx
@@ -3,23 +3,31 @@ import React from 'react';
 
 import I18N from '../../i18n';
 import { Dropdown, DropdownItem } from '../../ui/dropdown';
-import { Separator } from '../../layout/separator';
+import css from './metrics-table-options.module.css';
 
 type MetricsTableOptionsProps = {
   onViewAllClick?: () => void;
   onResetClick?: () => void;
-  onExportClick?: () => void;
+  onExportClick?: (sourceType: string) => void;
 } & ComponentProps<typeof Dropdown>;
 
 export const MetricsTableOptions = (props: MetricsTableOptionsProps) => {
   const { onViewAllClick, onResetClick, onExportClick, ...restProps } = props;
 
   return (
     <Dropdown glyph="more-vertical" {...restProps}>
-      {onResetClick && <DropdownItem onClick={onResetClick}>{I18N.RESET_FILTERS}</DropdownItem>}
-      {onViewAllClick && <DropdownItem onClick={onViewAllClick}>{I18N.VIEW_ALL}</DropdownItem>}
-      {((onResetClick || onViewAllClick) && onExportClick) && <Separator />}
-      {onExportClick && <DropdownItem onClick={onExportClick}>{I18N.EXPORT}</DropdownItem>}
+      <div className={css.group}>
+        {onResetClick && <DropdownItem onClick={onResetClick}>{I18N.RESET_FILTERS}</DropdownItem>}
+        {onViewAllClick && <DropdownItem onClick={onViewAllClick}>{I18N.VIEW_ALL}</DropdownItem>}
+      </div>
+      <div className={css.group}>
+        {onExportClick && (
+          <>
+            <DropdownItem onClick={() => onExportClick('csv')}>{I18N.EXPORT_CSV}</DropdownItem>
+            <DropdownItem onClick={() => onExportClick('json')}>{I18N.EXPORT_JSON}</DropdownItem>
+          </>
+        )}
+      </div>
     </Dropdown>
   );
 };
diff --git a/packages/ui/src/i18n.js b/packages/ui/src/i18n.js
@@ -22,6 +22,8 @@ export default {
   RESET_FILTERS: 'Reset filters',
   VIEW_ALL: 'View all entries',
   EXPORT: 'Export',
+  EXPORT_CSV: 'Export CSV',
+  EXPORT_JSON: 'Export JSON',
 
   COPY_TO_CLIPBOARD: 'Copy to clipboard',
   COPY_TO_CLIPBOARD_DONE: 'Copied to clipboard',

diff --git a/packages/ui/src/ui/tabs/index.js b/packages/ui/src/ui/tabs/index.js
diff --git a/packages/ui/src/ui/tabs/index.ts b/packages/ui/src/ui/tabs/index.ts
@@ -0,0 +1 @@
+export * from './tabs';
diff --git a/packages/ui/src/ui/tabs/tabs.jsx b/packages/ui/src/ui/tabs/tabs.jsx
diff --git a/packages/ui/src/ui/tabs/tabs.module.css b/packages/ui/src/ui/tabs/tabs.module.css
@@ -4,13 +4,16 @@
 }
 
 .item {
+  appearance: none;
+  background: none;
+  border: 0;
   position: relative;
   display: inline-block;
   padding: var(--space-xsmall) var(--space-small);
   color: var(--color-text-ultra-light);
   font-weight: bold;
   text-decoration: none;
-  cursor: default;
+  transition: var(--ui-transition-out);
 }
 
 .item::after {
@@ -27,8 +30,9 @@
 .item:hover,
 .item:active,
 .item:focus {
-  color: var(--color-primary-dark);
+  color: var(--color-primary);
   outline: none;
+  transition: var(--ui-transition-out);
 }
 
 .item:hover::after,
@@ -44,7 +48,3 @@
 .itemActive::after {
   background: currentColor;
 }
-
-.item + .item {
-  _margin-left: var(--space-medium);
-}
diff --git a/packages/ui/src/ui/tabs/tabs.stories.jsx b/packages/ui/src/ui/tabs/tabs.stories.jsx
diff --git a/packages/ui/src/ui/tabs/tabs.stories.tsx b/packages/ui/src/ui/tabs/tabs.stories.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Tabs, TabItem } from '.';
+
+const meta: Meta<typeof Tabs> = {
+  title: 'UI/Tabs',
+  component: Tabs,
+  decorators: [getWrapperDecorator()],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Tabs>
+      <TabItem isTabActive>Option A</TabItem>
+      <TabItem>Option B</TabItem>
+      <TabItem>Option C</TabItem>
+    </Tabs>
+  ),
+};