From 7935b3af45e01d04fdcd155d68a5e344cc5095f9 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Tue, 22 Mar 2022 16:19:11 +0100 Subject: [PATCH 1/5] feat(explore): SQL popover in datasource panel --- superset-frontend/package-lock.json | 2 + .../superset-ui-chart-controls/package.json | 2 + .../src/components/ColumnOption.tsx | 12 +--- .../src/components/MetricOption.tsx | 12 ++-- .../src/components/SQLPopover.tsx | 66 +++++++++++++++++++ .../src/components/AsyncAceEditor/index.tsx | 6 +- 6 files changed, 83 insertions(+), 17 deletions(-) create mode 100644 superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json index de2d1a60f81f4..e1e3774692cfd 100644 --- a/superset-frontend/package-lock.json +++ b/superset-frontend/package-lock.json @@ -58482,7 +58482,9 @@ "@types/enzyme": "^3.10.5", "@types/react": "*", "antd": "^4.9.4", + "brace": "^0.11.1", "react": "^16.13.1", + "react-ace": "^9.4.4", "react-dom": "^16.13.1" } }, diff --git a/superset-frontend/packages/superset-ui-chart-controls/package.json b/superset-frontend/packages/superset-ui-chart-controls/package.json index bdb6be4daf846..fa4fa26a7f662 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/package.json +++ b/superset-frontend/packages/superset-ui-chart-controls/package.json @@ -39,7 +39,9 @@ "@types/enzyme": "^3.10.5", "@types/react": "*", "antd": "^4.9.4", + "brace": "^0.11.1", "react": "^16.13.1", + "react-ace": "^9.4.4", "react-dom": "^16.13.1" }, "publishConfig": { diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx index dd7775ec4dd06..d865cd9167635 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx @@ -17,13 +17,13 @@ * under the License. */ import React, { useState, ReactNode, useLayoutEffect } from 'react'; -import { css, styled, SupersetTheme } from '@superset-ui/core'; +import { css, styled, SupersetTheme, t } from '@superset-ui/core'; import { Tooltip } from './Tooltip'; import { ColumnTypeLabel } from './ColumnTypeLabel/ColumnTypeLabel'; -import InfoTooltipWithTrigger from './InfoTooltipWithTrigger'; import CertifiedIconWithTooltip from './CertifiedIconWithTooltip'; import { ColumnMeta } from '../types'; import { getColumnLabelText, getColumnTooltipNode } from './labelUtils'; +import { SQLPopover } from './SQLPopover'; export type ColumnOptionProps = { column: ColumnMeta; @@ -71,13 +71,7 @@ export function ColumnOption({ {hasExpression && ( - + )} {column.is_certified && ( diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx index 1052d1ec7e591..8db4b30968c60 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx @@ -23,12 +23,14 @@ import { Metric, SafeMarkdown, SupersetTheme, + t, } from '@superset-ui/core'; import InfoTooltipWithTrigger from './InfoTooltipWithTrigger'; import { ColumnTypeLabel } from './ColumnTypeLabel/ColumnTypeLabel'; import CertifiedIconWithTooltip from './CertifiedIconWithTooltip'; import Tooltip from './Tooltip'; import { getMetricTooltipNode } from './labelUtils'; +import { SQLPopover } from './SQLPopover'; const FlexRowContainer = styled.div` align-items: center; @@ -89,12 +91,10 @@ export function MetricOption({ {link} - {showFormula && ( - )} {metric.is_certified && ( diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx new file mode 100644 index 0000000000000..9abd980ed6222 --- /dev/null +++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx @@ -0,0 +1,66 @@ +/** + * 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 React from 'react'; +import { Popover } from 'antd'; +import type { PopoverProps } from 'antd/lib/popover'; +import AceEditor from 'react-ace'; +import 'brace/mode/sql'; +import { CalculatorOutlined } from '@ant-design/icons'; +import { css, styled, useTheme } from '@superset-ui/core'; + +const StyledCalculatorIcon = styled(CalculatorOutlined)` + ${({ theme }) => css` + color: ${theme.colors.grayscale.base}; + font-size: ${theme.typography.sizes.s}px; + & svg { + margin-left: ${theme.gridUnit}px; + margin-right: ${theme.gridUnit}px; + } + `} +`; + +export const SQLPopover = (props: PopoverProps & { sqlExpression: string }) => { + const theme = useTheme(); + return ( + + } + placement="bottomLeft" + arrowPointAtCenter + {...props} + > + + + ); +}; diff --git a/superset-frontend/src/components/AsyncAceEditor/index.tsx b/superset-frontend/src/components/AsyncAceEditor/index.tsx index 521ae357bed31..1812cae70b2ff 100644 --- a/superset-frontend/src/components/AsyncAceEditor/index.tsx +++ b/superset-frontend/src/components/AsyncAceEditor/index.tsx @@ -55,7 +55,7 @@ export interface AceCompleterKeyword extends AceCompleterKeywordData { /** * Async loaders to import brace modules. Must manually create call `import(...)` - * promises because webpack can only analyze asycn imports statically. + * promises because webpack can only analyze async imports statically. */ const aceModuleLoaders = { 'mode/sql': () => import('brace/mode/sql'), @@ -126,7 +126,9 @@ export default function AsyncAceEditor( ref, ) { if (keywords) { - const langTools = ace.acequire('ace/ext/language_tools'); + console.log({ ace }); + const langTools = ace.require('ace/ext/language_tools'); + console.log({ langTools }); const completer = { getCompletions: ( editor: AceEditor, From a53848a046ba00349cd04e5eb6480ca598e75ea8 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Thu, 24 Mar 2022 14:32:22 +0100 Subject: [PATCH 2/5] Fix acequire not defined --- superset-frontend/src/components/AsyncAceEditor/index.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/superset-frontend/src/components/AsyncAceEditor/index.tsx b/superset-frontend/src/components/AsyncAceEditor/index.tsx index 1812cae70b2ff..f485e1775bd57 100644 --- a/superset-frontend/src/components/AsyncAceEditor/index.tsx +++ b/superset-frontend/src/components/AsyncAceEditor/index.tsx @@ -126,9 +126,10 @@ export default function AsyncAceEditor( ref, ) { if (keywords) { - console.log({ ace }); - const langTools = ace.require('ace/ext/language_tools'); - console.log({ langTools }); + // ace doesn't have property acequire if there are multiple ace editors on a page + // @ts-ignore + const acequire = ace.acequire ?? ace.require; + const langTools = acequire('ace/ext/language_tools'); const completer = { getCompletions: ( editor: AceEditor, From eb272faa123aa40228c7cf2052a83c6487d75579 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Fri, 25 Mar 2022 10:34:07 +0100 Subject: [PATCH 3/5] Rebase and fix tests --- superset-frontend/package-lock.json | 6 ++++-- .../packages/superset-ui-chart-controls/package.json | 4 ++-- .../src/components/ColumnOption.tsx | 8 ++------ .../src/components/MetricOption.tsx | 6 +----- .../src/components/SQLPopover.tsx | 3 ++- .../test/components/ColumnOption.test.tsx | 12 ++++-------- .../test/components/MetricOption.test.tsx | 11 +++++++---- .../TemplateParamsEditor.test.tsx | 2 +- 8 files changed, 23 insertions(+), 29 deletions(-) diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json index e1e3774692cfd..b24177845a9ab 100644 --- a/superset-frontend/package-lock.json +++ b/superset-frontend/package-lock.json @@ -58467,6 +58467,8 @@ "license": "Apache-2.0", "dependencies": { "@react-icons/all-files": "^4.1.0", + "@types/enzyme": "^3.10.5", + "@types/react": "*", "lodash": "^4.17.15", "prop-types": "^15.7.2" }, @@ -58479,8 +58481,6 @@ "@testing-library/react": "^11.2.0", "@testing-library/react-hooks": "^5.0.3", "@testing-library/user-event": "^12.7.0", - "@types/enzyme": "^3.10.5", - "@types/react": "*", "antd": "^4.9.4", "brace": "^0.11.1", "react": "^16.13.1", @@ -76179,6 +76179,8 @@ "version": "file:packages/superset-ui-chart-controls", "requires": { "@react-icons/all-files": "^4.1.0", + "@types/enzyme": "^3.10.5", + "@types/react": "*", "lodash": "^4.17.15", "prop-types": "^15.7.2" } diff --git a/superset-frontend/packages/superset-ui-chart-controls/package.json b/superset-frontend/packages/superset-ui-chart-controls/package.json index fa4fa26a7f662..241e4a580443f 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/package.json +++ b/superset-frontend/packages/superset-ui-chart-controls/package.json @@ -24,6 +24,8 @@ ], "dependencies": { "@react-icons/all-files": "^4.1.0", + "@types/enzyme": "^3.10.5", + "@types/react": "*", "lodash": "^4.17.15", "prop-types": "^15.7.2" }, @@ -36,8 +38,6 @@ "@testing-library/react": "^11.2.0", "@testing-library/react-hooks": "^5.0.3", "@testing-library/user-event": "^12.7.0", - "@types/enzyme": "^3.10.5", - "@types/react": "*", "antd": "^4.9.4", "brace": "^0.11.1", "react": "^16.13.1", diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx index d865cd9167635..fce2e8ff2ad07 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx @@ -17,7 +17,7 @@ * under the License. */ import React, { useState, ReactNode, useLayoutEffect } from 'react'; -import { css, styled, SupersetTheme, t } from '@superset-ui/core'; +import { css, styled, SupersetTheme } from '@superset-ui/core'; import { Tooltip } from './Tooltip'; import { ColumnTypeLabel } from './ColumnTypeLabel/ColumnTypeLabel'; import CertifiedIconWithTooltip from './CertifiedIconWithTooltip'; @@ -69,11 +69,7 @@ export function ColumnOption({ {getColumnLabelText(column)} - - {hasExpression && ( - - )} - + {hasExpression && } {column.is_certified && ( {showFormula && metric.expression && ( - + )} {metric.is_certified && ( css` @@ -58,6 +58,7 @@ export const SQLPopover = (props: PopoverProps & { sqlExpression: string }) => { } placement="bottomLeft" arrowPointAtCenter + title={t('SQL expression')} {...props} > diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/components/ColumnOption.test.tsx b/superset-frontend/packages/superset-ui-chart-controls/test/components/ColumnOption.test.tsx index cc0106e9d650c..b1fb4b26535bf 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/test/components/ColumnOption.test.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/test/components/ColumnOption.test.tsx @@ -20,12 +20,8 @@ import React from 'react'; import { shallow, ShallowWrapper } from 'enzyme'; import { GenericDataType } from '@superset-ui/core'; -import { - ColumnOption, - ColumnOptionProps, - ColumnTypeLabel, - InfoTooltipWithTrigger, -} from '../../src'; +import { ColumnOption, ColumnOptionProps, ColumnTypeLabel } from '../../src'; +import { SQLPopover } from '../../src/components/SQLPopover'; describe('ColumnOption', () => { const defaultProps: ColumnOptionProps = { @@ -53,8 +49,8 @@ describe('ColumnOption', () => { expect(lbl).toHaveLength(1); expect(lbl.first().text()).toBe('Foo'); }); - it('shows 1 InfoTooltipWithTrigger', () => { - expect(wrapper.find(InfoTooltipWithTrigger)).toHaveLength(1); + it('shows SQL Popover trigger', () => { + expect(wrapper.find(SQLPopover)).toHaveLength(1); }); it('shows a label with column_name when no verbose_name', () => { delete props.column.verbose_name; diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/components/MetricOption.test.tsx b/superset-frontend/packages/superset-ui-chart-controls/test/components/MetricOption.test.tsx index e71882bd3ee14..59ba64c7bfe6f 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/test/components/MetricOption.test.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/test/components/MetricOption.test.tsx @@ -51,18 +51,21 @@ describe('MetricOption', () => { expect(lbl).toHaveLength(1); expect(lbl.first().text()).toBe('Foo'); }); - it('shows 2 InfoTooltipWithTrigger', () => { - expect(wrapper.find('InfoTooltipWithTrigger')).toHaveLength(2); + it('shows a InfoTooltipWithTrigger', () => { + expect(wrapper.find('InfoTooltipWithTrigger')).toHaveLength(1); + }); + it('shows SQL Popover trigger', () => { + expect(wrapper.find('SQLPopover')).toHaveLength(1); }); it('shows a label with metric_name when no verbose_name', () => { props.metric.verbose_name = ''; wrapper = shallow(factory(props)); expect(wrapper.find('.option-label').first().text()).toBe('foo'); }); - it('shows only 1 InfoTooltipWithTrigger when no warning', () => { + it('doesnt show InfoTooltipWithTrigger when no warning', () => { props.metric.warning_text = ''; wrapper = shallow(factory(props)); - expect(wrapper.find('InfoTooltipWithTrigger')).toHaveLength(1); + expect(wrapper.find('InfoTooltipWithTrigger')).toHaveLength(0); }); it('sets target="_blank" when openInNewWindow is true', () => { props.url = 'https://github.com/apache/incubator-superset'; diff --git a/superset-frontend/src/SqlLab/components/TemplateParamsEditor/TemplateParamsEditor.test.tsx b/superset-frontend/src/SqlLab/components/TemplateParamsEditor/TemplateParamsEditor.test.tsx index e663704ba21b8..14a3dc1fea32d 100644 --- a/superset-frontend/src/SqlLab/components/TemplateParamsEditor/TemplateParamsEditor.test.tsx +++ b/superset-frontend/src/SqlLab/components/TemplateParamsEditor/TemplateParamsEditor.test.tsx @@ -48,7 +48,7 @@ describe('TemplateParamsEditor', () => { { wrapper: ThemeWrapper }, ); fireEvent.click(getByText(container, 'Parameters')); - const spy = jest.spyOn(brace, 'acequire'); + const spy = jest.spyOn(brace, 'require'); spy.mockReturnValue({ setCompleters: () => 'foo' }); await waitFor(() => { expect(baseElement.querySelector('#ace-editor')).toBeInTheDocument(); From af4d63098aca582848b17594dfaa3d27a3d29b04 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Mon, 28 Mar 2022 15:24:03 +0200 Subject: [PATCH 4/5] Disable highlighting gutter --- .../superset-ui-chart-controls/src/components/SQLPopover.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx index 7588a7a5f790d..ebee9f253cb91 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx @@ -44,7 +44,10 @@ export const SQLPopover = (props: PopoverProps & { sqlExpression: string }) => { mode="sql" value={props.sqlExpression} editorProps={{ $blockScrolling: true }} - setOptions={{ highlightActiveLine: false }} + setOptions={{ + highlightActiveLine: false, + highlightGutterLine: false, + }} minLines={2} maxLines={6} readOnly From 14519aa736ef3dc6d8465e5a51d6bea2955557e8 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Sun, 3 Apr 2022 11:45:28 +0200 Subject: [PATCH 5/5] Use ace-build acequire instead of brace --- superset-frontend/package-lock.json | 15 +++++++++------ superset-frontend/package.json | 1 + .../superset-ui-chart-controls/package.json | 1 + .../src/components/SQLPopover.tsx | 2 +- .../TemplateParamsEditor.test.tsx | 3 --- .../components/TemplateParamsEditor/index.tsx | 1 - .../src/components/AsyncAceEditor/index.tsx | 5 +---- 7 files changed, 13 insertions(+), 15 deletions(-) diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json index b24177845a9ab..2e845ffab4f53 100644 --- a/superset-frontend/package-lock.json +++ b/superset-frontend/package-lock.json @@ -51,6 +51,7 @@ "@superset-ui/switchboard": "file:./packages/superset-ui-switchboard", "@vx/responsive": "^0.0.195", "abortcontroller-polyfill": "^1.1.9", + "ace-builds": "^1.4.14", "antd": "^4.9.4", "array-move": "^2.2.1", "babel-plugin-typescript-to-proptypes": "^2.0.0", @@ -24403,9 +24404,9 @@ } }, "node_modules/ace-builds": { - "version": "1.4.13", - "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.4.13.tgz", - "integrity": "sha512-SOLzdaQkY6ecPKYRDDg+MY1WoGgXA34cIvYJNNoBMGGUswHmlauU2Hy0UL96vW0Fs/LgFbMUjD+6vqzWTldIYQ==" + "version": "1.4.14", + "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.4.14.tgz", + "integrity": "sha512-NBOQlm9+7RBqRqZwimpgquaLeTJFayqb9UEPtTkpC3TkkwDnlsT/TwsCC0svjt9kEZ6G9mH5AEOHSz6Q/HrzQQ==" }, "node_modules/acorn": { "version": "7.1.1", @@ -58481,6 +58482,7 @@ "@testing-library/react": "^11.2.0", "@testing-library/react-hooks": "^5.0.3", "@testing-library/user-event": "^12.7.0", + "ace-builds": "^1.4.14", "antd": "^4.9.4", "brace": "^0.11.1", "react": "^16.13.1", @@ -59326,6 +59328,7 @@ "prop-types": "^15.6.2" }, "peerDependencies": { + "@emotion/react": "^11.4.1", "@superset-ui/chart-controls": "*", "@superset-ui/core": "*", "react": "^16.13.1" @@ -79095,9 +79098,9 @@ } }, "ace-builds": { - "version": "1.4.13", - "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.4.13.tgz", - "integrity": "sha512-SOLzdaQkY6ecPKYRDDg+MY1WoGgXA34cIvYJNNoBMGGUswHmlauU2Hy0UL96vW0Fs/LgFbMUjD+6vqzWTldIYQ==" + "version": "1.4.14", + "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.4.14.tgz", + "integrity": "sha512-NBOQlm9+7RBqRqZwimpgquaLeTJFayqb9UEPtTkpC3TkkwDnlsT/TwsCC0svjt9kEZ6G9mH5AEOHSz6Q/HrzQQ==" }, "acorn": { "version": "7.1.1", diff --git a/superset-frontend/package.json b/superset-frontend/package.json index f122d09464390..edf122a24992c 100644 --- a/superset-frontend/package.json +++ b/superset-frontend/package.json @@ -111,6 +111,7 @@ "@superset-ui/switchboard": "file:./packages/superset-ui-switchboard", "@vx/responsive": "^0.0.195", "abortcontroller-polyfill": "^1.1.9", + "ace-builds": "^1.4.14", "antd": "^4.9.4", "array-move": "^2.2.1", "babel-plugin-typescript-to-proptypes": "^2.0.0", diff --git a/superset-frontend/packages/superset-ui-chart-controls/package.json b/superset-frontend/packages/superset-ui-chart-controls/package.json index 241e4a580443f..1890a5e38a08b 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/package.json +++ b/superset-frontend/packages/superset-ui-chart-controls/package.json @@ -38,6 +38,7 @@ "@testing-library/react": "^11.2.0", "@testing-library/react-hooks": "^5.0.3", "@testing-library/user-event": "^12.7.0", + "ace-builds": "^1.4.14", "antd": "^4.9.4", "brace": "^0.11.1", "react": "^16.13.1", diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx index ebee9f253cb91..43d03a936cdb9 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx @@ -20,9 +20,9 @@ import React from 'react'; import { Popover } from 'antd'; import type { PopoverProps } from 'antd/lib/popover'; import AceEditor from 'react-ace'; -import 'brace/mode/sql'; import { CalculatorOutlined } from '@ant-design/icons'; import { css, styled, useTheme, t } from '@superset-ui/core'; +import 'ace-builds/src-noconflict/mode-sql'; const StyledCalculatorIcon = styled(CalculatorOutlined)` ${({ theme }) => css` diff --git a/superset-frontend/src/SqlLab/components/TemplateParamsEditor/TemplateParamsEditor.test.tsx b/superset-frontend/src/SqlLab/components/TemplateParamsEditor/TemplateParamsEditor.test.tsx index 14a3dc1fea32d..bc04030d28c8e 100644 --- a/superset-frontend/src/SqlLab/components/TemplateParamsEditor/TemplateParamsEditor.test.tsx +++ b/superset-frontend/src/SqlLab/components/TemplateParamsEditor/TemplateParamsEditor.test.tsx @@ -24,7 +24,6 @@ import { getByText, waitFor, } from 'spec/helpers/testing-library'; -import brace from 'brace'; import { ThemeProvider, supersetTheme } from '@superset-ui/core'; import TemplateParamsEditor from 'src/SqlLab/components/TemplateParamsEditor'; @@ -48,8 +47,6 @@ describe('TemplateParamsEditor', () => { { wrapper: ThemeWrapper }, ); fireEvent.click(getByText(container, 'Parameters')); - const spy = jest.spyOn(brace, 'require'); - spy.mockReturnValue({ setCompleters: () => 'foo' }); await waitFor(() => { expect(baseElement.querySelector('#ace-editor')).toBeInTheDocument(); }); diff --git a/superset-frontend/src/SqlLab/components/TemplateParamsEditor/index.tsx b/superset-frontend/src/SqlLab/components/TemplateParamsEditor/index.tsx index 4bedbfcecce31..62d0a7209de1c 100644 --- a/superset-frontend/src/SqlLab/components/TemplateParamsEditor/index.tsx +++ b/superset-frontend/src/SqlLab/components/TemplateParamsEditor/index.tsx @@ -74,7 +74,6 @@ function TemplateParamsEditor({ syntax.

{ - const { default: ace } = await import('brace'); const { default: ReactAceEditor } = await import('react-ace'); await Promise.all(aceModules.map(x => aceModuleLoaders[x]())); @@ -126,9 +126,6 @@ export default function AsyncAceEditor( ref, ) { if (keywords) { - // ace doesn't have property acequire if there are multiple ace editors on a page - // @ts-ignore - const acequire = ace.acequire ?? ace.require; const langTools = acequire('ace/ext/language_tools'); const completer = { getCompletions: (