mirror of
https://github.com/apache/superset.git
synced 2024-09-16 02:29:39 -04:00
fix: Fix auto-reversion of label/title in the Metrics popover (#19889)
This commit is contained in:
parent
0eb519c70b
commit
7b5ba39029
@ -17,11 +17,13 @@
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import {
|
||||
render,
|
||||
screen,
|
||||
within,
|
||||
fireEvent,
|
||||
waitFor,
|
||||
} from 'spec/helpers/testing-library';
|
||||
import { DndMetricSelect } from 'src/explore/components/controls/DndColumnSelectControl/DndMetricSelect';
|
||||
import { AGGREGATES } from 'src/explore/constants';
|
||||
@ -317,3 +319,81 @@ test('can drag metrics', async () => {
|
||||
expect(within(firstMetric).getByText('SUM(Column B)')).toBeVisible();
|
||||
expect(within(lastMetric).getByText('metric_a')).toBeVisible();
|
||||
});
|
||||
|
||||
test('title changes on custom SQL text change', async () => {
|
||||
let metricValues = [adhocMetricA, 'metric_b'];
|
||||
const onChange = (val: any[]) => {
|
||||
metricValues = [...val];
|
||||
};
|
||||
|
||||
const { rerender } = render(
|
||||
<DndMetricSelect
|
||||
{...defaultProps}
|
||||
value={metricValues}
|
||||
onChange={onChange}
|
||||
multi
|
||||
/>,
|
||||
{
|
||||
useDnd: true,
|
||||
},
|
||||
);
|
||||
|
||||
expect(screen.getByText('SUM(column_a)')).toBeVisible();
|
||||
|
||||
metricValues = [adhocMetricA, 'metric_b', 'metric_a'];
|
||||
rerender(
|
||||
<DndMetricSelect
|
||||
{...defaultProps}
|
||||
value={metricValues}
|
||||
onChange={onChange}
|
||||
multi
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('SUM(column_a)')).toBeVisible();
|
||||
expect(screen.getByText('metric_a')).toBeVisible();
|
||||
|
||||
fireEvent.click(screen.getByText('metric_a'));
|
||||
expect(await screen.findByText('Custom SQL')).toBeInTheDocument();
|
||||
|
||||
fireEvent.click(screen.getByText('Custom SQL'));
|
||||
expect(screen.getByText('Custom SQL').parentElement).toHaveClass(
|
||||
'ant-tabs-tab-active',
|
||||
);
|
||||
|
||||
const container = screen.getByTestId('adhoc-metric-edit-tabs');
|
||||
await waitFor(() => {
|
||||
const textArea = container.getElementsByClassName(
|
||||
'ace_text-input',
|
||||
) as HTMLCollectionOf<HTMLTextAreaElement>;
|
||||
expect(textArea.length).toBe(1);
|
||||
expect(textArea[0].value).toBe('');
|
||||
});
|
||||
|
||||
expect(screen.getByTestId('AdhocMetricEditTitle#trigger')).toHaveTextContent(
|
||||
'metric_a',
|
||||
);
|
||||
|
||||
const textArea = container.getElementsByClassName(
|
||||
'ace_text-input',
|
||||
)[0] as HTMLTextAreaElement;
|
||||
|
||||
// Changing the ACE editor via pasting, since the component
|
||||
// handles the textarea value internally, and changing it doesn't
|
||||
// trigger the onChange
|
||||
await userEvent.paste(textArea, 'New metric');
|
||||
|
||||
await waitFor(() => {
|
||||
expect(
|
||||
screen.getByTestId('AdhocMetricEditTitle#trigger'),
|
||||
).toHaveTextContent('New metric');
|
||||
});
|
||||
|
||||
// Ensure the title does not reset on mouse over
|
||||
fireEvent.mouseEnter(screen.getByTestId('AdhocMetricEditTitle#trigger'));
|
||||
fireEvent.mouseOut(screen.getByTestId('AdhocMetricEditTitle#trigger'));
|
||||
|
||||
expect(screen.getByTestId('AdhocMetricEditTitle#trigger')).toHaveTextContent(
|
||||
'New metric',
|
||||
);
|
||||
});
|
||||
|
@ -16,7 +16,7 @@
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import React, { ReactNode } from 'react';
|
||||
import React, { ReactNode, useMemo } from 'react';
|
||||
import { useDrop } from 'react-dnd';
|
||||
import { t, useTheme } from '@superset-ui/core';
|
||||
import ControlHeader from 'src/explore/components/ControlHeader';
|
||||
@ -48,6 +48,7 @@ export type DndSelectLabelProps = {
|
||||
export default function DndSelectLabel({
|
||||
displayGhostButton = true,
|
||||
accept,
|
||||
valuesRenderer,
|
||||
...props
|
||||
}: DndSelectLabelProps) {
|
||||
const theme = useTheme();
|
||||
@ -70,6 +71,8 @@ export default function DndSelectLabel({
|
||||
}),
|
||||
});
|
||||
|
||||
const values = useMemo(() => valuesRenderer(), [valuesRenderer]);
|
||||
|
||||
function renderGhostButton() {
|
||||
return (
|
||||
<AddControlLabel
|
||||
@ -92,7 +95,7 @@ export default function DndSelectLabel({
|
||||
canDrop={canDrop}
|
||||
isOver={isOver}
|
||||
>
|
||||
{props.valuesRenderer()}
|
||||
{values}
|
||||
{displayGhostButton && renderGhostButton()}
|
||||
</DndLabelsContainer>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user