mirror of
https://github.com/apache/superset.git
synced 2024-09-16 10:39:55 -04:00
chore: migrate EstimateQueryCostButton component from jsx to tsx (#17603)
* migrate EstimateQueryCostButton component from jsx to tsx * re-format spaces using prettier * Update superset-frontend/src/SqlLab/components/EstimateQueryCostButton/index.tsx Co-authored-by: Erik Ritter <erik.ritter@airbnb.com> * remove extra onClick and make disabled prop optional * restore & rename event handler onClick to onClickHandler Co-authored-by: Erik Ritter <erik.ritter@airbnb.com>
This commit is contained in:
parent
1cd07caa83
commit
c6ba9bf9db
@ -17,7 +17,6 @@
|
||||
* under the License.
|
||||
*/
|
||||
import React, { useMemo } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Alert from 'src/components/Alert';
|
||||
import { t } from '@superset-ui/core';
|
||||
import TableView from 'src/components/TableView';
|
||||
@ -26,24 +25,28 @@ import Loading from 'src/components/Loading';
|
||||
import ModalTrigger from 'src/components/ModalTrigger';
|
||||
import { EmptyWrapperType } from 'src/components/TableView/TableView';
|
||||
|
||||
const propTypes = {
|
||||
dbId: PropTypes.number.isRequired,
|
||||
schema: PropTypes.string.isRequired,
|
||||
sql: PropTypes.string.isRequired,
|
||||
getEstimate: PropTypes.func.isRequired,
|
||||
queryCostEstimate: PropTypes.Object,
|
||||
selectedText: PropTypes.string,
|
||||
tooltip: PropTypes.string,
|
||||
disabled: PropTypes.bool,
|
||||
};
|
||||
const defaultProps = {
|
||||
queryCostEstimate: [],
|
||||
tooltip: '',
|
||||
disabled: false,
|
||||
};
|
||||
interface EstimateQueryCostButtonProps {
|
||||
dbId: number;
|
||||
schema: string;
|
||||
sql: string;
|
||||
getEstimate: Function;
|
||||
queryCostEstimate: Record<string, any>;
|
||||
selectedText?: string;
|
||||
tooltip?: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const EstimateQueryCostButton = props => {
|
||||
const { cost } = props.queryCostEstimate;
|
||||
const EstimateQueryCostButton = ({
|
||||
dbId,
|
||||
schema,
|
||||
sql,
|
||||
getEstimate,
|
||||
queryCostEstimate = {},
|
||||
selectedText,
|
||||
tooltip = '',
|
||||
disabled = false,
|
||||
}: EstimateQueryCostButtonProps) => {
|
||||
const { cost } = queryCostEstimate;
|
||||
const tableData = useMemo(() => (Array.isArray(cost) ? cost : []), [cost]);
|
||||
const columns = useMemo(
|
||||
() =>
|
||||
@ -53,21 +56,23 @@ const EstimateQueryCostButton = props => {
|
||||
[cost],
|
||||
);
|
||||
|
||||
const onClick = () => {
|
||||
props.getEstimate();
|
||||
// A call back method to pass an event handler function as a prop to the Button element.
|
||||
// Refer: https://reactjs.org/docs/handling-events.html
|
||||
const onClickHandler = () => {
|
||||
getEstimate();
|
||||
};
|
||||
|
||||
const renderModalBody = () => {
|
||||
if (props.queryCostEstimate.error !== null) {
|
||||
if (queryCostEstimate.error !== null) {
|
||||
return (
|
||||
<Alert
|
||||
key="query-estimate-error"
|
||||
type="error"
|
||||
message={props.queryCostEstimate.error}
|
||||
message={queryCostEstimate.error}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (props.queryCostEstimate.completed) {
|
||||
if (queryCostEstimate.completed) {
|
||||
return (
|
||||
<TableView
|
||||
columns={columns}
|
||||
@ -81,7 +86,6 @@ const EstimateQueryCostButton = props => {
|
||||
return <Loading position="normal" />;
|
||||
};
|
||||
|
||||
const { disabled, selectedText, tooltip } = props;
|
||||
const btnText = selectedText
|
||||
? t('Estimate selected query cost')
|
||||
: t('Estimate cost');
|
||||
@ -93,7 +97,7 @@ const EstimateQueryCostButton = props => {
|
||||
triggerNode={
|
||||
<Button
|
||||
style={{ height: 32, padding: '4px 15px' }}
|
||||
onClick={onClick}
|
||||
onClick={onClickHandler}
|
||||
key="query-estimate-btn"
|
||||
tooltip={tooltip}
|
||||
disabled={disabled}
|
||||
@ -106,7 +110,4 @@ const EstimateQueryCostButton = props => {
|
||||
);
|
||||
};
|
||||
|
||||
EstimateQueryCostButton.propTypes = propTypes;
|
||||
EstimateQueryCostButton.defaultProps = defaultProps;
|
||||
|
||||
export default EstimateQueryCostButton;
|
Loading…
Reference in New Issue
Block a user