dev: migrate from JSX.Element -> React.JSX.Element (part 1)

web/src/app/NewVersionCheck.tsx

@@ -33,7 +33,7 @@ const fetchCurrentVersion = (): Promise<string> =>
     .then((res) => res.text())
     .then((docStr) => extractMetaTagValue(docStr, 'x-goalert-version'))
 
-export default function NewVersionCheck(): JSX.Element {
+export default function NewVersionCheck(): React.JSX.Element {
   const [currentVersion, setCurrentVersion] = useState(GOALERT_VERSION)
   const [firstSeen, setFirstSeen] = useState(DateTime.utc())
   const [lastCheck, setLastCheck] = useState(DateTime.utc())

web/src/app/admin/AdminAPIKeys.tsx

@@ -51,7 +51,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }))
 
-export default function AdminAPIKeys(): JSX.Element {
+export default function AdminAPIKeys(): React.JSX.Element {
   const classes = useStyles()
   const [selectedAPIKey, setSelectedAPIKey] = useState<GQLAPIKey | null>(null)
   const [createDialog, setCreateDialog] = useState<boolean>(false)

web/src/app/admin/AdminConfig.tsx

@@ -81,7 +81,7 @@ function formatHeading(s = ''): string {
     .replace(/R Ls\b/, 'RLs') // fix usages of `URLs`
 }
 
-export default function AdminConfig(): JSX.Element {
+export default function AdminConfig(): React.JSX.Element {
   const classes = useStyles()
   const [confirm, setConfirm] = useState(false)
   const [values, setValues] = useState({})

web/src/app/admin/AdminDialog.tsx

@@ -34,7 +34,7 @@ interface AdminDialogProps {
   onComplete?: () => void
 }
 
-function AdminDialog(props: AdminDialogProps): JSX.Element {
+function AdminDialog(props: AdminDialogProps): React.JSX.Element {
   const [{ data, fetching, error: readError }] = useQuery({
     query: props.query || query,
   })

web/src/app/admin/AdminFieldComponents.tsx

@@ -17,11 +17,11 @@ interface InputProps {
   autoComplete?: string
 }
 
-export function StringInput(props: InputProps): JSX.Element {
+export function StringInput(props: InputProps): React.JSX.Element {
   const [showPassword, setShowPassword] = useState(false)
   const { onChange, password, type = 'text', ...rest } = props
 
-  const renderPasswordAdornment = (): JSX.Element | null => {
+  const renderPasswordAdornment = (): React.JSX.Element | null => {
     if (!props.password) return null
 
     return (
@@ -52,7 +52,7 @@ export function StringInput(props: InputProps): JSX.Element {
   )
 }
 
-export const StringListInput = (props: InputProps): JSX.Element => {
+export const StringListInput = (props: InputProps): React.JSX.Element => {
   const value = props.value ? props.value.split('\n').concat('') : ['']
   return (
     <Grid container spacing={1}>
@@ -80,7 +80,7 @@ export const StringListInput = (props: InputProps): JSX.Element => {
   )
 }
 
-export const IntegerInput = (props: InputProps): JSX.Element => (
+export const IntegerInput = (props: InputProps): React.JSX.Element => (
   <Input
     name={props.name}
     value={props.value}
@@ -95,7 +95,7 @@ export const IntegerInput = (props: InputProps): JSX.Element => (
   />
 )
 
-export const BoolInput = (props: InputProps): JSX.Element => (
+export const BoolInput = (props: InputProps): React.JSX.Element => (
   <Switch
     name={props.name}
     value={props.value}

web/src/app/admin/AdminLimits.tsx

@@ -52,7 +52,7 @@ interface LimitsValues {
   [id: string]: string
 }
 
-export default function AdminLimits(): JSX.Element {
+export default function AdminLimits(): React.JSX.Element {
   const classes = useStyles()
   const [confirm, setConfirm] = useState(false)
   const [values, setValues] = useState({})

web/src/app/admin/AdminNumberLookup.tsx

@@ -49,7 +49,7 @@ const numInfoQuery = gql`
 
 const noSuspense = { suspense: false }
 
-export default function AdminNumberLookup(): JSX.Element {
+export default function AdminNumberLookup(): React.JSX.Element {
   const [number, setNumber] = useState('')
   const [staleCarrier, setStaleCarrier] = useState(true)
 
@@ -74,7 +74,7 @@ export default function AdminNumberLookup(): JSX.Element {
     if (mutationError) setLastError(mutationError)
   }, [mutationError])
 
-  function renderListItem(label: string, text = ''): JSX.Element {
+  function renderListItem(label: string, text = ''): React.JSX.Element {
     return (
       <React.Fragment>
         <Divider />

web/src/app/admin/AdminSMSSend.tsx

@@ -51,7 +51,7 @@ const useStyles = makeStyles({
   },
 })
 
-export default function AdminSMSSend(): JSX.Element {
+export default function AdminSMSSend(): React.JSX.Element {
   const classes = useStyles()
   const [cfgFromNumber, cfgSID] = useConfigValue(
     'Twilio.FromNumber',

web/src/app/admin/AdminSection.tsx

@@ -57,7 +57,9 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }))
 
-export default function AdminSection(props: AdminSectionProps): JSX.Element {
+export default function AdminSection(
+  props: AdminSectionProps,
+): React.JSX.Element {
   // TODO: add 'reset to default' buttons
   const classes = useStyles()
   const { fields, value, headerNote } = props

web/src/app/admin/AdminToolbox.tsx

@@ -20,7 +20,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }))
 
-export default function AdminToolbox(): JSX.Element {
+export default function AdminToolbox(): React.JSX.Element {
   const classes = useStyles()
 
   return (

web/src/app/admin/SlackActions.tsx

@@ -32,14 +32,14 @@ const useStyles = makeStyles({
   },
 })
 
-export default function SlackActions(): JSX.Element {
+export default function SlackActions(): React.JSX.Element {
   const classes = useStyles()
   const [showManifest, setShowManifest] = useState(false)
 
   const [{ fetching, error, data }] = useQuery({ query })
   const manifest = data?.generateSlackAppManifest ?? ''
 
-  function renderContent(): JSX.Element {
+  function renderContent(): React.JSX.Element {
     if (fetching) return <Spinner />
     if (error) return <GenericError error={error.message} />
 

web/src/app/admin/admin-alert-counts/AdminAlertCounts.tsx

@@ -27,7 +27,7 @@ const units: Record<string, DateTimeUnit> = {
   P1M: 'month',
 }
 
-export default function AdminAlertCounts(): JSX.Element {
+export default function AdminAlertCounts(): React.JSX.Element {
   const styles = useStyles()
 
   const [graphData, setGraphData] = useState<AlertCountSeries[]>([])

web/src/app/admin/admin-alert-counts/AlertCountControls.tsx

@@ -14,7 +14,7 @@ import { ISODateTimePicker } from '../../util/ISOPickers'
 import { useURLParams, useResetURLParams } from '../../actions'
 import { DateTime } from 'luxon'
 
-export default function AlertCountControls(): JSX.Element {
+export default function AlertCountControls(): React.JSX.Element {
   const now = useMemo(() => DateTime.now(), [])
   const [params, setParams] = useURLParams({
     createdAfter: now.minus({ days: 1 }).toISO(),

web/src/app/admin/admin-alert-counts/AlertCountLineGraph.tsx

@@ -58,7 +58,7 @@ interface CustomDotProps extends DotProps {
   }
 }
 
-function CustomDot(props: CustomDotProps): JSX.Element {
+function CustomDot(props: CustomDotProps): React.JSX.Element {
   const { cy, cx, fill, r, stroke, strokeWidth, name = '', payload } = props
 
   return (
@@ -77,7 +77,7 @@ function CustomDot(props: CustomDotProps): JSX.Element {
 
 export default function AlertCountLineGraph(
   props: AlertCountLineGraphProps,
-): JSX.Element {
+): React.JSX.Element {
   const [active, setActive] = useState('')
   const classes = useStyles()
   const theme = useTheme()

web/src/app/admin/admin-alert-counts/AlertCountTable.tsx

@@ -86,7 +86,7 @@ const columns = [
 
 export default function AlertCountTable(
   props: AlertCountTableProps,
-): JSX.Element {
+): React.JSX.Element {
   const classes = useStyles()
 
   const csvOpts = useMemo(
@@ -102,7 +102,7 @@ export default function AlertCountTable(
     [csvData],
   )
 
-  function CustomToolbar(): JSX.Element {
+  function CustomToolbar(): React.JSX.Element {
     const apiRef = useGridApiContext()
     const currentPage = gridPaginatedVisibleSortedGridRowEntriesSelector(
       apiRef,

web/src/app/admin/admin-api-keys/AdminAPIKeyDeleteDialog.tsx

@@ -26,7 +26,7 @@ const query = gql`
 export default function AdminAPIKeyDeleteDialog(props: {
   apiKeyID: string
   onClose: (yes: boolean) => void
-}): JSX.Element {
+}): React.JSX.Element {
   const [{ fetching, data, error }] = useQuery({
     query,
   })

web/src/app/admin/admin-api-keys/AdminAPIKeyDrawer.tsx

@@ -89,7 +89,7 @@ function ActionBy(props: {
   )
 }
 
-export default function AdminAPIKeyDrawer(props: Props): JSX.Element {
+export default function AdminAPIKeyDrawer(props: Props): React.JSX.Element {
   const { onClose, apiKeyID } = props
   const classes = useStyles()
   const isOpen = Boolean(apiKeyID)

web/src/app/admin/admin-api-keys/AdminAPIKeyEditDialog.tsx

@@ -29,7 +29,7 @@ const query = gql`
 export default function AdminAPIKeyEditDialog(props: {
   onClose: (param: boolean) => void
   apiKeyID: string
-}): JSX.Element {
+}): React.JSX.Element {
   const { apiKeyID, onClose } = props
   const [{ fetching, data, error }] = useQuery({
     query,

web/src/app/admin/admin-api-keys/AdminAPIKeyExpirationField.tsx

@@ -27,7 +27,7 @@ const presets = [7, 15, 30, 60, 90]
 
 export default function AdminAPIKeyExpirationField(
   props: FieldProps,
-): JSX.Element {
+): React.JSX.Element {
   const classes = useStyles()
 
   const [selected, setSelected] = useState<number>(

web/src/app/admin/admin-api-keys/AdminAPIKeyForm.tsx

@@ -19,7 +19,7 @@ type AdminAPIKeyFormProps = {
 
 export default function AdminAPIKeyForm(
   props: AdminAPIKeyFormProps,
-): JSX.Element {
+): React.JSX.Element {
   const queryError = props.errors.find((e) => e.field === 'query')?.message
   return (
     <FormContainer optionalLabels {...props}>

web/src/app/admin/admin-api-keys/AdminAPIKeyShowQueryDialog.tsx

@@ -21,7 +21,7 @@ const query = gql`
 export default function AdminAPIKeyShowQueryDialog(props: {
   apiKeyID: string
   onClose: (yes: boolean) => void
-}): JSX.Element {
+}): React.JSX.Element {
   const theme = useTheme()
   const [{ fetching, data, error }] = useQuery({
     query,

web/src/app/admin/admin-message-logs/AdminMessageLogDrawer.tsx

@@ -32,7 +32,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }))
 
-export default function AdminMessageLogDrawer(props: Props): JSX.Element {
+export default function AdminMessageLogDrawer(props: Props): React.JSX.Element {
   const { onClose, log } = props
   const classes = useStyles()
 

web/src/app/admin/admin-message-logs/AdminMessageLogsControls.tsx

@@ -5,7 +5,7 @@ import { ISODateTimePicker } from '../../util/ISOPickers'
 import Search from '../../util/Search'
 import { useMessageLogsParams } from './util'
 
-export default function AdminMessageLogsControls(): JSX.Element {
+export default function AdminMessageLogsControls(): React.JSX.Element {
   const [params, setParams] = useMessageLogsParams()
 
   return (

web/src/app/admin/admin-message-logs/AdminMessageLogsGraph.tsx

@@ -39,7 +39,7 @@ type Stats = Array<{
 
 interface MessageLogGraphData {
   date: string
-  label: JSX.Element
+  label: React.JSX.Element
   count: number
 }
 
@@ -60,7 +60,7 @@ const statsQuery = gql`
   }
 `
 
-export default function AdminMessageLogsGraph(): JSX.Element {
+export default function AdminMessageLogsGraph(): React.JSX.Element {
   const theme = useTheme()
 
   const [{ search, start, end, graphInterval }, setParams] =

web/src/app/admin/admin-message-logs/AdminMessageLogsLayout.tsx

@@ -56,7 +56,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 const context = { suspense: false }
 
-export default function AdminMessageLogsLayout(): JSX.Element {
+export default function AdminMessageLogsLayout(): React.JSX.Element {
   const classes = useStyles()
   const [selectedLog, setSelectedLog] = useState<DebugMessage | null>(null)
 

web/src/app/admin/admin-service-metrics/AdminServiceFilter.tsx

@@ -22,7 +22,7 @@ import { LabelKeySelect } from '../../selection'
 import { LabelValueSelect } from '../../selection/LabelValueSelect'
 import { useFeatures } from '../../util/RequireConfig'
 
-function AdminServiceFilter(): JSX.Element {
+function AdminServiceFilter(): React.JSX.Element {
   const [open, setOpen] = useState<boolean>(false)
 
   const [params, setParams] = useURLParams({
@@ -52,7 +52,7 @@ function AdminServiceFilter(): JSX.Element {
     setParams({ ...params, [filterName]: [] })
   }
 
-  function renderFilterChips(): JSX.Element {
+  function renderFilterChips(): React.JSX.Element {
     return (
       <Stack direction='row' spacing={1} sx={{ marginTop: '10px' }}>
         {!!params.epStepTgts.length && (
@@ -89,7 +89,7 @@ function AdminServiceFilter(): JSX.Element {
     )
   }
 
-  function renderFilterDrawer(): JSX.Element {
+  function renderFilterDrawer(): React.JSX.Element {
     return (
       <ClickAwayListener
         onClickAway={() => setOpen(false)}

web/src/app/admin/admin-service-metrics/AdminServiceMetrics.tsx

@@ -20,7 +20,7 @@ import AdminServiceTargetGraph from './AdminServiceTargetGraph'
 
 const STALE_ALERT_LIMIT = 2
 
-export default function AdminServiceMetrics(): JSX.Element {
+export default function AdminServiceMetrics(): React.JSX.Element {
   const now = useMemo(() => DateTime.now(), [])
   const [params] = useURLParams({
     epStepTgts: [] as string[],
@@ -95,7 +95,7 @@ export default function AdminServiceMetrics(): JSX.Element {
     ? 'Loading services... This may take a minute'
     : `Metrics pulled from ${metrics.filteredServices.length} services`
 
-  function renderOverviewMetrics(): JSX.Element {
+  function renderOverviewMetrics(): React.JSX.Element {
     return (
       <React.Fragment>
         <Grid item xs={4} sm={2.4}>
@@ -176,7 +176,7 @@ export default function AdminServiceMetrics(): JSX.Element {
     )
   }
 
-  function renderUsageGraphs(): JSX.Element {
+  function renderUsageGraphs(): React.JSX.Element {
     return (
       <React.Fragment>
         <Grid item xs>
@@ -221,7 +221,7 @@ export default function AdminServiceMetrics(): JSX.Element {
     )
   }
 
-  function renderServiceTable(): JSX.Element {
+  function renderServiceTable(): React.JSX.Element {
     return (
       <Card sx={{ marginTop: (theme) => theme.spacing(1) }}>
         <CardHeader title='Services' subheader={cardSubHeader} />

web/src/app/admin/admin-service-metrics/AdminServiceTable.tsx

@@ -35,7 +35,7 @@ interface AdminServiceTableProps {
 
 export default function AdminServiceTable(
   props: AdminServiceTableProps,
-): JSX.Element {
+): React.JSX.Element {
   const { services = [], loading, staleAlertServices } = props
   // Community version of MUI DataGrid only supports sortModels with a single SortItem
   const [sortModel, setSortModel] = useState<GridSortItem[]>([

web/src/app/admin/admin-service-metrics/AdminServiceTargetGraph.tsx

@@ -20,7 +20,7 @@ interface AdminServiceTargetGraphProps {
 
 export default function AdminServiceTargetGraph(
   props: AdminServiceTargetGraphProps,
-): JSX.Element {
+): React.JSX.Element {
   const theme = useTheme()
   const { metrics, loading } = props
   let targetMetrics = [] as { type: string; count: number }[]

web/src/app/admin/switchover/AdminSWOConfirmDialog.tsx

@@ -5,7 +5,7 @@ export default function AdminSWOConfirmDialog(props: {
   messages: string[]
   onConfirm: () => void
   onClose: () => void
-}): JSX.Element {
+}): React.JSX.Element {
   return (
     <FormDialog
       title='Continue with switchover?'