Use meta.validating instead of manually control state (#3994)

quiltdata · Jun 13, 2024 · 1c2b4e3 · 1c2b4e3
1 parent b58a355
commit 1c2b4e3
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 12 deletions.
diff --git a/catalog/app/containers/Bucket/PackageDialog/FilesInput.tsx b/catalog/app/containers/Bucket/PackageDialog/FilesInput.tsx
@@ -1333,7 +1333,6 @@ interface FilesInputProps {
     onChange: (value: FilesState) => void
   }
   className?: string
-  disabled?: boolean
   errors?: Record<string, React.ReactNode>
   meta: RF.FieldMetaState<FilesState> & { initial: FilesState }
   onFilesAction?: (
@@ -1361,7 +1360,6 @@ interface FilesInputProps {
 export function FilesInput({
   input: { value, onChange },
   className,
-  disabled = false,
   errors = {},
   meta,
   onFilesAction,
@@ -1391,13 +1389,13 @@ export function FilesInput({
     }
   }
 
-  const submitting = meta.submitting || meta.submitSucceeded
+  const disabled = meta.submitting || meta.submitSucceeded || meta.validating
   const error =
     meta.submitFailed && (meta.error || (!meta.dirtySinceLastSubmit && meta.submitError))
 
   const refProps = {
     value,
-    disabled: disabled || submitting,
+    disabled,
     initial: meta.initial,
     onChange,
     onFilesAction,
@@ -1509,7 +1507,7 @@ export function FilesInput({
       <Header>
         <HeaderTitle
           state={
-            submitting || disabled // eslint-disable-line no-nested-ternary
+            disabled // eslint-disable-line no-nested-ternary
               ? 'disabled'
               : error // eslint-disable-line no-nested-ternary
               ? 'error'
@@ -1617,12 +1615,12 @@ export function FilesInput({
 
           <DropzoneMessage error={error && (errors[error] || error)} warn={warn} />
         </Contents>
-        {(submitting || disabled) && <Lock progress={totalProgress} />}
+        {disabled && <Lock progress={totalProgress} />}
       </ContentsContainer>
       <div className={classes.actions}>
         <M.Button
           onClick={open}
-          disabled={submitting || disabled}
+          disabled={disabled}
           className={classes.action}
           variant="outlined"
           size="small"
@@ -1632,7 +1630,7 @@ export function FilesInput({
         {isS3FilePickerEnabled ? (
           <M.Button
             onClick={handleS3Btn}
-            disabled={submitting || disabled}
+            disabled={disabled}
             className={classes.action}
             variant="outlined"
             size="small"

diff --git a/catalog/app/containers/Bucket/PackageDialog/PackageCreationForm.tsx b/catalog/app/containers/Bucket/PackageDialog/PackageCreationForm.tsx
@@ -439,7 +439,6 @@ function PackageCreationForm({
     [nameWarning, nameExistence],
   )
 
-  const [filesDisabled, setFilesDisabled] = React.useState(false)
   const onFormChange = React.useCallback(
     ({ dirtyFields, values }) => {
       if (dirtyFields?.name) handleNameChange(values.name)
@@ -452,11 +451,9 @@ function PackageCreationForm({
       const hashihgError = delayHashing && FI.validateHashingComplete(files)
       if (hashihgError) return hashihgError
 
-      setFilesDisabled(true)
       const entries = filesStateToEntries(files)
       const errors = await validateEntries(entries)
       setEntriesError(errors || null)
-      setFilesDisabled(false)
       if (errors?.length) {
         return 'schema'
       }
@@ -632,7 +629,6 @@ function PackageCreationForm({
                       validationErrors={
                         submitFailed ? entriesError : PD.EMPTY_ENTRIES_ERRORS
                       }
-                      disabled={filesDisabled}
                     />
                   )}