fix: Select options overflowing Save chart modal on Explore view (#12522)

* Fix select options overflowing modal

* fix unit test

Co-authored-by: Ville Brofeldt <ville.v.brofeldt@gmail.com>
This commit is contained in:
Kamil Gabryjelski 2021-01-15 11:43:33 +01:00 committed by GitHub
parent 8f940aecca
commit e1eeeebe53
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 7 deletions

View File

@ -29,10 +29,9 @@ import Button from 'src/components/Button';
import sinon from 'sinon';
import fetchMock from 'fetch-mock';
import Modal from 'src/common/components/Modal';
import * as exploreUtils from 'src/explore/exploreUtils';
import * as saveModalActions from 'src/explore/actions/saveModalActions';
import SaveModal from 'src/explore/components/SaveModal';
import SaveModal, { StyledModal } from 'src/explore/components/SaveModal';
describe('SaveModal', () => {
const middlewares = [thunk];
@ -79,11 +78,11 @@ describe('SaveModal', () => {
it('renders a Modal with the right set of components', () => {
const wrapper = getWrapper();
expect(wrapper.find(Modal)).toExist();
expect(wrapper.find(StyledModal)).toExist();
expect(wrapper.find(FormControl)).toExist();
expect(wrapper.find(Radio)).toHaveLength(2);
const footerWrapper = shallow(wrapper.find('Modal').props().footer);
const footerWrapper = shallow(wrapper.find(StyledModal).props().footer);
expect(footerWrapper.find(Button)).toHaveLength(3);
});

View File

@ -19,7 +19,7 @@
/* eslint camelcase: 0 */
import React from 'react';
import { Alert, FormControl, FormGroup, Radio } from 'react-bootstrap';
import { JsonObject, t } from '@superset-ui/core';
import { JsonObject, t, styled } from '@superset-ui/core';
import ReactMarkdown from 'react-markdown';
import Modal from 'src/common/components/Modal';
import Button from 'src/components/Button';
@ -55,6 +55,12 @@ type SaveModalState = {
action: ActionType;
};
export const StyledModal = styled(Modal)`
.ant-modal-body {
overflow: visible;
}
`;
class SaveModal extends React.Component<SaveModalProps, SaveModalState> {
constructor(props: SaveModalProps) {
super(props);
@ -153,7 +159,7 @@ class SaveModal extends React.Component<SaveModalProps, SaveModalState> {
render() {
return (
<Modal
<StyledModal
show
onHide={this.props.onHide}
title={t('Save Chart')}
@ -261,7 +267,7 @@ class SaveModal extends React.Component<SaveModalProps, SaveModalState> {
/>
</FormGroup>
</div>
</Modal>
</StyledModal>
);
}
}