chore: Removes direct theme imports (#19368)

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: