Prevent duplicate form submission in Create realm dialog in admin ui

[thomasdarimont]

Description

The current "Create realm" dialog in the admin-ui does allow clicking the "Create" button multiple times, if the server response is slow. This yields error messages like the following, where the first "Create realm" request succeeds, but the second attempt failes with a conflict error.

Discussion

No response

Motivation

This problem happens quite often in practice, especially during Keycloak demos when one wants to create a realm quickly.

Details

We should disable the "Create" button while the request is pending.

[jonkoops]

Yeah, ideally we'd do this consistently across UIs. We should have some kind of re-usable component or function to handle all this stuff. It looks like React Form Hook accepts a Promise return value in the handleSubmit() method, which leads me to believe it has some kind of state around this we could use.

[jonkoops]

Took a quick look, and it seems we should take several of the fields in the FormState into account. I whipped up this example:

import { type SubmitHandler, useForm, FormState } from 'react-hook-form';

const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

const isSubmittable = (formState: FormState<any>) => {
  return (
    formState.isDirty &&
    formState.isValid &&
    !formState.isLoading &&
    !formState.isValidating &&
    !formState.isSubmitting
  );
};

interface FormData {
  username: string;
}

export default function App() {
  const {
    register,
    handleSubmit,
    formState,
  } = useForm<FormData>();

  const onSubmit: SubmitHandler<FormData> = async (data) => {
    await sleep(2000);
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="username">User Name</label>
      <input {...register('username')} placeholder="Enter a username" />
      <button type="submit" disabled={!isSubmittable(formState)}>Submit</button>
    </form>
  );
}

We should extract the isSubmittable() function here into a separate utility, so that it can be used in all forms to handle the disabling of the submit button. It might perhaps even make sense to introduce a PR upstream to React Form Hook to add a isSubmittable field to the FormState, not sure how amicable they would be to that.

[thomasdarimont]

That looks good! I think many forms are affected by this and that this is a common "error" that puzzles users.

It seems just like a minor improvement, but making this more robust can help improve the trust of users in Keycloak.

[jonkoops]

Agreed, should also not be too hard to put this in a utility of ui-shared and use if everywhere, if someone wants to go ahead and pick this up that would be a nice quality of life enhancement.

[jhchong92]

Hi, can I try to take this issue?

Thank you for the sample code provided @jonkoops. Instead of creating a utility method isSubmittable#formState, I would opt for creating a reusable component FormSubmitButton.

import { Button, ButtonProps } from "@patternfly/react-core"
import { PropsWithChildren } from "react"
import { FieldValues, FormState } from "react-hook-form"

export type FormSubmitButtonProps = ButtonProps & {
  formState: FormState<FieldValues>
}

const isSubmittable = (formState: FormState<FieldValues>) => {
  return (
    formState.isDirty &&
    formState.isValid &&
    !formState.isLoading &&
    !formState.isValidating &&
    !formState.isSubmitting
  );
};

export const FormSubmitButton = ({ formState, children, ...rest }
  : PropsWithChildren<FormSubmitButtonProps>) => {
    
  return <Button {...rest} type="submit" isDisabled={!isSubmittable(formState)}>
    {children}
  </Button>
}

I think this provides more flexibility and reusability compared to a utility method.

[jonkoops]

That's a great idea @jhchong92. We're trying to reduce the amount of repetition in our form code, so that would certainly be beneficial.