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.
60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import '@patternfly/react-core/dist/styles/base.css';
|
|
import '@patternfly/patternfly/patternfly-addons.css';
|
|
|
|
import React from 'react';
|
|
|
|
import 'cockpit-dark-theme';
|
|
import { Page, PageSection } from '@patternfly/react-core';
|
|
import NotificationsProvider from '@redhat-cloud-services/frontend-components-notifications/NotificationsProvider';
|
|
import { createRoot } from 'react-dom/client';
|
|
import { Provider } from 'react-redux';
|
|
import { HashRouter } from 'react-router-dom';
|
|
|
|
import './AppCockpit.scss';
|
|
import { NotReady, RequireAdmin } from './Components/Cockpit';
|
|
import { Router } from './Router';
|
|
import { onPremStore as store } from './store';
|
|
import { useGetComposerSocketStatus } from './Utilities/useComposerStatus';
|
|
import { useIsCockpitAdmin } from './Utilities/useIsCockpitAdmin';
|
|
|
|
const Application = () => {
|
|
const { enabled, started } = useGetComposerSocketStatus();
|
|
const isAdmin = useIsCockpitAdmin();
|
|
|
|
if (!started || !enabled) {
|
|
return <NotReady enabled={enabled} />;
|
|
}
|
|
|
|
if (!isAdmin) {
|
|
return <RequireAdmin />;
|
|
}
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<NotificationsProvider>
|
|
<HashRouter>
|
|
<Router />
|
|
</HashRouter>
|
|
</NotificationsProvider>
|
|
</React.Fragment>
|
|
);
|
|
};
|
|
const ImageBuilder = () => (
|
|
<Provider store={store}>
|
|
<Page className="no-masthead-sidebar" isContentFilled>
|
|
<PageSection>
|
|
<Application />
|
|
</PageSection>
|
|
</Page>
|
|
</Provider>
|
|
);
|
|
|
|
const main = async () => {
|
|
const root = document.getElementById('main');
|
|
if (root) {
|
|
const reactRoot = createRoot(root);
|
|
reactRoot.render(<ImageBuilder />);
|
|
}
|
|
};
|
|
|
|
main();
|