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) <[email protected]> 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);
