[ui] add catalog pill for row count (#21867)

## Summary

Adds an asset catalog pill for the special `dagster/row_count` metadata
entry based on designs.

<img width="789" alt="Screenshot 2024-05-15 at 10 01 22 AM"
src="https://github.com/dagster-io/dagster/assets/10215173/bd3f839b-3b2b-4d87-8110-e0e3f068ab32">


## Test Plan

Tested locally.

js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx

@@ -155,6 +155,7 @@ import status from '../icon-svgs/status.svg';
 import sticky_note from '../icon-svgs/sticky_note.svg';
 import sync_alt from '../icon-svgs/sync_alt.svg';
 import sync_problem from '../icon-svgs/sync_problem.svg';
+import table_rows from '../icon-svgs/table_rows.svg';
 import table_view from '../icon-svgs/table_view.svg';
 import tag from '../icon-svgs/tag.svg';
 import timer from '../icon-svgs/timer.svg';
@@ -220,6 +221,7 @@ export const Icons = {
   sensors,
   schedule,
   source_asset,
+  table_rows,
   workspace: source,
   gantt_flat,
   gantt_waterfall,

js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeOverview.tsx

@@ -52,7 +52,9 @@ import {StatusDot} from '../asset-graph/sidebar/StatusDot';
 import {AssetNodeForGraphQueryFragment} from '../asset-graph/types/useAssetGraphData.types';
 import {DagsterTypeSummary} from '../dagstertype/DagsterType';
 import {AssetComputeKindTag} from '../graph/OpTags';
+import {IntMetadataEntry} from '../graphql/types';
 import {useLaunchPadHooks} from '../launchpad/LaunchpadHooksContext';
+import {isCanonicalRowCountMetadataEntry} from '../metadata/MetadataEntry';
 import {TableSchema, TableSchemaAssetContext} from '../metadata/TableSchema';
 import {RepositoryLink} from '../nav/RepositoryLink';
 import {ScheduleOrSensorTag} from '../nav/ScheduleOrSensorTag';
@@ -117,10 +119,14 @@ export const AssetNodeOverview = ({
     definitionLoadTimestamp: assetNodeLoadTimestamp,
   });
 
+  const rowCountMeta: IntMetadataEntry | undefined = materialization?.metadataEntries.find(
+    (entry) => isCanonicalRowCountMetadataEntry(entry),
+  ) as IntMetadataEntry | undefined;
+
   const renderStatusSection = () => (
     <Box flex={{direction: 'column', gap: 16}}>
-      <Box flex={{direction: 'row'}}>
-        <Box flex={{direction: 'column', gap: 6}} style={{width: '50%'}}>
+      <Box style={{display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))'}}>
+        <Box flex={{direction: 'column', gap: 6}}>
           <Subtitle2>Latest {assetNode?.isSource ? 'observation' : 'materialization'}</Subtitle2>
           <Box flex={{gap: 8, alignItems: 'center'}}>
             {liveData ? (
@@ -134,7 +140,7 @@ export const AssetNodeOverview = ({
           </Box>
         </Box>
         {liveData?.assetChecks.length ? (
-          <Box flex={{direction: 'column', gap: 6}} style={{width: '50%'}}>
+          <Box flex={{direction: 'column', gap: 6}}>
             <Subtitle2>Check results</Subtitle2>
             <AssetChecksStatusSummary
               liveData={liveData}
@@ -143,6 +149,14 @@ export const AssetNodeOverview = ({
             />
           </Box>
         ) : undefined}
+        {rowCountMeta ? (
+          <Box flex={{direction: 'column', gap: 6}}>
+            <Subtitle2>Row count</Subtitle2>
+            <Box>
+              <Tag icon="table_rows">{rowCountMeta.intValue}</Tag>
+            </Box>
+          </Box>
+        ) : undefined}
       </Box>
       {assetNode.isPartitioned ? null : (
         <RecentUpdatesTimeline

js_modules/dagster-ui/packages/ui-core/src/metadata/MetadataEntry.tsx

@@ -23,13 +23,12 @@ import {copyValue} from '../app/DomUtils';
 import {assertUnreachable} from '../app/Util';
 import {displayNameForAssetKey} from '../asset-graph/Utils';
 import {assetDetailsPathForKey} from '../assets/assetDetailsPathForKey';
-import {TableMetadataEntry} from '../graphql/types';
+import {IntMetadataEntry, MaterializationEvent, TableMetadataEntry} from '../graphql/types';
 import {TimestampDisplay} from '../schedules/TimestampDisplay';
 import {Markdown} from '../ui/Markdown';
 import {NotebookButton} from '../ui/NotebookButton';
 import {DUNDER_REPO_NAME, buildRepoAddress} from '../workspace/buildRepoAddress';
 import {workspacePathFromAddress} from '../workspace/workspacePath';
-
 const TIME_FORMAT = {showSeconds: true, showTimezone: true};
 export const HIDDEN_METADATA_ENTRY_LABELS = new Set([
   'dagster_dbt/select',
@@ -42,6 +41,16 @@ export const HIDDEN_METADATA_ENTRY_LABELS = new Set([
   'dagster_embedded_elt/sling_replication_config',
 ]);
 
+export type MetadataEntryLabelOnly = Pick<
+  MaterializationEvent['metadataEntries'][0],
+  '__typename' | 'label'
+>;
+
+export const isCanonicalRowCountMetadataEntry = (
+  m: MetadataEntryLabelOnly,
+): m is IntMetadataEntry =>
+  m && m.__typename === 'IntMetadataEntry' && m.label === 'dagster/row_count';
+
 export const LogRowStructuredContentTable = ({
   rows,
   styles,

js_modules/dagster-ui/packages/ui-core/src/metadata/TableSchema.tsx

@@ -12,14 +12,14 @@ import {
 import {Spacing} from '@dagster-io/ui-components/src/components/types';
 import {createContext, useContext, useState} from 'react';
 
+import {MetadataEntryLabelOnly} from './MetadataEntry';
 import {TableSchemaFragment} from './types/TableSchemaFragment.types';
 import {Timestamp} from '../app/time/Timestamp';
 import {StyledTableWithHeader} from '../assets/AssetEventMetadataEntriesTable';
 import {AssetFeatureContext} from '../assets/AssetFeatureContext';
 import {
   AssetKeyInput,
   CodeReferencesMetadataEntry,
-  MaterializationEvent,
   TableColumnLineageMetadataEntry,
   TableSchemaMetadataEntry,
 } from '../graphql/types';
@@ -35,11 +35,6 @@ interface ITableSchemaProps {
   itemHorizontalPadding?: Spacing;
 }
 
-type MetadataEntryLabelOnly = Pick<
-  MaterializationEvent['metadataEntries'][0],
-  '__typename' | 'label'
->;
-
 export const isCanonicalColumnSchemaEntry = (
   m: MetadataEntryLabelOnly,
 ): m is TableSchemaMetadataEntry =>