Added loader in UserManagement modal. (#4452)

* Added loader in UserManagement modal. Signed-off-by: Aryan <aryan1bhokare@gmail.com> * Removed OverlaySpinner and extra state variable. Signed-off-by: Aryan Bhokare <92683836+aryan-bhokare@users.noreply.github.com> * fixed web tests failing. Signed-off-by: Aryan Bhokare <92683836+aryan-bhokare@users.noreply.github.com> * fixed minwidth for all buttons. Signed-off-by: Aryan Bhokare <92683836+aryan-bhokare@users.noreply.github.com> --------- Signed-off-by: Aryan <aryan1bhokare@gmail.com> Signed-off-by: Aryan Bhokare <92683836+aryan-bhokare@users.noreply.github.com> Co-authored-by: Saranya Jena <saranya.jena@harness.io>
litmuschaos · Mar 5, 2024 · 52ab1d5 · 52ab1d5
1 parent f9d5247
commit 52ab1d5
Show file tree

Hide file tree

Showing 11 changed files with 56 additions and 35 deletions.
diff --git 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
@@ -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
@@ -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
@@ -94,9 +94,10 @@ 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)}
+                      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
@@ -113,9 +113,10 @@ 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)}
+                      style={{minWidth: '90px'}}
                     />
                     <Button
                       variation={ButtonVariation.TERTIARY}

diff --git 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
@@ -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} from '@harnessio/uicore';
 import { Formik, Form } from 'formik';
 import { Icon } from '@harnessio/icons';
 import * as Yup from 'yup';
@@ -111,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}
@@ -122,7 +123,7 @@ export default function CreateNewUserView(props: CreateNewUserViewProps): React.
                     />
                   </Layout.Horizontal>
                 </Layout.Vertical>
-              </Form>
+              </Form>         
             );
           }}
         </Formik>

diff --git a/chaoscenter/web/src/views/DeleteApiToken/DeleteApiToken.tsx b/chaoscenter/web/src/views/DeleteApiToken/DeleteApiToken.tsx
@@ -15,10 +15,11 @@ interface DeleteApiTokenViewProps {
     unknown
   >;
   token: string | undefined;
+  deleteApiTokenMutationLoading: boolean;
 }
 
 export default function DeleteApiTokenView(props: DeleteApiTokenViewProps): React.ReactElement {
-  const { handleClose, deleteApiTokenMutation, token } = props;
+  const { handleClose, deleteApiTokenMutation, token, deleteApiTokenMutationLoading} = props;
   const { getString } = useStrings();
 
   return (
@@ -33,7 +34,9 @@ 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')}
+          style={{minWidth: '90px'}}
+          disabled={deleteApiTokenMutationLoading}
           onClick={() =>
             deleteApiTokenMutation({
               body: {

diff --git a/chaoscenter/web/src/views/EnableDisableUser/EnableDisableUser.tsx b/chaoscenter/web/src/views/EnableDisableUser/EnableDisableUser.tsx
@@ -11,12 +11,29 @@ 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 handleMutation = () => {
+    updateStateMutation(
+      {
+        body: {
+          username: username ?? '',
+          isDeactivate: !currentState
+        }
+      },
+      {
+        onSuccess: () => {
+          handleClose();
+        }
+      }
+    )
+  }
+
   return (
     <Layout.Vertical padding="medium" style={{ gap: '1rem' }}>
       <Layout.Horizontal flex={{ alignItems: 'center', justifyContent: 'space-between' }}>
@@ -33,20 +50,10 @@ export default function EnableDisableUserView(props: EnableDisableUserViewProps)
           type="submit"
           variation={ButtonVariation.PRIMARY}
           intent={!currentState ? 'danger' : 'primary'}
-          text={getString('confirm')}
-          onClick={() =>
-            updateStateMutation(
-              {
-                body: {
-                  username: username ?? '',
-                  isDeactivate: !currentState
-                }
-              },
-              {
-                onSuccess: () => handleClose()
-              }
-            )
-          }
+          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()} />
       </Layout.Horizontal>

diff --git a/chaoscenter/web/src/views/ResetPassword/ResetPassword.tsx b/chaoscenter/web/src/views/ResetPassword/ResetPassword.tsx
@@ -17,14 +17,15 @@ interface ResetPasswordViewProps {
     unknown
   >;
   username: string | undefined;
+  resetPasswordMutationLoading: boolean;
 }
 interface ResetPasswordFormProps {
   password: string;
   reEnterPassword: string;
 }
 
 export default function ResetPasswordView(props: ResetPasswordViewProps): React.ReactElement {
-  const { handleClose, resetPasswordMutation, username } = props;
+  const { handleClose, resetPasswordMutation, username, resetPasswordMutationLoading } = props;
   const { getString } = useStrings();
 
   function isSubmitButtonDisabled(values: ResetPasswordFormProps): boolean {
@@ -103,9 +104,10 @@ 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()}
+                      style={{minWidth: '90px'}}
                     />
                     <Button
                       variation={ButtonVariation.TERTIARY}

diff --git 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>