fix(app): disable save button once clicked on name transfer screen (#…

…16235) fix RQA-3165
Opentrons · Sep 11, 2024 · 455d026 · 455d026
1 parent 9c83c6d
commit 455d026
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/app/src/organisms/QuickTransferFlow/NameQuickTransfer.tsx b/app/src/organisms/QuickTransferFlow/NameQuickTransfer.tsx
@@ -25,6 +25,7 @@ export function NameQuickTransfer(props: NameQuickTransferProps): JSX.Element {
   const { t } = useTranslation('quick_transfer')
   const [name, setName] = React.useState('')
   const keyboardRef = React.useRef(null)
+  const [isSaving, setIsSaving] = React.useState<boolean>(false)
 
   let error: string | null = null
   if (name.length > 60) {
@@ -38,9 +39,10 @@ export function NameQuickTransfer(props: NameQuickTransferProps): JSX.Element {
         header={t('name_your_transfer')}
         buttonText={t('save')}
         onClickButton={() => {
+          setIsSaving(true)
           onSave(name)
         }}
-        buttonIsDisabled={name === '' || error != null}
+        buttonIsDisabled={name === '' || error != null || isSaving}
       />
       <Flex
         // height of ChildNavigation

diff --git a/app/src/organisms/QuickTransferFlow/SaveOrRunModal.tsx b/app/src/organisms/QuickTransferFlow/SaveOrRunModal.tsx
@@ -19,7 +19,8 @@ interface SaveOrRunModalProps {
 
 export const SaveOrRunModal = (props: SaveOrRunModalProps): JSX.Element => {
   const { t } = useTranslation('quick_transfer')
-  const [showNameTransfer, setShowNameTransfer] = React.useState(false)
+  const [showNameTransfer, setShowNameTransfer] = React.useState<boolean>(false)
+  const [isLoading, setIsLoading] = React.useState<boolean>(false)
 
   return showNameTransfer ? (
     <NameQuickTransfer onSave={props.onSave} />
@@ -43,6 +44,7 @@ export const SaveOrRunModal = (props: SaveOrRunModalProps): JSX.Element => {
           <SmallButton
             width="50%"
             buttonText={t('save_for_later')}
+            disabled={isLoading}
             onClick={() => {
               setShowNameTransfer(true)
             }}
@@ -51,7 +53,11 @@ export const SaveOrRunModal = (props: SaveOrRunModalProps): JSX.Element => {
           <SmallButton
             width="50%"
             buttonText={t('run_now')}
-            onClick={props.onRun}
+            disabled={isLoading}
+            onClick={() => {
+              setIsLoading(true)
+              props.onRun()
+            }}
           />
         </Flex>
       </Flex>

diff --git a/app/src/organisms/QuickTransferFlow/__tests__/NameQuickTransfer.test.tsx b/app/src/organisms/QuickTransferFlow/__tests__/NameQuickTransfer.test.tsx
@@ -52,6 +52,7 @@ describe('NameQuickTransfer', () => {
     expect(saveBtn).toBeEnabled()
     fireEvent.click(saveBtn)
     expect(props.onSave).toHaveBeenCalled()
+    expect(saveBtn).toBeDisabled()
   })
 
   it('disables save if you enter more than 60 characters', () => {