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.
69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
import React, { lazy, Suspense } from 'react';
|
|
|
|
import { Route, Routes } from 'react-router-dom';
|
|
|
|
import EdgeImageDetail from './Components/edge/ImageDetails';
|
|
import ShareImageModal from './Components/ShareImageModal/ShareImageModal';
|
|
import { manageEdgeImagesUrlName } from './Hooks/Edge/useGetNotificationProp';
|
|
import {
|
|
useFlag,
|
|
useFlagWithEphemDefault,
|
|
} from './Utilities/useGetEnvironment';
|
|
|
|
const LandingPage = lazy(() => import('./Components/LandingPage/LandingPage'));
|
|
const ImportImageWizard = lazy(
|
|
() => import('./Components/CreateImageWizard/ImportImageWizard')
|
|
);
|
|
const CreateImageWizard = lazy(() => import('./Components/CreateImageWizard'));
|
|
|
|
export const Router = () => {
|
|
const edgeParityFlag = useFlag('edgeParity.image-list');
|
|
const importExportFlag = useFlagWithEphemDefault(
|
|
'image-builder.import.enabled'
|
|
);
|
|
return (
|
|
<Routes>
|
|
<Route
|
|
path="*"
|
|
element={
|
|
<Suspense>
|
|
<LandingPage />
|
|
</Suspense>
|
|
}
|
|
>
|
|
<Route path="share/:composeId" element={<ShareImageModal />} />
|
|
</Route>
|
|
|
|
{importExportFlag && (
|
|
<Route
|
|
path="imagewizard/import"
|
|
element={
|
|
<Suspense>
|
|
<ImportImageWizard />
|
|
</Suspense>
|
|
}
|
|
/>
|
|
)}
|
|
<Route
|
|
path="imagewizard/:composeId?"
|
|
element={
|
|
<Suspense>
|
|
<CreateImageWizard />
|
|
</Suspense>
|
|
}
|
|
/>
|
|
{edgeParityFlag && (
|
|
<Route
|
|
path={`/${manageEdgeImagesUrlName}/:imageId`}
|
|
element={<EdgeImageDetail />}
|
|
>
|
|
<Route path="*" element={<EdgeImageDetail />} />
|
|
<Route
|
|
path={`versions/:imageVersionId/*`}
|
|
element={<EdgeImageDetail />}
|
|
/>
|
|
</Route>
|
|
)}
|
|
</Routes>
|
|
);
|
|
};
|