fix(ui): Better display of long labels (#1983)

Signed-off-by: Remington Breeze <[email protected]>

ui/src/features/common/freight-label.tsx

@@ -1,16 +1,23 @@
 import { faBoxOpen, faCheck, faClipboard } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from 'antd';
-import { formatDistance } from 'date-fns';
+import { format, formatDistance } from 'date-fns';
 import { useEffect, useState } from 'react';
 
 import { Freight } from '@ui/gen/v1alpha1/generated_pb';
 
 import { getAlias } from './utils';
+import classNames from 'classnames';
 
-export const FreightLabel = ({ freight }: { freight?: Freight }) => {
-  const [id, setId] = useState<string | undefined>();
-  const [alias, setAlias] = useState<string | undefined>();
+export const FreightLabel = ({
+  freight,
+  showTimestamp,
+  breakOnHyphen
+}: {
+  freight?: Freight;
+  showTimestamp?: boolean;
+  breakOnHyphen?: boolean;
+}) => {
   const [copied, setCopied] = useState<boolean>(false);
 
   useEffect(() => {
@@ -20,14 +27,29 @@ export const FreightLabel = ({ freight }: { freight?: Freight }) => {
     }
   }, [copied]);
 
-  useEffect(() => {
-    setAlias(getAlias(freight));
-    setId(freight?.metadata?.name?.substring(0, 7));
-  }, [freight]);
+  const id = freight?.metadata?.name?.substring(0, 7);
+  const alias = getAlias(freight);
+  const aliasLabel =
+    Number(alias?.length || 0) > 9 // 9 chars is the max length which will fit on one line
+      ? alias?.split('-').map((s, i) => (
+          <div className='truncate'>
+            {s}
+            {i === 0 && '-'}
+          </div>
+        ))
+      : alias;
+
+  const humanReadable = formatDistance(
+    freight?.metadata?.creationTimestamp?.toDate() || 0,
+    new Date(),
+    {
+      addSuffix: true
+    }
+  );
 
   return (
     <div
-      className='truncate cursor-pointer font-mono font-semibold'
+      className='cursor-pointer font-mono font-semibold min-w-0 w-full'
       onClick={() => {
         if (alias || id) {
           navigator.clipboard.writeText(alias || id || '');
@@ -51,16 +73,23 @@ export const FreightLabel = ({ freight }: { freight?: Freight }) => {
               {freight?.metadata?.creationTimestamp && (
                 <Info title='Created'>
                   <div className='text-right'>
-                    {formatDistance(freight?.metadata?.creationTimestamp?.toDate(), new Date(), {
-                      addSuffix: true
-                    })}
+                    {format(freight?.metadata?.creationTimestamp.toDate(), 'MMM do yyyy HH:mm:ss')}
+                    <br />({humanReadable})
                   </div>
                 </Info>
               )}
             </>
           }
         >
-          <div className='hover:text-gray-600'>{alias || id}</div>
+          <div
+            className={classNames('hover:text-gray-600 w-full', {
+              'h-8 flex justify-center items-end': breakOnHyphen
+            })}
+            style={{ padding: '0 3px' }}
+          >
+            <div className='truncate'>{(breakOnHyphen ? aliasLabel : alias) || id}</div>
+            {showTimestamp && <div className='text-xs text-gray-400 mt-1'>{humanReadable}</div>}
+          </div>
         </Tooltip>
       ) : (
         <div className='flex items-center'>

ui/src/features/freightline/freight-item.tsx

@@ -48,7 +48,7 @@ export const FreightItem = ({
             mode === FreightMode.Confirming ? 'text-black' : 'text-gray-400'
           }`}
         >
-          <FreightLabel freight={freight} />
+          <FreightLabel freight={freight} breakOnHyphen={true} />
         </div>
       </div>
     </div>

ui/src/features/freightline/freightline.module.less

@@ -6,7 +6,7 @@
   border-radius: 0.5rem;
   border: 2px solid #fff;
   color: black;
-  @apply w-20;
+  @apply w-24;
   @apply border-gray-200 hover:border-gray-300;
   display: flex;
   flex-direction: column;

ui/src/features/freightline/freightline.tsx

@@ -180,7 +180,7 @@ export const Freightline = ({
 const FreightlineWrapper = ({ children }: { children: React.ReactNode }) => {
   return (
     <div className='w-full py-3 flex flex-col overflow-hidden' style={{ backgroundColor: '#eee' }}>
-      <div className='flex h-44 w-full items-center px-1'>
+      <div className='flex h-48 w-full items-center px-1'>
         <div
           className='text-gray-500 text-sm font-semibold mb-2 w-min h-min'
           style={{ transform: 'rotate(-0.25turn)' }}

ui/src/features/project/pipelines/nodes/repo-node.module.less

@@ -34,7 +34,7 @@
 }
 
 .valueContainer {
-  width: 145px;
+  width: 100%;
   display: block;
 }
 

ui/src/features/project/pipelines/nodes/stage-node.tsx

@@ -106,7 +106,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} />
+              <FreightLabel freight={currentFreight} showTimestamp={true} />
             </div>
           )}
         </div>

ui/src/features/project/pipelines/utils/graph.ts

@@ -6,10 +6,10 @@ import { AnyNodeType, NodeType, RepoNodeType } from '../types';
 
 export const LINE_THICKNESS = 2;
 
-export const NODE_WIDTH = 150;
-export const NODE_HEIGHT = 118;
+export const NODE_WIDTH = 170;
+export const NODE_HEIGHT = 130;
 
-export const WAREHOUSE_NODE_WIDTH = 165;
+export const WAREHOUSE_NODE_WIDTH = 185;
 export const WAREHOUSE_NODE_HEIGHT = 110;
 
 export const initNodeArray = (s: Stage) =>