mirror of
https://github.com/apache/superset.git
synced 2024-09-16 02:29:39 -04:00
chore: TypeScript <Label /> (#10494)
* chore: TypeScript <Label /> * rebase * chore: TypeScript <Label /> * rebase * A bunch o' test fixes. One more to go! * helper for mountying Emotional components with Enzyme * asf license * fixed last test, some linting * improve the storybook * Adressing comments Co-authored-by: Evan Rusackas <evan@preset.io>
This commit is contained in:
parent
96b9ba3364
commit
0bad77f0fe
55
superset-frontend/spec/helpers/theming.ts
Normal file
55
superset-frontend/spec/helpers/theming.ts
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
/**
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
import { shallow as enzymeShallow, mount as enzymeMount } from 'enzyme';
|
||||||
|
import { supersetTheme, ThemeProvider } from '@superset-ui/style';
|
||||||
|
import { ReactElement } from 'react';
|
||||||
|
|
||||||
|
type optionsType = {
|
||||||
|
wrappingComponentProps?: any;
|
||||||
|
wrappingComponent?: ReactElement;
|
||||||
|
context?: any;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function styledMount(
|
||||||
|
component: ReactElement,
|
||||||
|
options: optionsType = {},
|
||||||
|
) {
|
||||||
|
return enzymeMount(component, {
|
||||||
|
...options,
|
||||||
|
wrappingComponent: ThemeProvider,
|
||||||
|
wrappingComponentProps: {
|
||||||
|
theme: supersetTheme,
|
||||||
|
...options?.wrappingComponentProps,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function styledShallow(
|
||||||
|
component: ReactElement,
|
||||||
|
options: optionsType = {},
|
||||||
|
) {
|
||||||
|
return enzymeShallow(component, {
|
||||||
|
...options,
|
||||||
|
wrappingComponent: ThemeProvider,
|
||||||
|
wrappingComponentProps: {
|
||||||
|
theme: supersetTheme,
|
||||||
|
...options?.wrappingComponentProps,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
@ -18,8 +18,8 @@
|
|||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { shallow } from 'enzyme';
|
import { shallow } from 'enzyme';
|
||||||
import { Label } from 'react-bootstrap';
|
|
||||||
|
|
||||||
|
import Label from 'src/components/Label';
|
||||||
import CachedLabel from 'src/components/CachedLabel';
|
import CachedLabel from 'src/components/CachedLabel';
|
||||||
|
|
||||||
describe('CachedLabel', () => {
|
describe('CachedLabel', () => {
|
||||||
|
@ -20,8 +20,9 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import sinon from 'sinon';
|
import sinon from 'sinon';
|
||||||
import { shallow } from 'enzyme';
|
import { shallow } from 'enzyme';
|
||||||
import { Label, OverlayTrigger } from 'react-bootstrap';
|
import { OverlayTrigger } from 'react-bootstrap';
|
||||||
|
|
||||||
|
import Label from 'src/components/Label';
|
||||||
import AdhocFilter, {
|
import AdhocFilter, {
|
||||||
EXPRESSION_TYPES,
|
EXPRESSION_TYPES,
|
||||||
CLAUSES,
|
CLAUSES,
|
||||||
|
@ -20,8 +20,9 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import sinon from 'sinon';
|
import sinon from 'sinon';
|
||||||
import { shallow } from 'enzyme';
|
import { shallow } from 'enzyme';
|
||||||
import { Label, OverlayTrigger } from 'react-bootstrap';
|
import { OverlayTrigger } from 'react-bootstrap';
|
||||||
|
|
||||||
|
import Label from 'src/components/Label';
|
||||||
import AdhocMetric from 'src/explore/AdhocMetric';
|
import AdhocMetric from 'src/explore/AdhocMetric';
|
||||||
import AdhocMetricOption from 'src/explore/components/AdhocMetricOption';
|
import AdhocMetricOption from 'src/explore/components/AdhocMetricOption';
|
||||||
import { AGGREGATES } from 'src/explore/constants';
|
import { AGGREGATES } from 'src/explore/constants';
|
||||||
|
@ -19,9 +19,10 @@
|
|||||||
/* eslint-disable no-unused-expressions */
|
/* eslint-disable no-unused-expressions */
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import sinon from 'sinon';
|
import sinon from 'sinon';
|
||||||
import { mount } from 'enzyme';
|
import { styledMount as mount } from 'spec/helpers/theming';
|
||||||
import { Button, Label } from 'react-bootstrap';
|
import { Button } from 'react-bootstrap';
|
||||||
|
|
||||||
|
import Label from 'src/components/Label';
|
||||||
import DateFilterControl from 'src/explore/components/controls/DateFilterControl';
|
import DateFilterControl from 'src/explore/components/controls/DateFilterControl';
|
||||||
import ControlHeader from 'src/explore/components/ControlHeader';
|
import ControlHeader from 'src/explore/components/ControlHeader';
|
||||||
|
|
||||||
|
@ -18,8 +18,8 @@
|
|||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { shallow } from 'enzyme';
|
import { shallow } from 'enzyme';
|
||||||
import { Label } from 'react-bootstrap';
|
|
||||||
|
|
||||||
|
import Label from 'src/components/Label';
|
||||||
import TooltipWrapper from 'src/components/TooltipWrapper';
|
import TooltipWrapper from 'src/components/TooltipWrapper';
|
||||||
import RowCountLabel from 'src/explore/components/RowCountLabel';
|
import RowCountLabel from 'src/explore/components/RowCountLabel';
|
||||||
|
|
||||||
|
@ -18,9 +18,10 @@
|
|||||||
*/
|
*/
|
||||||
/* eslint-disable no-unused-expressions */
|
/* eslint-disable no-unused-expressions */
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { shallow } from 'enzyme';
|
import { styledMount as mount } from 'spec/helpers/theming';
|
||||||
import { OverlayTrigger, Label } from 'react-bootstrap';
|
import { OverlayTrigger } from 'react-bootstrap';
|
||||||
|
|
||||||
|
import Label from 'src/components/Label';
|
||||||
import ViewportControl from 'src/explore/components/controls/ViewportControl';
|
import ViewportControl from 'src/explore/components/controls/ViewportControl';
|
||||||
import TextControl from 'src/explore/components/controls/TextControl';
|
import TextControl from 'src/explore/components/controls/TextControl';
|
||||||
import ControlHeader from 'src/explore/components/ControlHeader';
|
import ControlHeader from 'src/explore/components/ControlHeader';
|
||||||
@ -33,13 +34,14 @@ const defaultProps = {
|
|||||||
bearing: 0,
|
bearing: 0,
|
||||||
pitch: 0,
|
pitch: 0,
|
||||||
},
|
},
|
||||||
|
name: 'foo',
|
||||||
};
|
};
|
||||||
|
|
||||||
describe('ViewportControl', () => {
|
describe('ViewportControl', () => {
|
||||||
let wrapper;
|
let wrapper;
|
||||||
let inst;
|
let inst;
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
wrapper = shallow(<ViewportControl {...defaultProps} />);
|
wrapper = mount(<ViewportControl {...defaultProps} />);
|
||||||
inst = wrapper.instance();
|
inst = wrapper.instance();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -50,13 +52,12 @@ describe('ViewportControl', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
it('renders a Popover with 5 TextControl', () => {
|
it('renders a Popover with 5 TextControl', () => {
|
||||||
const popOver = shallow(inst.renderPopover());
|
const popOver = mount(inst.renderPopover());
|
||||||
expect(popOver.find(TextControl)).toHaveLength(5);
|
expect(popOver.find(TextControl)).toHaveLength(5);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('renders a summary in the label', () => {
|
it('renders a summary in the label', () => {
|
||||||
expect(wrapper.find(Label).first().render().text()).toBe(
|
const label = wrapper.find(Label).first();
|
||||||
'6° 51\' 8.50" | 31° 13\' 21.56"',
|
expect(label.render().text()).toBe('6° 51\' 8.50" | 31° 13\' 21.56"');
|
||||||
);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -17,7 +17,7 @@
|
|||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { mount } from 'enzyme';
|
import { styledMount as mount } from 'spec/helpers/theming';
|
||||||
import Security from 'src/profile/components/Security';
|
import Security from 'src/profile/components/Security';
|
||||||
|
|
||||||
import { user, userNoPerms } from './fixtures';
|
import { user, userNoPerms } from './fixtures';
|
||||||
|
@ -19,7 +19,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { shallow } from 'enzyme';
|
import { shallow } from 'enzyme';
|
||||||
|
|
||||||
import { Label } from 'react-bootstrap';
|
import Label from 'src/components/Label';
|
||||||
import LimitControl from 'src/SqlLab/components/LimitControl';
|
import LimitControl from 'src/SqlLab/components/LimitControl';
|
||||||
import ControlHeader from 'src/explore/components/ControlHeader';
|
import ControlHeader from 'src/explore/components/ControlHeader';
|
||||||
|
|
||||||
|
@ -17,9 +17,9 @@
|
|||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Label } from 'react-bootstrap';
|
|
||||||
import { shallow } from 'enzyme';
|
import { shallow } from 'enzyme';
|
||||||
|
|
||||||
|
import Label from 'src/components/Label';
|
||||||
import QueryStateLabel from 'src/SqlLab/components/QueryStateLabel';
|
import QueryStateLabel from 'src/SqlLab/components/QueryStateLabel';
|
||||||
|
|
||||||
describe('SavedQuery', () => {
|
describe('SavedQuery', () => {
|
||||||
|
@ -19,7 +19,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import configureStore from 'redux-mock-store';
|
import configureStore from 'redux-mock-store';
|
||||||
import thunk from 'redux-thunk';
|
import thunk from 'redux-thunk';
|
||||||
import { shallow } from 'enzyme';
|
import { styledShallow as shallow } from 'spec/helpers/theming';
|
||||||
import SouthPaneContainer, { SouthPane } from 'src/SqlLab/components/SouthPane';
|
import SouthPaneContainer, { SouthPane } from 'src/SqlLab/components/SouthPane';
|
||||||
import ResultSet from 'src/SqlLab/components/ResultSet';
|
import ResultSet from 'src/SqlLab/components/ResultSet';
|
||||||
import { STATUS_OPTIONS } from 'src/SqlLab/constants';
|
import { STATUS_OPTIONS } from 'src/SqlLab/constants';
|
||||||
@ -70,6 +70,7 @@ describe('SouthPane', () => {
|
|||||||
actions: {},
|
actions: {},
|
||||||
activeSouthPaneTab: '',
|
activeSouthPaneTab: '',
|
||||||
height: 1,
|
height: 1,
|
||||||
|
displayLimit: 1,
|
||||||
databases: {},
|
databases: {},
|
||||||
offline: false,
|
offline: false,
|
||||||
};
|
};
|
||||||
@ -90,7 +91,7 @@ describe('SouthPane', () => {
|
|||||||
it('should render offline when the state is offline', () => {
|
it('should render offline when the state is offline', () => {
|
||||||
wrapper = getWrapper();
|
wrapper = getWrapper();
|
||||||
wrapper.setProps({ offline: true });
|
wrapper.setProps({ offline: true });
|
||||||
expect(wrapper.find('.m-r-3').render().text()).toBe(STATUS_OPTIONS.offline);
|
expect(wrapper.childAt(0).text()).toBe(STATUS_OPTIONS.offline);
|
||||||
});
|
});
|
||||||
it('should pass latest query down to ResultSet component', () => {
|
it('should pass latest query down to ResultSet component', () => {
|
||||||
wrapper = getWrapper();
|
wrapper = getWrapper();
|
||||||
|
@ -17,7 +17,7 @@
|
|||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { mount } from 'enzyme';
|
import { styledMount as mount } from 'spec/helpers/theming';
|
||||||
import sinon from 'sinon';
|
import sinon from 'sinon';
|
||||||
|
|
||||||
import Timer from 'src/components/Timer';
|
import Timer from 'src/components/Timer';
|
||||||
|
@ -20,7 +20,6 @@ import React from 'react';
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
Label,
|
|
||||||
FormGroup,
|
FormGroup,
|
||||||
FormControl,
|
FormControl,
|
||||||
Overlay,
|
Overlay,
|
||||||
@ -28,6 +27,7 @@ import {
|
|||||||
} from 'react-bootstrap';
|
} from 'react-bootstrap';
|
||||||
import { t } from '@superset-ui/translation';
|
import { t } from '@superset-ui/translation';
|
||||||
|
|
||||||
|
import Label from 'src/components/Label';
|
||||||
import ControlHeader from '../../explore/components/ControlHeader';
|
import ControlHeader from '../../explore/components/ControlHeader';
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
@ -131,7 +131,7 @@ export default class LimitControl extends React.PureComponent {
|
|||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Label style={{ cursor: 'pointer' }} onClick={this.handleToggle}>
|
<Label className="pointer" onClick={this.handleToggle}>
|
||||||
LIMIT {this.props.value || this.props.maxRow}
|
LIMIT {this.props.value || this.props.maxRow}
|
||||||
</Label>
|
</Label>
|
||||||
<Overlay
|
<Overlay
|
||||||
|
@ -18,7 +18,7 @@
|
|||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { Label } from 'react-bootstrap';
|
import Label from 'src/components/Label';
|
||||||
|
|
||||||
import { STATE_BSSTYLE_MAP } from '../constants';
|
import { STATE_BSSTYLE_MAP } from '../constants';
|
||||||
|
|
||||||
|
@ -20,7 +20,8 @@ import React from 'react';
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import { Table } from 'reactable-arc';
|
import { Table } from 'reactable-arc';
|
||||||
import { Label, ProgressBar, Well } from 'react-bootstrap';
|
import { ProgressBar, Well } from 'react-bootstrap';
|
||||||
|
import Label from 'src/components/Label';
|
||||||
import { t } from '@superset-ui/translation';
|
import { t } from '@superset-ui/translation';
|
||||||
|
|
||||||
import Link from '../../components/Link';
|
import Link from '../../components/Link';
|
||||||
@ -141,7 +142,7 @@ class QueryTable extends React.PureComponent {
|
|||||||
bsSize="large"
|
bsSize="large"
|
||||||
className="ResultsModal"
|
className="ResultsModal"
|
||||||
triggerNode={
|
triggerNode={
|
||||||
<Label bsStyle="info" style={{ cursor: 'pointer' }}>
|
<Label bsStyle="info" className="pointer">
|
||||||
{t('view results')}
|
{t('view results')}
|
||||||
</Label>
|
</Label>
|
||||||
}
|
}
|
||||||
|
@ -19,12 +19,13 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import shortid from 'shortid';
|
import shortid from 'shortid';
|
||||||
import { Alert, Label, Tab, Tabs } from 'react-bootstrap';
|
import { Alert, Tab, Tabs } from 'react-bootstrap';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { bindActionCreators } from 'redux';
|
import { bindActionCreators } from 'redux';
|
||||||
import { t } from '@superset-ui/translation';
|
import { t } from '@superset-ui/translation';
|
||||||
import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
|
import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
|
||||||
|
|
||||||
|
import Label from 'src/components/Label';
|
||||||
import * as Actions from '../actions/sqlLab';
|
import * as Actions from '../actions/sqlLab';
|
||||||
import QueryHistory from './QueryHistory';
|
import QueryHistory from './QueryHistory';
|
||||||
import ResultSet from './ResultSet';
|
import ResultSet from './ResultSet';
|
||||||
|
@ -24,7 +24,6 @@ import {
|
|||||||
InputGroup,
|
InputGroup,
|
||||||
Form,
|
Form,
|
||||||
FormControl,
|
FormControl,
|
||||||
Label,
|
|
||||||
OverlayTrigger,
|
OverlayTrigger,
|
||||||
Tooltip,
|
Tooltip,
|
||||||
} from 'react-bootstrap';
|
} from 'react-bootstrap';
|
||||||
@ -33,8 +32,12 @@ import { t } from '@superset-ui/translation';
|
|||||||
import debounce from 'lodash/debounce';
|
import debounce from 'lodash/debounce';
|
||||||
import throttle from 'lodash/throttle';
|
import throttle from 'lodash/throttle';
|
||||||
|
|
||||||
import Button from '../../components/Button';
|
import Label from 'src/components/Label';
|
||||||
import Checkbox from '../../components/Checkbox';
|
import Button from 'src/components/Button';
|
||||||
|
import Checkbox from 'src/components/Checkbox';
|
||||||
|
import Timer from 'src/components/Timer';
|
||||||
|
import Hotkeys from 'src/components/Hotkeys';
|
||||||
|
|
||||||
import LimitControl from './LimitControl';
|
import LimitControl from './LimitControl';
|
||||||
import TemplateParamsEditor from './TemplateParamsEditor';
|
import TemplateParamsEditor from './TemplateParamsEditor';
|
||||||
import SouthPane from './SouthPane';
|
import SouthPane from './SouthPane';
|
||||||
@ -42,8 +45,6 @@ import SaveQuery from './SaveQuery';
|
|||||||
import ScheduleQueryButton from './ScheduleQueryButton';
|
import ScheduleQueryButton from './ScheduleQueryButton';
|
||||||
import EstimateQueryCostButton from './EstimateQueryCostButton';
|
import EstimateQueryCostButton from './EstimateQueryCostButton';
|
||||||
import ShareSqlLabQuery from './ShareSqlLabQuery';
|
import ShareSqlLabQuery from './ShareSqlLabQuery';
|
||||||
import Timer from '../../components/Timer';
|
|
||||||
import Hotkeys from '../../components/Hotkeys';
|
|
||||||
import SqlEditorLeftBar from './SqlEditorLeftBar';
|
import SqlEditorLeftBar from './SqlEditorLeftBar';
|
||||||
import AceEditorWrapper from './AceEditorWrapper';
|
import AceEditorWrapper from './AceEditorWrapper';
|
||||||
import {
|
import {
|
||||||
|
@ -100,6 +100,8 @@ const hrefKnob = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const SupersetButton = () => (
|
export const SupersetButton = () => (
|
||||||
|
<div style={{ padding: '10px', backgroundColor: 'white' }}>
|
||||||
|
<h3>Interactive</h3>
|
||||||
<Button
|
<Button
|
||||||
disabled={boolean('Disabled', false)}
|
disabled={boolean('Disabled', false)}
|
||||||
bsStyle={select(
|
bsStyle={select(
|
||||||
@ -137,4 +139,26 @@ export const SupersetButton = () => (
|
|||||||
>
|
>
|
||||||
{text('Label', 'Button!')}
|
{text('Label', 'Button!')}
|
||||||
</Button>
|
</Button>
|
||||||
|
<h3>Gallery</h3>
|
||||||
|
{Object.values(bsSizeKnob.options)
|
||||||
|
.filter(a => a)
|
||||||
|
.map(size => (
|
||||||
|
<div>
|
||||||
|
<h4>{size}</h4>
|
||||||
|
{Object.values(bsStyleKnob.options)
|
||||||
|
.filter(o => o)
|
||||||
|
.map(style => (
|
||||||
|
<Button
|
||||||
|
disabled={boolean('Disabled', false)}
|
||||||
|
bsStyle={style}
|
||||||
|
bsSize={size}
|
||||||
|
onClick={action('clicked')}
|
||||||
|
style={{ marginRight: 5 }}
|
||||||
|
>
|
||||||
|
{style}
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -18,9 +18,10 @@
|
|||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { Label } from 'react-bootstrap';
|
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import { t } from '@superset-ui/translation';
|
import { t } from '@superset-ui/translation';
|
||||||
|
|
||||||
|
import Label from 'src/components/Label';
|
||||||
import TooltipWrapper from './TooltipWrapper';
|
import TooltipWrapper from './TooltipWrapper';
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
|
74
superset-frontend/src/components/Label/index.tsx
Normal file
74
superset-frontend/src/components/Label/index.tsx
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
/**
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
import React from 'react';
|
||||||
|
import { Label as BootstrapLabel } from 'react-bootstrap';
|
||||||
|
import styled from '@superset-ui/style';
|
||||||
|
|
||||||
|
export type OnClickHandler = React.MouseEventHandler<BootstrapLabel>;
|
||||||
|
|
||||||
|
export interface LabelProps {
|
||||||
|
key?: string;
|
||||||
|
className?: string;
|
||||||
|
tooltip?: string;
|
||||||
|
placement?: string;
|
||||||
|
onClick?: OnClickHandler;
|
||||||
|
bsStyle?: string;
|
||||||
|
style?: BootstrapLabel.LabelProps['style'];
|
||||||
|
children?: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const SupersetLabel = styled(BootstrapLabel)`
|
||||||
|
&.supersetLabel {
|
||||||
|
border-radius: ${({ theme }) => theme.borderRadius}px;
|
||||||
|
border: none;
|
||||||
|
color: ${({ theme }) => theme.colors.secondary.light5};
|
||||||
|
font-size: ${({ theme }) => theme.typography.sizes.s};
|
||||||
|
font-weight: ${({ theme }) => theme.typography.weights.bold};
|
||||||
|
min-width: ${({ theme }) => theme.gridUnit * 36}px;
|
||||||
|
min-height: ${({ theme }) => theme.gridUnit * 8}px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-left: ${({ theme }) => theme.gridUnit * 4}px;
|
||||||
|
&:first-of-type {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
padding: 0 ${({ theme }) => theme.gridUnit * 2}px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.primary {
|
||||||
|
background-color: ${({ theme }) => theme.colors.primary.base};
|
||||||
|
}
|
||||||
|
&.secondary {
|
||||||
|
color: ${({ theme }) => theme.colors.primary.base};
|
||||||
|
background-color: ${({ theme }) => theme.colors.primary.light4};
|
||||||
|
}
|
||||||
|
&.danger {
|
||||||
|
background-color: ${({ theme }) => theme.colors.error.base};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default function Label(props: LabelProps) {
|
||||||
|
const labelProps = {
|
||||||
|
...props,
|
||||||
|
placement: props.placement || 'top',
|
||||||
|
};
|
||||||
|
return <SupersetLabel {...labelProps}>{props.children}</SupersetLabel>;
|
||||||
|
}
|
65
superset-frontend/src/components/Label/label.stories.jsx
Normal file
65
superset-frontend/src/components/Label/label.stories.jsx
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
/**
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
import React from 'react';
|
||||||
|
import { action } from '@storybook/addon-actions';
|
||||||
|
import { withKnobs, select, text } from '@storybook/addon-knobs';
|
||||||
|
import Label from './index';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'Label',
|
||||||
|
component: Label,
|
||||||
|
decorators: [withKnobs],
|
||||||
|
};
|
||||||
|
|
||||||
|
const bsStyleKnob = {
|
||||||
|
label: 'Types',
|
||||||
|
options: {
|
||||||
|
danger: 'danger',
|
||||||
|
warning: 'warning',
|
||||||
|
success: 'success',
|
||||||
|
default: 'default',
|
||||||
|
},
|
||||||
|
defaultValue: 'default',
|
||||||
|
};
|
||||||
|
export const SupersetLabel = () => (
|
||||||
|
<div style={{ padding: '10px' }}>
|
||||||
|
<h2>Interactive</h2>
|
||||||
|
<Label
|
||||||
|
bsStyle={select(
|
||||||
|
bsStyleKnob.label,
|
||||||
|
bsStyleKnob.options,
|
||||||
|
bsStyleKnob.defaultValue,
|
||||||
|
bsStyleKnob.groupId,
|
||||||
|
)}
|
||||||
|
onClick={action('clicked')}
|
||||||
|
>
|
||||||
|
{text('Label', 'Label!')}
|
||||||
|
</Label>
|
||||||
|
<h2>Gallery</h2>
|
||||||
|
{Object.values(bsStyleKnob.options).map(opt => (
|
||||||
|
<Label
|
||||||
|
bsStyle={opt}
|
||||||
|
style={{ marginRight: '10px' }}
|
||||||
|
onClick={action('clicked')}
|
||||||
|
>
|
||||||
|
{`style: "${opt}"`}
|
||||||
|
</Label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
@ -21,10 +21,10 @@ import styled from '@superset-ui/style';
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import rison from 'rison';
|
import rison from 'rison';
|
||||||
import { AsyncSelect, CreatableSelect, Select } from 'src/components/Select';
|
import { AsyncSelect, CreatableSelect, Select } from 'src/components/Select';
|
||||||
import { Label } from 'react-bootstrap';
|
|
||||||
import { t } from '@superset-ui/translation';
|
import { t } from '@superset-ui/translation';
|
||||||
import { SupersetClient } from '@superset-ui/connection';
|
import { SupersetClient } from '@superset-ui/connection';
|
||||||
|
|
||||||
|
import Label from 'src/components/Label';
|
||||||
import FormLabel from 'src/components/FormLabel';
|
import FormLabel from 'src/components/FormLabel';
|
||||||
|
|
||||||
import SupersetAsyncSelect from './AsyncSelect';
|
import SupersetAsyncSelect from './AsyncSelect';
|
||||||
|
@ -18,8 +18,8 @@
|
|||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { Label } from 'react-bootstrap';
|
|
||||||
|
|
||||||
|
import Label from 'src/components/Label';
|
||||||
import { now, fDuration } from '../modules/dates';
|
import { now, fDuration } from '../modules/dates';
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
@ -27,14 +27,12 @@ const propTypes = {
|
|||||||
isRunning: PropTypes.bool.isRequired,
|
isRunning: PropTypes.bool.isRequired,
|
||||||
startTime: PropTypes.number,
|
startTime: PropTypes.number,
|
||||||
status: PropTypes.string,
|
status: PropTypes.string,
|
||||||
style: PropTypes.object,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
endTime: null,
|
endTime: null,
|
||||||
startTime: null,
|
startTime: null,
|
||||||
status: 'success',
|
status: 'success',
|
||||||
style: null,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default class Timer extends React.PureComponent {
|
export default class Timer extends React.PureComponent {
|
||||||
@ -78,11 +76,7 @@ export default class Timer extends React.PureComponent {
|
|||||||
let timerSpan = null;
|
let timerSpan = null;
|
||||||
if (this.props) {
|
if (this.props) {
|
||||||
timerSpan = (
|
timerSpan = (
|
||||||
<Label
|
<Label className="m-r-5" bsStyle={this.props.status}>
|
||||||
className="m-r-5"
|
|
||||||
style={this.props.style}
|
|
||||||
bsStyle={this.props.status}
|
|
||||||
>
|
|
||||||
{this.state.clockStr}
|
{this.state.clockStr}
|
||||||
</Label>
|
</Label>
|
||||||
);
|
);
|
||||||
|
@ -18,16 +18,18 @@
|
|||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { Alert, Badge, Col, Label, Tabs, Tab, Well } from 'react-bootstrap';
|
import { Alert, Badge, Col, Tabs, Tab, Well } from 'react-bootstrap';
|
||||||
import shortid from 'shortid';
|
import shortid from 'shortid';
|
||||||
import styled from '@superset-ui/style';
|
import styled from '@superset-ui/style';
|
||||||
import { t } from '@superset-ui/translation';
|
import { t } from '@superset-ui/translation';
|
||||||
import { SupersetClient } from '@superset-ui/connection';
|
import { SupersetClient } from '@superset-ui/connection';
|
||||||
import getClientErrorObject from '../utils/getClientErrorObject';
|
|
||||||
|
|
||||||
import Button from '../components/Button';
|
import Label from 'src/components/Label';
|
||||||
import Loading from '../components/Loading';
|
import Button from 'src/components/Button';
|
||||||
import TableSelector from '../components/TableSelector';
|
import Loading from 'src/components/Loading';
|
||||||
|
import TableSelector from 'src/components/TableSelector';
|
||||||
|
|
||||||
|
import getClientErrorObject from '../utils/getClientErrorObject';
|
||||||
import CheckboxControl from '../explore/components/controls/CheckboxControl';
|
import CheckboxControl from '../explore/components/controls/CheckboxControl';
|
||||||
import TextControl from '../explore/components/controls/TextControl';
|
import TextControl from '../explore/components/controls/TextControl';
|
||||||
import SelectControl from '../explore/components/controls/SelectControl';
|
import SelectControl from '../explore/components/controls/SelectControl';
|
||||||
@ -170,7 +172,7 @@ function ColumnCollectionTable({
|
|||||||
) : (
|
) : (
|
||||||
v
|
v
|
||||||
),
|
),
|
||||||
type: d => <Label style={{ fontSize: '75%' }}>{d}</Label>,
|
type: d => <Label bsStyle="s">{d}</Label>,
|
||||||
is_dttm: checkboxGenerator,
|
is_dttm: checkboxGenerator,
|
||||||
filterable: checkboxGenerator,
|
filterable: checkboxGenerator,
|
||||||
groupby: checkboxGenerator,
|
groupby: checkboxGenerator,
|
||||||
|
@ -18,10 +18,11 @@
|
|||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { Label, OverlayTrigger } from 'react-bootstrap';
|
import { OverlayTrigger } from 'react-bootstrap';
|
||||||
import { t } from '@superset-ui/translation';
|
import { t } from '@superset-ui/translation';
|
||||||
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
|
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
|
||||||
|
|
||||||
|
import Label from 'src/components/Label';
|
||||||
import AdhocFilterEditPopover from './AdhocFilterEditPopover';
|
import AdhocFilterEditPopover from './AdhocFilterEditPopover';
|
||||||
import AdhocFilter from '../AdhocFilter';
|
import AdhocFilter from '../AdhocFilter';
|
||||||
import columnType from '../propTypes/columnType';
|
import columnType from '../propTypes/columnType';
|
||||||
|
@ -18,8 +18,9 @@
|
|||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { Label, OverlayTrigger } from 'react-bootstrap';
|
import { OverlayTrigger } from 'react-bootstrap';
|
||||||
|
|
||||||
|
import Label from 'src/components/Label';
|
||||||
import AdhocMetricEditPopover from './AdhocMetricEditPopover';
|
import AdhocMetricEditPopover from './AdhocMetricEditPopover';
|
||||||
import AdhocMetric from '../AdhocMetric';
|
import AdhocMetric from '../AdhocMetric';
|
||||||
import columnType from '../propTypes/columnType';
|
import columnType from '../propTypes/columnType';
|
||||||
|
@ -18,10 +18,10 @@
|
|||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { Label } from 'react-bootstrap';
|
|
||||||
import { getNumberFormatter } from '@superset-ui/number-format';
|
import { getNumberFormatter } from '@superset-ui/number-format';
|
||||||
import { t } from '@superset-ui/translation';
|
import { t } from '@superset-ui/translation';
|
||||||
|
|
||||||
|
import Label from 'src/components/Label';
|
||||||
import TooltipWrapper from '../../components/TooltipWrapper';
|
import TooltipWrapper from '../../components/TooltipWrapper';
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
|
@ -22,7 +22,6 @@ import {
|
|||||||
Col,
|
Col,
|
||||||
Collapse,
|
Collapse,
|
||||||
DropdownButton,
|
DropdownButton,
|
||||||
Label,
|
|
||||||
MenuItem,
|
MenuItem,
|
||||||
OverlayTrigger,
|
OverlayTrigger,
|
||||||
Row,
|
Row,
|
||||||
@ -31,6 +30,8 @@ import {
|
|||||||
} from 'react-bootstrap';
|
} from 'react-bootstrap';
|
||||||
import { t } from '@superset-ui/translation';
|
import { t } from '@superset-ui/translation';
|
||||||
import { ColumnOption, MetricOption } from '@superset-ui/chart-controls';
|
import { ColumnOption, MetricOption } from '@superset-ui/chart-controls';
|
||||||
|
|
||||||
|
import Label from 'src/components/Label';
|
||||||
import ControlHeader from '../ControlHeader';
|
import ControlHeader from '../ControlHeader';
|
||||||
import DatasourceModal from '../../../datasource/DatasourceModal';
|
import DatasourceModal from '../../../datasource/DatasourceModal';
|
||||||
import ChangeDatasourceModal from '../../../datasource/ChangeDatasourceModal';
|
import ChangeDatasourceModal from '../../../datasource/ChangeDatasourceModal';
|
||||||
|
@ -24,7 +24,6 @@ import {
|
|||||||
FormControl,
|
FormControl,
|
||||||
FormGroup,
|
FormGroup,
|
||||||
InputGroup,
|
InputGroup,
|
||||||
Label,
|
|
||||||
MenuItem,
|
MenuItem,
|
||||||
OverlayTrigger,
|
OverlayTrigger,
|
||||||
Popover,
|
Popover,
|
||||||
@ -43,6 +42,7 @@ import {
|
|||||||
buildTimeRangeString,
|
buildTimeRangeString,
|
||||||
formatTimeRange,
|
formatTimeRange,
|
||||||
} from 'src/explore/dateFilterUtils';
|
} from 'src/explore/dateFilterUtils';
|
||||||
|
import Label from 'src/components/Label';
|
||||||
import './DateFilterControl.less';
|
import './DateFilterControl.less';
|
||||||
import ControlHeader from '../ControlHeader';
|
import ControlHeader from '../ControlHeader';
|
||||||
import PopoverSection from '../../../components/PopoverSection';
|
import PopoverSection from '../../../components/PopoverSection';
|
||||||
@ -391,7 +391,7 @@ class DateFilterControl extends React.Component {
|
|||||||
const timeRange = buildTimeRangeString(nextState.since, nextState.until);
|
const timeRange = buildTimeRangeString(nextState.since, nextState.until);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Styles theme={this.props.theme}>
|
<Styles theme={this.props.theme} key={timeFrame}>
|
||||||
<OverlayTrigger
|
<OverlayTrigger
|
||||||
key={timeFrame}
|
key={timeFrame}
|
||||||
placement="right"
|
placement="right"
|
||||||
@ -590,7 +590,7 @@ class DateFilterControl extends React.Component {
|
|||||||
overlay={this.renderPopover()}
|
overlay={this.renderPopover()}
|
||||||
onClick={this.handleClickTrigger}
|
onClick={this.handleClickTrigger}
|
||||||
>
|
>
|
||||||
<Label name="popover-trigger" style={{ cursor: 'pointer' }}>
|
<Label name="popover-trigger" className="pointer">
|
||||||
{formatTimeRange(timeRange, this.props.endpoints)}
|
{formatTimeRange(timeRange, this.props.endpoints)}
|
||||||
</Label>
|
</Label>
|
||||||
</OverlayTrigger>
|
</OverlayTrigger>
|
||||||
|
@ -18,8 +18,9 @@
|
|||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { Label, Panel } from 'react-bootstrap';
|
import { Panel } from 'react-bootstrap';
|
||||||
|
|
||||||
|
import Label from 'src/components/Label';
|
||||||
import TextControl from './TextControl';
|
import TextControl from './TextControl';
|
||||||
import MetricsControl from './MetricsControl';
|
import MetricsControl from './MetricsControl';
|
||||||
import ControlHeader from '../ControlHeader';
|
import ControlHeader from '../ControlHeader';
|
||||||
@ -103,7 +104,7 @@ export default class FixedOrMetricControl extends React.Component {
|
|||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<ControlHeader {...this.props} />
|
<ControlHeader {...this.props} />
|
||||||
<Label style={{ cursor: 'pointer' }} onClick={this.toggle}>
|
<Label className="pointer" onClick={this.toggle}>
|
||||||
{this.state.type === controlTypes.fixed && (
|
{this.state.type === controlTypes.fixed && (
|
||||||
<span>{this.state.fixedValue}</span>
|
<span>{this.state.fixedValue}</span>
|
||||||
)}
|
)}
|
||||||
|
@ -18,16 +18,10 @@
|
|||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import {
|
import { Row, Col, Button, OverlayTrigger, Popover } from 'react-bootstrap';
|
||||||
Row,
|
|
||||||
Col,
|
|
||||||
Button,
|
|
||||||
Label,
|
|
||||||
OverlayTrigger,
|
|
||||||
Popover,
|
|
||||||
} from 'react-bootstrap';
|
|
||||||
import { t } from '@superset-ui/translation';
|
import { t } from '@superset-ui/translation';
|
||||||
|
|
||||||
|
import Label from 'src/components/Label';
|
||||||
import ControlHeader from '../ControlHeader';
|
import ControlHeader from '../ControlHeader';
|
||||||
import SelectControl from './SelectControl';
|
import SelectControl from './SelectControl';
|
||||||
import PopoverSection from '../../../components/PopoverSection';
|
import PopoverSection from '../../../components/PopoverSection';
|
||||||
@ -235,9 +229,7 @@ export default class SpatialControl extends React.Component {
|
|||||||
placement="right"
|
placement="right"
|
||||||
overlay={this.renderPopover()}
|
overlay={this.renderPopover()}
|
||||||
>
|
>
|
||||||
<Label style={{ cursor: 'pointer' }}>
|
<Label className="pointer">{this.renderLabelContent()}</Label>
|
||||||
{this.renderLabelContent()}
|
|
||||||
</Label>
|
|
||||||
</OverlayTrigger>
|
</OverlayTrigger>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -18,9 +18,10 @@
|
|||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { Label, Popover, OverlayTrigger } from 'react-bootstrap';
|
import { Popover, OverlayTrigger } from 'react-bootstrap';
|
||||||
import { decimal2sexagesimal } from 'geolib';
|
import { decimal2sexagesimal } from 'geolib';
|
||||||
|
|
||||||
|
import Label from 'src/components/Label';
|
||||||
import FormLabel from 'src/components/FormLabel';
|
import FormLabel from 'src/components/FormLabel';
|
||||||
import TextControl from './TextControl';
|
import TextControl from './TextControl';
|
||||||
import ControlHeader from '../ControlHeader';
|
import ControlHeader from '../ControlHeader';
|
||||||
@ -104,7 +105,7 @@ export default class ViewportControl extends React.Component {
|
|||||||
placement="right"
|
placement="right"
|
||||||
overlay={this.renderPopover()}
|
overlay={this.renderPopover()}
|
||||||
>
|
>
|
||||||
<Label style={{ cursor: 'pointer' }}>{this.renderLabel()}</Label>
|
<Label className="pointer">{this.renderLabel()}</Label>
|
||||||
</OverlayTrigger>
|
</OverlayTrigger>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -17,8 +17,10 @@
|
|||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Badge, Label } from 'react-bootstrap';
|
import { Badge } from 'react-bootstrap';
|
||||||
import { t } from '@superset-ui/translation';
|
import { t } from '@superset-ui/translation';
|
||||||
|
|
||||||
|
import Label from 'src/components/Label';
|
||||||
import { UserWithPermissionsAndRoles } from '../../types/bootstrapTypes';
|
import { UserWithPermissionsAndRoles } from '../../types/bootstrapTypes';
|
||||||
|
|
||||||
interface SecurityProps {
|
interface SecurityProps {
|
||||||
|
Loading…
Reference in New Issue
Block a user