@@ -746,6 +727,7 @@ export default class AnnotationLayer extends React.PureComponent {
onChange={v => this.setState({ show: !v })}
/>
{supportedSourceTypes.length > 0 && (
- this.popoverClearWrapper(
- value,
- actionMeta,
- this.handleAnnotationSourceType,
- )
- }
+ onChange={this.handleAnnotationSourceType}
validationErrors={!sourceType ? [t('Mandatory')] : []}
/>
)}
diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.test.tsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.test.tsx
index beec955c27..ed8ae44339 100644
--- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.test.tsx
+++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.test.tsx
@@ -84,10 +84,22 @@ test('renders extra checkboxes when type is time series', async () => {
});
test('enables apply and ok buttons', async () => {
- await waitForRender();
- userEvent.type(screen.getByLabelText('Name'), 'Test');
- userEvent.type(screen.getByLabelText('Formula'), '2x');
- await waitFor(() => {
+ const { container } = render();
+
+ waitFor(() => {
+ expect(container).toBeInTheDocument();
+ });
+
+ const nameInput = screen.getByRole('textbox', { name: 'Name' });
+ const formulaInput = screen.getByRole('textbox', { name: 'Formula' });
+
+ expect(nameInput).toBeInTheDocument();
+ expect(formulaInput).toBeInTheDocument();
+
+ userEvent.type(nameInput, 'Name');
+ userEvent.type(formulaInput, '2x');
+
+ waitFor(() => {
expect(screen.getByRole('button', { name: 'Apply' })).toBeEnabled();
expect(screen.getByRole('button', { name: 'OK' })).toBeEnabled();
});
@@ -134,12 +146,17 @@ test('renders chart options', async () => {
await waitForRender({
annotationType: ANNOTATION_TYPES_METADATA.EVENT.value,
});
- userEvent.click(screen.getByText('2 option(s)'));
- userEvent.click(screen.getByText('Superset annotation'));
- expect(await screen.findByLabelText('Annotation layer')).toBeInTheDocument();
+ userEvent.click(
+ screen.getByRole('combobox', { name: 'Annotation source type' }),
+ );
userEvent.click(screen.getByText('Superset annotation'));
+ expect(screen.getByText('Annotation layer')).toBeInTheDocument();
+
+ userEvent.click(
+ screen.getByRole('combobox', { name: 'Annotation source type' }),
+ );
userEvent.click(screen.getByText('Table'));
- expect(await screen.findByLabelText('Chart')).toBeInTheDocument();
+ expect(screen.getByText('Chart')).toBeInTheDocument();
});
test('keeps apply disabled when missing required fields', async () => {
@@ -147,18 +164,28 @@ test('keeps apply disabled when missing required fields', async () => {
annotationType: ANNOTATION_TYPES_METADATA.EVENT.value,
sourceType: 'Table',
});
- userEvent.click(screen.getByText('1 option(s)'));
- await waitFor(() => userEvent.click(screen.getByText('Chart A')));
+ userEvent.click(
+ screen.getByRole('combobox', { name: 'Annotation layer value' }),
+ );
+ userEvent.click(await screen.findByText('Chart A'));
expect(
screen.getByText('Annotation Slice Configuration'),
).toBeInTheDocument();
userEvent.click(screen.getByRole('button', { name: 'Automatic Color' }));
- userEvent.click(screen.getByLabelText('Title Column'));
+ userEvent.click(
+ screen.getByRole('combobox', { name: 'Annotation layer title column' }),
+ );
userEvent.click(screen.getByText('None'));
- userEvent.click(screen.getByLabelText('Style'));
+ userEvent.click(screen.getByText('Style'));
+ userEvent.click(
+ screen.getByRole('combobox', { name: 'Annotation layer stroke' }),
+ );
userEvent.click(screen.getByText('Dashed'));
- userEvent.click(screen.getByLabelText('Opacity'));
+ userEvent.click(screen.getByText('Opacity'));
+ userEvent.click(
+ screen.getByRole('combobox', { name: 'Annotation layer opacity' }),
+ );
userEvent.click(screen.getByText('0.5'));
const checkboxes = screen.getAllByRole('checkbox');
diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx
index c94fe886a6..dc0130f039 100644
--- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx
+++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx
@@ -62,12 +62,10 @@ class AnnotationLayerControl extends React.PureComponent {
this.state = {
popoverVisible: {},
addedAnnotationIndex: null,
- popoverClear: false,
};
this.addAnnotationLayer = this.addAnnotationLayer.bind(this);
this.removeAnnotationLayer = this.removeAnnotationLayer.bind(this);
this.handleVisibleChange = this.handleVisibleChange.bind(this);
- this.handlePopoverClear = this.handlePopoverClear.bind(this);
}
componentDidMount() {
@@ -105,19 +103,9 @@ class AnnotationLayerControl extends React.PureComponent {
}
handleVisibleChange(visible, popoverKey) {
- if (!this.state.popoverClear) {
- this.setState(prevState => ({
- popoverVisible: { ...prevState.popoverVisible, [popoverKey]: visible },
- }));
- } else {
- this.handlePopoverClear(false);
- }
- }
-
- handlePopoverClear(popoverClear) {
- this.setState({
- popoverClear,
- });
+ this.setState(prevState => ({
+ popoverVisible: { ...prevState.popoverVisible, [popoverKey]: visible },
+ }));
}
removeAnnotationLayer(annotation) {
@@ -143,7 +131,6 @@ class AnnotationLayerControl extends React.PureComponent {
this.handleVisibleChange(false, popoverKey);
this.setState({ addedAnnotationIndex: null });
}}
- onPopoverClear={this.handlePopoverClear}
/>
);
diff --git a/superset-frontend/src/explore/components/controls/FilterBoxItemControl/index.jsx b/superset-frontend/src/explore/components/controls/FilterBoxItemControl/index.jsx
index e04ce8bb1a..25aa79f447 100644
--- a/superset-frontend/src/explore/components/controls/FilterBoxItemControl/index.jsx
+++ b/superset-frontend/src/explore/components/controls/FilterBoxItemControl/index.jsx
@@ -23,7 +23,7 @@ import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
import Popover from 'src/components/Popover';
import FormRow from 'src/components/FormRow';
-import SelectControl from 'src/explore/components/controls/SelectControl';
+import { Select } from 'src/components';
import CheckboxControl from 'src/explore/components/controls/CheckboxControl';
import TextControl from 'src/explore/components/controls/TextControl';
import { FILTER_CONFIG_ATTRIBUTES } from 'src/explore/constants';
@@ -136,12 +136,12 @@ export default class FilterBoxItemControl extends React.Component {