This is an automated email from the ASF dual-hosted git repository.
rusackas pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new b963624 refactor: Boostrap to AntD - Row/Col (#14100)
b963624 is described below
commit b963624e1298a48631a46997b1e0bf5f64db96e3
Author: Michael S. Molina <[email protected]>
AuthorDate: Thu Apr 22 23:57:17 2021 -0400
refactor: Boostrap to AntD - Row/Col (#14100)
---
.../spec/javascripts/profile/App_spec.tsx | 2 +-
.../src/SqlLab/components/SaveQuery.tsx | 9 ++++---
.../src/SqlLab/components/ScheduleQueryButton.tsx | 11 ++++----
.../src/components/FormRow/FormRow.test.jsx | 2 +-
superset-frontend/src/components/FormRow/index.jsx | 18 ++++++++------
.../dashboard/components/PropertiesModal/index.jsx | 29 +++++++++++-----------
.../explore/components/PropertiesModal/index.tsx | 15 ++++-------
.../explore/components/controls/BoundsControl.jsx | 9 ++++---
.../explore/components/controls/SpatialControl.jsx | 24 ++++++++++--------
.../controls/TimeSeriesColumnControl/index.jsx | 9 ++++---
.../explore/components/controls/VizTypeControl.jsx | 25 +++++++------------
superset-frontend/src/profile/components/App.tsx | 12 ++++-----
12 files changed, 84 insertions(+), 81 deletions(-)
diff --git a/superset-frontend/spec/javascripts/profile/App_spec.tsx
b/superset-frontend/spec/javascripts/profile/App_spec.tsx
index e45b199..50ca563 100644
--- a/superset-frontend/spec/javascripts/profile/App_spec.tsx
+++ b/superset-frontend/spec/javascripts/profile/App_spec.tsx
@@ -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';
diff --git a/superset-frontend/src/SqlLab/components/SaveQuery.tsx
b/superset-frontend/src/SqlLab/components/SaveQuery.tsx
index 4b8e7a0b..7c9edf1 100644
--- a/superset-frontend/src/SqlLab/components/SaveQuery.tsx
+++ b/superset-frontend/src/SqlLab/components/SaveQuery.tsx
@@ -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>
diff --git a/superset-frontend/src/SqlLab/components/ScheduleQueryButton.tsx
b/superset-frontend/src/SqlLab/components/ScheduleQueryButton.tsx
index f26d334..24e13cd 100644
--- a/superset-frontend/src/SqlLab/components/ScheduleQueryButton.tsx
+++ b/superset-frontend/src/SqlLab/components/ScheduleQueryButton.tsx
@@ -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>
diff --git a/superset-frontend/src/components/FormRow/FormRow.test.jsx
b/superset-frontend/src/components/FormRow/FormRow.test.jsx
index 0dfda25..57f1d65 100644
--- a/superset-frontend/src/components/FormRow/FormRow.test.jsx
+++ b/superset-frontend/src/components/FormRow/FormRow.test.jsx
@@ -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';
diff --git a/superset-frontend/src/components/FormRow/index.jsx
b/superset-frontend/src/components/FormRow/index.jsx
index dde1b42..6dd5027 100644
--- a/superset-frontend/src/components/FormRow/index.jsx
+++ b/superset-frontend/src/components/FormRow/index.jsx
@@ -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>
);
}
diff --git
a/superset-frontend/src/dashboard/components/PropertiesModal/index.jsx
b/superset-frontend/src/dashboard/components/PropertiesModal/index.jsx
index ccf4b6c..5cc1209 100644
--- a/superset-frontend/src/dashboard/components/PropertiesModal/index.jsx
+++ b/superset-frontend/src/dashboard/components/PropertiesModal/index.jsx
@@ -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
diff --git a/superset-frontend/src/explore/components/PropertiesModal/index.tsx
b/superset-frontend/src/explore/components/PropertiesModal/index.tsx
index d40e955..2b3edff 100644
--- a/superset-frontend/src/explore/components/PropertiesModal/index.tsx
+++ b/superset-frontend/src/explore/components/PropertiesModal/index.tsx
@@ -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>
diff --git
a/superset-frontend/src/explore/components/controls/BoundsControl.jsx
b/superset-frontend/src/explore/components/controls/BoundsControl.jsx
index b56b840..b3c6440 100644
--- a/superset-frontend/src/explore/components/controls/BoundsControl.jsx
+++ b/superset-frontend/src/explore/components/controls/BoundsControl.jsx
@@ -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"
diff --git
a/superset-frontend/src/explore/components/controls/SpatialControl.jsx
b/superset-frontend/src/explore/components/controls/SpatialControl.jsx
index 5c34ec3..cf9ae6b 100644
--- a/superset-frontend/src/explore/components/controls/SpatialControl.jsx
+++ b/superset-frontend/src/explore/components/controls/SpatialControl.jsx
@@ -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>
diff --git
a/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
b/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
index 68ea8b6..f26f4d2 100644
---
a/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
+++
b/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
@@ -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>
);
}
diff --git
a/superset-frontend/src/explore/components/controls/VizTypeControl.jsx
b/superset-frontend/src/explore/components/controls/VizTypeControl.jsx
index 904051b..28eb807 100644
--- a/superset-frontend/src/explore/components/controls/VizTypeControl.jsx
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl.jsx
@@ -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>
);
diff --git a/superset-frontend/src/profile/components/App.tsx
b/superset-frontend/src/profile/components/App.tsx
index ec6cec8..6cf3885 100644
--- a/superset-frontend/src/profile/components/App.tsx
+++ b/superset-frontend/src/profile/components/App.tsx
@@ -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"
