This is an automated email from the ASF dual-hosted git repository.
kgabryje 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 aa74ba3da2 fix(sqllab): tab layout truncated (#32005)
aa74ba3da2 is described below
commit aa74ba3da2546b7145bfaa5531e4fa478570e21f
Author: JUST.in DO IT <[email protected]>
AuthorDate: Tue Jan 28 06:02:38 2025 -0800
fix(sqllab): tab layout truncated (#32005)
---
.../packages/superset-ui-core/src/style/index.tsx | 1 +
.../src/components/ErrorBoundary/index.tsx | 5 ++++-
.../src/components/ErrorMessage/ErrorAlert.tsx | 6 ++++--
superset-frontend/src/views/App.tsx | 20 ++++++++++++++------
4 files changed, 23 insertions(+), 9 deletions(-)
diff --git a/superset-frontend/packages/superset-ui-core/src/style/index.tsx
b/superset-frontend/packages/superset-ui-core/src/style/index.tsx
index c4964172be..d448b81e79 100644
--- a/superset-frontend/packages/superset-ui-core/src/style/index.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/style/index.tsx
@@ -27,6 +27,7 @@ export {
ThemeProvider,
CacheProvider as EmotionCacheProvider,
withTheme,
+ type SerializedStyles,
} from '@emotion/react';
export { default as createEmotionCache } from '@emotion/cache';
diff --git a/superset-frontend/src/components/ErrorBoundary/index.tsx
b/superset-frontend/src/components/ErrorBoundary/index.tsx
index 2fec6a6767..c7e60d577f 100644
--- a/superset-frontend/src/components/ErrorBoundary/index.tsx
+++ b/superset-frontend/src/components/ErrorBoundary/index.tsx
@@ -24,6 +24,7 @@ export interface ErrorBoundaryProps {
children: ReactNode;
onError?: (error: Error, info: ErrorInfo) => void;
showMessage?: boolean;
+ className?: string;
}
interface ErrorBoundaryState {
@@ -51,14 +52,16 @@ export default class ErrorBoundary extends Component<
render() {
const { error, info } = this.state;
+ const { showMessage, className } = this.props;
if (error) {
const firstLine = error.toString().split('\n')[0];
- if (this.props.showMessage) {
+ if (showMessage) {
return (
<ErrorAlert
errorType={t('Unexpected error')}
message={firstLine}
descriptionDetails={info?.componentStack}
+ className={className}
/>
);
}
diff --git a/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx
b/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx
index 50f21bf0fd..4ad75eb21a 100644
--- a/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx
+++ b/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx
@@ -35,6 +35,7 @@ export interface ErrorAlertProps {
children?: React.ReactNode; // Additional content to show in the modal
closable?: boolean; // Show close button, default true
showIcon?: boolean; // Show icon, default true
+ className?: string;
}
const ErrorAlert: React.FC<ErrorAlertProps> = ({
@@ -49,6 +50,7 @@ const ErrorAlert: React.FC<ErrorAlertProps> = ({
children,
closable = true,
showIcon = true,
+ className,
}) => {
const [isDescriptionVisible, setIsDescriptionVisible] = useState(
!descriptionDetailsCollapsed,
@@ -66,7 +68,7 @@ const ErrorAlert: React.FC<ErrorAlertProps> = ({
const color =
type === 'warning' ? theme.colors.warning.base : theme.colors.error.base;
return (
- <div style={{ cursor: 'pointer' }}>
+ <div className={className} style={{ cursor: 'pointer' }}>
<span style={{ color }}>{icon} </span>
{errorType}
</div>
@@ -100,13 +102,13 @@ const ErrorAlert: React.FC<ErrorAlertProps> = ({
)}
</div>
);
-
const renderAlert = (closable: boolean) => (
<Alert
description={renderDescription()}
type={type}
showIcon
closable={closable}
+ className={className}
>
<strong>{errorType}</strong>
{message && (
diff --git a/superset-frontend/src/views/App.tsx
b/superset-frontend/src/views/App.tsx
index 8b4c5e8013..3d1cfc3e57 100644
--- a/superset-frontend/src/views/App.tsx
+++ b/superset-frontend/src/views/App.tsx
@@ -25,6 +25,7 @@ import {
useLocation,
} from 'react-router-dom';
import { bindActionCreators } from 'redux';
+import { css } from '@superset-ui/core';
import { GlobalStyles } from 'src/GlobalStyles';
import ErrorBoundary from 'src/components/ErrorBoundary';
import Loading from 'src/components/Loading';
@@ -83,12 +84,19 @@ const App = () => (
{routes.map(({ path, Component, props = {}, Fallback = Loading }) => (
<Route path={path} key={path}>
<Suspense fallback={<Fallback />}>
- <Layout.Content>
- <div style={{ padding: '16px' }}>
- <ErrorBoundary>
- <Component user={bootstrapData.user} {...props} />
- </ErrorBoundary>
- </div>
+ <Layout.Content
+ css={css`
+ display: flex;
+ flex-direction: column;
+ `}
+ >
+ <ErrorBoundary
+ css={css`
+ margin: 16px;
+ `}
+ >
+ <Component user={bootstrapData.user} {...props} />
+ </ErrorBoundary>
</Layout.Content>
</Suspense>
</Route>
