From 5c2c2e804064ba674ae18abe5aec495454b7ff21 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Tue, 26 Jul 2022 08:44:17 +0200 Subject: [PATCH] feat(explore): UX changes in fast viz switcher (#20848) * feat(explore): UX changes in fast viz switcher * Fix test --- .../superset-ui-chart-controls/src/types.ts | 2 +- .../components/ControlPanelsContainer.tsx | 9 ++++- .../VizTypeControl/FastVizSwitcher.tsx | 34 +++++++++---------- .../VizTypeControl/VizTypeControl.test.tsx | 6 ++-- .../src/explore/controlPanels/sections.tsx | 2 -- superset-frontend/src/explore/controls.jsx | 1 - 6 files changed, 28 insertions(+), 26 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 9c3a110fe474..c2b4366ff5c5 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 e1e1b6e40c27..b29369d4e560 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 c31b632b5fd1..aeb6311290d9 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/components/controls/VizTypeControl/VizTypeControl.test.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx index 521755dd9665..3f71786100a2 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(); diff --git a/superset-frontend/src/explore/controlPanels/sections.tsx b/superset-frontend/src/explore/controlPanels/sections.tsx index edf52cf36ff1..e537dfedf9d6 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 e608c5fcb194..6b325b27c968 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'), },