Change stat collection info from tooltip to label (#42)

amundsen_application/static/css/_icons.scss

@@ -26,6 +26,16 @@ img.icon {
     mask-image: url('/static/images/icons/Database.svg');
   }
 
+  &.icon-down {
+    -webkit-mask-image: url('/static/images/icons/Down.svg');
+    mask-image: url('/static/images/icons/Down.svg');
+  }
+
+  &.icon-left {
+    -webkit-mask-image: url('/static/images/icons/Left.svg');
+    mask-image: url('/static/images/icons/Left.svg');
+  }
+
   &.icon-loading {
     -webkit-mask-image: url('/static/images/icons/Loader.svg');
     mask-image: url('/static/images/icons/Loader.svg');
@@ -45,6 +55,11 @@ img.icon {
     -webkit-mask-image: url('/static/images/icons/Right.svg');
     mask-image: url('/static/images/icons/Right.svg');
   }
+
+  &.icon-up {
+    -webkit-mask-image: url('/static/images/icons/Up.svg');
+    mask-image: url('/static/images/icons/Up.svg');
+  }
 }
 
 .btn img.icon {

amundsen_application/static/js/components/TableDetail/DetailList/DetailListItem/index.tsx

@@ -34,7 +34,7 @@ class DetailListItem extends React.Component<DetailListItemProps, DetailListItem
     this.setState(prevState => ({
       isExpanded: !prevState.isExpanded
     }));
-  }
+  };
 
   formatDate = (unixEpochTimeValue) => {
     const date = new Date(0);
@@ -42,7 +42,7 @@ class DetailListItem extends React.Component<DetailListItemProps, DetailListItem
 
     /* TODO: Internationalization */
     return date.toLocaleDateString();
-  }
+  };
 
   render() {
     const metadata = this.props.data;
@@ -53,10 +53,10 @@ class DetailListItem extends React.Component<DetailListItemProps, DetailListItem
     const startDate = isExpandable ? this.formatDate(startEpoch) : null;
     const endDate = isExpandable ? this.formatDate(endEpoch) : null;
 
-    let infoText = 'These stats are based on data collected for this column';
+    let infoText = 'Stats collected';
     if (startDate && endDate) {
       if (startDate === endDate) {
-        infoText = `${infoText} on ${startDate}`;
+        infoText = `${infoText} on ${startDate} partition`;
       }
       else {
         infoText = `${infoText} between ${startDate} and ${endDate}`;
@@ -75,16 +75,9 @@ class DetailListItem extends React.Component<DetailListItemProps, DetailListItem
               <div className='type'>{metadata.type || 'null'}</div>
             </div>
           </div>
-          {
-            this.state.isExpanded &&
-            <InfoButton title='How is this data generated?'
-              infoText={infoText}
-              placement='top'
-            />
-          }
           {
             isExpandable &&
-            <img className={'expand-icon ' + (this.state.isExpanded ? 'icon-up' : 'icon-down')}/>
+            <img className={'icon ' + (this.state.isExpanded ? 'icon-up' : 'icon-down')}/>
           }
         </div>
         <div className={'description ' + (this.state.isExpanded ? '' : (isExpandable ? 'truncated' : ''))}>
@@ -109,11 +102,17 @@ class DetailListItem extends React.Component<DetailListItemProps, DetailListItem
                 </div>
               )
             }
+            {
+             metadata.stats.length > 0 &&
+             <div className="stat-collection-info">
+              { infoText }
+            </div>
+            }
           </div>
         }
       </li>
     );
   }
-};
+}
 
 export default DetailListItem;

amundsen_application/static/js/components/TableDetail/DetailList/DetailListItem/styles.scss

@@ -10,25 +10,6 @@
   border-bottom-color: $gray-lighter !important;
   background-color: transparent !important;
 
-  img {
-    height: 24px;
-    min-width: 24px;
-    border: none;
-    background-color: $gray-lighter;
-  }
-  img.icon-down {
-    -webkit-mask-image: url('/static/images/icons/Down.svg');
-    mask-image: url('/static/images/icons/Down.svg');
-  }
-  img.icon-up {
-    -webkit-mask-image: url('/static/images/icons/Up.svg');
-    mask-image: url('/static/images/icons/Up.svg');
-  }
-  .expand-icon {
-    width: 24px;
-    margin: 0 4px;
-  }
-
   .description {
     color: $gray-light;
     max-width: 100%;
@@ -37,6 +18,7 @@
     padding-right: 32px;
   }
 
+  // TODO - move to common styles
   .truncated,
   .truncated .editable-text {
     white-space: nowrap;
@@ -50,6 +32,24 @@
     margin: -10px -4px 0;
     padding: 10px 4px 0;
 
+    .title {
+      display: flex;
+      flex-direction: row;
+    }
+    .name {
+      font-size: 16px;
+      font-family: $font-family-sans-serif-bold;
+      font-weight: $font-weight-sans-serif-bold;
+      margin-right: 8px;
+    }
+    .type {
+      color: $brand-color-3;
+      font-size: 13px;
+      margin-top: 4px;
+      font-family: 'Menlo-Bold', Helvetica, Arial, sans-serif;
+    }
+
+
     &.expandable {
       cursor: pointer;
 
@@ -60,7 +60,7 @@
           color: $brand-color-4;
         }
 
-        .expand-icon {
+        .icon {
           background-color: $brand-color-4;
         }
       }
@@ -68,44 +68,32 @@
   }
 
   .column-stats {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin-top: 10px;
+    display: block;
+    margin-top: 8px;
     width: 100%;
-  }
-  .title {
-    display: flex;
-    flex-direction: row;
-  }
-  .name {
-    font-size: 16px;
-    font-family: $font-family-sans-serif-bold;
-    font-weight: $font-weight-sans-serif-bold;
-    margin-right: 8px;
-  }
-  .type {
-    color: $brand-color-3;
-    font-size: 13px;
-    margin-top: 4px;
-    font-family: 'Menlo-Bold', Helvetica, Arial, sans-serif;
-  }
 
-  .column-stat {
-    flex: 1;
-    min-width: 120px;
-    margin-top: 8px;
-    max-width: 20%;
+    .column-stat {
+      display: inline-block;
+      margin-top: 8px;
+      max-width: 150px;
+      min-width: 120px;
+      width: 20%;
 
-    .title {
-      color: $gray-light;
-      font-size: 12px;
-      font-family: $font-family-sans-serif-bold;
-      font-weight: $font-weight-sans-serif-bold;
+      .title {
+        color: $gray-light;
+        font-size: $font-size-small;
+        font-family: $font-family-sans-serif-bold;
+        font-weight: $font-weight-sans-serif-bold;
+      }
+      .content {
+        color: $brand-color-4;
+      }
     }
-    .content {
-      color: $brand-color-4;
-      font-size: 14px;
+
+    .stat-collection-info {
+      color: $gray-light;
+      font-style: italic;
+      margin-top: 4px;
     }
   }
 }