Skip to content

Commit

Permalink
Show/hide tooltips (#16192)
Browse files Browse the repository at this point in the history
  • Loading branch information
geido committed Aug 12, 2021
1 parent 16a9d21 commit 2c5731a
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 32 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -21,37 +21,33 @@ import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { render, screen } from 'spec/helpers/testing-library';
import { DndItemType } from 'src/explore/components/DndItemType';
import DatasourcePanelDragWrapper from '.';
import DatasourcePanelDragOption from '.';

test('should render', () => {
render(
<DndProvider backend={HTML5Backend}>
<DatasourcePanelDragWrapper
<DatasourcePanelDragOption
value={{ metric_name: 'test' }}
type={DndItemType.Metric}
>
<div data-test="children" />
</DatasourcePanelDragWrapper>
/>
</DndProvider>,
);

expect(screen.getByTestId('DatasourcePanelDragWrapper')).toBeInTheDocument();
expect(screen.getByTestId('children')).toBeInTheDocument();
expect(screen.getByTestId('DatasourcePanelDragOption')).toBeInTheDocument();
expect(screen.getByText('test')).toBeInTheDocument();
});

test('should have attribute draggable:true', () => {
render(
<DndProvider backend={HTML5Backend}>
<DatasourcePanelDragWrapper
<DatasourcePanelDragOption
value={{ metric_name: 'test' }}
type={DndItemType.Metric}
>
<div data-test="children" />
</DatasourcePanelDragWrapper>
/>
</DndProvider>,
);

expect(screen.getByTestId('DatasourcePanelDragWrapper')).toHaveAttribute(
expect(screen.getByTestId('DatasourcePanelDragOption')).toHaveAttribute(
'draggable',
'true',
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,15 @@
* specific language governing permissions and limitations
* under the License.
*/
import React, { ReactNode } from 'react';
import React from 'react';
import { useDrag } from 'react-dnd';
import { styled } from '@superset-ui/core';
import { Metric, styled } from '@superset-ui/core';
import { DndItemType } from 'src/explore/components/DndItemType';
import {
StyledColumnOption,
StyledMetricOption,
} from 'src/explore/components/optionRenderers';
import { ColumnMeta } from '@superset-ui/chart-controls';
import { DatasourcePanelDndItem } from '../types';

const DatasourceItemContainer = styled.div`
Expand All @@ -37,23 +43,42 @@ const DatasourceItemContainer = styled.div`
}
`;

interface DatasourcePanelDragWrapperProps extends DatasourcePanelDndItem {
children?: ReactNode;
interface DatasourcePanelDragOptionProps extends DatasourcePanelDndItem {
labelRef?: React.RefObject<any>;
showTooltip?: boolean;
}

export default function DatasourcePanelDragWrapper(
props: DatasourcePanelDragWrapperProps,
type MetricOption = Omit<Metric, 'id'> & {
label?: string;
};

export default function DatasourcePanelDragOption(
props: DatasourcePanelDragOptionProps,
) {
const [, drag] = useDrag({
const { labelRef, showTooltip, type, value } = props;
const [{ isDragging }, drag] = useDrag({
item: {
value: props.value,
type: props.type,
},
collect: monitor => ({
isDragging: monitor.isDragging(),
}),
});

const optionProps = {
labelRef,
showTooltip: !isDragging && showTooltip,
showType: true,
};

return (
<DatasourceItemContainer data-test="DatasourcePanelDragWrapper" ref={drag}>
{props.children}
<DatasourceItemContainer data-test="DatasourcePanelDragOption" ref={drag}>
{type === DndItemType.Column ? (
<StyledColumnOption column={value as ColumnMeta} {...optionProps} />
) : (
<StyledMetricOption metric={value as MetricOption} {...optionProps} />
)}
</DatasourceItemContainer>
);
}
54 changes: 43 additions & 11 deletions superset-frontend/src/explore/components/DatasourcePanel/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import React, { useEffect, useMemo, useState } from 'react';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { styled, t } from '@superset-ui/core';
import Collapse from 'src/components/Collapse';
import { ControlConfig, DatasourceMeta } from '@superset-ui/chart-controls';
Expand All @@ -26,7 +26,7 @@ import { FAST_DEBOUNCE } from 'src/constants';
import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
import { ExploreActions } from 'src/explore/actions/exploreActions';
import Control from 'src/explore/components/Control';
import DatasourcePanelDragWrapper from './DatasourcePanelDragWrapper';
import DatasourcePanelDragOption from './DatasourcePanelDragOption';
import { DndItemType } from '../DndItemType';
import { StyledColumnOption, StyledMetricOption } from '../optionRenderers';

Expand Down Expand Up @@ -87,7 +87,7 @@ const DatasourceContainer = styled.div`
}
`;

const LabelContainer = styled.div`
const LabelWrapper = styled.div`
overflow: hidden;
text-overflow: ellipsis;
Expand All @@ -110,6 +110,42 @@ const LabelContainer = styled.div`
}
`;

const LabelContainer = (props: {
children: React.ReactElement;
className: string;
}) => {
const labelRef = useRef<HTMLDivElement>(null);
const [showTooltip, setShowTooltip] = useState(true);
const isLabelTruncated = () =>
!!(
labelRef &&
labelRef.current &&
labelRef.current.scrollWidth > labelRef.current.clientWidth
);
const handleShowTooltip = () => {
const shouldShowTooltip = isLabelTruncated();
if (shouldShowTooltip !== showTooltip) {
setShowTooltip(shouldShowTooltip);
}
};
const handleResetTooltip = () => {
setShowTooltip(true);
};
const extendedProps = {
labelRef,
showTooltip,
};
return (
<LabelWrapper
onMouseEnter={handleShowTooltip}
onMouseLeave={handleResetTooltip}
className={props.className}
>
{React.cloneElement(props.children, extendedProps)}
</LabelWrapper>
);
};

const enableExploreDnd = isFeatureEnabled(
FeatureFlag.ENABLE_EXPLORE_DRAG_AND_DROP,
);
Expand Down Expand Up @@ -245,12 +281,10 @@ export default function DataSourcePanel({
{metricSlice.map(m => (
<LabelContainer key={m.metric_name} className="column">
{enableExploreDnd ? (
<DatasourcePanelDragWrapper
<DatasourcePanelDragOption
value={m}
type={DndItemType.Metric}
>
<StyledMetricOption metric={m} showType />
</DatasourcePanelDragWrapper>
/>
) : (
<StyledMetricOption metric={m} showType />
)}
Expand All @@ -276,12 +310,10 @@ export default function DataSourcePanel({
{columnSlice.map(col => (
<LabelContainer key={col.column_name} className="column">
{enableExploreDnd ? (
<DatasourcePanelDragWrapper
<DatasourcePanelDragOption
value={col}
type={DndItemType.Column}
>
<StyledColumnOption column={col} showType />
</DatasourcePanelDragWrapper>
/>
) : (
<StyledColumnOption column={col} showType />
)}
Expand Down

0 comments on commit 2c5731a

Please sign in to comment.