From 498987a1a0fa8af6d4c6375b91600ff4361b0e61 Mon Sep 17 00:00:00 2001
From: Reese <10563996+reesercollins@users.noreply.github.com>
Date: Wed, 15 Jun 2022 16:28:13 -0400
Subject: [PATCH] Prevent dataset edit modal closing on click-away in edit mode
 (#20278)

---
 .../src/components/Datasource/DatasourceEditor.jsx             | 3 +++
 .../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 afa47ea80b984..89ddcbdb81b42 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 49cb7ae5a4906..98f2e561db83f 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 c6d5b3ee0aac6..3bd21fef8075f 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 {