disable button while adding source capture collections (#1496)

* Properly checking length and disabling button while it is working * Handling state for anything that needs to evaluate trial collections
estuary · Mar 6, 2025 · db3b52b · db3b52b
1 parent 65742d6
commit db3b52b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/src/components/editor/Bindings/UpdateResourceConfigButton.tsx b/src/components/editor/Bindings/UpdateResourceConfigButton.tsx
@@ -2,6 +2,7 @@ import { Button } from '@mui/material';
 import { AddCollectionDialogCTAProps } from 'components/shared/Entity/types';
 import invariableStores from 'context/Zustand/invariableStores';
 import useTrialCollections from 'hooks/trialStorage/useTrialCollections';
+import { useState } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 import {
@@ -15,6 +16,8 @@ import { hasLength } from 'utils/misc-utils';
 import { useStore } from 'zustand';
 
 function UpdateResourceConfigButton({ toggle }: AddCollectionDialogCTAProps) {
+    const [updating, setUpdating] = useState(false);
+
     const [selected] = useStore(
         invariableStores['Entity-Selector-Table'],
         (state) => {
@@ -35,6 +38,8 @@ function UpdateResourceConfigButton({ toggle }: AddCollectionDialogCTAProps) {
         useBinding_setRestrictedDiscoveredCollections();
 
     const close = () => {
+        setUpdating(true);
+
         const value = Array.from(selected).map(([_id, row]) => {
             return {
                 name: row.catalog_name,
@@ -60,13 +65,14 @@ function UpdateResourceConfigButton({ toggle }: AddCollectionDialogCTAProps) {
             }
         }
 
+        setUpdating(false);
         toggle(false);
     };
 
     return (
         <Button
             variant="contained"
-            disabled={selected.size < 1}
+            disabled={selected.size < 1 || updating}
             onClick={close}
         >
             <FormattedMessage id="cta.continue" />

diff --git a/src/components/materialization/SourceCapture/AddSourceCaptureToSpecButton.tsx b/src/components/materialization/SourceCapture/AddSourceCaptureToSpecButton.tsx
@@ -2,6 +2,7 @@ import { Button } from '@mui/material';
 import { AddCollectionDialogCTAProps } from 'components/shared/Entity/types';
 import invariableStores from 'context/Zustand/invariableStores';
 import useTrialCollections from 'hooks/trialStorage/useTrialCollections';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import {
     useBinding_prefillResourceConfigs,
@@ -14,6 +15,8 @@ import { useStore } from 'zustand';
 import useSourceCapture from '../useSourceCapture';
 
 function AddSourceCaptureToSpecButton({ toggle }: AddCollectionDialogCTAProps) {
+    const [updating, setUpdating] = useState(false);
+
     const [selected] = useStore(
         invariableStores['Entity-Selector-Table'],
         (state) => {
@@ -44,6 +47,8 @@ function AddSourceCaptureToSpecButton({ toggle }: AddCollectionDialogCTAProps) {
     const prefillResourceConfigs = useBinding_prefillResourceConfigs();
 
     const close = async () => {
+        setUpdating(true);
+
         const selectedRow = Array.from(selected).map(([_key, row]) => row)[0];
         const updatedSourceCaptureName = selectedRow
             ? selectedRow.catalog_name
@@ -83,7 +88,10 @@ function AddSourceCaptureToSpecButton({ toggle }: AddCollectionDialogCTAProps) {
             if (nameUpdated) {
                 setSourceCapture(updatedSourceCapture.capture);
 
-                if (selectedRow?.writes_to) {
+                if (
+                    selectedRow?.writes_to &&
+                    selectedRow?.writes_to.length > 0
+                ) {
                     prefillResourceConfigs(
                         selectedRow.writes_to,
                         true,
@@ -105,11 +113,12 @@ function AddSourceCaptureToSpecButton({ toggle }: AddCollectionDialogCTAProps) {
             await updateDraft(updatedSourceCapture);
         }
 
+        setUpdating(false);
         toggle(false);
     };
 
     return (
-        <Button variant="contained" onClick={close}>
+        <Button variant="contained" onClick={close} disabled={updating}>
             <FormattedMessage id="cta.continue" />
         </Button>
     );