fix(sqllab): frame Template Parameters editor at the wrapper level

Apply the border and radius to the EditorOutline wrapper instead of the `.ace_editor` descendant so the frame renders regardless of which editor provider EditorHost resolves to (AceEditorProvider does not forward className to the rendered editor). Keeps the outline off `overflow: hidden`, so Ace tooltips and autocomplete popovers are not clipped. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
test(sqllab): pin Template Parameters editor height to 360px
2026-06-18 05:59:21 +00:00 · 2026-06-17 16:43:16 -07:00 · 2026-06-17 10:52:05 -07:00 · 2026-06-17 00:05:05 +00:00 · 2026-06-16 18:27:46 +00:00
2 changed files with 29 additions and 14 deletions
--- a/superset-frontend/src/SqlLab/components/TemplateParamsEditor/TemplateParamsEditor.test.tsx
+++ b/superset-frontend/src/SqlLab/components/TemplateParamsEditor/TemplateParamsEditor.test.tsx
@@ -39,8 +39,10 @@ jest.mock('@superset-ui/core/components/Select/AsyncSelect', () => () => (
  <div data-test="mock-async-select" />
 ));
 jest.mock('src/core/editors', () => ({
-  EditorHost: ({ value }: { value: string }) => (
-    <div data-test="mock-async-ace-editor">{value}</div>
+  EditorHost: ({ value, height }: { value: string; height: string }) => (
+    <div data-test="mock-async-ace-editor" data-height={height}>
+      {value}
+    </div>
  ),
 }));

@@ -79,6 +81,18 @@ describe('TemplateParamsEditor', () => {
    });
  });

+  test('renders the editor with a bounded height to avoid overflowing the popover', async () => {
+    const { container, getByTestId } = setup();
+    fireEvent.click(getByText(container, 'Parameters'));
+    await waitFor(() => {
+      expect(getByTestId('mock-async-ace-editor')).toBeInTheDocument();
+    });
+    expect(getByTestId('mock-async-ace-editor')).toHaveAttribute(
+      'data-height',
+      '360px',
+    );
+  });
+
  test('renders templateParams', async () => {
    const { container, getByTestId } = setup();
    fireEvent.click(getByText(container, 'Parameters'));
--- a/superset-frontend/src/SqlLab/components/TemplateParamsEditor/index.tsx
+++ b/superset-frontend/src/SqlLab/components/TemplateParamsEditor/index.tsx
@@ -30,10 +30,9 @@ import {
 import { EditorHost } from 'src/core/editors';
 import useQueryEditor from 'src/SqlLab/hooks/useQueryEditor';

-const StyledEditorHost = styled(EditorHost)`
-  &.ace_editor {
-    border: 1px solid ${({ theme }) => theme.colorBorder};
-  }
+const EditorOutline = styled.div`
+  border: 1px solid ${({ theme }) => theme.colorBorder};
+  border-radius: ${({ theme }) => theme.borderRadius}px;
 `;

 const StyledParagraph = styled.p`
@@ -87,14 +86,16 @@ const TemplateParamsEditor = ({
        </a>{' '}
        {t('syntax.')}
      </StyledParagraph>
-      <StyledEditorHost
-        id={`template-params-${queryEditorId}`}
-        height="800px"
-        onChange={debounce(onChange, Constants.FAST_DEBOUNCE)}
-        language={language === 'yaml' ? 'yaml' : 'json'}
-        width="100%"
-        value={code}
-      />
+      <EditorOutline>
+        <EditorHost
+          id={`template-params-${queryEditorId}`}
+          height="360px"
+          onChange={debounce(onChange, Constants.FAST_DEBOUNCE)}
+          language={language === 'yaml' ? 'yaml' : 'json'}
+          width="100%"
+          value={code}
+        />
+      </EditorOutline>
    </div>
  );
Author	SHA1	Message	Date
Joe Li	c964696723	fix(sqllab): frame Template Parameters editor at the wrapper level Apply the border and radius to the EditorOutline wrapper instead of the `.ace_editor` descendant so the frame renders regardless of which editor provider EditorHost resolves to (AceEditorProvider does not forward className to the rendered editor). Keeps the outline off `overflow: hidden`, so Ace tooltips and autocomplete popovers are not clipped. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-06-17 16:43:16 -07:00
Joe Li	1f8e8b4cc2	test(sqllab): pin Template Parameters editor height to 360px The Template Parameters editor previously rendered at 800px, which made the popover overflow. Add a regression test asserting the editor receives height="360px" so a regression back to the larger height is caught. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-06-17 10:52:05 -07:00
sadpandajoe	3d24afdabf	fix(sqllab): move outline to inner .ace_editor to avoid clipping popovers Address Copilot/Bito review: the previous EditorOutline wrapper used overflow: hidden to clip the border-radius, which would also clip Ace's autocomplete dropdown and gutter/annotation tooltips that Ace mounts as descendants of .ace_editor. Apply the border + border-radius directly to the .ace_editor element instead so the outline still renders and popovers are no longer clipped at the wrapper boundary. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-06-17 00:05:05 +00:00
sadpandajoe	c7a09acd01	fix(sqllab): shrink Template Parameters editor height and add outline Reduce editor height from 800px to 360px so the popover fits on laptop viewports without overflowing. Replace the broken StyledEditorHost styled wrapper (whose &.ace_editor selector never matched because the class lives on a deeper DOM node) with an EditorOutline div that applies border + border-radius + overflow:hidden directly, ensuring the outline is always visible in both light and dark themes via theme.colorBorder. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-06-16 18:27:46 +00:00