feat(vizgallery): Double-click viz type to submit form (#20513)

* Make double-clicking on viz type submit the form. * Add tests.
apache · Jun 28, 2022 · 280b4be · 280b4be
1 parent 480ee38
commit 280b4be
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 1 deletion.
diff --git a/superset-frontend/src/addSlice/AddSliceContainer.test.tsx b/superset-frontend/src/addSlice/AddSliceContainer.test.tsx
@@ -111,6 +111,27 @@ test('renders an enabled button if datasource and viz type are selected', async
   ).toHaveLength(0);
 });
 
+test('double-click viz type does nothing if no datasource is selected', async () => {
+  const wrapper = await getWrapper();
+  wrapper.instance().gotoSlice = jest.fn();
+  wrapper.update();
+  wrapper.instance().onVizTypeDoubleClick();
+  expect(wrapper.instance().gotoSlice).not.toBeCalled();
+});
+
+test('double-click viz type submits if datasource is selected', async () => {
+  const wrapper = await getWrapper();
+  wrapper.instance().gotoSlice = jest.fn();
+  wrapper.update();
+  wrapper.setState({
+    datasource,
+    visType: 'table',
+  });
+
+  wrapper.instance().onVizTypeDoubleClick();
+  expect(wrapper.instance().gotoSlice).toBeCalled();
+});
+
 test('formats Explore url', async () => {
   const wrapper = await getWrapper();
   wrapper.setState({

diff --git a/superset-frontend/src/addSlice/AddSliceContainer.tsx b/superset-frontend/src/addSlice/AddSliceContainer.tsx
@@ -221,6 +221,7 @@ export default class AddSliceContainer extends React.PureComponent<
     this.gotoSlice = this.gotoSlice.bind(this);
     this.newLabel = this.newLabel.bind(this);
     this.loadDatasources = this.loadDatasources.bind(this);
+    this.onVizTypeDoubleClick = this.onVizTypeDoubleClick.bind(this);
   }
 
   exploreUrl() {
@@ -251,6 +252,12 @@ export default class AddSliceContainer extends React.PureComponent<
     return !(this.state.datasource?.value && this.state.visType);
   }
 
+  onVizTypeDoubleClick() {
+    if (!this.isBtnDisabled()) {
+      this.gotoSlice();
+    }
+  }
+
   newLabel(item: Dataset) {
     return (
       <Tooltip
@@ -368,6 +375,7 @@ export default class AddSliceContainer extends React.PureComponent<
                 <VizTypeGallery
                   className="viz-gallery"
                   onChange={this.changeVisType}
+                  onDoubleClick={this.onVizTypeDoubleClick}
                   selectedViz={this.state.visType}
                 />
               </StyledStepDescription>

diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx
@@ -266,4 +266,22 @@ describe('VizTypeControl', () => {
       within(visualizations).queryByText('Pie Chart'),
     ).not.toBeInTheDocument();
   });
+
+  it('Submit on viz type double-click', () => {
+    renderWrapper();
+    userEvent.click(screen.getByRole('button', { name: 'ballot All charts' }));
+    const visualizations = screen.getByTestId(getTestId('viz-row'));
+    userEvent.click(
+      within(visualizations).getByText('Time-series Bar Chart v2'),
+    );
+
+    expect(defaultProps.onChange).not.toBeCalled();
+    userEvent.dblClick(
+      within(visualizations).getByText('Time-series Line Chart'),
+    );
+
+    expect(defaultProps.onChange).toHaveBeenCalledWith(
+      'echarts_timeseries_line',
+    );
+  });
 });
diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
@@ -47,6 +47,7 @@ import scrollIntoView from 'scroll-into-view-if-needed';
 
 interface VizTypeGalleryProps {
   onChange: (vizType: string | null) => void;
+  onDoubleClick: () => void;
   selectedViz: string | null;
   className?: string;
 }
@@ -380,12 +381,14 @@ interface ThumbnailProps {
   entry: VizEntry;
   selectedViz: string | null;
   setSelectedViz: (viz: string) => void;
+  onDoubleClick: () => void;
 }
 
 const Thumbnail: React.FC<ThumbnailProps> = ({
   entry,
   selectedViz,
   setSelectedViz,
+  onDoubleClick,
 }) => {
   const theme = useTheme();
   const { key, value: type } = entry;
@@ -400,6 +403,7 @@ const Thumbnail: React.FC<ThumbnailProps> = ({
       tabIndex={0}
       className={isSelected ? 'selected' : ''}
       onClick={() => setSelectedViz(key)}
+      onDoubleClick={onDoubleClick}
       data-test="viztype-selector-container"
     >
       <img
@@ -429,6 +433,7 @@ interface ThumbnailGalleryProps {
   vizEntries: VizEntry[];
   selectedViz: string | null;
   setSelectedViz: (viz: string) => void;
+  onDoubleClick: () => void;
 }
 
 /** A list of viz thumbnails, used within the viz picker modal */
@@ -487,7 +492,7 @@ const doesVizMatchSelector = (viz: ChartMetadata, selector: string) =>
   (viz.tags || []).indexOf(selector) > -1;
 
 export default function VizTypeGallery(props: VizTypeGalleryProps) {
-  const { selectedViz, onChange, className } = props;
+  const { selectedViz, onChange, onDoubleClick, className } = props;
   const { mountedPluginMetadata } = usePluginContext();
   const searchInputRef = useRef<HTMLInputElement>();
   const [searchInputValue, setSearchInputValue] = useState('');
@@ -793,6 +798,7 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
           vizEntries={getVizEntriesToDisplay()}
           selectedViz={selectedViz}
           setSelectedViz={onChange}
+          onDoubleClick={onDoubleClick}
         />
       </RightPane>
 

diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/index.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/index.tsx
@@ -140,6 +140,7 @@ const VizTypeControl = ({
           key={modalKey}
           selectedViz={selectedViz}
           onChange={setSelectedViz}
+          onDoubleClick={onSubmit}
         />
       </UnpaddedModal>
     </>