Disable create and clone buttons while waiting for network response.

I've accidentally created a backfill multiple times thinking I didn't click the create button and
pressing it multiple times as a result. This disables the button while the request is sending
preventing that.

Author: nath

service/web/tabs/app/src/containers/CloneFormContainer.tsx

@@ -33,6 +33,7 @@ import { LayoutContainer } from "../containers"
 interface CloneFormState {
   loading: boolean
   errorText?: string
+  cloneButtonDisabled: boolean
 
   statusResponse: any
 
@@ -61,6 +62,7 @@ class CloneFormContainer extends React.Component<
     this.setState({
       loading: false,
       errorText: null,
+      cloneButtonDisabled: false,
 
       statusResponse: null,
 
@@ -131,6 +133,35 @@ class CloneFormContainer extends React.Component<
       })
   }
 
+  async handleClick() {
+    this.setState({ cloneButtonDisabled: true })
+    try {
+      const response = await Axios.post(`/backfills/${this.id}/clone`, {
+        dry_run: this.state.dry_run,
+        scan_size: this.state.scan_size,
+        batch_size: this.state.batch_size,
+        num_threads: this.state.num_threads,
+        range_clone_type: this.state.range_clone_type,
+        pkey_range_start: this.nullIfEmpty(this.state.pkey_range_start),
+        pkey_range_end: this.nullIfEmpty(this.state.pkey_range_end),
+        backoff_schedule: this.nullIfEmpty(this.state.backoff_schedule),
+        extra_sleep_ms: this.state.extra_sleep_ms,
+        parameter_map: this.state.parameters
+      })
+      let id = response.data.id
+      let history = (this.props as any).history
+      history.push(`/app/backfills/${id}`)
+    } catch (error) {
+      console.log(error)
+      this.setState({
+        loading: false,
+        errorText: error.response.data
+      })
+    } finally {
+      this.setState({ cloneButtonDisabled: false })
+    }
+  }
+
   render() {
     if (!this.state || !this.state.backfills) {
       return (
@@ -320,34 +351,7 @@ class CloneFormContainer extends React.Component<
               )}
               <Button
                 onClick={() => {
-                  Axios.post(`/backfills/${this.id}/clone`, {
-                    dry_run: this.state.dry_run,
-                    scan_size: this.state.scan_size,
-                    batch_size: this.state.batch_size,
-                    num_threads: this.state.num_threads,
-                    range_clone_type: this.state.range_clone_type,
-                    pkey_range_start: this.nullIfEmpty(
-                      this.state.pkey_range_start
-                    ),
-                    pkey_range_end: this.nullIfEmpty(this.state.pkey_range_end),
-                    backoff_schedule: this.nullIfEmpty(
-                      this.state.backoff_schedule
-                    ),
-                    extra_sleep_ms: this.state.extra_sleep_ms,
-                    parameter_map: this.state.parameters
-                  })
-                    .then(response => {
-                      let id = response.data.id
-                      let history = (this.props as any).history
-                      history.push(`/app/backfills/${id}`)
-                    })
-                    .catch(error => {
-                      console.log(error)
-                      this.setState({
-                        loading: false,
-                        errorText: error.response.data
-                      })
-                    })
+                  this.handleClick()
                 }}
                 intent={Intent.PRIMARY}
                 loading={this.state.loading}

service/web/tabs/app/src/containers/CreateFormContainer.tsx

@@ -32,6 +32,7 @@ import { RESERVED_VARIANT } from "../utilities"
 interface CreateFormState {
   loading: boolean
   errorText?: string
+  createButtonDisabled: boolean
   backfill?: IBackfill
   dry_run: boolean
 
@@ -62,6 +63,7 @@ class CreateFormContainer extends React.Component<
     this.setState({
       loading: false,
       errorText: null,
+      createButtonDisabled: false,
       backfill: null,
       dry_run: true,
       scan_size: 10000,
@@ -75,6 +77,45 @@ class CreateFormContainer extends React.Component<
     })
   }
 
+  async handleClick() {
+    this.setState({ createButtonDisabled: true })
+
+    try {
+      await new Promise(resolve => { setTimeout(resolve, 10000) })
+      const response = await Axios.post(
+        `/services/${this.service}/variants/${this.variant}/create`,
+        {
+          backfill_name: this.state.backfill.name,
+          dry_run: this.state.dry_run,
+          scan_size: this.state.scan_size,
+          batch_size: this.state.batch_size,
+          num_threads: this.state.num_threads,
+          pkey_range_start: this.nullIfEmpty(
+            this.base64(this.state.pkey_range_start)
+          ),
+          pkey_range_end: this.nullIfEmpty(
+            this.base64(this.state.pkey_range_end)
+          ),
+          backoff_schedule: this.nullIfEmpty(this.state.backoff_schedule),
+          extra_sleep_ms: this.state.extra_sleep_ms,
+          parameter_map: this.state.parameters
+        }
+      )
+
+      let id = response.data.backfill_run_id
+      let history = (this.props as any).history
+      history.push(`/app/backfills/${id}`)
+    } catch (error) {
+      console.log(error)
+      this.setState({
+        loading: false,
+        errorText: error.response.data
+      })
+    } finally {
+      this.setState({ createButtonDisabled: false })
+    }
+  }
+
   render() {
     let registeredBackfills = simpleSelectorGet(this.props.simpleNetwork, [
       this.registeredBackfills,
@@ -246,43 +287,13 @@ class CreateFormContainer extends React.Component<
               )}
               <Button
                 onClick={() => {
-                  Axios.post(
-                    `/services/${this.service}/variants/${this.variant}/create`,
-                    {
-                      backfill_name: this.state.backfill.name,
-                      dry_run: this.state.dry_run,
-                      scan_size: this.state.scan_size,
-                      batch_size: this.state.batch_size,
-                      num_threads: this.state.num_threads,
-                      pkey_range_start: this.nullIfEmpty(
-                        this.base64(this.state.pkey_range_start)
-                      ),
-                      pkey_range_end: this.nullIfEmpty(
-                        this.base64(this.state.pkey_range_end)
-                      ),
-                      backoff_schedule: this.nullIfEmpty(
-                        this.state.backoff_schedule
-                      ),
-                      extra_sleep_ms: this.state.extra_sleep_ms,
-                      parameter_map: this.state.parameters
-                    }
-                  )
-                    .then(response => {
-                      let id = response.data.backfill_run_id
-                      let history = (this.props as any).history
-                      history.push(`/app/backfills/${id}`)
-                    })
-                    .catch(error => {
-                      console.log(error)
-                      this.setState({
-                        loading: false,
-                        errorText: error.response.data
-                      })
-                    })
+                  this.handleClick()
                 }}
                 intent={Intent.PRIMARY}
                 loading={this.state.loading}
-                disabled={!this.state.backfill}
+                disabled={
+                  this.state.createButtonDisabled || !this.state.backfill
+                }
                 text={"Create"}
               />
             </div>