chore: Improves the layout of the VizTypeGallery component (#15907)

* chore: Improves the layout of the VizTypeGallery component

* copy edit

* Enables search

Co-authored-by: Evan Rusackas <evan@preset.io>

superset-frontend/src/addSlice/AddSliceContainer.test.tsx

@@ -19,7 +19,7 @@
 import React from 'react';
 import { ReactWrapper } from 'enzyme';
 import Button from 'src/components/Button';
-import Select from 'src/components/Select';
+import { Select } from 'src/components';
 import AddSliceContainer, {
   AddSliceContainerProps,
   AddSliceContainerState,

superset-frontend/src/addSlice/AddSliceContainer.tsx

@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import Button from 'src/components/Button';
-import Select from 'src/components/Select';
+import { Select } from 'src/components';
 import { css, styled, t } from '@superset-ui/core';
 
 import VizTypeGallery, {
@@ -42,21 +42,45 @@ export type AddSliceContainerState = {
 };
 
 const ESTIMATED_NAV_HEIGHT = '56px';
-const styleSelectContainer = { width: 600, marginBottom: '10px' };
+
 const StyledContainer = styled.div`
-  flex: 1 1 auto;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 100%;
-  max-width: ${MAX_ADVISABLE_VIZ_GALLERY_WIDTH}px;
-  max-height: calc(100vh - ${ESTIMATED_NAV_HEIGHT});
-  border-radius: ${({ theme }) => theme.gridUnit}px;
-  background-color: ${({ theme }) => theme.colors.grayscale.light5};
-  padding-bottom: ${({ theme }) => theme.gridUnit * 3}px;
-  h3 {
-    padding-bottom: ${({ theme }) => theme.gridUnit * 3}px;
-  }
+  ${({ theme }) => `
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+    max-width: ${MAX_ADVISABLE_VIZ_GALLERY_WIDTH}px;
+    max-height: calc(100vh - ${ESTIMATED_NAV_HEIGHT});
+    border-radius: ${theme.gridUnit}px;
+    background-color: ${theme.colors.grayscale.light5};
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: ${theme.gridUnit * 4}px;
+    padding-right: ${theme.gridUnit * 4}px;
+    padding-bottom: ${theme.gridUnit * 4}px;
+
+    h3 {
+      padding-bottom: ${theme.gridUnit * 3}px;
+    }
+
+    & .dataset {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      & > div {
+        min-width: 200px;
+        width: 300px;
+      }
+
+      & > span {
+        color: ${theme.colors.grayscale.light1};
+        margin-left: ${theme.gridUnit * 4}px;
+        margin-top: ${theme.gridUnit * 5}px;
+      }
+    }
+  `}
 `;
 
 const cssStatic = css`
@@ -64,9 +88,12 @@ const cssStatic = css`
 `;
 
 const StyledVizTypeGallery = styled(VizTypeGallery)`
-  border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
-  margin: ${({ theme }) => theme.gridUnit * 3}px 0px;
-  flex: 1 1 auto;
+  ${({ theme }) => `
+    border: 1px solid ${theme.colors.grayscale.light2};
+    border-radius: ${theme.gridUnit}px;
+    margin: ${theme.gridUnit * 3}px 0px;
+    flex: 1 1 auto;
+  `}
 `;
 
 export default class AddSliceContainer extends React.PureComponent<
@@ -98,10 +125,10 @@ export default class AddSliceContainer extends React.PureComponent<
     window.location.href = this.exploreUrl();
   }
 
-  changeDatasource(option: { value: string }) {
+  changeDatasource(value: string) {
     this.setState({
-      datasourceValue: option.value,
-      datasourceId: option.value.split('__')[0],
+      datasourceValue: value,
+      datasourceId: value.split('__')[0],
     });
   }
 
@@ -115,31 +142,22 @@ export default class AddSliceContainer extends React.PureComponent<
 
   render() {
     return (
-      <StyledContainer className="container">
+      <StyledContainer>
         <h3 css={cssStatic}>{t('Create a new chart')}</h3>
-        <div css={cssStatic}>
-          <p>{t('Choose a dataset')}</p>
-          <div style={styleSelectContainer}>
-            <Select
-              clearable={false}
-              ignoreAccents={false}
-              name="select-datasource"
-              onChange={this.changeDatasource}
-              options={this.props.datasources}
-              placeholder={t('Choose a dataset')}
-              value={
-                this.state.datasourceValue
-                  ? {
-                      value: this.state.datasourceValue,
-                    }
-                  : undefined
-              }
-              width={600}
-            />
-          </div>
-          <span className="text-muted">
+        <div className="dataset">
+          <Select
+            ariaLabel={t('Dataset')}
+            name="select-datasource"
+            header={t('Choose a dataset')}
+            onChange={this.changeDatasource}
+            options={this.props.datasources}
+            placeholder={t('Choose a dataset')}
+            showSearch
+            value={this.state.datasourceValue}
+          />
+          <span>
             {t(
-              'If the dataset you are looking for is not available in the list, follow the instructions on how to add it in the Superset tutorial.',
+              "If you can't find a dataset, follow the instructions on how to add it in the Superset tutorial.",
             )}{' '}
             <a
               href="https://superset.apache.org/docs/creating-charts-dashboards/first-dashboard#adding-a-new-table"

superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx

@@ -161,13 +161,16 @@ const LeftPane = styled.div`
 
 const RightPane = styled.div`
   grid-area: main;
-  overflow-y: scroll;
+  overflow-y: auto;
 `;
 
 const SearchWrapper = styled.div`
   ${({ theme }) => `
     grid-area: search;
-    margin: ${theme.gridUnit * 2}px ${theme.gridUnit * 3}px;
+    margin-top: ${theme.gridUnit * 3}px;
+    margin-bottom: ${theme.gridUnit}px;
+    margin-left: ${theme.gridUnit * 3}px;
+    margin-right: ${theme.gridUnit * 3}px;
     input {
       font-size: ${theme.typography.sizes.s};
     }
@@ -188,6 +191,9 @@ const InputIconAlignment = styled.div`
 const SelectorLabel = styled.button`
   ${({ theme }) => `
     all: unset; // remove default button styles
+    display: flex;
+    flex-direction: row;
+    align-items: center;
     cursor: pointer;
     margin: ${theme.gridUnit}px 0;
     padding: 0 ${theme.gridUnit * 6}px 0 ${theme.gridUnit}px;
@@ -218,15 +224,18 @@ const SelectorLabel = styled.button`
       }
     }
 
-    svg {
-      position: relative;
-      top: ${theme.gridUnit * 2}px
+    & span:first-of-type svg {
+      margin-top: ${theme.gridUnit * 1.5}px;
+    }
+
+    & span:last-of-type svg {
+      position: absolute;
+      top: ${theme.gridUnit * 2}px;
+      right: ${theme.gridUnit * 2}px;
     }
 
     .cancel {
       visibility: hidden;
-      position: absolute;
-      right: ${theme.gridUnit * 2}px;
     }
   `}
 `;