You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ju...@apache.org on 2026/04/08 19:42:13 UTC
(superset) branch master updated: fix(sqllab): Update style for code viewer container (#39075)
This is an automated email from the ASF dual-hosted git repository.
justinpark pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 4c2dd634643 fix(sqllab): Update style for code viewer container (#39075)
4c2dd634643 is described below
commit 4c2dd634643e34f56ae698887dfc9d5bee8a6851
Author: JUST.in DO IT <ju...@airbnb.com>
AuthorDate: Wed Apr 8 12:42:06 2026 -0700
fix(sqllab): Update style for code viewer container (#39075)
---
.../src/SqlLab/components/HighlightedSql/index.tsx | 35 ++++++++++++++++++----
.../src/features/queries/QueryPreviewModal.tsx | 13 +++++++-
.../features/queries/SavedQueryPreviewModal.tsx | 13 +++++++-
3 files changed, 54 insertions(+), 7 deletions(-)
diff --git a/superset-frontend/src/SqlLab/components/HighlightedSql/index.tsx b/superset-frontend/src/SqlLab/components/HighlightedSql/index.tsx
index f958e05a32d..ef4831a9945 100644
--- a/superset-frontend/src/SqlLab/components/HighlightedSql/index.tsx
+++ b/superset-frontend/src/SqlLab/components/HighlightedSql/index.tsx
@@ -16,6 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
+import { css, styled, useTheme } from '@apache-superset/core/theme';
import { t } from '@apache-superset/core/translation';
import { ModalTrigger } from '@superset-ui/core/components';
import CodeSyntaxHighlighter from '@superset-ui/core/components/CodeSyntaxHighlighter';
@@ -40,6 +41,12 @@ interface TriggerNodeProps {
maxWidth: number;
}
+const Title = styled.h4`
+ font-size: ${({ theme }) => theme.fontSizeLG}px;
+ margin: ${({ theme }) => theme.sizeUnit * 2}px 0;
+ font-weight: ${({ theme }) => theme.fontWeightStrong};
+`;
+
const shrinkSql = (sql: string, maxLines: number, maxWidth: number) => {
const ssql = sql || '';
let lines = ssql.split('\n');
@@ -63,14 +70,32 @@ function TriggerNode({ shrink, sql, maxLines, maxWidth }: TriggerNodeProps) {
}
function HighlightSqlModal({ rawSql, sql }: HighlightedSqlModalTypes) {
+ const theme = useTheme();
+ const codeBlockStyle = {
+ border: 1,
+ borderColor: theme.colorBorder,
+ borderStyle: 'solid',
+ backgroundColor: theme.colorBgLayout,
+ fontSize: theme.fontSize * 0.9,
+ padding: theme.sizeUnit * 2,
+ };
+
return (
- <div>
- <h4>{t('Source SQL')}</h4>
- <CodeSyntaxHighlighter language="sql">{sql}</CodeSyntaxHighlighter>
+ <div
+ css={css`
+ margin: -${theme.sizeUnit * 6}px;
+ `}
+ >
+ <Title>{t('Source SQL')}</Title>
+ <CodeSyntaxHighlighter language="sql" customStyle={codeBlockStyle}>
+ {sql}
+ </CodeSyntaxHighlighter>
{rawSql && rawSql !== sql && (
<div>
- <h4>{t('Executed SQL')}</h4>
- <CodeSyntaxHighlighter language="sql">{rawSql}</CodeSyntaxHighlighter>
+ <Title>{t('Executed SQL')}</Title>
+ <CodeSyntaxHighlighter language="sql" customStyle={codeBlockStyle}>
+ {rawSql}
+ </CodeSyntaxHighlighter>
</div>
)}
</div>
diff --git a/superset-frontend/src/features/queries/QueryPreviewModal.tsx b/superset-frontend/src/features/queries/QueryPreviewModal.tsx
index 9e00d309c2a..823aae806c5 100644
--- a/superset-frontend/src/features/queries/QueryPreviewModal.tsx
+++ b/superset-frontend/src/features/queries/QueryPreviewModal.tsx
@@ -18,7 +18,7 @@
*/
import { useState } from 'react';
import { t } from '@apache-superset/core/translation';
-import { styled } from '@apache-superset/core/theme';
+import { useTheme, styled } from '@apache-superset/core/theme';
import cx from 'classnames';
import { Button, Modal } from '@superset-ui/core/components';
import withToasts, {
@@ -65,6 +65,7 @@ const TabButton = styled.div`
const StyledModal = styled(Modal)`
.ant-modal-body {
padding: ${({ theme }) => theme.sizeUnit * 6}px;
+ padding-top: 0;
}
`;
@@ -93,6 +94,15 @@ function QueryPreviewModal({
currentQueryId: query.id,
fetchData,
});
+ const theme = useTheme();
+ const codeBlockStyle = {
+ border: 1,
+ borderColor: theme.colorBorder,
+ borderStyle: 'solid',
+ marginTop: theme.sizeUnit * 4,
+ fontSize: theme.fontSize * 0.75,
+ height: theme.sizeUnit * 100,
+ };
const [currentTab, setCurrentTab] = useState<'user' | 'executed'>('user');
@@ -157,6 +167,7 @@ function QueryPreviewModal({
addDangerToast={addDangerToast}
addSuccessToast={addSuccessToast}
language="sql"
+ customStyle={codeBlockStyle}
>
{(currentTab === 'user' ? sql : executed_sql) || ''}
</SyntaxHighlighterCopy>
diff --git a/superset-frontend/src/features/queries/SavedQueryPreviewModal.tsx b/superset-frontend/src/features/queries/SavedQueryPreviewModal.tsx
index 3e6e45871b8..6f0989e1a61 100644
--- a/superset-frontend/src/features/queries/SavedQueryPreviewModal.tsx
+++ b/superset-frontend/src/features/queries/SavedQueryPreviewModal.tsx
@@ -18,7 +18,7 @@
*/
import { FunctionComponent } from 'react';
import { t } from '@apache-superset/core/translation';
-import { styled } from '@apache-superset/core/theme';
+import { useTheme, styled } from '@apache-superset/core/theme';
import { Button, Modal } from '@superset-ui/core/components';
import SyntaxHighlighterCopy from 'src/features/queries/SyntaxHighlighterCopy';
import withToasts, {
@@ -41,6 +41,7 @@ const QueryLabel = styled.div`
const StyledModal = styled(Modal)`
.ant-modal-body {
padding: 24px;
+ padding-top: 0;
}
`;
@@ -77,6 +78,15 @@ const SavedQueryPreviewModal: FunctionComponent<
currentQueryId: savedQuery.id,
fetchData,
});
+ const theme = useTheme();
+ const codeBlockStyle = {
+ border: 1,
+ borderColor: theme.colorBorder,
+ borderStyle: 'solid',
+ marginTop: theme.sizeUnit * 4,
+ fontSize: theme.fontSize * 0.75,
+ height: theme.sizeUnit * 100,
+ };
return (
<div role="none" onKeyUp={handleKeyPress}>
@@ -123,6 +133,7 @@ const SavedQueryPreviewModal: FunctionComponent<
language="sql"
addDangerToast={addDangerToast}
addSuccessToast={addSuccessToast}
+ customStyle={codeBlockStyle}
>
{savedQuery.sql || ''}
</SyntaxHighlighterCopy>