pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-18 11:39:49 -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. * under the License.
*/ */
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import Alert from 'src/components/Alert'; import Alert from 'src/components/Alert';
import { t } from '@superset-ui/core'; import { t } from '@superset-ui/core';
import TableView from 'src/components/TableView'; import TableView from 'src/components/TableView';
@ -26,24 +25,28 @@ import Loading from 'src/components/Loading';
import ModalTrigger from 'src/components/ModalTrigger'; import ModalTrigger from 'src/components/ModalTrigger';
import { EmptyWrapperType } from 'src/components/TableView/TableView'; import { EmptyWrapperType } from 'src/components/TableView/TableView';
const propTypes = { interface EstimateQueryCostButtonProps {
dbId: PropTypes.number.isRequired, dbId: number;
schema: PropTypes.string.isRequired, schema: string;
sql: PropTypes.string.isRequired, sql: string;
getEstimate: PropTypes.func.isRequired, getEstimate: Function;
queryCostEstimate: PropTypes.Object, queryCostEstimate: Record<string, any>;
selectedText: PropTypes.string, selectedText?: string;
tooltip: PropTypes.string, tooltip?: string;
disabled: PropTypes.bool, disabled?: boolean;
}; }
const defaultProps = {
queryCostEstimate: [],
tooltip: '',
disabled: false,
};
const EstimateQueryCostButton = props => { const EstimateQueryCostButton = ({
const { cost } = props.queryCostEstimate; dbId,
schema,
sql,
getEstimate,
queryCostEstimate = {},
selectedText,
tooltip = '',
disabled = false,
}: EstimateQueryCostButtonProps) => {
const { cost } = queryCostEstimate;
const tableData = useMemo(() => (Array.isArray(cost) ? cost : []), [cost]); const tableData = useMemo(() => (Array.isArray(cost) ? cost : []), [cost]);
const columns = useMemo( const columns = useMemo(
() => () =>
@ -53,21 +56,23 @@ const EstimateQueryCostButton = props => {
[cost], [cost],
); );
const onClick = () => { // A call back method to pass an event handler function as a prop to the Button element.
props.getEstimate(); // Refer: https://reactjs.org/docs/handling-events.html
const onClickHandler = () => {
getEstimate();
}; };
const renderModalBody = () => { const renderModalBody = () => {
if (props.queryCostEstimate.error !== null) { if (queryCostEstimate.error !== null) {
return ( return (
<Alert <Alert
key="query-estimate-error" key="query-estimate-error"
type="error" type="error"
message={props.queryCostEstimate.error} message={queryCostEstimate.error}
/> />
); );
} }
if (props.queryCostEstimate.completed) { if (queryCostEstimate.completed) {
return ( return (
<TableView <TableView
columns={columns} columns={columns}
@ -81,7 +86,6 @@ const EstimateQueryCostButton = props => {
return <Loading position="normal" />; return <Loading position="normal" />;
}; };
const { disabled, selectedText, tooltip } = props;
const btnText = selectedText const btnText = selectedText
? t('Estimate selected query cost') ? t('Estimate selected query cost')
: t('Estimate cost'); : t('Estimate cost');
@ -93,7 +97,7 @@ const EstimateQueryCostButton = props => {
triggerNode={ triggerNode={
<Button <Button
style={{ height: 32, padding: '4px 15px' }} style={{ height: 32, padding: '4px 15px' }}
onClick={onClick} onClick={onClickHandler}
key="query-estimate-btn" key="query-estimate-btn"
tooltip={tooltip} tooltip={tooltip}
disabled={disabled} disabled={disabled}
@ -106,7 +110,4 @@ const EstimateQueryCostButton = props => {
); );
}; };
EstimateQueryCostButton.propTypes = propTypes;
EstimateQueryCostButton.defaultProps = defaultProps;
export default EstimateQueryCostButton; export default EstimateQueryCostButton;