From a3f54a6c7bde41669413c2df6ff7213210a2e2b9 Mon Sep 17 00:00:00 2001 From: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com> Date: Tue, 27 Jul 2021 18:21:19 -0700 Subject: [PATCH] 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 --- .../src/addSlice/AddSliceContainer.tsx | 2 +- .../VizTypeControl/VizTypeControl.test.tsx | 4 +- .../VizTypeControl/VizTypeGallery.tsx | 57 ++++++++----------- 3 files changed, 25 insertions(+), 38 deletions(-) diff --git a/superset-frontend/src/addSlice/AddSliceContainer.tsx b/superset-frontend/src/addSlice/AddSliceContainer.tsx index e29e0c1db0..d46678eb89 100644 --- a/superset-frontend/src/addSlice/AddSliceContainer.tsx +++ b/superset-frontend/src/addSlice/AddSliceContainer.tsx @@ -157,7 +157,7 @@ export default class AddSliceContainer extends React.PureComponent< /> {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.', )}{' '} { const visualizations = screen.getByTestId(getTestId('viz-row')); - userEvent.click( - screen.getByRole('button', { name: 'category Table close' }), - ); + userEvent.click(screen.getByRole('button', { name: 'ballot All charts' })); expect(visualizations).toHaveTextContent(/Time-series Table/); diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx index 3e8f56591a..5abd0bfc51 100644 --- a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx +++ b/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; -}> = ({ selector, icon, isSelected, onClick, onClear }) => { + className?: string; +}> = ({ selector, icon, isSelected, onClick, className }) => { const btnRef = useRef(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} - ); }; @@ -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: , selectors: RECOMMENDED_TAGS, }, - ALL: { - title: t('All'), - icon: , - selectors: [ALL_CHARTS], - }, CATEGORY: { title: t('Category'), icon: , @@ -631,6 +607,19 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) { return ( + + // adjust style for not being inside a collapse + css` + margin: ${gridUnit * 2}px; + margin-bottom: 0; + ` + } + selector={ALL_CHARTS} + icon={} + isSelected={!isActivelySearching && ALL_CHARTS === activeSelector} + onClick={clickSelector} + /> {section.selectors.map((selector: string) => ( ))}