feat(sqllab): SQLEditor Extension (#24205)

superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx

@@ -31,6 +31,8 @@ import {
 } from 'src/SqlLab/fixtures';
 import SqlEditorLeftBar from 'src/SqlLab/components/SqlEditorLeftBar';
 import { api } from 'src/hooks/apiResources/queryApi';
+import { getExtensionsRegistry } from '@superset-ui/core';
+import setupExtensions from 'src/setup/setupExtensions';
 
 jest.mock('src/components/AsyncAceEditor', () => ({
   ...jest.requireActual('src/components/AsyncAceEditor'),
@@ -246,4 +248,18 @@ describe('SqlEditor', () => {
     fireEvent.click(await findByText('LIMIT:'));
     expect(await findByText('10 000')).toBeInTheDocument();
   });
+
+  it('renders an Extension if provided', async () => {
+    const extensionsRegistry = getExtensionsRegistry();
+
+    extensionsRegistry.set('sqleditor.extension.form', () => (
+      <>sqleditor.extension.form extension component</>
+    ));
+
+    setupExtensions();
+    const { findByText } = setup(mockedProps, store);
+    expect(
+      await findByText('sqleditor.extension.form extension component'),
+    ).toBeInTheDocument();
+  });
 });

superset-frontend/src/SqlLab/components/SqlEditor/index.jsx

@@ -30,7 +30,14 @@ import { CSSTransition } from 'react-transition-group';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import Split from 'react-split';
-import { css, FeatureFlag, styled, t, useTheme } from '@superset-ui/core';
+import {
+  css,
+  FeatureFlag,
+  styled,
+  t,
+  useTheme,
+  getExtensionsRegistry,
+} from '@superset-ui/core';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import Modal from 'src/components/Modal';
@@ -205,6 +212,8 @@ const propTypes = {
   scheduleQueryWarning: PropTypes.string,
 };
 
+const extensionsRegistry = getExtensionsRegistry();
+
 const SqlEditor = ({
   tables,
   queryEditor,
@@ -253,6 +262,8 @@ const SqlEditor = ({
   const sqlEditorRef = useRef(null);
   const northPaneRef = useRef(null);
 
+  const SqlFormExtension = extensionsRegistry.get('sqleditor.extension.form');
+
   const startQuery = useCallback(
     (ctasArg = false, ctas_method = CtasEnum.TABLE) => {
       if (!database) {
@@ -673,6 +684,15 @@ const SqlEditor = ({
         onDragEnd={onResizeEnd}
       >
         <div ref={northPaneRef} className="north-pane">
+          {SqlFormExtension && (
+            <SqlFormExtension
+              queryEditorId={queryEditor.id}
+              setQueryEditorAndSaveSqlWithDebounce={
+                setQueryEditorAndSaveSqlWithDebounce
+              }
+              startQuery={startQuery}
+            />
+          )}
           <AceEditorWrapper
             autocomplete={autocompleteEnabled}
             onBlur={setQueryEditorAndSaveSql}