From fd57fce977375b010ab4b928e6682853ff60cf20 Mon Sep 17 00:00:00 2001 From: Enzo Martellucci <52219496+EnxDev@users.noreply.github.com> Date: Wed, 11 Dec 2024 13:26:18 +0100 Subject: [PATCH] refactor: Migrate AdhocFilterEditPopoverSqlTabContent to TypeScript (#31268) Co-authored-by: JUST.in DO IT --- .../index.jsx | 139 ------------------ .../index.tsx | 135 +++++++++++++++++ 2 files changed, 135 insertions(+), 139 deletions(-) delete mode 100644 superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.jsx create mode 100644 superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.jsx deleted file mode 100644 index dfbc19db29188..0000000000000 --- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.jsx +++ /dev/null @@ -1,139 +0,0 @@ -/** - * 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 { Component } from 'react'; -import PropTypes from 'prop-types'; -import { Select } from 'src/components'; -import { styled, t } from '@superset-ui/core'; -import { SQLEditor } from 'src/components/AsyncAceEditor'; -import sqlKeywords from 'src/SqlLab/utils/sqlKeywords'; - -import { getColumnKeywords } from 'src/explore/controlUtils/getColumnKeywords'; -import adhocMetricType from 'src/explore/components/controls/MetricControl/adhocMetricType'; -import columnType from 'src/explore/components/controls/FilterControl/columnType'; -import AdhocFilter from 'src/explore/components/controls/FilterControl/AdhocFilter'; -import { Clauses, ExpressionTypes } from '../types'; - -const propTypes = { - adhocFilter: PropTypes.instanceOf(AdhocFilter).isRequired, - onChange: PropTypes.func.isRequired, - options: PropTypes.arrayOf( - PropTypes.oneOfType([ - columnType, - PropTypes.shape({ saved_metric_name: PropTypes.string.isRequired }), - adhocMetricType, - ]), - ).isRequired, - height: PropTypes.number.isRequired, -}; - -const StyledSelect = styled(Select)` - ${({ theme }) => ` - width: ${theme.gridUnit * 30}px; - marginRight: ${theme.gridUnit}px; - `} -`; - -export default class AdhocFilterEditPopoverSqlTabContent extends Component { - constructor(props) { - super(props); - this.onSqlExpressionChange = this.onSqlExpressionChange.bind(this); - this.onSqlExpressionClauseChange = - this.onSqlExpressionClauseChange.bind(this); - this.handleAceEditorRef = this.handleAceEditorRef.bind(this); - } - - componentDidUpdate() { - if (this.aceEditorRef) { - this.aceEditorRef.editor.resize(); - } - } - - onSqlExpressionClauseChange(clause) { - this.props.onChange( - this.props.adhocFilter.duplicateWith({ - clause, - expressionType: ExpressionTypes.Sql, - }), - ); - } - - onSqlExpressionChange(sqlExpression) { - this.props.onChange( - this.props.adhocFilter.duplicateWith({ - sqlExpression, - expressionType: ExpressionTypes.Sql, - }), - ); - } - - handleAceEditorRef(ref) { - if (ref) { - this.aceEditorRef = ref; - } - } - - render() { - const { adhocFilter, height, options } = this.props; - - const keywords = sqlKeywords.concat( - getColumnKeywords(options.filter(option => option.column_name)), - ); - const selectOptions = Object.values(Clauses).map(clause => ({ - label: clause, - value: clause, - })); - - return ( - -
-
- -
- - WHERE {t('Filters by columns')} -
- HAVING {t('Filters by metrics')} - -
-
({ marginTop: theme.gridUnit * 4 })}> - -
- - ); - } -} -AdhocFilterEditPopoverSqlTabContent.propTypes = propTypes; diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx new file mode 100644 index 0000000000000..b2a94a900e1ed --- /dev/null +++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx @@ -0,0 +1,135 @@ +/** + * 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 { useEffect, useRef, useMemo } from 'react'; +import { Select } from 'src/components'; +import { styled, t, useTheme } from '@superset-ui/core'; +import { SQLEditor } from 'src/components/AsyncAceEditor'; +import sqlKeywords from 'src/SqlLab/utils/sqlKeywords'; +import { getColumnKeywords } from 'src/explore/controlUtils/getColumnKeywords'; +import AdhocFilter from 'src/explore/components/controls/FilterControl/AdhocFilter'; +import { OptionSortType } from 'src/explore/types'; +import { ColumnMeta } from '@superset-ui/chart-controls'; +import { Clauses, ExpressionTypes } from '../types'; + +const StyledSelect = styled(Select)` + ${({ theme }) => ` + width: ${theme.gridUnit * 30}px; + marginRight: ${theme.gridUnit}px; + `} +`; + +export default function AdhocFilterEditPopoverSqlTabContent({ + adhocFilter, + onChange, + options, + height, +}: { + adhocFilter: AdhocFilter; + onChange: (filter: AdhocFilter) => void; + options: OptionSortType[]; + height: number; +}) { + const aceEditorRef = useRef(null); + const theme = useTheme(); + + useEffect(() => { + // @ts-ignore + aceEditorRef?.current?.editor.resize(); + }, [adhocFilter]); + + const onSqlExpressionClauseChange = (clause: string) => { + onChange( + adhocFilter.duplicateWith({ + clause, + expressionType: ExpressionTypes.Sql, + }), + ); + }; + + const onSqlExpressionChange = (sqlExpression: string) => { + onChange( + adhocFilter.duplicateWith({ + sqlExpression, + expressionType: ExpressionTypes.Sql, + }), + ); + }; + + const keywords = useMemo( + () => + sqlKeywords.concat( + getColumnKeywords( + options.filter( + (option): option is ColumnMeta => + typeof option === 'object' && + option !== null && + 'column_name' in option && + typeof option.column_name === 'string' && + 'type' in option, + ), + ), + ), + [sqlKeywords], + ); + + const selectOptions = useMemo( + () => + Object.values(Clauses).map(clause => ({ + label: clause, + value: clause, + })), + [Clauses], + ); + + return ( + +
+
+ +
+ + WHERE {t('Filters by columns')} +
+ HAVING {t('Filters by metrics')} + +
+
+ +
+ + ); +}