feat(explore): adhoc column expressions [ID-3]

superset-frontend/package.json

@@ -68,35 +68,35 @@
     "@emotion/cache": "^11.4.0",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@superset-ui/chart-controls": "^0.18.20",
-    "@superset-ui/core": "^0.18.20",
-    "@superset-ui/legacy-plugin-chart-calendar": "^0.18.20",
-    "@superset-ui/legacy-plugin-chart-chord": "^0.18.20",
-    "@superset-ui/legacy-plugin-chart-country-map": "^0.18.20",
-    "@superset-ui/legacy-plugin-chart-event-flow": "^0.18.20",
-    "@superset-ui/legacy-plugin-chart-force-directed": "^0.18.20",
-    "@superset-ui/legacy-plugin-chart-heatmap": "^0.18.20",
-    "@superset-ui/legacy-plugin-chart-histogram": "^0.18.20",
-    "@superset-ui/legacy-plugin-chart-horizon": "^0.18.20",
-    "@superset-ui/legacy-plugin-chart-map-box": "^0.18.20",
-    "@superset-ui/legacy-plugin-chart-paired-t-test": "^0.18.20",
-    "@superset-ui/legacy-plugin-chart-parallel-coordinates": "^0.18.20",
-    "@superset-ui/legacy-plugin-chart-partition": "^0.18.20",
-    "@superset-ui/legacy-plugin-chart-pivot-table": "^0.18.20",
-    "@superset-ui/legacy-plugin-chart-rose": "^0.18.20",
-    "@superset-ui/legacy-plugin-chart-sankey": "^0.18.20",
-    "@superset-ui/legacy-plugin-chart-sankey-loop": "^0.18.20",
-    "@superset-ui/legacy-plugin-chart-sunburst": "^0.18.20",
-    "@superset-ui/legacy-plugin-chart-treemap": "^0.18.20",
-    "@superset-ui/legacy-plugin-chart-world-map": "^0.18.20",
-    "@superset-ui/legacy-preset-chart-big-number": "^0.18.20",
+    "@superset-ui/chart-controls": "^0.18.23",
+    "@superset-ui/core": "^0.18.23",
+    "@superset-ui/legacy-plugin-chart-calendar": "^0.18.23",
+    "@superset-ui/legacy-plugin-chart-chord": "^0.18.23",
+    "@superset-ui/legacy-plugin-chart-country-map": "^0.18.23",
+    "@superset-ui/legacy-plugin-chart-event-flow": "^0.18.23",
+    "@superset-ui/legacy-plugin-chart-force-directed": "^0.18.23",
+    "@superset-ui/legacy-plugin-chart-heatmap": "^0.18.23",
+    "@superset-ui/legacy-plugin-chart-histogram": "^0.18.23",
+    "@superset-ui/legacy-plugin-chart-horizon": "^0.18.23",
+    "@superset-ui/legacy-plugin-chart-map-box": "^0.18.23",
+    "@superset-ui/legacy-plugin-chart-paired-t-test": "^0.18.23",
+    "@superset-ui/legacy-plugin-chart-parallel-coordinates": "^0.18.23",
+    "@superset-ui/legacy-plugin-chart-partition": "^0.18.23",
+    "@superset-ui/legacy-plugin-chart-pivot-table": "^0.18.23",
+    "@superset-ui/legacy-plugin-chart-rose": "^0.18.23",
+    "@superset-ui/legacy-plugin-chart-sankey": "^0.18.23",
+    "@superset-ui/legacy-plugin-chart-sankey-loop": "^0.18.23",
+    "@superset-ui/legacy-plugin-chart-sunburst": "^0.18.23",
+    "@superset-ui/legacy-plugin-chart-treemap": "^0.18.23",
+    "@superset-ui/legacy-plugin-chart-world-map": "^0.18.23",
+    "@superset-ui/legacy-preset-chart-big-number": "^0.18.23",
     "@superset-ui/legacy-preset-chart-deckgl": "^0.4.13",
-    "@superset-ui/legacy-preset-chart-nvd3": "^0.18.20",
-    "@superset-ui/plugin-chart-echarts": "^0.18.20",
-    "@superset-ui/plugin-chart-pivot-table": "^0.18.20",
-    "@superset-ui/plugin-chart-table": "^0.18.20",
-    "@superset-ui/plugin-chart-word-cloud": "^0.18.20",
-    "@superset-ui/preset-chart-xy": "^0.18.20",
+    "@superset-ui/legacy-preset-chart-nvd3": "^0.18.23",
+    "@superset-ui/plugin-chart-echarts": "^0.18.23",
+    "@superset-ui/plugin-chart-pivot-table": "^0.18.23",
+    "@superset-ui/plugin-chart-table": "^0.18.23",
+    "@superset-ui/plugin-chart-word-cloud": "^0.18.23",
+    "@superset-ui/preset-chart-xy": "^0.18.23",
     "@vx/responsive": "^0.0.195",
     "abortcontroller-polyfill": "^1.1.9",
     "antd": "^4.9.4",

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

@@ -17,15 +17,27 @@
  * under the License.
  */
 /* eslint-disable camelcase */
-import React, { useCallback, useMemo, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { AdhocColumn, t, styled, css } from '@superset-ui/core';
+import {
+  ColumnMeta,
+  isAdhocColumn,
+  isSavedExpression,
+} from '@superset-ui/chart-controls';
 import Tabs from 'src/components/Tabs';
 import Button from 'src/components/Button';
 import { Select } from 'src/components';
-import { t, styled } from '@superset-ui/core';
 
 import { Form, FormItem } from 'src/components/Form';
+import { SQLEditor } from 'src/components/AsyncAceEditor';
 import { StyledColumnOption } from 'src/explore/components/optionRenderers';
-import { ColumnMeta } from '@superset-ui/chart-controls';
+import { POPOVER_INITIAL_HEIGHT } from 'src/explore/constants';
 
 const StyledSelect = styled(Select)`
   .metric-option {
@@ -41,29 +53,48 @@ const StyledSelect = styled(Select)`
 
 interface ColumnSelectPopoverProps {
   columns: ColumnMeta[];
-  editedColumn?: ColumnMeta;
-  onChange: (column: ColumnMeta) => void;
+  editedColumn?: ColumnMeta | AdhocColumn;
+  onChange: (column: ColumnMeta | AdhocColumn) => void;
   onClose: () => void;
+  setLabel: (title: string) => void;
+  getCurrentTab: (tab: string) => void;
+  label: string;
+  isAdhocColumnsEnabled: boolean;
 }
 
 const ColumnSelectPopover = ({
   columns,
   editedColumn,
   onChange,
   onClose,
+  setLabel,
+  getCurrentTab,
+  label,
+  isAdhocColumnsEnabled,
 }: ColumnSelectPopoverProps) => {
-  const [
-    initialCalculatedColumn,
-    initialSimpleColumn,
-  ] = editedColumn?.expression
-    ? [editedColumn, undefined]
-    : [undefined, editedColumn];
-  const [selectedCalculatedColumn, setSelectedCalculatedColumn] = useState(
-    initialCalculatedColumn,
-  );
-  const [selectedSimpleColumn, setSelectedSimpleColumn] = useState(
-    initialSimpleColumn,
+  const [initialLabel] = useState(label);
+  const [initialAdhocColumn, initialCalculatedColumn, initialSimpleColumn]: [
+    AdhocColumn?,
+    ColumnMeta?,
+    ColumnMeta?,
+  ] = !editedColumn
+    ? [undefined, undefined, undefined]
+    : isAdhocColumn(editedColumn)
+    ? [editedColumn, undefined, undefined]
+    : isSavedExpression(editedColumn)
+    ? [undefined, editedColumn, undefined]
+    : [undefined, undefined, editedColumn as ColumnMeta];
+  const [adhocColumn, setAdhocColumn] = useState<AdhocColumn | undefined>(
+    initialAdhocColumn,
   );
+  const [selectedCalculatedColumn, setSelectedCalculatedColumn] = useState<
+    ColumnMeta | undefined
+  >(initialCalculatedColumn);
+  const [selectedSimpleColumn, setSelectedSimpleColumn] = useState<
+    ColumnMeta | undefined
+  >(initialSimpleColumn);
+
+  const sqlEditorRef = useRef(null);
 
   const [calculatedColumns, simpleColumns] = useMemo(
     () =>
@@ -81,15 +112,28 @@ const ColumnSelectPopover = ({
     [columns],
   );
 
+  const onSqlExpressionChange = useCallback(
+    sqlExpression => {
+      setAdhocColumn({ label, sqlExpression } as AdhocColumn);
+      setSelectedSimpleColumn(undefined);
+      setSelectedCalculatedColumn(undefined);
+    },
+    [label],
+  );
+
   const onCalculatedColumnChange = useCallback(
     selectedColumnName => {
       const selectedColumn = calculatedColumns.find(
         col => col.column_name === selectedColumnName,
       );
       setSelectedCalculatedColumn(selectedColumn);
       setSelectedSimpleColumn(undefined);
+      setAdhocColumn(undefined);
+      setLabel(
+        selectedColumn?.verbose_name || selectedColumn?.column_name || '',
+      );
     },
-    [calculatedColumns],
+    [calculatedColumns, setLabel],
   );
 
   const onSimpleColumnChange = useCallback(
@@ -99,33 +143,79 @@ const ColumnSelectPopover = ({
       );
       setSelectedCalculatedColumn(undefined);
       setSelectedSimpleColumn(selectedColumn);
+      setAdhocColumn(undefined);
+      setLabel(
+        selectedColumn?.verbose_name || selectedColumn?.column_name || '',
+      );
     },
-    [simpleColumns],
+    [setLabel, simpleColumns],
   );
 
-  const defaultActiveTabKey =
-    initialSimpleColumn || calculatedColumns.length === 0 ? 'simple' : 'saved';
+  const defaultActiveTabKey = initialAdhocColumn
+    ? 'sqlExpression'
+    : initialSimpleColumn || calculatedColumns.length === 0
+    ? 'simple'
+    : 'saved';
+
+  useEffect(() => {
+    getCurrentTab(defaultActiveTabKey);
+  }, [defaultActiveTabKey, getCurrentTab]);
 
   const onSave = useCallback(() => {
-    const selectedColumn = selectedCalculatedColumn || selectedSimpleColumn;
+    if (adhocColumn && adhocColumn.label !== label) {
+      adhocColumn.label = label;
+    }
+    const selectedColumn =
+      adhocColumn || selectedCalculatedColumn || selectedSimpleColumn;
     if (!selectedColumn) {
       return;
     }
     onChange(selectedColumn);
     onClose();
-  }, [onChange, onClose, selectedCalculatedColumn, selectedSimpleColumn]);
+  }, [
+    adhocColumn,
+    label,
+    onChange,
+    onClose,
+    selectedCalculatedColumn,
+    selectedSimpleColumn,
+  ]);
 
   const onResetStateAndClose = useCallback(() => {
     setSelectedCalculatedColumn(initialCalculatedColumn);
     setSelectedSimpleColumn(initialSimpleColumn);
+    setAdhocColumn(initialAdhocColumn);
     onClose();
-  }, [initialCalculatedColumn, initialSimpleColumn, onClose]);
+  }, [
+    initialAdhocColumn,
+    initialCalculatedColumn,
+    initialSimpleColumn,
+    onClose,
+  ]);
 
-  const stateIsValid = selectedCalculatedColumn || selectedSimpleColumn;
+  const onTabChange = useCallback(
+    tab => {
+      getCurrentTab(tab);
+      // @ts-ignore
+      sqlEditorRef.current?.editor.focus();
+    },
+    [getCurrentTab],
+  );
+
+  const onSqlEditorFocus = useCallback(() => {
+    // @ts-ignore
+    sqlEditorRef.current?.editor.resize();
+  }, []);
+
+  const stateIsValid =
+    adhocColumn || selectedCalculatedColumn || selectedSimpleColumn;
   const hasUnsavedChanges =
+    initialLabel !== label ||
     selectedCalculatedColumn?.column_name !==
       initialCalculatedColumn?.column_name ||
-    selectedSimpleColumn?.column_name !== initialSimpleColumn?.column_name;
+    selectedSimpleColumn?.column_name !== initialSimpleColumn?.column_name ||
+    adhocColumn?.sqlExpression !== initialAdhocColumn?.sqlExpression;
+
   const savedExpressionsLabel = t('Saved expressions');
   const simpleColumnsLabel = t('Column');
 
@@ -134,8 +224,12 @@ const ColumnSelectPopover = ({
       <Tabs
         id="adhoc-metric-edit-tabs"
         defaultActiveKey={defaultActiveTabKey}
+        onChange={onTabChange}
         className="adhoc-metric-edit-tabs"
         allowOverflow
+        css={css`
+          height: ${POPOVER_INITIAL_HEIGHT}px;
+        `}
       >
         <Tabs.TabPane key="saved" tab={t('Saved')}>
           <FormItem label={savedExpressionsLabel}>
@@ -178,6 +272,28 @@ const ColumnSelectPopover = ({
             />
           </FormItem>
         </Tabs.TabPane>
+        {isAdhocColumnsEnabled && (
+          <Tabs.TabPane key="sqlExpression" tab={t('Custom SQL')}>
+            <SQLEditor
+              value={
+                adhocColumn?.sqlExpression ||
+                selectedSimpleColumn?.column_name ||
+                selectedCalculatedColumn?.expression
+              }
+              onFocus={onSqlEditorFocus}
+              showLoadingForImport
+              onChange={onSqlExpressionChange}
+              width="100%"
+              height={`${POPOVER_INITIAL_HEIGHT - 80}px`}
+              showGutter={false}
+              editorProps={{ $blockScrolling: true }}
+              enableLiveAutocompletion
+              className="filter-sql-editor"
+              wrapEnabled
+              ref={sqlEditorRef}
+            />
+          </Tabs.TabPane>
+        )}
       </Tabs>
       <div>
         <Button buttonSize="small" onClick={onResetStateAndClose} cta>