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>
apache · Jan 15, 2021 · 52b581f · 52b581f
1 parent 5f2de1d
commit 52b581f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/superset-frontend/spec/javascripts/explore/components/SaveModal_spec.jsx b/superset-frontend/spec/javascripts/explore/components/SaveModal_spec.jsx
@@ -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);
   });
 

diff --git a/superset-frontend/src/explore/components/SaveModal.tsx b/superset-frontend/src/explore/components/SaveModal.tsx
@@ -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>
     );
   }
 }