From 14519aa736ef3dc6d8465e5a51d6bea2955557e8 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Sun, 3 Apr 2022 11:45:28 +0200 Subject: [PATCH] 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: (