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 ;
+ return ;
}
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 ;
+ return ;
}
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 (
-
+
);
}
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 (
-
{getString('editName')}
@@ -95,9 +94,9 @@ export default function AccountDetailsChangeView(props: AccountDetailsChangeView
-
);
}
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 (
-
{getString('updatePassword')}
@@ -114,9 +113,9 @@ export default function AccountPasswordChangeView(props: AccountPasswordChangeVi
: getString('confirm')}
loading={updatePasswordMutationLoading}
- disabled={isSubmitButtonDisabled(formikProps.values)}
+ disabled={updatePasswordMutationLoading || isSubmitButtonDisabled(formikProps.values)}
/>
-
);
}
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 (
-
{getString('createNewUser')}
@@ -112,9 +111,10 @@ export default function CreateNewUserView(props: CreateNewUserViewProps): React.
: getString('confirm')}
loading={createNewUserMutationLoading || formikProps.isSubmitting}
- disabled={Object.keys(formikProps.errors).length > 0}
+ disabled={createNewUserMutationLoading || Object.keys(formikProps.errors).length > 0}
+ style={{minWidth: '90px'}}
/>
-
+
);
}}
-
);
}
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 (
-
{getString('delete')}
@@ -35,7 +34,8 @@ export default function DeleteApiTokenView(props: DeleteApiTokenViewProps): Reac
type="submit"
variation={ButtonVariation.PRIMARY}
intent="danger"
- text={getString('confirm')}
+ text={deleteApiTokenMutationLoading ? : getString('confirm')}
+ disabled={deleteApiTokenMutationLoading}
onClick={() =>
deleteApiTokenMutation({
body: {
@@ -47,6 +47,5 @@ export default function DeleteApiTokenView(props: DeleteApiTokenViewProps): Reac
handleClose()} />
-
);
}
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, 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(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 (
-
@@ -53,12 +50,12 @@ export default function EnableDisableUserView(props: EnableDisableUserViewProps)
type="submit"
variation={ButtonVariation.PRIMARY}
intent={!currentState ? 'danger' : 'primary'}
- text={getString('confirm')}
+ text={updateStateMutationLoading ? : getString('confirm')}
+ disabled={updateStateMutationLoading}
onClick={handleMutation}
/>
handleClose()} />
-
);
}
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(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 (
-
{getString('resetPassword')}
@@ -109,8 +104,8 @@ export default function ResetPasswordView(props: ResetPasswordViewProps): React.
: getString('confirm')}
+ disabled={resetPasswordMutationLoading || isSubmitButtonDisabled(formikProps.values)}
onClick={() => formikProps.handleSubmit()}
/>
-
);
}