mirror of https://github.com/apache/superset.git
chore: Removes less from SliceAdder (#14448)
This commit is contained in:
parent
a0881fb157
commit
be8c176df2
|
@ -155,10 +155,10 @@ describe('SliceAdder', () => {
|
|||
});
|
||||
|
||||
it('handleSelect', () => {
|
||||
const newSortBy = 1;
|
||||
const newSortBy = { value: 'viz_type' };
|
||||
wrapper.instance().handleSelect(newSortBy);
|
||||
expect(spy.calledOnce).toBe(true);
|
||||
expect(spy.lastCall.args[1]).toBe(newSortBy);
|
||||
expect(spy.lastCall.args[1]).toBe(newSortBy.value);
|
||||
});
|
||||
|
||||
it('handleKeyPress', () => {
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
import cx from 'classnames';
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { t } from '@superset-ui/core';
|
||||
import { t, styled } from '@superset-ui/core';
|
||||
|
||||
const propTypes = {
|
||||
datasourceUrl: PropTypes.string,
|
||||
|
@ -41,6 +41,69 @@ const defaultProps = {
|
|||
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};
|
||||
font-weight: ${theme.typography.weights.light};
|
||||
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,
|
||||
|
@ -52,7 +115,7 @@ function AddSliceCard({
|
|||
visType,
|
||||
}) {
|
||||
return (
|
||||
<div ref={innerRef} className="chart-card-container" style={style}>
|
||||
<Styled ref={innerRef} style={style}>
|
||||
<div
|
||||
className={cx('chart-card', isSelected && 'is-selected')}
|
||||
data-test="chart-card"
|
||||
|
@ -76,7 +139,7 @@ function AddSliceCard({
|
|||
</div>
|
||||
</div>
|
||||
{isSelected && <div className="is-added-label">{t('Added')}</div>}
|
||||
</div>
|
||||
</Styled>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -20,17 +20,23 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { List } from 'react-virtualized';
|
||||
import SearchInput, { createFilter } from 'react-search-input';
|
||||
import { t } from '@superset-ui/core';
|
||||
|
||||
import { Select } from 'src/common/components';
|
||||
import { createFilter } from 'react-search-input';
|
||||
import { t, styled } from '@superset-ui/core';
|
||||
import { Input } from 'src/common/components';
|
||||
import Select from 'src/components/Select';
|
||||
import Loading from 'src/components/Loading';
|
||||
import {
|
||||
CHART_TYPE,
|
||||
NEW_COMPONENT_SOURCE_TYPE,
|
||||
} from 'src/dashboard/util/componentTypes';
|
||||
import {
|
||||
NEW_CHART_ID,
|
||||
NEW_COMPONENTS_SOURCE_ID,
|
||||
} from 'src/dashboard/util/constants';
|
||||
import { slicePropShape } from 'src/dashboard/util/propShapes';
|
||||
import AddSliceCard from './AddSliceCard';
|
||||
import AddSliceDragPreview from './dnd/AddSliceDragPreview';
|
||||
import DragDroppable from './dnd/DragDroppable';
|
||||
import Loading from '../../components/Loading';
|
||||
import { CHART_TYPE, NEW_COMPONENT_SOURCE_TYPE } from '../util/componentTypes';
|
||||
import { NEW_CHART_ID, NEW_COMPONENTS_SOURCE_ID } from '../util/constants';
|
||||
import { slicePropShape } from '../util/propShapes';
|
||||
|
||||
const propTypes = {
|
||||
fetchAllSlices: PropTypes.func.isRequired,
|
||||
|
@ -66,6 +72,17 @@ const SIDEPANE_HEADER_HEIGHT = 30;
|
|||
const SLICE_ADDER_CONTROL_HEIGHT = 64;
|
||||
const DEFAULT_CELL_HEIGHT = 112;
|
||||
|
||||
const Controls = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: ${({ theme }) => theme.gridUnit * 3}px;
|
||||
`;
|
||||
|
||||
const StyledSelect = styled(Select)`
|
||||
margin-left: ${({ theme }) => theme.gridUnit * 2}px;
|
||||
min-width: 150px;
|
||||
`;
|
||||
|
||||
class SliceAdder extends React.Component {
|
||||
static sortByComparator(attr) {
|
||||
const desc = attr === 'changed_on' ? -1 : 1;
|
||||
|
@ -92,6 +109,7 @@ class SliceAdder extends React.Component {
|
|||
this.rowRenderer = this.rowRenderer.bind(this);
|
||||
this.searchUpdated = this.searchUpdated.bind(this);
|
||||
this.handleKeyPress = this.handleKeyPress.bind(this);
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.handleSelect = this.handleSelect.bind(this);
|
||||
}
|
||||
|
||||
|
@ -136,6 +154,10 @@ class SliceAdder extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
handleChange(ev) {
|
||||
this.searchUpdated(ev.target.value);
|
||||
}
|
||||
|
||||
searchUpdated(searchTerm) {
|
||||
this.setState(prevState => ({
|
||||
searchTerm,
|
||||
|
@ -146,7 +168,8 @@ class SliceAdder extends React.Component {
|
|||
}));
|
||||
}
|
||||
|
||||
handleSelect(sortBy) {
|
||||
handleSelect(object) {
|
||||
const sortBy = object.value;
|
||||
this.setState(prevState => ({
|
||||
sortBy,
|
||||
filteredSlices: this.getFilteredSortedSlices(
|
||||
|
@ -210,26 +233,25 @@ class SliceAdder extends React.Component {
|
|||
MARGIN_BOTTOM;
|
||||
return (
|
||||
<div className="slice-adder-container">
|
||||
<div className="controls">
|
||||
<SearchInput
|
||||
<Controls>
|
||||
<Input
|
||||
placeholder={t('Filter your charts')}
|
||||
className="search-input"
|
||||
onChange={this.searchUpdated}
|
||||
onChange={this.handleChange}
|
||||
onKeyPress={this.handleKeyPress}
|
||||
data-test="dashboard-charts-filter-search-input"
|
||||
/>
|
||||
<Select
|
||||
<StyledSelect
|
||||
id="slice-adder-sortby"
|
||||
defaultValue={DEFAULT_SORT_KEY}
|
||||
value={this.state.sortBy}
|
||||
onChange={this.handleSelect}
|
||||
>
|
||||
{Object.entries(KEYS_TO_SORT).map(([key, label]) => (
|
||||
<Select.Option key={key} value={key}>
|
||||
Sort by {label}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
options={Object.entries(KEYS_TO_SORT).map(([key, label]) => ({
|
||||
label: `${t('Sort by')} ${label}`,
|
||||
value: key,
|
||||
}))}
|
||||
placeholder={t('Sort by')}
|
||||
/>
|
||||
</Controls>
|
||||
{this.props.isLoading && <Loading />}
|
||||
{!this.props.isLoading && this.state.filteredSlices.length > 0 && (
|
||||
<List
|
||||
|
|
|
@ -90,63 +90,6 @@
|
|||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.chart-card-container {
|
||||
.chart-card {
|
||||
border: 1px solid @gray-light;
|
||||
font-weight: @font-weight-light;
|
||||
padding: 8px;
|
||||
margin: 0 8px 8px 8px;
|
||||
position: relative;
|
||||
cursor: move;
|
||||
background: fade(@lightest, @opacity-medium-light);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
background: @gray-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin-right: 60px;
|
||||
margin-bottom: 8px;
|
||||
font-weight: @font-weight-bold;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.item {
|
||||
span {
|
||||
word-break: break-all;
|
||||
|
||||
&:first-child {
|
||||
font-weight: @font-weight-normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-card.is-selected {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.is-added-label {
|
||||
background: @almost-black;
|
||||
color: @lightest;
|
||||
font-size: @font-size-s;
|
||||
line-height: @line-height-tight;
|
||||
text-transform: uppercase;
|
||||
position: absolute;
|
||||
padding: 4px 8px;
|
||||
top: 32px;
|
||||
right: 32px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.slice-adder-container {
|
||||
position: relative;
|
||||
background-color: white;
|
||||
|
|
Loading…
Reference in New Issue