refactor: update return types to React.JSX.Element across multiple co…

…mponents
target · Jan 28, 2025 · c150e6f · c150e6f
1 parent b5b0702
commit c150e6f
Show file tree

Hide file tree

Showing 63 changed files with 114 additions and 96 deletions.
diff --git a/web/src/app/documentation/Documentation.tsx b/web/src/app/documentation/Documentation.tsx
@@ -15,7 +15,7 @@ const useStyles = makeStyles({
   },
 })
 
-export default function Documentation(): JSX.Element {
+export default function Documentation(): React.JSX.Element {
   const [publicURL, webhookEnabled] = useConfigValue(
     'General.PublicURL',
     'Webhook.Enable',

diff --git a/web/src/app/error-pages/Errors.tsx b/web/src/app/error-pages/Errors.tsx
@@ -11,7 +11,7 @@ interface ErrorsProps {
   type?: string
 }
 
-export function PageNotFound(): JSX.Element {
+export function PageNotFound(): React.JSX.Element {
   const theme = useTheme()
   return (
     <div style={{ textAlign: 'center', color: theme.palette.text.primary }}>
@@ -23,7 +23,7 @@ export function PageNotFound(): JSX.Element {
   )
 }
 
-export function ObjectNotFound(props: ErrorsProps): JSX.Element {
+export function ObjectNotFound(props: ErrorsProps): React.JSX.Element {
   const theme = useTheme()
   return (
     <div style={{ textAlign: 'center', color: theme.palette.text.primary }}>
@@ -39,7 +39,7 @@ export function ObjectNotFound(props: ErrorsProps): JSX.Element {
   )
 }
 
-export function GenericError(props: ErrorsProps): JSX.Element {
+export function GenericError(props: ErrorsProps): React.JSX.Element {
   const theme = useTheme()
   let errorText
   if (props.error) {

diff --git a/web/src/app/escalation-policies/PolicyCreateDialog.tsx b/web/src/app/escalation-policies/PolicyCreateDialog.tsx
@@ -13,7 +13,7 @@ const mutation = gql`
   }
 `
 
-function PolicyCreateDialog(props: { onClose: () => void }): JSX.Element {
+function PolicyCreateDialog(props: { onClose: () => void }): React.JSX.Element {
   const defaultValue = {
     name: '',
     description: '',

diff --git a/web/src/app/escalation-policies/PolicyDeleteDialog.tsx b/web/src/app/escalation-policies/PolicyDeleteDialog.tsx
@@ -12,7 +12,7 @@ const mutation = gql`
 export default function PolicyDeleteDialog(props: {
   escalationPolicyID: string
   onClose: () => void
-}): JSX.Element {
+}): React.JSX.Element {
   const [, navigate] = useLocation()
   const [deletePolicyStatus, deletePolicy] = useMutation(mutation)
 

diff --git a/web/src/app/escalation-policies/PolicyDetails.tsx b/web/src/app/escalation-policies/PolicyDetails.tsx
@@ -30,7 +30,7 @@ const query = gql`
 
 export default function PolicyDetails(props: {
   policyID: string
-}): JSX.Element {
+}): React.JSX.Element {
   const [showDeleteDialog, setShowDeleteDialog] = useState(false)
   const [showEditDialog, setShowEditDialog] = useState(false)
 

diff --git a/web/src/app/escalation-policies/PolicyEditDialog.tsx b/web/src/app/escalation-policies/PolicyEditDialog.tsx
@@ -25,7 +25,7 @@ const mutation = gql`
 function PolicyEditDialog(props: {
   escalationPolicyID: string
   onClose: () => void
-}): JSX.Element {
+}): React.JSX.Element {
   const [value, setValue] = useState<PolicyFormValue | null>(null)
   const [{ data, fetching }] = useQuery({
     query,

diff --git a/web/src/app/escalation-policies/PolicyForm.tsx b/web/src/app/escalation-policies/PolicyForm.tsx
@@ -21,7 +21,7 @@ interface PolicyFormProps {
   onChange?: (value: PolicyFormValue) => void
 }
 
-function PolicyForm(props: PolicyFormProps): JSX.Element {
+function PolicyForm(props: PolicyFormProps): React.JSX.Element {
   return (
     <FormContainer optionalLabels {...props}>
       <Grid container spacing={2}>

diff --git a/web/src/app/escalation-policies/PolicyList.tsx b/web/src/app/escalation-policies/PolicyList.tsx
@@ -26,7 +26,7 @@ const query = gql`
 `
 
 const context = { suspense: false }
-export default function PolicyList(): JSX.Element {
+export default function PolicyList(): React.JSX.Element {
   const [search] = useURLParam<string>('search', '')
   const [create, setCreate] = useState(false)
   const [cursor, setCursor] = useState('')

diff --git a/web/src/app/escalation-policies/PolicyServicesCard.tsx b/web/src/app/escalation-policies/PolicyServicesCard.tsx
@@ -14,7 +14,7 @@ interface PolicyServicesCardProps {
   services: { id: string; name: string }[]
 }
 
-function PolicyServicesCard(props: PolicyServicesCardProps): JSX.Element {
+function PolicyServicesCard(props: PolicyServicesCardProps): React.JSX.Element {
   const classes = useStyles()
 
   function getServicesItems(): FlatListListItem[] {

diff --git a/web/src/app/escalation-policies/PolicyServicesQuery.tsx b/web/src/app/escalation-policies/PolicyServicesQuery.tsx
@@ -16,7 +16,7 @@ const query = gql`
   }
 `
 
-function PolicyServicesQuery(props: { policyID: string }): JSX.Element {
+function PolicyServicesQuery(props: { policyID: string }): React.JSX.Element {
   const [{ data, fetching, error }] = useQuery({
     query,
     variables: { id: props.policyID },

diff --git a/web/src/app/escalation-policies/PolicyStepCreateDialog.tsx b/web/src/app/escalation-policies/PolicyStepCreateDialog.tsx
@@ -19,7 +19,7 @@ export default function PolicyStepCreateDialog(props: {
   escalationPolicyID: string
   disablePortal?: boolean
   onClose: () => void
-}): JSX.Element {
+}): React.JSX.Element {
   const [value, setValue] = useState<FormValue>({
     actions: [],
     delayMinutes: 15,

diff --git a/web/src/app/escalation-policies/PolicyStepDeleteDialog.tsx b/web/src/app/escalation-policies/PolicyStepDeleteDialog.tsx
@@ -27,7 +27,7 @@ export default function PolicyStepDeleteDialog(props: {
   escalationPolicyID: string
   stepID: string
   onClose: () => void
-}): JSX.Element {
+}): React.JSX.Element {
   const [{ fetching, data, error }] = useQuery({
     query,
     variables: { id: props.escalationPolicyID },

diff --git a/web/src/app/escalation-policies/PolicyStepsQuery.tsx b/web/src/app/escalation-policies/PolicyStepsQuery.tsx
@@ -31,7 +31,9 @@ export const policyStepsQueryDest = gql`
   }
 `
 
-function PolicyStepsQuery(props: { escalationPolicyID: string }): JSX.Element {
+function PolicyStepsQuery(props: {
+  escalationPolicyID: string
+}): React.JSX.Element {
   const [{ data, error }] = useQuery({
     query: policyStepsQueryDest,
     variables: { id: props.escalationPolicyID },

diff --git a/web/src/app/links/RotationLink.tsx b/web/src/app/links/RotationLink.tsx
@@ -2,6 +2,6 @@ import React from 'react'
 import AppLink from '../util/AppLink'
 import { Target } from '../../schema'
 
-export const RotationLink = (rotation: Target): JSX.Element => {
+export const RotationLink = (rotation: Target): React.JSX.Element => {
   return <AppLink to={`/rotations/${rotation.id}`}>{rotation.name}</AppLink>
 }
diff --git a/web/src/app/links/ScheduleLink.tsx b/web/src/app/links/ScheduleLink.tsx
@@ -2,6 +2,6 @@ import React from 'react'
 import { Target } from '../../schema'
 import AppLink from '../util/AppLink'
 
-export const ScheduleLink = (schedule: Target): JSX.Element => {
+export const ScheduleLink = (schedule: Target): React.JSX.Element => {
   return <AppLink to={`/schedules/${schedule.id}`}>{schedule.name}</AppLink>
 }
diff --git a/web/src/app/links/ServiceLink.tsx b/web/src/app/links/ServiceLink.tsx
@@ -2,6 +2,6 @@ import React from 'react'
 import { Service } from '../../schema'
 import AppLink from '../util/AppLink'
 
-export const ServiceLink = (service: Service): JSX.Element => {
+export const ServiceLink = (service: Service): React.JSX.Element => {
   return <AppLink to={`/services/${service.id}`}>{service.name}</AppLink>
 }
diff --git a/web/src/app/links/SlackChannelLink.tsx b/web/src/app/links/SlackChannelLink.tsx
@@ -12,7 +12,7 @@ const query = gql`
   }
 `
 
-export const SlackChannelLink = (slackChannel: Target): JSX.Element => {
+export const SlackChannelLink = (slackChannel: Target): React.JSX.Element => {
   const { data, loading, error } = useQuery(query, {
     variables: { id: slackChannel.id },
     fetchPolicy: 'cache-first',

diff --git a/web/src/app/links/UserLink.tsx b/web/src/app/links/UserLink.tsx
@@ -2,6 +2,6 @@ import React from 'react'
 import AppLink from '../util/AppLink'
 import { Target } from '../../schema'
 
-export const UserLink = (user: Target): JSX.Element => {
+export const UserLink = (user: Target): React.JSX.Element => {
   return <AppLink to={`/users/${user.id}`}>{user.name}</AppLink>
 }
diff --git a/web/src/app/lists/ControlledPaginatedList.tsx b/web/src/app/lists/ControlledPaginatedList.tsx
@@ -90,7 +90,7 @@ export interface CheckboxItemsProps extends PaginatedListItemProps {
 
 export default function ControlledPaginatedList(
   props: ControlledPaginatedListProps,
-): JSX.Element {
+): React.JSX.Element {
   const classes = useStyles()
   const {
     checkboxActions,
@@ -235,7 +235,9 @@ export default function ControlledPaginatedList(
     )
   }
 
-  function getItemIcon(item: CheckboxItemsProps): JSX.Element | undefined {
+  function getItemIcon(
+    item: CheckboxItemsProps,
+  ): React.JSX.Element | undefined {
     if (!checkboxActions) return item.icon
 
     const checked = checkedItems.includes(item.id)

diff --git a/web/src/app/lists/CreateFAB.tsx b/web/src/app/lists/CreateFAB.tsx
@@ -33,7 +33,7 @@ interface CreateFabProps extends Omit<FabProps, 'children'> {
   transition?: boolean
 }
 
-export default function CreateFAB(props: CreateFabProps): JSX.Element {
+export default function CreateFAB(props: CreateFabProps): React.JSX.Element {
   const { title, transition, ...fabProps } = props
   const classes = useStyles()
 

diff --git a/web/src/app/lists/DraggableListItem.tsx b/web/src/app/lists/DraggableListItem.tsx
@@ -69,7 +69,7 @@ export function DraggableListItem({
   id,
   index,
   item,
-}: DraggableListItemProps): JSX.Element {
+}: DraggableListItemProps): React.JSX.Element {
   const theme = useTheme()
   const {
     attributes,

diff --git a/web/src/app/lists/FlatList.tsx b/web/src/app/lists/FlatList.tsx
@@ -90,13 +90,13 @@ const measuringConfig = {
 
 export interface FlatListSub {
   id?: string
-  subHeader: JSX.Element | string
+  subHeader: React.JSX.Element | string
   disableGutter?: boolean
 }
 
 export interface FlatListNotice extends Notice {
   id?: string
-  icon?: JSX.Element
+  icon?: React.JSX.Element
   transition?: boolean
   handleOnClick?: (event: MouseEvent) => void
   'data-cy'?: string
@@ -105,10 +105,10 @@ export interface FlatListItemOptions extends Omit<ListItemProps, 'title'> {
   title?: React.ReactNode
   primaryText?: React.ReactNode
   highlight?: boolean
-  subText?: JSX.Element | string
-  icon?: JSX.Element | null
+  subText?: React.JSX.Element | string
+  icon?: React.JSX.Element | null
   section?: string | number
-  secondaryAction?: JSX.Element | null
+  secondaryAction?: React.JSX.Element | null
   url?: string
   id?: string // required for drag and drop functionality
   scrollIntoView?: boolean
@@ -121,7 +121,7 @@ export interface FlatListItemOptions extends Omit<ListItemProps, 'title'> {
 export interface SectionTitle {
   title: React.ReactNode
   icon?: React.ReactNode | null
-  subText?: JSX.Element | string
+  subText?: React.JSX.Element | string
 }
 
 export type FlatListListItem =
@@ -136,8 +136,8 @@ export interface FlatListProps extends ListProps {
   sections?: SectionTitle[]
 
   // header elements will be displayed at the top of the list.
-  headerNote?: JSX.Element | string | ReactNode // left-aligned
-  headerAction?: JSX.Element // right-aligned
+  headerNote?: React.JSX.Element | string | ReactNode // left-aligned
+  headerAction?: React.JSX.Element // right-aligned
 
   // emptyMessage will be displayed if there are no items in the list.
   emptyMessage?: string
@@ -168,7 +168,7 @@ export default function FlatList({
   transition,
   collapsable,
   ...listProps
-}: FlatListProps): JSX.Element {
+}: FlatListProps): React.JSX.Element {
   const classes = useStyles()
 
   // collapsable sections state
@@ -223,7 +223,7 @@ export default function FlatList({
     }
   }
 
-  function renderEmptyMessage(): JSX.Element {
+  function renderEmptyMessage(): React.JSX.Element {
     return (
       <MUIListItem>
         <ListItemText
@@ -238,7 +238,10 @@ export default function FlatList({
     )
   }
 
-  function renderNoticeItem(item: FlatListNotice, idx: number): JSX.Element {
+  function renderNoticeItem(
+    item: FlatListNotice,
+    idx: number,
+  ): React.JSX.Element {
     if (item.handleOnClick) {
       return (
         <ButtonBase
@@ -273,7 +276,10 @@ export default function FlatList({
     )
   }
 
-  function renderSubheaderItem(item: FlatListSub, idx: number): JSX.Element {
+  function renderSubheaderItem(
+    item: FlatListSub,
+    idx: number,
+  ): React.JSX.Element {
     return (
       <ListSubheader
         key={idx}
@@ -292,7 +298,7 @@ export default function FlatList({
     )
   }
 
-  function renderTransitionItems(): JSX.Element[] {
+  function renderTransitionItems(): React.JSX.Element[] {
     return items.map((item, idx) => {
       if ('subHeader' in item) {
         return (
@@ -341,7 +347,7 @@ export default function FlatList({
     })
   }
 
-  function renderTransitions(): JSX.Element {
+  function renderTransitions(): React.JSX.Element {
     return <TransitionGroup>{renderTransitionItems()}</TransitionGroup>
   }
 
@@ -368,7 +374,7 @@ export default function FlatList({
     })
   }
 
-  function renderCollapsableItems(): JSX.Element[] | undefined {
+  function renderCollapsableItems(): React.JSX.Element[] | undefined {
     const toggleSection = (section: React.ReactNode): void => {
       if (openSections?.includes(section)) {
         setOpenSections(
@@ -403,7 +409,7 @@ export default function FlatList({
     })
   }
 
-  function renderList(): JSX.Element {
+  function renderList(): React.JSX.Element {
     const renderListItems = ():
       | (JSX.Element | undefined)[]
       | JSX.Element

diff --git a/web/src/app/lists/FlatListItem.tsx b/web/src/app/lists/FlatListItem.tsx
@@ -34,7 +34,9 @@ export interface FlatListItemProps extends MUIListItemProps {
   index: number
 }
 
-export default function FlatListItem(props: FlatListItemProps): JSX.Element {
+export default function FlatListItem(
+  props: FlatListItemProps,
+): React.JSX.Element {
   const classes = useStyles()
 
   const {

diff --git a/web/src/app/lists/ListHeader.tsx b/web/src/app/lists/ListHeader.tsx
@@ -13,10 +13,10 @@ export interface ListHeaderProps {
   cardHeader?: ReactNode
   // header elements will be displayed at the top of the list.
   headerNote?: string // left-aligned
-  headerAction?: JSX.Element // right-aligned
+  headerAction?: React.JSX.Element // right-aligned
 }
 
-export function ListHeader(props: ListHeaderProps): JSX.Element {
+export function ListHeader(props: ListHeaderProps): React.JSX.Element {
   const classes = useStyles()
   const { headerNote, headerAction, cardHeader } = props
   return (

diff --git a/web/src/app/lists/PageControls.tsx b/web/src/app/lists/PageControls.tsx
@@ -25,7 +25,7 @@ export function PageControls(props: {
   page: number
   setPage: (page: number) => void
   isLoading: boolean
-}): JSX.Element {
+}): React.JSX.Element {
   const classes = useStyles()
   const { loadMore, pageCount, page, setPage, isLoading } = props
 

diff --git a/web/src/app/lists/PaginatedList.tsx b/web/src/app/lists/PaginatedList.tsx
@@ -34,7 +34,7 @@ const useStyles = makeStyles(() => ({
   },
 }))
 
-function LoadingItem(props: { dense?: boolean }): JSX.Element {
+function LoadingItem(props: { dense?: boolean }): React.JSX.Element {
   return (
     <ListItem dense={props.dense}>
       <Skeleton variant='rectangular' animation='wave' width='100%'>
@@ -77,7 +77,7 @@ export interface PaginatedListItemProps {
   selected?: boolean
 }
 
-export function PaginatedList(props: PaginatedListProps): JSX.Element {
+export function PaginatedList(props: PaginatedListProps): React.JSX.Element {
   const {
     items = [],
     itemsPerPage = ITEMS_PER_PAGE,