From 0c5a34e1fd680cafd6c9a6e418b2666438984131 Mon Sep 17 00:00:00 2001
From: Aryan <aryan1bhokare@gmail.com>
Date: Mon, 19 Feb 2024 17:28:25 +0530
Subject: [PATCH 1/4] Added loader in UserManagement modal.

Signed-off-by: Aryan <aryan1bhokare@gmail.com>
---
 .../AccountDetailsChange.tsx                  |  4 +-
 .../AccountPasswordChange.tsx                 |  4 +-
 .../views/CreateNewToken/CreateNewToken.tsx   |  4 +-
 .../src/views/CreateNewUser/CreateNewUser.tsx |  4 +-
 .../views/DeleteApiToken/DeleteApiToken.tsx   |  7 +++-
 .../EnableDisableUser/EnableDisableUser.tsx   | 39 ++++++++++++-------
 .../src/views/ResetPassword/ResetPassword.tsx | 17 +++++---
 7 files changed, 53 insertions(+), 26 deletions(-)

diff --git a/chaoscenter/web/src/views/AccountDetailsChange/AccountDetailsChange.tsx b/chaoscenter/web/src/views/AccountDetailsChange/AccountDetailsChange.tsx
index e06be22860d..2696e979134 100644
--- a/chaoscenter/web/src/views/AccountDetailsChange/AccountDetailsChange.tsx
+++ b/chaoscenter/web/src/views/AccountDetailsChange/AccountDetailsChange.tsx
@@ -1,5 +1,5 @@
 import { FontVariation } from '@harnessio/design-system';
-import { Button, ButtonVariation, Container, FormInput, Layout, Text } from '@harnessio/uicore';
+import { Button, ButtonVariation, Container, FormInput, Layout, OverlaySpinner, Text } from '@harnessio/uicore';
 import React from 'react';
 import { Icon } from '@harnessio/icons';
 import { Form, Formik } from 'formik';
@@ -54,6 +54,7 @@ export default function AccountDetailsChangeView(props: AccountDetailsChangeView
   }
 
   return (
+    <OverlaySpinner show={updateDetailsMutationLoading}>
     <Layout.Vertical padding="medium" style={{ gap: '1rem' }}>
       <Layout.Horizontal flex={{ alignItems: 'center', justifyContent: 'space-between' }}>
         <Text font={{ variation: FontVariation.H4 }}>{getString('editName')}</Text>
@@ -111,5 +112,6 @@ export default function AccountDetailsChangeView(props: AccountDetailsChangeView
         </Formik>
       </Container>
     </Layout.Vertical>
+    </OverlaySpinner>
   );
 }
diff --git a/chaoscenter/web/src/views/AccountPasswordChange/AccountPasswordChange.tsx b/chaoscenter/web/src/views/AccountPasswordChange/AccountPasswordChange.tsx
index 577dea0f1f2..5b05ad7c5dc 100644
--- a/chaoscenter/web/src/views/AccountPasswordChange/AccountPasswordChange.tsx
+++ b/chaoscenter/web/src/views/AccountPasswordChange/AccountPasswordChange.tsx
@@ -1,5 +1,5 @@
 import { FontVariation } from '@harnessio/design-system';
-import { Button, ButtonVariation, Container, FormInput, Layout, Text, useToaster } from '@harnessio/uicore';
+import { Button, ButtonVariation, Container, FormInput, Layout, OverlaySpinner, Text, useToaster } from '@harnessio/uicore';
 import React from 'react';
 import { Icon } from '@harnessio/icons';
 import { Form, Formik } from 'formik';
@@ -64,6 +64,7 @@ export default function AccountPasswordChangeView(props: AccountPasswordChangeVi
   }
 
   return (
+    <OverlaySpinner show={updatePasswordMutationLoading}>
     <Layout.Vertical padding="medium" style={{ gap: '1rem' }}>
       <Layout.Horizontal flex={{ alignItems: 'center', justifyContent: 'space-between' }}>
         <Text font={{ variation: FontVariation.H4 }}>{getString('updatePassword')}</Text>
@@ -130,5 +131,6 @@ export default function AccountPasswordChangeView(props: AccountPasswordChangeVi
         </Formik>
       </Container>
     </Layout.Vertical>
+    </OverlaySpinner>
   );
 }
diff --git a/chaoscenter/web/src/views/CreateNewToken/CreateNewToken.tsx b/chaoscenter/web/src/views/CreateNewToken/CreateNewToken.tsx
index bd1ed33bbbf..aa34120f6bb 100644
--- a/chaoscenter/web/src/views/CreateNewToken/CreateNewToken.tsx
+++ b/chaoscenter/web/src/views/CreateNewToken/CreateNewToken.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, OverlaySpinner } from '@harnessio/uicore';
 import { Formik, Form } from 'formik';
 import { Icon } from '@harnessio/icons';
 import * as Yup from 'yup';
@@ -48,6 +48,7 @@ export default function CreateNewTokenView(props: CreateNewTokenViewProps): Reac
   }
 
   return (
+    <OverlaySpinner show={createNewTokenMutationLoading}>
     <Layout.Vertical padding="medium" style={{ gap: '1rem' }}>
       <Layout.Horizontal flex={{ alignItems: 'center', justifyContent: 'space-between' }}>
         <Text font={{ variation: FontVariation.H4 }}>{getString('createNewToken')}</Text>
@@ -109,5 +110,6 @@ export default function CreateNewTokenView(props: CreateNewTokenViewProps): Reac
         </Formik>
       </Container>
     </Layout.Vertical>
+    </OverlaySpinner>
   );
 }
diff --git a/chaoscenter/web/src/views/CreateNewUser/CreateNewUser.tsx b/chaoscenter/web/src/views/CreateNewUser/CreateNewUser.tsx
index 290298569bf..b304c2fd9ac 100644
--- 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, OverlaySpinner} from '@harnessio/uicore';
 import { Formik, Form } from 'formik';
 import { Icon } from '@harnessio/icons';
 import * as Yup from 'yup';
@@ -46,6 +46,7 @@ export default function CreateNewUserView(props: CreateNewUserViewProps): React.
   }
 
   return (
+    <OverlaySpinner show={createNewUserMutationLoading}>
     <Layout.Vertical padding="medium" style={{ gap: '1rem' }}>
       <Layout.Horizontal flex={{ alignItems: 'center', justifyContent: 'space-between' }}>
         <Text font={{ variation: FontVariation.H4 }}>{getString('createNewUser')}</Text>
@@ -128,5 +129,6 @@ export default function CreateNewUserView(props: CreateNewUserViewProps): React.
         </Formik>
       </Container>
     </Layout.Vertical>
+    </OverlaySpinner>
   );
 }
diff --git a/chaoscenter/web/src/views/DeleteApiToken/DeleteApiToken.tsx b/chaoscenter/web/src/views/DeleteApiToken/DeleteApiToken.tsx
index c5a2df76895..2571a889615 100644
--- a/chaoscenter/web/src/views/DeleteApiToken/DeleteApiToken.tsx
+++ b/chaoscenter/web/src/views/DeleteApiToken/DeleteApiToken.tsx
@@ -1,6 +1,6 @@
 import type { UseMutateFunction } from '@tanstack/react-query';
 import React from 'react';
-import { Button, ButtonVariation, Layout, Text } from '@harnessio/uicore';
+import { Button, ButtonVariation, Layout, OverlaySpinner, Text } from '@harnessio/uicore';
 import { FontVariation } from '@harnessio/design-system';
 import { Icon } from '@harnessio/icons';
 import type { RemoveApiTokenMutationProps, RemoveApiTokenOkResponse } from '@api/auth';
@@ -15,13 +15,15 @@ interface DeleteApiTokenViewProps {
     unknown
   >;
   token: string | undefined;
+  mutationLoading: boolean;
 }
 
 export default function DeleteApiTokenView(props: DeleteApiTokenViewProps): React.ReactElement {
-  const { handleClose, deleteApiTokenMutation, token } = props;
+  const { handleClose, deleteApiTokenMutation, token, mutationLoading} = props;
   const { getString } = useStrings();
 
   return (
+    <OverlaySpinner show={mutationLoading}>
     <Layout.Vertical padding="medium" style={{ gap: '1rem' }}>
       <Layout.Horizontal flex={{ alignItems: 'center', justifyContent: 'space-between' }}>
         <Text font={{ variation: FontVariation.H4 }}>{getString('delete')}</Text>
@@ -45,5 +47,6 @@ export default function DeleteApiTokenView(props: DeleteApiTokenViewProps): Reac
         <Button variation={ButtonVariation.TERTIARY} text={getString('cancel')} onClick={() => handleClose()} />
       </Layout.Horizontal>
     </Layout.Vertical>
+    </OverlaySpinner>
   );
 }
diff --git a/chaoscenter/web/src/views/EnableDisableUser/EnableDisableUser.tsx b/chaoscenter/web/src/views/EnableDisableUser/EnableDisableUser.tsx
index 2933217140e..82a16f0c7b6 100644
--- a/chaoscenter/web/src/views/EnableDisableUser/EnableDisableUser.tsx
+++ b/chaoscenter/web/src/views/EnableDisableUser/EnableDisableUser.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { Button, ButtonVariation, Layout, Text } from '@harnessio/uicore';
+import React, { useState } from 'react';
+import { Button, ButtonVariation, Layout, OverlaySpinner, Text } from '@harnessio/uicore';
 import { Icon } from '@harnessio/icons';
 import { FontVariation } from '@harnessio/design-system';
 import type { UseMutateFunction } from '@tanstack/react-query';
@@ -16,8 +16,28 @@ interface EnableDisableUserViewProps {
 export default function EnableDisableUserView(props: EnableDisableUserViewProps): React.ReactElement {
   const { handleClose, username, currentState, updateStateMutation } = props;
   const { getString } = useStrings();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const handleMutation = () => {
+    setIsLoading(true);
+    updateStateMutation(
+      {
+        body: {
+          username: username ?? '',
+          isDeactivate: !currentState
+        }
+      },
+      {
+        onSuccess: () => {
+          setIsLoading(false);
+          handleClose();
+        }
+      }
+    )
+  }
 
   return (
+    <OverlaySpinner show={isLoading}>
     <Layout.Vertical padding="medium" style={{ gap: '1rem' }}>
       <Layout.Horizontal flex={{ alignItems: 'center', justifyContent: 'space-between' }}>
         <Text font={{ variation: FontVariation.H4 }}>
@@ -34,22 +54,11 @@ export default function EnableDisableUserView(props: EnableDisableUserViewProps)
           variation={ButtonVariation.PRIMARY}
           intent={!currentState ? 'danger' : 'primary'}
           text={getString('confirm')}
-          onClick={() =>
-            updateStateMutation(
-              {
-                body: {
-                  username: username ?? '',
-                  isDeactivate: !currentState
-                }
-              },
-              {
-                onSuccess: () => handleClose()
-              }
-            )
-          }
+          onClick={handleMutation}
         />
         <Button variation={ButtonVariation.TERTIARY} text={getString('cancel')} onClick={() => handleClose()} />
       </Layout.Horizontal>
     </Layout.Vertical>
+    </OverlaySpinner>
   );
 }
diff --git a/chaoscenter/web/src/views/ResetPassword/ResetPassword.tsx b/chaoscenter/web/src/views/ResetPassword/ResetPassword.tsx
index 6ea909369dc..38aef1d63e0 100644
--- a/chaoscenter/web/src/views/ResetPassword/ResetPassword.tsx
+++ b/chaoscenter/web/src/views/ResetPassword/ResetPassword.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, {useState} 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, OverlaySpinner } from '@harnessio/uicore';
 import type { UseMutateFunction } from '@tanstack/react-query';
 import { Formik, Form } from 'formik';
 import { Icon } from '@harnessio/icons';
@@ -26,6 +26,7 @@ interface ResetPasswordFormProps {
 export default function ResetPasswordView(props: ResetPasswordViewProps): React.ReactElement {
   const { handleClose, resetPasswordMutation, username } = props;
   const { getString } = useStrings();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   function isSubmitButtonDisabled(values: ResetPasswordFormProps): boolean {
     if (values.password === '' || values.reEnterPassword === '') {
@@ -45,8 +46,8 @@ export default function ResetPasswordView(props: ResetPasswordViewProps): React.
   }
 
   function handleSubmit(values: ResetPasswordFormProps): void {
-    doesNewPasswordMatch(values) &&
-      username &&
+    if (doesNewPasswordMatch(values) && username) {
+      setIsLoading(true); 
       resetPasswordMutation(
         {
           body: {
@@ -56,12 +57,17 @@ export default function ResetPasswordView(props: ResetPasswordViewProps): React.
           }
         },
         {
-          onSuccess: () => handleClose()
+          onSuccess: () => {
+            setIsLoading(false); 
+            handleClose();
+          }
         }
       );
+    }
   }
 
   return (
+    <OverlaySpinner show={isLoading}>
     <Layout.Vertical padding="medium" style={{ gap: '1rem' }}>
       <Layout.Horizontal flex={{ alignItems: 'center', justifyContent: 'space-between' }}>
         <Text font={{ variation: FontVariation.H4 }}>{getString('resetPassword')}</Text>
@@ -120,5 +126,6 @@ export default function ResetPasswordView(props: ResetPasswordViewProps): React.
         </Formik>
       </Container>
     </Layout.Vertical>
+    </OverlaySpinner>
   );
 }

From 3523d78f807bf98fdde760c085062de2256fbf9d Mon Sep 17 00:00:00 2001
From: Aryan Bhokare <92683836+aryan-bhokare@users.noreply.github.com>
Date: Tue, 20 Feb 2024 10:30:16 +0530
Subject: [PATCH 2/4] Removed OverlaySpinner and extra state variable.

Signed-off-by: Aryan Bhokare <92683836+aryan-bhokare@users.noreply.github.com>
---
 .../DeleteApiToken/DeleteApiToken.tsx         |  4 ++--
 .../EnableDisableUser/EnableDisableUser.tsx   |  4 ++--
 .../ResetPassword/ResetPassword.tsx           |  4 ++--
 .../AccountDetailsChange.tsx                  |  8 +++----
 .../AccountPasswordChange.tsx                 |  8 +++----
 .../src/views/CreateNewUser/CreateNewUser.tsx | 11 ++++-----
 .../views/DeleteApiToken/DeleteApiToken.tsx   | 11 ++++-----
 .../EnableDisableUser/EnableDisableUser.tsx   | 15 +++++-------
 .../src/views/ResetPassword/ResetPassword.tsx | 24 +++++++------------
 9 files changed, 37 insertions(+), 52 deletions(-)

diff --git a/chaoscenter/web/src/controllers/DeleteApiToken/DeleteApiToken.tsx b/chaoscenter/web/src/controllers/DeleteApiToken/DeleteApiToken.tsx
index 71d188b373a..14e45cb0e3e 100644
--- a/chaoscenter/web/src/controllers/DeleteApiToken/DeleteApiToken.tsx
+++ b/chaoscenter/web/src/controllers/DeleteApiToken/DeleteApiToken.tsx
@@ -13,7 +13,7 @@ interface DeleteApiTokenControllerProps {
 
 export default function DeleteApiTokenController(props: DeleteApiTokenControllerProps): React.ReactElement {
   const { token, apiTokensRefetch, handleClose } = props;
-  const { mutate: deleteApiTokenMutation } = useRemoveApiTokenMutation(
+  const { mutate: deleteApiTokenMutation, isLoading: deleteApiTokenMutationLoading } = useRemoveApiTokenMutation(
     {},
     {
       onSuccess: () => {
@@ -23,5 +23,5 @@ export default function DeleteApiTokenController(props: DeleteApiTokenController
     }
   );
 
-  return <DeleteApiTokenView handleClose={handleClose} deleteApiTokenMutation={deleteApiTokenMutation} token={token} />;
+  return <DeleteApiTokenView handleClose={handleClose} deleteApiTokenMutation={deleteApiTokenMutation} deleteApiTokenMutationLoading={deleteApiTokenMutationLoading} token={token} />;
 }
diff --git a/chaoscenter/web/src/controllers/EnableDisableUser/EnableDisableUser.tsx b/chaoscenter/web/src/controllers/EnableDisableUser/EnableDisableUser.tsx
index 4a4e884619b..be0e1c33ebd 100644
--- a/chaoscenter/web/src/controllers/EnableDisableUser/EnableDisableUser.tsx
+++ b/chaoscenter/web/src/controllers/EnableDisableUser/EnableDisableUser.tsx
@@ -17,7 +17,7 @@ export default function EnableDisableUserController(props: EnableDisableUserCont
   const { getUsersRefetch } = props;
   const { showSuccess } = useToaster();
 
-  const { mutate: updateStateMutation } = useUpdateStateMutation(
+  const { mutate: updateStateMutation, isLoading: updateStateMutationLoading} = useUpdateStateMutation(
     {},
     {
       onSuccess: data => {
@@ -27,5 +27,5 @@ export default function EnableDisableUserController(props: EnableDisableUserCont
     }
   );
 
-  return <EnableDisableUserView {...props} updateStateMutation={updateStateMutation} />;
+  return <EnableDisableUserView {...props} updateStateMutation={updateStateMutation} updateStateMutationLoading={updateStateMutationLoading} />;
 }
diff --git a/chaoscenter/web/src/controllers/ResetPassword/ResetPassword.tsx b/chaoscenter/web/src/controllers/ResetPassword/ResetPassword.tsx
index a5bd6b1c3b8..360d3bd9393 100644
--- a/chaoscenter/web/src/controllers/ResetPassword/ResetPassword.tsx
+++ b/chaoscenter/web/src/controllers/ResetPassword/ResetPassword.tsx
@@ -13,12 +13,12 @@ export default function ResetPasswordController(props: ResetPasswordControllerPr
   const { username, handleClose } = props;
   const { getString } = useStrings();
   const { showSuccess } = useToaster();
-  const { mutate: resetPasswordMutation } = useResetPasswordMutation(
+  const { mutate: resetPasswordMutation, isLoading: resetPasswordMutationLoading } = useResetPasswordMutation(
     {},
     { onSuccess: () => showSuccess(getString('passwordResetSuccess')) }
   );
 
   return (
-    <ResetPasswordView username={username} handleClose={handleClose} resetPasswordMutation={resetPasswordMutation} />
+    <ResetPasswordView username={username} handleClose={handleClose} resetPasswordMutation={resetPasswordMutation} resetPasswordMutationLoading={resetPasswordMutationLoading} />
   );
 }
diff --git a/chaoscenter/web/src/views/AccountDetailsChange/AccountDetailsChange.tsx b/chaoscenter/web/src/views/AccountDetailsChange/AccountDetailsChange.tsx
index 2696e979134..ed5c1adf282 100644
--- a/chaoscenter/web/src/views/AccountDetailsChange/AccountDetailsChange.tsx
+++ b/chaoscenter/web/src/views/AccountDetailsChange/AccountDetailsChange.tsx
@@ -1,5 +1,5 @@
 import { FontVariation } from '@harnessio/design-system';
-import { Button, ButtonVariation, Container, FormInput, Layout, OverlaySpinner, Text } from '@harnessio/uicore';
+import { Button, ButtonVariation, Container, FormInput, Layout, Text } from '@harnessio/uicore';
 import React from 'react';
 import { Icon } from '@harnessio/icons';
 import { Form, Formik } from 'formik';
@@ -54,7 +54,6 @@ export default function AccountDetailsChangeView(props: AccountDetailsChangeView
   }
 
   return (
-    <OverlaySpinner show={updateDetailsMutationLoading}>
     <Layout.Vertical padding="medium" style={{ gap: '1rem' }}>
       <Layout.Horizontal flex={{ alignItems: 'center', justifyContent: 'space-between' }}>
         <Text font={{ variation: FontVariation.H4 }}>{getString('editName')}</Text>
@@ -95,9 +94,9 @@ export default function AccountDetailsChangeView(props: AccountDetailsChangeView
                     <Button
                       type="submit"
                       variation={ButtonVariation.PRIMARY}
-                      text={getString('confirm')}
+                      text={updateDetailsMutationLoading ? <Icon name='loading' size={16}/> : getString('confirm')}
                       loading={updateDetailsMutationLoading}
-                      disabled={isUserDetailsUpdated(formikProps.values)}
+                      disabled={updateDetailsMutationLoading || isUserDetailsUpdated(formikProps.values)}
                     />
                     <Button
                       variation={ButtonVariation.TERTIARY}
@@ -112,6 +111,5 @@ export default function AccountDetailsChangeView(props: AccountDetailsChangeView
         </Formik>
       </Container>
     </Layout.Vertical>
-    </OverlaySpinner>
   );
 }
diff --git a/chaoscenter/web/src/views/AccountPasswordChange/AccountPasswordChange.tsx b/chaoscenter/web/src/views/AccountPasswordChange/AccountPasswordChange.tsx
index 5b05ad7c5dc..a3df728d96b 100644
--- a/chaoscenter/web/src/views/AccountPasswordChange/AccountPasswordChange.tsx
+++ b/chaoscenter/web/src/views/AccountPasswordChange/AccountPasswordChange.tsx
@@ -1,5 +1,5 @@
 import { FontVariation } from '@harnessio/design-system';
-import { Button, ButtonVariation, Container, FormInput, Layout, OverlaySpinner, Text, useToaster } from '@harnessio/uicore';
+import { Button, ButtonVariation, Container, FormInput, Layout, Text, useToaster } from '@harnessio/uicore';
 import React from 'react';
 import { Icon } from '@harnessio/icons';
 import { Form, Formik } from 'formik';
@@ -64,7 +64,6 @@ export default function AccountPasswordChangeView(props: AccountPasswordChangeVi
   }
 
   return (
-    <OverlaySpinner show={updatePasswordMutationLoading}>
     <Layout.Vertical padding="medium" style={{ gap: '1rem' }}>
       <Layout.Horizontal flex={{ alignItems: 'center', justifyContent: 'space-between' }}>
         <Text font={{ variation: FontVariation.H4 }}>{getString('updatePassword')}</Text>
@@ -114,9 +113,9 @@ export default function AccountPasswordChangeView(props: AccountPasswordChangeVi
                     <Button
                       type="submit"
                       variation={ButtonVariation.PRIMARY}
-                      text={getString('confirm')}
+                      text={updatePasswordMutationLoading ? <Icon name='loading' size={16}/> : getString('confirm')}
                       loading={updatePasswordMutationLoading}
-                      disabled={isSubmitButtonDisabled(formikProps.values)}
+                      disabled={updatePasswordMutationLoading || isSubmitButtonDisabled(formikProps.values)}
                     />
                     <Button
                       variation={ButtonVariation.TERTIARY}
@@ -131,6 +130,5 @@ export default function AccountPasswordChangeView(props: AccountPasswordChangeVi
         </Formik>
       </Container>
     </Layout.Vertical>
-    </OverlaySpinner>
   );
 }
diff --git a/chaoscenter/web/src/views/CreateNewUser/CreateNewUser.tsx b/chaoscenter/web/src/views/CreateNewUser/CreateNewUser.tsx
index b304c2fd9ac..228270e698b 100644
--- 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, OverlaySpinner} from '@harnessio/uicore';
+import { Layout, Container, FormInput, ButtonVariation, Text, Button} from '@harnessio/uicore';
 import { Formik, Form } from 'formik';
 import { Icon } from '@harnessio/icons';
 import * as Yup from 'yup';
@@ -46,7 +46,6 @@ export default function CreateNewUserView(props: CreateNewUserViewProps): React.
   }
 
   return (
-    <OverlaySpinner show={createNewUserMutationLoading}>
     <Layout.Vertical padding="medium" style={{ gap: '1rem' }}>
       <Layout.Horizontal flex={{ alignItems: 'center', justifyContent: 'space-between' }}>
         <Text font={{ variation: FontVariation.H4 }}>{getString('createNewUser')}</Text>
@@ -112,9 +111,10 @@ export default function CreateNewUserView(props: CreateNewUserViewProps): React.
                     <Button
                       type="submit"
                       variation={ButtonVariation.PRIMARY}
-                      text={getString('confirm')}
+                      text={createNewUserMutationLoading ? <Icon name='loading' size={16}/> : getString('confirm')}
                       loading={createNewUserMutationLoading || formikProps.isSubmitting}
-                      disabled={Object.keys(formikProps.errors).length > 0}
+                      disabled={createNewUserMutationLoading || Object.keys(formikProps.errors).length > 0}
+                      style={{minWidth: '90px'}}
                     />
                     <Button
                       variation={ButtonVariation.TERTIARY}
@@ -123,12 +123,11 @@ export default function CreateNewUserView(props: CreateNewUserViewProps): React.
                     />
                   </Layout.Horizontal>
                 </Layout.Vertical>
-              </Form>
+              </Form>         
             );
           }}
         </Formik>
       </Container>
     </Layout.Vertical>
-    </OverlaySpinner>
   );
 }
diff --git a/chaoscenter/web/src/views/DeleteApiToken/DeleteApiToken.tsx b/chaoscenter/web/src/views/DeleteApiToken/DeleteApiToken.tsx
index 2571a889615..ef285c4a68c 100644
--- a/chaoscenter/web/src/views/DeleteApiToken/DeleteApiToken.tsx
+++ b/chaoscenter/web/src/views/DeleteApiToken/DeleteApiToken.tsx
@@ -1,6 +1,6 @@
 import type { UseMutateFunction } from '@tanstack/react-query';
 import React from 'react';
-import { Button, ButtonVariation, Layout, OverlaySpinner, Text } from '@harnessio/uicore';
+import { Button, ButtonVariation, Layout, Text } from '@harnessio/uicore';
 import { FontVariation } from '@harnessio/design-system';
 import { Icon } from '@harnessio/icons';
 import type { RemoveApiTokenMutationProps, RemoveApiTokenOkResponse } from '@api/auth';
@@ -15,15 +15,14 @@ interface DeleteApiTokenViewProps {
     unknown
   >;
   token: string | undefined;
-  mutationLoading: boolean;
+  deleteApiTokenMutationLoading: boolean;
 }
 
 export default function DeleteApiTokenView(props: DeleteApiTokenViewProps): React.ReactElement {
-  const { handleClose, deleteApiTokenMutation, token, mutationLoading} = props;
+  const { handleClose, deleteApiTokenMutation, token, deleteApiTokenMutationLoading} = props;
   const { getString } = useStrings();
 
   return (
-    <OverlaySpinner show={mutationLoading}>
     <Layout.Vertical padding="medium" style={{ gap: '1rem' }}>
       <Layout.Horizontal flex={{ alignItems: 'center', justifyContent: 'space-between' }}>
         <Text font={{ variation: FontVariation.H4 }}>{getString('delete')}</Text>
@@ -35,7 +34,8 @@ export default function DeleteApiTokenView(props: DeleteApiTokenViewProps): Reac
           type="submit"
           variation={ButtonVariation.PRIMARY}
           intent="danger"
-          text={getString('confirm')}
+          text={deleteApiTokenMutationLoading ? <Icon name='loading' size={16}/> : getString('confirm')}
+          disabled={deleteApiTokenMutationLoading}
           onClick={() =>
             deleteApiTokenMutation({
               body: {
@@ -47,6 +47,5 @@ export default function DeleteApiTokenView(props: DeleteApiTokenViewProps): Reac
         <Button variation={ButtonVariation.TERTIARY} text={getString('cancel')} onClick={() => handleClose()} />
       </Layout.Horizontal>
     </Layout.Vertical>
-    </OverlaySpinner>
   );
 }
diff --git a/chaoscenter/web/src/views/EnableDisableUser/EnableDisableUser.tsx b/chaoscenter/web/src/views/EnableDisableUser/EnableDisableUser.tsx
index 82a16f0c7b6..6774f85e529 100644
--- a/chaoscenter/web/src/views/EnableDisableUser/EnableDisableUser.tsx
+++ b/chaoscenter/web/src/views/EnableDisableUser/EnableDisableUser.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { Button, ButtonVariation, Layout, OverlaySpinner, Text } from '@harnessio/uicore';
+import React from 'react';
+import { Button, ButtonVariation, Layout, Text } from '@harnessio/uicore';
 import { Icon } from '@harnessio/icons';
 import { FontVariation } from '@harnessio/design-system';
 import type { UseMutateFunction } from '@tanstack/react-query';
@@ -11,15 +11,14 @@ interface EnableDisableUserViewProps {
   currentState: boolean | undefined;
   username: string | undefined;
   updateStateMutation: UseMutateFunction<UpdateStateOkResponse, unknown, UpdateStateMutationProps<never>, unknown>;
+  updateStateMutationLoading: boolean;
 }
 
 export default function EnableDisableUserView(props: EnableDisableUserViewProps): React.ReactElement {
-  const { handleClose, username, currentState, updateStateMutation } = props;
+  const { handleClose, username, currentState, updateStateMutation, updateStateMutationLoading } = props;
   const { getString } = useStrings();
-  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const handleMutation = () => {
-    setIsLoading(true);
     updateStateMutation(
       {
         body: {
@@ -29,7 +28,6 @@ export default function EnableDisableUserView(props: EnableDisableUserViewProps)
       },
       {
         onSuccess: () => {
-          setIsLoading(false);
           handleClose();
         }
       }
@@ -37,7 +35,6 @@ export default function EnableDisableUserView(props: EnableDisableUserViewProps)
   }
 
   return (
-    <OverlaySpinner show={isLoading}>
     <Layout.Vertical padding="medium" style={{ gap: '1rem' }}>
       <Layout.Horizontal flex={{ alignItems: 'center', justifyContent: 'space-between' }}>
         <Text font={{ variation: FontVariation.H4 }}>
@@ -53,12 +50,12 @@ export default function EnableDisableUserView(props: EnableDisableUserViewProps)
           type="submit"
           variation={ButtonVariation.PRIMARY}
           intent={!currentState ? 'danger' : 'primary'}
-          text={getString('confirm')}
+          text={updateStateMutationLoading ? <Icon name='loading' size={16}/> : getString('confirm')}
+          disabled={updateStateMutationLoading}
           onClick={handleMutation}
         />
         <Button variation={ButtonVariation.TERTIARY} text={getString('cancel')} onClick={() => handleClose()} />
       </Layout.Horizontal>
     </Layout.Vertical>
-    </OverlaySpinner>
   );
 }
diff --git a/chaoscenter/web/src/views/ResetPassword/ResetPassword.tsx b/chaoscenter/web/src/views/ResetPassword/ResetPassword.tsx
index 38aef1d63e0..a2c4f5e32b3 100644
--- a/chaoscenter/web/src/views/ResetPassword/ResetPassword.tsx
+++ b/chaoscenter/web/src/views/ResetPassword/ResetPassword.tsx
@@ -1,6 +1,6 @@
-import React, {useState} from 'react';
+import React from 'react';
 import { FontVariation } from '@harnessio/design-system';
-import { Layout, Container, FormInput, ButtonVariation, Text, Button, OverlaySpinner } from '@harnessio/uicore';
+import { Layout, Container, FormInput, ButtonVariation, Text, Button } from '@harnessio/uicore';
 import type { UseMutateFunction } from '@tanstack/react-query';
 import { Formik, Form } from 'formik';
 import { Icon } from '@harnessio/icons';
@@ -17,6 +17,7 @@ interface ResetPasswordViewProps {
     unknown
   >;
   username: string | undefined;
+  resetPasswordMutationLoading: boolean;
 }
 interface ResetPasswordFormProps {
   password: string;
@@ -24,9 +25,8 @@ interface ResetPasswordFormProps {
 }
 
 export default function ResetPasswordView(props: ResetPasswordViewProps): React.ReactElement {
-  const { handleClose, resetPasswordMutation, username } = props;
+  const { handleClose, resetPasswordMutation, username, resetPasswordMutationLoading } = props;
   const { getString } = useStrings();
-  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   function isSubmitButtonDisabled(values: ResetPasswordFormProps): boolean {
     if (values.password === '' || values.reEnterPassword === '') {
@@ -46,8 +46,8 @@ export default function ResetPasswordView(props: ResetPasswordViewProps): React.
   }
 
   function handleSubmit(values: ResetPasswordFormProps): void {
-    if (doesNewPasswordMatch(values) && username) {
-      setIsLoading(true); 
+    doesNewPasswordMatch(values) &&
+      username &&
       resetPasswordMutation(
         {
           body: {
@@ -57,17 +57,12 @@ export default function ResetPasswordView(props: ResetPasswordViewProps): React.
           }
         },
         {
-          onSuccess: () => {
-            setIsLoading(false); 
-            handleClose();
-          }
+          onSuccess: () => handleClose()
         }
       );
-    }
   }
 
   return (
-    <OverlaySpinner show={isLoading}>
     <Layout.Vertical padding="medium" style={{ gap: '1rem' }}>
       <Layout.Horizontal flex={{ alignItems: 'center', justifyContent: 'space-between' }}>
         <Text font={{ variation: FontVariation.H4 }}>{getString('resetPassword')}</Text>
@@ -109,8 +104,8 @@ export default function ResetPasswordView(props: ResetPasswordViewProps): React.
                     <Button
                       type="submit"
                       variation={ButtonVariation.PRIMARY}
-                      text={getString('confirm')}
-                      disabled={isSubmitButtonDisabled(formikProps.values)}
+                      text={resetPasswordMutationLoading ? <Icon name='loading' size={16}/> : getString('confirm')}
+                      disabled={resetPasswordMutationLoading || isSubmitButtonDisabled(formikProps.values)}
                       onClick={() => formikProps.handleSubmit()}
                     />
                     <Button
@@ -126,6 +121,5 @@ export default function ResetPasswordView(props: ResetPasswordViewProps): React.
         </Formik>
       </Container>
     </Layout.Vertical>
-    </OverlaySpinner>
   );
 }

From 9bbad2805f8e4c354f1834a99b5b8a5c4acfa41c Mon Sep 17 00:00:00 2001
From: Aryan Bhokare <92683836+aryan-bhokare@users.noreply.github.com>
Date: Tue, 20 Feb 2024 14:40:48 +0000
Subject: [PATCH 3/4] fixed web tests failing.

Signed-off-by: Aryan Bhokare <92683836+aryan-bhokare@users.noreply.github.com>
---
 .../src/views/ResetPassword/__tests__/ResetPassword.test.tsx  | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/chaoscenter/web/src/views/ResetPassword/__tests__/ResetPassword.test.tsx b/chaoscenter/web/src/views/ResetPassword/__tests__/ResetPassword.test.tsx
index 560d0b63a13..0b453b2c2aa 100644
--- a/chaoscenter/web/src/views/ResetPassword/__tests__/ResetPassword.test.tsx
+++ b/chaoscenter/web/src/views/ResetPassword/__tests__/ResetPassword.test.tsx
@@ -24,6 +24,7 @@ describe('ResetPasswordView Component', () => {
         <ResetPasswordView
           handleClose={mockClose}
           resetPasswordMutation={mockRestPasswordMutation}
+          resetPasswordMutationLoading={false}
           username="testUser"
         />
       </TestWrapper>
@@ -42,6 +43,7 @@ describe('ResetPasswordView Component', () => {
         resetPasswordMutation={() => {
           /* noop */
         }}
+        resetPasswordMutationLoading={false}
         username="testUser"
       />
     );
@@ -56,6 +58,7 @@ describe('ResetPasswordView Component', () => {
         <ResetPasswordView
           handleClose={mockClose}
           resetPasswordMutation={mockRestPasswordMutation}
+          resetPasswordMutationLoading={false}
           username="testUser"
         />
       </TestWrapper>
@@ -77,6 +80,7 @@ describe('ResetPasswordView Component', () => {
         <ResetPasswordView
           handleClose={mockClose}
           resetPasswordMutation={mockRestPasswordMutation}
+          resetPasswordMutationLoading={false}
           username="testUser"
         />
       </TestWrapper>

From d55c5999c06cffa42b1516051f13648ccf467bdd Mon Sep 17 00:00:00 2001
From: Aryan Bhokare <92683836+aryan-bhokare@users.noreply.github.com>
Date: Wed, 21 Feb 2024 08:49:12 +0000
Subject: [PATCH 4/4] fixed minwidth for all buttons.

Signed-off-by: Aryan Bhokare <92683836+aryan-bhokare@users.noreply.github.com>
---
 .../web/src/views/AccountDetailsChange/AccountDetailsChange.tsx  | 1 +
 .../src/views/AccountPasswordChange/AccountPasswordChange.tsx    | 1 +
 chaoscenter/web/src/views/DeleteApiToken/DeleteApiToken.tsx      | 1 +
 .../web/src/views/EnableDisableUser/EnableDisableUser.tsx        | 1 +
 chaoscenter/web/src/views/ResetPassword/ResetPassword.tsx        | 1 +
 5 files changed, 5 insertions(+)

diff --git a/chaoscenter/web/src/views/AccountDetailsChange/AccountDetailsChange.tsx b/chaoscenter/web/src/views/AccountDetailsChange/AccountDetailsChange.tsx
index ed5c1adf282..ace1fcd6ac5 100644
--- a/chaoscenter/web/src/views/AccountDetailsChange/AccountDetailsChange.tsx
+++ b/chaoscenter/web/src/views/AccountDetailsChange/AccountDetailsChange.tsx
@@ -97,6 +97,7 @@ export default function AccountDetailsChangeView(props: AccountDetailsChangeView
                       text={updateDetailsMutationLoading ? <Icon name='loading' size={16}/> : getString('confirm')}
                       loading={updateDetailsMutationLoading}
                       disabled={updateDetailsMutationLoading || isUserDetailsUpdated(formikProps.values)}
+                      style={{minWidth: '90px'}}
                     />
                     <Button
                       variation={ButtonVariation.TERTIARY}
diff --git a/chaoscenter/web/src/views/AccountPasswordChange/AccountPasswordChange.tsx b/chaoscenter/web/src/views/AccountPasswordChange/AccountPasswordChange.tsx
index a3df728d96b..8c736b1e370 100644
--- a/chaoscenter/web/src/views/AccountPasswordChange/AccountPasswordChange.tsx
+++ b/chaoscenter/web/src/views/AccountPasswordChange/AccountPasswordChange.tsx
@@ -116,6 +116,7 @@ export default function AccountPasswordChangeView(props: AccountPasswordChangeVi
                       text={updatePasswordMutationLoading ? <Icon name='loading' size={16}/> : getString('confirm')}
                       loading={updatePasswordMutationLoading}
                       disabled={updatePasswordMutationLoading || isSubmitButtonDisabled(formikProps.values)}
+                      style={{minWidth: '90px'}}
                     />
                     <Button
                       variation={ButtonVariation.TERTIARY}
diff --git a/chaoscenter/web/src/views/DeleteApiToken/DeleteApiToken.tsx b/chaoscenter/web/src/views/DeleteApiToken/DeleteApiToken.tsx
index ef285c4a68c..95dbab78d7b 100644
--- a/chaoscenter/web/src/views/DeleteApiToken/DeleteApiToken.tsx
+++ b/chaoscenter/web/src/views/DeleteApiToken/DeleteApiToken.tsx
@@ -35,6 +35,7 @@ export default function DeleteApiTokenView(props: DeleteApiTokenViewProps): Reac
           variation={ButtonVariation.PRIMARY}
           intent="danger"
           text={deleteApiTokenMutationLoading ? <Icon name='loading' size={16}/> : getString('confirm')}
+          style={{minWidth: '90px'}}
           disabled={deleteApiTokenMutationLoading}
           onClick={() =>
             deleteApiTokenMutation({
diff --git a/chaoscenter/web/src/views/EnableDisableUser/EnableDisableUser.tsx b/chaoscenter/web/src/views/EnableDisableUser/EnableDisableUser.tsx
index 6774f85e529..7ac030f9089 100644
--- a/chaoscenter/web/src/views/EnableDisableUser/EnableDisableUser.tsx
+++ b/chaoscenter/web/src/views/EnableDisableUser/EnableDisableUser.tsx
@@ -52,6 +52,7 @@ export default function EnableDisableUserView(props: EnableDisableUserViewProps)
           intent={!currentState ? 'danger' : 'primary'}
           text={updateStateMutationLoading ? <Icon name='loading' size={16}/> : getString('confirm')}
           disabled={updateStateMutationLoading}
+          style={{minWidth: '90px'}}
           onClick={handleMutation}
         />
         <Button variation={ButtonVariation.TERTIARY} text={getString('cancel')} onClick={() => handleClose()} />
diff --git a/chaoscenter/web/src/views/ResetPassword/ResetPassword.tsx b/chaoscenter/web/src/views/ResetPassword/ResetPassword.tsx
index a2c4f5e32b3..888562fb1e8 100644
--- a/chaoscenter/web/src/views/ResetPassword/ResetPassword.tsx
+++ b/chaoscenter/web/src/views/ResetPassword/ResetPassword.tsx
@@ -107,6 +107,7 @@ export default function ResetPasswordView(props: ResetPasswordViewProps): React.
                       text={resetPasswordMutationLoading ? <Icon name='loading' size={16}/> : getString('confirm')}
                       disabled={resetPasswordMutationLoading || isSubmitButtonDisabled(formikProps.values)}
                       onClick={() => formikProps.handleSubmit()}
+                      style={{minWidth: '90px'}}
                     />
                     <Button
                       variation={ButtonVariation.TERTIARY}