MayUWish commented on a change in pull request #17944: URL: https://github.com/apache/superset/pull/17944#discussion_r779839170
########## File path: superset-frontend/src/SqlLab/components/QueryTable/index.tsx ########## @@ -29,133 +28,156 @@ import Button from 'src/components/Button'; import { fDuration } from 'src/modules/dates'; import Icons from 'src/components/Icons'; import { Tooltip } from 'src/components/Tooltip'; +import { Query } from 'src/SqlLab/types'; import ResultSet from '../ResultSet'; import ModalTrigger from '../../../components/ModalTrigger'; import HighlightedSql from '../HighlightedSql'; import { StaticPosition, verticalAlign, StyledTooltip } from './styles'; -const propTypes = { - columns: PropTypes.array, - actions: PropTypes.object, - queries: PropTypes.array, - onUserClicked: PropTypes.func, - onDbClicked: PropTypes.func, - displayLimit: PropTypes.number.isRequired, -}; -const defaultProps = { - columns: ['started', 'duration', 'rows'], - queries: [], - onUserClicked: () => {}, - onDbClicked: () => {}, -}; +// query's type is original Query; Shallow-copy of query, q's type is QueryTableQuery. So that prop, sql passed to another component will remain string, the type of original Query +interface QueryTableQueryTemp1 extends Omit<Query, 'sql'> { + sql: string | Record<string, any>; +} + +interface QueryTableQueryTemp2 extends Omit<QueryTableQueryTemp1, 'progress'> { + progress: number | Record<string, any>; +} + +interface QueryTableQuery extends Omit<QueryTableQueryTemp2, 'state'> { + state: string | Record<string, any>; +} -const openQuery = id => { +interface QueryTableProps { + columns: Array<string>; + actions: Record<string, any>; + queries: Query[]; + onUserClicked?: Function; + onDbClicked?: Function; + displayLimit: number; +} + +const openQuery = (id: number) => { const url = `/superset/sqllab?queryId=${id}`; window.open(url); }; -const QueryTable = props => { +const QueryTable = ({ + columns = ['started', 'duration', 'rows'], + actions, + queries = [], + onUserClicked = () => undefined, + onDbClicked = () => undefined, + displayLimit = Infinity, +}: QueryTableProps) => { const theme = useTheme(); - const statusAttributes = { - success: { - config: { - icon: <Icons.Check iconColor={theme.colors.success.base} />, - label: t('Success'), - }, - }, - failed: { - config: { - icon: <Icons.XSmall iconColor={theme.colors.error.base} />, - label: t('Failed'), - }, - }, - stopped: { - config: { - icon: <Icons.XSmall iconColor={theme.colors.error.base} />, - label: t('Failed'), - }, - }, - running: { - config: { - icon: <Icons.Running iconColor={theme.colors.primary.base} />, - label: t('Running'), - }, - }, - fetching: { - config: { - icon: <Icons.Queued iconColor={theme.colors.primary.base} />, - label: t('fetching'), - }, - }, - timed_out: { - config: { - icon: <Icons.Offline iconColor={theme.colors.grayscale.light1} />, - label: t('Offline'), - }, - }, - scheduled: { - config: { - icon: <Icons.Queued iconColor={theme.colors.grayscale.base} />, - label: t('Scheduled'), - }, - }, - pending: { - config: { - icon: <Icons.Queued iconColor={theme.colors.grayscale.base} />, - label: t('Scheduled'), - }, - }, - error: { - config: { - icon: <Icons.Error iconColor={theme.colors.error.base} />, - label: t('Unknown Status'), - }, - }, - }; - const setHeaders = column => { + const setHeaders = (column: string) => { if (column === 'sql') { return column.toUpperCase(); } return column.charAt(0).toUpperCase().concat(column.slice(1)); }; - const columns = useMemo( + const columnsOfTable = useMemo( () => - props.columns.map(column => ({ + columns.map(column => ({ accessor: column, Header: () => setHeaders(column), disableSortBy: true, })), - [props.columns], + [columns], ); - const user = useSelector(({ sqlLab: { user } }) => user); + const user = useSelector((state: any) => state.sqlLab.user); const data = useMemo(() => { - const restoreSql = query => { - props.actions.queryEditorSetSql({ id: query.sqlEditorId }, query.sql); + const restoreSql = (query: Record<string, any>) => { + actions?.queryEditorSetSql({ id: query.sqlEditorId }, query.sql); + }; + + const openQueryInNewTab = (query: Record<string, any>) => { Review comment: Updated on line 101, 105, 109, 113. Thank you! -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org --------------------------------------------------------------------- To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org For additional commands, e-mail: notifications-h...@superset.apache.org