deps: migrate fec/notifications

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.

src/Components/CreateImageWizard/steps/Registration/components/ActivationKeysList.tsx

@@ -13,7 +13,7 @@ import {
   TextInputGroup,
   TextInputGroupMain,
 } from '@patternfly/react-core';
-import { addNotification } from '@redhat-cloud-services/frontend-components-notifications/redux';
+import { useAddNotification } from '@redhat-cloud-services/frontend-components-notifications/hooks';
 
 import ManageKeysButton from './ManageKeysButton';
 import PopoverActivation from './PopoverActivation';
@@ -37,6 +37,7 @@ import { generateRandomId } from '../../../utilities/generateRandomId';
 
 const ActivationKeysList = () => {
   const dispatch = useAppDispatch();
+  const addNotification = useAddNotification();
 
   const activationKey = useAppSelector(selectActivationKey);
   const registrationType = useAppSelector(selectRegistrationType);
@@ -138,13 +139,11 @@ const ActivationKeysList = () => {
         );
         dispatch(changeActivationKey(defaultActivationKeyName));
       } catch (error) {
-        dispatch(
-          addNotification({
-            variant: 'danger',
-            title: 'Error creating activation key',
-            description: error?.data?.error?.message,
-          })
-        );
+        addNotification({
+          variant: 'danger',
+          title: 'Error creating activation key',
+          description: error?.data?.error?.message,
+        });
       }
     };
 

src/Components/CreateImageWizard/steps/Review/Footer/CreateDropdown.tsx

@@ -14,12 +14,15 @@ import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
 import { ChromeUser } from '@redhat-cloud-services/types';
 
 import { AMPLITUDE_MODULE_NAME } from '../../../../../constants';
-import { useCreateBlueprintMutation } from '../../../../../store/backendApi';
+import {
+  useComposeBPWithNotification as useComposeBlueprintMutation,
+  useCreateBPWithNotification as useCreateBlueprintMutation,
+} from '../../../../../Hooks';
 import { setBlueprintId } from '../../../../../store/BlueprintSlice';
 import { useAppDispatch, useAppSelector } from '../../../../../store/hooks';
 import {
   CreateBlueprintRequest,
-  useComposeBlueprintMutation,
+  CreateBlueprintResponse,
 } from '../../../../../store/imageBuilderApi';
 import { selectPackages } from '../../../../../store/wizardSlice';
 import { createAnalytics } from '../../../../../Utilities/analytics';
@@ -46,8 +49,8 @@ export const CreateSaveAndBuildBtn = ({
   }, [auth]);
   const packages = useAppSelector(selectPackages);
 
-  const [buildBlueprint] = useComposeBlueprintMutation();
-  const [createBlueprint] = useCreateBlueprintMutation({
+  const { trigger: buildBlueprint } = useComposeBlueprintMutation();
+  const { trigger: createBlueprint } = useCreateBlueprintMutation({
     fixedCacheKey: 'createBlueprintKey',
   });
   const dispatch = useAppDispatch();
@@ -70,13 +73,11 @@ export const CreateSaveAndBuildBtn = ({
         ),
       });
     }
-    const blueprint =
-      requestBody &&
-      (await createBlueprint({
+    if (requestBody) {
+      const blueprint = (await createBlueprint({
         createBlueprintRequest: requestBody,
-      }).unwrap()); // unwrap - access the success payload immediately after a mutation
+      })) as CreateBlueprintResponse;
 
-    if (blueprint) {
       buildBlueprint({ id: blueprint.id, body: {} });
       dispatch(setBlueprintId(blueprint.id));
     }
@@ -107,7 +108,7 @@ export const CreateSaveButton = ({
   }, [auth]);
   const packages = useAppSelector(selectPackages);
 
-  const [createBlueprint, { isLoading }] = useCreateBlueprintMutation({
+  const { trigger: createBlueprint, isLoading } = useCreateBlueprintMutation({
     fixedCacheKey: 'createBlueprintKey',
   });
   const dispatch = useAppDispatch();
@@ -166,15 +167,11 @@ export const CreateSaveButton = ({
         account_id: userData?.identity.internal?.account_id || 'Not found',
       });
     }
-
-    const blueprint =
-      requestBody &&
-      (await createBlueprint({
+    if (requestBody) {
+      const blueprint = (await createBlueprint({
         createBlueprintRequest: requestBody,
-      }).unwrap());
-
-    if (blueprint) {
-      dispatch(setBlueprintId(blueprint?.id));
+      })) as CreateBlueprintResponse;
+      dispatch(setBlueprintId(blueprint.id));
     }
   };
 

src/Components/CreateImageWizard/steps/Review/Footer/EditDropdown.tsx

@@ -12,12 +12,12 @@ import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
 import { ChromeUser } from '@redhat-cloud-services/types';
 
 import { AMPLITUDE_MODULE_NAME } from '../../../../../constants';
-import { useUpdateBlueprintMutation } from '../../../../../store/backendApi';
-import { useAppSelector } from '../../../../../store/hooks';
 import {
-  CreateBlueprintRequest,
-  useComposeBlueprintMutation,
-} from '../../../../../store/imageBuilderApi';
+  useComposeBPWithNotification as useComposeBlueprintMutation,
+  useUpdateBPWithNotification as useUpdateBlueprintMutation,
+} from '../../../../../Hooks';
+import { useAppSelector } from '../../../../../store/hooks';
+import { CreateBlueprintRequest } from '../../../../../store/imageBuilderApi';
 import { selectPackages } from '../../../../../store/wizardSlice';
 import { createAnalytics } from '../../../../../Utilities/analytics';
 
@@ -43,10 +43,10 @@ export const EditSaveAndBuildBtn = ({
       setUserData(data);
     })();
   }, [auth]);
-  const [buildBlueprint] = useComposeBlueprintMutation();
+  const { trigger: buildBlueprint } = useComposeBlueprintMutation();
   const packages = useAppSelector(selectPackages);
 
-  const [updateBlueprint] = useUpdateBlueprintMutation({
+  const { trigger: updateBlueprint } = useUpdateBlueprintMutation({
     fixedCacheKey: 'updateBlueprintKey',
   });
 
@@ -104,7 +104,7 @@ export const EditSaveButton = ({
   }, [auth]);
   const packages = useAppSelector(selectPackages);
 
-  const [updateBlueprint, { isLoading }] = useUpdateBlueprintMutation({
+  const { trigger: updateBlueprint, isLoading } = useUpdateBlueprintMutation({
     fixedCacheKey: 'updateBlueprintKey',
   });
   const onSave = async () => {

src/Components/CreateImageWizard/steps/Review/Footer/Footer.tsx

@@ -17,20 +17,20 @@ import { CreateSaveAndBuildBtn, CreateSaveButton } from './CreateDropdown';
 import { EditSaveAndBuildBtn, EditSaveButton } from './EditDropdown';
 
 import {
-  useCreateBlueprintMutation,
-  useUpdateBlueprintMutation,
-} from '../../../../../store/backendApi';
+  useCreateBPWithNotification as useCreateBlueprintMutation,
+  useUpdateBPWithNotification as useUpdateBlueprintMutation,
+} from '../../../../../Hooks';
 import { resolveRelPath } from '../../../../../Utilities/path';
 import { mapRequestFromState } from '../../../utilities/requestMapper';
 import { useIsBlueprintValid } from '../../../utilities/useValidation';
 
 const ReviewWizardFooter = () => {
   const { goToPrevStep, close } = useWizardContext();
-  const [, { isSuccess: isCreateSuccess, reset: resetCreate }] =
+  const { isSuccess: isCreateSuccess, reset: resetCreate } =
     useCreateBlueprintMutation({ fixedCacheKey: 'createBlueprintKey' });
 
   // initialize the server store with the data from RTK query
-  const [, { isSuccess: isUpdateSuccess, reset: resetUpdate }] =
+  const { isSuccess: isUpdateSuccess, reset: resetUpdate } =
     useUpdateBlueprintMutation({ fixedCacheKey: 'updateBlueprintKey' });
   const { auth } = useChrome();
   const { composeId } = useParams();