mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -04:00
refactor: migrate ExploreCtasResultsButton component to typescript (#18142)
* Move component to FC & tsx * Refactoring * Refactoring * Refactoring * Refactoring * Refactoring * Refactoring * Refactoring * Fix type issue * Fix type issue * Fix ResultSet type issue * Refactoring RootState
This commit is contained in:
parent
5d2e726f76
commit
8dc2377680
@ -17,33 +17,37 @@
|
|||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import { useSelector } from 'react-redux';
|
||||||
import { bindActionCreators } from 'redux';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
import { t } from '@superset-ui/core';
|
import { t } from '@superset-ui/core';
|
||||||
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
|
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
|
||||||
import Button from 'src/components/Button';
|
import Button from 'src/components/Button';
|
||||||
import { exploreChart } from 'src/explore/exploreUtils';
|
import { exploreChart } from 'src/explore/exploreUtils';
|
||||||
import * as actions from 'src/SqlLab/actions/sqlLab';
|
import { RootState } from 'src/SqlLab/types';
|
||||||
|
|
||||||
const propTypes = {
|
interface ExploreCtasResultsButtonProps {
|
||||||
actions: PropTypes.object.isRequired,
|
actions: {
|
||||||
table: PropTypes.string.isRequired,
|
createCtasDatasource: Function;
|
||||||
schema: PropTypes.string,
|
addInfoToast: Function;
|
||||||
dbId: PropTypes.number.isRequired,
|
addDangerToast: Function;
|
||||||
errorMessage: PropTypes.string,
|
};
|
||||||
templateParams: PropTypes.string,
|
table: string;
|
||||||
};
|
schema?: string | null;
|
||||||
|
dbId: number;
|
||||||
|
templateParams?: string;
|
||||||
|
}
|
||||||
|
|
||||||
function ExploreCtasResultsButton({
|
const ExploreCtasResultsButton = ({
|
||||||
|
actions,
|
||||||
table,
|
table,
|
||||||
schema,
|
schema,
|
||||||
dbId,
|
dbId,
|
||||||
templateParams,
|
templateParams,
|
||||||
errorMessage,
|
}: ExploreCtasResultsButtonProps) => {
|
||||||
actions,
|
|
||||||
}) {
|
|
||||||
const { createCtasDatasource, addInfoToast, addDangerToast } = actions;
|
const { createCtasDatasource, addInfoToast, addDangerToast } = actions;
|
||||||
|
const errorMessage = useSelector(
|
||||||
|
(state: RootState) => state.sqlLab.errorMessage,
|
||||||
|
);
|
||||||
|
|
||||||
const buildVizOptions = {
|
const buildVizOptions = {
|
||||||
datasourceName: table,
|
datasourceName: table,
|
||||||
schema,
|
schema,
|
||||||
@ -53,7 +57,7 @@ function ExploreCtasResultsButton({
|
|||||||
|
|
||||||
const visualize = () => {
|
const visualize = () => {
|
||||||
createCtasDatasource(buildVizOptions)
|
createCtasDatasource(buildVizOptions)
|
||||||
.then(data => {
|
.then((data: { table_id: number }) => {
|
||||||
const formData = {
|
const formData = {
|
||||||
datasource: `${data.table_id}__table`,
|
datasource: `${data.table_id}__table`,
|
||||||
metrics: ['count'],
|
metrics: ['count'],
|
||||||
@ -86,19 +90,6 @@ function ExploreCtasResultsButton({
|
|||||||
{t('Explore')}
|
{t('Explore')}
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
ExploreCtasResultsButton.propTypes = propTypes;
|
|
||||||
|
|
||||||
const mapStateToProps = ({ sqlLab, common }) => ({
|
export default ExploreCtasResultsButton;
|
||||||
errorMessage: sqlLab.errorMessage,
|
|
||||||
timeout: common.conf?.SUPERSET_WEBSERVER_TIMEOUT,
|
|
||||||
});
|
|
||||||
|
|
||||||
const mapDispatchToProps = dispatch => ({
|
|
||||||
actions: bindActionCreators(actions, dispatch),
|
|
||||||
});
|
|
||||||
|
|
||||||
export default connect(
|
|
||||||
mapStateToProps,
|
|
||||||
mapDispatchToProps,
|
|
||||||
)(ExploreCtasResultsButton);
|
|
@ -726,10 +726,10 @@ export default class ResultSet extends React.PureComponent<
|
|||||||
</Button>
|
</Button>
|
||||||
<ExploreCtasResultsButton
|
<ExploreCtasResultsButton
|
||||||
// @ts-ignore Redux types are difficult to work with, ignoring for now
|
// @ts-ignore Redux types are difficult to work with, ignoring for now
|
||||||
|
actions={this.props.actions}
|
||||||
table={tempTable}
|
table={tempTable}
|
||||||
schema={tempSchema}
|
schema={tempSchema}
|
||||||
dbId={exploreDBId}
|
dbId={exploreDBId}
|
||||||
actions={this.props.actions}
|
|
||||||
/>
|
/>
|
||||||
</ButtonGroup>
|
</ButtonGroup>
|
||||||
</>
|
</>
|
||||||
|
@ -118,6 +118,7 @@ export type RootState = {
|
|||||||
tables: Record<string, any>[];
|
tables: Record<string, any>[];
|
||||||
queriesLastUpdate: number;
|
queriesLastUpdate: number;
|
||||||
user: UserWithPermissionsAndRoles;
|
user: UserWithPermissionsAndRoles;
|
||||||
|
errorMessage: string | null;
|
||||||
};
|
};
|
||||||
localStorageUsageInKilobytes: number;
|
localStorageUsageInKilobytes: number;
|
||||||
messageToasts: toastState[];
|
messageToasts: toastState[];
|
||||||
|
Loading…
Reference in New Issue
Block a user