fix(tech user): error message and close notification bar (#1069)

CHANGELOG.md

@@ -7,6 +7,12 @@
 - Customer Detail Data Overlay
   - implement new UI design for customer detail data overlay
 
+### BugFix
+
+- Technical User
+  - Show appropriate error message.
+  - Fix closing page notification bar issue
+
 ### Change
 
 - **Technical User Management**

src/components/overlays/DeleteTechnicalUser/index.tsx

@@ -55,13 +55,14 @@ export const DeleteTechnicalUser = ({ id }: { id: string }) => {
     navigate(`/${PAGES.TECH_USER_MANAGEMENT}`)
   }
 
-  const deleteUserError = (err: unknown) => {
+  // eslint-disable-next-line
+  const deleteUserError = (err: any) => {
     const notification: PageNotificationsProps = {
       open: true,
       severity: SuccessErrorType.ERROR,
       title:
         'content.usermanagement.technicalUser.deleteTechUserNotificationErrorTitle',
-      description: err as string,
+      description: err.data.details[0].message,
     }
     dispatch(closeOverlay())
     dispatch(setNotification(notification))
@@ -71,11 +72,16 @@ export const DeleteTechnicalUser = ({ id }: { id: string }) => {
   const handleRemove = async () => {
     if (!data) return
     try {
-      await removeServiceAccount(data.serviceAccountId).unwrap()
-      deleteUserSuccess()
+      await removeServiceAccount(data.serviceAccountId)
+        .unwrap()
+        .then(() => {
+          deleteUserSuccess()
+        })
+        .catch((err) => {
+          deleteUserError(err)
+        })
     } catch (err: unknown) {
       deleteUserError(err)
-      console.log(err)
     }
   }
   return data ? (

src/components/pages/TechnicalUserManagement/index.tsx

@@ -25,21 +25,24 @@ import SubHeaderTitle from 'components/shared/frame/SubHeaderTitle'
 import { Button, PageNotifications } from '@catena-x/portal-shared-components'
 import { show } from 'features/control/overlay'
 import UserService from 'services/UserService'
-import { resetNotification } from 'features/notification/actions'
-import { notificationSelector } from 'features/notification/slice'
+import {
+  notificationSelector,
+  setNotification,
+} from 'features/notification/slice'
 import { useTranslation } from 'react-i18next'
 import { useSelector, useDispatch } from 'react-redux'
 import './style.scss'
 import { TechnicalUserTable } from './TechnicalUserTable'
 import { getAssetBase } from 'services/EnvironmentService'
+import { initServicetNotifications } from 'types/MainTypes'
 
 export default function TechnicalUserManagement() {
   const { t } = useTranslation()
   const notification = useSelector(notificationSelector)
   const dispatch = useDispatch()
 
   const handleCloseNotification = () => {
-    dispatch(resetNotification())
+    dispatch(setNotification(initServicetNotifications))
   }
 
   return (
@@ -79,7 +82,7 @@ export default function TechnicalUserManagement() {
         </div>
 
         <div style={{ paddingTop: '70px' }}>
-          {notification.title && notification.description && (
+          {notification?.title && notification?.description && (
             <PageNotifications
               open={notification.open}
               severity={notification.severity}