From 1e601483e36d1e7247bdfb712017eb191dfc1f25 Mon Sep 17 00:00:00 2001
From: Geido <60598000+geido@users.noreply.github.com>
Date: Thu, 13 May 2021 20:03:22 +0300
Subject: [PATCH] fix(explore): Filters Tooltip is not showing the full content
 (#14618)

* Add getTooltipTitle

* Fix tests
---
 .../components/controls/FilterControl/AdhocFilter/index.js    | 4 ++++
 .../controls/FilterControl/AdhocFilterOption/index.jsx        | 1 +
 .../controls/OptionControls/OptionControls.test.tsx           | 1 +
 .../src/explore/components/controls/OptionControls/index.tsx  | 4 +++-
 4 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilter/index.js b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilter/index.js
index 09fde0af702..6928f544c18 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilter/index.js
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilter/index.js
@@ -142,6 +142,10 @@ export default class AdhocFilter {
     return label.length < 43 ? label : `${label.substring(0, 40)}...`;
   }
 
+  getTooltipTitle() {
+    return this.translateToSql();
+  }
+
   translateToSql() {
     return translateToSql(this);
   }
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/index.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/index.jsx
index 222979cbf9f..faf16bf6be6 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/index.jsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/index.jsx
@@ -63,6 +63,7 @@ const AdhocFilterOption = ({
   >
     <OptionControlLabel
       label={adhocFilter.getDefaultLabel()}
+      tooltipTitle={adhocFilter.getTooltipTitle()}
       onRemove={onRemoveFilter}
       onMoveLabel={onMoveLabel}
       onDropLabel={onDropLabel}
diff --git a/superset-frontend/src/explore/components/controls/OptionControls/OptionControls.test.tsx b/superset-frontend/src/explore/components/controls/OptionControls/OptionControls.test.tsx
index 9e3a91bf96f..670f3720a57 100644
--- a/superset-frontend/src/explore/components/controls/OptionControls/OptionControls.test.tsx
+++ b/superset-frontend/src/explore/components/controls/OptionControls/OptionControls.test.tsx
@@ -36,6 +36,7 @@ import {
 
 const defaultProps = {
   label: <span>Test label</span>,
+  tooltipTitle: 'This is a tooltip title',
   onRemove: jest.fn(),
   onMoveLabel: jest.fn(),
   onDropLabel: jest.fn(),
diff --git a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
index 362ce0670ec..216d606ddc8 100644
--- a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
+++ b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
@@ -167,6 +167,7 @@ export const OptionControlLabel = ({
   type,
   index,
   isExtra,
+  tooltipTitle,
   ...props
 }: {
   label: string | React.ReactNode;
@@ -181,6 +182,7 @@ export const OptionControlLabel = ({
   type: string;
   index: number;
   isExtra?: boolean;
+  tooltipTitle: string;
 }) => {
   const theme = useTheme();
   const ref = useRef<HTMLDivElement>(null);
@@ -246,7 +248,7 @@ export const OptionControlLabel = ({
     if (savedMetric?.metric_name) {
       return <StyledMetricOption metric={savedMetric} />;
     }
-    return <Tooltip title={label}>{label}</Tooltip>;
+    return <Tooltip title={tooltipTitle}>{label}</Tooltip>;
   };
 
   const getOptionControlContent = () => (