From 0ee03ae440e4446408870e07516f3a30de6ee521 Mon Sep 17 00:00:00 2001
From: Geido <60598000+geido@users.noreply.github.com>
Date: Wed, 16 Dec 2020 09:01:34 +0100
Subject: [PATCH] fix: Closes #11864 - Duplicate PropertiesModal (#12038)

* Closes #11864

* Fix typo
---
 .../explore/components/DisplayQueryButton.jsx | 25 ++++---------------
 .../components/ExploreActionButtons.jsx       |  1 +
 .../explore/components/ExploreChartHeader.jsx | 11 +++++---
 3 files changed, 13 insertions(+), 24 deletions(-)

diff --git a/superset-frontend/src/explore/components/DisplayQueryButton.jsx b/superset-frontend/src/explore/components/DisplayQueryButton.jsx
index dbb5d8441bd..e292839248d 100644
--- a/superset-frontend/src/explore/components/DisplayQueryButton.jsx
+++ b/superset-frontend/src/explore/components/DisplayQueryButton.jsx
@@ -36,7 +36,6 @@ import { getChartDataRequest } from '../../chart/chartAction';
 import downloadAsImage from '../../utils/downloadAsImage';
 import Loading from '../../components/Loading';
 import ModalTrigger from '../../components/ModalTrigger';
-import PropertiesModal from './PropertiesModal';
 import { sliceUpdated } from '../actions/exploreActions';
 import { CopyButton } from './DataTableControl';
 
@@ -46,6 +45,7 @@ SyntaxHighlighter.registerLanguage('sql', sqlSyntax);
 SyntaxHighlighter.registerLanguage('json', jsonSyntax);
 
 const propTypes = {
+  onOpenPropertiesModal: PropTypes.func,
   onOpenInEditor: PropTypes.func,
   queryResponse: PropTypes.object,
   chartStatus: PropTypes.string,
@@ -76,7 +76,6 @@ export const DisplayQueryButton = props => {
   const [sqlSupported] = useState(
     datasource && datasource.split('__')[1] === 'table',
   );
-  const [isPropertiesModalOpen, setIsPropertiesModalOpen] = useState(false);
   const [menuVisible, setMenuVisible] = useState(false);
 
   const beforeOpen = resultType => {
@@ -103,20 +102,12 @@ export const DisplayQueryButton = props => {
       });
   };
 
-  const openPropertiesModal = () => {
-    setIsPropertiesModalOpen(true);
-  };
-
-  const closePropertiesModal = () => {
-    setIsPropertiesModalOpen(false);
-  };
-
   const handleMenuClick = ({ key, domEvent }) => {
     const { chartHeight, slice, onOpenInEditor, latestQueryFormData } = props;
     setMenuVisible(false);
     switch (key) {
       case MENU_KEYS.EDIT_PROPERTIES:
-        openPropertiesModal();
+        props.onOpenPropertiesModal();
         break;
       case MENU_KEYS.RUN_IN_SQL_LAB:
         onOpenInEditor(latestQueryFormData);
@@ -182,17 +173,11 @@ export const DisplayQueryButton = props => {
       onToggle={setMenuVisible}
     >
       <Menu onClick={handleMenuClick} selectable={false}>
-        {slice && [
+        {slice && (
           <Menu.Item key={MENU_KEYS.EDIT_PROPERTIES}>
             {t('Edit properties')}
-          </Menu.Item>,
-          <PropertiesModal
-            slice={slice}
-            show={isPropertiesModalOpen}
-            onHide={closePropertiesModal}
-            onSave={props.sliceUpdated}
-          />,
-        ]}
+          </Menu.Item>
+        )}
         <Menu.Item>
           <ModalTrigger
             triggerNode={
diff --git a/superset-frontend/src/explore/components/ExploreActionButtons.jsx b/superset-frontend/src/explore/components/ExploreActionButtons.jsx
index f738723d9d1..c96fbb8ce5c 100644
--- a/superset-frontend/src/explore/components/ExploreActionButtons.jsx
+++ b/superset-frontend/src/explore/components/ExploreActionButtons.jsx
@@ -110,6 +110,7 @@ export default function ExploreActionButtons({
         latestQueryFormData={latestQueryFormData}
         chartStatus={chartStatus}
         onOpenInEditor={actions.redirectSQLLab}
+        onOpenPropertiesModal={actions.openPropertiesModal}
         slice={slice}
       />
     </div>
diff --git a/superset-frontend/src/explore/components/ExploreChartHeader.jsx b/superset-frontend/src/explore/components/ExploreChartHeader.jsx
index 52af3df1787..88a54b3b18f 100644
--- a/superset-frontend/src/explore/components/ExploreChartHeader.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartHeader.jsx
@@ -94,7 +94,7 @@ export class ExploreChartHeader extends React.PureComponent {
     this.state = {
       isPropertiesModalOpen: false,
     };
-    this.openProperiesModal = this.openProperiesModal.bind(this);
+    this.openPropertiesModal = this.openPropertiesModal.bind(this);
     this.closePropertiesModal = this.closePropertiesModal.bind(this);
   }
 
@@ -111,7 +111,7 @@ export class ExploreChartHeader extends React.PureComponent {
     );
   }
 
-  openProperiesModal() {
+  openPropertiesModal() {
     this.setState({
       isPropertiesModalOpen: true,
     });
@@ -167,7 +167,7 @@ export class ExploreChartHeader extends React.PureComponent {
                   role="button"
                   tabIndex={0}
                   className="edit-desc-icon"
-                  onClick={this.openProperiesModal}
+                  onClick={this.openPropertiesModal}
                 >
                   <i className="fa fa-edit" />
                 </span>
@@ -202,7 +202,10 @@ export class ExploreChartHeader extends React.PureComponent {
             status={CHART_STATUS_MAP[chartStatus]}
           />
           <ExploreActionButtons
-            actions={this.props.actions}
+            actions={{
+              ...this.props.actions,
+              openPropertiesModal: this.openPropertiesModal,
+            }}
             slice={this.props.slice}
             canDownload={this.props.can_download}
             chartStatus={chartStatus}