feat(explore): UX changes in fast viz switcher (#20848)

* feat(explore): UX changes in fast viz switcher * Fix test
apache · Jul 26, 2022 · 5c2c2e8 · 5c2c2e8
1 parent 5d107b8
commit 5c2c2e8
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 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
@@ -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
@@ -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={<PanelHeader />}
         key={sectionId}

diff --git 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: <Icons.LineChartTile />,
   },
+  {
+    name: 'echarts_timeseries_bar',
+    icon: <Icons.BarChartTile />,
+  },
+  { name: 'echarts_area', icon: <Icons.AreaChartTile /> },
   { name: 'table', icon: <Icons.TableChartTile /> },
   {
     name: 'big_number_total',
     icon: <Icons.BigNumberChartTile />,
   },
   { name: 'pie', icon: <Icons.PieChartTile /> },
-  {
-    name: 'echarts_timeseries_bar',
-    icon: <Icons.BarChartTile />,
-  },
-  { name: 'echarts_area', icon: <Icons.AreaChartTile /> },
 ];
 
+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: (
-            <Icons.MonitorOutlined
-              iconSize="l"
-              css={(theme: SupersetTheme) => css`
-                padding: ${theme.gridUnit}px;
-                & > * {
-                  line-height: 0;
-                }
-              `}
-            />
-          ),
+          icon: <Icons.MonitorOutlined {...antdIconProps} />,
         });
       }
       if (
@@ -224,7 +224,7 @@ export const FastVizSwitcher = React.memo(
       ) {
         vizTiles.unshift({
           name: currentViz,
-          icon: <Icons.CurrentRenderedTile />,
+          icon: <Icons.CheckSquareOutlined {...antdIconProps} />,
         });
       }
       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
@@ -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
@@ -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
@@ -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'),
   },