From b935ab81d3ca1824b69a1082149f6887b0e77462 Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Tue, 3 Dec 2024 10:29:55 +0100 Subject: [PATCH 1/4] refactor: Migrate AdhocFilterEditPopoverSqlTabContent to TypeScript --- .../index.jsx | 139 ------------------ .../index.tsx | 131 +++++++++++++++++ 2 files changed, 131 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..9a86cf5ba9984 --- /dev/null +++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx @@ -0,0 +1,131 @@ +/** + * 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, useCallback } 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(); + + const handleAceEditorRef = useCallback(ref => { + if (ref) aceEditorRef.current = ref; + }, []); + + 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 = 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, + ), + ), + ); + + const selectOptions = Object.values(Clauses).map(clause => ({ + label: clause, + value: clause, + })); + + return ( + +
+
+ +
+ + WHERE {t('Filters by columns')} +
+ HAVING {t('Filters by metrics')} + +
+
+ +
+ + ); +} From b38a13f4e6862aa02176f35cb1beaaf263efc8bd Mon Sep 17 00:00:00 2001 From: Enzo Martellucci <52219496+EnxDev@users.noreply.github.com> Date: Tue, 3 Dec 2024 18:46:20 +0100 Subject: [PATCH 2/4] Update index.tsx Co-authored-by: JUST.in DO IT --- .../AdhocFilterEditPopoverSqlTabContent/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx index 9a86cf5ba9984..c71556b10caa9 100644 --- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx +++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx @@ -75,7 +75,7 @@ export default function AdhocFilterEditPopoverSqlTabContent({ ); }; - const keywords = sqlKeywords.concat( + const keywords = useMemo(() => sqlKeywords.concat( getColumnKeywords( options.filter( (option): option is ColumnMeta => @@ -86,7 +86,7 @@ export default function AdhocFilterEditPopoverSqlTabContent({ 'type' in option, ), ), - ); + ), [sqlKeywords]); const selectOptions = Object.values(Clauses).map(clause => ({ label: clause, From f4022e60e6beada9e8f87f27ab97d4e079fe4bfd Mon Sep 17 00:00:00 2001 From: Enzo Martellucci <52219496+EnxDev@users.noreply.github.com> Date: Tue, 3 Dec 2024 18:47:59 +0100 Subject: [PATCH 3/4] adds useMemo Co-authored-by: JUST.in DO IT --- .../AdhocFilterEditPopoverSqlTabContent/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx index c71556b10caa9..d03c04693b02f 100644 --- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx +++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx @@ -88,10 +88,10 @@ export default function AdhocFilterEditPopoverSqlTabContent({ ), ), [sqlKeywords]); - const selectOptions = Object.values(Clauses).map(clause => ({ + const selectOptions = useMemo(() => Object.values(Clauses).map(clause => ({ label: clause, value: clause, - })); + })), [Clauses]); return ( From b77d82b78fcd9c0cee39c39a063cbab1b22be60e Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Wed, 4 Dec 2024 10:52:29 +0100 Subject: [PATCH 4/4] lint fix --- .../index.tsx | 46 ++++++++++--------- 1 file changed, 25 insertions(+), 21 deletions(-) diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx index d03c04693b02f..b2a94a900e1ed 100644 --- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx +++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import { useEffect, useRef, useCallback } from 'react'; +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'; @@ -48,10 +48,6 @@ export default function AdhocFilterEditPopoverSqlTabContent({ const aceEditorRef = useRef(null); const theme = useTheme(); - const handleAceEditorRef = useCallback(ref => { - if (ref) aceEditorRef.current = ref; - }, []); - useEffect(() => { // @ts-ignore aceEditorRef?.current?.editor.resize(); @@ -75,23 +71,31 @@ export default function AdhocFilterEditPopoverSqlTabContent({ ); }; - 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, + 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]); + [sqlKeywords], + ); - const selectOptions = useMemo(() => Object.values(Clauses).map(clause => ({ - label: clause, - value: clause, - })), [Clauses]); + const selectOptions = useMemo( + () => + Object.values(Clauses).map(clause => ({ + label: clause, + value: clause, + })), + [Clauses], + ); return ( @@ -113,7 +117,7 @@ export default function AdhocFilterEditPopoverSqlTabContent({