chore: remove supersetTheme with withTheme (#17069)

* remove supersettheme

* migrate Datasourceeditor to rtl

* lint fix

* remove file

* fix import

* fix test

* fix lint

* spread tests and remove unused code

* fix lint

superset-frontend/src/components/Datasource/DatasourceEditor.jsx

@@ -25,7 +25,7 @@ import Card from 'src/components/Card';
 import Alert from 'src/components/Alert';
 import Badge from 'src/components/Badge';
 import shortid from 'shortid';
-import { styled, SupersetClient, t, supersetTheme } from '@superset-ui/core';
+import { styled, SupersetClient, t, withTheme } from '@superset-ui/core';
 import { Select } from 'src/components';
 import { FormLabel } from 'src/components/Form';
 import Button from 'src/components/Button';
@@ -97,7 +97,7 @@ const StyledBadge = styled(Badge)`
 `;
 
 const EditLockContainer = styled.div`
-  font-size: ${supersetTheme.typography.sizes.s}px;
+  font-size: ${({ theme }) => theme.typography.sizes.s}px;
   display: flex;
   align-items: center;
   a {
@@ -828,7 +828,7 @@ class DatasourceEditor extends React.PureComponent {
     );
   }
 
-  renderSourceFieldset() {
+  renderSourceFieldset(theme) {
     const { datasource } = this.state;
     return (
       <div>
@@ -989,13 +989,9 @@ class DatasourceEditor extends React.PureComponent {
           <EditLockContainer>
             <span role="button" tabIndex={0} onClick={this.onChangeEditMode}>
               {this.state.isEditMode ? (
-                <Icons.LockUnlocked
-                  iconColor={supersetTheme.colors.grayscale.base}
-                />
+                <Icons.LockUnlocked iconColor={theme.colors.grayscale.base} />
               ) : (
-                <Icons.LockLocked
-                  iconColor={supersetTheme.colors.grayscale.base}
-                />
+                <Icons.LockLocked iconColor={theme.colors.grayscale.base} />
               )}
             </span>
             {!this.state.isEditMode && (
@@ -1166,6 +1162,8 @@ class DatasourceEditor extends React.PureComponent {
     const { datasource, activeTabKey } = this.state;
     const { metrics } = datasource;
     const sortedMetrics = metrics?.length ? this.sortMetrics(metrics) : [];
+    const { theme } = this.props;
+
     return (
       <DatasourceContainer>
         {this.renderErrors()}
@@ -1190,7 +1188,7 @@ class DatasourceEditor extends React.PureComponent {
           defaultActiveKey={activeTabKey}
         >
           <Tabs.TabPane key={0} tab={t('Source')}>
-            {this.renderSourceFieldset()}
+            {this.renderSourceFieldset(theme)}
           </Tabs.TabPane>
           <Tabs.TabPane
             tab={
@@ -1283,4 +1281,6 @@ class DatasourceEditor extends React.PureComponent {
 DatasourceEditor.defaultProps = defaultProps;
 DatasourceEditor.propTypes = propTypes;
 
-export default withToasts(DatasourceEditor);
+const DataSourceComponent = withTheme(DatasourceEditor);
+
+export default withToasts(DataSourceComponent);