Skip to content

Fix toast messages #24505

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bbovenzi merged 5 commits into from
Jun 16, 2022
Merged

Fix toast messages #24505

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e617213
update webpack-cli, eslint, stylelint, babel
bbovenzi Jun 15, 2022
a943503
revert stylelint changes
bbovenzi Jun 16, 2022
ad74f24
update more plugins
bbovenzi Jun 16, 2022
28c06b1
update to webpack 5
bbovenzi Jun 16, 2022
65e86ec
use portalProps to properly style toast msgs
bbovenzi Jun 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions airflow/www/static/js/grid/context/containerRef.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@
*/

import React, { useContext, useRef } from 'react';
import { Box } from '@chakra-ui/react';

const ContainerRefContext = React.createContext(null);

Expand All @@ -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>
);
};
Expand Down
36 changes: 22 additions & 14 deletions airflow/www/static/js/grid/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion airflow/www/static/js/grid/utils/useErrorToast.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
};
};
Expand Down