Removed Overlay spinner and extra state variable.

litmuschaos · Feb 20, 2024 · 86712ed · 86712ed
1 parent 0c5a34e
commit 86712ed
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 52 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,15 +28,13 @@ export default function EnableDisableUserView(props: EnableDisableUserViewProps)
       },
       {
         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 }}>
@@ -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
@@ -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,16 +17,16 @@ 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();
-  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>
   );
 }