e8d46dd716
The frontend component library decoupled notifications from redux.
Dispatching notifications via the notifications middleware was replaced
by a new `useAddNotifications` hook.
We mostly used the notifications middleware outside of React Components
in our `enhancedImageBuilderApi` store for mutation events. I created a
wrapper around the RTK hooks that uses the `useAddNotification` hook
and created a directory for the new hooks.
In other places, where we were using the notification dispatcher inside
React components, I replaced the call with the new hook.
[1] b1d4973144/packages/notifications/doc/migration.md
bump @redhat-cloud-services/frontend-components-notifications
---
updated-dependencies:
- dependency-name: "@redhat-cloud-services/frontend-components-notifications"
dependency-version: 6.0.2
dependency-type: direct:production
update-type: version-update:semver-major
...
Co-authored-by: dependabot[bot] <support@github.com>
Assisted-by: cursor ide for generalizing the `useMutationWithNotification`
hook.
36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
|
|
import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
|
|
import NotificationsProvider from '@redhat-cloud-services/frontend-components-notifications/NotificationsProvider';
|
|
import '@patternfly/patternfly/patternfly-addons.css';
|
|
|
|
import { Router } from './Router';
|
|
|
|
const App = () => {
|
|
const { hideGlobalFilter, updateDocumentTitle } = useChrome();
|
|
|
|
useEffect(() => {
|
|
updateDocumentTitle('Images');
|
|
hideGlobalFilter(true);
|
|
}, [hideGlobalFilter, updateDocumentTitle]);
|
|
|
|
// Necessary for in-page wizard overflow to behave properly
|
|
// The .chr-render class is defined in Insights Chrome:
|
|
// https://github.com/RedHatInsights/insights-chrome/blob/fe573705020ff64003ac9e6101aa978b471fe6f2/src/sass/chrome.scss#L82
|
|
useEffect(() => {
|
|
const chrRenderDiv = document.querySelector('.chr-render');
|
|
if (chrRenderDiv) {
|
|
(chrRenderDiv as HTMLElement).style.overflow = 'auto';
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<NotificationsProvider>
|
|
<Router />
|
|
</NotificationsProvider>
|
|
</React.Fragment>
|
|
);
|
|
};
|
|
|
|
export default App;
|