mirror of https://github.com/apache/superset.git
refactor: Boostrap to AntD - Row/Col (#14100)
This commit is contained in:
parent
01de3096b3
commit
b963624e12
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
@ -114,7 +115,7 @@ export default function SaveQuery({
|
|||
const renderModalBody = () => (
|
||||
<FormGroup bsSize="small">
|
||||
<Row>
|
||||
<Col md={12}>
|
||||
<Col xs={24}>
|
||||
<small>
|
||||
<FormLabel htmlFor="embed-height">{t('Name')}</FormLabel>
|
||||
</small>
|
||||
|
@ -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>
|
||||
|
@ -140,7 +141,7 @@ export default function SaveQuery({
|
|||
<br />
|
||||
<div>
|
||||
<Row>
|
||||
<Col md={12}>
|
||||
<Col xs={24}>
|
||||
<small>{saveQueryWarning}</small>
|
||||
</Col>
|
||||
</Row>
|
||||
|
|
|
@ -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';
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -166,7 +167,7 @@ const ScheduleQueryButton: FunctionComponent<ScheduleQueryButtonProps> = ({
|
|||
</Col>
|
||||
</StyledRow>
|
||||
<Row>
|
||||
<Col md={12}>
|
||||
<Col xs={24}>
|
||||
<div className="json-schema">
|
||||
<Form
|
||||
schema={getJSONSchema()}
|
||||
|
@ -179,7 +180,7 @@ const ScheduleQueryButton: FunctionComponent<ScheduleQueryButtonProps> = ({
|
|||
</Row>
|
||||
{scheduleQueryWarning && (
|
||||
<Row>
|
||||
<Col md={12}>
|
||||
<Col xs={24}>
|
||||
<small>{scheduleQueryWarning}</small>
|
||||
</Col>
|
||||
</Row>
|
||||
|
|
|
@ -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';
|
||||
|
||||
|
|
|
@ -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';
|
||||
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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';
|
||||
|
@ -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
|
||||
|
@ -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}
|
||||
|
@ -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"
|
||||
|
@ -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"
|
||||
|
@ -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}
|
||||
|
@ -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"
|
||||
|
@ -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"
|
||||
|
@ -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
|
||||
|
|
|
@ -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';
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
|
|
@ -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';
|
||||
|
||||
|
@ -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}>
|
||||
<Col xs={12}>
|
||||
<FormControl
|
||||
data-test="min-bound"
|
||||
type="text"
|
||||
|
@ -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"
|
||||
|
|
|
@ -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';
|
||||
|
@ -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>
|
||||
|
@ -188,12 +188,14 @@ 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
|
||||
|
@ -201,12 +203,14 @@ export default class SpatialControl extends React.Component {
|
|||
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>
|
||||
|
|
|
@ -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';
|
||||
|
@ -128,7 +129,7 @@ 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"
|
||||
|
@ -136,7 +137,9 @@ export default class TimeSeriesColumnControl extends React.Component {
|
|||
label={ttLabel}
|
||||
/>
|
||||
</Col>
|
||||
<Col md={7}>{control}</Col>
|
||||
<Col xs={24} md={14}>
|
||||
{control}
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -18,7 +18,8 @@
|
|||
*/
|
||||
import React, { useEffect, useRef, useState } 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 { Behavior, t, getChartMetadataRegistry } from '@superset-ui/core';
|
||||
import { useDynamicPluginContext } from 'src/components/DynamicPlugins';
|
||||
import Modal from 'src/components/Modal';
|
||||
|
@ -44,7 +45,6 @@ const defaultProps = {
|
|||
|
||||
const registry = getChartMetadataRegistry();
|
||||
|
||||
const IMAGE_PER_ROW = 6;
|
||||
const DEFAULT_ORDER = [
|
||||
'line',
|
||||
'big_number',
|
||||
|
@ -190,19 +190,6 @@ const VizTypeControl = props => {
|
|||
)
|
||||
.filter(entry => entry.value.name.toLowerCase().includes(filterString));
|
||||
|
||||
const rows = [];
|
||||
for (let i = 0; i <= filteredTypes.length; i += IMAGE_PER_ROW) {
|
||||
rows.push(
|
||||
<Row data-test="viz-row" key={`row-${i}`}>
|
||||
{filteredTypes.slice(i, i + IMAGE_PER_ROW).map(entry => (
|
||||
<Col md={12 / IMAGE_PER_ROW} key={`grid-col-${entry.key}`}>
|
||||
{renderItem(entry)}
|
||||
</Col>
|
||||
))}
|
||||
</Row>,
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ControlHeader {...props} />
|
||||
|
@ -242,7 +229,13 @@ const VizTypeControl = props => {
|
|||
onChange={changeSearch}
|
||||
/>
|
||||
</div>
|
||||
{rows}
|
||||
<Row data-test="viz-row" gutter={16}>
|
||||
{filteredTypes.map(entry => (
|
||||
<Col xs={12} sm={8} md={6} lg={4} key={`grid-col-${entry.key}`}>
|
||||
{renderItem(entry)}
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -17,16 +17,16 @@
|
|||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { Col, Row, Panel } from 'react-bootstrap';
|
||||
import { Row, Col } from 'src/common/components';
|
||||
import { Panel } from 'react-bootstrap';
|
||||
import Tabs from 'src/common/components/Tabs';
|
||||
import { t } from '@superset-ui/core';
|
||||
|
||||
import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
|
||||
import Favorites from './Favorites';
|
||||
import UserInfo from './UserInfo';
|
||||
import Security from './Security';
|
||||
import RecentActivity from './RecentActivity';
|
||||
import CreatedContent from './CreatedContent';
|
||||
import { UserWithPermissionsAndRoles } from '../../types/bootstrapTypes';
|
||||
|
||||
interface AppProps {
|
||||
user: UserWithPermissionsAndRoles;
|
||||
|
@ -35,11 +35,11 @@ interface AppProps {
|
|||
export default function App({ user }: AppProps) {
|
||||
return (
|
||||
<div className="container app">
|
||||
<Row>
|
||||
<Col md={3}>
|
||||
<Row gutter={16}>
|
||||
<Col xs={24} md={6}>
|
||||
<UserInfo user={user} />
|
||||
</Col>
|
||||
<Col md={9}>
|
||||
<Col xs={24} md={18}>
|
||||
<Tabs centered>
|
||||
<Tabs.TabPane
|
||||
key="1"
|
||||
|
|
Loading…
Reference in New Issue