feat: blankstate metrics columns

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

@@ -18,13 +18,23 @@
  */
 /* eslint-disable camelcase */
 import React, {
+ Dispatch,
+ SetStateAction,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
 } from 'react';
-import { AdhocColumn, isAdhocColumn, t, styled, css } from '@superset-ui/core';
+import { useSelector } from 'react-redux';
+import {
+ AdhocColumn,
+ isAdhocColumn,
+ t,
+ styled,
+ css,
+ DatasourceType,
+} from '@superset-ui/core';
 import { ColumnMeta, isSavedExpression } from '@superset-ui/chart-controls';
 import Tabs from 'src/components/Tabs';
 import Button from 'src/components/Button';
@@ -38,6 +48,7 @@ import {
  POPOVER_INITIAL_HEIGHT,
  UNRESIZABLE_POPOVER_WIDTH,
 } from 'src/explore/constants';
+import { ExplorePageState } from 'src/explore/types';
 
 const StyledSelect = styled(Select)`
  .metric-option {
@@ -60,6 +71,7 @@ interface ColumnSelectPopoverProps {
  getCurrentTab: (tab: string) => void;
  label: string;
  isTemporal?: boolean;
+ setDatasetModal?: Dispatch<SetStateAction<boolean>>;
 }
 
 const getInitialColumnValues = (
@@ -82,11 +94,16 @@ const ColumnSelectPopover = ({
  editedColumn,
  onChange,
  onClose,
+ setDatasetModal,
  setLabel,
  getCurrentTab,
  label,
  isTemporal,
 }: ColumnSelectPopoverProps) => {
+ const datasourceType = useSelector<ExplorePageState, string | undefined>(
+ state => state.explore.datasource.type,
+ );
+ console.log('datasource', datasourceType);
  const [initialLabel] = useState(label);
  const [initialAdhocColumn, initialCalculatedColumn, initialSimpleColumn] =
  getInitialColumnValues(editedColumn);
@@ -214,6 +231,11 @@ const ColumnSelectPopover = ({
  sqlEditorRef.current?.editor.resize();
  }, []);
 
+ const setDatasetAndClose = () => {
+ if (setDatasetModal) setDatasetModal(true);
+ onClose();
+ };
+
  const stateIsValid =
  adhocColumn || selectedCalculatedColumn || selectedSimpleColumn;
  const hasUnsavedChanges =
@@ -226,6 +248,8 @@ const ColumnSelectPopover = ({
  const savedExpressionsLabel = t('Saved expressions');
  const simpleColumnsLabel = t('Column');
 
+ console.log(calculatedColumns.length > 0);
+ console.log(datasourceType === DatasourceType.Query);
  return (
  <Form layout="vertical" id="metrics-edit-popover">
  <Tabs
@@ -261,7 +285,7 @@ const ColumnSelectPopover = ({
  }))}
  />
  </FormItem>
- ) : (
+ ) : datasourceType === DatasourceType.Table ? (
  <EmptyStateSmall
  image="empty.svg"
  title={
@@ -279,16 +303,63 @@ const ColumnSelectPopover = ({
  )
  }
  />
+ ) : (
+ <EmptyStateSmall
+ image="empty.svg"
+ title={
+ isTemporal
+ ? t('No temporal columns found')
+ : t('No saved expressions found')
+ }
+ description={
+ isTemporal ? (
+ <>
+ <span
+ role="button"
+ tabIndex={0}
+ onClick={setDatasetAndClose}
+ >
+ {t('Create a dataset')}
+ </span>{' '}
+ {t(' to mark a column as a time column')}
+ </>
+ ) : (
+ <>
+ <span
+ role="button"
+ tabIndex={0}
+ onClick={setDatasetAndClose}
+ >
+ {t('Create a dataset')}
+ </span>{' '}
+ {t(' to add calculated columns')}
+ </>
+ )
+ }
+ />
  )}
  </Tabs.TabPane>
  <Tabs.TabPane key="simple" tab={t('Simple')}>
  {isTemporal && simpleColumns.length === 0 ? (
  <EmptyStateSmall
  image="empty.svg"
  title={t('No temporal columns found')}
- description={t(
- 'Mark a column as temporal in "Edit datasource" modal',
- )}
+ description={
+ datasourceType === DatasourceType.Table ? (
+ t('Mark a column as temporal in "Edit datasource" modal')
+ ) : (
+ <>
+ <span
+ role="button"
+ tabIndex={0}
+ onClick={setDatasetAndClose}
+ >
+ {t('Create a dataset')}
+ </span>{' '}
+ {t(' to mark a column as a time column')}
+ </>
+ )
+ }
  />
  ) : (
  <FormItem label={simpleColumnsLabel}>

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

@@ -17,9 +17,11 @@
  * under the License.
  */
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
 import { AdhocColumn, t, isAdhocColumn } from '@superset-ui/core';
 import { ColumnMeta, isColumnMeta } from '@superset-ui/chart-controls';
 import { ExplorePopoverContent } from 'src/explore/components/ExploreContentPopover';
+import { SaveDatasetModal } from 'src/SqlLab/components/SaveDatasetModal';
 import ColumnSelectPopover from './ColumnSelectPopover';
 import { DndColumnSelectPopoverTitle } from './DndColumnSelectPopoverTitle';
 import ControlPopover from '../ControlPopover/ControlPopover';
@@ -48,10 +50,13 @@ const ColumnSelectPopoverTrigger = ({
  isTemporal,
  ...props
 }: ColumnSelectPopoverTriggerProps) => {
+ // @ts-ignore
+ const datasource = useSelector(state => state.explore.datasource);
  const [popoverLabel, setPopoverLabel] = useState(defaultPopoverLabel);
  const [popoverVisible, setPopoverVisible] = useState(false);
  const [isTitleEditDisabled, setIsTitleEditDisabled] = useState(true);
  const [hasCustomLabel, setHasCustomLabel] = useState(false);
+ const [showDatasetModal, setDatasetModal] = useState(false);
 
  let initialPopoverLabel = defaultPopoverLabel;
  if (editedColumn && isColumnMeta(editedColumn)) {
@@ -95,6 +100,7 @@ const ColumnSelectPopoverTrigger = ({
  <ColumnSelectPopover
  editedColumn={editedColumn}
  columns={columns}
+ setDatasetModal={setDatasetModal}
  onClose={handleClosePopover}
  onChange={onColumnEdit}
  label={popoverLabel}
@@ -133,17 +139,31 @@ const ColumnSelectPopoverTrigger = ({
  );
 
  return (
- <ControlPopover
- trigger="click"
- content={overlayContent}
- defaultVisible={visible}
- visible={visible}
- onVisibleChange={handleTogglePopover}
- title={popoverTitle}
- destroyTooltipOnHide
- >
- {children}
- </ControlPopover>
+ <>
+ {showDatasetModal && (
+ <SaveDatasetModal
+ visible={showDatasetModal}
+ onHide={() => setDatasetModal(false)}
+ buttonTextOnSave={t('Save')}
+ buttonTextOnOverwrite={t('Overwrite')}
+ modalDescription={t(
+ 'Save this query as a virtual dataset to continue exploring',
+ )}
+ datasource={datasource}
+ />
+ )}
+ <ControlPopover
+ trigger="click"
+ content={overlayContent}
+ defaultVisible={visible}
+ visible={visible}
+ onVisibleChange={handleTogglePopover}
+ title={popoverTitle}
+ destroyTooltipOnHide
+ >
+ {children}
+ </ControlPopover>
+ </>
  );
 };
 

superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.test.tsx

@@ -34,13 +34,17 @@ const defaultProps: DndColumnSelectProps = {
 };
 
 test('renders with default props', () => {
- render(<DndColumnSelect {...defaultProps} />, { useDnd: true });
+ render(<DndColumnSelect {...defaultProps} />, {
+ useDnd: true,
+ useRedux: true,
+ });
  expect(screen.getByText('Drop columns here')).toBeInTheDocument();
 });
 
 test('renders with value', () => {
  render(<DndColumnSelect {...defaultProps} value="string" />, {
  useDnd: true,
+ useRedux: true,
  });
  expect(screen.getByText('Column A')).toBeInTheDocument();
 });
@@ -55,7 +59,7 @@ test('renders adhoc column', () => {
  expressionType: 'SQL',
  }}
  />,
- { useDnd: true },
+ { useDnd: true, useRedux: true },
  );
  expect(screen.getByText('adhoc column')).toBeVisible();
  expect(screen.getByLabelText('calculator')).toBeVisible();

superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx

@@ -19,7 +19,7 @@
 /* eslint-disable camelcase */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { t, styled, ensureIsArray } from '@superset-ui/core';
+import { t, styled, ensureIsArray, DatasourceType } from '@superset-ui/core';
 import Tabs from 'src/components/Tabs';
 import Button from 'src/components/Button';
 import { Select } from 'src/components';
@@ -370,14 +370,34 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
  {...savedSelectProps}
  />
  </FormItem>
- ) : (
+ ) : datasource.type === DatasourceType.Table ? (
  <EmptyStateSmall
  image="empty.svg"
  title={t('No saved metrics found')}
  description={t(
  'Add metrics to dataset in "Edit datasource" modal',
  )}
  />
+ ) : (
+ <EmptyStateSmall
+ image="empty.svg"
+ title={t('No saved metrics found')}
+ description={
+ <>
+ <span
+ tabIndex={0}
+ role="button"
+ onClick={() => {
+ this.props.handleDatasetModal(true);
+ this.props.onClose();
+ }}
+ >
+ {t('Create a dataset')}{' '}
+ </span>
+ {t('to add metrics')}
+ </>
+ }
+ />
  )}
  </Tabs.TabPane>
  <Tabs.TabPane