feat: Excel file export

requirements.txt

@@ -63,6 +63,7 @@ marshmallow==3.6.1        # via flask-appbuilder, marshmallow-enum, marshmallow-
 msgpack==1.0.0            # via apache-superset (setup.py)
 multidict==4.7.6          # via aiohttp, yarl
 numpy==1.18.4             # via pandas, pyarrow
+openpyxl==3.0.3
 packaging==20.3           # via bleach
 pandas==1.0.3             # via apache-superset (setup.py)
 parsedatetime==2.5        # via apache-superset (setup.py)

setup.py

@@ -90,6 +90,7 @@ def get_git_sha():
         "isodate",
         "markdown>=3.0",
         "msgpack>=1.0.0, <1.1",
+        "openpyxl>=3.0.3",
         "pandas>=1.0.3, <1.1",
         "parsedatetime",
         "pathlib2",

superset-frontend/spec/javascripts/dashboard/components/gridComponents/Chart_spec.jsx

@@ -56,6 +56,7 @@ describe('Chart', () => {
     isExpanded: false,
     supersetCanExplore: false,
     supersetCanCSV: false,
+    supersetCanExcel: false,
     sliceCanEdit: false,
   };
 

superset-frontend/spec/javascripts/explore/components/ExploreActionButtons_spec.jsx

@@ -34,8 +34,8 @@ describe('ExploreActionButtons', () => {
     ).toBe(true);
   });
 
-  it('should render 5 children/buttons', () => {
+  it('should render 6 children/buttons', () => {
     const wrapper = shallow(<ExploreActionButtons {...defaultProps} />);
-    expect(wrapper.children()).toHaveLength(5);
+    expect(wrapper.children()).toHaveLength(6);
   });
 });

superset-frontend/spec/javascripts/explore/utils_spec.jsx

@@ -89,6 +89,18 @@ describe('exploreUtils', () => {
         URI('/superset/explore_json/').search({ csv: 'true' }),
       );
     });
+    it('generates proper excel URL', () => {
+      const url = getExploreUrl({
+        formData,
+        endpointType: 'excel',
+        force: false,
+        curUrl: 'superset.com',
+      });
+      compareURI(
+        URI(url),
+        URI('/superset/explore_json/').search({ excel: 'true' }),
+      );
+    });
     it('generates proper standalone URL', () => {
       const url = getExploreUrl({
         formData,
@@ -183,11 +195,23 @@ describe('exploreUtils', () => {
       });
       expect(csvURL).toMatch(availableDomains[0]);
 
+      let excelURL = getExploreUrl({
+        formData,
+        endpointType: 'excel',
+      });
+      expect(excelURL).toMatch(availableDomains[0]);
+
       csvURL = getExploreUrl({
         formData,
         endpointType: 'csv',
       });
       expect(csvURL).toMatch(availableDomains[0]);
+
+      excelURL = getExploreUrl({
+        formData,
+        endpointType: 'excel',
+      });
+      expect(excelURL).toMatch(availableDomains[0]);
     });
   });
 

superset-frontend/spec/javascripts/profile/fixtures.tsx

@@ -30,6 +30,7 @@ export const user = {
       ['can_sql_json', 'Superset'],
       ['can_search_queries', 'Superset'],
       ['can_csv', 'Superset'],
+      ['can_excel', 'Superset'],
     ],
   },
   firstName: 'alpha',

superset-frontend/src/SqlLab/components/ResultSet.tsx

@@ -41,6 +41,7 @@ interface ResultSetProps {
   actions: Record<string, any>;
   cache?: boolean;
   csv?: boolean;
+  excel?: boolean;
   database?: Record<string, any>;
   displayLimit: number;
   height: number;
@@ -63,6 +64,7 @@ export default class ResultSet extends React.PureComponent<
   static defaultProps = {
     cache: false,
     csv: true,
+    excel: true,
     database: {},
     search: true,
     showSql: false,
@@ -146,7 +148,12 @@ export default class ResultSet extends React.PureComponent<
     }
   }
   renderControls() {
-    if (this.props.search || this.props.visualize || this.props.csv) {
+    if (
+      this.props.search ||
+      this.props.visualize ||
+      this.props.csv ||
+      this.props.excel
+    ) {
       let data = this.props.query.results.data;
       if (this.props.cache && this.props.query.cached) {
         data = this.state.data;
@@ -172,6 +179,14 @@ export default class ResultSet extends React.PureComponent<
                 <i className="fa fa-file-text-o" /> {t('.CSV')}
               </Button>
             )}
+            {this.props.excel && (
+              <Button
+                bsSize="small"
+                href={`/superset/excel/${this.props.query.id}`}
+              >
+                <i className="fa fa-file-text-o" /> {t('.XLSX')}
+              </Button>
+            )}
 
             <CopyToClipboard
               text={prepareCopyToClipboardTabularData(data)}

superset-frontend/src/SqlLab/components/SouthPane.jsx

@@ -144,6 +144,7 @@ export class SouthPane extends React.PureComponent {
           query={query}
           visualize={false}
           csv={false}
+          excel={false}
           actions={props.actions}
           cache
           height={innerTabContentHeight}

superset-frontend/src/dashboard/components/SliceHeader.jsx

@@ -36,12 +36,14 @@ const propTypes = {
   forceRefresh: PropTypes.func,
   exploreChart: PropTypes.func,
   exportCSV: PropTypes.func,
+  exportExcel: PropTypes.func,
   editMode: PropTypes.bool,
   annotationQuery: PropTypes.object,
   annotationError: PropTypes.object,
   sliceName: PropTypes.string,
   supersetCanExplore: PropTypes.bool,
   supersetCanCSV: PropTypes.bool,
+  supersetCanExcel: PropTypes.bool,
   sliceCanEdit: PropTypes.bool,
   componentId: PropTypes.string.isRequired,
   dashboardId: PropTypes.number.isRequired,
@@ -58,6 +60,7 @@ const defaultProps = {
   toggleExpandSlice: () => ({}),
   exploreChart: () => ({}),
   exportCSV: () => ({}),
+  exportExcel: () => ({}),
   editMode: false,
   annotationQuery: {},
   annotationError: {},
@@ -68,6 +71,7 @@ const defaultProps = {
   sliceName: '',
   supersetCanExplore: false,
   supersetCanCSV: false,
+  supersetCanExcel: false,
   sliceCanEdit: false,
 };
 
@@ -86,10 +90,12 @@ class SliceHeader extends React.PureComponent {
       forceRefresh,
       exploreChart,
       exportCSV,
+      exportExcel,
       innerRef,
       sliceName,
       supersetCanExplore,
       supersetCanCSV,
+      supersetCanExcel,
       sliceCanEdit,
       editMode,
       updateSliceName,
@@ -146,8 +152,10 @@ class SliceHeader extends React.PureComponent {
               forceRefresh={forceRefresh}
               exploreChart={exploreChart}
               exportCSV={exportCSV}
+              exportExcel={exportExcel}
               supersetCanExplore={supersetCanExplore}
               supersetCanCSV={supersetCanCSV}
+              supersetCanExcel={supersetCanExcel}
               sliceCanEdit={sliceCanEdit}
               componentId={componentId}
               dashboardId={dashboardId}

superset-frontend/src/dashboard/components/SliceHeaderControls.jsx

@@ -37,24 +37,28 @@ const propTypes = {
   updatedDttm: PropTypes.number,
   supersetCanExplore: PropTypes.bool,
   supersetCanCSV: PropTypes.bool,
+  supersetCanExcel: PropTypes.bool,
   sliceCanEdit: PropTypes.bool,
   toggleExpandSlice: PropTypes.func,
   forceRefresh: PropTypes.func,
   exploreChart: PropTypes.func,
   exportCSV: PropTypes.func,
+  exportExcel: PropTypes.func,
 };
 
 const defaultProps = {
   forceRefresh: () => ({}),
   toggleExpandSlice: () => ({}),
   exploreChart: () => ({}),
   exportCSV: () => ({}),
+  exportExcel: () => ({}),
   cachedDttm: null,
   updatedDttm: null,
   isCached: false,
   isExpanded: false,
   supersetCanExplore: false,
   supersetCanCSV: false,
+  supersetCanExcel: false,
   sliceCanEdit: false,
 };
 
@@ -70,6 +74,7 @@ class SliceHeaderControls extends React.PureComponent {
   constructor(props) {
     super(props);
     this.exportCSV = this.exportCSV.bind(this);
+    this.exportExcel = this.exportExcel.bind(this);
     this.exploreChart = this.exploreChart.bind(this);
     this.toggleControls = this.toggleControls.bind(this);
     this.refreshChart = this.refreshChart.bind(this);
@@ -89,6 +94,10 @@ class SliceHeaderControls extends React.PureComponent {
     this.props.exportCSV(this.props.slice.slice_id);
   }
 
+  exportExcel() {
+    this.props.exportExcel(this.props.slice.slice_id);
+  }
+
   exploreChart() {
     this.props.exploreChart(this.props.slice.slice_id);
   }
@@ -168,6 +177,10 @@ class SliceHeaderControls extends React.PureComponent {
             <MenuItem onClick={this.exportCSV}>{t('Export CSV')}</MenuItem>
           )}
 
+          {this.props.supersetCanExcel && (
+            <MenuItem onClick={this.exportExcel}>{t('Export XLSX')}</MenuItem>
+          )}
+
           {this.props.supersetCanExplore && (
             <MenuItem onClick={this.exploreChart}>
               {t('Explore chart')}

superset-frontend/src/dashboard/components/gridComponents/Chart.jsx

@@ -28,6 +28,7 @@ import {
   LOG_ACTIONS_CHANGE_DASHBOARD_FILTER,
   LOG_ACTIONS_EXPLORE_DASHBOARD_CHART,
   LOG_ACTIONS_EXPORT_CSV_DASHBOARD_CHART,
+  LOG_ACTIONS_EXPORT_EXCEL_DASHBOARD_CHART,
   LOG_ACTIONS_FORCE_REFRESH_CHART,
 } from '../../../logger/LogUtils';
 import { isFilterBox } from '../../util/activeDashboardFilters';
@@ -63,6 +64,7 @@ const propTypes = {
   isCached: PropTypes.bool,
   supersetCanExplore: PropTypes.bool.isRequired,
   supersetCanCSV: PropTypes.bool.isRequired,
+  supersetCanExcel: PropTypes.bool.isRequired,
   sliceCanEdit: PropTypes.bool.isRequired,
   addDangerToast: PropTypes.func.isRequired,
 };
@@ -94,6 +96,7 @@ class Chart extends React.Component {
     this.handleFilterMenuClose = this.handleFilterMenuClose.bind(this);
     this.exploreChart = this.exploreChart.bind(this);
     this.exportCSV = this.exportCSV.bind(this);
+    this.exportExcel = this.exportExcel.bind(this);
     this.forceRefresh = this.forceRefresh.bind(this);
     this.resize = this.resize.bind(this);
     this.setDescriptionRef = this.setDescriptionRef.bind(this);
@@ -213,6 +216,18 @@ class Chart extends React.Component {
     });
   }
 
+  exportExcel() {
+    this.props.logEvent(LOG_ACTIONS_EXPORT_EXCEL_DASHBOARD_CHART, {
+      slice_id: this.props.slice.slice_id,
+      is_cached: this.props.isCached,
+    });
+    exportChart({
+      formData: this.props.formData,
+      resultType: 'results',
+      resultFormat: 'xlsx',
+    });
+  }
+
   forceRefresh() {
     this.props.logEvent(LOG_ACTIONS_FORCE_REFRESH_CHART, {
       slice_id: this.props.slice.slice_id,
@@ -243,6 +258,7 @@ class Chart extends React.Component {
       timeout,
       supersetCanExplore,
       supersetCanCSV,
+      supersetCanExcel,
       sliceCanEdit,
       addDangerToast,
       handleToggleFullSize,
@@ -283,10 +299,12 @@ class Chart extends React.Component {
           annotationQuery={chart.annotationQuery}
           exploreChart={this.exploreChart}
           exportCSV={this.exportCSV}
+          exportExcel={this.exportExcel}
           updateSliceName={updateSliceName}
           sliceName={sliceName}
           supersetCanExplore={supersetCanExplore}
           supersetCanCSV={supersetCanCSV}
+          supersetCanExcel={supersetCanExcel}
           sliceCanEdit={sliceCanEdit}
           componentId={componentId}
           dashboardId={dashboardId}

superset-frontend/src/dashboard/containers/Chart.jsx

@@ -72,6 +72,7 @@ function mapStateToProps(
     isExpanded: !!dashboardState.expandedSlices[id],
     supersetCanExplore: !!dashboardInfo.superset_can_explore,
     supersetCanCSV: !!dashboardInfo.superset_can_csv,
+    supersetCanExcel: !!dashboardInfo.superset_can_excel,
     sliceCanEdit: !!dashboardInfo.slice_can_edit,
   };
 }

superset-frontend/src/dashboard/reducers/getInitialState.js

@@ -274,6 +274,7 @@ export default function (bootstrapData) {
       dash_save_perm: dashboard.dash_save_perm,
       superset_can_explore: dashboard.superset_can_explore,
       superset_can_csv: dashboard.superset_can_csv,
+      superset_can_excel: dashboard.superset_can_excel,
       slice_can_edit: dashboard.slice_can_edit,
       common: {
         flash_messages: common.flash_messages,

superset-frontend/src/explore/actions/exploreActions.js

@@ -109,8 +109,19 @@ export function setControlValue(controlName, value, validationErrors) {
 }
 
 export const UPDATE_EXPLORE_ENDPOINTS = 'UPDATE_EXPLORE_ENDPOINTS';
-export function updateExploreEndpoints(jsonUrl, csvUrl, standaloneUrl) {
-  return { type: UPDATE_EXPLORE_ENDPOINTS, jsonUrl, csvUrl, standaloneUrl };
+export function updateExploreEndpoints(
+  jsonUrl,
+  csvUrl,
+  excelUrl,
+  standaloneUrl,
+) {
+  return {
+    type: UPDATE_EXPLORE_ENDPOINTS,
+    jsonUrl,
+    csvUrl,
+    excelUrl,
+    standaloneUrl,
+  };
 }
 
 export const SET_EXPLORE_CONTROLS = 'UPDATE_EXPLORE_CONTROLS';

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

@@ -49,11 +49,19 @@ export default function ExploreActionButtons({
   const exportToCSVClasses = cx('btn btn-default btn-sm', {
     'disabled disabledButton': !canDownload,
   });
+  const exportToExcelClasses = cx('btn btn-default btn-sm', {
+    'disabled disabledButton': !canDownload,
+  });
   const doExportCSV = exportChart.bind(this, {
     formData: latestQueryFormData,
     resultType: 'results',
     resultFormat: 'csv',
   });
+  const doExportExcel = exportChart.bind(this, {
+    formData: latestQueryFormData,
+    resultType: 'results',
+    resultFormat: 'xlsx',
+  });
   const doExportChart = exportChart.bind(this, {
     formData: latestQueryFormData,
     resultType: 'results',
@@ -100,6 +108,19 @@ export default function ExploreActionButtons({
           <i className="fa fa-file-text-o" /> .csv
         </a>
       )}
+      {latestQueryFormData && (
+        <a
+          role="button"
+          tabIndex={0}
+          onClick={doExportExcel}
+          className={exportToExcelClasses}
+          title={t('Export to .xlsx format')}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <i className="fa fa-file-text-o" /> .xlsx
+        </a>
+      )}
       <DisplayQueryButton
         chartHeight={chartHeight}
         queryResponse={queryResponse}