React JSON schema form for JupyterHub Spawner form

JupyterHub
, ,
1

Hello,

We are exploring the way to use react-jsonschema-form (rjsf) to generate spawner form for our JupyterHub deployment. rjsf prevents the default action on form submit to perform validation checks and we would like to keep those validation checks. Hence, we need to post form data via fetch or a similar tool in onSubmit callback. The response of this form data post request is either a redirect URL (/hub/spawn-pending) or same page (/hub/spawn) with errors rendered.

The issue here is posting the form data within the js using fetch. It does not redirect the browser page and so nothing happens. This is sort of expected as fetch is not supposed to do this. So, we came up with a workaround as follows:

const onFormSubmit = async (
    { formData }: IChangeEvent,
    event: FormEvent<any>
  ) => {
    console.log('Submitted Form Data', formData);

    const response = await fetch(POST_URL, {
      method: 'POST',
      body: formData
    });

    console.log(response);

    if (response.redirected) {
      window.location.replace(response.url);
      return;
    } else {
      const html = await response.text();
      document.open();
      document.write(html);
      document.close();
    }
);

Is it a sensible solution? Are there any security implications having this sort of workaround? If there are any better ways to achieve this, please let me know.

Cheers!