chore: type src/addSlice (#10127)

superset-frontend/spec/javascripts/addSlice/AddSliceContainer_spec.tsx

@@ -17,10 +17,13 @@
  * under the License.
  */
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
 import { Button } from 'react-bootstrap';
 import Select from 'src/components/Select';
-import AddSliceContainer from 'src/addSlice/AddSliceContainer';
+import AddSliceContainer, {
+  AddSliceContainerProps,
+  AddSliceContainerState,
+} from 'src/addSlice/AddSliceContainer';
 import VizTypeControl from 'src/explore/components/controls/VizTypeControl';
 
 const defaultProps = {
@@ -31,7 +34,11 @@ const defaultProps = {
 };
 
 describe('AddSliceContainer', () => {
-  let wrapper;
+  let wrapper: ShallowWrapper<
+    AddSliceContainerProps,
+    AddSliceContainerState,
+    AddSliceContainer
+  >;
 
   beforeEach(() => {
     wrapper = shallow(<AddSliceContainer {...defaultProps} />);

superset-frontend/src/addSlice/AddSliceContainer.tsx

@@ -17,26 +17,35 @@
  * under the License.
  */
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Button, Panel } from 'react-bootstrap';
 import Select from 'src/components/Select';
 import { t } from '@superset-ui/translation';
 
 import VizTypeControl from '../explore/components/controls/VizTypeControl';
 
-const propTypes = {
-  datasources: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string.isRequired,
-      value: PropTypes.string.isRequired,
-    }),
-  ).isRequired,
+interface Datasource {
+  label: string;
+  value: string;
+}
+
+export type AddSliceContainerProps = {
+  datasources: Datasource[];
+};
+
+export type AddSliceContainerState = {
+  datasourceId?: string;
+  datasourceType?: string;
+  datasourceValue?: string;
+  visType: string;
 };
 
 const styleSelectWidth = { width: 600 };
 
-export default class AddSliceContainer extends React.PureComponent {
-  constructor(props) {
+export default class AddSliceContainer extends React.PureComponent<
+  AddSliceContainerProps,
+  AddSliceContainerState
+> {
+  constructor(props: AddSliceContainerProps) {
     super(props);
     this.state = {
       visType: 'table',
@@ -61,15 +70,15 @@ export default class AddSliceContainer extends React.PureComponent {
     window.location.href = this.exploreUrl();
   }
 
-  changeDatasource(e) {
+  changeDatasource(option: { value: string }) {
     this.setState({
-      datasourceValue: e.value,
-      datasourceId: e.value.split('__')[0],
-      datasourceType: e.value.split('__')[1],
+      datasourceValue: option.value,
+      datasourceId: option.value.split('__')[0],
+      datasourceType: option.value.split('__')[1],
     });
   }
 
-  changeVisType(visType) {
+  changeVisType(visType: string) {
     this.setState({ visType });
   }
 
@@ -97,7 +106,13 @@ export default class AddSliceContainer extends React.PureComponent {
                     options={this.props.datasources}
                     placeholder={t('Choose a datasource')}
                     style={styleSelectWidth}
-                    value={this.state.datasourceValue}
+                    value={
+                      this.state.datasourceValue
+                        ? {
+                            value: this.state.datasourceValue,
+                          }
+                        : undefined
+                    }
                     width={600}
                   />
                 </div>
@@ -141,5 +156,3 @@ export default class AddSliceContainer extends React.PureComponent {
     );
   }
 }
-
-AddSliceContainer.propTypes = propTypes;

superset-frontend/src/addSlice/App.tsx

@@ -29,7 +29,7 @@ setupPlugins();
 
 const addSliceContainer = document.getElementById('js-add-slice-container');
 const bootstrapData = JSON.parse(
-  addSliceContainer.getAttribute('data-bootstrap'),
+  addSliceContainer?.getAttribute('data-bootstrap') || '{}',
 );
 
 const App = () => (

superset-frontend/webpack.config.js

@@ -177,7 +177,7 @@ const config = {
   entry: {
     theme: path.join(APP_DIR, '/src/theme.ts'),
     preamble: PREAMBLE,
-    addSlice: addPreamble('/src/addSlice/index.jsx'),
+    addSlice: addPreamble('/src/addSlice/index.tsx'),
     explore: addPreamble('/src/explore/index.jsx'),
     dashboard: addPreamble('/src/dashboard/index.jsx'),
     sqllab: addPreamble('/src/SqlLab/index.jsx'),