Merge pull request #1 from MialLewis/disable_data_selection_konza

Disable data selection
MialLewis · Aug 2, 2024 · 1f7ff0e · 1f7ff0e
2 parents 3de2b7c + 4b16a68
commit 1f7ff0e
Show file tree

Hide file tree

Showing 16 changed files with 120 additions and 14 deletions.
diff --git a/superset-frontend/packages/superset-ui-core/src/chart/models/ChartProps.ts b/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;
+  /** Set chart data selectable by user */
+  dataSelectionMode?: string;
 }
 
 const DEFAULT_WIDTH = 800;
@@ -155,6 +157,8 @@ export default class ChartProps<FormData extends RawFormData = RawFormData> {
 
   theme: SupersetTheme;
 
+  dataSelectionMode?: 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,
+      dataSelectionMode,
     } = 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.dataSelectionMode = dataSelectionMode;
   }
 }
 
@@ -223,6 +229,7 @@ ChartProps.createSelector = function create(): ChartPropsSelector {
     input => input.inContextMenu,
     input => input.emitCrossFilters,
     input => input.theme,
+    input => input.dataSelectionMode,
     (
       annotationData,
       datasource,
@@ -243,6 +250,7 @@ ChartProps.createSelector = function create(): ChartPropsSelector {
       inContextMenu,
       emitCrossFilters,
       theme,
+      dataSelectionMode,
     ) =>
       new ChartProps({
         annotationData,
@@ -264,6 +272,7 @@ ChartProps.createSelector = function create(): ChartPropsSelector {
         inContextMenu,
         emitCrossFilters,
         theme,
+        dataSelectionMode,
       }),
   );
 };
diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx b/superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx
@@ -154,6 +154,7 @@ export default function PivotTableChart(props: PivotTableProps) {
     dateFormatters,
     onContextMenu,
     timeGrainSqla,
+    dataSelectionMode,
   } = props;
 
   const theme = useTheme();
@@ -555,6 +556,7 @@ export default function PivotTableChart(props: PivotTableProps) {
           subtotalOptions={subtotalOptions}
           namesMapping={verboseMap}
           onContextMenu={handleContextMenu}
+          dataSelectionMode={dataSelectionMode}
         />
       </PivotTableWrapper>
     </Styles>

diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/transformProps.ts b/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,
+    dataSelectionMode,
   } = chartProps;
   const { data, colnames, coltypes } = queriesData[0];
   const {
@@ -174,5 +175,6 @@ export default function transformProps(chartProps: ChartProps<QueryFormData>) {
     dateFormatters,
     onContextMenu,
     timeGrainSqla,
+    dataSelectionMode,
   };
 }
diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/Styles.js b/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 {

diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/TableRenderers.jsx b/superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/TableRenderers.jsx
@@ -899,7 +899,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) =>

diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/src/types.ts b/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,

diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/test/plugin/buildQuery.test.ts b/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', () => {

diff --git a/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx b/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;
+    }
   `}
 `;
diff --git a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx b/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

diff --git a/superset-frontend/plugins/plugin-chart-table/src/transformProps.ts b/superset-frontend/plugins/plugin-chart-table/src/transformProps.ts
@@ -384,6 +384,7 @@ const transformProps = (
       onContextMenu,
     },
     emitCrossFilters,
+    dataSelectionMode,
   } = chartProps;
 
   const {
@@ -643,6 +644,7 @@ const transformProps = (
     basicColorFormatters,
     startDateOffset,
     basicColorColumnFormatters,
+    dataSelectionMode: dataSelectionMode ?? 'auto',
   };
 };
 

diff --git a/superset-frontend/plugins/plugin-chart-table/src/types.ts b/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 {

diff --git a/superset-frontend/src/components/Chart/Chart.jsx b/superset-frontend/src/components/Chart/Chart.jsx
@@ -36,6 +36,7 @@ import { getUrlParam } from 'src/utils/urlUtils';
 import { isCurrentUserBot } from 'src/utils/isBot';
 import { ChartSource } from 'src/types/ChartSource';
 import { ResourceStatus } from 'src/hooks/apiResources/apiResources';
+import { findPermission } from 'src/utils/findPermission';
 import ChartRenderer from './ChartRenderer';
 import { ChartErrorMessage } from './ChartErrorMessage';
 import { getChartRequiredFieldsMissingMessage } from '../../utils/getChartRequiredFieldsMissingMessage';
@@ -82,6 +83,7 @@ const propTypes = {
   datasetsStatus: PropTypes.oneOf(['loading', 'error', 'complete']),
   isInView: PropTypes.bool,
   emitCrossFilters: PropTypes.bool,
+  user: PropTypes.object,
 };
 
 const BLANK = {};
@@ -156,6 +158,11 @@ class Chart extends PureComponent {
     super(props);
     this.handleRenderContainerFailure =
       this.handleRenderContainerFailure.bind(this);
+    this.canExportData = findPermission(
+      'can_csv',
+      'Superset',
+      this.props.user?.roles,
+    );
   }
 
   componentDidMount() {
@@ -271,6 +278,7 @@ class Chart extends PureComponent {
             {...this.props}
             source={this.props.dashboardId ? 'dashboard' : 'explore'}
             data-test={this.props.vizType}
+            dataSelectionMode={this.canExportData ? 'auto' : 'none'}
           />
         ) : (
           <Loading />

diff --git a/superset-frontend/src/components/Chart/ChartContainer.jsx b/superset-frontend/src/components/Chart/ChartContainer.jsx
@@ -24,6 +24,12 @@ import { logEvent } from '../../logger/actions';
 import Chart from './Chart';
 import { updateDataMask } from '../../dataMask/actions';
 
+function mapStateToProps(state) {
+  return {
+    user: state.user,
+  };
+}
+
 function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(
@@ -37,4 +43,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(null, mapDispatchToProps)(Chart);
+export default connect(mapStateToProps, mapDispatchToProps)(Chart);
diff --git a/superset-frontend/src/components/Chart/ChartRenderer.jsx b/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,
+  dataSelectionMode: PropTypes.string,
 };
 
 const BLANK = {};
@@ -264,6 +264,7 @@ class ChartRenderer extends Component {
       formData,
       latestQueryFormData,
       postTransformProps,
+      dataSelectionMode,
     } = this.props;
 
     const currentFormData =
@@ -362,6 +363,7 @@ class ChartRenderer extends Component {
             postTransformProps={postTransformProps}
             emitCrossFilters={emitCrossFilters}
             legendState={this.state.legendState}
+            dataSelectionMode={dataSelectionMode}
             {...drillToDetailProps}
           />
         </div>