QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-22 17:45:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(sqllab): Have table name tooltip only show when name is truncated (#17386)

Browse Source 
* Add conditional to table name tooltip to only show when overflowing

* Remove uneccessary state and useEffect, a little clean up and slight refactoring

Co-authored-by: Corbin Robb <corbin@Corbins-MacBook-Pro.local>
This commit is contained in:
Corbin Robb
2021-11-19 10:34:28 -07:00
committed by GitHub
parent 69f9ee8f5e
commit 8e1619b105
1 changed files with 42 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
superset-frontend/src/SqlLab/components/TableElement/index.tsx
View File

@@ -77,6 +77,7 @@ const Fade = styled.div`
const TableElement = ({ table, actions, ...props }: TableElementProps) => {
const [sortColumns, setSortColumns] = useState(false);
const [hovered, setHovered] = useState(false);
const tableNameRef = React.useRef<HTMLInputElement>(null);
const setHover = (hovered: boolean) => {
debounce(() => setHovered(hovered), 100)();
@@ -213,39 +214,50 @@ const TableElement = ({ table, actions, ...props }: TableElementProps) => {
);
};
const renderHeader = () => (
<div
className="clearfix header-container"
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
>
<Tooltip
id="copy-to-clipboard-tooltip"
placement="topLeft"
style={{ cursor: 'pointer' }}
title={table.name}
trigger={['hover']}
>
<StyledSpan data-test="collapse" className="table-name">
<strong>{table.name}</strong>
</StyledSpan>
</Tooltip>
const renderHeader = () => {
const element: HTMLInputElement | null = tableNameRef.current;
let trigger: string[] = [];
if (element && element.offsetWidth < element.scrollWidth) {
trigger = ['hover'];
}
<div className="pull-right header-right-side">
{table.isMetadataLoading || table.isExtraMetadataLoading ? (
<Loading position="inline" />
) : (
<Fade
data-test="fade"
hovered={hovered}
onClick={e => e.stopPropagation()}
return (
<div
className="clearfix header-container"
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
>
<Tooltip
id="copy-to-clipboard-tooltip"
style={{ cursor: 'pointer' }}
title={table.name}
trigger={trigger}
>
<StyledSpan
data-test="collapse"
ref={tableNameRef}
className="table-name"
>
{renderControls()}
</Fade>
)}
<strong>{table.name}</strong>
</StyledSpan>
</Tooltip>
<div className="pull-right header-right-side">
{table.isMetadataLoading || table.isExtraMetadataLoading ? (
<Loading position="inline" />
) : (
<Fade
data-test="fade"
hovered={hovered}
onClick={e => e.stopPropagation()}
>
{renderControls()}
</Fade>
)}
</div>
</div>
</div>
);
);
};
const renderBody = () => {
let cols;