fix: Pasting text issues in MetricsControl and AdhocFilterControl inputs (#11445)

* Fix paste not working in Metrics and Filter inputs

* Use noOp instead of empty function

* Use default Select component instead of OnPasteSelect

* Revert onPaste override

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

@@ -21,7 +21,7 @@ import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
 
-import OnPasteSelect from 'src/components/Select/OnPasteSelect';
+import Select from 'src/components/Select';
 import AdhocFilter, {
   EXPRESSION_TYPES,
   CLAUSES,
@@ -73,14 +73,14 @@ function setup(overrides) {
 }
 
 describe('AdhocFilterControl', () => {
-  it('renders an onPasteSelect', () => {
+  it('renders Select', () => {
     const { wrapper } = setup();
-    expect(wrapper.find(OnPasteSelect)).toExist();
+    expect(wrapper.find(Select)).toExist();
   });
 
   it('handles saved metrics being selected to filter on', () => {
     const { wrapper, onChange } = setup({ value: [] });
-    const select = wrapper.find(OnPasteSelect);
+    const select = wrapper.find(Select);
     select.simulate('change', [{ saved_metric_name: 'sum__value' }]);
 
     const adhocFilter = onChange.lastCall.args[0][0];
@@ -100,7 +100,7 @@ describe('AdhocFilterControl', () => {
 
   it('handles adhoc metrics being selected to filter on', () => {
     const { wrapper, onChange } = setup({ value: [] });
-    const select = wrapper.find(OnPasteSelect);
+    const select = wrapper.find(Select);
     select.simulate('change', [sumValueAdhocMetric]);
 
     const adhocFilter = onChange.lastCall.args[0][0];
@@ -120,7 +120,7 @@ describe('AdhocFilterControl', () => {
 
   it('handles columns being selected to filter on', () => {
     const { wrapper, onChange } = setup({ value: [] });
-    const select = wrapper.find(OnPasteSelect);
+    const select = wrapper.find(Select);
     select.simulate('change', [columns[0]]);
 
     const adhocFilter = onChange.lastCall.args[0][0];
@@ -140,7 +140,7 @@ describe('AdhocFilterControl', () => {
 
   it('persists existing filters even when new filters are added', () => {
     const { wrapper, onChange } = setup();
-    const select = wrapper.find(OnPasteSelect);
+    const select = wrapper.find(Select);
     select.simulate('change', [simpleAdhocFilter, columns[0]]);
 
     const existingAdhocFilter = onChange.lastCall.args[0][0];

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

@@ -23,7 +23,7 @@ import { shallow } from 'enzyme';
 
 import MetricsControl from 'src/explore/components/controls/MetricsControl';
 import { AGGREGATES } from 'src/explore/constants';
-import OnPasteSelect from 'src/components/Select/OnPasteSelect';
+import Select from 'src/components/Select';
 import AdhocMetric, { EXPRESSION_TYPES } from 'src/explore/AdhocMetric';
 
 const defaultProps = {
@@ -63,9 +63,9 @@ const sumValueAdhocMetric = new AdhocMetric({
 });
 
 describe('MetricsControl', () => {
-  it('renders an OnPasteSelect', () => {
+  it('renders Select', () => {
     const { wrapper } = setup();
-    expect(wrapper.find(OnPasteSelect)).toExist();
+    expect(wrapper.find(Select)).toExist();
   });
 
   describe('constructor', () => {
@@ -152,14 +152,14 @@ describe('MetricsControl', () => {
   describe('onChange', () => {
     it('handles saved metrics being selected', () => {
       const { wrapper, onChange } = setup();
-      const select = wrapper.find(OnPasteSelect);
+      const select = wrapper.find(Select);
       select.simulate('change', [{ metric_name: 'sum__value' }]);
       expect(onChange.lastCall.args).toEqual([['sum__value']]);
     });
 
     it('handles columns being selected', () => {
       const { wrapper, onChange } = setup();
-      const select = wrapper.find(OnPasteSelect);
+      const select = wrapper.find(Select);
       select.simulate('change', [valueColumn]);
 
       const adhocMetric = onChange.lastCall.args[0][0];
@@ -184,7 +184,7 @@ describe('MetricsControl', () => {
     it('handles aggregates being selected', () => {
       return new Promise(done => {
         const { wrapper, onChange } = setup();
-        const select = wrapper.find(OnPasteSelect);
+        const select = wrapper.find(Select);
 
         // mock out the Select ref
         const instance = wrapper.instance();
@@ -220,7 +220,7 @@ describe('MetricsControl', () => {
 
     it('preserves existing selected AdhocMetrics', () => {
       const { wrapper, onChange } = setup();
-      const select = wrapper.find(OnPasteSelect);
+      const select = wrapper.find(Select);
       select.simulate('change', [
         { metric_name: 'sum__value' },
         sumValueAdhocMetric,
@@ -262,6 +262,18 @@ describe('MetricsControl', () => {
       wrapper.instance().checkIfAggregateInInput('colu');
       expect(wrapper.state('aggregateInInput')).toBeNull();
     });
+
+    it('handles an aggregate in the input when paste event fires', () => {
+      const { wrapper } = setup();
+      expect(wrapper.state('aggregateInInput')).toBeNull();
+
+      const mEvent = {
+        clipboardData: { getData: jest.fn().mockReturnValueOnce('AVG(') },
+      };
+      const select = wrapper.find(Select);
+      select.simulate('paste', mEvent);
+      expect(wrapper.state('aggregateInInput')).toBe(AGGREGATES.AVG);
+    });
   });
 
   describe('option filter', () => {

superset-frontend/src/explore/components/controls/AdhocFilterControl.jsx

@@ -21,8 +21,7 @@ import PropTypes from 'prop-types';
 
 import { t, logging, SupersetClient } from '@superset-ui/core';
 
-import OnPasteSelect from 'src/components/Select/OnPasteSelect';
-
+import Select from 'src/components/Select';
 import ControlHeader from '../ControlHeader';
 import adhocFilterType from '../../propTypes/adhocFilterType';
 import adhocMetricType from '../../propTypes/adhocMetricType';
@@ -267,7 +266,7 @@ export default class AdhocFilterControl extends React.Component {
     return (
       <div className="metrics-select" data-test="adhoc-filter-control">
         <ControlHeader {...this.props} />
-        <OnPasteSelect
+        <Select
           isMulti
           isLoading={this.props.isLoading}
           name={`select-${this.props.name}`}

superset-frontend/src/explore/components/controls/MetricsControl.jsx

@@ -21,8 +21,7 @@ import PropTypes from 'prop-types';
 import { t } from '@superset-ui/core';
 import { isEqual } from 'lodash';
 
-import OnPasteSelect from 'src/components/Select/OnPasteSelect';
-
+import Select from 'src/components/Select';
 import ControlHeader from '../ControlHeader';
 import MetricDefinitionOption from '../MetricDefinitionOption';
 import MetricDefinitionValue from '../MetricDefinitionValue';
@@ -143,6 +142,7 @@ export default class MetricsControl extends React.PureComponent {
   constructor(props) {
     super(props);
     this.onChange = this.onChange.bind(this);
+    this.onPaste = this.onPaste.bind(this);
     this.onMetricEdit = this.onMetricEdit.bind(this);
     this.checkIfAggregateInInput = this.checkIfAggregateInInput.bind(this);
     this.optionsForSelect = this.optionsForSelect.bind(this);
@@ -258,6 +258,14 @@ export default class MetricsControl extends React.PureComponent {
     this.props.onChange(this.props.multi ? optionValues : optionValues[0]);
   }
 
+  onPaste(evt) {
+    const clipboard = evt.clipboardData.getData('Text');
+    if (!clipboard) {
+      return;
+    }
+    this.checkIfAggregateInInput(clipboard);
+  }
+
   checkIfAggregateInInput(input) {
     const lowercaseInput = input.toLowerCase();
     const aggregateInInput =
@@ -335,7 +343,7 @@ export default class MetricsControl extends React.PureComponent {
     return (
       <div className="metrics-select">
         <ControlHeader {...this.props} />
-        <OnPasteSelect
+        <Select
           isLoading={this.props.isLoading}
           isMulti={this.props.multi}
           name={`select-${this.props.name}`}
@@ -344,6 +352,7 @@ export default class MetricsControl extends React.PureComponent {
           value={this.state.value}
           labelKey="label"
           valueKey="optionName"
+          onPaste={this.onPaste}
           clearable={this.props.clearable}
           closeOnSelect
           onChange={this.onChange}