mirror of
https://github.com/apache/superset.git
synced 2024-09-06 22:07:34 -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 { shallow } from 'enzyme';
|
||||
import { Label } from 'react-bootstrap';
|
||||
|
||||
import Label from 'src/components/Label';
|
||||
import CachedLabel from 'src/components/CachedLabel';
|
||||
|
||||
describe('CachedLabel', () => {
|
||||
|
@ -20,8 +20,9 @@
|
||||
import React from 'react';
|
||||
import sinon from 'sinon';
|
||||
import { shallow } from 'enzyme';
|
||||
import { Label, OverlayTrigger } from 'react-bootstrap';
|
||||
import { OverlayTrigger } from 'react-bootstrap';
|
||||
|
||||
import Label from 'src/components/Label';
|
||||
import AdhocFilter, {
|
||||
EXPRESSION_TYPES,
|
||||
CLAUSES,
|
||||
|
@ -20,8 +20,9 @@
|
||||
import React from 'react';
|
||||
import sinon from 'sinon';
|
||||
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 AdhocMetricOption from 'src/explore/components/AdhocMetricOption';
|
||||
import { AGGREGATES } from 'src/explore/constants';
|
||||
|
@ -19,9 +19,10 @@
|
||||
/* eslint-disable no-unused-expressions */
|
||||
import React from 'react';
|
||||
import sinon from 'sinon';
|
||||
import { mount } from 'enzyme';
|
||||
import { Button, Label } from 'react-bootstrap';
|
||||
import { styledMount as mount } from 'spec/helpers/theming';
|
||||
import { Button } from 'react-bootstrap';
|
||||
|
||||
import Label from 'src/components/Label';
|
||||
import DateFilterControl from 'src/explore/components/controls/DateFilterControl';
|
||||
import ControlHeader from 'src/explore/components/ControlHeader';
|
||||
|
||||
|
@ -18,8 +18,8 @@
|
||||
*/
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import { Label } from 'react-bootstrap';
|
||||
|
||||
import Label from 'src/components/Label';
|
||||
import TooltipWrapper from 'src/components/TooltipWrapper';
|
||||
import RowCountLabel from 'src/explore/components/RowCountLabel';
|
||||
|
||||
|
@ -18,9 +18,10 @@
|
||||
*/
|
||||
/* eslint-disable no-unused-expressions */
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import { OverlayTrigger, Label } from 'react-bootstrap';
|
||||
import { styledMount as mount } from 'spec/helpers/theming';
|
||||
import { OverlayTrigger } from 'react-bootstrap';
|
||||
|
||||
import Label from 'src/components/Label';
|
||||
import ViewportControl from 'src/explore/components/controls/ViewportControl';
|
||||
import TextControl from 'src/explore/components/controls/TextControl';
|
||||
import ControlHeader from 'src/explore/components/ControlHeader';
|
||||
@ -33,13 +34,14 @@ const defaultProps = {
|
||||
bearing: 0,
|
||||
pitch: 0,
|
||||
},
|
||||
name: 'foo',
|
||||
};
|
||||
|
||||
describe('ViewportControl', () => {
|
||||
let wrapper;
|
||||
let inst;
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(<ViewportControl {...defaultProps} />);
|
||||
wrapper = mount(<ViewportControl {...defaultProps} />);
|
||||
inst = wrapper.instance();
|
||||
});
|
||||
|
||||
@ -50,13 +52,12 @@ describe('ViewportControl', () => {
|
||||
});
|
||||
|
||||
it('renders a Popover with 5 TextControl', () => {
|
||||
const popOver = shallow(inst.renderPopover());
|
||||
const popOver = mount(inst.renderPopover());
|
||||
expect(popOver.find(TextControl)).toHaveLength(5);
|
||||
});
|
||||
|
||||
it('renders a summary in the label', () => {
|
||||
expect(wrapper.find(Label).first().render().text()).toBe(
|
||||
'6° 51\' 8.50" | 31° 13\' 21.56"',
|
||||
);
|
||||
const label = wrapper.find(Label).first();
|
||||
expect(label.render().text()).toBe('6° 51\' 8.50" | 31° 13\' 21.56"');
|
||||
});
|
||||
});
|
||||
|
@ -17,7 +17,7 @@
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { styledMount as mount } from 'spec/helpers/theming';
|
||||
import Security from 'src/profile/components/Security';
|
||||
|
||||
import { user, userNoPerms } from './fixtures';
|
||||
|
@ -19,7 +19,7 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import { Label } from 'react-bootstrap';
|
||||
import Label from 'src/components/Label';
|
||||
import LimitControl from 'src/SqlLab/components/LimitControl';
|
||||
import ControlHeader from 'src/explore/components/ControlHeader';
|
||||
|
||||
|
@ -17,9 +17,9 @@
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { Label } from 'react-bootstrap';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import Label from 'src/components/Label';
|
||||
import QueryStateLabel from 'src/SqlLab/components/QueryStateLabel';
|
||||
|
||||
describe('SavedQuery', () => {
|
||||
|
@ -19,7 +19,7 @@
|
||||
import React from 'react';
|
||||
import configureStore from 'redux-mock-store';
|
||||
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 ResultSet from 'src/SqlLab/components/ResultSet';
|
||||
import { STATUS_OPTIONS } from 'src/SqlLab/constants';
|
||||
@ -70,6 +70,7 @@ describe('SouthPane', () => {
|
||||
actions: {},
|
||||
activeSouthPaneTab: '',
|
||||
height: 1,
|
||||
displayLimit: 1,
|
||||
databases: {},
|
||||
offline: false,
|
||||
};
|
||||
@ -90,7 +91,7 @@ describe('SouthPane', () => {
|
||||
it('should render offline when the state is offline', () => {
|
||||
wrapper = getWrapper();
|
||||
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', () => {
|
||||
wrapper = getWrapper();
|
||||
|
@ -17,7 +17,7 @@
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { styledMount as mount } from 'spec/helpers/theming';
|
||||
import sinon from 'sinon';
|
||||
|
||||
import Timer from 'src/components/Timer';
|
||||
|
@ -20,7 +20,6 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
Button,
|
||||
Label,
|
||||
FormGroup,
|
||||
FormControl,
|
||||
Overlay,
|
||||
@ -28,6 +27,7 @@ import {
|
||||
} from 'react-bootstrap';
|
||||
import { t } from '@superset-ui/translation';
|
||||
|
||||
import Label from 'src/components/Label';
|
||||
import ControlHeader from '../../explore/components/ControlHeader';
|
||||
|
||||
const propTypes = {
|
||||
@ -131,7 +131,7 @@ export default class LimitControl extends React.PureComponent {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Label style={{ cursor: 'pointer' }} onClick={this.handleToggle}>
|
||||
<Label className="pointer" onClick={this.handleToggle}>
|
||||
LIMIT {this.props.value || this.props.maxRow}
|
||||
</Label>
|
||||
<Overlay
|
||||
|
@ -18,7 +18,7 @@
|
||||
*/
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Label } from 'react-bootstrap';
|
||||
import Label from 'src/components/Label';
|
||||
|
||||
import { STATE_BSSTYLE_MAP } from '../constants';
|
||||
|
||||
|
@ -20,7 +20,8 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import moment from 'moment';
|
||||
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 Link from '../../components/Link';
|
||||
@ -141,7 +142,7 @@ class QueryTable extends React.PureComponent {
|
||||
bsSize="large"
|
||||
className="ResultsModal"
|
||||
triggerNode={
|
||||
<Label bsStyle="info" style={{ cursor: 'pointer' }}>
|
||||
<Label bsStyle="info" className="pointer">
|
||||
{t('view results')}
|
||||
</Label>
|
||||
}
|
||||
|
@ -19,12 +19,13 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
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 { bindActionCreators } from 'redux';
|
||||
import { t } from '@superset-ui/translation';
|
||||
import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
|
||||
|
||||
import Label from 'src/components/Label';
|
||||
import * as Actions from '../actions/sqlLab';
|
||||
import QueryHistory from './QueryHistory';
|
||||
import ResultSet from './ResultSet';
|
||||
|
@ -24,7 +24,6 @@ import {
|
||||
InputGroup,
|
||||
Form,
|
||||
FormControl,
|
||||
Label,
|
||||
OverlayTrigger,
|
||||
Tooltip,
|
||||
} from 'react-bootstrap';
|
||||
@ -33,8 +32,12 @@ import { t } from '@superset-ui/translation';
|
||||
import debounce from 'lodash/debounce';
|
||||
import throttle from 'lodash/throttle';
|
||||
|
||||
import Button from '../../components/Button';
|
||||
import Checkbox from '../../components/Checkbox';
|
||||
import Label from 'src/components/Label';
|
||||
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 TemplateParamsEditor from './TemplateParamsEditor';
|
||||
import SouthPane from './SouthPane';
|
||||
@ -42,8 +45,6 @@ import SaveQuery from './SaveQuery';
|
||||
import ScheduleQueryButton from './ScheduleQueryButton';
|
||||
import EstimateQueryCostButton from './EstimateQueryCostButton';
|
||||
import ShareSqlLabQuery from './ShareSqlLabQuery';
|
||||
import Timer from '../../components/Timer';
|
||||
import Hotkeys from '../../components/Hotkeys';
|
||||
import SqlEditorLeftBar from './SqlEditorLeftBar';
|
||||
import AceEditorWrapper from './AceEditorWrapper';
|
||||
import {
|
||||
|
@ -100,41 +100,65 @@ const hrefKnob = {
|
||||
};
|
||||
|
||||
export const SupersetButton = () => (
|
||||
<Button
|
||||
disabled={boolean('Disabled', false)}
|
||||
bsStyle={select(
|
||||
bsStyleKnob.label,
|
||||
bsStyleKnob.options,
|
||||
bsStyleKnob.defaultValue,
|
||||
bsStyleKnob.groupId,
|
||||
)}
|
||||
bsSize={select(
|
||||
bsSizeKnob.label,
|
||||
bsSizeKnob.options,
|
||||
bsSizeKnob.defaultValue,
|
||||
bsSizeKnob.groupId,
|
||||
)}
|
||||
onClick={action('clicked')}
|
||||
type={select(
|
||||
typeKnob.label,
|
||||
typeKnob.options,
|
||||
typeKnob.defaultValue,
|
||||
typeKnob.groupId,
|
||||
)}
|
||||
target={select(
|
||||
targetKnob.label,
|
||||
targetKnob.options,
|
||||
targetKnob.defaultValue,
|
||||
targetKnob.groupId,
|
||||
)}
|
||||
href={select(
|
||||
hrefKnob.label,
|
||||
hrefKnob.options,
|
||||
hrefKnob.defaultValue,
|
||||
hrefKnob.groupId,
|
||||
)}
|
||||
tooltip={boolean('Tooltip', false) === true ? 'This is a tooltip!' : null}
|
||||
>
|
||||
{text('Label', 'Button!')}
|
||||
</Button>
|
||||
<div style={{ padding: '10px', backgroundColor: 'white' }}>
|
||||
<h3>Interactive</h3>
|
||||
<Button
|
||||
disabled={boolean('Disabled', false)}
|
||||
bsStyle={select(
|
||||
bsStyleKnob.label,
|
||||
bsStyleKnob.options,
|
||||
bsStyleKnob.defaultValue,
|
||||
bsStyleKnob.groupId,
|
||||
)}
|
||||
bsSize={select(
|
||||
bsSizeKnob.label,
|
||||
bsSizeKnob.options,
|
||||
bsSizeKnob.defaultValue,
|
||||
bsSizeKnob.groupId,
|
||||
)}
|
||||
onClick={action('clicked')}
|
||||
type={select(
|
||||
typeKnob.label,
|
||||
typeKnob.options,
|
||||
typeKnob.defaultValue,
|
||||
typeKnob.groupId,
|
||||
)}
|
||||
target={select(
|
||||
targetKnob.label,
|
||||
targetKnob.options,
|
||||
targetKnob.defaultValue,
|
||||
targetKnob.groupId,
|
||||
)}
|
||||
href={select(
|
||||
hrefKnob.label,
|
||||
hrefKnob.options,
|
||||
hrefKnob.defaultValue,
|
||||
hrefKnob.groupId,
|
||||
)}
|
||||
tooltip={boolean('Tooltip', false) === true ? 'This is a tooltip!' : null}
|
||||
>
|
||||
{text('Label', '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 PropTypes from 'prop-types';
|
||||
import { Label } from 'react-bootstrap';
|
||||
import moment from 'moment';
|
||||
import { t } from '@superset-ui/translation';
|
||||
|
||||
import Label from 'src/components/Label';
|
||||
import TooltipWrapper from './TooltipWrapper';
|
||||
|
||||
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 rison from 'rison';
|
||||
import { AsyncSelect, CreatableSelect, Select } from 'src/components/Select';
|
||||
import { Label } from 'react-bootstrap';
|
||||
import { t } from '@superset-ui/translation';
|
||||
import { SupersetClient } from '@superset-ui/connection';
|
||||
|
||||
import Label from 'src/components/Label';
|
||||
import FormLabel from 'src/components/FormLabel';
|
||||
|
||||
import SupersetAsyncSelect from './AsyncSelect';
|
||||
|
@ -18,8 +18,8 @@
|
||||
*/
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Label } from 'react-bootstrap';
|
||||
|
||||
import Label from 'src/components/Label';
|
||||
import { now, fDuration } from '../modules/dates';
|
||||
|
||||
const propTypes = {
|
||||
@ -27,14 +27,12 @@ const propTypes = {
|
||||
isRunning: PropTypes.bool.isRequired,
|
||||
startTime: PropTypes.number,
|
||||
status: PropTypes.string,
|
||||
style: PropTypes.object,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
endTime: null,
|
||||
startTime: null,
|
||||
status: 'success',
|
||||
style: null,
|
||||
};
|
||||
|
||||
export default class Timer extends React.PureComponent {
|
||||
@ -78,11 +76,7 @@ export default class Timer extends React.PureComponent {
|
||||
let timerSpan = null;
|
||||
if (this.props) {
|
||||
timerSpan = (
|
||||
<Label
|
||||
className="m-r-5"
|
||||
style={this.props.style}
|
||||
bsStyle={this.props.status}
|
||||
>
|
||||
<Label className="m-r-5" bsStyle={this.props.status}>
|
||||
{this.state.clockStr}
|
||||
</Label>
|
||||
);
|
||||
|
@ -18,16 +18,18 @@
|
||||
*/
|
||||
import React from 'react';
|
||||
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 styled from '@superset-ui/style';
|
||||
import { t } from '@superset-ui/translation';
|
||||
import { SupersetClient } from '@superset-ui/connection';
|
||||
import getClientErrorObject from '../utils/getClientErrorObject';
|
||||
|
||||
import Button from '../components/Button';
|
||||
import Loading from '../components/Loading';
|
||||
import TableSelector from '../components/TableSelector';
|
||||
import Label from 'src/components/Label';
|
||||
import Button from 'src/components/Button';
|
||||
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 TextControl from '../explore/components/controls/TextControl';
|
||||
import SelectControl from '../explore/components/controls/SelectControl';
|
||||
@ -170,7 +172,7 @@ function ColumnCollectionTable({
|
||||
) : (
|
||||
v
|
||||
),
|
||||
type: d => <Label style={{ fontSize: '75%' }}>{d}</Label>,
|
||||
type: d => <Label bsStyle="s">{d}</Label>,
|
||||
is_dttm: checkboxGenerator,
|
||||
filterable: checkboxGenerator,
|
||||
groupby: checkboxGenerator,
|
||||
|
@ -18,10 +18,11 @@
|
||||
*/
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Label, OverlayTrigger } from 'react-bootstrap';
|
||||
import { OverlayTrigger } from 'react-bootstrap';
|
||||
import { t } from '@superset-ui/translation';
|
||||
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
|
||||
|
||||
import Label from 'src/components/Label';
|
||||
import AdhocFilterEditPopover from './AdhocFilterEditPopover';
|
||||
import AdhocFilter from '../AdhocFilter';
|
||||
import columnType from '../propTypes/columnType';
|
||||
|
@ -18,8 +18,9 @@
|
||||
*/
|
||||
import React from 'react';
|
||||
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 AdhocMetric from '../AdhocMetric';
|
||||
import columnType from '../propTypes/columnType';
|
||||
|
@ -18,10 +18,10 @@
|
||||
*/
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Label } from 'react-bootstrap';
|
||||
import { getNumberFormatter } from '@superset-ui/number-format';
|
||||
import { t } from '@superset-ui/translation';
|
||||
|
||||
import Label from 'src/components/Label';
|
||||
import TooltipWrapper from '../../components/TooltipWrapper';
|
||||
|
||||
const propTypes = {
|
||||
|
@ -22,7 +22,6 @@ import {
|
||||
Col,
|
||||
Collapse,
|
||||
DropdownButton,
|
||||
Label,
|
||||
MenuItem,
|
||||
OverlayTrigger,
|
||||
Row,
|
||||
@ -31,6 +30,8 @@ import {
|
||||
} from 'react-bootstrap';
|
||||
import { t } from '@superset-ui/translation';
|
||||
import { ColumnOption, MetricOption } from '@superset-ui/chart-controls';
|
||||
|
||||
import Label from 'src/components/Label';
|
||||
import ControlHeader from '../ControlHeader';
|
||||
import DatasourceModal from '../../../datasource/DatasourceModal';
|
||||
import ChangeDatasourceModal from '../../../datasource/ChangeDatasourceModal';
|
||||
|
@ -24,7 +24,6 @@ import {
|
||||
FormControl,
|
||||
FormGroup,
|
||||
InputGroup,
|
||||
Label,
|
||||
MenuItem,
|
||||
OverlayTrigger,
|
||||
Popover,
|
||||
@ -43,6 +42,7 @@ import {
|
||||
buildTimeRangeString,
|
||||
formatTimeRange,
|
||||
} from 'src/explore/dateFilterUtils';
|
||||
import Label from 'src/components/Label';
|
||||
import './DateFilterControl.less';
|
||||
import ControlHeader from '../ControlHeader';
|
||||
import PopoverSection from '../../../components/PopoverSection';
|
||||
@ -391,7 +391,7 @@ class DateFilterControl extends React.Component {
|
||||
const timeRange = buildTimeRangeString(nextState.since, nextState.until);
|
||||
|
||||
return (
|
||||
<Styles theme={this.props.theme}>
|
||||
<Styles theme={this.props.theme} key={timeFrame}>
|
||||
<OverlayTrigger
|
||||
key={timeFrame}
|
||||
placement="right"
|
||||
@ -590,7 +590,7 @@ class DateFilterControl extends React.Component {
|
||||
overlay={this.renderPopover()}
|
||||
onClick={this.handleClickTrigger}
|
||||
>
|
||||
<Label name="popover-trigger" style={{ cursor: 'pointer' }}>
|
||||
<Label name="popover-trigger" className="pointer">
|
||||
{formatTimeRange(timeRange, this.props.endpoints)}
|
||||
</Label>
|
||||
</OverlayTrigger>
|
||||
|
@ -18,8 +18,9 @@
|
||||
*/
|
||||
import React from 'react';
|
||||
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 MetricsControl from './MetricsControl';
|
||||
import ControlHeader from '../ControlHeader';
|
||||
@ -103,7 +104,7 @@ export default class FixedOrMetricControl extends React.Component {
|
||||
return (
|
||||
<div>
|
||||
<ControlHeader {...this.props} />
|
||||
<Label style={{ cursor: 'pointer' }} onClick={this.toggle}>
|
||||
<Label className="pointer" onClick={this.toggle}>
|
||||
{this.state.type === controlTypes.fixed && (
|
||||
<span>{this.state.fixedValue}</span>
|
||||
)}
|
||||
|
@ -18,16 +18,10 @@
|
||||
*/
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
Row,
|
||||
Col,
|
||||
Button,
|
||||
Label,
|
||||
OverlayTrigger,
|
||||
Popover,
|
||||
} from 'react-bootstrap';
|
||||
import { Row, Col, Button, OverlayTrigger, Popover } from 'react-bootstrap';
|
||||
import { t } from '@superset-ui/translation';
|
||||
|
||||
import Label from 'src/components/Label';
|
||||
import ControlHeader from '../ControlHeader';
|
||||
import SelectControl from './SelectControl';
|
||||
import PopoverSection from '../../../components/PopoverSection';
|
||||
@ -235,9 +229,7 @@ export default class SpatialControl extends React.Component {
|
||||
placement="right"
|
||||
overlay={this.renderPopover()}
|
||||
>
|
||||
<Label style={{ cursor: 'pointer' }}>
|
||||
{this.renderLabelContent()}
|
||||
</Label>
|
||||
<Label className="pointer">{this.renderLabelContent()}</Label>
|
||||
</OverlayTrigger>
|
||||
</div>
|
||||
);
|
||||
|
@ -18,9 +18,10 @@
|
||||
*/
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Label, Popover, OverlayTrigger } from 'react-bootstrap';
|
||||
import { Popover, OverlayTrigger } from 'react-bootstrap';
|
||||
import { decimal2sexagesimal } from 'geolib';
|
||||
|
||||
import Label from 'src/components/Label';
|
||||
import FormLabel from 'src/components/FormLabel';
|
||||
import TextControl from './TextControl';
|
||||
import ControlHeader from '../ControlHeader';
|
||||
@ -104,7 +105,7 @@ export default class ViewportControl extends React.Component {
|
||||
placement="right"
|
||||
overlay={this.renderPopover()}
|
||||
>
|
||||
<Label style={{ cursor: 'pointer' }}>{this.renderLabel()}</Label>
|
||||
<Label className="pointer">{this.renderLabel()}</Label>
|
||||
</OverlayTrigger>
|
||||
</div>
|
||||
);
|
||||
|
@ -17,8 +17,10 @@
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { Badge, Label } from 'react-bootstrap';
|
||||
import { Badge } from 'react-bootstrap';
|
||||
import { t } from '@superset-ui/translation';
|
||||
|
||||
import Label from 'src/components/Label';
|
||||
import { UserWithPermissionsAndRoles } from '../../types/bootstrapTypes';
|
||||
|
||||
interface SecurityProps {
|
||||
|
Loading…
Reference in New Issue
Block a user