feat: add download as image button to explore (#10297)

superset-frontend/src/explore/components/DisplayQueryButton.jsx

@@ -41,7 +41,7 @@ import { t } from '@superset-ui/translation';
 import getClientErrorObject from '../../utils/getClientErrorObject';
 import CopyToClipboard from './../../components/CopyToClipboard';
 import { getChartDataRequest } from '../../chart/chartAction';
-
+import downloadAsImage from '../../utils/downloadAsImage';
 import Loading from '../../components/Loading';
 import ModalTrigger from './../../components/ModalTrigger';
 import Button from '../../components/Button';
@@ -63,6 +63,7 @@ const propTypes = {
   animation: PropTypes.bool,
   queryResponse: PropTypes.object,
   chartStatus: PropTypes.string,
+  chartHeight: PropTypes.string.isRequired,
   latestQueryFormData: PropTypes.object.isRequired,
   slice: PropTypes.object,
 };
@@ -219,7 +220,7 @@ export class DisplayQueryButton extends React.PureComponent {
     return null;
   }
   render() {
-    const { animation, slice } = this.props;
+    const { animation, chartHeight, slice } = this.props;
     return (
       <DropdownButton
         noCaret
@@ -279,6 +280,18 @@ export class DisplayQueryButton extends React.PureComponent {
             {t('Run in SQL Lab')}
           </MenuItem>
         )}
+        <MenuItem
+          onClick={downloadAsImage(
+            '.chart-container',
+            // eslint-disable-next-line camelcase
+            slice?.slice_name ?? t('New chart'),
+            {
+              height: parseInt(chartHeight, 10),
+            },
+          )}
+        >
+          {t('Download as image')}
+        </MenuItem>
       </DropdownButton>
     );
   }