pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: Bootstrap to AntD - Form - iteration 3 (#14502)

This commit is contained in:
Michael S. Molina 2021-05-08 16:34:52 -03:00 committed by GitHub
parent 4f000cc8d1
commit 79ff96269b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 176 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
superset-frontend/spec/javascripts/explore/components/AdhocMetricEditPopover_spec.jsx
View File

@ -20,7 +20,7 @@
import React from 'react';
import sinon from 'sinon';
import { shallow } from 'enzyme';
import { FormGroup } from 'react-bootstrap';
import { FormItem } from 'src/components/Form';
import Button from 'src/components/Button';
import { AGGREGATES } from 'src/explore/constants';
@ -67,7 +67,7 @@ function setup(overrides) {
describe('AdhocMetricEditPopover', () => {
it('renders a popover with edit metric form contents', () => {
const { wrapper } = setup();
expect(wrapper.find(FormGroup)).toHaveLength(4);
expect(wrapper.find(FormItem)).toHaveLength(3);
expect(wrapper.find(Button)).toHaveLength(2);
});

12
superset-frontend/spec/javascripts/explore/components/BoundsControl_spec.jsx
View File

@ -17,10 +17,10 @@
* under the License.
*/
import React from 'react';
import { FormControl } from 'react-bootstrap';
import sinon from 'sinon';
import { styledMount as mount } from 'spec/helpers/theming';
import BoundsControl from 'src/explore/components/controls/BoundsControl';
import { Input } from 'src/common/components';
const defaultProps = {
name: 'y_axis_bounds',
@ -35,13 +35,13 @@ describe('BoundsControl', () => {
wrapper = mount(<BoundsControl {...defaultProps} />);
});
it('renders two FormControls', () => {
expect(wrapper.find(FormControl)).toHaveLength(2);
it('renders two Input', () => {
expect(wrapper.find(Input)).toHaveLength(2);
});
it('errors on non-numeric', () => {
wrapper
.find(FormControl)
.find(Input)
.first()
.simulate('change', { target: { value: 's' } });
expect(defaultProps.onChange.calledWith([null, null])).toBe(true);
@ -51,11 +51,11 @@ describe('BoundsControl', () => {
});
it('casts to numeric', () => {
wrapper
.find(FormControl)
.find(Input)
.first()
.simulate('change', { target: { value: '1' } });
wrapper
.find(FormControl)
.find(Input)
.last()
.simulate('change', { target: { value: '5' } });
expect(defaultProps.onChange.calledWith([1, 5])).toBe(true);

6
superset-frontend/spec/javascripts/sqllab/SaveQuery_spec.jsx
View File

@ -17,12 +17,12 @@
* under the License.
*/
import React from 'react';
import { FormControl } from 'react-bootstrap';
import { shallow } from 'enzyme';
import * as sinon from 'sinon';
import SaveQuery from 'src/SqlLab/components/SaveQuery';
import Modal from 'src/components/Modal';
import Button from 'src/components/Button';
import { FormItem } from 'src/components/Form';
describe('SavedQuery', () => {
const mockedProps = {
@ -52,11 +52,11 @@ describe('SavedQuery', () => {
expect(modal.find('[data-test="cancel-query"]')).toHaveLength(1);
});
it('has 2 FormControls', () => {
it('has 2 FormItem', () => {
const wrapper = shallow(<SaveQuery {...mockedProps} />);
const modal = wrapper.find(Modal);
expect(modal.find(FormControl)).toHaveLength(2);
expect(modal.find(FormItem)).toHaveLength(2);
});
// eslint-disable-next-line jest/no-disabled-tests
it.skip('has a save button if this is a new query', () => {

41
superset-frontend/src/SqlLab/components/SaveQuery.tsx
View File

@ -17,12 +17,10 @@
* under the License.
*/
import React, { useState } from 'react';
import { Row, Col } from 'src/common/components';
import { FormControl, FormGroup } from 'react-bootstrap';
import { Row, Col, Input, TextArea } from 'src/common/components';
import { t, supersetTheme, styled } from '@superset-ui/core';
import Button from 'src/components/Button';
import { FormLabel } from 'src/components/Form';
import { Form, FormItem } from 'src/components/Form';
import Modal from 'src/components/Modal';
import Icon from 'src/components/Icon';
@ -100,12 +98,12 @@ export default function SaveQuery({
close();
};
const onLabelChange = (e: React.FormEvent<FormControl>) => {
setLabel((e.target as HTMLInputElement).value);
const onLabelChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setLabel(e.target.value);
};
const onDescriptionChange = (e: React.FormEvent<FormControl>) => {
setDescription((e.target as HTMLInputElement).value);
const onDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
setDescription(e.target.value);
};
const toggleSave = () => {
@ -113,27 +111,24 @@ export default function SaveQuery({
};
const renderModalBody = () => (
<FormGroup bsSize="small">
<Form layout="vertical">
<Row>
<Col xs={24}>
<small>
<FormLabel htmlFor="embed-height">{t('Name')}</FormLabel>
</small>
<FormControl type="text" value={label} onChange={onLabelChange} />
<FormItem label={t('Name')}>
<Input type="text" value={label} onChange={onLabelChange} />
</FormItem>
</Col>
</Row>
<br />
<Row>
<Col xs={24}>
<small>
<FormLabel htmlFor="embed-height">{t('Description')}</FormLabel>
</small>
<FormControl
rows={5}
componentClass="textarea"
value={description}
onChange={onDescriptionChange}
/>
<FormItem label={t('Description')}>
<TextArea
rows={4}
value={description}
onChange={onDescriptionChange}
/>
</FormItem>
</Col>
</Row>
{saveQueryWarning && (
@ -149,7 +144,7 @@ export default function SaveQuery({
</div>
</>
)}
</FormGroup>
</Form>
);
return (

61
superset-frontend/src/SqlLab/components/ScheduleQueryButton.tsx
View File

@ -17,13 +17,12 @@
* under the License.
*/
import React, { FunctionComponent, useState } from 'react';
import Form, { FormProps, FormValidation } from 'react-jsonschema-form';
import { Row, Col } from 'src/common/components';
import { FormControl, FormGroup } from 'react-bootstrap';
import SchemaForm, { FormProps, FormValidation } from 'react-jsonschema-form';
import { Row, Col, Input, TextArea } from 'src/common/components';
import { t, styled } from '@superset-ui/core';
import * as chrono from 'chrono-node';
import ModalTrigger from 'src/components/ModalTrigger';
import { FormLabel } from 'src/components/Form';
import { Form, FormItem } from 'src/components/Form';
import './ScheduleQueryButton.less';
import Button from 'src/components/Button';
@ -139,42 +138,52 @@ const ScheduleQueryButton: FunctionComponent<ScheduleQueryButtonProps> = ({
};
const renderModalBody = () => (
<FormGroup>
<Form layout="vertical">
<StyledRow>
<Col xs={24}>
<FormLabel className="control-label" htmlFor="embed-height">
{t('Label')}
</FormLabel>
<FormControl
type="text"
placeholder={t('Label for your query')}
value={label}
onChange={(event: any) => setLabel(event.target?.value)}
/>
<FormItem label={t('Label')}>
<Input
type="text"
placeholder={t('Label for your query')}
value={label}
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
setLabel(event.target.value)
}
/>
</FormItem>
</Col>
</StyledRow>
<StyledRow>
<Col xs={24}>
<FormLabel className="control-label" htmlFor="embed-height">
{t('Description')}
</FormLabel>
<FormControl
componentClass="textarea"
placeholder={t('Write a description for your query')}
value={description}
onChange={(event: any) => setDescription(event.target?.value)}
/>
<FormItem label={t('Description')}>
<TextArea
rows={4}
placeholder={t('Write a description for your query')}
value={description}
onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) =>
setDescription(event.target.value)
}
/>
</FormItem>
</Col>
</StyledRow>
<Row>
<Col xs={24}>
<div className="json-schema">
<Form
<SchemaForm
schema={getJSONSchema()}
uiSchema={getUISchema}
onSubmit={onScheduleSubmit}
validate={getValidator()}
/>
>
<Button
buttonStyle="primary"
htmlType="submit"
css={{ float: 'right' }}
>
Submit
</Button>
</SchemaForm>
</div>
</Col>
</Row>
@ -185,7 +194,7 @@ const ScheduleQueryButton: FunctionComponent<ScheduleQueryButtonProps> = ({
</Col>
</Row>
)}
</FormGroup>
</Form>
);
return (

12
superset-frontend/src/common/components/index.tsx
View File

@ -89,11 +89,13 @@ export const Menu = Object.assign(AntdMenu, {
});
export const Input = styled(AntdInput)`
&[type='text'],
&[type='textarea'] {
border: 1px solid ${({ theme }) => theme.colors.secondary.light3};
border-radius: ${({ theme }) => theme.borderRadius}px;
}
border: 1px solid ${({ theme }) => theme.colors.secondary.light3};
border-radius: ${({ theme }) => theme.borderRadius}px;
`;
export const TextArea = styled(AntdInput.TextArea)`
border: 1px solid ${({ theme }) => theme.colors.secondary.light3};
border-radius: ${({ theme }) => theme.borderRadius}px;
`;
export const NoAnimationDropdown = (props: DropDownProps) => (

33
superset-frontend/src/components/Form/FormItem.tsx
View File

@ -21,23 +21,28 @@ import Form, { FormItemProps } from 'antd/lib/form';
import { styled } from '@superset-ui/core';
const StyledItem = styled(Form.Item)`
.ant-form-item-label > label {
text-transform: uppercase;
font-size: ${({ theme }) => theme.typography.sizes.s}px;
color: ${({ theme }) => theme.colors.grayscale.base};
${({ theme }) => `
.ant-form-item-label {
padding-bottom: ${theme.gridUnit}px;
& > label {
text-transform: uppercase;
font-size: ${theme.typography.sizes.s}px;
color: ${theme.colors.grayscale.base};
&.ant-form-item-required:not(.ant-form-item-required-mark-optional) {
&::before {
display: none;
}
&::after {
display: inline-block;
color: ${({ theme }) => theme.colors.error.base};
font-size: ${({ theme }) => theme.typography.sizes.m}px;
content: '*';
&.ant-form-item-required:not(.ant-form-item-required-mark-optional) {
&::before {
display: none;
}
&::after {
display: inline-block;
color: ${theme.colors.error.base};
font-size: ${theme.typography.sizes.m}px;
content: '*';
}
}
}
}
}
`}
`;
export default function FormItem(props: FormItemProps) {

4
superset-frontend/src/dashboard/components/PropertiesModal/index.jsx
View File

@ -350,7 +350,7 @@ class PropertiesModal extends React.PureComponent {
<ColorSchemeControlWrapper
onChange={this.onColorSchemeChange}
colorScheme={values.colorScheme}
labelMargin={8}
labelMargin={4}
/>
</Col>
</Row>
@ -413,7 +413,7 @@ class PropertiesModal extends React.PureComponent {
<ColorSchemeControlWrapper
onChange={this.onColorSchemeChange}
colorScheme={values.colorScheme}
labelMargin={8}
labelMargin={4}
/>
</Col>
</Row>

6
superset-frontend/src/explore/components/DataTableControl/index.tsx
View File

@ -18,10 +18,9 @@
*/
import React, { useMemo } from 'react';
import { styled, t } from '@superset-ui/core';
import { FormControl } from 'react-bootstrap';
import { Column } from 'react-table';
import debounce from 'lodash/debounce';
import { Input } from 'src/common/components';
import {
BOOL_FALSE_DISPLAY,
BOOL_TRUE_DISPLAY,
@ -73,9 +72,8 @@ export const FilterInput = ({
}) => {
const debouncedChangeHandler = debounce(onChangeHandler, SLOW_DEBOUNCE);
return (
<FormControl
<Input
placeholder={t('Search')}
bsSize="sm"
onChange={(event: any) => {
const filterText = event.target.value;
debouncedChangeHandler(filterText);

45
superset-frontend/src/explore/components/controls/BoundsControl.jsx
View File

@ -18,8 +18,7 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
import { Row, Col } from 'src/common/components';
import { FormGroup, FormControl } from 'react-bootstrap';
import { Row, Col, Input } from 'src/common/components';
import { t } from '@superset-ui/core';
import ControlHeader from '../ControlHeader';
@ -87,28 +86,26 @@ export default class BoundsControl extends React.Component {
return (
<div>
<ControlHeader {...this.props} />
<FormGroup bsSize="small">
<Row gutter={16}>
<Col xs={12}>
<FormControl
data-test="min-bound"
type="text"
placeholder={t('Min')}
onChange={this.onMinChange}
value={this.state.minMax[0]}
/>
</Col>
<Col xs={12}>
<FormControl
type="text"
data-test="max-bound"
placeholder={t('Max')}
onChange={this.onMaxChange}
value={this.state.minMax[1]}
/>
</Col>
</Row>
</FormGroup>
<Row gutter={16}>
<Col xs={12}>
<Input
data-test="min-bound"
type="text"
placeholder={t('Min')}
onChange={this.onMinChange}
value={this.state.minMax[0]}
/>
</Col>
<Col xs={12}>
<Input
type="text"
data-test="max-bound"
placeholder={t('Max')}
onChange={this.onMaxChange}
value={this.state.minMax[1]}
/>
</Col>
</Row>
</div>
);
}

4
superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/AdhocMetricEditPopover.test.tsx
View File

@ -170,7 +170,7 @@ test('Should switch to tab:Custom SQL', () => {
).toBeInTheDocument();
});
test('Should render "Custom SQL" tab correctly', () => {
test('Should render "Custom SQL" tab correctly', async () => {
const props = createProps();
props.getCurrentTab.mockImplementation(tab => {
props.adhocMetric.expressionType = tab;
@ -180,5 +180,5 @@ test('Should render "Custom SQL" tab correctly', () => {
const tab = screen.getByRole('tab', { name: 'Custom SQL' }).parentElement!;
userEvent.click(tab);
expect(screen.getByTestId('sql-editor')).toBeVisible();
expect(await screen.findByRole('textbox')).toBeInTheDocument();
});

64
superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx
View File

@ -19,13 +19,12 @@
/* eslint-disable camelcase */
import React from 'react';
import PropTypes from 'prop-types';
import { FormGroup } from 'react-bootstrap';
import Tabs from 'src/components/Tabs';
import Button from 'src/components/Button';
import { NativeSelect as Select } from 'src/components/Select';
import { t, styled } from '@superset-ui/core';
import { FormLabel } from 'src/components/Form';
import { Form, FormItem } from 'src/components/Form';
import { SQLEditor } from 'src/components/AsyncAceEditor';
import sqlKeywords from 'src/SqlLab/utils/sqlKeywords';
import { noOp } from 'src/utils/common';
@ -337,7 +336,8 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
savedMetric?.metric_name !== propsSavedMetric?.metric_name);
return (
<div
<Form
layout="vertical"
id="metrics-edit-popover"
data-test="metrics-edit-popover"
{...popoverProps}
@ -352,10 +352,7 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
allowOverflow
>
<Tabs.TabPane key={SAVED_TAB_KEY} tab={t('Saved')}>
<FormGroup>
<FormLabel>
<strong>{t('Saved metric')}</strong>
</FormLabel>
<FormItem label={t('Saved metric')}>
<StyledSelect
{...savedSelectProps}
name="select-saved"
@ -374,13 +371,10 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
</Select.Option>
))}
</StyledSelect>
</FormGroup>
</FormItem>
</Tabs.TabPane>
<Tabs.TabPane key={EXPRESSION_TYPES.SIMPLE} tab={t('Simple')}>
<FormGroup>
<FormLabel>
<strong>{t('column')}</strong>
</FormLabel>
<FormItem label={t('column')}>
<Select
{...columnSelectProps}
name="select-column"
@ -396,11 +390,8 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
</Select.Option>
))}
</Select>
</FormGroup>
<FormGroup>
<FormLabel>
<strong>{t('aggregate')}</strong>
</FormLabel>
</FormItem>
<FormItem label={t('aggregate')}>
<Select
{...aggregateSelectProps}
name="select-aggregate"
@ -412,7 +403,7 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
</Select.Option>
))}
</Select>
</FormGroup>
</FormItem>
</Tabs.TabPane>
<Tabs.TabPane
key={EXPRESSION_TYPES.SQL}
@ -420,24 +411,23 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
data-test="adhoc-metric-edit-tab#custom"
>
{this.props.datasourceType !== 'druid' ? (
<FormGroup data-test="sql-editor">
<SQLEditor
showLoadingForImport
ref={this.handleAceEditorRef}
keywords={keywords}
height={`${this.state.height - 80}px`}
onChange={this.onSqlExpressionChange}
width="100%"
showGutter={false}
value={
adhocMetric.sqlExpression || adhocMetric.translateToSql()
}
editorProps={{ $blockScrolling: true }}
enableLiveAutocompletion
className="filter-sql-editor"
wrapEnabled
/>
</FormGroup>
<SQLEditor
data-test="sql-editor"
showLoadingForImport
ref={this.handleAceEditorRef}
keywords={keywords}
height={`${this.state.height - 80}px`}
onChange={this.onSqlExpressionChange}
width="100%"
showGutter={false}
value={
adhocMetric.sqlExpression || adhocMetric.translateToSql()
}
editorProps={{ $blockScrolling: true }}
enableLiveAutocompletion
className="adhoc-filter-sql-editor"
wrapEnabled
/>
) : (
<div className="custom-sql-disabled-message">
Custom SQL Metrics are not available on druid datasources
@ -474,7 +464,7 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
className="fa fa-expand edit-popover-resize text-muted"
/>
</div>
</div>
</Form>
);
}
}

63
superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
View File

@ -18,11 +18,10 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
import { Row, Col } from 'src/common/components';
import { FormControl } from 'react-bootstrap';
import { Row, Col, Input } from 'src/common/components';
import Popover from 'src/components/Popover';
import Select from 'src/components/Select';
import { t } from '@superset-ui/core';
import { t, styled } from '@superset-ui/core';
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
import BoundsControl from '../BoundsControl';
@ -75,6 +74,20 @@ const colTypeOptions = [
{ value: 'avg', label: 'Period average' },
];
const StyledRow = styled(Row)`
margin-top: ${({ theme }) => theme.gridUnit * 2}px;
`;
const StyledCol = styled(Col)`
display: flex;
align-items: center;
`;
const StyledTooltip = styled(InfoTooltipWithTrigger)`
margin-left: ${({ theme }) => theme.gridUnit}px;
color: ${({ theme }) => theme.colors.grayscale.light1};
`;
export default class TimeSeriesColumnControl extends React.Component {
constructor(props) {
super(props);
@ -128,19 +141,15 @@ export default class TimeSeriesColumnControl extends React.Component {
formRow(label, tooltip, ttLabel, control) {
return (
<Row style={{ marginTop: '5px' }}>
<Col xs={24} md={10}>
{`${label} `}
<InfoTooltipWithTrigger
placement="top"
tooltip={tooltip}
label={ttLabel}
/>
</Col>
<Col xs={24} md={14}>
<StyledRow>
<StyledCol xs={24} md={10}>
{label}
<StyledTooltip placement="top" tooltip={tooltip} label={ttLabel} />
</StyledCol>
<StyledCol xs={24} md={14}>
{control}
</Col>
</Row>
</StyledCol>
</StyledRow>
);
}
@ -151,10 +160,9 @@ export default class TimeSeriesColumnControl extends React.Component {
'Label',
'The column header label',
'time-lag',
<FormControl
<Input
value={this.state.label}
onChange={this.onTextInputChange.bind(this, 'label')}
bsSize="small"
placeholder="Label"
/>,
)}
@ -162,10 +170,9 @@ export default class TimeSeriesColumnControl extends React.Component {
'Tooltip',
'Column header tooltip',
'col-tooltip',
<FormControl
<Input
value={this.state.tooltip}
onChange={this.onTextInputChange.bind(this, 'tooltip')}
bsSize="small"
placeholder="Tooltip"
/>,
)}
@ -186,10 +193,9 @@ export default class TimeSeriesColumnControl extends React.Component {
'Width',
'Width of the sparkline',
'spark-width',
<FormControl
<Input
value={this.state.width}
onChange={this.onTextInputChange.bind(this, 'width')}
bsSize="small"
placeholder="Width"
/>,
)}
@ -198,10 +204,9 @@ export default class TimeSeriesColumnControl extends React.Component {
'Height',
'Height of the sparkline',
'spark-width',
<FormControl
<Input
value={this.state.height}
onChange={this.onTextInputChange.bind(this, 'height')}
bsSize="small"
placeholder="Height"
/>,
)}
@ -210,10 +215,9 @@ export default class TimeSeriesColumnControl extends React.Component {
'Time lag',
'Number of periods to compare against',
'time-lag',
<FormControl
<Input
value={this.state.timeLag}
onChange={this.onTextInputChange.bind(this, 'timeLag')}
bsSize="small"
placeholder="Time Lag"
/>,
)}
@ -222,10 +226,9 @@ export default class TimeSeriesColumnControl extends React.Component {
'Time ratio',
'Number of periods to ratio against',
'time-ratio',
<FormControl
<Input
value={this.state.timeRatio}
onChange={this.onTextInputChange.bind(this, 'timeRatio')}
bsSize="small"
placeholder="Time Ratio"
/>,
)}
@ -277,10 +280,9 @@ export default class TimeSeriesColumnControl extends React.Component {
'Number format',
'Optional d3 number format string',
'd3-format',
<FormControl
<Input
value={this.state.d3format}
onChange={this.onTextInputChange.bind(this, 'd3format')}
bsSize="small"
placeholder="Number format string"
/>,
)}
@ -289,10 +291,9 @@ export default class TimeSeriesColumnControl extends React.Component {
'Date format',
'Optional d3 date format string',
'date-format',
<FormControl
<Input
value={this.state.dateFormat}
onChange={this.onTextInputChange.bind(this, 'dateFormat')}
bsSize="small"
placeholder="Date format string"
/>,
)}