Fixes #4673 Improvements in user management screen (#4674)

* fix: Accept Invitation Button duplicates

Signed-off-by: JanhaviAlekar <janhavialekar@gmail.com>

* fix: Delete project Invite Dialog not closing on delete invite

Signed-off-by: JanhaviAlekar <janhavialekar@gmail.com>

* fix: Leave project Dialog not closing on leaving project

Signed-off-by: JanhaviAlekar <janhavialekar@gmail.com>

* fix: handling create user error with toast

Signed-off-by: JanhaviAlekar <janhavialekar@gmail.com>

---------

Signed-off-by: JanhaviAlekar <janhavialekar@gmail.com>
Signed-off-by: Janhavi Alekar <97527096+JanhaviAlekar@users.noreply.github.com>
Co-authored-by: Saranya Jena <saranya.jena@harness.io>

chaoscenter/web/src/controllers/DeleteProjectInvitation/DeleteProjectInvitation.tsx

@@ -17,7 +17,12 @@ export default function DeleteProjectInvitationController(
   const { handleClose, listInvitationsRefetch, projectID } = props;
   const { mutate: declineInvitationMutation } = useDeclineInvitationMutation(
     {},
-    { onSuccess: () => listInvitationsRefetch() }
+    {
+      onSuccess: () => {
+        listInvitationsRefetch();
+        handleClose();
+      }
+    }
   );
 
   return (

chaoscenter/web/src/controllers/LeaveProject/LeaveProject.tsx

@@ -23,6 +23,7 @@ export default function LeaveProjectController(props: LeaveProjectControllerProp
       onSuccess: () => {
         projectsJoinedRefetch();
         getUserWithProjectsRefetch();
+        handleClose();
       }
     }
   );

chaoscenter/web/src/views/CreateNewUser/CreateNewUser.tsx

@@ -1,7 +1,7 @@
 import type { UseMutateFunction } from '@tanstack/react-query';
 import React from 'react';
 import { FontVariation } from '@harnessio/design-system';
-import { Layout, Container, FormInput, ButtonVariation, Text, Button } from '@harnessio/uicore';
+import { Layout, Container, FormInput, ButtonVariation, Text, Button, useToaster } from '@harnessio/uicore';
 import { Formik, Form } from 'formik';
 import { Icon } from '@harnessio/icons';
 import * as Yup from 'yup';
@@ -28,17 +28,28 @@ interface CreateNewUserFormProps {
 export default function CreateNewUserView(props: CreateNewUserViewProps): React.ReactElement {
   const { createNewUserMutation, createNewUserMutationLoading, handleClose } = props;
   const { getString } = useStrings();
+  const { showError } = useToaster();
 
   function handleSubmit(values: CreateNewUserFormProps): void {
-    createNewUserMutation({
+    createNewUserMutation(
-      body: {
+      {
-        name: values.name,
+        body: {
-        email: values.email,
+          name: values.name,
-        username: values.username,
+          email: values.email,
-        password: values.password,
+          username: values.username,
-        role: 'user'
+          password: values.password,
+          role: 'user'
+        }
+      },
+      {
+        onSuccess: () => {
+          handleClose();
+        },
+        onError: (err: any) => {
+          showError(err.errorDescription);
+        }
       }
-    });
+    );
   }
 
   return (

chaoscenter/web/src/views/ProjectInvitations/ProjectInvitations.tsx

@@ -100,7 +100,7 @@ function MemoizedInvitationsTable(props: InvitationsTableProps): React.ReactElem
           return (
             <Layout.Horizontal flex={{ alignItems: 'center', justifyContent: 'flex-start' }} style={{ gap: '0.25rem' }}>
               <Button
-                key={data.projectID}
+                key={`${data.projectID}-accept`}
                 variation={ButtonVariation.PRIMARY}
                 text={getString('acceptInvitation')}
                 onClick={() =>
@@ -122,7 +122,7 @@ function MemoizedInvitationsTable(props: InvitationsTableProps): React.ReactElem
                 }
               />
               <Button
-                key={data.projectID}
+                key={`${data.projectID}-decline`}
                 icon="main-trash"
                 iconProps={{ size: 18, color: Color.RED_300 }}
                 variation={ButtonVariation.ICON}