pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-07 06:17:45 -04:00
Code Issues Packages Projects Releases Wiki Activity

chore: migrate EstimateQueryCostButton component from jsx to tsx (#17603)

Browse Source 
* 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:
Daman Arora 2021-12-01 12:28:52 -05:00 committed by GitHub
parent 1cd07caa83
commit c6ba9bf9db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
superset-frontend/src/SqlLab/components/EstimateQueryCostButton/index.jsx → superset-frontend/src/SqlLab/components/EstimateQueryCostButton/index.tsx
View File

@ -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;