From b5b07027b5c4654430cd1675030d50faee81106f Mon Sep 17 00:00:00 2001
From: Nathaniel Caza <mastercactapus@gmail.com>
Date: Tue, 28 Jan 2025 13:34:38 -0600
Subject: [PATCH] refactor: update return types to React.JSX.Element in admin
 and alerts components

---
 web/src/app/NewVersionCheck.tsx                        |  2 +-
 web/src/app/admin/AdminAPIKeys.tsx                     |  2 +-
 web/src/app/admin/AdminConfig.tsx                      |  2 +-
 web/src/app/admin/AdminDialog.tsx                      |  2 +-
 web/src/app/admin/AdminFieldComponents.tsx             | 10 +++++-----
 web/src/app/admin/AdminLimits.tsx                      |  2 +-
 web/src/app/admin/AdminNumberLookup.tsx                |  4 ++--
 web/src/app/admin/AdminSMSSend.tsx                     |  2 +-
 web/src/app/admin/AdminSection.tsx                     |  4 +++-
 web/src/app/admin/AdminToolbox.tsx                     |  2 +-
 web/src/app/admin/SlackActions.tsx                     |  4 ++--
 .../app/admin/admin-alert-counts/AdminAlertCounts.tsx  |  2 +-
 .../admin/admin-alert-counts/AlertCountControls.tsx    |  2 +-
 .../admin/admin-alert-counts/AlertCountLineGraph.tsx   |  4 ++--
 .../app/admin/admin-alert-counts/AlertCountTable.tsx   |  4 ++--
 .../admin/admin-api-keys/AdminAPIKeyDeleteDialog.tsx   |  2 +-
 web/src/app/admin/admin-api-keys/AdminAPIKeyDrawer.tsx |  2 +-
 .../app/admin/admin-api-keys/AdminAPIKeyEditDialog.tsx |  2 +-
 .../admin-api-keys/AdminAPIKeyExpirationField.tsx      |  2 +-
 web/src/app/admin/admin-api-keys/AdminAPIKeyForm.tsx   |  2 +-
 .../admin-api-keys/AdminAPIKeyShowQueryDialog.tsx      |  2 +-
 .../admin/admin-message-logs/AdminMessageLogDrawer.tsx |  2 +-
 .../admin-message-logs/AdminMessageLogsControls.tsx    |  2 +-
 .../admin/admin-message-logs/AdminMessageLogsGraph.tsx |  4 ++--
 .../admin-message-logs/AdminMessageLogsLayout.tsx      |  2 +-
 .../admin/admin-service-metrics/AdminServiceFilter.tsx |  6 +++---
 .../admin-service-metrics/AdminServiceMetrics.tsx      |  8 ++++----
 .../admin/admin-service-metrics/AdminServiceTable.tsx  |  2 +-
 .../admin-service-metrics/AdminServiceTargetGraph.tsx  |  2 +-
 web/src/app/admin/switchover/AdminSWOConfirmDialog.tsx |  2 +-
 web/src/app/admin/switchover/AdminSWODBVersionCard.tsx |  2 +-
 web/src/app/admin/switchover/AdminSWODone.tsx          |  2 +-
 web/src/app/admin/switchover/AdminSWOStatusCard.tsx    |  4 ++--
 web/src/app/admin/switchover/AdminSWOWrongMode.tsx     |  2 +-
 web/src/app/admin/switchover/AdminSwitchover.tsx       |  2 +-
 web/src/app/admin/switchover/AdminSwitchoverGuide.tsx  |  4 ++--
 web/src/app/admin/switchover/SWONode.tsx               |  5 ++++-
 web/src/app/alerts/AlertDetailLogs.tsx                 |  8 ++++----
 web/src/app/alerts/AlertsList.tsx                      |  2 +-
 .../app/alerts/CreateAlertDialog/CreateAlertDialog.tsx |  2 +-
 .../StepContent/CreateAlertConfirm.tsx                 |  4 ++--
 .../CreateAlertDialog/StepContent/CreateAlertForm.tsx  |  2 +-
 .../CreateAlertDialog/StepContent/CreateAlertInfo.tsx  |  2 +-
 .../StepContent/CreateAlertListItem.tsx                |  2 +-
 .../StepContent/CreateAlertReview.tsx                  |  4 +++-
 .../StepContent/CreateAlertServiceListItem.tsx         |  2 +-
 .../StepContent/CreateAlertServiceSelect.tsx           |  2 +-
 web/src/app/alerts/components/AlertDetails.tsx         |  8 +++++---
 web/src/app/alerts/components/AlertFeedback.tsx        |  4 +++-
 web/src/app/alerts/components/AlertFeedbackDialog.tsx  |  2 +-
 web/src/app/alerts/components/AlertsListControls.tsx   |  2 +-
 web/src/app/alerts/components/AlertsListFilter.tsx     |  4 ++--
 web/src/app/alerts/pages/AlertDetailPage.tsx           |  2 +-
 web/src/app/details/CardActions.tsx                    |  8 ++++----
 web/src/app/details/DetailsPage.tsx                    |  8 ++++----
 web/src/app/details/Notices.tsx                        |  8 ++++----
 56 files changed, 99 insertions(+), 88 deletions(-)

diff --git a/web/src/app/NewVersionCheck.tsx b/web/src/app/NewVersionCheck.tsx
index 3a84674cee..955e97274d 100644
--- a/web/src/app/NewVersionCheck.tsx
+++ b/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())
diff --git a/web/src/app/admin/AdminAPIKeys.tsx b/web/src/app/admin/AdminAPIKeys.tsx
index 4ef5684111..831b36f14e 100644
--- a/web/src/app/admin/AdminAPIKeys.tsx
+++ b/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)
diff --git a/web/src/app/admin/AdminConfig.tsx b/web/src/app/admin/AdminConfig.tsx
index 554cd20bdc..fc4dc2e3d6 100644
--- a/web/src/app/admin/AdminConfig.tsx
+++ b/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({})
diff --git a/web/src/app/admin/AdminDialog.tsx b/web/src/app/admin/AdminDialog.tsx
index 8d54a08c58..306925bddf 100644
--- a/web/src/app/admin/AdminDialog.tsx
+++ b/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,
   })
diff --git a/web/src/app/admin/AdminFieldComponents.tsx b/web/src/app/admin/AdminFieldComponents.tsx
index b8f0364d1a..b8a5b16860 100644
--- a/web/src/app/admin/AdminFieldComponents.tsx
+++ b/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}
diff --git a/web/src/app/admin/AdminLimits.tsx b/web/src/app/admin/AdminLimits.tsx
index 70b3d7d9ff..1563e48ef4 100644
--- a/web/src/app/admin/AdminLimits.tsx
+++ b/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({})
diff --git a/web/src/app/admin/AdminNumberLookup.tsx b/web/src/app/admin/AdminNumberLookup.tsx
index e81cd2a2f6..3b81238f2f 100644
--- a/web/src/app/admin/AdminNumberLookup.tsx
+++ b/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 />
diff --git a/web/src/app/admin/AdminSMSSend.tsx b/web/src/app/admin/AdminSMSSend.tsx
index 2dd3b9a990..c5984d15b0 100644
--- a/web/src/app/admin/AdminSMSSend.tsx
+++ b/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',
diff --git a/web/src/app/admin/AdminSection.tsx b/web/src/app/admin/AdminSection.tsx
index 7fde0a19b6..f0c9bab71d 100644
--- a/web/src/app/admin/AdminSection.tsx
+++ b/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
diff --git a/web/src/app/admin/AdminToolbox.tsx b/web/src/app/admin/AdminToolbox.tsx
index 7279140b91..0e4536e9dd 100644
--- a/web/src/app/admin/AdminToolbox.tsx
+++ b/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 (
diff --git a/web/src/app/admin/SlackActions.tsx b/web/src/app/admin/SlackActions.tsx
index e5e8371cd4..845343432a 100644
--- a/web/src/app/admin/SlackActions.tsx
+++ b/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} />
 
diff --git a/web/src/app/admin/admin-alert-counts/AdminAlertCounts.tsx b/web/src/app/admin/admin-alert-counts/AdminAlertCounts.tsx
index 105768e3db..54b32bdfab 100644
--- a/web/src/app/admin/admin-alert-counts/AdminAlertCounts.tsx
+++ b/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[]>([])
diff --git a/web/src/app/admin/admin-alert-counts/AlertCountControls.tsx b/web/src/app/admin/admin-alert-counts/AlertCountControls.tsx
index 04dc6e1e95..bb2616f879 100644
--- a/web/src/app/admin/admin-alert-counts/AlertCountControls.tsx
+++ b/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(),
diff --git a/web/src/app/admin/admin-alert-counts/AlertCountLineGraph.tsx b/web/src/app/admin/admin-alert-counts/AlertCountLineGraph.tsx
index 4cca1256b4..98c7eed28f 100644
--- a/web/src/app/admin/admin-alert-counts/AlertCountLineGraph.tsx
+++ b/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()
diff --git a/web/src/app/admin/admin-alert-counts/AlertCountTable.tsx b/web/src/app/admin/admin-alert-counts/AlertCountTable.tsx
index 8a1072c342..c493eee103 100644
--- a/web/src/app/admin/admin-alert-counts/AlertCountTable.tsx
+++ b/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,
diff --git a/web/src/app/admin/admin-api-keys/AdminAPIKeyDeleteDialog.tsx b/web/src/app/admin/admin-api-keys/AdminAPIKeyDeleteDialog.tsx
index ae8f70219a..d57b2ea643 100644
--- a/web/src/app/admin/admin-api-keys/AdminAPIKeyDeleteDialog.tsx
+++ b/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,
   })
diff --git a/web/src/app/admin/admin-api-keys/AdminAPIKeyDrawer.tsx b/web/src/app/admin/admin-api-keys/AdminAPIKeyDrawer.tsx
index 6a4a74a161..4aff42af09 100644
--- a/web/src/app/admin/admin-api-keys/AdminAPIKeyDrawer.tsx
+++ b/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)
diff --git a/web/src/app/admin/admin-api-keys/AdminAPIKeyEditDialog.tsx b/web/src/app/admin/admin-api-keys/AdminAPIKeyEditDialog.tsx
index 1a14879d4b..0a797077af 100644
--- a/web/src/app/admin/admin-api-keys/AdminAPIKeyEditDialog.tsx
+++ b/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,
diff --git a/web/src/app/admin/admin-api-keys/AdminAPIKeyExpirationField.tsx b/web/src/app/admin/admin-api-keys/AdminAPIKeyExpirationField.tsx
index fd0aa96d13..b2adb48af7 100644
--- a/web/src/app/admin/admin-api-keys/AdminAPIKeyExpirationField.tsx
+++ b/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>(
diff --git a/web/src/app/admin/admin-api-keys/AdminAPIKeyForm.tsx b/web/src/app/admin/admin-api-keys/AdminAPIKeyForm.tsx
index ad76af5b58..96d7704680 100644
--- a/web/src/app/admin/admin-api-keys/AdminAPIKeyForm.tsx
+++ b/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}>
diff --git a/web/src/app/admin/admin-api-keys/AdminAPIKeyShowQueryDialog.tsx b/web/src/app/admin/admin-api-keys/AdminAPIKeyShowQueryDialog.tsx
index ff1b776f81..8cf58ca330 100644
--- a/web/src/app/admin/admin-api-keys/AdminAPIKeyShowQueryDialog.tsx
+++ b/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,
diff --git a/web/src/app/admin/admin-message-logs/AdminMessageLogDrawer.tsx b/web/src/app/admin/admin-message-logs/AdminMessageLogDrawer.tsx
index 1327c12bc2..e71d1d168b 100644
--- a/web/src/app/admin/admin-message-logs/AdminMessageLogDrawer.tsx
+++ b/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()
 
diff --git a/web/src/app/admin/admin-message-logs/AdminMessageLogsControls.tsx b/web/src/app/admin/admin-message-logs/AdminMessageLogsControls.tsx
index 065ee16cb1..e0c361542c 100644
--- a/web/src/app/admin/admin-message-logs/AdminMessageLogsControls.tsx
+++ b/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 (
diff --git a/web/src/app/admin/admin-message-logs/AdminMessageLogsGraph.tsx b/web/src/app/admin/admin-message-logs/AdminMessageLogsGraph.tsx
index e1baa28ade..d48053d348 100644
--- a/web/src/app/admin/admin-message-logs/AdminMessageLogsGraph.tsx
+++ b/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] =
diff --git a/web/src/app/admin/admin-message-logs/AdminMessageLogsLayout.tsx b/web/src/app/admin/admin-message-logs/AdminMessageLogsLayout.tsx
index d36f96b9bd..8de1997e08 100644
--- a/web/src/app/admin/admin-message-logs/AdminMessageLogsLayout.tsx
+++ b/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)
 
diff --git a/web/src/app/admin/admin-service-metrics/AdminServiceFilter.tsx b/web/src/app/admin/admin-service-metrics/AdminServiceFilter.tsx
index 78a5c024a0..0b7519f2f9 100644
--- a/web/src/app/admin/admin-service-metrics/AdminServiceFilter.tsx
+++ b/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)}
diff --git a/web/src/app/admin/admin-service-metrics/AdminServiceMetrics.tsx b/web/src/app/admin/admin-service-metrics/AdminServiceMetrics.tsx
index a094b4a50f..12678f06ea 100644
--- a/web/src/app/admin/admin-service-metrics/AdminServiceMetrics.tsx
+++ b/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} />
diff --git a/web/src/app/admin/admin-service-metrics/AdminServiceTable.tsx b/web/src/app/admin/admin-service-metrics/AdminServiceTable.tsx
index 0b6f536ac0..649c915419 100644
--- a/web/src/app/admin/admin-service-metrics/AdminServiceTable.tsx
+++ b/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[]>([
diff --git a/web/src/app/admin/admin-service-metrics/AdminServiceTargetGraph.tsx b/web/src/app/admin/admin-service-metrics/AdminServiceTargetGraph.tsx
index cc3ba02af4..01515f08b2 100644
--- a/web/src/app/admin/admin-service-metrics/AdminServiceTargetGraph.tsx
+++ b/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 }[]
diff --git a/web/src/app/admin/switchover/AdminSWOConfirmDialog.tsx b/web/src/app/admin/switchover/AdminSWOConfirmDialog.tsx
index ff495ca728..07a3c84931 100644
--- a/web/src/app/admin/switchover/AdminSWOConfirmDialog.tsx
+++ b/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?'
diff --git a/web/src/app/admin/switchover/AdminSWODBVersionCard.tsx b/web/src/app/admin/switchover/AdminSWODBVersionCard.tsx
index 002fb994f7..5eb7c6e1a6 100644
--- a/web/src/app/admin/switchover/AdminSWODBVersionCard.tsx
+++ b/web/src/app/admin/switchover/AdminSWODBVersionCard.tsx
@@ -15,7 +15,7 @@ interface DBVersionProps {
 
 export function AdminSWODBVersionCard(props: {
   data: DBVersionProps
-}): JSX.Element {
+}): React.JSX.Element {
   const curVer = props.data.mainDBVersion.split(' on ')
   const nextVer = props.data.nextDBVersion.split(' on ')
 
diff --git a/web/src/app/admin/switchover/AdminSWODone.tsx b/web/src/app/admin/switchover/AdminSWODone.tsx
index 0daa4d10ca..308c2567f9 100644
--- a/web/src/app/admin/switchover/AdminSWODone.tsx
+++ b/web/src/app/admin/switchover/AdminSWODone.tsx
@@ -5,7 +5,7 @@ import Typography from '@mui/material/Typography'
 import DatabaseCheck from 'mdi-material-ui/DatabaseCheck'
 import { TransitionGroup } from 'react-transition-group'
 
-export function AdminSWODone(): JSX.Element {
+export function AdminSWODone(): React.JSX.Element {
   return (
     <TransitionGroup appear={false}>
       <Zoom in timeout={500}>
diff --git a/web/src/app/admin/switchover/AdminSWOStatusCard.tsx b/web/src/app/admin/switchover/AdminSWOStatusCard.tsx
index 1ba64ed423..035f8baacf 100644
--- a/web/src/app/admin/switchover/AdminSWOStatusCard.tsx
+++ b/web/src/app/admin/switchover/AdminSWOStatusCard.tsx
@@ -16,7 +16,7 @@ import LoadingButton from '@mui/lab/LoadingButton'
 import { toTitle } from './util'
 import { AdminSwitchoverGuideButton } from './AdminSwitchoverGuide'
 
-function getIcon(data: SWOStatus): JSX.Element {
+function getIcon(data: SWOStatus): React.JSX.Element {
   const i: SvgIconProps = { color: 'primary', sx: { fontSize: '3.5rem' } }
 
   if (data.lastError) {
@@ -61,7 +61,7 @@ type AdminSWOStatusCardProps = {
 
 export function AdminSWOStatusCard(
   props: AdminSWOStatusCardProps,
-): JSX.Element {
+): React.JSX.Element {
   const theme = useTheme()
 
   // We track this separately so we can wait for a NEW status without
diff --git a/web/src/app/admin/switchover/AdminSWOWrongMode.tsx b/web/src/app/admin/switchover/AdminSWOWrongMode.tsx
index 80f76be692..c42f42f178 100644
--- a/web/src/app/admin/switchover/AdminSWOWrongMode.tsx
+++ b/web/src/app/admin/switchover/AdminSWOWrongMode.tsx
@@ -3,7 +3,7 @@ import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'
 import DatabaseOff from 'mdi-material-ui/DatabaseOff'
 
-export function AdminSWOWrongMode(): JSX.Element {
+export function AdminSWOWrongMode(): React.JSX.Element {
   return (
     <Grid item container alignItems='center' justifyContent='center'>
       <DatabaseOff color='secondary' style={{ width: '100%', height: 256 }} />
diff --git a/web/src/app/admin/switchover/AdminSwitchover.tsx b/web/src/app/admin/switchover/AdminSwitchover.tsx
index be78bc250c..8b764883be 100644
--- a/web/src/app/admin/switchover/AdminSwitchover.tsx
+++ b/web/src/app/admin/switchover/AdminSwitchover.tsx
@@ -46,7 +46,7 @@ const mutation = gql`
   }
 `
 
-export default function AdminSwitchover(): JSX.Element {
+export default function AdminSwitchover(): React.JSX.Element {
   const [{ fetching, error, data: _data }, refetch] = useQuery({
     query,
   })
diff --git a/web/src/app/admin/switchover/AdminSwitchoverGuide.tsx b/web/src/app/admin/switchover/AdminSwitchoverGuide.tsx
index 03726f31ee..d748f17e22 100644
--- a/web/src/app/admin/switchover/AdminSwitchoverGuide.tsx
+++ b/web/src/app/admin/switchover/AdminSwitchoverGuide.tsx
@@ -6,7 +6,7 @@ import { Button, Card, CardContent, Typography } from '@mui/material'
 import AppLink from '../../util/AppLink'
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
 
-export function AdminSwitchoverGuideButton(): JSX.Element {
+export function AdminSwitchoverGuideButton(): React.JSX.Element {
   return (
     <Button
       variant='contained'
@@ -20,7 +20,7 @@ export function AdminSwitchoverGuideButton(): JSX.Element {
   )
 }
 
-export default function AdminSwitchoverGuide(): JSX.Element {
+export default function AdminSwitchoverGuide(): React.JSX.Element {
   return (
     <Card>
       <CardContent>
diff --git a/web/src/app/admin/switchover/SWONode.tsx b/web/src/app/admin/switchover/SWONode.tsx
index 5b0ea6a3f6..23e0aad50d 100644
--- a/web/src/app/admin/switchover/SWONode.tsx
+++ b/web/src/app/admin/switchover/SWONode.tsx
@@ -17,7 +17,10 @@ interface SWONodeProps {
   name: string
 }
 
-export default function SWONode({ node, name }: SWONodeProps): JSX.Element {
+export default function SWONode({
+  node,
+  name,
+}: SWONodeProps): React.JSX.Element {
   const theme = useTheme()
 
   if (node.id.startsWith('unknown-')) {
diff --git a/web/src/app/alerts/AlertDetailLogs.tsx b/web/src/app/alerts/AlertDetailLogs.tsx
index 1f88eca5bf..b9665f007b 100644
--- a/web/src/app/alerts/AlertDetailLogs.tsx
+++ b/web/src/app/alerts/AlertDetailLogs.tsx
@@ -50,7 +50,7 @@ interface AlertDetailLogsProps {
 
 export default function AlertDetailLogs(
   props: AlertDetailLogsProps,
-): JSX.Element {
+): React.JSX.Element {
   const classes = useStyles()
   const [poll, setPoll] = useState(POLL_INTERVAL)
   const { data, error, loading, fetchMore } = useQuery(query, {
@@ -93,9 +93,9 @@ export default function AlertDetailLogs(
   }
 
   const renderList = (
-    items: JSX.Element | JSX.Element[],
+    items: React.JSX.Element | JSX.Element[],
     loadMore?: boolean,
-  ): JSX.Element => {
+  ): React.JSX.Element => {
     return (
       <List data-cy='alert-logs'>
         {items}
@@ -132,7 +132,7 @@ export default function AlertDetailLogs(
     }
   }
 
-  const renderItem = (event: AlertLogEntry, idx: number): JSX.Element => {
+  const renderItem = (event: AlertLogEntry, idx: number): React.JSX.Element => {
     const details = _.upperFirst(event?.state?.details ?? '')
     const status = (event?.state?.status ?? '') as NotificationStatus
 
diff --git a/web/src/app/alerts/AlertsList.tsx b/web/src/app/alerts/AlertsList.tsx
index 7704333b54..1a4338864b 100644
--- a/web/src/app/alerts/AlertsList.tsx
+++ b/web/src/app/alerts/AlertsList.tsx
@@ -106,7 +106,7 @@ function getStatusFilter(s: string): string[] {
   }
 }
 
-export default function AlertsList(props: AlertsListProps): JSX.Element {
+export default function AlertsList(props: AlertsListProps): React.JSX.Element {
   const classes = useStyles()
 
   // event sent to Google Analytics
diff --git a/web/src/app/alerts/CreateAlertDialog/CreateAlertDialog.tsx b/web/src/app/alerts/CreateAlertDialog/CreateAlertDialog.tsx
index 052cc616f2..703634fdd6 100644
--- a/web/src/app/alerts/CreateAlertDialog/CreateAlertDialog.tsx
+++ b/web/src/app/alerts/CreateAlertDialog/CreateAlertDialog.tsx
@@ -40,7 +40,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 export default function CreateAlertDialog(props: {
   onClose: () => void
   serviceID?: string
-}): JSX.Element {
+}): React.JSX.Element {
   const classes = useStyles()
   const [step, setStep] = useState(0)
   const serviceID = props.serviceID
diff --git a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertConfirm.tsx b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertConfirm.tsx
index beca0b3e01..5dc31f794c 100644
--- a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertConfirm.tsx
+++ b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertConfirm.tsx
@@ -19,7 +19,7 @@ type FieldProps = {
   label: string
 }
 
-function Field(props: FieldProps): JSX.Element {
+function Field(props: FieldProps): React.JSX.Element {
   const classes = useStyles()
   return (
     <Grid item xs={12}>
@@ -38,7 +38,7 @@ function Field(props: FieldProps): JSX.Element {
   )
 }
 
-export function CreateAlertConfirm(): JSX.Element {
+export function CreateAlertConfirm(): React.JSX.Element {
   return (
     <Grid container spacing={2}>
       <FormField
diff --git a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertForm.tsx b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertForm.tsx
index ab57d4ba93..792e4c32fb 100644
--- a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertForm.tsx
+++ b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertForm.tsx
@@ -36,7 +36,7 @@ interface Error {
 export function CreateAlertForm({
   activeStep,
   ...otherProps
-}: CreateAlertFormProps): JSX.Element {
+}: CreateAlertFormProps): React.JSX.Element {
   return (
     <FormContainer optionalLabels {...otherProps}>
       {activeStep === 0 && <CreateAlertInfo />}
diff --git a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertInfo.tsx b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertInfo.tsx
index 490cda41cb..9d3b08101a 100644
--- a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertInfo.tsx
+++ b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertInfo.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Grid, TextField } from '@mui/material'
 import { FormField } from '../../../forms'
 
-export function CreateAlertInfo(): JSX.Element {
+export function CreateAlertInfo(): React.JSX.Element {
   return (
     <Grid container spacing={2}>
       <Grid item xs={12}>
diff --git a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertListItem.tsx b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertListItem.tsx
index 6b91d86294..35b9fe2dcf 100644
--- a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertListItem.tsx
+++ b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertListItem.tsx
@@ -22,7 +22,7 @@ const useStyles = makeStyles({
 
 export default function CreateAlertListItem(props: {
   id: string
-}): JSX.Element {
+}): React.JSX.Element {
   const { id } = props
 
   const classes = useStyles()
diff --git a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertReview.tsx b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertReview.tsx
index c78d312f58..de7c7b52cc 100644
--- a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertReview.tsx
+++ b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertReview.tsx
@@ -13,7 +13,9 @@ interface CreateAlertReviewProps {
   failedServices?: FailedService[]
 }
 
-export function CreateAlertReview(props: CreateAlertReviewProps): JSX.Element {
+export function CreateAlertReview(
+  props: CreateAlertReviewProps,
+): React.JSX.Element {
   const { createdAlertIDs = [], failedServices = [] } = props
 
   return (
diff --git a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertServiceListItem.tsx b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertServiceListItem.tsx
index 26a4a41e24..6163195da6 100644
--- a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertServiceListItem.tsx
+++ b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertServiceListItem.tsx
@@ -32,7 +32,7 @@ interface CreateAlertServiceListItemProps {
 
 export default function CreateAlertServiceListItem(
   props: CreateAlertServiceListItemProps,
-): JSX.Element {
+): React.JSX.Element {
   const { id, err } = props
 
   const classes = useStyles()
diff --git a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertServiceSelect.tsx b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertServiceSelect.tsx
index 228c09ca27..21bfb89a60 100644
--- a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertServiceSelect.tsx
+++ b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertServiceSelect.tsx
@@ -77,7 +77,7 @@ export interface CreateAlertServiceSelectProps {
 
 export function CreateAlertServiceSelect(
   props: CreateAlertServiceSelectProps,
-): JSX.Element {
+): React.JSX.Element {
   const { value, onChange } = props
 
   const [searchQueryInput, setSearchQueryInput] = useState('')
diff --git a/web/src/app/alerts/components/AlertDetails.tsx b/web/src/app/alerts/components/AlertDetails.tsx
index acdf5b9510..7de8baa227 100644
--- a/web/src/app/alerts/components/AlertDetails.tsx
+++ b/web/src/app/alerts/components/AlertDetails.tsx
@@ -75,7 +75,9 @@ const updateStatusMutation = gql`
   }
 `
 
-export default function AlertDetails(props: AlertDetailsProps): JSX.Element {
+export default function AlertDetails(
+  props: AlertDetailsProps,
+): React.JSX.Element {
   const [analyticsID] = useConfigValue('General.GoogleAnalyticsID') as [string]
   const classes = useStyles()
   const isMobile = useIsWidthDown('sm')
@@ -182,7 +184,7 @@ export default function AlertDetails(props: AlertDetailsProps): JSX.Element {
     return true
   }
 
-  function getNextEscalation(): JSX.Element | string {
+  function getNextEscalation(): React.JSX.Element | string {
     const { currentLevel, lastEscalation, steps } = epsHelper()
     if (!canAutoEscalate()) return 'None'
 
@@ -201,7 +203,7 @@ export default function AlertDetails(props: AlertDetailsProps): JSX.Element {
     )
   }
 
-  function renderEscalationPolicySteps(): JSX.Element[] | JSX.Element {
+  function renderEscalationPolicySteps(): React.JSX.Element[] | JSX.Element {
     const { steps, status, currentLevel } = epsHelper()
 
     if (!steps?.length) {
diff --git a/web/src/app/alerts/components/AlertFeedback.tsx b/web/src/app/alerts/components/AlertFeedback.tsx
index df732c2adb..b7a995c4e1 100644
--- a/web/src/app/alerts/components/AlertFeedback.tsx
+++ b/web/src/app/alerts/components/AlertFeedback.tsx
@@ -30,7 +30,9 @@ interface AlertFeedbackProps {
 
 export const options = ['False positive', 'Not actionable', 'Poor details']
 
-export default function AlertFeedback(props: AlertFeedbackProps): JSX.Element {
+export default function AlertFeedback(
+  props: AlertFeedbackProps,
+): React.JSX.Element {
   const { alertID } = props
 
   const [{ data }] = useQuery({
diff --git a/web/src/app/alerts/components/AlertFeedbackDialog.tsx b/web/src/app/alerts/components/AlertFeedbackDialog.tsx
index 78e930b111..f209762148 100644
--- a/web/src/app/alerts/components/AlertFeedbackDialog.tsx
+++ b/web/src/app/alerts/components/AlertFeedbackDialog.tsx
@@ -29,7 +29,7 @@ interface AlertFeedbackDialogProps {
 
 export default function AlertFeedbackDialog(
   props: AlertFeedbackDialogProps,
-): JSX.Element {
+): React.JSX.Element {
   const { alertIDs, open, onClose } = props
 
   const [noiseReasons, setNoiseReasons] = useState<Array<string>>([])
diff --git a/web/src/app/alerts/components/AlertsListControls.tsx b/web/src/app/alerts/components/AlertsListControls.tsx
index 277bef0fa8..50ab3d331a 100644
--- a/web/src/app/alerts/components/AlertsListControls.tsx
+++ b/web/src/app/alerts/components/AlertsListControls.tsx
@@ -5,7 +5,7 @@ import { useURLParam } from '../../actions'
 
 const tabs = ['active', 'unacknowledged', 'acknowledged', 'closed', 'all']
 
-function AlertsListControls(): JSX.Element {
+function AlertsListControls(): React.JSX.Element {
   const [filter, setFilter] = useURLParam<string>('filter', 'active')
 
   let currTab = tabs.indexOf(filter)
diff --git a/web/src/app/alerts/components/AlertsListFilter.tsx b/web/src/app/alerts/components/AlertsListFilter.tsx
index 624b4c1ea8..b08f01ecf5 100644
--- a/web/src/app/alerts/components/AlertsListFilter.tsx
+++ b/web/src/app/alerts/components/AlertsListFilter.tsx
@@ -42,7 +42,7 @@ interface AlertsListFilterProps {
   serviceID: string
 }
 
-function AlertsListFilter(props: AlertsListFilterProps): JSX.Element {
+function AlertsListFilter(props: AlertsListFilterProps): React.JSX.Element {
   const classes = useStyles()
   const [show, setShow] = useState(false)
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
@@ -72,7 +72,7 @@ function AlertsListFilter(props: AlertsListFilterProps): JSX.Element {
     setShow(false)
   }
 
-  function renderFilters(): JSX.Element {
+  function renderFilters(): React.JSX.Element {
     let favoritesFilter = null
     if (!props.serviceID) {
       favoritesFilter = (
diff --git a/web/src/app/alerts/pages/AlertDetailPage.tsx b/web/src/app/alerts/pages/AlertDetailPage.tsx
index 1fae62f3f8..4c70b8fe52 100644
--- a/web/src/app/alerts/pages/AlertDetailPage.tsx
+++ b/web/src/app/alerts/pages/AlertDetailPage.tsx
@@ -52,7 +52,7 @@ const query = gql`
   }
 `
 
-function AlertDetailPage({ alertID }: { alertID: string }): JSX.Element {
+function AlertDetailPage({ alertID }: { alertID: string }): React.JSX.Element {
   const { loading, error, data } = useQuery(query, {
     variables: { id: alertID },
   })
diff --git a/web/src/app/details/CardActions.tsx b/web/src/app/details/CardActions.tsx
index 9966c6c0f3..e96c9c2e24 100644
--- a/web/src/app/details/CardActions.tsx
+++ b/web/src/app/details/CardActions.tsx
@@ -19,7 +19,7 @@ interface ActionProps {
 export type Action = {
   label: string // primary button text, use for a tooltip if secondary action
   handleOnClick: MouseEventHandler<HTMLButtonElement>
-  icon?: JSX.Element // if true, adds a start icon to a button with text
+  icon?: React.JSX.Element // if true, adds a start icon to a button with text
   ButtonProps?: ButtonProps
 }
 
@@ -39,14 +39,14 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }))
 
-export default function CardActions(p: CardActionProps): JSX.Element {
+export default function CardActions(p: CardActionProps): React.JSX.Element {
   const classes = useStyles()
 
   const action = (
     action: Action | JSX.Element,
     key: string,
     secondary?: boolean,
-  ): JSX.Element => {
+  ): React.JSX.Element => {
     if ('label' in action && 'handleOnClick' in action) {
       return <Action key={key} action={action} secondary={secondary} />
     }
@@ -79,7 +79,7 @@ export default function CardActions(p: CardActionProps): JSX.Element {
   )
 }
 
-function Action(p: ActionProps): JSX.Element {
+function Action(p: ActionProps): React.JSX.Element {
   const { action, secondary } = p
   if (secondary && action.icon) {
     // wrapping button in span so tooltip can still
diff --git a/web/src/app/details/DetailsPage.tsx b/web/src/app/details/DetailsPage.tsx
index ba9c1a7aa1..ace9f628b0 100644
--- a/web/src/app/details/DetailsPage.tsx
+++ b/web/src/app/details/DetailsPage.tsx
@@ -22,13 +22,13 @@ interface DetailsPageProps {
   title: string
 
   // optional content
-  avatar?: JSX.Element // placement for an icon or image
+  avatar?: React.JSX.Element // placement for an icon or image
   subheader?: string | JSX.Element
   details?: string
   notices?: Array<Notice> | JSX.Element
   labels?: Array<Label>
   links?: Array<Link>
-  pageContent?: JSX.Element
+  pageContent?: React.JSX.Element
   primaryActions?: Array<Action | JSX.Element>
   secondaryActions?: Array<Action | JSX.Element>
 }
@@ -60,7 +60,7 @@ const useStyles = makeStyles({
 })
 
 const LIApplink = forwardRef<HTMLAnchorElement, AppLinkProps>(
-  function LIApplink(props, ref): JSX.Element {
+  function LIApplink(props, ref): React.JSX.Element {
     return (
       <li>
         <AppLink ref={ref} {...props} />
@@ -69,7 +69,7 @@ const LIApplink = forwardRef<HTMLAnchorElement, AppLinkProps>(
   },
 )
 
-export default function DetailsPage(p: DetailsPageProps): JSX.Element {
+export default function DetailsPage(p: DetailsPageProps): React.JSX.Element {
   const classes = useStyles()
   const isMobile = useIsWidthDown('sm')
   const statusColors = useStatusColors()
diff --git a/web/src/app/details/Notices.tsx b/web/src/app/details/Notices.tsx
index a713e22182..035c5734ea 100644
--- a/web/src/app/details/Notices.tsx
+++ b/web/src/app/details/Notices.tsx
@@ -64,7 +64,7 @@ export interface Notice {
   message: string | JSX.Element
   details?: string | JSX.Element
   endNote?: string | JSX.Element
-  action?: JSX.Element
+  action?: React.JSX.Element
 }
 interface NoticesProps {
   notices?: Notice[]
@@ -72,7 +72,7 @@ interface NoticesProps {
 
 export default function Notices({
   notices = [],
-}: NoticesProps): JSX.Element | null {
+}: NoticesProps): React.JSX.Element | null {
   const classes = useStyles()
   const [noticesExpanded, setNoticesExpanded] = useState(false)
 
@@ -80,7 +80,7 @@ export default function Notices({
     return null
   }
 
-  function renderShowAllToggle(action?: JSX.Element): ReactNode {
+  function renderShowAllToggle(action?: React.JSX.Element): ReactNode {
     if (notices.length <= 1) return null
     return (
       <React.Fragment>
@@ -119,7 +119,7 @@ export default function Notices({
     }
   }
 
-  function renderNotice(notice: Notice, index: number): JSX.Element {
+  function renderNotice(notice: Notice, index: number): React.JSX.Element {
     return (
       <Grid key={index} className={getGridClassName(index)} item xs={12}>
         <Alert