From ddd7f8fb170c46a5844308720d6852d1b01966b0 Mon Sep 17 00:00:00 2001
From: Beto Dealmeida <roberto@dealmeida.net>
Date: Mon, 3 Jun 2019 15:40:36 -0700
Subject: [PATCH] Fix colors in ellipsis (#7632)

* Fix colors in ellipsis

* Change method name to align with convention

* Fix js lint
---
 .../FilterableTable/FilterableTable.jsx       | 41 ++++++++-----------
 .../FilterableTable/FilterableTableStyles.css |  3 ++
 2 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/superset/assets/src/components/FilterableTable/FilterableTable.jsx b/superset/assets/src/components/FilterableTable/FilterableTable.jsx
index e4f21a514d..5b94d512ef 100644
--- a/superset/assets/src/components/FilterableTable/FilterableTable.jsx
+++ b/superset/assets/src/components/FilterableTable/FilterableTable.jsx
@@ -60,7 +60,7 @@ export default class FilterableTable extends PureComponent {
   constructor(props) {
     super(props);
     this.list = List(this.formatTableData(props.data));
-    this.headerRenderer = this.headerRenderer.bind(this);
+    this.renderHeader = this.renderHeader.bind(this);
     this.rowClassName = this.rowClassName.bind(this);
     this.sort = this.sort.bind(this);
 
@@ -139,27 +139,6 @@ export default class FilterableTable extends PureComponent {
     return values.some(v => v.includes(lowerCaseText));
   }
 
-  headerRenderer({ dataKey, label, sortBy, sortDirection }) {
-    return (
-      <TooltipWrapper label="header" tooltip={label}>
-        <div className="header-style">
-          <span
-            className={
-              this.props.expandedColumns.indexOf(label) > -1
-                ? 'header-style-disabled'
-                : ''
-            }
-          >
-            {label}
-          </span>
-          {sortBy === dataKey &&
-            <SortIndicator sortDirection={sortDirection} />
-          }
-        </div>
-      </TooltipWrapper>
-    );
-  }
-
   rowClassName({ index }) {
     let className = '';
     if (this.props.striped) {
@@ -172,6 +151,22 @@ export default class FilterableTable extends PureComponent {
     this.setState({ sortBy, sortDirection });
   }
 
+  renderHeader({ dataKey, label, sortBy, sortDirection }) {
+    const className = this.props.expandedColumns.indexOf(label) > -1
+      ? 'header-style-disabled'
+      : 'header-style';
+    return (
+      <TooltipWrapper label="header" tooltip={label}>
+        <div className={className}>
+          {label}
+          {sortBy === dataKey &&
+            <SortIndicator sortDirection={sortDirection} />
+          }
+        </div>
+      </TooltipWrapper>
+    );
+  }
+
   render() {
     const { sortBy, sortDirection } = this.state;
     const {
@@ -229,7 +224,7 @@ export default class FilterableTable extends PureComponent {
               <Column
                 dataKey={columnKey}
                 disableSort={false}
-                headerRenderer={this.headerRenderer}
+                headerRenderer={this.renderHeader}
                 width={this.widthsForColumnsByKey[columnKey]}
                 label={columnKey}
                 key={columnKey}
diff --git a/superset/assets/src/components/FilterableTable/FilterableTableStyles.css b/superset/assets/src/components/FilterableTable/FilterableTableStyles.css
index f24df737e9..c890654ad4 100644
--- a/superset/assets/src/components/FilterableTable/FilterableTableStyles.css
+++ b/superset/assets/src/components/FilterableTable/FilterableTableStyles.css
@@ -78,5 +78,8 @@
   white-space: nowrap;
 }
 .header-style-disabled {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   color: #aaa;
 }