mirror of https://github.com/apache/superset.git
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
This commit is contained in:
parent
2ce676d20d
commit
a3f54a6c7b
|
@ -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"
|
||||
|
|
|
@ -105,9 +105,7 @@ describe('VizTypeControl', () => {
|
|||
|
||||
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/);
|
||||
|
||||
|
|
|
@ -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<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>
|
||||
|
|
Loading…
Reference in New Issue