(superset) 06/11: theming react-code-highlighter or whatev it's called

[maximebeauchemin]

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

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

commit 344c8f5c37cdfed6d9617e6c3656c78b401df077
Author: Maxime Beauchemin <maximebeauche...@gmail.com>
AuthorDate: Tue Mar 25 09:44:17 2025 -0700

    theming react-code-highlighter or whatev it's called
---
 .../src/SqlLab/components/HighlightedSql/index.tsx | 75 ++++++++++++++++------
 1 file changed, 57 insertions(+), 18 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/HighlightedSql/index.tsx 
b/superset-frontend/src/SqlLab/components/HighlightedSql/index.tsx
index ff0b472a21..3334265188 100644
--- a/superset-frontend/src/SqlLab/components/HighlightedSql/index.tsx
+++ b/superset-frontend/src/SqlLab/components/HighlightedSql/index.tsx
@@ -16,13 +16,33 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/light';
+import SyntaxHighlighterBase from 'react-syntax-highlighter/dist/cjs/light';
 import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql';
 import github from 'react-syntax-highlighter/dist/cjs/styles/hljs/github';
-import { t } from '@superset-ui/core';
+import atomOneDark from 
'react-syntax-highlighter/dist/cjs/styles/hljs/atom-one-dark';
+import { t, themeObject } from '@superset-ui/core';
 import ModalTrigger from 'src/components/ModalTrigger';
 
-SyntaxHighlighter.registerLanguage('sql', sql);
+SyntaxHighlighterBase.registerLanguage('sql', sql);
+
+const ThemedSyntaxHighlighter = ({
+  children,
+  style,
+}: {
+  children: string;
+  style: any;
+}) => (
+  <SyntaxHighlighterBase
+    language="sql"
+    style={style}
+    customStyle={{
+      background: 'transparent',
+      padding: themeObject.theme.sizeUnit,
+    }}
+  >
+    {children}
+  </SyntaxHighlighterBase>
+);
 
 export interface HighlightedSqlProps {
   sql: string;
@@ -35,6 +55,7 @@ export interface HighlightedSqlProps {
 interface HighlightedSqlModalTypes {
   rawSql?: string;
   sql: string;
+  syntaxTheme: any;
 }
 
 interface TriggerNodeProps {
@@ -42,6 +63,7 @@ interface TriggerNodeProps {
   sql: string;
   maxLines: number;
   maxWidth: number;
+  syntaxTheme: any;
 }
 
 const shrinkSql = (sql: string, maxLines: number, maxWidth: number) => {
@@ -52,36 +74,43 @@ const shrinkSql = (sql: string, maxLines: number, maxWidth: 
number) => {
     lines.push('{...}');
   }
   return lines
-    .map(line => {
-      if (line.length > maxWidth) {
-        return `${line.slice(0, maxWidth)}{...}`;
-      }
-      return line;
-    })
+    .map(line =>
+      line.length > maxWidth ? `${line.slice(0, maxWidth)}{...}` : line,
+    )
     .join('\n');
 };
 
-function TriggerNode({ shrink, sql, maxLines, maxWidth }: TriggerNodeProps) {
+function TriggerNode({
+  shrink,
+  sql,
+  maxLines,
+  maxWidth,
+  syntaxTheme,
+}: TriggerNodeProps) {
   return (
-    <SyntaxHighlighter language="sql" style={github}>
+    <ThemedSyntaxHighlighter style={syntaxTheme}>
       {shrink ? shrinkSql(sql, maxLines, maxWidth) : sql}
-    </SyntaxHighlighter>
+    </ThemedSyntaxHighlighter>
   );
 }
 
-function HighlightSqlModal({ rawSql, sql }: HighlightedSqlModalTypes) {
+function HighlightSqlModal({
+  rawSql,
+  sql,
+  syntaxTheme,
+}: HighlightedSqlModalTypes) {
   return (
     <div>
       <h4>{t('Source SQL')}</h4>
-      <SyntaxHighlighter language="sql" style={github}>
+      <ThemedSyntaxHighlighter style={syntaxTheme}>
         {sql}
-      </SyntaxHighlighter>
+      </ThemedSyntaxHighlighter>
       {rawSql && rawSql !== sql && (
         <div>
           <h4>{t('Executed SQL')}</h4>
-          <SyntaxHighlighter language="sql" style={github}>
+          <ThemedSyntaxHighlighter style={syntaxTheme}>
             {rawSql}
-          </SyntaxHighlighter>
+          </ThemedSyntaxHighlighter>
         </div>
       )}
     </div>
@@ -95,16 +124,26 @@ function HighlightedSql({
   maxLines = 5,
   shrink = false,
 }: HighlightedSqlProps) {
+  const isDark = themeObject.isThemeDark();
+  const syntaxTheme = isDark ? atomOneDark : github;
+
   return (
     <ModalTrigger
       modalTitle={t('SQL')}
-      modalBody={<HighlightSqlModal rawSql={rawSql} sql={sql} />}
+      modalBody={
+        <HighlightSqlModal
+          rawSql={rawSql}
+          sql={sql}
+          syntaxTheme={syntaxTheme}
+        />
+      }
       triggerNode={
         <TriggerNode
           shrink={shrink}
           sql={sql}
           maxLines={maxLines}
           maxWidth={maxWidth}
+          syntaxTheme={syntaxTheme}
         />
       }
     />