Component style tweaks for

js_modules/dagster-ui/packages/ui-core/src/assets/catalog/AssetSelectionSummaryListItemV2.tsx

@@ -0,0 +1,125 @@
+import {
+  BodySmall,
+  Box,
+  Colors,
+  HorizontalControls,
+  ListItem,
+  MiddleTruncate,
+} from '@dagster-io/ui-components';
+import React, {useMemo} from 'react';
+import {Link} from 'react-router-dom';
+
+import {useSelectionHealthData} from './useSelectionHealthData';
+import {ViewType, getHealthStatuses, getThreadId, useAssetHealthStatuses} from './util';
+import {InsightsIcon, InsightsIconType} from '../../insights/InsightsIcon';
+import {numberFormatter} from '../../ui/formatters';
+import {AssetTableFragment} from '../types/AssetTableFragment.types';
+
+export const AssetSelectionSummaryListItemFromSelection = React.memo(
+  ({index, item}: {index: number; item: Extract<ViewType, {__typename: 'CatalogView'}>}) => {
+    const {liveDataByNode, assetCount, loading} = useSelectionHealthData({
+      selection: item.selection.querySelection ?? '',
+    });
+    useMemo(
+      () => getHealthStatuses({liveDataByNode, loading, assetCount}),
+      [liveDataByNode, loading, assetCount],
+    );
+    return (
+      <AssetSelectionSummaryListItemWithHealthStatus
+        index={index}
+        icon={<InsightsIcon name={item.icon as InsightsIconType} size={16} />}
+        label={item.name}
+        link={item.link}
+        loading={loading}
+        assetCount={assetCount}
+      />
+    );
+  },
+);
+
+interface AssetSelectionSummaryListItemProps {
+  index: number;
+  assets: AssetTableFragment[];
+  icon: React.ReactNode;
+  label: string;
+  link: string;
+  loading?: boolean;
+}
+
+export const AssetSelectionSummaryListItem = React.memo(
+  ({
+    index,
+    assets,
+    icon,
+    label,
+    link,
+    loading: assetsLoading,
+  }: AssetSelectionSummaryListItemProps) => {
+    const {loading} = useAssetHealthStatuses({
+      assets,
+      threadId: useMemo(() => getThreadId(), []),
+      loading: assetsLoading,
+    });
+
+    return (
+      <AssetSelectionSummaryListItemWithHealthStatus
+        index={index}
+        icon={icon}
+        label={label}
+        link={link}
+        assetCount={assets.length}
+        loading={loading}
+      />
+    );
+  },
+);
+
+export const AssetSelectionSummaryListItemWithHealthStatus = React.memo(
+  ({
+    icon,
+    label,
+    link,
+    assetCount,
+    index,
+  }: {
+    icon: React.ReactNode;
+    label: string;
+    link: string;
+    loading?: boolean;
+    assetCount: number;
+    index: number;
+  }) => {
+    return (
+      <ListItem
+        href={link}
+        index={index}
+        renderLink={({href, ...rest}) => <Link to={href || '#'} {...rest} />}
+        padding={{horizontal: 16, vertical: 12}}
+        left={
+          <Box flex={{direction: 'row', alignItems: 'center', gap: 8}} className="row-icon">
+            {icon}
+            <MiddleTruncate text={label} />
+          </Box>
+        }
+        right={
+          <HorizontalControls
+            controls={[
+              {
+                key: 'count',
+                control: (
+                  <Box padding={{left: 4}}>
+                    <BodySmall color={Colors.textLight()}>
+                      {assetCount === 1
+                        ? '1 asset'
+                        : `${numberFormatter.format(assetCount)} assets`}
+                    </BodySmall>
+                  </Box>
+                ),
+              },
+            ]}
+          />
+        }
+      />
+    );
+  },
+);

js_modules/dagster-ui/packages/ui-core/src/assets/catalog/AssetSelectionSummaryTile.module.css

@@ -61,6 +61,8 @@
   display: flex;
   align-items: center;
   gap: 6px;
+  color: var(--color-text-light);
+  font-size: 12px;
 }
 
 .statusCounts {

js_modules/dagster-ui/packages/ui-core/src/assets/catalog/AssetSelectionSummaryTile.tsx

@@ -11,6 +11,7 @@ import {JobTileQuery, JobTileQueryVariables} from './types/JobTileQuery.types';
 import {useSelectionHealthData} from './useSelectionHealthData';
 import {RunStatusIndicator} from '../../runs/RunStatusDots';
 import {TimeFromNow} from '../../ui/TimeFromNow';
+import {numberFormatter} from '../../ui/formatters';
 import {RepoAddress} from '../../workspace/types';
 import {workspacePathFromAddress} from '../../workspace/workspacePath';
 import {AssetTableFragment} from '../types/AssetTableFragment.types';
@@ -66,7 +67,7 @@ export const AssetSelectionSummaryTile = React.memo(
     loading?: boolean;
     threadId?: string;
   }) => {
-    const {jsx, loading} = useAssetHealthStatuses({
+    const {loading} = useAssetHealthStatuses({
       assets,
       threadId: useMemo(() => getThreadId(), []),
       loading: _assetsLoading,
@@ -76,9 +77,9 @@ export const AssetSelectionSummaryTile = React.memo(
       <AssetSelectionSummaryTileWithHealthStatus
         icon={icon}
         label={label}
-        statusJsx={jsx}
         link={link}
         loading={loading}
+        assets={assets}
       />
     );
   },
@@ -91,20 +92,21 @@ const AssetSelectionSummaryTileWithHealthStatus = React.memo(
     statusJsx,
     link,
     loading,
+    assets,
   }: {
     icon: React.ReactNode;
     label: string;
-    statusJsx: React.ReactNode;
+    statusJsx?: React.ReactNode;
     link: string;
     loading?: boolean;
+    assets?: AssetTableFragment[];
   }) => {
     return (
       <Link to={link} className={styles.tileLink}>
         <Box
           border="all"
           style={{
             minWidth: TILE_WIDTH,
-            minHeight: TILE_HEIGHT,
           }}
           className={clsx(styles.tile, loading && styles.tileLoading)}
         >
@@ -114,7 +116,11 @@ const AssetSelectionSummaryTileWithHealthStatus = React.memo(
               <MiddleTruncate text={label} />
             </div>
           </div>
-          <div className={styles.footer}>{statusJsx}</div>
+          {statusJsx ? (
+            <div className={styles.footer}>{statusJsx}</div>
+          ) : assets ? (
+            <div className={styles.assetCount}>{numberFormatter.format(assets.length)} assets</div>
+          ) : null}
         </Box>
       </Link>
     );
@@ -152,7 +158,6 @@ export const JobTile = ({name, repoAddress}: {name: string; repoAddress: RepoAdd
         border="all"
         style={{
           minWidth: TILE_WIDTH,
-          minHeight: TILE_HEIGHT,
         }}
         className={styles.tile}
       >