You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ma...@apache.org on 2025/01/28 03:22:36 UTC
(superset) 01/01: feat: Fix explore dynamic height issues by adding style to ErrorAlertBoundary
This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a commit to branch broke_master
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 31b27e39921af79ce3b6443d25a01a397322a8f6
Author: Maxime Beauchemin (aider) <ma...@gmail.com>
AuthorDate: Mon Jan 27 18:58:38 2025 -0800
feat: Fix explore dynamic height issues by adding style to ErrorAlertBoundary
Recently brought in an intricate issue while trying to style the ErrorBoundary. Somehow was triggering a loop of auto-height-expanding.
Here my solution is to pass a css prop to the boundary, which carries through to the `Alert` component
---
.gitignore | 1 +
.../src/components/ErrorBoundary/index.tsx | 2 +
.../src/components/ErrorMessage/ErrorAlert.tsx | 3 ++
superset-frontend/src/views/App.tsx | 57 ++++++++++++----------
4 files changed, 36 insertions(+), 27 deletions(-)
diff --git a/.gitignore b/.gitignore
index 2652502a02..67bc771f84 100644
--- a/.gitignore
+++ b/.gitignore
@@ -124,3 +124,4 @@ docker/*local*
# Jest test report
test-report.html
superset/static/stats/statistics.html
+.aider*
diff --git a/superset-frontend/src/components/ErrorBoundary/index.tsx b/superset-frontend/src/components/ErrorBoundary/index.tsx
index 2fec6a6767..2cf95f176e 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;
+ style?: React.CSSProperties;
}
interface ErrorBoundaryState {
@@ -59,6 +60,7 @@ export default class ErrorBoundary extends Component<
errorType={t('Unexpected error')}
message={firstLine}
descriptionDetails={info?.componentStack}
+ style={this.props.style}
/>
);
}
diff --git a/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx b/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx
index 50f21bf0fd..0d02694b9b 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
+ style?: React.CSSProperties;
}
const ErrorAlert: React.FC<ErrorAlertProps> = ({
@@ -49,6 +50,7 @@ const ErrorAlert: React.FC<ErrorAlertProps> = ({
children,
closable = true,
showIcon = true,
+ style,
}) => {
const [isDescriptionVisible, setIsDescriptionVisible] = useState(
!descriptionDetailsCollapsed,
@@ -107,6 +109,7 @@ const ErrorAlert: React.FC<ErrorAlertProps> = ({
type={type}
showIcon
closable={closable}
+ style={style}
>
<strong>{errorType}</strong>
{message && (
diff --git a/superset-frontend/src/views/App.tsx b/superset-frontend/src/views/App.tsx
index 8b4c5e8013..c20b4e2683 100644
--- a/superset-frontend/src/views/App.tsx
+++ b/superset-frontend/src/views/App.tsx
@@ -29,6 +29,7 @@ import { GlobalStyles } from 'src/GlobalStyles';
import ErrorBoundary from 'src/components/ErrorBoundary';
import Loading from 'src/components/Loading';
import { Layout } from 'src/components';
+import { useTheme } from '@superset-ui/core';
import Menu from 'src/features/home/Menu';
import getBootstrapData from 'src/utils/getBootstrapData';
import ToastContainer from 'src/components/MessageToasts/ToastContainer';
@@ -69,34 +70,36 @@ const LocationPathnameLogger = () => {
return <></>;
};
-const App = () => (
- <Router>
- <ScrollToTop />
- <LocationPathnameLogger />
- <RootContextProviders>
- <GlobalStyles />
- <Menu
- data={bootstrapData.common.menu_data}
- isFrontendRoute={isFrontendRoute}
- />
- <Switch>
- {routes.map(({ path, Component, props = {}, Fallback = Loading }) => (
- <Route path={path} key={path}>
- <Suspense fallback={<Fallback />}>
- <Layout.Content>
- <div style={{ padding: '16px' }}>
- <ErrorBoundary>
+const App = () => {
+ const theme = useTheme();
+
+ return (
+ <Router>
+ <ScrollToTop />
+ <LocationPathnameLogger />
+ <RootContextProviders>
+ <GlobalStyles />
+ <Menu
+ data={bootstrapData.common.menu_data}
+ isFrontendRoute={isFrontendRoute}
+ />
+ <Switch>
+ {routes.map(({ path, Component, props = {}, Fallback = Loading }) => (
+ <Route path={path} key={path}>
+ <Suspense fallback={<Fallback />}>
+ <Layout.Content>
+ <ErrorBoundary style={{ margin: theme.sizeUnit * 4 }}>
<Component user={bootstrapData.user} {...props} />
</ErrorBoundary>
- </div>
- </Layout.Content>
- </Suspense>
- </Route>
- ))}
- </Switch>
- <ToastContainer />
- </RootContextProviders>
- </Router>
-);
+ </Layout.Content>
+ </Suspense>
+ </Route>
+ ))}
+ </Switch>
+ <ToastContainer />
+ </RootContextProviders>
+ </Router>
+ );
+};
export default hot(App);