From 3f23e0fe19f6845018078c96e31d2f6fb287a5f3 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Mon, 25 Jul 2022 16:37:30 +0200 Subject: [PATCH 1/2] feat(explore): UX changes in fast viz switcher --- .../superset-ui-chart-controls/src/types.ts | 2 +- .../components/ControlPanelsContainer.tsx | 9 ++++- .../VizTypeControl/FastVizSwitcher.tsx | 34 +++++++++---------- .../src/explore/controlPanels/sections.tsx | 2 -- superset-frontend/src/explore/controls.jsx | 1 - 5 files changed, 26 insertions(+), 22 deletions(-) diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/types.ts b/superset-frontend/packages/superset-ui-chart-controls/src/types.ts index 9c3a110fe4748..c2b4366ff5c5a 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/types.ts +++ b/superset-frontend/packages/superset-ui-chart-controls/src/types.ts @@ -361,7 +361,7 @@ export type ControlSetRow = ControlSetItem[]; // - superset-frontend/src/explore/components/ControlPanelsContainer.jsx // - superset-frontend/src/explore/components/ControlPanelSection.jsx export interface ControlPanelSectionConfig { - label: ReactNode; + label?: ReactNode; description?: ReactNode; expanded?: boolean; tabOverride?: TabOverride; diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx index e1e1b6e40c270..b29369d4e560d 100644 --- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx +++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx @@ -182,7 +182,8 @@ const sectionsToExpand = ( // avoid expanding time section if datasource doesn't include time column sections.reduce( (acc, section) => - section.expanded && (!isTimeSection(section) || hasTimeColumn(datasource)) + (section.expanded || !section.label) && + (!isTimeSection(section) || hasTimeColumn(datasource)) ? [...acc, String(section.label)] : acc, [] as string[], @@ -436,6 +437,12 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => { span.label { display: inline-block; } + ${!section.label && + ` + .ant-collapse-header { + display: none; + } + `} `} header={} key={sectionId} diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/FastVizSwitcher.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/FastVizSwitcher.tsx index c31b632b5fd14..aeb6311290d9f 100644 --- a/superset-frontend/src/explore/components/controls/VizTypeControl/FastVizSwitcher.tsx +++ b/superset-frontend/src/explore/components/controls/VizTypeControl/FastVizSwitcher.tsx @@ -53,19 +53,29 @@ const FEATURED_CHARTS: VizMeta[] = [ name: 'echarts_timeseries_line', icon: , }, + { + name: 'echarts_timeseries_bar', + icon: , + }, + { name: 'echarts_area', icon: }, { name: 'table', icon: }, { name: 'big_number_total', icon: , }, { name: 'pie', icon: }, - { - name: 'echarts_timeseries_bar', - icon: , - }, - { name: 'echarts_area', icon: }, ]; +const antdIconProps = { + iconSize: 'l' as const, + css: (theme: SupersetTheme) => css` + padding: ${theme.gridUnit}px; + & > * { + line-height: 0; + } + `, +}; + const VizTile = ({ isActive, isRendered, @@ -203,17 +213,7 @@ export const FastVizSwitcher = React.memo( ) { vizTiles.unshift({ name: currentSelection, - icon: ( - css` - padding: ${theme.gridUnit}px; - & > * { - line-height: 0; - } - `} - /> - ), + icon: , }); } if ( @@ -224,7 +224,7 @@ export const FastVizSwitcher = React.memo( ) { vizTiles.unshift({ name: currentViz, - icon: , + icon: , }); } return vizTiles; diff --git a/superset-frontend/src/explore/controlPanels/sections.tsx b/superset-frontend/src/explore/controlPanels/sections.tsx index edf52cf36ff11..e537dfedf9d62 100644 --- a/superset-frontend/src/explore/controlPanels/sections.tsx +++ b/superset-frontend/src/explore/controlPanels/sections.tsx @@ -22,8 +22,6 @@ import { ControlPanelSectionConfig } from '@superset-ui/chart-controls'; import { formatSelectOptions } from 'src/explore/exploreUtils'; export const datasourceAndVizType: ControlPanelSectionConfig = { - label: t('Visualization type'), - expanded: true, controlSetRows: [ ['datasource'], ['viz_type'], diff --git a/superset-frontend/src/explore/controls.jsx b/superset-frontend/src/explore/controls.jsx index e608c5fcb1947..6b325b27c9686 100644 --- a/superset-frontend/src/explore/controls.jsx +++ b/superset-frontend/src/explore/controls.jsx @@ -197,7 +197,6 @@ export const controls = { viz_type: { type: 'VizTypeControl', - label: t('Visualization type'), default: 'table', description: t('The type of visualization to display'), }, From b3bf9f3518d28582aba94c701d7f4649d8db5cdf Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Mon, 25 Jul 2022 21:04:39 +0200 Subject: [PATCH 2/2] Fix test --- .../controls/VizTypeControl/VizTypeControl.test.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx index 521755dd96658..3f71786100a2e 100644 --- a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx +++ b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx @@ -121,9 +121,7 @@ describe('VizTypeControl', () => { expect(screen.getByLabelText('bar-chart-tile')).toBeVisible(); expect(screen.getByLabelText('area-chart-tile')).toBeVisible(); expect(screen.queryByLabelText('monitor')).not.toBeInTheDocument(); - expect( - screen.queryByLabelText('current-rendered-tile'), - ).not.toBeInTheDocument(); + expect(screen.queryByLabelText('check-square')).not.toBeInTheDocument(); expect( within(screen.getByTestId('fast-viz-switcher')).getByText( @@ -189,7 +187,7 @@ describe('VizTypeControl', () => { }, }; renderWrapper(props, state); - expect(screen.getByLabelText('current-rendered-tile')).toBeVisible(); + expect(screen.getByLabelText('check-square')).toBeVisible(); expect( within(screen.getByTestId('fast-viz-switcher')).getByText('Line Chart'), ).toBeVisible();