mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
feat(dashboard): Add thumbnails to dashboard edit draggable chart list (#20528)
* Add chart thumbnails to dashboard edit draggable charts. * Reorganize hierarchy and add tests. * Incorporate review suggestions. * Update design and add tooltips. * Fix missing thumbnails. * Fix tests. * Fix moving viz type label. * Convert AddSliceCard to TS, update hierarchy.
This commit is contained in:
parent
fe91974163
commit
d50784dd80
@ -72,6 +72,7 @@ export function fetchSlices(
|
|||||||
'id',
|
'id',
|
||||||
'params',
|
'params',
|
||||||
'slice_name',
|
'slice_name',
|
||||||
|
'thumbnail_url',
|
||||||
'url',
|
'url',
|
||||||
'viz_type',
|
'viz_type',
|
||||||
],
|
],
|
||||||
@ -114,6 +115,7 @@ export function fetchSlices(
|
|||||||
viz_type: slice.viz_type,
|
viz_type: slice.viz_type,
|
||||||
modified: slice.changed_on_delta_humanized,
|
modified: slice.changed_on_delta_humanized,
|
||||||
changed_on_humanized: slice.changed_on_delta_humanized,
|
changed_on_humanized: slice.changed_on_delta_humanized,
|
||||||
|
thumbnail_url: slice.thumbnail_url,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -1,148 +0,0 @@
|
|||||||
/**
|
|
||||||
* Licensed to the Apache Software Foundation (ASF) under one
|
|
||||||
* or more contributor license agreements. See the NOTICE file
|
|
||||||
* distributed with this work for additional information
|
|
||||||
* regarding copyright ownership. The ASF licenses this file
|
|
||||||
* to you under the Apache License, Version 2.0 (the
|
|
||||||
* "License"); you may not use this file except in compliance
|
|
||||||
* with the License. You may obtain a copy of the License at
|
|
||||||
*
|
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
*
|
|
||||||
* Unless required by applicable law or agreed to in writing,
|
|
||||||
* software distributed under the License is distributed on an
|
|
||||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
||||||
* KIND, either express or implied. See the License for the
|
|
||||||
* specific language governing permissions and limitations
|
|
||||||
* under the License.
|
|
||||||
*/
|
|
||||||
import cx from 'classnames';
|
|
||||||
import React from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { t, styled } from '@superset-ui/core';
|
|
||||||
|
|
||||||
const propTypes = {
|
|
||||||
datasourceUrl: PropTypes.string,
|
|
||||||
datasourceName: PropTypes.string,
|
|
||||||
innerRef: PropTypes.func,
|
|
||||||
isSelected: PropTypes.bool,
|
|
||||||
lastModified: PropTypes.string,
|
|
||||||
sliceName: PropTypes.string.isRequired,
|
|
||||||
style: PropTypes.object,
|
|
||||||
visType: PropTypes.string.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
const defaultProps = {
|
|
||||||
datasourceUrl: null,
|
|
||||||
datasourceName: '-',
|
|
||||||
innerRef: null,
|
|
||||||
isSelected: false,
|
|
||||||
style: null,
|
|
||||||
lastModified: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
const Styled = styled.div`
|
|
||||||
${({ theme }) => `
|
|
||||||
.chart-card {
|
|
||||||
border: 1px solid ${theme.colors.grayscale.light2};
|
|
||||||
border-radius: ${theme.gridUnit}px;
|
|
||||||
background: ${theme.colors.grayscale.light5};
|
|
||||||
padding: ${theme.gridUnit * 2}px;
|
|
||||||
margin: 0 ${theme.gridUnit * 3}px
|
|
||||||
${theme.gridUnit * 3}px
|
|
||||||
${theme.gridUnit * 3}px;
|
|
||||||
position: relative;
|
|
||||||
cursor: move;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: ${theme.colors.grayscale.light4};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-card.is-selected {
|
|
||||||
cursor: not-allowed;
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-title {
|
|
||||||
margin-right: 60px;
|
|
||||||
margin-bottom: ${theme.gridUnit * 2}px;
|
|
||||||
font-weight: ${theme.typography.weights.bold};
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-body {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.item {
|
|
||||||
span {
|
|
||||||
word-break: break-all;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
font-weight: ${theme.typography.weights.normal};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-added-label {
|
|
||||||
background: ${theme.colors.grayscale.base};
|
|
||||||
border-radius: ${theme.gridUnit}px;
|
|
||||||
color: ${theme.colors.grayscale.light5};
|
|
||||||
font-size: ${theme.typography.sizes.s}px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
position: absolute;
|
|
||||||
padding: ${theme.gridUnit}px
|
|
||||||
${theme.gridUnit * 2}px;
|
|
||||||
top: ${theme.gridUnit * 8}px;
|
|
||||||
right: ${theme.gridUnit * 8}px;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
`}
|
|
||||||
`;
|
|
||||||
|
|
||||||
function AddSliceCard({
|
|
||||||
datasourceUrl,
|
|
||||||
datasourceName,
|
|
||||||
innerRef,
|
|
||||||
isSelected,
|
|
||||||
lastModified,
|
|
||||||
sliceName,
|
|
||||||
style,
|
|
||||||
visType,
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<Styled ref={innerRef} style={style}>
|
|
||||||
<div
|
|
||||||
className={cx('chart-card', isSelected && 'is-selected')}
|
|
||||||
data-test="chart-card"
|
|
||||||
>
|
|
||||||
<div className="card-title" data-test="card-title">
|
|
||||||
{sliceName}
|
|
||||||
</div>
|
|
||||||
<div className="card-body">
|
|
||||||
<div className="item">
|
|
||||||
<span>{t('Modified')} </span>
|
|
||||||
<span>{lastModified}</span>
|
|
||||||
</div>
|
|
||||||
<div className="item">
|
|
||||||
<span>{t('Visualization')} </span>
|
|
||||||
<span>{visType}</span>
|
|
||||||
</div>
|
|
||||||
<div className="item">
|
|
||||||
<span>{t('Data source')} </span>
|
|
||||||
<a href={datasourceUrl}>{datasourceName}</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{isSelected && <div className="is-added-label">{t('Added')}</div>}
|
|
||||||
</Styled>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
AddSliceCard.propTypes = propTypes;
|
|
||||||
AddSliceCard.defaultProps = defaultProps;
|
|
||||||
|
|
||||||
export default AddSliceCard;
|
|
@ -0,0 +1,62 @@
|
|||||||
|
/**
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { FeatureFlag } from '@superset-ui/core';
|
||||||
|
import { act, render, screen } from 'spec/helpers/testing-library';
|
||||||
|
import AddSliceCard from '.';
|
||||||
|
|
||||||
|
jest.mock('src/components/DynamicPlugins', () => ({
|
||||||
|
usePluginContext: () => ({
|
||||||
|
mountedPluginMetadata: { table: { name: 'Table' } },
|
||||||
|
}),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const mockedProps = {
|
||||||
|
visType: 'table',
|
||||||
|
sliceName: '-',
|
||||||
|
};
|
||||||
|
|
||||||
|
declare const global: {
|
||||||
|
featureFlags: Record<string, boolean>;
|
||||||
|
};
|
||||||
|
|
||||||
|
test('do not render thumbnail if feature flag is not set', async () => {
|
||||||
|
global.featureFlags = {
|
||||||
|
[FeatureFlag.THUMBNAILS]: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
await act(async () => {
|
||||||
|
render(<AddSliceCard {...mockedProps} />);
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(screen.queryByTestId('thumbnail')).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('render thumbnail if feature flag is set', async () => {
|
||||||
|
global.featureFlags = {
|
||||||
|
[FeatureFlag.THUMBNAILS]: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
await act(async () => {
|
||||||
|
render(<AddSliceCard {...mockedProps} />);
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(screen.queryByTestId('thumbnail')).toBeInTheDocument();
|
||||||
|
});
|
@ -0,0 +1,279 @@
|
|||||||
|
/**
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, {
|
||||||
|
CSSProperties,
|
||||||
|
ReactNode,
|
||||||
|
useEffect,
|
||||||
|
useMemo,
|
||||||
|
useRef,
|
||||||
|
useState,
|
||||||
|
} from 'react';
|
||||||
|
import { t, isFeatureEnabled, FeatureFlag, css } from '@superset-ui/core';
|
||||||
|
import ImageLoader from 'src/components/ListViewCard/ImageLoader';
|
||||||
|
import { usePluginContext } from 'src/components/DynamicPlugins';
|
||||||
|
import { Tooltip } from 'src/components/Tooltip';
|
||||||
|
import { Theme } from '@emotion/react';
|
||||||
|
|
||||||
|
const FALLBACK_THUMBNAIL_URL = '/static/assets/images/chart-card-fallback.svg';
|
||||||
|
|
||||||
|
const TruncatedTextWithTooltip: React.FC = ({ children, ...props }) => {
|
||||||
|
const [isTruncated, setIsTruncated] = useState(false);
|
||||||
|
const ref = useRef<HTMLDivElement>(null);
|
||||||
|
useEffect(() => {
|
||||||
|
setIsTruncated(
|
||||||
|
ref.current ? ref.current.offsetWidth < ref.current.scrollWidth : false,
|
||||||
|
);
|
||||||
|
}, [children]);
|
||||||
|
|
||||||
|
const div = (
|
||||||
|
<div
|
||||||
|
{...props}
|
||||||
|
ref={ref}
|
||||||
|
css={css`
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: block;
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return isTruncated ? <Tooltip title={children}>{div}</Tooltip> : div;
|
||||||
|
};
|
||||||
|
|
||||||
|
const MetadataItem: React.FC<{
|
||||||
|
label: ReactNode;
|
||||||
|
value: ReactNode;
|
||||||
|
}> = ({ label, value }) => (
|
||||||
|
<div
|
||||||
|
css={(theme: Theme) => css`
|
||||||
|
font-size: ${theme.typography.sizes.s}px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-bottom: ${theme.gridUnit}px;
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
css={(theme: Theme) => css`
|
||||||
|
margin-right: ${theme.gridUnit * 4}px;
|
||||||
|
color: ${theme.colors.grayscale.base};
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
css={css`
|
||||||
|
min-width: 0;
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
<TruncatedTextWithTooltip>{value}</TruncatedTextWithTooltip>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const SliceAddedBadgePlaceholder: React.FC<{
|
||||||
|
showThumbnails?: boolean;
|
||||||
|
placeholderRef: (element: HTMLDivElement) => void;
|
||||||
|
}> = ({ showThumbnails, placeholderRef }) => (
|
||||||
|
<div
|
||||||
|
ref={placeholderRef}
|
||||||
|
css={(theme: Theme) => css`
|
||||||
|
/* Display styles */
|
||||||
|
border: 1px solid ${theme.colors.primary.dark1};
|
||||||
|
border-radius: ${theme.gridUnit}px;
|
||||||
|
color: ${theme.colors.primary.dark1};
|
||||||
|
font-size: ${theme.typography.sizes.xs}px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
padding: ${theme.gridUnit / 2}px ${theme.gridUnit * 2}px;
|
||||||
|
margin-left: ${theme.gridUnit * 4}px;
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
/* Position styles */
|
||||||
|
visibility: hidden;
|
||||||
|
position: ${showThumbnails ? 'absolute' : 'unset'};
|
||||||
|
top: ${showThumbnails ? '72px' : 'unset'};
|
||||||
|
left: ${showThumbnails ? '84px' : 'unset'};
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
{t('Added')}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const SliceAddedBadge: React.FC<{ placeholder?: HTMLDivElement }> = ({
|
||||||
|
placeholder,
|
||||||
|
}) => (
|
||||||
|
<div
|
||||||
|
css={(theme: Theme) => css`
|
||||||
|
/* Display styles */
|
||||||
|
border: 1px solid ${theme.colors.primary.dark1};
|
||||||
|
border-radius: ${theme.gridUnit}px;
|
||||||
|
color: ${theme.colors.primary.dark1};
|
||||||
|
font-size: ${theme.typography.sizes.xs}px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
padding: ${theme.gridUnit / 2}px ${theme.gridUnit * 2}px;
|
||||||
|
margin-left: ${theme.gridUnit * 4}px;
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
/* Position styles */
|
||||||
|
display: ${placeholder ? 'unset' : 'none'};
|
||||||
|
position: absolute;
|
||||||
|
top: ${placeholder ? `${placeholder.offsetTop}px` : 'unset'};
|
||||||
|
left: ${placeholder ? `${placeholder.offsetLeft - 2}px` : 'unset'};
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
{t('Added')}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const AddSliceCard: React.FC<{
|
||||||
|
datasourceUrl?: string;
|
||||||
|
datasourceName?: string;
|
||||||
|
innerRef?: React.RefObject<HTMLDivElement>;
|
||||||
|
isSelected?: boolean;
|
||||||
|
lastModified?: string;
|
||||||
|
sliceName: string;
|
||||||
|
style?: CSSProperties;
|
||||||
|
thumbnailUrl?: string;
|
||||||
|
visType: string;
|
||||||
|
}> = ({
|
||||||
|
datasourceUrl,
|
||||||
|
datasourceName = '-',
|
||||||
|
innerRef,
|
||||||
|
isSelected = false,
|
||||||
|
lastModified,
|
||||||
|
sliceName,
|
||||||
|
style = {},
|
||||||
|
thumbnailUrl,
|
||||||
|
visType,
|
||||||
|
}) => {
|
||||||
|
const showThumbnails = isFeatureEnabled(FeatureFlag.THUMBNAILS);
|
||||||
|
const [sliceAddedBadge, setSliceAddedBadge] = useState<HTMLDivElement>();
|
||||||
|
const { mountedPluginMetadata } = usePluginContext();
|
||||||
|
const vizName = useMemo(
|
||||||
|
() => mountedPluginMetadata[visType].name,
|
||||||
|
[mountedPluginMetadata, visType],
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={innerRef} style={style}>
|
||||||
|
<div
|
||||||
|
data-test="chart-card"
|
||||||
|
css={(theme: Theme) => css`
|
||||||
|
border: 1px solid ${theme.colors.grayscale.light2};
|
||||||
|
border-radius: ${theme.gridUnit}px;
|
||||||
|
background: ${theme.colors.grayscale.light5};
|
||||||
|
padding: ${theme.gridUnit * 4}px;
|
||||||
|
margin: 0 ${theme.gridUnit * 3}px
|
||||||
|
${theme.gridUnit * 3}px
|
||||||
|
${theme.gridUnit * 3}px;
|
||||||
|
position: relative;
|
||||||
|
cursor: ${isSelected ? 'not-allowed' : 'move'};
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
line-height: 1.3;
|
||||||
|
color: ${theme.colors.grayscale.dark1}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: ${theme.colors.grayscale.light4};
|
||||||
|
}
|
||||||
|
|
||||||
|
opacity: ${isSelected ? 0.4 : 'unset'};
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
css={css`
|
||||||
|
display: flex;
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
{showThumbnails ? (
|
||||||
|
<div
|
||||||
|
data-test="thumbnail"
|
||||||
|
css={css`
|
||||||
|
width: 146px;
|
||||||
|
height: 82px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-right: 16px;
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
<ImageLoader
|
||||||
|
src={thumbnailUrl || ''}
|
||||||
|
fallback={FALLBACK_THUMBNAIL_URL}
|
||||||
|
position="top"
|
||||||
|
/>
|
||||||
|
{isSelected && showThumbnails ? (
|
||||||
|
<SliceAddedBadgePlaceholder
|
||||||
|
placeholderRef={setSliceAddedBadge}
|
||||||
|
showThumbnails={showThumbnails}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
<div
|
||||||
|
css={css`
|
||||||
|
flex-grow: 1;
|
||||||
|
min-width: 0;
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-test="card-title"
|
||||||
|
css={(theme: Theme) => css`
|
||||||
|
margin-bottom: ${theme.gridUnit * 2}px;
|
||||||
|
font-weight: ${theme.typography.weights.bold};
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
<TruncatedTextWithTooltip>{sliceName}</TruncatedTextWithTooltip>
|
||||||
|
{isSelected && !showThumbnails ? (
|
||||||
|
<SliceAddedBadgePlaceholder
|
||||||
|
placeholderRef={setSliceAddedBadge}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
css={css`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
<MetadataItem label={t('Viz type')} value={vizName} />
|
||||||
|
<MetadataItem
|
||||||
|
label={t('Dataset')}
|
||||||
|
value={<a href={datasourceUrl}>{datasourceName}</a>}
|
||||||
|
/>
|
||||||
|
<MetadataItem label={t('Modified')} value={lastModified} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<SliceAddedBadge placeholder={sliceAddedBadge} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddSliceCard;
|
@ -0,0 +1,22 @@
|
|||||||
|
/**
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import AddSliceCard from './AddSliceCard';
|
||||||
|
|
||||||
|
export default AddSliceCard;
|
@ -83,7 +83,7 @@ const DEFAULT_SORT_KEY = 'changed_on';
|
|||||||
const MARGIN_BOTTOM = 16;
|
const MARGIN_BOTTOM = 16;
|
||||||
const SIDEPANE_HEADER_HEIGHT = 30;
|
const SIDEPANE_HEADER_HEIGHT = 30;
|
||||||
const SLICE_ADDER_CONTROL_HEIGHT = 64;
|
const SLICE_ADDER_CONTROL_HEIGHT = 64;
|
||||||
const DEFAULT_CELL_HEIGHT = 112;
|
const DEFAULT_CELL_HEIGHT = 128;
|
||||||
|
|
||||||
const Controls = styled.div`
|
const Controls = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -273,6 +273,7 @@ class SliceAdder extends React.Component {
|
|||||||
visType={cellData.viz_type}
|
visType={cellData.viz_type}
|
||||||
datasourceUrl={cellData.datasource_url}
|
datasourceUrl={cellData.datasource_url}
|
||||||
datasourceName={cellData.datasource_name}
|
datasourceName={cellData.datasource_name}
|
||||||
|
thumbnailUrl={cellData.thumbnail_url}
|
||||||
isSelected={isSelected}
|
isSelected={isSelected}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
Loading…
Reference in New Issue
Block a user