further work on package dialogs

quiltdata · Aug 18, 2021 · 8a30666 · 8a30666
1 parent 8692142
commit 8a30666
Show file tree

Hide file tree

Showing 3 changed files with 139 additions and 187 deletions.
diff --git a/catalog/app/containers/Bucket/PackageCreateDialog.tsx b/catalog/app/containers/Bucket/PackageCreateDialog.tsx
@@ -1,9 +1,10 @@
+import * as R from 'ramda'
 import * as React from 'react'
 import * as redux from 'react-redux'
 
-import * as Intercom from 'components/Intercom'
 import * as authSelectors from 'containers/Auth/selectors'
 import * as AWS from 'utils/AWS'
+import AsyncResult from 'utils/AsyncResult'
 import * as BucketPreferences from 'utils/BucketPreferences'
 import * as Data from 'utils/Data'
 import type * as workflows from 'utils/workflows'
@@ -13,7 +14,9 @@ import * as requests from './requests'
 
 interface UsePackageCreateDialogProps {
   bucket: string
-  onExited: (result: { pushed: false | PD.PackageCreationSuccess }) => boolean
+  onExited: (result: {
+    pushed: PD.PackageCreationSuccess | false
+  }) => boolean | undefined | void
 }
 
 export function usePackageCreateDialog({
@@ -22,87 +25,37 @@ export function usePackageCreateDialog({
 }: UsePackageCreateDialogProps) {
   const s3 = AWS.S3.use()
 
-  const [isOpen, setOpen] = React.useState(false)
-  // const [wasOpened, setWasOpened] = React.useState(false)
-  const [exited, setExited] = React.useState(!isOpen)
-  const [success, setSuccess] = React.useState<PD.PackageCreationSuccess | false>(false)
-  const [submitting, setSubmitting] = React.useState(false)
-  // const [key, setKey] = React.useState(1)
-  const [workflow, setWorkflow] = React.useState<workflows.Workflow>()
-
   const workflowsData = Data.use(requests.workflowsConfig, { s3, bucket })
-  // const workflowsData = Data.use(requests.workflowsConfig, { s3, bucket }, { noAutoFetch: !wasOpened })
   // XXX: use AsyncResult
   const preferences = BucketPreferences.use()
 
-  const open = React.useCallback(() => {
-    setOpen(true)
-    // setWasOpened(true)
-    setExited(false)
-  }, [setOpen, /* setWasOpened, */ setExited])
-
-  const close = React.useCallback(() => {
-    if (submitting) return
-    setOpen(false)
-    setWorkflow(undefined) // TODO: is this necessary?
-  }, [submitting, setOpen])
-
-  const handleExited = React.useCallback(() => {
-    setExited(true)
-    setSuccess(false)
-    if (onExited) {
-      onExited({ pushed: success })
-    }
-  }, [setExited, setSuccess, success, onExited])
-
-  Intercom.usePauseVisibilityWhen(isOpen)
+  const data = workflowsData.case({
+    Ok: (workflowsConfig: workflows.WorkflowsConfig) =>
+      preferences
+        ? AsyncResult.Ok({
+            workflowsConfig,
+            sourceBuckets: preferences.ui.sourceBuckets,
+          })
+        : AsyncResult.Pending(),
+    _: R.identity,
+  })
 
   const username = redux.useSelector(authSelectors.username)
   const usernamePrefix = React.useMemo(() => PD.getUsernamePrefix(username), [username])
 
-  const state = React.useMemo<PD.PackageCreationDialogState>(() => {
-    if (exited) return PD.PackageCreationDialogState.Closed()
-    if (success) return PD.PackageCreationDialogState.Success(success)
-    return workflowsData.case({
-      Ok: (workflowsConfig: workflows.WorkflowsConfig) =>
-        preferences
-          ? PD.PackageCreationDialogState.Form({
-              workflowsConfig,
-              sourceBuckets: preferences.ui.sourceBuckets,
-            })
-          : PD.PackageCreationDialogState.Loading(),
-      Err: PD.PackageCreationDialogState.Error,
-      _: PD.PackageCreationDialogState.Loading,
-    })
-  }, [exited, success, workflowsData, preferences])
-
-  const element = (
-    <PD.PackageCreationDialog
-      state={state}
-      delayHashing
-      disableStateDisplay
-      ui={{
-        successTitle: 'Package created',
-        successRenderMessage: ({ packageLink }) => (
-          <>Package {packageLink} successfully created</>
-        ),
-        title: 'Create package',
-      }}
-      {...{
-        bucket,
-        close,
-        exited,
-        onExited: handleExited,
-        isOpen,
-        name: usernamePrefix,
-        setSubmitting,
-        setSuccess,
-        setWorkflow,
-        success,
-        workflow,
-      }}
-    />
-  )
-
-  return { open, close, element }
+  return PD.usePackageCreationDialog({
+    bucket,
+    data,
+    delayHashing: true,
+    disableStateDisplay: true,
+    name: usernamePrefix,
+    onExited,
+    ui: {
+      successTitle: 'Package created',
+      successRenderMessage: ({ packageLink }) => (
+        <>Package {packageLink} successfully created</>
+      ),
+      title: 'Create package',
+    },
+  })
 }
diff --git a/catalog/app/containers/Bucket/PackageDialog/PackageCreationForm.tsx b/catalog/app/containers/Bucket/PackageDialog/PackageCreationForm.tsx
@@ -5,6 +5,8 @@ import * as React from 'react'
 import * as RF from 'react-final-form'
 import * as M from '@material-ui/core'
 
+import * as Intercom from 'components/Intercom'
+import AsyncResult from 'utils/AsyncResult'
 import * as BucketPreferences from 'utils/BucketPreferences'
 import * as s3paths from 'utils/s3paths'
 import * as tagged from 'utils/taggedV2'
@@ -474,20 +476,17 @@ export type PackageCreationDialogState = tagged.InstanceOf<
   typeof PackageCreationDialogState
 >
 
-interface PackageCreationDialogProps {
+interface UsePackageCreationDialogProps {
   bucket: string
-  close: () => void
+  data?: $TSFixMe // AsyncResult<{ manifest, workflowsConfig, sourceBuckets }>
   delayHashing?: boolean
   disableStateDisplay?: boolean
-  exited: boolean
-  onExited: () => void
-  isOpen: boolean
+  fetch?: () => void
   name?: string
-  setSubmitting: (submitting: boolean) => void
-  setSuccess: (success: PackageCreationSuccess | false) => void
-  setWorkflow: (workflow?: workflows.Workflow) => void
-  state: PackageCreationDialogState
-  success: PackageCreationSuccess | false
+  onExited: (result: {
+    pushed: PackageCreationSuccess | false
+  }) => boolean | undefined | void
+  refresh?: () => void
   ui?: {
     resetFiles?: React.ReactNode
     submit?: React.ReactNode
@@ -496,33 +495,68 @@ interface PackageCreationDialogProps {
     successTitle?: React.ReactNode
     title?: React.ReactNode
   }
-  workflow?: workflows.Workflow
 }
 
-export function PackageCreationDialog({
+export function usePackageCreationDialog({
   bucket,
-  close,
+  data,
   delayHashing = false,
   disableStateDisplay = false,
-  exited,
-  onExited,
-  isOpen,
+  fetch,
   name,
-  setSubmitting,
-  setSuccess,
-  setWorkflow,
-  state,
-  success,
+  onExited,
+  refresh,
   ui = {},
-  workflow,
-}: PackageCreationDialogProps) {
-  return (
+}: UsePackageCreationDialogProps) {
+  const [isOpen, setOpen] = React.useState(false)
+  const [exited, setExited] = React.useState(!isOpen)
+  const [success, setSuccess] = React.useState<PackageCreationSuccess | false>(false)
+  const [submitting, setSubmitting] = React.useState(false)
+  const [workflow, setWorkflow] = React.useState<workflows.Workflow>()
+
+  const open = React.useCallback(() => {
+    setOpen(true)
+    fetch?.()
+    setExited(false)
+  }, [setOpen, fetch, setExited])
+
+  const close = React.useCallback(() => {
+    if (submitting) return
+    setOpen(false)
+    setWorkflow(undefined) // TODO: is this necessary?
+  }, [submitting, setOpen])
+
+  const handleExited = React.useCallback(() => {
+    setExited(true)
+    setSuccess(false)
+    if (onExited) {
+      const shouldRefresh = onExited({ pushed: success })
+      if (shouldRefresh) refresh?.()
+    }
+  }, [setExited, setSuccess, success, onExited, refresh])
+
+  Intercom.usePauseVisibilityWhen(isOpen)
+
+  const state = React.useMemo<PackageCreationDialogState>(() => {
+    if (exited) return PackageCreationDialogState.Closed()
+    if (success) return PackageCreationDialogState.Success(success)
+    return AsyncResult.case(
+      {
+        Ok: PackageCreationDialogState.Form,
+        Err: PackageCreationDialogState.Error,
+        _: PackageCreationDialogState.Loading,
+      },
+      data,
+    )
+  }, [exited, success, data])
+
+  const element = (
     <PD.DialogWrapper
       exited={exited}
       fullWidth
       maxWidth={success ? 'sm' : 'lg'}
       onClose={close}
-      onExited={onExited}
+      onExited={handleExited}
       open={isOpen}
       scroll="body"
     >
@@ -591,4 +625,6 @@ export function PackageCreationDialog({
       )}
     </PD.DialogWrapper>
   )
+
+  return { open, close, element }
 }