-
Notifications
You must be signed in to change notification settings - Fork 12.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
chore: type ResultSet.tsx #10226
chore: type ResultSet.tsx #10226
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -16,8 +16,7 @@ | |
* specific language governing permissions and limitations | ||
* under the License. | ||
*/ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import React, { CSSProperties } from 'react'; | ||
import { Alert, Button, ButtonGroup, ProgressBar } from 'react-bootstrap'; | ||
import shortid from 'shortid'; | ||
import { t } from '@superset-ui/translation'; | ||
|
@@ -31,40 +30,50 @@ import QueryStateLabel from './QueryStateLabel'; | |
import CopyToClipboard from '../../components/CopyToClipboard'; | ||
import { prepareCopyToClipboardTabularData } from '../../utils/common'; | ||
import { CtasEnum } from '../actions/sqlLab'; | ||
|
||
const propTypes = { | ||
actions: PropTypes.object, | ||
csv: PropTypes.bool, | ||
query: PropTypes.object, | ||
search: PropTypes.bool, | ||
showSql: PropTypes.bool, | ||
visualize: PropTypes.bool, | ||
cache: PropTypes.bool, | ||
height: PropTypes.number.isRequired, | ||
database: PropTypes.object, | ||
displayLimit: PropTypes.number.isRequired, | ||
}; | ||
const defaultProps = { | ||
search: true, | ||
visualize: true, | ||
showSql: false, | ||
csv: true, | ||
actions: {}, | ||
cache: false, | ||
database: {}, | ||
}; | ||
import { Query } from '../types'; | ||
|
||
const SEARCH_HEIGHT = 46; | ||
|
||
const LOADING_STYLES = { position: 'relative', minHeight: 100 }; | ||
const LOADING_STYLES: CSSProperties = { position: 'relative', minHeight: 100 }; | ||
|
||
interface ResultSetProps { | ||
actions: Record<string, any>; | ||
cache?: boolean; | ||
csv?: boolean; | ||
database?: Record<string, any>; | ||
displayLimit: number; | ||
height: number; | ||
query: Query; | ||
search?: boolean; | ||
showSql?: boolean; | ||
visualize?: boolean; | ||
} | ||
|
||
export default class ResultSet extends React.PureComponent { | ||
constructor(props) { | ||
interface ResultSetState { | ||
searchText: string; | ||
showExploreResultsButton: boolean; | ||
data: Record<string, any>[]; | ||
} | ||
|
||
export default class ResultSet extends React.PureComponent< | ||
ResultSetProps, | ||
ResultSetState | ||
> { | ||
static defaultProps = { | ||
cache: false, | ||
csv: true, | ||
database: {}, | ||
search: true, | ||
showSql: false, | ||
visualize: true, | ||
}; | ||
|
||
constructor(props: ResultSetProps) { | ||
super(props); | ||
this.state = { | ||
searchText: '', | ||
showExploreResultsButton: false, | ||
data: null, | ||
data: [], | ||
}; | ||
|
||
this.changeSearch = this.changeSearch.bind(this); | ||
|
@@ -79,7 +88,7 @@ export default class ResultSet extends React.PureComponent { | |
// only do this the first time the component is rendered/mounted | ||
this.reRunQueryIfSessionTimeoutErrorOnMount(); | ||
} | ||
UNSAFE_componentWillReceiveProps(nextProps) { | ||
UNSAFE_componentWillReceiveProps(nextProps: ResultSetProps) { | ||
// when new results comes in, save them locally and clear in store | ||
if ( | ||
this.props.cache && | ||
|
@@ -88,8 +97,7 @@ export default class ResultSet extends React.PureComponent { | |
nextProps.query.results.data && | ||
nextProps.query.results.data.length > 0 | ||
) { | ||
this.setState( | ||
{ data: nextProps.query.results.data }, | ||
this.setState({ data: nextProps.query.results.data }, () => | ||
this.clearQueryResults(nextProps.query), | ||
); | ||
} | ||
|
@@ -100,16 +108,16 @@ export default class ResultSet extends React.PureComponent { | |
this.fetchResults(nextProps.query); | ||
} | ||
} | ||
clearQueryResults(query) { | ||
clearQueryResults(query: Query) { | ||
this.props.actions.clearQueryResults(query); | ||
} | ||
popSelectStar(tmpSchema, tmpTable) { | ||
popSelectStar(tempSchema: string | null, tempTable: string) { | ||
const qe = { | ||
id: shortid.generate(), | ||
title: tmpTable, | ||
title: tempTable, | ||
autorun: false, | ||
dbId: this.props.query.dbId, | ||
sql: `SELECT * FROM ${tmpSchema}.${tmpTable}`, | ||
sql: `SELECT * FROM ${tempSchema ? `${tempSchema}.` : ''}${tempTable}`, | ||
}; | ||
this.props.actions.addQueryEditor(qe); | ||
} | ||
|
@@ -118,13 +126,13 @@ export default class ResultSet extends React.PureComponent { | |
showExploreResultsButton: !this.state.showExploreResultsButton, | ||
}); | ||
} | ||
changeSearch(event) { | ||
changeSearch(event: React.ChangeEvent<HTMLInputElement>) { | ||
this.setState({ searchText: event.target.value }); | ||
} | ||
fetchResults(query) { | ||
fetchResults(query: Query) { | ||
this.props.actions.fetchQueryResults(query, this.props.displayLimit); | ||
} | ||
reFetchQueryResults(query) { | ||
reFetchQueryResults(query: Query) { | ||
this.props.actions.reFetchQueryResults(query); | ||
} | ||
reRunQueryIfSessionTimeoutErrorOnMount() { | ||
|
@@ -218,14 +226,7 @@ export default class ResultSet extends React.PureComponent { | |
</Alert> | ||
); | ||
} else if (query.state === 'success' && query.ctas) { | ||
// Async queries | ||
let tmpSchema = query.tempSchema; | ||
let tmpTable = query.tempTableName; | ||
// Sync queries, query.results.query contains the source of truth for them. | ||
if (query.results && query.results.query) { | ||
tmpTable = query.results.query.tempTable; | ||
tmpSchema = query.results.query.tempSchema; | ||
} | ||
Comment on lines
-221
to
-228
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. this logic is moved to the reducer, it seems cleaner (although it's a big janky to have the query in 2 different places here) |
||
const { tempSchema, tempTable } = query; | ||
let object = 'Table'; | ||
if (query.ctas_method === CtasEnum.VIEW) { | ||
object = 'View'; | ||
|
@@ -235,20 +236,21 @@ export default class ResultSet extends React.PureComponent { | |
<Alert bsStyle="info"> | ||
{t(object)} [ | ||
<strong> | ||
{tmpSchema}.{tmpTable} | ||
{tempSchema ? `${tempSchema}.` : ''} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. When testing on sqllite, there wasn't always a schema, so i cleaned up the cases where schema can be null |
||
{tempTable} | ||
</strong> | ||
] {t('was created')} | ||
<ButtonGroup> | ||
<Button | ||
bsSize="small" | ||
className="m-r-5" | ||
onClick={() => this.popSelectStar(tmpSchema, tmpTable)} | ||
onClick={() => this.popSelectStar(tempSchema, tempTable)} | ||
> | ||
{t('Query in a new tab')} | ||
</Button> | ||
<ExploreCtasResultsButton | ||
table={tmpTable} | ||
schema={tmpSchema} | ||
table={tempTable} | ||
schema={tempSchema} | ||
dbId={exploreDBId} | ||
database={this.props.database} | ||
actions={this.props.actions} | ||
|
@@ -333,9 +335,7 @@ export default class ResultSet extends React.PureComponent { | |
trackingUrl = ( | ||
<Button | ||
bsSize="small" | ||
onClick={() => { | ||
window.open(query.trackingUrl); | ||
}} | ||
onClick={() => query.trackingUrl && window.open(query.trackingUrl)} | ||
> | ||
{t('Track Job')} | ||
</Button> | ||
|
@@ -358,5 +358,3 @@ export default class ResultSet extends React.PureComponent { | |
); | ||
} | ||
} | ||
ResultSet.propTypes = propTypes; | ||
ResultSet.defaultProps = defaultProps; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
/** | ||
* Licensed to the Apache Software Foundation (ASF) under one | ||
* or more contributor license agreements. See the NOTICE file | ||
* distributed with this work for additional information | ||
* regarding copyright ownership. The ASF licenses this file | ||
* to you under the Apache License, Version 2.0 (the | ||
* "License"); you may not use this file except in compliance | ||
* with the License. You may obtain a copy of the License at | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, | ||
* software distributed under the License is distributed on an | ||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | ||
* KIND, either express or implied. See the License for the | ||
* specific language governing permissions and limitations | ||
* under the License. | ||
*/ | ||
import { CtasEnum } from './actions/sqlLab'; | ||
|
||
export type Column = { | ||
name: string; | ||
}; | ||
|
||
export type Query = { | ||
cached: boolean; | ||
ctas: boolean; | ||
ctas_method?: keyof typeof CtasEnum; | ||
dbId: number; | ||
errorMessage: string | null; | ||
extra: { | ||
progress: string | null; | ||
}; | ||
id: string; | ||
isDataPreview: boolean; | ||
link?: string; | ||
progress: number; | ||
results: { | ||
columns: Column[]; | ||
data: Record<string, unknown>[]; | ||
expanded_columns: Column[]; | ||
}; | ||
resultsKey: string | null; | ||
sql: string; | ||
sqlEditorId: string; | ||
state: | ||
| 'stopped' | ||
| 'failed' | ||
| 'pending' | ||
| 'running' | ||
| 'scheduled' | ||
| 'success' | ||
| 'timed_out'; | ||
tempSchema: string | null; | ||
tempTable: string; | ||
trackingUrl: string | null; | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I aligned on this name everywhere because that's how the backend sends it