feat(ui): Disable user selection of data when user does not have export permissions

superset-frontend/packages/superset-ui-core/src/chart/models/ChartProps.ts

@@ -105,6 +105,8 @@ export interface ChartPropsConfig {
   inputRef?: RefObject<any>;
   /** Theme object */
   theme: SupersetTheme;
+  /** User able to export data */
+  canExportData?: string;
 }
 
 const DEFAULT_WIDTH = 800;
@@ -155,6 +157,8 @@ export default class ChartProps<FormData extends RawFormData = RawFormData> {
 
   theme: SupersetTheme;
 
+  canExportData?: string;
+
   constructor(config: ChartPropsConfig & { formData?: FormData } = {}) {
     const {
       annotationData = {},
@@ -176,6 +180,7 @@ export default class ChartProps<FormData extends RawFormData = RawFormData> {
       inContextMenu = false,
       emitCrossFilters = false,
       theme,
+      canExportData,
     } = config;
     this.width = width;
     this.height = height;
@@ -198,6 +203,7 @@ export default class ChartProps<FormData extends RawFormData = RawFormData> {
     this.inContextMenu = inContextMenu;
     this.emitCrossFilters = emitCrossFilters;
     this.theme = theme;
+    this.canExportData = canExportData;
   }
 }
 
@@ -223,6 +229,7 @@ ChartProps.createSelector = function create(): ChartPropsSelector {
     input => input.inContextMenu,
     input => input.emitCrossFilters,
     input => input.theme,
+    input => input.canExportData,
     (
       annotationData,
       datasource,
@@ -243,6 +250,7 @@ ChartProps.createSelector = function create(): ChartPropsSelector {
       inContextMenu,
       emitCrossFilters,
       theme,
+      canExportData,
     ) =>
       new ChartProps({
         annotationData,
@@ -264,6 +272,7 @@ ChartProps.createSelector = function create(): ChartPropsSelector {
         inContextMenu,
         emitCrossFilters,
         theme,
+        canExportData,
       }),
   );
 };

superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx

@@ -155,6 +155,7 @@ export default function PivotTableChart(props: PivotTableProps) {
     onContextMenu,
     timeGrainSqla,
     allowRenderHtml,
+    dataSelectionMode,
   } = props;
 
   const theme = useTheme();
@@ -557,6 +558,7 @@ export default function PivotTableChart(props: PivotTableProps) {
           namesMapping={verboseMap}
           onContextMenu={handleContextMenu}
           allowRenderHtml={allowRenderHtml}
+          dataSelectionMode={dataSelectionMode}
         />
       </PivotTableWrapper>
     </Styles>

superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/transformProps.ts

@@ -81,6 +81,7 @@ export default function transformProps(chartProps: ChartProps<QueryFormData>) {
     filterState,
     datasource: { verboseMap = {}, columnFormats = {}, currencyFormats = {} },
     emitCrossFilters,
+    canExportData,
   } = chartProps;
   const { data, colnames, coltypes } = queriesData[0];
   const {
@@ -176,5 +177,6 @@ export default function transformProps(chartProps: ChartProps<QueryFormData>) {
     onContextMenu,
     timeGrainSqla,
     allowRenderHtml,
+    dataSelectionMode: canExportData ? 'auto' : 'none',
   };
 }

superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/Styles.js

@@ -20,7 +20,7 @@
 import { css, styled } from '@superset-ui/core';
 
 export const Styles = styled.div`
-  ${({ theme, isDashboardEditMode }) => css`
+  ${({ theme, isDashboardEditMode, dataSelectionMode }) => css`
     table.pvtTable {
       position: ${isDashboardEditMode ? 'inherit' : 'relative'};
       width: calc(100% - ${theme.gridUnit}px);
@@ -30,6 +30,7 @@ export const Styles = styled.div`
       border-collapse: separate;
       font-family: ${theme.typography.families.sansSerif};
       line-height: 1.4;
+      user-select: ${dataSelectionMode};
     }
 
     table thead {

superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/TableRenderers.jsx

@@ -915,7 +915,10 @@ export class TableRenderer extends Component {
     };
 
     return (
-      <Styles isDashboardEditMode={this.isDashboardEditMode()}>
+      <Styles
+        isDashboardEditMode={this.isDashboardEditMode()}
+        dataSelectionMode={this.props.dataSelectionMode}
+      >
         <table className="pvtTable" role="grid">
           <thead>
             {colAttrs.map((c, j) =>

superset-frontend/plugins/plugin-chart-pivot-table/src/types.ts

@@ -79,6 +79,7 @@ interface PivotTableCustomizeProps {
   dateFormatters: Record<string, DateFormatter | undefined>;
   legacy_order_by: QueryFormMetric[] | QueryFormMetric | null;
   order_desc: boolean;
+  dataSelectionMode: string;
   onContextMenu?: (
     clientX: number,
     clientY: number,

superset-frontend/plugins/plugin-chart-pivot-table/test/plugin/buildQuery.test.ts

@@ -54,6 +54,7 @@ const formData: PivotTableQueryFormData = {
   time_grain_sqla: TimeGranularity.MONTH,
   temporal_columns_lookup: { col1: true },
   currencyFormat: { symbol: 'USD', symbolPosition: 'prefix' },
+  dataSelectionMode: 'auto',
 };
 
 test('should build groupby with series in form data', () => {

superset-frontend/plugins/plugin-chart-pivot-table/test/plugin/transformProps.test.ts

@@ -93,6 +93,7 @@ describe('PivotTableChart transformProps', () => {
       columnFormats: {},
       currencyFormats: {},
       currencyFormat: { symbol: 'USD', symbolPosition: 'prefix' },
+      dataSelectionMode: 'none',
     });
   });
 });

superset-frontend/plugins/plugin-chart-table/src/Styles.tsx

@@ -118,5 +118,8 @@ export default styled.div`
     table .right-border-only:last-child {
       border-right: none;
     }
+    .no-select {
+      user-select: none;
+    }
   `}
 `;

superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx

@@ -264,6 +264,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
     isUsingTimeComparison,
     basicColorFormatters,
     basicColorColumnFormatters,
+    dataSelectionMode,
   } = props;
   const comparisonColumns = [
     { key: 'all', label: t('Display all') },
@@ -736,6 +737,10 @@ export default function TableChart<D extends DataRecord = DataRecord>(
         }
       }
 
+      if (dataSelectionMode === 'none') {
+        className += ' no-select';
+      }
+
       return {
         id: String(i), // to allow duplicate column keys
         // must use custom accessor to allow `.` in column names

superset-frontend/plugins/plugin-chart-table/src/transformProps.ts

@@ -455,6 +455,7 @@ const transformProps = (
       onContextMenu,
     },
     emitCrossFilters,
+    canExportData,
   } = chartProps;
 
   const {
@@ -706,6 +707,7 @@ const transformProps = (
     basicColorFormatters,
     startDateOffset,
     basicColorColumnFormatters,
+    dataSelectionMode: canExportData ? 'auto' : 'none',
   };
 };
 

superset-frontend/plugins/plugin-chart-table/src/types.ts

@@ -146,6 +146,7 @@ export interface TableChartTransformedProps<D extends DataRecord = DataRecord> {
   basicColorFormatters?: { [Key: string]: BasicColorFormatterType }[];
   basicColorColumnFormatters?: { [Key: string]: BasicColorFormatterType }[];
   startDateOffset?: string;
+  dataSelectionMode: string;
 }
 
 export enum ColorSchemeEnum {

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

@@ -263,6 +263,8 @@ const ResultSet = ({
     setSearchText(event.target.value);
   };
 
+  const canExportData = findPermission('can_export_csv', 'SQLLab', user?.roles);
+
   const createExploreResultsOnClick = async (clickEvent: MouseEvent) => {
     const { results } = query;
 
@@ -309,13 +311,6 @@ const ResultSet = ({
         templateParams: query?.templateParams,
         schema: query?.schema,
       };
-
-      const canExportData = findPermission(
-        'can_export_csv',
-        'SQLLab',
-        user?.roles,
-      );
-
       return (
         <ResultSetControls>
           <SaveDatasetModal
@@ -668,6 +663,7 @@ const ResultSet = ({
             filterText={searchText}
             expandedColumns={expandedColumns}
             allowHTML={allowHTML}
+            disableTextSelection={canExportData}
           />
         </ResultContainer>
       );

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

@@ -82,6 +82,7 @@ const propTypes = {
   datasetsStatus: PropTypes.oneOf(['loading', 'error', 'complete']),
   isInView: PropTypes.bool,
   emitCrossFilters: PropTypes.bool,
+  canExportData: PropTypes.bool,
 };
 
 const BLANK = {};
@@ -271,6 +272,7 @@ class Chart extends PureComponent {
             {...this.props}
             source={this.props.dashboardId ? 'dashboard' : 'explore'}
             data-test={this.props.vizType}
+            canExportData={this.props.canExportData}
           />
         ) : (
           <Loading />

superset-frontend/src/components/Chart/ChartRenderer.jsx

@@ -48,7 +48,6 @@ const propTypes = {
   setControlValue: PropTypes.func,
   vizType: PropTypes.string.isRequired,
   triggerRender: PropTypes.bool,
-  // state
   chartAlert: PropTypes.string,
   chartStatus: PropTypes.string,
   queriesResponse: PropTypes.arrayOf(PropTypes.object),
@@ -63,6 +62,7 @@ const propTypes = {
   postTransformProps: PropTypes.func,
   source: PropTypes.oneOf([ChartSource.Dashboard, ChartSource.Explore]),
   emitCrossFilters: PropTypes.bool,
+  canExportData: PropTypes.bool,
 };
 
 const BLANK = {};
@@ -264,6 +264,7 @@ class ChartRenderer extends Component {
       formData,
       latestQueryFormData,
       postTransformProps,
+      canExportData,
     } = this.props;
 
     const currentFormData =
@@ -362,6 +363,7 @@ class ChartRenderer extends Component {
             postTransformProps={postTransformProps}
             emitCrossFilters={emitCrossFilters}
             legendState={this.state.legendState}
+            canExportData={canExportData}
             {...drillToDetailProps}
           />
         </div>

superset-frontend/src/components/FilterableTable/index.tsx

@@ -35,8 +35,12 @@ const SCROLL_BAR_HEIGHT = 15;
 // See https://stackoverflow.com/a/30987109 for more details
 const ONLY_NUMBER_REGEX = /^(NaN|-?((\d*\.\d+|\d+)([Ee][+-]?\d+)?|Infinity))$/;
 
-const StyledFilterableTable = styled.div`
-  ${({ theme }) => `
+interface StyledFilterableTableProps {
+  disableTextSelection?: boolean;
+}
+
+const StyledFilterableTable = styled.div<StyledFilterableTableProps>`
+  ${({ theme, disableTextSelection }) => `
     height: 100%;
     overflow: hidden;
 
@@ -50,6 +54,7 @@ const StyledFilterableTable = styled.div`
       min-width: 0px;
       align-self: center;
       font-size: ${theme.typography.sizes.s}px;
+      user-select: ${disableTextSelection ? 'auto' : 'none'};
     }
 
     .even-row {
@@ -83,6 +88,7 @@ export interface FilterableTableProps {
   striped?: boolean;
   expandedColumns?: string[];
   allowHTML?: boolean;
+  disableTextSelection?: boolean;
 }
 
 const FilterableTable = ({
@@ -92,6 +98,7 @@ const FilterableTable = ({
   filterText = '',
   expandedColumns = [],
   allowHTML = true,
+  disableTextSelection,
 }: FilterableTableProps) => {
   const formatTableData = (data: Record<string, unknown>[]): Datum[] =>
     data.map(row => {
@@ -254,6 +261,7 @@ const FilterableTable = ({
       className="filterable-table-container"
       data-test="table-container"
       ref={container}
+      disableTextSelection={disableTextSelection}
     >
       {fitted && (
         <Table

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

@@ -528,6 +528,7 @@ class Chart extends Component {
             datasetsStatus={datasetsStatus}
             isInView={isInView}
             emitCrossFilters={emitCrossFilters}
+            canExportData={supersetCanCSV}
           />
         </ChartWrapper>
       </SliceContainer>

superset-frontend/src/explore/components/ExploreChartPanel/index.jsx

@@ -17,6 +17,7 @@
  * under the License.
  */
 import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import Split from 'react-split';
 import {
@@ -43,6 +44,7 @@ import { SaveDatasetModal } from 'src/SqlLab/components/SaveDatasetModal';
 import { getDatasourceAsSaveableDataset } from 'src/utils/datasourceUtils';
 import { buildV1ChartDataPayload } from 'src/explore/exploreUtils';
 import { getChartRequiredFieldsMissingMessage } from 'src/utils/getChartRequiredFieldsMissingMessage';
+import { findPermission } from 'src/utils/findPermission';
 import { DataTablesPane } from '../DataTablesPane';
 import { ChartPills } from '../ChartPills';
 import { ExploreAlert } from '../ExploreAlert';
@@ -71,6 +73,7 @@ const propTypes = {
   chart: chartPropShape,
   errorMessage: PropTypes.node,
   triggerRender: PropTypes.bool,
+  canExportData: PropTypes.bool,
 };
 
 const GUTTER_SIZE_FACTOR = 1.25;
@@ -237,6 +240,10 @@ const ExploreChartPanel = ({
     setShowSplit(isOpen);
   }, []);
 
+  const canExportData = useSelector(state =>
+    findPermission('can_csv', 'Superset', state.user?.roles),
+  );
+
   const renderChart = useCallback(
     () => (
       <div
@@ -270,6 +277,7 @@ const ExploreChartPanel = ({
             timeout={timeout}
             triggerQuery={chart.triggerQuery}
             vizType={vizType}
+            canExportData={canExportData}
           />
         )}
       </div>