From e55b31db90e3a42f584a8a20401b34512f7ace49 Mon Sep 17 00:00:00 2001
From: Tony Vu <tonyvu527@gmail.com>
Date: Wed, 27 Apr 2022 16:31:00 -0500
Subject: [PATCH 1/2] convert file to typescript

---
 web/src/app/admin/AdminDialog.js  |  87 -----------------------
 web/src/app/admin/AdminDialog.tsx | 111 ++++++++++++++++++++++++++++++
 2 files changed, 111 insertions(+), 87 deletions(-)
 delete mode 100644 web/src/app/admin/AdminDialog.js
 create mode 100644 web/src/app/admin/AdminDialog.tsx

diff --git a/web/src/app/admin/AdminDialog.js b/web/src/app/admin/AdminDialog.js
deleted file mode 100644
index 89ef123907..0000000000
--- a/web/src/app/admin/AdminDialog.js
+++ /dev/null
@@ -1,87 +0,0 @@
-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'
-import Typography from '@mui/material/Typography'
-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'
-
-function AdminDialog(props) {
-  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))
-    .map((orig) => ({
-      id: orig.id,
-      oldValue: orig.value,
-      value: props.fieldValues[orig.id],
-      type: orig.type || typeof orig.value,
-    }))
-
-  return (
-    <FormDialog
-      title={`Apply Configuration Change${changes.length > 1 ? 's' : ''}?`}
-      onClose={props.onClose}
-      onSubmit={() =>
-        commit({
-          variables: {
-            input: changes.map((c) => {
-              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}`,
-        })),
-      )}
-      form={
-        <List data-cy='confirmation-diff'>
-          {changes.map((c) => (
-            <ListItem divider key={c.id} data-cy={'diff-' + c.id}>
-              <ListItemText
-                disableTypography
-                secondary={
-                  <Diff
-                    oldValue={
-                      c.type === 'stringList'
-                        ? c.oldValue.split(/\n/).join(', ')
-                        : c.oldValue.toString()
-                    }
-                    newValue={
-                      c.type === 'stringList'
-                        ? c.value.split(/\n/).join(', ')
-                        : c.value.toString()
-                    }
-                    type={c.type === 'boolean' ? 'words' : 'chars'}
-                  />
-                }
-              >
-                <Typography>{c.id}</Typography>
-              </ListItemText>
-            </ListItem>
-          ))}
-        </List>
-      }
-    />
-  )
-}
-
-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
diff --git a/web/src/app/admin/AdminDialog.tsx b/web/src/app/admin/AdminDialog.tsx
new file mode 100644
index 0000000000..7ab3eb3a2c
--- /dev/null
+++ b/web/src/app/admin/AdminDialog.tsx
@@ -0,0 +1,111 @@
+import React from 'react'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemText from '@mui/material/ListItemText'
+import Typography from '@mui/material/Typography'
+import { omit } from 'lodash'
+import FormDialog from '../dialogs/FormDialog'
+import { nonFieldErrors, fieldErrors } from '../util/errutil'
+import Diff from '../util/Diff'
+import {
+  DocumentNode,
+  OperationVariables,
+  TypedDocumentNode,
+  useMutation,
+} from '@apollo/client'
+
+interface Value {
+  id: string
+  oldValue: number
+  value: number
+  type: string
+}
+
+interface FieldValues {
+  [id: string]: string
+}
+
+interface AdminDialogProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  mutation: DocumentNode | TypedDocumentNode<any, OperationVariables>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  values: Value[] | any
+  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: { id: string }) => changeKeys.includes(v.id))
+    .map((orig: { id: string | number; value: number; type: string }) => ({
+      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: { value: string; type: string }) => {
+              c.value = c.value === '' && c.type === 'number' ? '0' : c.value
+              return omit(c, ['oldValue', 'type'])
+            }),
+          },
+        })
+      }
+      primaryActionLabel='Confirm'
+      errors={errs}
+      form={
+        <List data-cy='confirmation-diff'>
+          {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            changes.map((c: any) => (
+              <ListItem divider key={c.id} data-cy={'diff-' + c.id}>
+                <ListItemText
+                  disableTypography
+                  secondary={
+                    <Diff
+                      oldValue={
+                        c.type === 'stringList'
+                          ? c.oldValue.split(/\n/).join(', ')
+                          : c.oldValue.toString()
+                      }
+                      newValue={
+                        c.type === 'stringList'
+                          ? c.value.split(/\n/).join(', ')
+                          : c.value.toString()
+                      }
+                      type={c.type === 'boolean' ? 'words' : 'chars'}
+                    />
+                  }
+                >
+                  <Typography>{c.id}</Typography>
+                </ListItemText>
+              </ListItem>
+            ))
+          }
+        </List>
+      }
+    />
+  )
+}
+
+export default AdminDialog

From 17ee76371d30858e7c4c8f0aa976dabc6141cc32 Mon Sep 17 00:00:00 2001
From: Tony Vu <tonyvu527@gmail.com>
Date: Mon, 2 May 2022 12:41:10 -0500
Subject: [PATCH 2/2] fix types

---
 web/src/app/admin/AdminDialog.tsx | 74 ++++++++++++-------------------
 1 file changed, 29 insertions(+), 45 deletions(-)

diff --git a/web/src/app/admin/AdminDialog.tsx b/web/src/app/admin/AdminDialog.tsx
index 7ab3eb3a2c..8cf3f7f3a5 100644
--- a/web/src/app/admin/AdminDialog.tsx
+++ b/web/src/app/admin/AdminDialog.tsx
@@ -7,29 +7,16 @@ import { omit } from 'lodash'
 import FormDialog from '../dialogs/FormDialog'
 import { nonFieldErrors, fieldErrors } from '../util/errutil'
 import Diff from '../util/Diff'
-import {
-  DocumentNode,
-  OperationVariables,
-  TypedDocumentNode,
-  useMutation,
-} from '@apollo/client'
-
-interface Value {
-  id: string
-  oldValue: number
-  value: number
-  type: string
-}
+import { DocumentNode, useMutation } from '@apollo/client'
+import { ConfigValue } from '../../schema'
 
 interface FieldValues {
   [id: string]: string
 }
 
 interface AdminDialogProps {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  mutation: DocumentNode | TypedDocumentNode<any, OperationVariables>
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  values: Value[] | any
+  mutation: DocumentNode
+  values: ConfigValue[]
   fieldValues: FieldValues
   onClose: () => void
   onComplete: () => void
@@ -42,7 +29,7 @@ function AdminDialog(props: AdminDialogProps): JSX.Element {
   const changeKeys = Object.keys(props.fieldValues)
   const changes = props.values
     .filter((v: { id: string }) => changeKeys.includes(v.id))
-    .map((orig: { id: string | number; value: number; type: string }) => ({
+    .map((orig) => ({
       id: orig.id,
       oldValue: orig.value,
       value: props.fieldValues[orig.id],
@@ -75,33 +62,30 @@ function AdminDialog(props: AdminDialogProps): JSX.Element {
       errors={errs}
       form={
         <List data-cy='confirmation-diff'>
-          {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            changes.map((c: any) => (
-              <ListItem divider key={c.id} data-cy={'diff-' + c.id}>
-                <ListItemText
-                  disableTypography
-                  secondary={
-                    <Diff
-                      oldValue={
-                        c.type === 'stringList'
-                          ? c.oldValue.split(/\n/).join(', ')
-                          : c.oldValue.toString()
-                      }
-                      newValue={
-                        c.type === 'stringList'
-                          ? c.value.split(/\n/).join(', ')
-                          : c.value.toString()
-                      }
-                      type={c.type === 'boolean' ? 'words' : 'chars'}
-                    />
-                  }
-                >
-                  <Typography>{c.id}</Typography>
-                </ListItemText>
-              </ListItem>
-            ))
-          }
+          {changes.map((c) => (
+            <ListItem divider key={c.id} data-cy={'diff-' + c.id}>
+              <ListItemText
+                disableTypography
+                secondary={
+                  <Diff
+                    oldValue={
+                      c.type === 'stringList'
+                        ? c.oldValue.split(/\n/).join(', ')
+                        : c.oldValue.toString()
+                    }
+                    newValue={
+                      c.type === 'stringList'
+                        ? c.value.split(/\n/).join(', ')
+                        : c.value.toString()
+                    }
+                    type={c.type === 'boolean' ? 'words' : 'chars'}
+                  />
+                }
+              >
+                <Typography>{c.id}</Typography>
+              </ListItemText>
+            </ListItem>
+          ))}
         </List>
       }
     />