feat(ui): AssetInfo - display run tags

relative-ci · Nov 5, 2024 · 0b97d48 · 0b97d48
1 parent 30d9a3b
commit 0b97d48
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 8 deletions.
diff --git a/packages/ui/src/components/asset-info/asset-info.module.css b/packages/ui/src/components/asset-info/asset-info.module.css
@@ -29,3 +29,12 @@
   content: ' ';
 }
 
+.runNameTags {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--space-xxxsmall) / 2);
+}
+
+.runNameTags:empty {
+  display: block;
+}
diff --git a/packages/ui/src/components/asset-info/asset-info.tsx b/packages/ui/src/components/asset-info/asset-info.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import cx from 'classnames';
 import noop from 'lodash/noop';
 import {
@@ -16,6 +16,9 @@ import { AssetMetaTag } from '../asset-meta-tag';
 import { ComponentLink } from '../component-link';
 import { EntryInfo, EntryInfoMetaLink } from '../entry-info';
 import css from './asset-info.module.css';
+import { AssetName } from '../asset-name/asset-name';
+import { FileName } from '../../ui';
+import { ReportMetricAssetRow } from '../../types';
 
 interface ChunkModulesLinkProps {
   as: React.ElementType;
@@ -131,6 +134,24 @@ export const AssetInfo = (props: AssetInfoProps & React.ComponentProps<'div'>) =
     );
   }, [item]);
 
+  const RunName = useCallback(
+    (runNameProps: { children: React.ReactNode; run: ReportMetricAssetRow }) => {
+      const { run, children } = runNameProps;
+
+      return (
+        <>
+          <span className={css.runNameTags}>
+            {run.isEntry && <AssetMetaTag tag="entry" title="Entry" size="small" />}
+            {run.isInitial && <AssetMetaTag tag="initial" title="Initial" size="small" />}
+            {run.isChunk && <AssetMetaTag tag="chunk" title="Chunk" size="small" />}
+          </span>
+          {children}
+        </>
+      );
+    },
+    [],
+  );
+
   const fileTypeLabel = FILE_TYPE_LABELS[item.fileType as keyof typeof FILE_TYPE_LABELS];
 
   return (
@@ -139,6 +160,7 @@ export const AssetInfo = (props: AssetInfoProps & React.ComponentProps<'div'>) =
       labels={labels}
       tags={tags}
       onClose={onClose}
+      RunName={RunName}
       className={cx(css.root, className)}
     >
       {item.fileType && (

diff --git a/packages/ui/src/components/entry-info/entry-info.tsx b/packages/ui/src/components/entry-info/entry-info.tsx
@@ -2,7 +2,7 @@ import type { ElementType, ReactNode } from 'react';
 import React from 'react';
 import cx from 'classnames';
 import { Portal } from 'ariakit/portal';
-import type { MetricRunInfo, ReportMetricRow } from '@bundle-stats/utils';
+import type { MetricRunInfo, ReportMetricRow, ReportMetricRun } from '@bundle-stats/utils';
 import { METRIC_TYPE_CONFIGS, getMetricRunInfo } from '@bundle-stats/utils';
 
 import { Box } from '../../layout/box';
@@ -72,6 +72,12 @@ function defaultRenderRunInfo(item: ReportMetricRow) {
   );
 }
 
+export type RenderRunNameProps<T extends ReportMetricRun = ReportMetricRun> = {
+  className?: string;
+  run: T;
+  runSelector: string;
+};
+
 interface EntryInfoProps {
   itemTitle?: React.ReactNode;
   item: ReportMetricRow;
@@ -82,6 +88,7 @@ interface EntryInfoProps {
   tags?: React.ReactNode;
   onClose: () => void;
   renderRunInfo?: (item: ReportMetricRow) => React.ReactNode;
+  RunName?: React.ElementType;
 }
 
 export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) => {
@@ -93,10 +100,11 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
     runNameSelector = 'name',
     runNameLabel = I18N.PATH,
     runSizeLabel = I18N.SIZE,
-    children,
     tags = null,
     onClose,
     renderRunInfo = defaultRenderRunInfo,
+    RunName = React.Fragment,
+    children,
   } = props;
 
   return (
@@ -146,11 +154,13 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
                     <Table.Td className={cx(css.runsCell, css.runsColName)}>
                       {rowRun?.[runNameSelector] ? (
                         <FlexStack space="xxxsmall" alignItems="center" className={css.label}>
-                          <FileName
-                            as="code"
-                            name={rowRun[runNameSelector]}
-                            className={css.fileName}
-                          />
+                          <RunName run={rowRun} nameSelector={runNameSelector}>
+                            <FileName
+                              as="code"
+                              name={rowRun[runNameSelector]}
+                              className={className}
+                            />
+                          </RunName>
                           <CopyToClipboard text={item.label} size="small" />
                         </FlexStack>
                       ) : (