chore: small viz gallery tweaks (#15900)

* allow passing styles to selector component

* make onClear optional

* remove broken font-size declarations

* fix bad hook dependency

* move all charts selector outside of Collapse

* stop hiding all charts button

* slight copy change

* remove x

* min left pane size

* remove default p bottom margin

* remove unused import

* fix test

superset-frontend/src/addSlice/AddSliceContainer.tsx

@@ -157,7 +157,7 @@ export default class AddSliceContainer extends React.PureComponent<
           />
           <span>
             {t(
-              "If you can't find a dataset, follow the instructions on how to add it in the Superset tutorial.",
+              'Instructions to add a dataset are available 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/VizTypeControl.test.tsx

@@ -105,9 +105,7 @@ describe('VizTypeControl', () => {
 
     const visualizations = screen.getByTestId(getTestId('viz-row'));
 
-    userEvent.click(
+    userEvent.click(screen.getByRole('button', { name: 'ballot All charts' }));
-      screen.getByRole('button', { name: 'category Table close' }),
-    );
 
     expect(visualizations).toHaveTextContent(/Time-series Table/);
 

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

@@ -25,6 +25,7 @@ import React, {
   useState,
 } from 'react';
 import Fuse from 'fuse.js';
+import cx from 'classnames';
 import {
   t,
   styled,
@@ -38,7 +39,6 @@ import Label from 'src/components/Label';
 import { usePluginContext } from 'src/components/DynamicPlugins';
 import Icons from 'src/components/Icons';
 import { nativeFilterGate } from 'src/dashboard/components/nativeFilters/utils';
-import { CloseOutlined } from '@ant-design/icons';
 import scrollIntoView from 'scroll-into-view-if-needed';
 
 interface VizTypeGalleryProps {
@@ -120,7 +120,8 @@ export const VIZ_TYPE_CONTROL_TEST_ID = 'viz-type-control';
 const VizPickerLayout = styled.div`
   display: grid;
   grid-template-rows: auto minmax(100px, 1fr) minmax(200px, 35%);
-  grid-template-columns: auto 5fr;
+  // em is used here because the sidebar should be sized to fit the longest standard tag
+  grid-template-columns: minmax(14em, auto) 5fr;
   grid-template-areas:
     'sidebar search'
     'sidebar main'
@@ -171,9 +172,6 @@ const SearchWrapper = styled.div`
     margin-bottom: ${theme.gridUnit}px;
     margin-left: ${theme.gridUnit * 3}px;
     margin-right: ${theme.gridUnit * 3}px;
-    input {
-      font-size: ${theme.typography.sizes.s};
-    }
     .ant-input-affix-wrapper {
       padding-left: ${theme.gridUnit * 2}px;
     }
@@ -196,12 +194,10 @@ const SelectorLabel = styled.button`
     align-items: center;
     cursor: pointer;
     margin: ${theme.gridUnit}px 0;
-    padding: 0 ${theme.gridUnit * 6}px 0 ${theme.gridUnit}px;
+    padding: 0 ${theme.gridUnit}px;
     border-radius: ${theme.borderRadius}px;
     line-height: 2em;
-    font-size: ${theme.typography.sizes.s};
     text-overflow: ellipsis;
-    overflow: hidden;
     white-space: nowrap;
     position: relative;
 
@@ -228,12 +224,6 @@ const SelectorLabel = styled.button`
       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;
     }
@@ -293,6 +283,7 @@ const Description = styled.p`
   grid-area: description;
   overflow: auto;
   padding-right: ${({ theme }) => theme.gridUnit * 14}px;
+  margin: 0;
 `;
 
 const Examples = styled.div`
@@ -408,8 +399,8 @@ const Selector: React.FC<{
   icon: JSX.Element;
   isSelected: boolean;
   onClick: (selector: string) => void;
-  onClear: (e: React.MouseEvent) => void;
+  className?: string;
-}> = ({ selector, icon, isSelected, onClick, onClear }) => {
+}> = ({ selector, icon, isSelected, onClick, className }) => {
   const btnRef = useRef<HTMLButtonElement>(null);
 
   // see Element.scrollIntoViewIfNeeded()
@@ -431,12 +422,11 @@ const Selector: React.FC<{
       ref={btnRef}
       key={selector}
       name={selector}
-      className={isSelected ? 'selected' : ''}
+      className={cx(className, isSelected && 'selected')}
       onClick={() => onClick(selector)}
     >
       {icon}
       {selector}
-      <CloseOutlined className="cancel" onClick={onClear} />
     </SelectorLabel>
   );
 };
@@ -515,7 +505,7 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
           a.localeCompare(b),
         )
         .filter(tag => RECOMMENDED_TAGS.indexOf(tag) === -1),
-    [chartsByCategory],
+    [chartsByTags],
   );
 
   const sortedMetadata = useMemo(
@@ -587,15 +577,6 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
     ],
   );
 
-  const clearSelector = useCallback(e => {
-    e.stopPropagation();
-    if (isSearchFocused) {
-      stopSearching();
-    }
-    // clear current selector and set all charts
-    setActiveSelector(ALL_CHARTS);
-  }, []);
-
   const sectionMap = useMemo(
     () => ({
       RECOMMENDED_TAGS: {
@@ -603,11 +584,6 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
         icon: <Icons.Tags />,
         selectors: RECOMMENDED_TAGS,
       },
-      ALL: {
-        title: t('All'),
-        icon: <Icons.Ballot />,
-        selectors: [ALL_CHARTS],
-      },
       CATEGORY: {
         title: t('Category'),
         icon: <Icons.Category />,
@@ -631,6 +607,19 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
   return (
     <VizPickerLayout className={className}>
       <LeftPane>
+        <Selector
+          css={({ gridUnit }) =>
+            // adjust style for not being inside a collapse
+            css`
+              margin: ${gridUnit * 2}px;
+              margin-bottom: 0;
+            `
+          }
+          selector={ALL_CHARTS}
+          icon={<Icons.Ballot />}
+          isSelected={!isActivelySearching && ALL_CHARTS === activeSelector}
+          onClick={clickSelector}
+        />
         <Collapse
           expandIconPosition="right"
           ghost
@@ -646,13 +635,13 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
               >
                 {section.selectors.map((selector: string) => (
                   <Selector
+                    key={selector}
                     selector={selector}
                     icon={section.icon}
                     isSelected={
                       !isActivelySearching && selector === activeSelector
                     }
                     onClick={clickSelector}
-                    onClear={clearSelector}
                   />
                 ))}
               </Collapse.Panel>