ui/service: convert ServiceLabelForm to typescript

web/src/app/forms/FormField.jsx

@@ -219,6 +219,8 @@ FormField.propTypes = {
   // passed to the parent form's state.
   mapOnChangeValue: p.func,
 
+  onCreate: p.func,
+
   // Adjusts props for usage with a Checkbox component.
   checkbox: p.bool,
 

web/src/app/services/ServiceLabelEditDialog.tsx

@@ -7,11 +7,6 @@ import ServiceLabelForm from './ServiceLabelForm'
 import Spinner from '../loading/components/Spinner'
 import { Label } from '../../schema'
 
-interface Value {
-  key: string
-  value: string
-}
-
 const mutation = gql`
   mutation ($input: SetLabelInput!) {
     setLabel(input: $input)
@@ -35,7 +30,7 @@ export default function ServiceLabelEditDialog(props: {
   onClose: () => void
 }): JSX.Element {
   const { onClose, labelKey, serviceID } = props
-  const [value, setValue] = useState<Value | null>(null)
+  const [value, setValue] = useState<Label | null>(null)
 
   const [{ data, fetching }] = useQuery({
     query,
@@ -85,7 +80,7 @@ export default function ServiceLabelEditDialog(props: {
           editValueOnly
           disabled={updateLabelStatus.fetching}
           value={value || defaultValue}
-          onChange={(value: Value) => setValue(value)}
+          onChange={(value: Label) => setValue(value)}
         />
       }
     />

web/src/app/services/ServiceLabelForm.jsx → web/src/app/services/ServiceLabelForm.tsx

@@ -1,18 +1,28 @@
 import React from 'react'
-import p from 'prop-types'
 import { FormContainer, FormField } from '../forms'
 import Grid from '@mui/material/Grid'
 import TextField from '@mui/material/TextField'
 import { LabelKeySelect } from '../selection/LabelKeySelect'
 import { Config } from '../util/RequireConfig'
+import { Label } from '../../schema'
 
-function validateKey(value) {
+function validateKey(value: string): Error | undefined {
   const parts = value.split('/')
   if (parts.length !== 2)
     return new Error('Must be in the format: "example/KeyName".')
 }
 
-export default function LabelForm(props) {
+interface LabelFormProps {
+  value: Label
+  errors: Error[]
+
+  onChange: (value: Label) => void
+  editValueOnly?: boolean
+  disabled?: boolean
+  create?: boolean
+}
+
+export default function LabelForm(props: LabelFormProps): React.JSX.Element {
   const { editValueOnly = false, create, ...otherProps } = props
 
   return (
@@ -29,9 +39,10 @@ export default function LabelForm(props) {
                 name='key'
                 required
                 onCreate={
-                  // if create is enabled, allow new keys to be provided
-                  !cfg['General.DisableLabelCreation'] &&
-                  ((key) => otherProps.onChange({ ...otherProps.value, key }))
+                  !cfg['General.DisableLabelCreation']
+                    ? (key: string) =>
+                        otherProps.onChange({ ...otherProps.value, key })
+                    : undefined
                 }
                 validate={validateKey}
               />
@@ -51,22 +62,3 @@ export default function LabelForm(props) {
     </FormContainer>
   )
 }
-LabelForm.propTypes = {
-  value: p.shape({
-    key: p.string.isRequired,
-    value: p.string.isRequired,
-  }).isRequired,
-
-  errors: p.arrayOf(
-    p.shape({
-      field: p.oneOf(['key', 'value']).isRequired,
-      message: p.string.isRequired,
-    }),
-  ),
-
-  onChange: p.func,
-
-  editValueOnly: p.bool,
-  create: p.bool,
-  disabled: p.bool,
-}