Merge pull request #2346 from target/typescript-conversion-AdminDialog

ui/admin: convert file to typescript

web/src/app/admin/AdminDialog.js → web/src/app/admin/AdminDialog.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import p from 'prop-types'
 import List from '@mui/material/List'
 import ListItem from '@mui/material/ListItem'
 import ListItemText from '@mui/material/ListItemText'
@@ -8,42 +7,59 @@ import { omit } from 'lodash'
 import FormDialog from '../dialogs/FormDialog'
 import { nonFieldErrors, fieldErrors } from '../util/errutil'
 import Diff from '../util/Diff'
-import { useMutation } from '@apollo/client'
+import { DocumentNode, useMutation } from '@apollo/client'
+import { ConfigValue } from '../../schema'
 
-function AdminDialog(props) {
+interface FieldValues {
+  [id: string]: string
+}
+
+interface AdminDialogProps {
+  mutation: DocumentNode
+  values: ConfigValue[]
+  fieldValues: FieldValues
+  onClose: () => void
+  onComplete: () => void
+}
+
+function AdminDialog(props: AdminDialogProps): JSX.Element {
   const [commit, { error }] = useMutation(props.mutation, {
     onCompleted: props.onComplete,
   })
   const changeKeys = Object.keys(props.fieldValues)
   const changes = props.values
-    .filter((v) => changeKeys.includes(v.id))
+    .filter((v: { id: string }) => changeKeys.includes(v.id))
     .map((orig) => ({
       id: orig.id,
       oldValue: orig.value,
       value: props.fieldValues[orig.id],
       type: orig.type || typeof orig.value,
     }))
 
+  const nonFieldErrs = nonFieldErrors(error).map((e) => ({
+    message: e.message,
+  }))
+  const fieldErrs = fieldErrors(error).map((e) => ({
+    message: `${e.field}: ${e.message}`,
+  }))
+  const errs = nonFieldErrs.concat(fieldErrs)
+
   return (
     <FormDialog
       title={`Apply Configuration Change${changes.length > 1 ? 's' : ''}?`}
       onClose={props.onClose}
       onSubmit={() =>
         commit({
           variables: {
-            input: changes.map((c) => {
+            input: changes.map((c: { value: string; type: string }) => {
               c.value = c.value === '' && c.type === 'number' ? '0' : c.value
               return omit(c, ['oldValue', 'type'])
             }),
           },
         })
       }
       primaryActionLabel='Confirm'
-      errors={nonFieldErrors(error).concat(
-        fieldErrors(error).map((e) => ({
-          message: `${e.field}: ${e.message}`,
-        })),
-      )}
+      errors={errs}
       form={
         <List data-cy='confirmation-diff'>
           {changes.map((c) => (
@@ -76,12 +92,4 @@ function AdminDialog(props) {
   )
 }
 
-AdminDialog.propTypes = {
-  mutation: p.object.isRequired,
-  values: p.array.isRequired,
-  fieldValues: p.object.isRequired,
-  onClose: p.func.isRequired,
-  onComplete: p.func.isRequired,
-}
-
 export default AdminDialog