feat(HMS-2997): wizard notifications

Added notifications for cancealling and finishing a wizard. The notification for cancel is a bit different then drafted in HMS-2997 as the cancellation process is removing the registered domain so in most cases it should end with the same result. Signed-off-by: Petr Vobornik <[email protected]>
podengo-project · May 3, 2024 · 84cc4d0 · 84cc4d0
1 parent 2de9be3
commit 84cc4d0
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 8 deletions.
diff --git a/src/Hooks/useNotification.tsx b/src/Hooks/useNotification.tsx
@@ -1,5 +1,5 @@
 import { AlertVariant } from '@patternfly/react-core';
-import { addNotification } from '@redhat-cloud-services/frontend-components-notifications/redux';
+import { addNotification, removeNotification } from '@redhat-cloud-services/frontend-components-notifications/redux';
 import React from 'react';
 import { useDispatch } from 'react-redux';
 
@@ -21,5 +21,7 @@ export default function useNotification() {
 
   const notifyWarning = (payload: NotificationPayload) => notify({ variant: AlertVariant.warning, ...payload });
 
-  return { notify, notifyError, notifySuccess, notifyWarning };
+  const remove = (id: string | number) => dispatch(removeNotification(id));
+
+  return { notify, notifyError, notifySuccess, notifyWarning, removeNotification: remove };
 }
diff --git a/src/Routes/WizardPage/WizardPage.tsx b/src/Routes/WizardPage/WizardPage.tsx
@@ -23,10 +23,11 @@ import {
 import { PageHeader, PageHeaderTitle } from '@redhat-cloud-services/frontend-components/PageHeader';
 
 import './WizardPage.scss';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { Domain, ResourcesApiFactory } from '../../Api/api';
 import { AppContext } from '../../AppContext';
 import { VerifyState } from './Components/VerifyRegistry/VerifyRegistry';
+import useNotification from '../../Hooks/useNotification';
 
 // Lazy load for the wizard pages
 const PagePreparation = React.lazy(() => import('./Components/PagePreparation/PagePreparation'));
@@ -47,12 +48,61 @@ const WizardPage = () => {
   const appContext = useContext(AppContext);
   const domain = appContext?.wizard.domain;
   const navigate = useNavigate();
+  const { notifySuccess, notifyWarning, notifyError, removeNotification } = useNotification();
   const [isCancelConfirmationModalOpen, SetIsCancelConfirmationModalOpen] = useState<boolean>(false);
 
   // FIXME Update the URL with the location for docs
   const linkLearnMoreAbout = 'https://access.redhat.com/articles/1586893';
   const linkLearnMoreAboutRemovingDirectoryAndDomainServices = 'https://access.redhat.com/articles/1586893';
 
+  const notifyNotCompleted = () => {
+    const notificationID = 'domain-registration-cancelled-notification';
+    notifyError({
+      id: notificationID,
+      title: 'Identity domain registration could not be completed',
+      description: (
+        <>
+          <p>You will need to re-launch the &quot;Register identity domain&quot; wizard.</p>
+          <p>
+            <Link to="/domains/wizard" onClick={() => removeNotification(notificationID)}>
+              Relaunch the wizard
+            </Link>
+          </p>
+        </>
+      ),
+    });
+  };
+
+  const notifyDomainRegistrationSuccess = () => {
+    if (!domain) return;
+
+    if (domain.auto_enrollment_enabled) {
+      notifySuccess({
+        title: 'Identity domain registration created and enabled',
+      });
+    } else {
+      notifyWarning({
+        title: 'Identity domain registration created but not enabled',
+        description: (
+          <>
+            <p>You can enable &quot;Domain auto-join on launch&quot; in the registry list.</p>
+          </>
+        ),
+      });
+    }
+  };
+
+  const notifyDomainRegistrationError = () => {
+    notifyError({
+      title: 'Issue occurred when finishing the domain registration',
+      description: (
+        <>
+          <p>Check domain in the registry list.</p>
+        </>
+      ),
+    });
+  };
+
   /** Event triggered when we do click on continue button at cancel confirmation modal */
   const onConfirmCancelWizardContinueButtonClick = () => {
     SetIsCancelConfirmationModalOpen(false);
@@ -70,17 +120,19 @@ const WizardPage = () => {
         .then((result) => {
           if (result.status === 204 || result.status === 404) {
             dismissCancelConfirmationAndGoToDefaultView();
+            notifyNotCompleted();
           } else {
-            // TODO add error notification
             dismissCancelConfirmationAndGoToDefaultView();
+            notifyNotCompleted();
           }
         })
         .catch(() => {
-          // TODO add error notification
           dismissCancelConfirmationAndGoToDefaultView();
+          notifyNotCompleted();
         });
     } else {
       dismissCancelConfirmationAndGoToDefaultView();
+      notifyNotCompleted();
     }
   };
 
@@ -97,15 +149,18 @@ const WizardPage = () => {
         })
         .then((response) => {
           if (response.status >= 400) {
-            // TODO Notify error
+            notifyDomainRegistrationError();
+          } else {
+            notifyDomainRegistrationSuccess();
           }
           navigate('/domains');
         })
-        .catch((error) => {
-          // TODO Notify error
+        .catch(() => {
+          notifyDomainRegistrationError();
           navigate('/domains');
         });
     } else {
+      notifyDomainRegistrationError();
       navigate('/domains');
     }
   };