From 6fbd15d355574bfe4c7b71a9d98599267d62b43f Mon Sep 17 00:00:00 2001
From: Tamika Tannis <ttannis@lyft.com>
Date: Mon, 16 Sep 2019 10:57:23 -0700
Subject: [PATCH] Truncate the column type (#297)

* Truncate the column type

* Update truncation method

* Cleanup logic
---
 .../static/css/_popovers.scss                 |  5 ++
 .../DetailList/DetailListItem/index.tsx       | 46 ++++++++++++++++++-
 .../DetailList/DetailListItem/styles.scss     |  4 ++
 3 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/frontend/amundsen_application/static/css/_popovers.scss b/frontend/amundsen_application/static/css/_popovers.scss
index f6fc7535f9..356beb627d 100644
--- a/frontend/amundsen_application/static/css/_popovers.scss
+++ b/frontend/amundsen_application/static/css/_popovers.scss
@@ -61,3 +61,8 @@
   width: 24px;
   margin: auto;
 }
+
+.column-type-popover {
+  max-width: 552px; // arbitrary 2x default
+  word-break: break-word;
+}
diff --git a/frontend/amundsen_application/static/js/components/TableDetail/DetailList/DetailListItem/index.tsx b/frontend/amundsen_application/static/js/components/TableDetail/DetailList/DetailListItem/index.tsx
index 36f2b18988..65b6717182 100644
--- a/frontend/amundsen_application/static/js/components/TableDetail/DetailList/DetailListItem/index.tsx
+++ b/frontend/amundsen_application/static/js/components/TableDetail/DetailList/DetailListItem/index.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import moment from 'moment-timezone';
 
+import { OverlayTrigger, Popover } from 'react-bootstrap';
+
 import ColumnDescEditableText from 'components/TableDetail/ColumnDescEditableText';
 import { logClick } from 'ducks/utilMethods';
 import { TableColumn } from 'interfaces';
@@ -49,6 +51,48 @@ class DetailListItem extends React.Component<DetailListItemProps, DetailListItem
     return moment(unixEpochSeconds * 1000).format("MMM DD, YYYY");
   };
 
+  renderColumnType = (columnIndex: number, type: string) => {
+    const truncatedTypes: string[] = ['array', 'struct', 'map'];
+    let shouldTrucate = false;
+
+    const fullText = type.toLowerCase();
+    let text = fullText;
+
+    truncatedTypes.forEach((truncatedType) => {
+      if (type.startsWith(truncatedType) && type !== truncatedType) {
+        shouldTrucate = true;
+        text = `${truncatedType}<...>`;
+        return;
+      };
+    })
+
+    if (shouldTrucate) {
+      const popoverHover = (
+        <Popover className='column-type-popover' id={`column-type-popover:${columnIndex}`}>
+          {fullText}
+        </Popover>
+      );
+      const stopPropagation = (event) => {
+        event.stopPropagation();
+      }
+      return (
+        <OverlayTrigger
+          trigger={['click']}
+          placement='right'
+          overlay={popoverHover}
+          rootClose={true}>
+            <a className='column-type'
+               href="JavaScript:void(0)"
+               onClick={ stopPropagation }
+            >
+              {text}
+            </a>
+        </OverlayTrigger>
+      )
+    }
+    return (<div className='column-type'>{text}</div>);
+  };
+
   render() {
     const metadata = this.props.data;
     const isExpandable = metadata.stats && metadata.stats.length > 0;
@@ -75,7 +119,7 @@ class DetailListItem extends React.Component<DetailListItemProps, DetailListItem
           <div className='title-section'>
             <div className='title-row'>
               <div className='name title-2'>{metadata.name}</div>
-              <div className='column-type'>{metadata.type ? metadata.type.toLowerCase() : 'null'}</div>
+              { this.renderColumnType(this.props.index, metadata.type) }
             </div>
           </div>
           {
diff --git a/frontend/amundsen_application/static/js/components/TableDetail/DetailList/DetailListItem/styles.scss b/frontend/amundsen_application/static/js/components/TableDetail/DetailList/DetailListItem/styles.scss
index 1133adde64..2c618aa75f 100644
--- a/frontend/amundsen_application/static/js/components/TableDetail/DetailList/DetailListItem/styles.scss
+++ b/frontend/amundsen_application/static/js/components/TableDetail/DetailList/DetailListItem/styles.scss
@@ -47,6 +47,10 @@
           margin-top: 4px;
           max-width: 15%;
         }
+
+        a.column-type {
+          text-decoration: none;
+        }
       }
     }