chore: Removes direct theme imports

superset-frontend/.eslintrc.js

@@ -181,7 +181,6 @@ module.exports = {
  ],
  'no-only-tests/no-only-tests': 'error',
  'max-classes-per-file': 0,
- 'theme-colors/no-literal-colors': 0,
  },
  },
  {
@@ -198,6 +197,7 @@ module.exports = {
  ],
  rules: {
  'theme-colors/no-literal-colors': 0,
+ 'no-restricted-imports': 0,
  },
  },
  ],

superset-frontend/src/SqlLab/components/App/index.jsx

@@ -20,7 +20,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from '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 ToastContainer from 'src/components/MessageToasts/ToastContainer';
 import {
@@ -98,13 +98,11 @@ class App extends React.PureComponent {
  return window.location.replace('/superset/sqllab/history/');
  }
  return (
- <ThemeProvider theme={supersetTheme}>
- <div className="App SqlLab">
- <QueryAutoRefresh />
- <TabbedSqlEditors />
- <ToastContainer />
- </div>
- </ThemeProvider>
+ <div className="App SqlLab">
+ <QueryAutoRefresh />
+ <TabbedSqlEditors />
+ <ToastContainer />
+ </div>
  );
  }
 }

superset-frontend/src/SqlLab/components/RunQueryActionButton/RunQueryActionButton.test.jsx

@@ -17,8 +17,8 @@
  * under the License.
  */
 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 Button from 'src/components/Button';
 
@@ -35,7 +35,10 @@ describe('RunQueryActionButton', () => {
  };
 
  beforeEach(() => {
- wrapper = shallow(<RunQueryActionButton {...defaultProps} />);
+ wrapper = mount(<RunQueryActionButton {...defaultProps} />, {
+ wrappingComponent: ThemeProvider,
+ wrappingComponentProps: { theme: supersetTheme },
+ });
  });
 
  it('is a valid react element', () => {

superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 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 Button, { ButtonProps } from 'src/components/Button';
@@ -93,6 +93,8 @@ const RunQueryActionButton = ({
  runQuery,
  stopQuery,
 }: Props) => {
+ const theme = useTheme();
+
  const shouldShowStopBtn =
  !!queryState && ['running', 'pending'].indexOf(queryState) > -1;
 
@@ -123,8 +125,8 @@ const RunQueryActionButton = ({
  <Icons.CaretDown
  iconColor={
  isDisabled
- ? supersetTheme.colors.grayscale.base
- : supersetTheme.colors.grayscale.light5
+ ? theme.colors.grayscale.base
+ : theme.colors.grayscale.light5
  }
  name="caret-down"
  />

superset-frontend/src/components/CertifiedBadge/index.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 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 { Tooltip } from 'src/components/Tooltip';
 
@@ -32,6 +32,8 @@ function CertifiedBadge({
  details,
  size = 'l',
 }: CertifiedBadgeProps) {
+ const theme = useTheme();
+
  return (
  <Tooltip
  id="certified-details-tooltip"
@@ -46,10 +48,7 @@ function CertifiedBadge({
  </>
  }
  >
- <Icons.Certified
- iconColor={supersetTheme.colors.primary.base}
- iconSize={size}
- />
+ <Icons.Certified iconColor={theme.colors.primary.base} iconSize={size} />
  </Tooltip>
  );
 }

superset-frontend/src/components/Icons/Icon.tsx

@@ -42,7 +42,7 @@ export const StyledIcon = styled(AntdIconComponent)<IconType>`
  : '24px'};
 `;
 
-interface IconProps extends IconType {
+export interface IconProps extends IconType {
  fileName: string;
 }
 

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/FilterSetUnit.tsx

@@ -24,7 +24,7 @@ import {
  FilterSet,
  HandlerFunction,
  styled,
- supersetTheme,
+ useTheme,
  t,
 } from '@superset-ui/core';
 import { CheckOutlined, EllipsisOutlined } from '@ant-design/icons';
@@ -76,6 +76,8 @@ const FilterSetUnit: FC<FilterSetUnitProps> = ({
  isApplied,
  onRebuild,
 }) => {
+ const theme = useTheme();
+
  const menu = (
  <Menu>
  <Menu.Item onClick={onEdit}>{t('Edit')}</Menu.Item>
@@ -105,9 +107,7 @@ const FilterSetUnit: FC<FilterSetUnitProps> = ({
  </Typography.Text>
  <IconsBlock>
  {isApplied && (
- <CheckOutlined
- style={{ color: supersetTheme.colors.success.base }}
- />
+ <CheckOutlined style={{ color: theme.colors.success.base }} />
  )}
  {onDelete && (
  <AntdDropdown

superset-frontend/src/explore/components/controls/DatasourceControl/DatasourceControl.test.jsx

@@ -19,7 +19,8 @@
 import React from 'react';
 import sinon from 'sinon';
 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 {
  DatasourceModal,
@@ -60,8 +61,10 @@ describe('DatasourceControl', () => {
  ...defaultProps,
  ...overrideProps,
  };
- return shallow(<DatasourceControl {...props} />, {
+ return mount(<DatasourceControl {...props} />, {
  context: { store },
+ wrappingComponent: ThemeProvider,
+ wrappingComponentProps: { theme: supersetTheme },
  });
  }
 
@@ -80,7 +83,7 @@ describe('DatasourceControl', () => {
  expect(wrapper.find('[data-test="datasource-menu"]')).toExist();
  let menuWrapper = shallow(
  <div>
- {wrapper.find('[data-test="datasource-menu"]').prop('overlay')}
+ {wrapper.find('[data-test="datasource-menu"]').first().prop('overlay')}
  </div>,
  );
  expect(menuWrapper.find(Menu.Item)).toHaveLength(3);
@@ -91,7 +94,7 @@ describe('DatasourceControl', () => {
  expect(wrapper.find('[data-test="datasource-menu"]')).toExist();
  menuWrapper = shallow(
  <div>
- {wrapper.find('[data-test="datasource-menu"]').prop('overlay')}
+ {wrapper.find('[data-test="datasource-menu"]').first().prop('overlay')}
  </div>,
  );
  expect(menuWrapper.find(Menu.Item)).toHaveLength(2);
@@ -113,7 +116,7 @@ describe('DatasourceControl', () => {
  expect(wrapper.find('[data-test="datasource-menu"]')).toExist();
  menuWrapper = shallow(
  <div>
- {wrapper.find('[data-test="datasource-menu"]').prop('overlay')}
+ {wrapper.find('[data-test="datasource-menu"]').first().prop('overlay')}
  </div>,
  );
  expect(menuWrapper.find(Menu.Item)).toHaveLength(2);

superset-frontend/src/explore/components/controls/DatasourceControl/DatasourceControl.test.tsx

@@ -33,6 +33,7 @@ const createProps = () => ({
  default: null,
  description: null,
  value: '25__table',
+ form_data: {},
  datasource: {
  id: 25,
  database: {

superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx

@@ -19,7 +19,7 @@
  */
 import React from 'react';
 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 { AntdDropdown } from 'src/components';
@@ -183,7 +183,7 @@ class DatasourceControl extends React.PureComponent {
 
  render() {
  const { showChangeDatasourceModal, showEditDatasourceModal } = this.state;
- const { datasource, onChange } = this.props;
+ const { datasource, onChange, theme } = this.props;
  const isMissingDatasource = datasource.id == null;
  let isMissingParams = false;
  if (isMissingDatasource) {
@@ -235,7 +235,7 @@ class DatasourceControl extends React.PureComponent {
  )}
  {healthCheckMessage && (
  <Tooltip title={healthCheckMessage}>
- <Icons.AlertSolid iconColor={supersetTheme.colors.warning.base} />
+ <Icons.AlertSolid iconColor={theme.colors.warning.base} />
  </Tooltip>
  )}
  {extra?.warning_markdown && (
@@ -325,4 +325,4 @@ class DatasourceControl extends React.PureComponent {
 DatasourceControl.propTypes = propTypes;
 DatasourceControl.defaultProps = defaultProps;
 
-export default DatasourceControl;
+export default withTheme(DatasourceControl);

superset-frontend/src/views/CRUD/alert/components/AlertStatusIcon.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t, supersetTheme, useTheme } from '@superset-ui/core';
+import { t, SupersetTheme, useTheme } from '@superset-ui/core';
 import React from 'react';
 import { Tooltip } from 'src/components/Tooltip';
 import Icons from 'src/components/Icons';
@@ -25,7 +25,7 @@ import { AlertState } from '../types';
 function getStatusColor(
  status: string,
  isReportEnabled: boolean,
- theme: typeof supersetTheme,
+ theme: SupersetTheme,
 ) {
  switch (status) {
  case AlertState.Working: