[dagit] Middle-truncate asset key path in virtualized list (#10275)

### Summary & Motivation Allow middle truncation on the asset link for virtualized asset tables. ### How I Tested These Changes View asset table for a repository, shrink viewport horizontally, verify middle truncation of long asset names.
dagster-io · Nov 1, 2022 · fc6ea04 · fc6ea04
1 parent 7dd241f
commit fc6ea04
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 27 deletions.
diff --git a/js_modules/dagit/packages/core/src/assets/AssetLink.tsx b/js_modules/dagit/packages/core/src/assets/AssetLink.tsx
@@ -1,4 +1,4 @@
-import {Box, Colors, Icon} from '@dagster-io/ui';
+import {Box, Colors, Icon, MiddleTruncate} from '@dagster-io/ui';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
 
@@ -7,32 +7,33 @@ import {assetDetailsPathForKey} from './assetDetailsPathForKey';
 export const AssetLink: React.FC<{
   path: string[];
   icon?: 'asset' | 'asset_non_sda' | 'folder';
+  textStyle?: 'break-word' | 'middle-truncate';
   url?: string;
   isGroup?: boolean;
-}> = ({path, icon, url, isGroup}) => {
+}> = (props) => {
+  const {path, icon, url, isGroup, textStyle = 'break-word'} = props;
   const linkUrl = url ? url : assetDetailsPathForKey({path});
+  const assetPath =
+    path
+      .reduce((accum, elem, ii) => [...accum, ii > 0 ? ' / ' : '', elem], [] as string[])
+      .join('') + (isGroup ? '/' : '');
 
   return (
-    <Box flex={{direction: 'row', alignItems: 'flex-start', display: 'inline-flex'}}>
+    <Box
+      flex={{direction: 'row', alignItems: 'flex-start', display: 'inline-flex'}}
+      style={{maxWidth: '100%'}}
+    >
       {icon ? (
-        <Box margin={{right: 8, top: 1}}>
+        <Box margin={{right: 8, top: 2}}>
           <Icon name={icon} color={Colors.Gray400} />
         </Box>
       ) : null}
-      <Link to={linkUrl}>
-        <span style={{wordBreak: 'break-word'}}>
-          {path
-            .map((p, i) => <span key={i}>{p}</span>)
-            .reduce(
-              (accum, curr, ii) => [
-                ...accum,
-                ii > 0 ? <React.Fragment key={`${ii}-space`}>&nbsp;/&nbsp;</React.Fragment> : null,
-                curr,
-              ],
-              [] as React.ReactNode[],
-            )}
-          {isGroup ? '/' : null}
-        </span>
+      <Link to={linkUrl} style={{overflow: 'hidden'}}>
+        {textStyle === 'break-word' ? (
+          <span style={{wordBreak: 'break-word'}}>{assetPath}</span>
+        ) : (
+          <MiddleTruncate text={assetPath} />
+        )}
       </Link>
     </Box>
   );

diff --git a/js_modules/dagit/packages/core/src/workspace/VirtualizedAssetTable.tsx b/js_modules/dagit/packages/core/src/workspace/VirtualizedAssetTable.tsx
@@ -181,15 +181,14 @@ const AssetRow = (props: JobRowProps) => {
     <Row $height={height} $start={start}>
       <RowGrid border={{side: 'bottom', width: 1, color: Colors.KeylineGray}}>
         <RowCell>
-          <div
-            style={{
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              fontWeight: 500,
-            }}
-          >
-            <AssetLink path={path} url={linkUrl} isGroup={false} icon="asset" />
+          <div style={{fontWeight: 500, maxWidth: '100%', overflow: 'hidden'}}>
+            <AssetLink
+              path={path}
+              url={linkUrl}
+              isGroup={false}
+              icon="asset"
+              textStyle="middle-truncate"
+            />
           </div>
           <div
             style={{