feat(ui): add freight contents to stage node tooltip (#2212)

Signed-off-by: Remington Breeze <[email protected]>
akuity · Jun 28, 2024 · c6ddffa · c6ddffa
1 parent 71e20f0
commit c6ddffa
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 13 deletions.
diff --git a/ui/src/features/common/freight-label.tsx b/ui/src/features/common/freight-label.tsx
@@ -7,16 +7,20 @@ import { useEffect, useState } from 'react';
 
 import { Freight } from '@ui/gen/v1alpha1/generated_pb';
 
+import { FreightContents } from '../freightline/freight-contents';
+
 import { getAlias } from './utils';
 
 export const FreightLabel = ({
   freight,
   showTimestamp,
-  breakOnHyphen
+  breakOnHyphen,
+  showContents
 }: {
   freight?: Freight;
   showTimestamp?: boolean;
   breakOnHyphen?: boolean;
+  showContents?: boolean;
 }) => {
   const [copied, setCopied] = useState<boolean>(false);
 
@@ -50,15 +54,18 @@ export const FreightLabel = ({
   return (
     <div
       className='cursor-pointer font-mono font-semibold min-w-0 w-full'
-      onClick={() => {
+      onClick={(e) => {
         if (alias || id) {
+          e.preventDefault();
+          e.stopPropagation();
           navigator.clipboard.writeText(alias || id || '');
           setCopied(true);
         }
       }}
     >
       {alias || id ? (
         <Tooltip
+          overlayStyle={{ maxWidth: '320px' }}
           placement='right'
           title={
             <>
@@ -78,6 +85,16 @@ export const FreightLabel = ({
                   </div>
                 </Info>
               )}
+              {showContents && (
+                <div className='mt-2'>
+                  <FreightContents
+                    freight={freight}
+                    horizontal={true}
+                    highlighted={false}
+                    dark={true}
+                  />
+                </div>
+              )}
             </>
           }
         >

diff --git a/ui/src/features/freightline/freight-contents.tsx b/ui/src/features/freightline/freight-contents.tsx
@@ -13,9 +13,10 @@ export const FreightContents = (props: {
   freight?: Freight;
   highlighted: boolean;
   horizontal?: boolean;
+  dark?: boolean;
 }) => {
-  const { freight, highlighted, horizontal } = props;
-  const linkClass = `${highlighted ? 'text-blue-600' : 'text-gray-400'} hover:text-blue-500 underline hover:underline max-w-full`;
+  const { freight, highlighted, horizontal, dark } = props;
+  const linkClass = `${highlighted ? 'text-blue-600' : 'text-gray-400'} hover:text-blue-500 underline hover:underline max-w-full min-w-0 flex-shrink`;
 
   const FreightContentItem = (props: {
     icon: IconDefinition;
@@ -25,13 +26,12 @@ export const FreightContents = (props: {
     children?: string;
   }) => (
     <Tooltip
-      className={classNames(
-        'min-w-0 flex items-center justify-center my-1 bg-neutral-300 rounded',
-        {
-          'flex-col p-1 w-full': !horizontal,
-          'mr-2 p-2 max-w-60 flex-shrink': horizontal
-        }
-      )}
+      className={classNames('min-w-0 flex items-center justify-center my-1 rounded', {
+        'flex-col p-1 w-full': !horizontal,
+        'mr-2 p-2 max-w-60 flex-shrink': horizontal,
+        'bg-black text-white': dark,
+        'bg-neutral-300': !dark
+      })}
       overlay={props.overlay}
       title={props.title}
     >
@@ -55,7 +55,7 @@ export const FreightContents = (props: {
   return (
     <div
       className={classNames(
-        'flex justify-start items-center font-mono text-xs flex-shrink max-h-full max-w-full',
+        'flex justify-start items-center font-mono text-xs flex-shrink max-h-full max-w-full flex-wrap',
         {
           'text-gray-700 hover:text-gray-800': highlighted,
           'text-gray-400 hover:text-gray-500': !highlighted,

diff --git a/ui/src/features/project/pipelines/nodes/stage-node.tsx b/ui/src/features/project/pipelines/nodes/stage-node.tsx
@@ -117,7 +117,7 @@ export const StageNode = ({
           ) : (
             <div className='text-sm h-full flex flex-col items-center justify-center -mt-1'>
               <div className={styles.freightLabel}>CURRENT FREIGHT</div>
-              <FreightLabel freight={currentFreight} showTimestamp={true} />
+              <FreightLabel freight={currentFreight} showTimestamp={true} showContents={true} />
             </div>
           )}
         </div>