ui/lists: use component type for create dialogs

web/src/app/escalation-policies/PolicyCreateDialog.js → web/src/app/escalation-policies/PolicyCreateDialog.tsx

@@ -1,11 +1,20 @@
 import React, { useState } from 'react'
 import { gql, useMutation } from '@apollo/client'
-import p from 'prop-types'
 import { fieldErrors, nonFieldErrors } from '../util/errutil'
 import FormDialog from '../dialogs/FormDialog'
 import PolicyForm from './PolicyForm'
 import { Redirect } from 'wouter'
 
+interface Value {
+  name: string
+  description: string
+  repeat: {
+    label: string
+    value: string
+  }
+  favorite: boolean
+}
+
 const mutation = gql`
   mutation ($input: CreateEscalationPolicyInput!) {
     createEscalationPolicy(input: $input) {
@@ -14,8 +23,8 @@ const mutation = gql`
   }
 `
 
-function PolicyCreateDialog(props) {
-  const [value, setValue] = useState(null)
+function PolicyCreateDialog(props: { onClose: () => void }): JSX.Element {
+  const [value, setValue] = useState<Value | null>(null)
   const defaultValue = {
     name: '',
     description: '',
@@ -56,15 +65,11 @@ function PolicyCreateDialog(props) {
           errors={fieldErrs}
           disabled={loading}
           value={value || defaultValue}
-          onChange={(value) => setValue(value)}
+          onChange={(value: Value) => setValue(value)}
         />
       }
     />
   )
 }
 
-PolicyCreateDialog.propTypes = {
-  onClose: p.func,
-}
-
 export default PolicyCreateDialog

web/src/app/escalation-policies/PolicyList.tsx

@@ -31,7 +31,7 @@ export default function PolicyList(): JSX.Element {
         url: n.id,
         isFavorite: n.isFavorite,
       })}
-      createForm={<PolicyCreateDialog />}
+      createDialogComponent={PolicyCreateDialog}
       createLabel='Escalation Policy'
     />
   )

web/src/app/lists/SimpleListPage.tsx

@@ -1,33 +1,26 @@
-import React, { useState, ReactElement } from 'react'
+import React, { ComponentType, useState } from 'react'
 import QueryList, { QueryListProps } from './QueryList'
 import CreateFAB from './CreateFAB'
 
 interface SimpleListPageProps extends QueryListProps {
-  createForm: ReactElement
+  createDialogComponent: ComponentType<{ onClose: () => void }>
   createLabel: string
 }
 
 export default function SimpleListPage(
   props: SimpleListPageProps,
 ): JSX.Element {
-  const { createForm, createLabel, ...rest } = props
+  const { createDialogComponent: DialogComponent, createLabel, ...rest } = props
   const [create, setCreate] = useState(false)
 
   return (
     <React.Fragment>
       <QueryList {...rest} />
-
-      {createForm && (
-        <CreateFAB
-          onClick={() => setCreate(true)}
-          title={`Create ${createLabel}`}
-        />
-      )}
-
-      {create &&
-        React.cloneElement(createForm, {
-          onClose: () => setCreate(false),
-        })}
+      <CreateFAB
+        onClick={() => setCreate(true)}
+        title={`Create ${createLabel}`}
+      />
+      {create && <DialogComponent onClose={() => setCreate(false)} />}
     </React.Fragment>
   )
 }

web/src/app/rotations/RotationList.tsx

@@ -31,7 +31,7 @@ export default function RotationList(): JSX.Element {
         url: n.id,
         isFavorite: n.isFavorite,
       })}
-      createForm={<RotationCreateDialog />}
+      createDialogComponent={RotationCreateDialog}
       createLabel='Rotation'
     />
   )

web/src/app/schedules/ScheduleCreateDialog.tsx

@@ -18,7 +18,7 @@ const mutation = gql`
 `
 
 export default function ScheduleCreateDialog(props: {
-  onClose?: () => void
+  onClose: () => void
 }): JSX.Element {
   const [value, setValue] = useState<Value>({
     name: '',

web/src/app/schedules/ScheduleDeleteDialog.tsx

@@ -20,7 +20,7 @@ const mutation = gql`
 `
 
 export default function ScheduleDeleteDialog(props: {
-  onClose?: () => void
+  onClose: () => void
   scheduleID: string
 }): JSX.Element {
   const [{ data, fetching }] = useQuery({

web/src/app/schedules/ScheduleList.tsx

@@ -31,7 +31,7 @@ export default function ScheduleList(): JSX.Element {
         url: n.id,
         isFavorite: n.isFavorite,
       })}
-      createForm={<ScheduleCreateDialog />}
+      createDialogComponent={ScheduleCreateDialog}
       createLabel='Schedule'
     />
   )

web/src/app/schedules/ScheduleOverrideCreateDialog.tsx

@@ -9,7 +9,7 @@ import useOverrideNotices from './useOverrideNotices'
 interface ScheduleOverrideCreateDialogProps {
   scheduleID: string
   variant: 'add' | 'remove' | 'replace'
-  onClose?: () => void
+  onClose: () => void
   removeUserReadOnly?: boolean
 }
 

web/src/app/services/ServiceCreateDialog.js → web/src/app/services/ServiceCreateDialog.tsx

@@ -1,14 +1,24 @@
 import React, { useState } from 'react'
-import { gql, useMutation } from '@apollo/client'
-
-import p from 'prop-types'
+import { ApolloError, gql, useMutation } from '@apollo/client'
 
 import { fieldErrors, nonFieldErrors } from '../util/errutil'
 
 import FormDialog from '../dialogs/FormDialog'
-import ServiceForm from './ServiceForm'
+import ServiceForm, { Value } from './ServiceForm'
 import { Redirect } from 'wouter'
 
+interface InputVar {
+  name: string
+  description: string
+  escalationPolicyID?: string
+  favorite: boolean
+  newEscalationPolicy?: {
+    name: string
+    description: string
+    steps: { delayMinutes: number; targets: { type: string; id: string }[] }[]
+  }
+}
+
 const createMutation = gql`
   mutation createService($input: CreateServiceInput!) {
     createService(input: $input) {
@@ -20,8 +30,11 @@ const createMutation = gql`
   }
 `
 
-function inputVars({ name, description, escalationPolicyID }, attempt = 0) {
-  const vars = {
+function inputVars(
+  { name, description, escalationPolicyID }: Value,
+  attempt = 0,
+): InputVar {
+  const vars: InputVar = {
     name,
     description,
     escalationPolicyID,
@@ -48,8 +61,10 @@ function inputVars({ name, description, escalationPolicyID }, attempt = 0) {
   return vars
 }
 
-export default function ServiceCreateDialog(props) {
-  const [value, setValue] = useState({
+export default function ServiceCreateDialog(props: {
+  onClose: () => void
+}): JSX.Element {
+  const [value, setValue] = useState<Value>({
     name: '',
     description: '',
     escalationPolicyID: '',
@@ -74,7 +89,7 @@ export default function ServiceCreateDialog(props) {
       onClose={props.onClose}
       onSubmit={() => {
         let n = 1
-        const onErr = (err) => {
+        const onErr = (err: ApolloError): Awaited<Promise<unknown>> => {
           // retry if it's a policy name conflict
           if (
             err.graphQLErrors &&
@@ -103,13 +118,9 @@ export default function ServiceCreateDialog(props) {
           errors={fieldErrs}
           disabled={loading}
           value={value}
-          onChange={(val) => setValue(val)}
+          onChange={(val: Value) => setValue(val)}
         />
       }
     />
   )
 }
-
-ServiceCreateDialog.propTypes = {
-  onClose: p.func,
-}

web/src/app/services/ServiceForm.tsx

@@ -3,8 +3,9 @@ import Grid from '@mui/material/Grid'
 import TextField from '@mui/material/TextField'
 import { EscalationPolicySelect } from '../selection/EscalationPolicySelect'
 import { FormContainer, FormField } from '../forms'
+import { FieldError } from '../util/errutil'
 
-interface Value {
+export interface Value {
   name: string
   description: string
   escalationPolicyID?: string
@@ -13,10 +14,7 @@ interface Value {
 interface ServiceFormProps {
   value: Value
 
-  errors: {
-    field: string
-    message: string
-  }[]
+  errors: FieldError[]
 
   onChange: (val: Value) => void
 

web/src/app/services/ServiceList.tsx

@@ -37,7 +37,7 @@ export default function ServiceList(): JSX.Element {
         url: n.id,
         isFavorite: n.isFavorite,
       })}
-      createForm={<ServiceCreateDialog />}
+      createDialogComponent={ServiceCreateDialog}
       createLabel='Service'
       searchAdornment={
         <ServiceLabelFilterContainer