You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by ep...@apache.org on 2022/06/29 15:20:22 UTC
[airflow] 37/45: Fix toast messages (#24505)
This is an automated email from the ASF dual-hosted git repository.
ephraimanierobi pushed a commit to branch v2-3-test
in repository https://gitbox.apache.org/repos/asf/airflow.git
commit 894f15c26f769510fbdfec2b93f44753596b66e4
Author: Brent Bovenzi <br...@gmail.com>
AuthorDate: Thu Jun 16 16:36:21 2022 -0400
Fix toast messages (#24505)
* update webpack-cli, eslint, stylelint, babel
* revert stylelint changes
* update more plugins
* update to webpack 5
* use portalProps to properly style toast msgs
(cherry picked from commit c74946275e3488f3e553e156e8294cddae6b5db7)
---
.../www/static/js/grid/context/containerRef.jsx | 5 ++-
airflow/www/static/js/grid/index.jsx | 36 +++++++++++++---------
airflow/www/static/js/grid/utils/useErrorToast.js | 2 +-
3 files changed, 25 insertions(+), 18 deletions(-)
diff --git a/airflow/www/static/js/grid/context/containerRef.jsx b/airflow/www/static/js/grid/context/containerRef.jsx
index 4ef3352122..9062f907ed 100644
--- a/airflow/www/static/js/grid/context/containerRef.jsx
+++ b/airflow/www/static/js/grid/context/containerRef.jsx
@@ -18,7 +18,6 @@
*/
import React, { useContext, useRef } from 'react';
-import { Box } from '@chakra-ui/react';
const ContainerRefContext = React.createContext(null);
@@ -29,9 +28,9 @@ export const ContainerRefProvider = ({ children }) => {
return (
<ContainerRefContext.Provider value={containerRef}>
- <Box position="relative" ref={containerRef}>
+ <div ref={containerRef}>
{children}
- </Box>
+ </div>
</ContainerRefContext.Provider>
);
};
diff --git a/airflow/www/static/js/grid/index.jsx b/airflow/www/static/js/grid/index.jsx
index 6a7e129a3d..549c0b7b29 100644
--- a/airflow/www/static/js/grid/index.jsx
+++ b/airflow/www/static/js/grid/index.jsx
@@ -29,7 +29,7 @@ import { QueryClient, QueryClientProvider } from 'react-query';
import Main from './Main';
import theme from './theme';
-import { ContainerRefProvider } from './context/containerRef';
+import { ContainerRefProvider, useContainerRef } from './context/containerRef';
import { TimezoneProvider } from './context/timezone';
import { AutoRefreshProvider } from './context/autorefresh';
@@ -61,23 +61,31 @@ const queryClient = new QueryClient({
},
});
+// Chakra needs to access the containerRef provider so our tooltips pick up the correct styles
+const ChakraApp = () => {
+ const containerRef = useContainerRef();
+ return (
+ <ChakraProvider theme={theme} toastOptions={{ portalProps: { containerRef } }}>
+ <QueryClientProvider client={queryClient}>
+ <TimezoneProvider>
+ <AutoRefreshProvider>
+ <BrowserRouter>
+ <Main />
+ </BrowserRouter>
+ </AutoRefreshProvider>
+ </TimezoneProvider>
+ </QueryClientProvider>
+ </ChakraProvider>
+ );
+};
+
function App() {
return (
<React.StrictMode>
<CacheProvider value={myCache}>
- <ChakraProvider theme={theme}>
- <ContainerRefProvider>
- <QueryClientProvider client={queryClient}>
- <TimezoneProvider>
- <AutoRefreshProvider>
- <BrowserRouter>
- <Main />
- </BrowserRouter>
- </AutoRefreshProvider>
- </TimezoneProvider>
- </QueryClientProvider>
- </ContainerRefProvider>
- </ChakraProvider>
+ <ContainerRefProvider>
+ <ChakraApp />
+ </ContainerRefProvider>
</CacheProvider>
</React.StrictMode>
);
diff --git a/airflow/www/static/js/grid/utils/useErrorToast.js b/airflow/www/static/js/grid/utils/useErrorToast.js
index 842eb53810..c4107bc91f 100644
--- a/airflow/www/static/js/grid/utils/useErrorToast.js
+++ b/airflow/www/static/js/grid/utils/useErrorToast.js
@@ -35,10 +35,10 @@ const useErrorToast = () => {
// Add an error prop and handle it as a description
return ({ error, ...rest }) => {
toast({
+ ...rest,
status: 'error',
title: getErrorTitle(error),
description: getErrorDescription(error).slice(0, 500),
- ...rest,
});
};
};