TSify utils/Dialogs and some related code

catalog/app/containers/Admin/Buckets/Buckets.tsx

@@ -1296,7 +1296,6 @@ function CRUD({ bucketName }: CRUDProps) {
       title: 'Add bucket',
       icon: <M.Icon>add</M.Icon>,
       fn: React.useCallback(() => {
-        // @ts-expect-error
         openDialog(({ close }) => <Add {...{ close }} />)
       }, [openDialog]),
     },
@@ -1311,7 +1310,6 @@ function CRUD({ bucketName }: CRUDProps) {
       title: 'Delete',
       icon: <M.Icon>delete</M.Icon>,
       fn: () => {
-        // @ts-expect-error
         openDialog(({ close }) => <Delete {...{ bucket, close }} />)
       },
     },

catalog/app/containers/Admin/RolesAndPolicies/Roles.tsx

@@ -634,7 +634,7 @@
 
 interface SettingsMenuProps {
   role: Role
-  openDialog: (render: (props: DialogsOpenProps) => JSX.Element, props?: $TSFixMe) => void
+  openDialog: Dialogs.Dialogs['open']
 }
 
 function SettingsMenu({ role, openDialog }: SettingsMenuProps) {
@@ -684,11 +684,6 @@
   )
 }
 
-// XXX: move to dialogs module
-interface DialogsOpenProps {
-  close: (reason?: string) => void
-}
-
 export default function Roles() {
   const data = GQL.useQueryS(ROLES_QUERY)
   const rows = data.roles
@@ -709,7 +704,7 @@
       title: 'Create',
       icon: <M.Icon>add</M.Icon>,
       fn: React.useCallback(() => {
-        dialogs.open(({ close }: DialogsOpenProps) => <Create {...{ close }} />)
+        dialogs.open(({ close }) => <Create {...{ close }} />)
       }, [dialogs.open]), // eslint-disable-line react-hooks/exhaustive-deps
     },
   ]
@@ -726,7 +721,7 @@
       title: 'Edit',
       icon: <M.Icon>edit</M.Icon>,
       fn: () => {
-        dialogs.open(({ close }: DialogsOpenProps) => (
+        dialogs.open(({ close }) => (
           <Edit
             {...{
               role,

catalog/app/containers/Bucket/PackageDialog/PackageCreationForm.tsx

@@ -93,12 +93,11 @@
   return FI.computeHash(f) as FI.LocalFile
 }
 
-// XXX: move to dialogs module
-interface DialogsOpenProps {
-  close: (reason?: string) => void
+interface ConfirmReadmeProps {
+  close: Dialogs.Close<'cancel' | 'empty' | 'readme'>
 }
 
-function ConfirmReadme({ close }: DialogsOpenProps) {
+function ConfirmReadme({ close }: ConfirmReadmeProps) {
   return (
     <>
       <M.DialogTitle>Add a README file?</M.DialogTitle>
@@ -311,7 +310,7 @@
     const entries = filesStateToEntries(files)
 
     if (!entries.length) {
-      const reason = await dialogs.open((props: DialogsOpenProps) => (
+      const reason = await dialogs.open<'cancel' | 'empty' | 'readme'>((props) => (
         <ConfirmReadme {...props} />
       ))
       if (reason === 'cancel') return mkFormError(CANCEL)

catalog/app/utils/Dialogs.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+import defer from 'utils/defer'
+import type { Resolver } from 'utils/defer'
+
+type DialogState = 'open' | 'closing' | 'closed'
+
+type ExtraDialogProps = Omit<M.DialogProps, 'open' | 'onClose' | 'onExited'>
+
+export type Close<R> = [R] extends [never] ? () => void : Resolver<R>['resolve']
+
+type Render<R> = (props: { close: Close<R> }) => JSX.Element
+
+interface Dialog {
+  render: Render<any>
+  props?: ExtraDialogProps
+  resolver: Resolver<any>
+}
+
+export const useDialogs = () => {
+  const [state, setState] = React.useState<DialogState>('closed')
+  const [dialog, setDialog] = React.useState<Dialog | null>(null)
+
+  const open = React.useCallback(
+    <R = never,>(render: Render<R>, props?: ExtraDialogProps) => {
+      const { resolver, promise } = defer<R>()
+      setDialog({ render, props, resolver })
+      setState('open')
+      return promise
+    },
+    [setDialog, setState],
+  )
+
+  const close = React.useCallback(
+    (reason: any) => {
+      if (dialog) dialog.resolver.resolve(reason)
+      setState('closing')
+    },
+    [setState, dialog],
+  )
+
+  const cleanup = React.useCallback(() => {
+    if (state === 'closing') {
+      setState('closed')
+      setDialog(null)
+    }
+  }, [state, setState, setDialog])
+
+  const render = (props?: ExtraDialogProps) => (
+    <M.Dialog
+      open={state === 'open'}
+      onClose={close}
+      onExited={cleanup}
+      {...props}
+      {...dialog?.props}
+    >
+      {dialog ? dialog.render({ close }) : ''}
+    </M.Dialog>
+  )
+
+  return { open, render }
+}
+
+export const use = useDialogs
+
+export type Dialogs = ReturnType<typeof use>

catalog/app/utils/defer.ts

@@ -1,9 +1,9 @@
-interface Resolver<T> {
+export interface Resolver<T> {
   resolve: (value: T | PromiseLike<T>) => void
   reject: (reason?: any) => void
 }
 
-interface Deferred<T> {
+export interface Deferred<T> {
   resolver: Resolver<T>
   promise: Promise<T>
 }