From 44c8b1d7662b1521b84afa5633ed1d23f5a57f6d Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Fri, 11 Feb 2022 17:42:54 +0100 Subject: [PATCH] feat(explore): Implement empty states for column and metrics popovers --- .../src/shared-controls/dndControls.tsx | 1 + .../ColumnSelectPopover.tsx | 110 ++++++++++++------ .../ColumnSelectPopoverTrigger.tsx | 4 + .../DndColumnSelect.tsx | 4 + .../AdhocMetricEditPopover/index.jsx | 41 ++++--- superset-frontend/src/explore/constants.ts | 1 + 6 files changed, 108 insertions(+), 53 deletions(-) diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/dndControls.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/dndControls.tsx index c3c34d1c2eccc..5c06a54044c50 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/dndControls.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/dndControls.tsx @@ -186,6 +186,7 @@ export const dnd_granularity_sqla: typeof dndGroupByControl = { options, default: datasource?.main_dttm_col || temporalColumns[0]?.column_name || null, + isTemporal: true, }; }, }; diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx index 8be4b10c3f5bd..924a4b472341e 100644 --- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx +++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx @@ -36,8 +36,12 @@ import { Select } from 'src/components'; import { Form, FormItem } from 'src/components/Form'; import { SQLEditor } from 'src/components/AsyncAceEditor'; +import { EmptyStateSmall } from 'src/components/EmptyState'; import { StyledColumnOption } from 'src/explore/components/optionRenderers'; -import { POPOVER_INITIAL_HEIGHT } from 'src/explore/constants'; +import { + POPOVER_INITIAL_HEIGHT, + UNRESIZABLE_POPOVER_WIDTH, +} from 'src/explore/constants'; const StyledSelect = styled(Select)` .metric-option { @@ -59,6 +63,7 @@ interface ColumnSelectPopoverProps { setLabel: (title: string) => void; getCurrentTab: (tab: string) => void; label: string; + isTemporal?: boolean; } const getInitialColumnValues = ( @@ -84,6 +89,7 @@ const ColumnSelectPopover = ({ setLabel, getCurrentTab, label, + isTemporal, }: ColumnSelectPopoverProps) => { const [initialLabel] = useState(label); const [initialAdhocColumn, initialCalculatedColumn, initialSimpleColumn] = @@ -234,48 +240,80 @@ const ColumnSelectPopover = ({ allowOverflow css={css` height: ${POPOVER_INITIAL_HEIGHT}px; + width: ${UNRESIZABLE_POPOVER_WIDTH}px; `} > - - ({ - value: calculatedColumn.column_name, - label: - calculatedColumn.verbose_name || calculatedColumn.column_name, - customLabel: ( - - ), - key: calculatedColumn.column_name, - }))} + {calculatedColumns.length > 0 ? ( + + ({ + value: calculatedColumn.column_name, + label: + calculatedColumn.verbose_name || + calculatedColumn.column_name, + customLabel: ( + + ), + key: calculatedColumn.column_name, + }))} + /> + + ) : ( + - + )} - - ({ + value: simpleColumn.column_name, + label: simpleColumn.verbose_name || simpleColumn.column_name, + customLabel: ( + + ), + key: simpleColumn.column_name, + }))} + /> + + )} diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopoverTrigger.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopoverTrigger.tsx index 9f411a951d295..42251464dfdbb 100644 --- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopoverTrigger.tsx +++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopoverTrigger.tsx @@ -37,6 +37,7 @@ interface ColumnSelectPopoverTriggerProps { togglePopover?: (visible: boolean) => void; closePopover?: () => void; children: React.ReactNode; + isTemporal?: boolean; } const defaultPopoverLabel = t('My column'); @@ -48,6 +49,7 @@ const ColumnSelectPopoverTrigger = ({ onColumnEdit, isControlledComponent, children, + isTemporal, ...props }: ColumnSelectPopoverTriggerProps) => { const [popoverLabel, setPopoverLabel] = useState(defaultPopoverLabel); @@ -102,6 +104,7 @@ const ColumnSelectPopoverTrigger = ({ label={popoverLabel} setLabel={setPopoverLabel} getCurrentTab={getCurrentTab} + isTemporal={isTemporal} /> ), @@ -110,6 +113,7 @@ const ColumnSelectPopoverTrigger = ({ editedColumn, getCurrentTab, handleClosePopover, + isTemporal, onColumnEdit, popoverLabel, ], diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx index e8345acfd976d..fd360a5e36859 100644 --- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx +++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx @@ -37,6 +37,7 @@ import { DndControlProps } from './types'; export type DndColumnSelectProps = DndControlProps & { options: Record; + isTemporal?: boolean; }; export function DndColumnSelect(props: DndColumnSelectProps) { @@ -49,6 +50,7 @@ export function DndColumnSelect(props: DndColumnSelectProps) { ghostButtonText, name, label, + isTemporal, } = props; const [newColumnPopoverVisible, setNewColumnPopoverVisible] = useState(false); @@ -151,6 +153,7 @@ export function DndColumnSelect(props: DndColumnSelectProps) { onChange(optionSelector.getValues()); }} editedColumn={column} + isTemporal={isTemporal} >
diff --git a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx index bc0cb999bcdbe..be5d15ffb5d8f 100644 --- a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx +++ b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx @@ -19,17 +19,16 @@ /* eslint-disable camelcase */ import React from 'react'; import PropTypes from 'prop-types'; +import { t, styled, ensureIsArray } from '@superset-ui/core'; import Tabs from 'src/components/Tabs'; import Button from 'src/components/Button'; import { Select } from 'src/components'; import { Tooltip } from 'src/components/Tooltip'; -import { t, styled } from '@superset-ui/core'; - +import { EmptyStateSmall } from 'src/components/EmptyState'; import { Form, FormItem } from 'src/components/Form'; import { SQLEditor } from 'src/components/AsyncAceEditor'; import sqlKeywords from 'src/SqlLab/utils/sqlKeywords'; import { noOp } from 'src/utils/common'; - import { AGGREGATES_OPTIONS, POPOVER_INITIAL_HEIGHT, @@ -366,21 +365,29 @@ export default class AdhocMetricEditPopover extends React.PureComponent { allowOverflow > - - ({ - value: savedMetric.metric_name, - label: savedMetric.metric_name, - customLabel: this.renderMetricOption(savedMetric), - key: savedMetric.id, - })) - : [] - } - {...savedSelectProps} + {ensureIsArray(savedMetricsOptions).length > 0 ? ( + + ({ + value: savedMetric.metric_name, + label: savedMetric.metric_name, + customLabel: this.renderMetricOption(savedMetric), + key: savedMetric.id, + }), + )} + {...savedSelectProps} + /> + + ) : ( + - + )}