mirror of https://github.com/apache/superset.git
chore: Removes direct theme imports (#19368)
This commit is contained in:
parent
d304849b46
commit
816a2c3e1e
|
@ -181,7 +181,6 @@ module.exports = {
|
||||||
],
|
],
|
||||||
'no-only-tests/no-only-tests': 'error',
|
'no-only-tests/no-only-tests': 'error',
|
||||||
'max-classes-per-file': 0,
|
'max-classes-per-file': 0,
|
||||||
'theme-colors/no-literal-colors': 0,
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -198,6 +197,7 @@ module.exports = {
|
||||||
],
|
],
|
||||||
rules: {
|
rules: {
|
||||||
'theme-colors/no-literal-colors': 0,
|
'theme-colors/no-literal-colors': 0,
|
||||||
|
'no-restricted-imports': 0,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
|
@ -20,7 +20,7 @@ import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { bindActionCreators } from 'redux';
|
import { bindActionCreators } from 'redux';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { t, supersetTheme, ThemeProvider } from '@superset-ui/core';
|
import { t } from '@superset-ui/core';
|
||||||
import throttle from 'lodash/throttle';
|
import throttle from 'lodash/throttle';
|
||||||
import ToastContainer from 'src/components/MessageToasts/ToastContainer';
|
import ToastContainer from 'src/components/MessageToasts/ToastContainer';
|
||||||
import {
|
import {
|
||||||
|
@ -98,13 +98,11 @@ class App extends React.PureComponent {
|
||||||
return window.location.replace('/superset/sqllab/history/');
|
return window.location.replace('/superset/sqllab/history/');
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<ThemeProvider theme={supersetTheme}>
|
<div className="App SqlLab">
|
||||||
<div className="App SqlLab">
|
<QueryAutoRefresh />
|
||||||
<QueryAutoRefresh />
|
<TabbedSqlEditors />
|
||||||
<TabbedSqlEditors />
|
<ToastContainer />
|
||||||
<ToastContainer />
|
</div>
|
||||||
</div>
|
|
||||||
</ThemeProvider>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,8 +17,8 @@
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { shallow } from 'enzyme';
|
import { mount } from 'enzyme';
|
||||||
|
import { supersetTheme, ThemeProvider } from '@superset-ui/core';
|
||||||
import RunQueryActionButton from 'src/SqlLab/components/RunQueryActionButton';
|
import RunQueryActionButton from 'src/SqlLab/components/RunQueryActionButton';
|
||||||
import Button from 'src/components/Button';
|
import Button from 'src/components/Button';
|
||||||
|
|
||||||
|
@ -35,7 +35,10 @@ describe('RunQueryActionButton', () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
wrapper = shallow(<RunQueryActionButton {...defaultProps} />);
|
wrapper = mount(<RunQueryActionButton {...defaultProps} />, {
|
||||||
|
wrappingComponent: ThemeProvider,
|
||||||
|
wrappingComponentProps: { theme: supersetTheme },
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it('is a valid react element', () => {
|
it('is a valid react element', () => {
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { t, styled, supersetTheme } from '@superset-ui/core';
|
import { t, styled, useTheme } from '@superset-ui/core';
|
||||||
|
|
||||||
import { Menu } from 'src/components/Menu';
|
import { Menu } from 'src/components/Menu';
|
||||||
import Button, { ButtonProps } from 'src/components/Button';
|
import Button, { ButtonProps } from 'src/components/Button';
|
||||||
|
@ -93,6 +93,8 @@ const RunQueryActionButton = ({
|
||||||
runQuery,
|
runQuery,
|
||||||
stopQuery,
|
stopQuery,
|
||||||
}: Props) => {
|
}: Props) => {
|
||||||
|
const theme = useTheme();
|
||||||
|
|
||||||
const shouldShowStopBtn =
|
const shouldShowStopBtn =
|
||||||
!!queryState && ['running', 'pending'].indexOf(queryState) > -1;
|
!!queryState && ['running', 'pending'].indexOf(queryState) > -1;
|
||||||
|
|
||||||
|
@ -123,8 +125,8 @@ const RunQueryActionButton = ({
|
||||||
<Icons.CaretDown
|
<Icons.CaretDown
|
||||||
iconColor={
|
iconColor={
|
||||||
isDisabled
|
isDisabled
|
||||||
? supersetTheme.colors.grayscale.base
|
? theme.colors.grayscale.base
|
||||||
: supersetTheme.colors.grayscale.light5
|
: theme.colors.grayscale.light5
|
||||||
}
|
}
|
||||||
name="caret-down"
|
name="caret-down"
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { t, supersetTheme } from '@superset-ui/core';
|
import { t, useTheme } from '@superset-ui/core';
|
||||||
import Icons, { IconType } from 'src/components/Icons';
|
import Icons, { IconType } from 'src/components/Icons';
|
||||||
import { Tooltip } from 'src/components/Tooltip';
|
import { Tooltip } from 'src/components/Tooltip';
|
||||||
|
|
||||||
|
@ -32,6 +32,8 @@ function CertifiedBadge({
|
||||||
details,
|
details,
|
||||||
size = 'l',
|
size = 'l',
|
||||||
}: CertifiedBadgeProps) {
|
}: CertifiedBadgeProps) {
|
||||||
|
const theme = useTheme();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tooltip
|
<Tooltip
|
||||||
id="certified-details-tooltip"
|
id="certified-details-tooltip"
|
||||||
|
@ -46,10 +48,7 @@ function CertifiedBadge({
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Icons.Certified
|
<Icons.Certified iconColor={theme.colors.primary.base} iconSize={size} />
|
||||||
iconColor={supersetTheme.colors.primary.base}
|
|
||||||
iconSize={size}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -42,7 +42,7 @@ export const StyledIcon = styled(AntdIconComponent)<IconType>`
|
||||||
: '24px'};
|
: '24px'};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
interface IconProps extends IconType {
|
export interface IconProps extends IconType {
|
||||||
fileName: string;
|
fileName: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -24,7 +24,7 @@ import {
|
||||||
FilterSet,
|
FilterSet,
|
||||||
HandlerFunction,
|
HandlerFunction,
|
||||||
styled,
|
styled,
|
||||||
supersetTheme,
|
useTheme,
|
||||||
t,
|
t,
|
||||||
} from '@superset-ui/core';
|
} from '@superset-ui/core';
|
||||||
import { CheckOutlined, EllipsisOutlined } from '@ant-design/icons';
|
import { CheckOutlined, EllipsisOutlined } from '@ant-design/icons';
|
||||||
|
@ -76,6 +76,8 @@ const FilterSetUnit: FC<FilterSetUnitProps> = ({
|
||||||
isApplied,
|
isApplied,
|
||||||
onRebuild,
|
onRebuild,
|
||||||
}) => {
|
}) => {
|
||||||
|
const theme = useTheme();
|
||||||
|
|
||||||
const menu = (
|
const menu = (
|
||||||
<Menu>
|
<Menu>
|
||||||
<Menu.Item onClick={onEdit}>{t('Edit')}</Menu.Item>
|
<Menu.Item onClick={onEdit}>{t('Edit')}</Menu.Item>
|
||||||
|
@ -105,9 +107,7 @@ const FilterSetUnit: FC<FilterSetUnitProps> = ({
|
||||||
</Typography.Text>
|
</Typography.Text>
|
||||||
<IconsBlock>
|
<IconsBlock>
|
||||||
{isApplied && (
|
{isApplied && (
|
||||||
<CheckOutlined
|
<CheckOutlined style={{ color: theme.colors.success.base }} />
|
||||||
style={{ color: supersetTheme.colors.success.base }}
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
{onDelete && (
|
{onDelete && (
|
||||||
<AntdDropdown
|
<AntdDropdown
|
||||||
|
|
|
@ -19,7 +19,8 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import sinon from 'sinon';
|
import sinon from 'sinon';
|
||||||
import configureStore from 'redux-mock-store';
|
import configureStore from 'redux-mock-store';
|
||||||
import { shallow } from 'enzyme';
|
import { mount, shallow } from 'enzyme';
|
||||||
|
import { supersetTheme, ThemeProvider } from '@superset-ui/core';
|
||||||
import { Menu } from 'src/components/Menu';
|
import { Menu } from 'src/components/Menu';
|
||||||
import {
|
import {
|
||||||
DatasourceModal,
|
DatasourceModal,
|
||||||
|
@ -60,8 +61,10 @@ describe('DatasourceControl', () => {
|
||||||
...defaultProps,
|
...defaultProps,
|
||||||
...overrideProps,
|
...overrideProps,
|
||||||
};
|
};
|
||||||
return shallow(<DatasourceControl {...props} />, {
|
return mount(<DatasourceControl {...props} />, {
|
||||||
context: { store },
|
context: { store },
|
||||||
|
wrappingComponent: ThemeProvider,
|
||||||
|
wrappingComponentProps: { theme: supersetTheme },
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -80,7 +83,7 @@ describe('DatasourceControl', () => {
|
||||||
expect(wrapper.find('[data-test="datasource-menu"]')).toExist();
|
expect(wrapper.find('[data-test="datasource-menu"]')).toExist();
|
||||||
let menuWrapper = shallow(
|
let menuWrapper = shallow(
|
||||||
<div>
|
<div>
|
||||||
{wrapper.find('[data-test="datasource-menu"]').prop('overlay')}
|
{wrapper.find('[data-test="datasource-menu"]').first().prop('overlay')}
|
||||||
</div>,
|
</div>,
|
||||||
);
|
);
|
||||||
expect(menuWrapper.find(Menu.Item)).toHaveLength(3);
|
expect(menuWrapper.find(Menu.Item)).toHaveLength(3);
|
||||||
|
@ -91,7 +94,7 @@ describe('DatasourceControl', () => {
|
||||||
expect(wrapper.find('[data-test="datasource-menu"]')).toExist();
|
expect(wrapper.find('[data-test="datasource-menu"]')).toExist();
|
||||||
menuWrapper = shallow(
|
menuWrapper = shallow(
|
||||||
<div>
|
<div>
|
||||||
{wrapper.find('[data-test="datasource-menu"]').prop('overlay')}
|
{wrapper.find('[data-test="datasource-menu"]').first().prop('overlay')}
|
||||||
</div>,
|
</div>,
|
||||||
);
|
);
|
||||||
expect(menuWrapper.find(Menu.Item)).toHaveLength(2);
|
expect(menuWrapper.find(Menu.Item)).toHaveLength(2);
|
||||||
|
@ -113,7 +116,7 @@ describe('DatasourceControl', () => {
|
||||||
expect(wrapper.find('[data-test="datasource-menu"]')).toExist();
|
expect(wrapper.find('[data-test="datasource-menu"]')).toExist();
|
||||||
menuWrapper = shallow(
|
menuWrapper = shallow(
|
||||||
<div>
|
<div>
|
||||||
{wrapper.find('[data-test="datasource-menu"]').prop('overlay')}
|
{wrapper.find('[data-test="datasource-menu"]').first().prop('overlay')}
|
||||||
</div>,
|
</div>,
|
||||||
);
|
);
|
||||||
expect(menuWrapper.find(Menu.Item)).toHaveLength(2);
|
expect(menuWrapper.find(Menu.Item)).toHaveLength(2);
|
||||||
|
|
|
@ -33,6 +33,7 @@ const createProps = () => ({
|
||||||
default: null,
|
default: null,
|
||||||
description: null,
|
description: null,
|
||||||
value: '25__table',
|
value: '25__table',
|
||||||
|
form_data: {},
|
||||||
datasource: {
|
datasource: {
|
||||||
id: 25,
|
id: 25,
|
||||||
database: {
|
database: {
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { t, styled, supersetTheme } from '@superset-ui/core';
|
import { t, styled, withTheme } from '@superset-ui/core';
|
||||||
import { getUrlParam } from 'src/utils/urlUtils';
|
import { getUrlParam } from 'src/utils/urlUtils';
|
||||||
|
|
||||||
import { AntdDropdown } from 'src/components';
|
import { AntdDropdown } from 'src/components';
|
||||||
|
@ -183,7 +183,7 @@ class DatasourceControl extends React.PureComponent {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { showChangeDatasourceModal, showEditDatasourceModal } = this.state;
|
const { showChangeDatasourceModal, showEditDatasourceModal } = this.state;
|
||||||
const { datasource, onChange } = this.props;
|
const { datasource, onChange, theme } = this.props;
|
||||||
const isMissingDatasource = datasource.id == null;
|
const isMissingDatasource = datasource.id == null;
|
||||||
let isMissingParams = false;
|
let isMissingParams = false;
|
||||||
if (isMissingDatasource) {
|
if (isMissingDatasource) {
|
||||||
|
@ -235,7 +235,7 @@ class DatasourceControl extends React.PureComponent {
|
||||||
)}
|
)}
|
||||||
{healthCheckMessage && (
|
{healthCheckMessage && (
|
||||||
<Tooltip title={healthCheckMessage}>
|
<Tooltip title={healthCheckMessage}>
|
||||||
<Icons.AlertSolid iconColor={supersetTheme.colors.warning.base} />
|
<Icons.AlertSolid iconColor={theme.colors.warning.base} />
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
)}
|
)}
|
||||||
{extra?.warning_markdown && (
|
{extra?.warning_markdown && (
|
||||||
|
@ -325,4 +325,4 @@ class DatasourceControl extends React.PureComponent {
|
||||||
DatasourceControl.propTypes = propTypes;
|
DatasourceControl.propTypes = propTypes;
|
||||||
DatasourceControl.defaultProps = defaultProps;
|
DatasourceControl.defaultProps = defaultProps;
|
||||||
|
|
||||||
export default DatasourceControl;
|
export default withTheme(DatasourceControl);
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
* specific language governing permissions and limitations
|
* specific language governing permissions and limitations
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import { t, supersetTheme, useTheme } from '@superset-ui/core';
|
import { t, SupersetTheme, useTheme } from '@superset-ui/core';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Tooltip } from 'src/components/Tooltip';
|
import { Tooltip } from 'src/components/Tooltip';
|
||||||
import Icons from 'src/components/Icons';
|
import Icons from 'src/components/Icons';
|
||||||
|
@ -25,7 +25,7 @@ import { AlertState } from '../types';
|
||||||
function getStatusColor(
|
function getStatusColor(
|
||||||
status: string,
|
status: string,
|
||||||
isReportEnabled: boolean,
|
isReportEnabled: boolean,
|
||||||
theme: typeof supersetTheme,
|
theme: SupersetTheme,
|
||||||
) {
|
) {
|
||||||
switch (status) {
|
switch (status) {
|
||||||
case AlertState.Working:
|
case AlertState.Working:
|
||||||
|
|
Loading…
Reference in New Issue