(superset) 03/03: fix(sqllab): invalid css scope for ace editor autocomplete (#28156)

[michaelsmolina]

This is an automated email from the ASF dual-hosted git repository.

michaelsmolina pushed a commit to branch 3.1
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 668e1aa578257ae1fef3a459f2452ebfd3ae2301
Author: JUST.in DO IT <justin.p...@airbnb.com>
AuthorDate: Fri Apr 26 09:48:13 2024 -0700

    fix(sqllab): invalid css scope for ace editor autocomplete (#28156)
---
 .../SqlLab/components/AceEditorWrapper/index.tsx   | 66 ++++++++++++++--------
 1 file changed, 42 insertions(+), 24 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx 
b/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx
index 8529f49d4f..b9dd879f49 100644
--- a/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx
+++ b/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx
@@ -19,8 +19,10 @@
 import React, { useState, useEffect, useRef } from 'react';
 import type { IAceEditor } from 'react-ace/lib/types';
 import { useDispatch } from 'react-redux';
-import { css, styled, usePrevious } from '@superset-ui/core';
+import { css, styled, usePrevious, useTheme } from '@superset-ui/core';
+import { Global } from '@emotion/react';
 
+import { SQL_EDITOR_LEFTBAR_WIDTH } from 'src/SqlLab/constants';
 import { queryEditorSetSelectedText } from 'src/SqlLab/actions/sqlLab';
 import { FullSQLEditor as AceEditor } from 'src/components/AsyncAceEditor';
 import type { KeyboardShortcut } from 
'src/SqlLab/components/KeyboardShortcutButton';
@@ -49,17 +51,9 @@ const StyledAceEditor = styled(AceEditor)`
     && {
       // double class is better than !important
       border: 1px solid ${theme.colors.grayscale.light2};
-      font-feature-settings: 'liga' off, 'calt' off;
-
-      &.ace_autocomplete {
-        // Use !important because Ace Editor applies extra CSS at the last 
second
-        // when opening the autocomplete.
-        width: ${theme.gridUnit * 130}px !important;
-      }
-
-      .ace_scroller {
-        background-color: ${theme.colors.grayscale.light4};
-      }
+      font-feature-settings:
+        'liga' off,
+        'calt' off;
     }
   `}
 `;
@@ -167,20 +161,44 @@ const AceEditorWrapper = ({
     },
     !autocomplete,
   );
+  const theme = useTheme();
 
   return (
-    <StyledAceEditor
-      keywords={keywords}
-      onLoad={onEditorLoad}
-      onBlur={onBlurSql}
-      height={height}
-      onChange={onChangeText}
-      width="100%"
-      editorProps={{ $blockScrolling: true }}
-      enableLiveAutocompletion={autocomplete}
-      value={sql}
-      annotations={annotations}
-    />
+    <>
+      <Global
+        styles={css`
+          .ace_text-layer {
+            width: 100% !important;
+          }
+
+          .ace_autocomplete {
+            // Use !important because Ace Editor applies extra CSS at the last 
second
+            // when opening the autocomplete.
+            width: ${theme.gridUnit * 130}px !important;
+          }
+
+          .ace_tooltip {
+            max-width: ${SQL_EDITOR_LEFTBAR_WIDTH}px;
+          }
+
+          .ace_scroller {
+            background-color: ${theme.colors.grayscale.light4};
+          }
+        `}
+      />
+      <StyledAceEditor
+        keywords={keywords}
+        onLoad={onEditorLoad}
+        onBlur={onBlurSql}
+        height={height}
+        onChange={onChangeText}
+        width="100%"
+        editorProps={{ $blockScrolling: true }}
+        enableLiveAutocompletion={autocomplete}
+        value={sql}
+        annotations={annotations}
+      />
+    </>
   );
 };