Added loader in UserManagement modal.

Signed-off-by: Aryan <aryan1bhokare@gmail.com>
litmuschaos · Feb 19, 2024 · 0c5a34e · 0c5a34e
1 parent 84b76bd
commit 0c5a34e
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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, 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
@@ -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
@@ -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
@@ -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>
   );
 }