Use MiddleTruncate component on Asset detail page (#16961)

## Summary & Motivation - Middle truncate partition names in the partition list - Middle truncate partition names in the partition selection dialog ## How I Tested These Changes <img width="910" alt="Screenshot 2023-10-02 at 3 17 58 PM" src="https://github.com/dagster-io/dagster/assets/2286579/3972ae82-a7f0-4174-bcba-e53e88e779c7"> <img width="253" alt="Screenshot 2023-10-02 at 3 16 21 PM" src="https://github.com/dagster-io/dagster/assets/2286579/d20bd758-06c2-413d-96c9-3b4304d3310b"> <img width="1170" alt="Screenshot 2023-10-02 at 3 16 18 PM" src="https://github.com/dagster-io/dagster/assets/2286579/90769e17-c69d-47a6-8d1c-dcf4ea233666">
dagster-io · Oct 2, 2023 · f4d1ed8 · f4d1ed8 · github-actions · Oct 2, 2023
1 parent afca0ca
commit f4d1ed8
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 14 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/TagSelector.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/TagSelector.tsx
@@ -7,6 +7,7 @@ import {Checkbox} from './Checkbox';
 import {Colors} from './Colors';
 import {Icon} from './Icon';
 import {MenuItem, Menu} from './Menu';
+import {MiddleTruncate} from './MiddleTruncate';
 import {Popover} from './Popover';
 import {Tag} from './Tag';
 import {TextInput, TextInputStyles} from './TextInput';
@@ -47,12 +48,23 @@ type Props = {
 const defaultRenderTag = (tag: string, tagProps: TagSelectorTagProps) => {
   return (
     <Tag key={tag}>
-      <Box flex={{direction: 'row', gap: 4, justifyContent: 'space-between', alignItems: 'center'}}>
-        <span>{tag}</span>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '1fr auto',
+          gap: 4,
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          maxWidth: '120px',
+        }}
+        data-tooltip={tag}
+        data-tooltip-style={DefaultTagTooltipStyle}
+      >
+        <MiddleTruncate text={tag} />
         <Box style={{cursor: 'pointer'}} onClick={tagProps.remove}>
           <Icon name="close" />
         </Box>
-      </Box>
+      </div>
     </Tag>
   );
 };
@@ -284,3 +296,9 @@ export const TagSelectorWithSearch = (
     />
   );
 };
+
+const DefaultTagTooltipStyle = JSON.stringify({
+  background: Colors.Gray100,
+  border: `1px solid ${Colors.Gray200}`,
+  color: Colors.Dark,
+});
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPartitionDetail.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPartitionDetail.tsx
@@ -6,6 +6,7 @@ import {
   Group,
   Heading,
   Icon,
+  MiddleTruncate,
   Mono,
   Spinner,
   Subheading,
@@ -199,8 +200,19 @@ export const AssetPartitionDetail: React.FC<{
     <Box padding={{horizontal: 24, bottom: 24}} style={{flex: 1}}>
       <Box padding={{vertical: 24}} border="bottom" flex={{alignItems: 'center'}}>
         {partition ? (
-          <Box flex={{gap: 12, alignItems: 'center'}}>
-            <Heading>{partition}</Heading>
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: 'minmax(0, 1fr) auto',
+              gap: 12,
+              alignItems: 'center',
+            }}
+            data-tooltip={partition}
+            data-tooltip-style={PartitionHeadingTooltipStyle}
+          >
+            <Heading>
+              <MiddleTruncate text={partition} />
+            </Heading>
             {hasLoadingState ? (
               <Spinner purpose="body-text" />
             ) : latest ? (
@@ -213,7 +225,7 @@ export const AssetPartitionDetail: React.FC<{
                 include="all"
               />
             ) : undefined}
-          </Box>
+          </div>
         ) : (
           <Heading color={Colors.Gray400}>No partition selected</Heading>
         )}
@@ -336,3 +348,11 @@ export const AssetPartitionDetailEmpty = ({partitionKey}: {partitionKey?: string
     hasLoadingState
   />
 );
+
+const PartitionHeadingTooltipStyle = JSON.stringify({
+  background: Colors.Gray100,
+  border: `1px solid ${Colors.Gray200}`,
+  fontSize: '18px',
+  fontWeight: '600',
+  color: Colors.Dark,
+});
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPartitionList.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPartitionList.tsx
@@ -1,4 +1,4 @@
-import {Box} from '@dagster-io/ui-components';
+import {Box, Colors, MiddleTruncate} from '@dagster-io/ui-components';
 import {useVirtualizer} from '@tanstack/react-virtual';
 import * as React from 'react';
 
@@ -85,9 +85,17 @@ export const AssetPartitionList: React.FC<AssetPartitionListProps> = ({
                 flex={{direction: 'column', justifyContent: 'center', gap: 8}}
                 border="bottom"
               >
-                <Box flex={{gap: 4, direction: 'row', alignItems: 'center'}}>
-                  {dimensionKey}
-                  <div style={{flex: 1}} />
+                <div
+                  style={{
+                    gap: 4,
+                    display: 'grid',
+                    gridTemplateColumns: 'minmax(0, 1fr) auto',
+                    alignItems: 'center',
+                  }}
+                  data-tooltip={dimensionKey}
+                  data-tooltip-style={PartitionTooltipStyle}
+                >
+                  <MiddleTruncate text={dimensionKey} />
                   {/* Note: we could just state.map, but we want these in a particular order*/}
                   {state.includes(AssetPartitionStatus.MISSING) && (
                     <AssetPartitionStatusDot status={[AssetPartitionStatus.MISSING]} />
@@ -101,7 +109,7 @@ export const AssetPartitionList: React.FC<AssetPartitionListProps> = ({
                   {state.includes(AssetPartitionStatus.MATERIALIZED) && (
                     <AssetPartitionStatusDot status={[AssetPartitionStatus.MATERIALIZED]} />
                   )}
-                </Box>
+                </div>
               </Box>
             </AssetListRow>
           );
@@ -122,3 +130,12 @@ export const AssetPartitionStatusDot = ({status}: {status: AssetPartitionStatus[
     }}
   />
 );
+
+const PartitionTooltipStyle = JSON.stringify({
+  background: Colors.Gray100,
+  border: `1px solid ${Colors.Gray200}`,
+  color: Colors.Dark,
+  fontSize: '14px',
+  top: 0,
+  left: 0,
+});
diff --git a/js_modules/dagster-ui/packages/ui-core/src/partitions/DimensionRangeWizard.tsx b/js_modules/dagster-ui/packages/ui-core/src/partitions/DimensionRangeWizard.tsx
@@ -10,6 +10,7 @@ import {
   MenuItem,
   TagSelectorWithSearch,
   TagSelectorDropdownItemProps,
+  MiddleTruncate,
 } from '@dagster-io/ui-components';
 import * as React from 'react';
 import styled from 'styled-components';
@@ -171,14 +172,23 @@ const OrdinalPartitionSelector: React.FC<{
                 <MenuItem
                   tagName="div"
                   text={
-                    <Box flex={{alignItems: 'center', gap: 12}}>
+                    <div
+                      style={{
+                        display: 'grid',
+                        gridTemplateColumns: 'auto auto minmax(0, 1fr)',
+                        alignItems: 'center',
+                        gap: 12,
+                      }}
+                    >
                       <Checkbox
                         checked={dropdownItemProps.selected}
                         onChange={dropdownItemProps.toggle}
                       />
                       {dotForPartitionKey(tag)}
-                      <span>{tag}</span>
-                    </Box>
+                      <div data-tooltip={tag} data-tooltip-style={DropdownItemTooltipStyle}>
+                        <MiddleTruncate text={tag} />
+                      </div>
+                    </div>
                   }
                 />
               </label>
@@ -274,3 +284,10 @@ const LinkText = styled(Box)`
     line-height: 24px;
   }
 `;
+
+const DropdownItemTooltipStyle = JSON.stringify({
+  background: Colors.Gray100,
+  border: `1px solid ${Colors.Gray200}`,
+  color: Colors.Dark,
+  fontSize: '14px',
+});