Prevent dataset edit modal closing on click-away in edit mode (#20278)

apache · Jun 15, 2022 · 498987a · 498987a
1 parent 1882c6d
commit 498987a
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 0 deletions.
diff --git a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
@@ -518,10 +518,12 @@ const propTypes = {
   onChange: PropTypes.func,
   addSuccessToast: PropTypes.func.isRequired,
   addDangerToast: PropTypes.func.isRequired,
+  setIsEditing: PropTypes.func,
 };
 
 const defaultProps = {
   onChange: () => {},
+  setIsEditing: () => {},
 };
 
 function OwnersSelector({ datasource, onChange }) {
@@ -629,6 +631,7 @@ class DatasourceEditor extends React.PureComponent {
   }
 
   onChangeEditMode() {
+    this.props.setIsEditing(!this.state.isEditMode);
     this.setState(prevState => ({ isEditMode: !prevState.isEditMode }));
   }
 

diff --git a/superset-frontend/src/components/Datasource/DatasourceModal.tsx b/superset-frontend/src/components/Datasource/DatasourceModal.tsx
@@ -84,6 +84,7 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
   const [currentDatasource, setCurrentDatasource] = useState(datasource);
   const [errors, setErrors] = useState<any[]>([]);
   const [isSaving, setIsSaving] = useState(false);
+  const [isEditing, setIsEditing] = useState<boolean>(false);
   const dialog = useRef<any>(null);
   const [modal, contextHolder] = Modal.useModal();
 
@@ -193,6 +194,7 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
           <strong>{currentDatasource.table_name}</strong>
         </span>
       }
+      maskClosable={!isEditing}
       footer={
         <>
           {showLegacyDatasourceEditor && (
@@ -246,6 +248,7 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
         height={500}
         datasource={currentDatasource}
         onChange={onDatasourceChange}
+        setIsEditing={setIsEditing}
       />
       {contextHolder}
     </StyledDatasourceModal>

diff --git a/superset-frontend/src/components/Modal/Modal.tsx b/superset-frontend/src/components/Modal/Modal.tsx
@@ -56,6 +56,7 @@ export interface ModalProps {
   draggable?: boolean;
   draggableConfig?: DraggableProps;
   destroyOnClose?: boolean;
+  maskClosable?: boolean;
 }
 
 interface StyledModalProps {