feat(explore): make dnd controls clickable (apache#16119)

* Make ghost buttons clickable

* Popover for column control

* Make column dnd ghost button clickable

* Prefill operator only if column is defined

* Remove data-tests

* lint fix

* Hide new features behind a feature flag

* Change ghost button texts

* Remove caret for non clickable columns

superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx

@@ -0,0 +1,223 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+/* eslint-disable camelcase */
+import React, { useCallback, useMemo, useState } from 'react';
+import Tabs from 'src/components/Tabs';
+import Button from 'src/components/Button';
+import { NativeSelect as Select } from 'src/components/Select';
+import { t, styled } from '@superset-ui/core';
+
+import { Form, FormItem } from 'src/components/Form';
+import { StyledColumnOption } from 'src/explore/components/optionRenderers';
+import { ColumnMeta } from '@superset-ui/chart-controls';
+
+const StyledSelect = styled(Select)`
+  .metric-option {
+    & > svg {
+      min-width: ${({ theme }) => `${theme.gridUnit * 4}px`};
+    }
+    & > .option-label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+`;
+
+interface ColumnSelectPopoverProps {
+  columns: ColumnMeta[];
+  editedColumn?: ColumnMeta;
+  onChange: (column: ColumnMeta) => void;
+  onClose: () => void;
+}
+
+const ColumnSelectPopover = ({
+  columns,
+  editedColumn,
+  onChange,
+  onClose,
+}: ColumnSelectPopoverProps) => {
+  const [
+    initialCalculatedColumn,
+    initialSimpleColumn,
+  ] = editedColumn?.expression
+    ? [editedColumn, undefined]
+    : [undefined, editedColumn];
+  const [selectedCalculatedColumn, setSelectedCalculatedColumn] = useState(
+    initialCalculatedColumn,
+  );
+  const [selectedSimpleColumn, setSelectedSimpleColumn] = useState(
+    initialSimpleColumn,
+  );
+
+  const [calculatedColumns, simpleColumns] = useMemo(
+    () =>
+      columns?.reduce(
+        (acc: [ColumnMeta[], ColumnMeta[]], column: ColumnMeta) => {
+          if (column.expression) {
+            acc[0].push(column);
+          } else {
+            acc[1].push(column);
+          }
+          return acc;
+        },
+        [[], []],
+      ),
+    [columns],
+  );
+
+  const onCalculatedColumnChange = useCallback(
+    selectedColumnName => {
+      const selectedColumn = calculatedColumns.find(
+        col => col.column_name === selectedColumnName,
+      );
+      setSelectedCalculatedColumn(selectedColumn);
+      setSelectedSimpleColumn(undefined);
+    },
+    [calculatedColumns],
+  );
+
+  const onSimpleColumnChange = useCallback(
+    selectedColumnName => {
+      const selectedColumn = simpleColumns.find(
+        col => col.column_name === selectedColumnName,
+      );
+      setSelectedCalculatedColumn(undefined);
+      setSelectedSimpleColumn(selectedColumn);
+    },
+    [simpleColumns],
+  );
+
+  const defaultActiveTabKey =
+    initialSimpleColumn || calculatedColumns.length === 0 ? 'simple' : 'saved';
+
+  const onSave = useCallback(() => {
+    const selectedColumn = selectedCalculatedColumn || selectedSimpleColumn;
+    if (!selectedColumn) {
+      return;
+    }
+    onChange(selectedColumn);
+    onClose();
+  }, [onChange, onClose, selectedCalculatedColumn, selectedSimpleColumn]);
+
+  const onResetStateAndClose = useCallback(() => {
+    setSelectedCalculatedColumn(initialCalculatedColumn);
+    setSelectedSimpleColumn(initialSimpleColumn);
+    onClose();
+  }, [initialCalculatedColumn, initialSimpleColumn, onClose]);
+
+  const stateIsValid = selectedCalculatedColumn || selectedSimpleColumn;
+  const hasUnsavedChanges =
+    selectedCalculatedColumn?.column_name !==
+      initialCalculatedColumn?.column_name ||
+    selectedSimpleColumn?.column_name !== initialSimpleColumn?.column_name;
+
+  const filterOption = useCallback(
+    (input, option) =>
+      option?.filterBy.toLowerCase().indexOf(input.toLowerCase()) >= 0,
+    [],
+  );
+
+  const getPopupContainer = useCallback(
+    (triggerNode: any) => triggerNode.parentNode,
+    [],
+  );
+
+  return (
+    <Form layout="vertical" id="metrics-edit-popover">
+      <Tabs
+        id="adhoc-metric-edit-tabs"
+        defaultActiveKey={defaultActiveTabKey}
+        className="adhoc-metric-edit-tabs"
+        allowOverflow
+      >
+        <Tabs.TabPane key="saved" tab={t('Saved')}>
+          <FormItem label={t('Saved expressions')}>
+            <StyledSelect
+              value={selectedCalculatedColumn?.column_name}
+              getPopupContainer={getPopupContainer}
+              onChange={onCalculatedColumnChange}
+              allowClear
+              showSearch
+              autoFocus={!selectedCalculatedColumn}
+              filterOption={filterOption}
+              placeholder={t('%s column(s)', calculatedColumns.length)}
+            >
+              {calculatedColumns.map(calculatedColumn => (
+                <Select.Option
+                  value={calculatedColumn.column_name}
+                  filterBy={
+                    calculatedColumn.verbose_name ||
+                    calculatedColumn.column_name
+                  }
+                  key={calculatedColumn.column_name}
+                >
+                  <StyledColumnOption column={calculatedColumn} showType />
+                </Select.Option>
+              ))}
+            </StyledSelect>
+          </FormItem>
+        </Tabs.TabPane>
+        <Tabs.TabPane key="simple" tab={t('Simple')}>
+          <FormItem label={t('Column')}>
+            <Select
+              value={selectedSimpleColumn?.column_name}
+              getPopupContainer={getPopupContainer}
+              onChange={onSimpleColumnChange}
+              allowClear
+              showSearch
+              autoFocus={!selectedSimpleColumn}
+              filterOption={filterOption}
+              placeholder={t('%s column(s)', simpleColumns.length)}
+            >
+              {simpleColumns.map(simpleColumn => (
+                <Select.Option
+                  value={simpleColumn.column_name}
+                  filterBy={
+                    simpleColumn.verbose_name || simpleColumn.column_name
+                  }
+                  key={simpleColumn.column_name}
+                >
+                  <StyledColumnOption column={simpleColumn} showType />
+                </Select.Option>
+              ))}
+            </Select>
+          </FormItem>
+        </Tabs.TabPane>
+      </Tabs>
+      <div>
+        <Button buttonSize="small" onClick={onResetStateAndClose} cta>
+          {t('Close')}
+        </Button>
+        <Button
+          disabled={!stateIsValid}
+          buttonStyle={
+            hasUnsavedChanges && stateIsValid ? 'primary' : 'default'
+          }
+          buttonSize="small"
+          onClick={onSave}
+          cta
+        >
+          {t('Save')}
+        </Button>
+      </div>
+    </Form>
+  );
+};
+
+export default ColumnSelectPopover;

superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopoverTrigger.tsx

@@ -0,0 +1,99 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { useCallback, useMemo, useState } from 'react';
+import { ColumnMeta } from '@superset-ui/chart-controls';
+import Popover from 'src/components/Popover';
+import { ExplorePopoverContent } from 'src/explore/components/ExploreContentPopover';
+import ColumnSelectPopover from './ColumnSelectPopover';
+
+interface ColumnSelectPopoverTriggerProps {
+  columns: ColumnMeta[];
+  editedColumn?: ColumnMeta;
+  onColumnEdit: (editedColumn: ColumnMeta) => void;
+  isControlledComponent?: boolean;
+  visible?: boolean;
+  togglePopover?: (visible: boolean) => void;
+  closePopover?: () => void;
+  children: React.ReactNode;
+}
+
+const ColumnSelectPopoverTrigger = ({
+  columns,
+  editedColumn,
+  onColumnEdit,
+  isControlledComponent,
+  children,
+  ...props
+}: ColumnSelectPopoverTriggerProps) => {
+  const [popoverVisible, setPopoverVisible] = useState(false);
+
+  const togglePopover = useCallback((visible: boolean) => {
+    setPopoverVisible(visible);
+  }, []);
+
+  const closePopover = useCallback(() => {
+    setPopoverVisible(false);
+  }, []);
+
+  const {
+    visible,
+    handleTogglePopover,
+    handleClosePopover,
+  } = isControlledComponent
+    ? {
+        visible: props.visible,
+        handleTogglePopover: props.togglePopover!,
+        handleClosePopover: props.closePopover!,
+      }
+    : {
+        visible: popoverVisible,
+        handleTogglePopover: togglePopover,
+        handleClosePopover: closePopover,
+      };
+
+  const overlayContent = useMemo(
+    () => (
+      <ExplorePopoverContent>
+        <ColumnSelectPopover
+          editedColumn={editedColumn}
+          columns={columns}
+          onClose={handleClosePopover}
+          onChange={onColumnEdit}
+        />
+      </ExplorePopoverContent>
+    ),
+    [columns, editedColumn, handleClosePopover, onColumnEdit],
+  );
+
+  return (
+    <Popover
+      placement="right"
+      trigger="click"
+      content={overlayContent}
+      defaultVisible={visible}
+      visible={visible}
+      onVisibleChange={handleTogglePopover}
+      destroyTooltipOnHide
+    >
+      {children}
+    </Popover>
+  );
+};
+
+export default ColumnSelectPopoverTrigger;