Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: Boostrap to AntD - Row/Col #14100

Merged
merged 1 commit into from
Apr 23, 2021
Merged

refactor: Boostrap to AntD - Row/Col #14100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion superset-frontend/spec/javascripts/profile/App_spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
* under the License.
*/
import React from 'react';
import { Col, Row } from 'react-bootstrap';
import { Row, Col } from 'src/common/components';
import { shallow } from 'enzyme';
import App from 'src/profile/components/App';
import Tabs from 'src/common/components/Tabs';
Expand Down
9 changes: 5 additions & 4 deletions superset-frontend/src/SqlLab/components/SaveQuery.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@
* under the License.
*/
import React, { useState } from 'react';
import { FormControl, FormGroup, Row, Col } from 'react-bootstrap';
import { Row, Col } from 'src/common/components';
import { FormControl, FormGroup } from 'react-bootstrap';
import { t, supersetTheme, styled } from '@superset-ui/core';

import Button from 'src/components/Button';
Expand Down Expand Up @@ -114,7 +115,7 @@ export default function SaveQuery({
const renderModalBody = () => (
<FormGroup bsSize="small">
<Row>
<Col md={12}>
<Col xs={24}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems OK, but if there's only one Col for each of these rows, I'm wondering if we even need the rows/cols at all. It seems like a good ol' div would suffice.

<small>
<FormLabel htmlFor="embed-height">{t('Name')}</FormLabel>
</small>
Expand All @@ -123,7 +124,7 @@ export default function SaveQuery({
</Row>
<br />
<Row>
<Col md={12}>
<Col xs={24}>
<small>
<FormLabel htmlFor="embed-height">{t('Description')}</FormLabel>
</small>
Expand All @@ -140,7 +141,7 @@ export default function SaveQuery({
<br />
<div>
<Row>
<Col md={12}>
<Col xs={24}>
<small>{saveQueryWarning}</small>
</Col>
</Row>
Expand Down
11 changes: 6 additions & 5 deletions superset-frontend/src/SqlLab/components/ScheduleQueryButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@
*/
import React, { FunctionComponent, useState } from 'react';
import Form, { FormProps, FormValidation } from 'react-jsonschema-form';
import { Col, FormControl, FormGroup, Row } from 'react-bootstrap';
import { Row, Col } from 'src/common/components';
import { FormControl, FormGroup } from 'react-bootstrap';
import { t, styled } from '@superset-ui/core';
import * as chrono from 'chrono-node';
import ModalTrigger from 'src/components/ModalTrigger';
Expand Down Expand Up @@ -140,7 +141,7 @@ const ScheduleQueryButton: FunctionComponent<ScheduleQueryButtonProps> = ({
const renderModalBody = () => (
<FormGroup>
<StyledRow>
<Col md={12}>
<Col xs={24}>
<FormLabel className="control-label" htmlFor="embed-height">
{t('Label')}
</FormLabel>
Expand All @@ -153,7 +154,7 @@ const ScheduleQueryButton: FunctionComponent<ScheduleQueryButtonProps> = ({
</Col>
</StyledRow>
<StyledRow>
<Col md={12}>
<Col xs={24}>
<FormLabel className="control-label" htmlFor="embed-height">
{t('Description')}
</FormLabel>
Expand All @@ -166,7 +167,7 @@ const ScheduleQueryButton: FunctionComponent<ScheduleQueryButtonProps> = ({
</Col>
</StyledRow>
<Row>
<Col md={12}>
<Col xs={24}>
<div className="json-schema">
<Form
schema={getJSONSchema()}
Expand All @@ -179,7 +180,7 @@ const ScheduleQueryButton: FunctionComponent<ScheduleQueryButtonProps> = ({
</Row>
{scheduleQueryWarning && (
<Row>
<Col md={12}>
<Col xs={24}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure we even need these either. Not saying it should affect this PR, just something to consider.

<small>{scheduleQueryWarning}</small>
</Col>
</Row>
Expand Down
2 changes: 1 addition & 1 deletion superset-frontend/src/components/FormRow/FormRow.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import React from 'react';
import { shallow } from 'enzyme';

import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
import { Col, Row } from 'react-bootstrap';
import { Row, Col } from 'src/common/components';
import TextControl from 'src/explore/components/controls/TextControl';
import FormRow from 'src/components/FormRow';

Expand Down
18 changes: 11 additions & 7 deletions superset-frontend/src/components/FormRow/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
import { Row, Col } from 'react-bootstrap';
import { Row, Col } from 'src/common/components';

import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';

Expand Down Expand Up @@ -52,20 +52,24 @@ export default function FormRow({ label, tooltip, control, isCheckbox }) {
);
if (isCheckbox) {
return (
<Row style={STYLE_ROW}>
<Col md={4} style={STYLE_RALIGN}>
<Row style={STYLE_ROW} gutter={16}>
<Col xs={24} md={8} style={STYLE_RALIGN}>
{control}
</Col>
<Col md={8}>{labelAndTooltip}</Col>
<Col xs={24} md={16}>
{labelAndTooltip}
</Col>
</Row>
);
}
return (
<Row style={STYLE_ROW}>
<Col md={4} style={STYLE_RALIGN}>
<Row style={STYLE_ROW} gutter={16}>
<Col xs={24} md={8} style={STYLE_RALIGN}>
{labelAndTooltip}
</Col>
<Col md={8}>{control}</Col>
<Col xs={24} md={16}>
{control}
</Col>
</Row>
);
}
Expand Down
29 changes: 15 additions & 14 deletions superset-frontend/src/dashboard/components/PropertiesModal/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
import { Row, Col, FormControl } from 'react-bootstrap';
import { Row, Col } from 'src/common/components';
import { FormControl } from 'react-bootstrap';
import jsonStringify from 'json-stringify-pretty-compact';
import Button from 'src/components/Button';
import { AsyncSelect } from 'src/components/Select';
Expand Down Expand Up @@ -323,8 +324,8 @@ class PropertiesModal extends React.PureComponent {
getRowsWithoutRoles() {
const { values, isDashboardLoaded } = this.state;
return (
<Row>
<Col md={6}>
<Row gutter={16}>
<Col xs={24} md={12}>
<h3 style={{ marginTop: '1em' }}>{t('Access')}</h3>
<FormLabel htmlFor="owners">{t('Owners')}</FormLabel>
<AsyncSelect
Expand All @@ -344,7 +345,7 @@ class PropertiesModal extends React.PureComponent {
)}
</p>
</Col>
<Col md={6}>
<Col xs={24} md={12}>
<h3 style={{ marginTop: '1em' }}>{t('Colors')}</h3>
<ColorSchemeControlWrapper
onChange={this.onColorSchemeChange}
Expand All @@ -360,12 +361,12 @@ class PropertiesModal extends React.PureComponent {
return (
<>
<Row>
<Col md={12}>
<Col xs={24} md={24}>
<h3 style={{ marginTop: '1em' }}>{t('Access')}</h3>
</Col>
</Row>
<Row>
<Col md={6}>
<Row gutter={16}>
<Col xs={24} md={12}>
<FormLabel htmlFor="owners">{t('Owners')}</FormLabel>
<AsyncSelect
name="owners"
Expand All @@ -384,7 +385,7 @@ class PropertiesModal extends React.PureComponent {
)}
</p>
</Col>
<Col md={6}>
<Col xs={24} md={12}>
<FormLabel htmlFor="roles">{t('Roles')}</FormLabel>
<AsyncSelect
name="roles"
Expand All @@ -405,7 +406,7 @@ class PropertiesModal extends React.PureComponent {
</Col>
</Row>
<Row>
<Col md={6}>
<Col xs={24} md={12}>
<ColorSchemeControlWrapper
onChange={this.onColorSchemeChange}
colorScheme={values.colorScheme}
Expand Down Expand Up @@ -454,12 +455,12 @@ class PropertiesModal extends React.PureComponent {
>
<form data-test="dashboard-edit-properties-form" onSubmit={this.submit}>
<Row>
<Col md={12}>
<Col xs={24} md={24}>
<h3>{t('Basic information')}</h3>
</Col>
</Row>
<Row>
<Col md={6}>
<Row gutter={16}>
<Col xs={24} md={12}>
<FormLabel htmlFor="embed-height">{t('Title')}</FormLabel>
<FormControl
data-test="dashboard-title-input"
Expand All @@ -471,7 +472,7 @@ class PropertiesModal extends React.PureComponent {
disabled={!isDashboardLoaded}
/>
</Col>
<Col md={6}>
<Col xs={24} md={12}>
<FormLabel htmlFor="embed-height">{t('URL slug')}</FormLabel>
<FormControl
name="slug"
Expand All @@ -490,7 +491,7 @@ class PropertiesModal extends React.PureComponent {
? this.getRowsWithRoles()
: this.getRowsWithoutRoles()}
<Row>
<Col md={12}>
<Col xs={24} md={24}>
<h3 style={{ marginTop: '1em' }}>
<Button buttonStyle="link" onClick={this.toggleAdvanced}>
<i
Expand Down
15 changes: 5 additions & 10 deletions superset-frontend/src/explore/components/PropertiesModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,9 @@
* under the License.
*/
import React, { useState, useEffect, useCallback } from 'react';
import {
Row,
Col,
FormControl,
FormGroup,
FormControlProps,
} from 'react-bootstrap';
import Modal from 'src/components/Modal';
import { Row, Col } from 'src/common/components';
import { FormControl, FormGroup, FormControlProps } from 'react-bootstrap';
import Button from 'src/components/Button';
import { OptionsType } from 'react-select/src/types';
import { AsyncSelect } from 'src/components/Select';
Expand Down Expand Up @@ -192,8 +187,8 @@ export default function PropertiesModal({
wrapProps={{ 'data-test': 'properties-edit-modal' }}
>
<form onSubmit={onSubmit}>
<Row>
<Col md={6}>
<Row gutter={16}>
<Col xs={24} md={12}>
<h3>{t('Basic information')}</h3>
<FormGroup>
<FormLabel htmlFor="name" required>
Expand Down Expand Up @@ -232,7 +227,7 @@ export default function PropertiesModal({
</p>
</FormGroup>
</Col>
<Col md={6}>
<Col xs={24} md={12}>
<h3>{t('Configuration')}</h3>
<FormGroup>
<FormLabel htmlFor="cacheTimeout">{t('Cache timeout')}</FormLabel>
Expand Down
9 changes: 5 additions & 4 deletions superset-frontend/src/explore/components/controls/BoundsControl.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
import { Col, Row, FormGroup, FormControl } from 'react-bootstrap';
import { Row, Col } from 'src/common/components';
import { FormGroup, FormControl } from 'react-bootstrap';
import { t } from '@superset-ui/core';
import ControlHeader from '../ControlHeader';

Expand Down Expand Up @@ -87,8 +88,8 @@ export default class BoundsControl extends React.Component {
<div>
<ControlHeader {...this.props} />
<FormGroup bsSize="small">
<Row>
<Col xs={6}>
<Row gutter={16}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we could use withTheme for these to get a hold of gridUnit, but it's not a blocker for this work I suppose.

<Col xs={12}>
<FormControl
data-test="min-bound"
type="text"
Expand All @@ -97,7 +98,7 @@ export default class BoundsControl extends React.Component {
value={this.state.minMax[0]}
/>
</Col>
<Col xs={6}>
<Col xs={12}>
<FormControl
type="text"
data-test="max-bound"
Expand Down
24 changes: 14 additions & 10 deletions superset-frontend/src/explore/components/controls/SpatialControl.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
import { Row, Col } from 'react-bootstrap';
import { Row, Col } from 'src/common/components';
import { t } from '@superset-ui/core';

import Label from 'src/components/Label';
Expand Down Expand Up @@ -168,12 +168,12 @@ export default class SpatialControl extends React.Component {
isSelected={this.state.type === spatialTypes.latlong}
onSelect={this.setType.bind(this, spatialTypes.latlong)}
>
<Row>
<Col md={6}>
<Row gutter={16}>
<Col xs={24} md={12}>
Longitude
{this.renderSelect('lonCol', spatialTypes.latlong)}
</Col>
<Col md={6}>
<Col xs={24} md={12}>
Latitude
{this.renderSelect('latCol', spatialTypes.latlong)}
</Col>
Expand All @@ -188,25 +188,29 @@ export default class SpatialControl extends React.Component {
isSelected={this.state.type === spatialTypes.delimited}
onSelect={this.setType.bind(this, spatialTypes.delimited)}
>
<Row>
<Col md={6}>
<Row gutter={16}>
<Col xs={24} md={12}>
{t('Column')}
{this.renderSelect('lonlatCol', spatialTypes.delimited)}
</Col>
<Col md={6}>{this.renderReverseCheckbox()}</Col>
<Col xs={24} md={12}>
{this.renderReverseCheckbox()}
</Col>
</Row>
</PopoverSection>
<PopoverSection
title={t('Geohash')}
isSelected={this.state.type === spatialTypes.geohash}
onSelect={this.setType.bind(this, spatialTypes.geohash)}
>
<Row>
<Col md={6}>
<Row gutter={16}>
<Col xs={24} md={12}>
Column
{this.renderSelect('geohashCol', spatialTypes.geohash)}
</Col>
<Col md={6}>{this.renderReverseCheckbox()}</Col>
<Col xs={24} md={12}>
{this.renderReverseCheckbox()}
</Col>
</Row>
</PopoverSection>
</div>
Expand Down
9 changes: 6 additions & 3 deletions superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
import { Row, Col, FormControl } from 'react-bootstrap';
import { Row, Col } from 'src/common/components';
import { FormControl } from 'react-bootstrap';
import Popover from 'src/components/Popover';
import Select from 'src/components/Select';
import { t } from '@superset-ui/core';
Expand Down Expand Up @@ -128,15 +129,17 @@ export default class TimeSeriesColumnControl extends React.Component {
formRow(label, tooltip, ttLabel, control) {
return (
<Row style={{ marginTop: '5px' }}>
<Col md={5}>
<Col xs={24} md={10}>
{`${label} `}
<InfoTooltipWithTrigger
placement="top"
tooltip={tooltip}
label={ttLabel}
/>
</Col>
<Col md={7}>{control}</Col>
<Col xs={24} md={14}>
{control}
</Col>
</Row>
);
}
Expand Down
Loading