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.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Col, Row } from 'react-bootstrap';
|
import { Row, Col } from 'src/common/components';
|
||||||
import { shallow } from 'enzyme';
|
import { shallow } from 'enzyme';
|
||||||
import App from 'src/profile/components/App';
|
import App from 'src/profile/components/App';
|
||||||
import Tabs from 'src/common/components/Tabs';
|
import Tabs from 'src/common/components/Tabs';
|
||||||
|
|
|
@ -17,7 +17,8 @@
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React, { useState } from 'react';
|
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 { t, supersetTheme, styled } from '@superset-ui/core';
|
||||||
|
|
||||||
import Button from 'src/components/Button';
|
import Button from 'src/components/Button';
|
||||||
|
@ -114,7 +115,7 @@ export default function SaveQuery({
|
||||||
const renderModalBody = () => (
|
const renderModalBody = () => (
|
||||||
<FormGroup bsSize="small">
|
<FormGroup bsSize="small">
|
||||||
<Row>
|
<Row>
|
||||||
<Col md={12}>
|
<Col xs={24}>
|
||||||
<small>
|
<small>
|
||||||
<FormLabel htmlFor="embed-height">{t('Name')}</FormLabel>
|
<FormLabel htmlFor="embed-height">{t('Name')}</FormLabel>
|
||||||
</small>
|
</small>
|
||||||
|
@ -123,7 +124,7 @@ export default function SaveQuery({
|
||||||
</Row>
|
</Row>
|
||||||
<br />
|
<br />
|
||||||
<Row>
|
<Row>
|
||||||
<Col md={12}>
|
<Col xs={24}>
|
||||||
<small>
|
<small>
|
||||||
<FormLabel htmlFor="embed-height">{t('Description')}</FormLabel>
|
<FormLabel htmlFor="embed-height">{t('Description')}</FormLabel>
|
||||||
</small>
|
</small>
|
||||||
|
@ -140,7 +141,7 @@ export default function SaveQuery({
|
||||||
<br />
|
<br />
|
||||||
<div>
|
<div>
|
||||||
<Row>
|
<Row>
|
||||||
<Col md={12}>
|
<Col xs={24}>
|
||||||
<small>{saveQueryWarning}</small>
|
<small>{saveQueryWarning}</small>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
|
|
@ -18,7 +18,8 @@
|
||||||
*/
|
*/
|
||||||
import React, { FunctionComponent, useState } from 'react';
|
import React, { FunctionComponent, useState } from 'react';
|
||||||
import Form, { FormProps, FormValidation } from 'react-jsonschema-form';
|
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 { t, styled } from '@superset-ui/core';
|
||||||
import * as chrono from 'chrono-node';
|
import * as chrono from 'chrono-node';
|
||||||
import ModalTrigger from 'src/components/ModalTrigger';
|
import ModalTrigger from 'src/components/ModalTrigger';
|
||||||
|
@ -140,7 +141,7 @@ const ScheduleQueryButton: FunctionComponent<ScheduleQueryButtonProps> = ({
|
||||||
const renderModalBody = () => (
|
const renderModalBody = () => (
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<StyledRow>
|
<StyledRow>
|
||||||
<Col md={12}>
|
<Col xs={24}>
|
||||||
<FormLabel className="control-label" htmlFor="embed-height">
|
<FormLabel className="control-label" htmlFor="embed-height">
|
||||||
{t('Label')}
|
{t('Label')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
|
@ -153,7 +154,7 @@ const ScheduleQueryButton: FunctionComponent<ScheduleQueryButtonProps> = ({
|
||||||
</Col>
|
</Col>
|
||||||
</StyledRow>
|
</StyledRow>
|
||||||
<StyledRow>
|
<StyledRow>
|
||||||
<Col md={12}>
|
<Col xs={24}>
|
||||||
<FormLabel className="control-label" htmlFor="embed-height">
|
<FormLabel className="control-label" htmlFor="embed-height">
|
||||||
{t('Description')}
|
{t('Description')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
|
@ -166,7 +167,7 @@ const ScheduleQueryButton: FunctionComponent<ScheduleQueryButtonProps> = ({
|
||||||
</Col>
|
</Col>
|
||||||
</StyledRow>
|
</StyledRow>
|
||||||
<Row>
|
<Row>
|
||||||
<Col md={12}>
|
<Col xs={24}>
|
||||||
<div className="json-schema">
|
<div className="json-schema">
|
||||||
<Form
|
<Form
|
||||||
schema={getJSONSchema()}
|
schema={getJSONSchema()}
|
||||||
|
@ -179,7 +180,7 @@ const ScheduleQueryButton: FunctionComponent<ScheduleQueryButtonProps> = ({
|
||||||
</Row>
|
</Row>
|
||||||
{scheduleQueryWarning && (
|
{scheduleQueryWarning && (
|
||||||
<Row>
|
<Row>
|
||||||
<Col md={12}>
|
<Col xs={24}>
|
||||||
<small>{scheduleQueryWarning}</small>
|
<small>{scheduleQueryWarning}</small>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
|
|
@ -20,7 +20,7 @@ import React from 'react';
|
||||||
import { shallow } from 'enzyme';
|
import { shallow } from 'enzyme';
|
||||||
|
|
||||||
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
|
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 TextControl from 'src/explore/components/controls/TextControl';
|
||||||
import FormRow from 'src/components/FormRow';
|
import FormRow from 'src/components/FormRow';
|
||||||
|
|
||||||
|
|
|
@ -18,7 +18,7 @@
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
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';
|
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
|
||||||
|
|
||||||
|
@ -52,20 +52,24 @@ export default function FormRow({ label, tooltip, control, isCheckbox }) {
|
||||||
);
|
);
|
||||||
if (isCheckbox) {
|
if (isCheckbox) {
|
||||||
return (
|
return (
|
||||||
<Row style={STYLE_ROW}>
|
<Row style={STYLE_ROW} gutter={16}>
|
||||||
<Col md={4} style={STYLE_RALIGN}>
|
<Col xs={24} md={8} style={STYLE_RALIGN}>
|
||||||
{control}
|
{control}
|
||||||
</Col>
|
</Col>
|
||||||
<Col md={8}>{labelAndTooltip}</Col>
|
<Col xs={24} md={16}>
|
||||||
|
{labelAndTooltip}
|
||||||
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<Row style={STYLE_ROW}>
|
<Row style={STYLE_ROW} gutter={16}>
|
||||||
<Col md={4} style={STYLE_RALIGN}>
|
<Col xs={24} md={8} style={STYLE_RALIGN}>
|
||||||
{labelAndTooltip}
|
{labelAndTooltip}
|
||||||
</Col>
|
</Col>
|
||||||
<Col md={8}>{control}</Col>
|
<Col xs={24} md={16}>
|
||||||
|
{control}
|
||||||
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,7 +18,8 @@
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
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 jsonStringify from 'json-stringify-pretty-compact';
|
||||||
import Button from 'src/components/Button';
|
import Button from 'src/components/Button';
|
||||||
import { AsyncSelect } from 'src/components/Select';
|
import { AsyncSelect } from 'src/components/Select';
|
||||||
|
@ -323,8 +324,8 @@ class PropertiesModal extends React.PureComponent {
|
||||||
getRowsWithoutRoles() {
|
getRowsWithoutRoles() {
|
||||||
const { values, isDashboardLoaded } = this.state;
|
const { values, isDashboardLoaded } = this.state;
|
||||||
return (
|
return (
|
||||||
<Row>
|
<Row gutter={16}>
|
||||||
<Col md={6}>
|
<Col xs={24} md={12}>
|
||||||
<h3 style={{ marginTop: '1em' }}>{t('Access')}</h3>
|
<h3 style={{ marginTop: '1em' }}>{t('Access')}</h3>
|
||||||
<FormLabel htmlFor="owners">{t('Owners')}</FormLabel>
|
<FormLabel htmlFor="owners">{t('Owners')}</FormLabel>
|
||||||
<AsyncSelect
|
<AsyncSelect
|
||||||
|
@ -344,7 +345,7 @@ class PropertiesModal extends React.PureComponent {
|
||||||
)}
|
)}
|
||||||
</p>
|
</p>
|
||||||
</Col>
|
</Col>
|
||||||
<Col md={6}>
|
<Col xs={24} md={12}>
|
||||||
<h3 style={{ marginTop: '1em' }}>{t('Colors')}</h3>
|
<h3 style={{ marginTop: '1em' }}>{t('Colors')}</h3>
|
||||||
<ColorSchemeControlWrapper
|
<ColorSchemeControlWrapper
|
||||||
onChange={this.onColorSchemeChange}
|
onChange={this.onColorSchemeChange}
|
||||||
|
@ -360,12 +361,12 @@ class PropertiesModal extends React.PureComponent {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Row>
|
<Row>
|
||||||
<Col md={12}>
|
<Col xs={24} md={24}>
|
||||||
<h3 style={{ marginTop: '1em' }}>{t('Access')}</h3>
|
<h3 style={{ marginTop: '1em' }}>{t('Access')}</h3>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row>
|
<Row gutter={16}>
|
||||||
<Col md={6}>
|
<Col xs={24} md={12}>
|
||||||
<FormLabel htmlFor="owners">{t('Owners')}</FormLabel>
|
<FormLabel htmlFor="owners">{t('Owners')}</FormLabel>
|
||||||
<AsyncSelect
|
<AsyncSelect
|
||||||
name="owners"
|
name="owners"
|
||||||
|
@ -384,7 +385,7 @@ class PropertiesModal extends React.PureComponent {
|
||||||
)}
|
)}
|
||||||
</p>
|
</p>
|
||||||
</Col>
|
</Col>
|
||||||
<Col md={6}>
|
<Col xs={24} md={12}>
|
||||||
<FormLabel htmlFor="roles">{t('Roles')}</FormLabel>
|
<FormLabel htmlFor="roles">{t('Roles')}</FormLabel>
|
||||||
<AsyncSelect
|
<AsyncSelect
|
||||||
name="roles"
|
name="roles"
|
||||||
|
@ -405,7 +406,7 @@ class PropertiesModal extends React.PureComponent {
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row>
|
<Row>
|
||||||
<Col md={6}>
|
<Col xs={24} md={12}>
|
||||||
<ColorSchemeControlWrapper
|
<ColorSchemeControlWrapper
|
||||||
onChange={this.onColorSchemeChange}
|
onChange={this.onColorSchemeChange}
|
||||||
colorScheme={values.colorScheme}
|
colorScheme={values.colorScheme}
|
||||||
|
@ -454,12 +455,12 @@ class PropertiesModal extends React.PureComponent {
|
||||||
>
|
>
|
||||||
<form data-test="dashboard-edit-properties-form" onSubmit={this.submit}>
|
<form data-test="dashboard-edit-properties-form" onSubmit={this.submit}>
|
||||||
<Row>
|
<Row>
|
||||||
<Col md={12}>
|
<Col xs={24} md={24}>
|
||||||
<h3>{t('Basic information')}</h3>
|
<h3>{t('Basic information')}</h3>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row>
|
<Row gutter={16}>
|
||||||
<Col md={6}>
|
<Col xs={24} md={12}>
|
||||||
<FormLabel htmlFor="embed-height">{t('Title')}</FormLabel>
|
<FormLabel htmlFor="embed-height">{t('Title')}</FormLabel>
|
||||||
<FormControl
|
<FormControl
|
||||||
data-test="dashboard-title-input"
|
data-test="dashboard-title-input"
|
||||||
|
@ -471,7 +472,7 @@ class PropertiesModal extends React.PureComponent {
|
||||||
disabled={!isDashboardLoaded}
|
disabled={!isDashboardLoaded}
|
||||||
/>
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
<Col md={6}>
|
<Col xs={24} md={12}>
|
||||||
<FormLabel htmlFor="embed-height">{t('URL slug')}</FormLabel>
|
<FormLabel htmlFor="embed-height">{t('URL slug')}</FormLabel>
|
||||||
<FormControl
|
<FormControl
|
||||||
name="slug"
|
name="slug"
|
||||||
|
@ -490,7 +491,7 @@ class PropertiesModal extends React.PureComponent {
|
||||||
? this.getRowsWithRoles()
|
? this.getRowsWithRoles()
|
||||||
: this.getRowsWithoutRoles()}
|
: this.getRowsWithoutRoles()}
|
||||||
<Row>
|
<Row>
|
||||||
<Col md={12}>
|
<Col xs={24} md={24}>
|
||||||
<h3 style={{ marginTop: '1em' }}>
|
<h3 style={{ marginTop: '1em' }}>
|
||||||
<Button buttonStyle="link" onClick={this.toggleAdvanced}>
|
<Button buttonStyle="link" onClick={this.toggleAdvanced}>
|
||||||
<i
|
<i
|
||||||
|
|
|
@ -17,14 +17,9 @@
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React, { useState, useEffect, useCallback } from 'react';
|
import React, { useState, useEffect, useCallback } from 'react';
|
||||||
import {
|
|
||||||
Row,
|
|
||||||
Col,
|
|
||||||
FormControl,
|
|
||||||
FormGroup,
|
|
||||||
FormControlProps,
|
|
||||||
} from 'react-bootstrap';
|
|
||||||
import Modal from 'src/components/Modal';
|
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 Button from 'src/components/Button';
|
||||||
import { OptionsType } from 'react-select/src/types';
|
import { OptionsType } from 'react-select/src/types';
|
||||||
import { AsyncSelect } from 'src/components/Select';
|
import { AsyncSelect } from 'src/components/Select';
|
||||||
|
@ -192,8 +187,8 @@ export default function PropertiesModal({
|
||||||
wrapProps={{ 'data-test': 'properties-edit-modal' }}
|
wrapProps={{ 'data-test': 'properties-edit-modal' }}
|
||||||
>
|
>
|
||||||
<form onSubmit={onSubmit}>
|
<form onSubmit={onSubmit}>
|
||||||
<Row>
|
<Row gutter={16}>
|
||||||
<Col md={6}>
|
<Col xs={24} md={12}>
|
||||||
<h3>{t('Basic information')}</h3>
|
<h3>{t('Basic information')}</h3>
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<FormLabel htmlFor="name" required>
|
<FormLabel htmlFor="name" required>
|
||||||
|
@ -232,7 +227,7 @@ export default function PropertiesModal({
|
||||||
</p>
|
</p>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
</Col>
|
</Col>
|
||||||
<Col md={6}>
|
<Col xs={24} md={12}>
|
||||||
<h3>{t('Configuration')}</h3>
|
<h3>{t('Configuration')}</h3>
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<FormLabel htmlFor="cacheTimeout">{t('Cache timeout')}</FormLabel>
|
<FormLabel htmlFor="cacheTimeout">{t('Cache timeout')}</FormLabel>
|
||||||
|
|
|
@ -18,7 +18,8 @@
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
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 { t } from '@superset-ui/core';
|
||||||
import ControlHeader from '../ControlHeader';
|
import ControlHeader from '../ControlHeader';
|
||||||
|
|
||||||
|
@ -87,8 +88,8 @@ export default class BoundsControl extends React.Component {
|
||||||
<div>
|
<div>
|
||||||
<ControlHeader {...this.props} />
|
<ControlHeader {...this.props} />
|
||||||
<FormGroup bsSize="small">
|
<FormGroup bsSize="small">
|
||||||
<Row>
|
<Row gutter={16}>
|
||||||
<Col xs={6}>
|
<Col xs={12}>
|
||||||
<FormControl
|
<FormControl
|
||||||
data-test="min-bound"
|
data-test="min-bound"
|
||||||
type="text"
|
type="text"
|
||||||
|
@ -97,7 +98,7 @@ export default class BoundsControl extends React.Component {
|
||||||
value={this.state.minMax[0]}
|
value={this.state.minMax[0]}
|
||||||
/>
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs={6}>
|
<Col xs={12}>
|
||||||
<FormControl
|
<FormControl
|
||||||
type="text"
|
type="text"
|
||||||
data-test="max-bound"
|
data-test="max-bound"
|
||||||
|
|
|
@ -18,7 +18,7 @@
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
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 { t } from '@superset-ui/core';
|
||||||
|
|
||||||
import Label from 'src/components/Label';
|
import Label from 'src/components/Label';
|
||||||
|
@ -168,12 +168,12 @@ export default class SpatialControl extends React.Component {
|
||||||
isSelected={this.state.type === spatialTypes.latlong}
|
isSelected={this.state.type === spatialTypes.latlong}
|
||||||
onSelect={this.setType.bind(this, spatialTypes.latlong)}
|
onSelect={this.setType.bind(this, spatialTypes.latlong)}
|
||||||
>
|
>
|
||||||
<Row>
|
<Row gutter={16}>
|
||||||
<Col md={6}>
|
<Col xs={24} md={12}>
|
||||||
Longitude
|
Longitude
|
||||||
{this.renderSelect('lonCol', spatialTypes.latlong)}
|
{this.renderSelect('lonCol', spatialTypes.latlong)}
|
||||||
</Col>
|
</Col>
|
||||||
<Col md={6}>
|
<Col xs={24} md={12}>
|
||||||
Latitude
|
Latitude
|
||||||
{this.renderSelect('latCol', spatialTypes.latlong)}
|
{this.renderSelect('latCol', spatialTypes.latlong)}
|
||||||
</Col>
|
</Col>
|
||||||
|
@ -188,12 +188,14 @@ export default class SpatialControl extends React.Component {
|
||||||
isSelected={this.state.type === spatialTypes.delimited}
|
isSelected={this.state.type === spatialTypes.delimited}
|
||||||
onSelect={this.setType.bind(this, spatialTypes.delimited)}
|
onSelect={this.setType.bind(this, spatialTypes.delimited)}
|
||||||
>
|
>
|
||||||
<Row>
|
<Row gutter={16}>
|
||||||
<Col md={6}>
|
<Col xs={24} md={12}>
|
||||||
{t('Column')}
|
{t('Column')}
|
||||||
{this.renderSelect('lonlatCol', spatialTypes.delimited)}
|
{this.renderSelect('lonlatCol', spatialTypes.delimited)}
|
||||||
</Col>
|
</Col>
|
||||||
<Col md={6}>{this.renderReverseCheckbox()}</Col>
|
<Col xs={24} md={12}>
|
||||||
|
{this.renderReverseCheckbox()}
|
||||||
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</PopoverSection>
|
</PopoverSection>
|
||||||
<PopoverSection
|
<PopoverSection
|
||||||
|
@ -201,12 +203,14 @@ export default class SpatialControl extends React.Component {
|
||||||
isSelected={this.state.type === spatialTypes.geohash}
|
isSelected={this.state.type === spatialTypes.geohash}
|
||||||
onSelect={this.setType.bind(this, spatialTypes.geohash)}
|
onSelect={this.setType.bind(this, spatialTypes.geohash)}
|
||||||
>
|
>
|
||||||
<Row>
|
<Row gutter={16}>
|
||||||
<Col md={6}>
|
<Col xs={24} md={12}>
|
||||||
Column
|
Column
|
||||||
{this.renderSelect('geohashCol', spatialTypes.geohash)}
|
{this.renderSelect('geohashCol', spatialTypes.geohash)}
|
||||||
</Col>
|
</Col>
|
||||||
<Col md={6}>{this.renderReverseCheckbox()}</Col>
|
<Col xs={24} md={12}>
|
||||||
|
{this.renderReverseCheckbox()}
|
||||||
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</PopoverSection>
|
</PopoverSection>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -18,7 +18,8 @@
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
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 Popover from 'src/components/Popover';
|
||||||
import Select from 'src/components/Select';
|
import Select from 'src/components/Select';
|
||||||
import { t } from '@superset-ui/core';
|
import { t } from '@superset-ui/core';
|
||||||
|
@ -128,7 +129,7 @@ export default class TimeSeriesColumnControl extends React.Component {
|
||||||
formRow(label, tooltip, ttLabel, control) {
|
formRow(label, tooltip, ttLabel, control) {
|
||||||
return (
|
return (
|
||||||
<Row style={{ marginTop: '5px' }}>
|
<Row style={{ marginTop: '5px' }}>
|
||||||
<Col md={5}>
|
<Col xs={24} md={10}>
|
||||||
{`${label} `}
|
{`${label} `}
|
||||||
<InfoTooltipWithTrigger
|
<InfoTooltipWithTrigger
|
||||||
placement="top"
|
placement="top"
|
||||||
|
@ -136,7 +137,9 @@ export default class TimeSeriesColumnControl extends React.Component {
|
||||||
label={ttLabel}
|
label={ttLabel}
|
||||||
/>
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
<Col md={7}>{control}</Col>
|
<Col xs={24} md={14}>
|
||||||
|
{control}
|
||||||
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,7 +18,8 @@
|
||||||
*/
|
*/
|
||||||
import React, { useEffect, useRef, useState } from 'react';
|
import React, { useEffect, useRef, useState } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
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 { Behavior, t, getChartMetadataRegistry } from '@superset-ui/core';
|
||||||
import { useDynamicPluginContext } from 'src/components/DynamicPlugins';
|
import { useDynamicPluginContext } from 'src/components/DynamicPlugins';
|
||||||
import Modal from 'src/components/Modal';
|
import Modal from 'src/components/Modal';
|
||||||
|
@ -44,7 +45,6 @@ const defaultProps = {
|
||||||
|
|
||||||
const registry = getChartMetadataRegistry();
|
const registry = getChartMetadataRegistry();
|
||||||
|
|
||||||
const IMAGE_PER_ROW = 6;
|
|
||||||
const DEFAULT_ORDER = [
|
const DEFAULT_ORDER = [
|
||||||
'line',
|
'line',
|
||||||
'big_number',
|
'big_number',
|
||||||
|
@ -190,19 +190,6 @@ const VizTypeControl = props => {
|
||||||
)
|
)
|
||||||
.filter(entry => entry.value.name.toLowerCase().includes(filterString));
|
.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 (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<ControlHeader {...props} />
|
<ControlHeader {...props} />
|
||||||
|
@ -242,7 +229,13 @@ const VizTypeControl = props => {
|
||||||
onChange={changeSearch}
|
onChange={changeSearch}
|
||||||
/>
|
/>
|
||||||
</div>
|
</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>
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -17,16 +17,16 @@
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
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 Tabs from 'src/common/components/Tabs';
|
||||||
import { t } from '@superset-ui/core';
|
import { t } from '@superset-ui/core';
|
||||||
|
import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
|
||||||
import Favorites from './Favorites';
|
import Favorites from './Favorites';
|
||||||
import UserInfo from './UserInfo';
|
import UserInfo from './UserInfo';
|
||||||
import Security from './Security';
|
import Security from './Security';
|
||||||
import RecentActivity from './RecentActivity';
|
import RecentActivity from './RecentActivity';
|
||||||
import CreatedContent from './CreatedContent';
|
import CreatedContent from './CreatedContent';
|
||||||
import { UserWithPermissionsAndRoles } from '../../types/bootstrapTypes';
|
|
||||||
|
|
||||||
interface AppProps {
|
interface AppProps {
|
||||||
user: UserWithPermissionsAndRoles;
|
user: UserWithPermissionsAndRoles;
|
||||||
|
@ -35,11 +35,11 @@ interface AppProps {
|
||||||
export default function App({ user }: AppProps) {
|
export default function App({ user }: AppProps) {
|
||||||
return (
|
return (
|
||||||
<div className="container app">
|
<div className="container app">
|
||||||
<Row>
|
<Row gutter={16}>
|
||||||
<Col md={3}>
|
<Col xs={24} md={6}>
|
||||||
<UserInfo user={user} />
|
<UserInfo user={user} />
|
||||||
</Col>
|
</Col>
|
||||||
<Col md={9}>
|
<Col xs={24} md={18}>
|
||||||
<Tabs centered>
|
<Tabs centered>
|
||||||
<Tabs.TabPane
|
<Tabs.TabPane
|
||||||
key="1"
|
key="1"
|
||||||
|
|
Loading…
Reference in New Issue