1 files changed, 58 insertions, 85 deletions
diff --git a/server/sonar-web/src/main/js/apps/users/components/DeactivateForm.tsx b/server/sonar-web/src/main/js/apps/users/components/DeactivateForm.tsx
index 796d52abdf9..aa334af4bb4 100644
--- a/server/sonar-web/src/main/js/apps/users/components/DeactivateForm.tsx
+++ b/server/sonar-web/src/main/js/apps/users/components/DeactivateForm.tsx
@@ -19,108 +19,81 @@
  */
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { deactivateUser } from '../../../api/users';
+import { useDeactivateUserMutation } from '../../../api/queries/users';
 import DocLink from '../../../components/common/DocLink';
-import { ResetButtonLink, SubmitButton } from '../../../components/controls/buttons';
 import Checkbox from '../../../components/controls/Checkbox';
 import Modal from '../../../components/controls/Modal';
+import { ResetButtonLink, SubmitButton } from '../../../components/controls/buttons';
 import { Alert } from '../../../components/ui/Alert';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { UserActive } from '../../../types/users';
 
 export interface Props {
   onClose: () => void;
-  onUpdateUsers: () => void;
   user: UserActive;
 }
 
-interface State {
-  submitting: boolean;
-  anonymize: boolean;
-}
-
-export default class DeactivateForm extends React.PureComponent<Props, State> {
-  mounted = false;
-  state: State = { submitting: false, anonymize: false };
-
-  componentDidMount() {
-    this.mounted = true;
-  }
+export default function DeactivateForm(props: Props) {
+  const { user } = props;
+  const [anonymize, setAnonymize] = React.useState(false);
 
-  componentWillUnmount() {
-    this.mounted = false;
-  }
+  const { mutate: deactivateUser, isLoading } = useDeactivateUserMutation();
 
-  handleAnonymize = (checked: boolean) => {
-    this.setState({ anonymize: checked });
-  };
-
-  handleDeactivate = (event: React.SyntheticEvent<HTMLFormElement>) => {
+  const handleDeactivate = (event: React.SyntheticEvent<HTMLFormElement>) => {
     event.preventDefault();
-    this.setState({ submitting: true });
-    deactivateUser({ login: this.props.user.login, anonymize: this.state.anonymize }).then(
-      () => {
-        this.props.onUpdateUsers();
-        this.props.onClose();
-      },
-      () => {
-        if (this.mounted) {
-          this.setState({ submitting: false });
-        }
+    deactivateUser(
+      { login: user.login, anonymize },
+      {
+        onSuccess: props.onClose,
       }
     );
   };
 
-  render() {
-    const { user } = this.props;
-    const { submitting, anonymize } = this.state;
-
-    const header = translate('users.deactivate_user');
-    return (
-      <Modal contentLabel={header} onRequestClose={this.props.onClose}>
-        <form autoComplete="off" id="deactivate-user-form" onSubmit={this.handleDeactivate}>
-          <header className="modal-head">
-            <h2>{header}</h2>
-          </header>
-          <div className="modal-body display-flex-column">
-            {translateWithParameters('users.deactivate_user.confirmation', user.name, user.login)}
-            <Checkbox
-              id="delete-user"
-              className="big-spacer-top"
-              checked={anonymize}
-              onCheck={this.handleAnonymize}
-            >
-              <label className="little-spacer-left" htmlFor="delete-user">
-                {translate('users.delete_user')}
-              </label>
-            </Checkbox>
-            {anonymize && (
-              <Alert variant="warning" className="big-spacer-top">
-                <FormattedMessage
-                  defaultMessage={translate('users.delete_user.help')}
-                  id="delete-user-warning"
-                  values={{
-                    link: (
-                      <DocLink to="/instance-administration/authentication/overview/">
-                        {translate('users.delete_user.help.link')}
-                      </DocLink>
-                    ),
-                  }}
-                />
-              </Alert>
-            )}
-          </div>
-          <footer className="modal-foot">
-            {submitting && <i className="spinner spacer-right" />}
-            <SubmitButton className="js-confirm button-red" disabled={submitting}>
-              {translate('users.deactivate')}
-            </SubmitButton>
-            <ResetButtonLink className="js-modal-close" onClick={this.props.onClose}>
-              {translate('cancel')}
-            </ResetButtonLink>
-          </footer>
-        </form>
-      </Modal>
-    );
-  }
+  const header = translate('users.deactivate_user');
+  return (
+    <Modal contentLabel={header} onRequestClose={props.onClose}>
+      <form autoComplete="off" id="deactivate-user-form" onSubmit={handleDeactivate}>
+        <header className="modal-head">
+          <h2>{header}</h2>
+        </header>
+        <div className="modal-body display-flex-column">
+          {translateWithParameters('users.deactivate_user.confirmation', user.name, user.login)}
+          <Checkbox
+            id="delete-user"
+            className="big-spacer-top"
+            checked={anonymize}
+            onCheck={(checked) => setAnonymize(checked)}
+          >
+            <label className="little-spacer-left" htmlFor="delete-user">
+              {translate('users.delete_user')}
+            </label>
+          </Checkbox>
+          {anonymize && (
+            <Alert variant="warning" className="big-spacer-top">
+              <FormattedMessage
+                defaultMessage={translate('users.delete_user.help')}
+                id="delete-user-warning"
+                values={{
+                  link: (
+                    <DocLink to="/instance-administration/authentication/overview/">
+                      {translate('users.delete_user.help.link')}
+                    </DocLink>
+                  ),
+                }}
+              />
+            </Alert>
+          )}
+        </div>
+        <footer className="modal-foot">
+          {isLoading && <i className="spinner spacer-right" />}
+          <SubmitButton className="js-confirm button-red" disabled={isLoading}>
+            {translate('users.deactivate')}
+          </SubmitButton>
+          <ResetButtonLink className="js-modal-close" onClick={props.onClose}>
+            {translate('cancel')}
+          </ResetButtonLink>
+        </footer>
+      </form>
+    </Modal>
+  );
 }