[superset] branch master updated: Prevent dataset edit modal closing on click-away in edit mode (#20278)

[rusackas]

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

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


The following commit(s) were added to refs/heads/master by this push:
     new 498987a1a0 Prevent dataset edit modal closing on click-away in edit 
mode (#20278)
498987a1a0 is described below

commit 498987a1a0fa8af6d4c6375b91600ff4361b0e61
Author: Reese <10563996+reesercoll...@users.noreply.github.com>
AuthorDate: Wed Jun 15 16:28:13 2022 -0400

    Prevent dataset edit modal closing on click-away in edit mode (#20278)
---
 superset-frontend/src/components/Datasource/DatasourceEditor.jsx | 3 +++
 superset-frontend/src/components/Datasource/DatasourceModal.tsx  | 3 +++
 superset-frontend/src/components/Modal/Modal.tsx                 | 1 +
 3 files changed, 7 insertions(+)

diff --git a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx 
b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
index afa47ea80b..89ddcbdb81 100644
--- 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
index 49cb7ae5a4..98f2e561db 100644
--- 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
index c6d5b3ee0a..3bd21fef80 100644
--- 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 {