ui/services: convert HeartbeatMonitorCreateDialog to ts and use urql

web/src/app/services/HeartbeatMonitorCreateDialog.tsx

@@ -0,0 +1,59 @@
+import React, { useState } from 'react'
+import { gql, useMutation } from 'urql'
+import { fieldErrors, nonFieldErrors } from '../util/errutil'
+
+import FormDialog from '../dialogs/FormDialog'
+import HeartbeatMonitorForm, { Value } from './HeartbeatMonitorForm'
+
+const createMutation = gql`
+  mutation ($input: CreateHeartbeatMonitorInput!) {
+    createHeartbeatMonitor(input: $input) {
+      id
+    }
+  }
+`
+
+export default function HeartbeatMonitorCreateDialog(props: {
+  serviceID: string
+  onClose: () => void
+}): JSX.Element {
+  const [value, setValue] = useState<Value>({ name: '', timeoutMinutes: 15 })
+  const [createHeartbeatStatus, createHeartbeat] = useMutation(createMutation)
+
+  return (
+    <FormDialog
+      maxWidth='sm'
+      title='Create New Heartbeat Monitor'
+      loading={createHeartbeatStatus.fetching}
+      errors={nonFieldErrors(createHeartbeatStatus.error)}
+      onClose={props.onClose}
+      onSubmit={() =>
+        createHeartbeat(
+          {
+            input: {
+              name: value.name,
+              timeoutMinutes: value.timeoutMinutes,
+              serviceID: props.serviceID,
+            },
+          },
+          { additionalTypenames: ['HeartbeatMonitor'] },
+        ).then((result) => {
+          if (!result.error) {
+            props.onClose()
+          }
+        })
+      }
+      form={
+        <HeartbeatMonitorForm
+          errors={fieldErrors(createHeartbeatStatus.error).map((f) => ({
+            ...f,
+            field: f.field === 'timeout' ? 'timeoutMinutes' : f.field,
+          }))}
+          disabled={createHeartbeatStatus.fetching}
+          value={value}
+          onChange={(value: Value) => setValue(value)}
+        />
+      }
+    />
+  )
+}

web/src/app/services/HeartbeatMonitorForm.tsx

@@ -3,6 +3,7 @@ import Grid from '@mui/material/Grid'
 import TextField from '@mui/material/TextField'
 import { FormContainer, FormField } from '../forms'
 import NumberField from '../util/NumberField'
+import { FieldError } from '../util/errutil'
 
 function clampTimeout(val: string): number | string {
   if (!val) return ''
@@ -12,19 +13,19 @@ function clampTimeout(val: string): number | string {
   // need to have the min be 1 here so you can type `10`
   return Math.min(Math.max(1, num), 9000)
 }
-interface Value {
+export interface Value {
   name: string
-  timeoutMinutes: [number, string]
+  timeoutMinutes: [number, string] | number
 }
 interface HeartbeatMonitorFormProps {
   value: Value
 
-  errors: {
-    field: 'name' | 'timeoutMinutes'
-    message: string
-  }[]
+  errors: FieldError[]
 
   onChange: (val: Value) => void
+
+  // can be deleted when FormContainer.js is converted to ts
+  disabled: boolean
 }
 
 export default function HeartbeatMonitorForm(

web/src/cypress/integration/services.ts

@@ -352,11 +352,16 @@ function testServices(screen: ScreenFormat): void {
     it('should create a monitor', () => {
       const name = c.word({ length: 5 }) + ' Monitor'
       const timeoutMinutes = (Math.trunc(Math.random() * 10) + 5).toString()
+      const invalidName = 'a'
 
       cy.pageFab()
 
+      cy.dialogForm({ name: invalidName, timeoutMinutes })
+      cy.dialogClick('Submit')
+      cy.get('body').should('contain', 'Must be at least 2 characters')
+
       cy.dialogForm({ name, timeoutMinutes })
-      cy.dialogFinish('Submit')
+      cy.dialogFinish('Retry')
 
       cy.get('li').should('contain', name).should('contain', timeoutMinutes)
     })