Use ace-build acequire instead of brace

apache · Apr 3, 2022 · 14519aa · 14519aa
1 parent af4d630
commit 14519aa
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 15 deletions.
diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -74,7 +74,6 @@ function TemplateParamsEditor({
         syntax.
       </p>
       <StyledConfigEditor
-        keywords={[]}
         mode={language}
         minLines={25}
         maxLines={50}

diff --git a/superset-frontend/src/components/AsyncAceEditor/index.tsx b/superset-frontend/src/components/AsyncAceEditor/index.tsx
@@ -24,6 +24,7 @@ import {
   TextMode as OrigTextMode,
 } from 'brace';
 import AceEditor, { IAceEditorProps } from 'react-ace';
+import { acequire } from 'ace-builds/src-noconflict/ace';
 import AsyncEsmComponent, {
   PlaceholderProps,
 } from 'src/components/AsyncEsmComponent';
@@ -101,7 +102,6 @@ export default function AsyncAceEditor(
   }: AsyncAceEditorOptions = {},
 ) {
   return AsyncEsmComponent(async () => {
-    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: (