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

* fix: Accept Invitation Button duplicates Signed-off-by: JanhaviAlekar <[email protected]> * fix: Delete project Invite Dialog not closing on delete invite Signed-off-by: JanhaviAlekar <[email protected]> * fix: Leave project Dialog not closing on leaving project Signed-off-by: JanhaviAlekar <[email protected]> * fix: handling create user error with toast Signed-off-by: JanhaviAlekar <[email protected]> --------- Signed-off-by: JanhaviAlekar <[email protected]> Signed-off-by: Janhavi Alekar <[email protected]> Co-authored-by: Saranya Jena <[email protected]>
litmuschaos · Jul 22, 2024 · 50c2ef5 · 50c2ef5
1 parent ff21351
commit 50c2ef5
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 12 deletions.
diff --git a/chaoscenter/web/src/controllers/DeleteProjectInvitation/DeleteProjectInvitation.tsx b/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 (

diff --git a/chaoscenter/web/src/controllers/LeaveProject/LeaveProject.tsx b/chaoscenter/web/src/controllers/LeaveProject/LeaveProject.tsx
@@ -23,6 +23,7 @@ export default function LeaveProjectController(props: LeaveProjectControllerProp
       onSuccess: () => {
         projectsJoinedRefetch();
         getUserWithProjectsRefetch();
+        handleClose();
       }
     }
   );

diff --git a/chaoscenter/web/src/views/CreateNewUser/CreateNewUser.tsx b/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({
-      body: {
-        name: values.name,
-        email: values.email,
-        username: values.username,
-        password: values.password,
-        role: 'user'
+    createNewUserMutation(
+      {
+        body: {
+          name: values.name,
+          email: values.email,
+          username: values.username,
+          password: values.password,
+          role: 'user'
+        }
+      },
+      {
+        onSuccess: () => {
+          handleClose();
+        },
+        onError: (err: any) => {
+          showError(err.errorDescription);
+        }
       }
-    });
+    );
   }
 
   return (

diff --git a/chaoscenter/web/src/views/ProjectInvitations/ProjectInvitations.tsx b/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}