You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by vi...@apache.org on 2021/01/15 11:48:43 UTC

[superset] 07/08: fix: Select options overflowing Save chart modal on Explore view (#12522)

This is an automated email from the ASF dual-hosted git repository.

villebro pushed a commit to branch 1.0
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 52b581f9229ef0aabc42bb0ad0b4504aac6cd2c8
Author: Kamil Gabryjelski <ka...@gmail.com>
AuthorDate: Fri Jan 15 11:43:33 2021 +0100

    fix: Select options overflowing Save chart modal on Explore view (#12522)
    
    * Fix select options overflowing modal
    
    * fix unit test
    
    Co-authored-by: Ville Brofeldt <vi...@gmail.com>
---
 .../spec/javascripts/explore/components/SaveModal_spec.jsx   |  7 +++----
 superset-frontend/src/explore/components/SaveModal.tsx       | 12 +++++++++---
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/superset-frontend/spec/javascripts/explore/components/SaveModal_spec.jsx b/superset-frontend/spec/javascripts/explore/components/SaveModal_spec.jsx
index c15b16d..66e7706 100644
--- 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
index dab88f2..e079b1a 100644
--- 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>
     );
   }
 }