fix: Closes #11864 - Duplicate PropertiesModal (#12038)

* Closes #11864

* Fix typo

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={

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>

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}