From c150e6fb998f638ae5c7427bb64483b8cf29e661 Mon Sep 17 00:00:00 2001 From: Nathaniel Caza Date: Tue, 28 Jan 2025 13:35:41 -0600 Subject: [PATCH] refactor: update return types to React.JSX.Element across multiple components --- web/src/app/documentation/Documentation.tsx | 2 +- web/src/app/error-pages/Errors.tsx | 6 +-- .../PolicyCreateDialog.tsx | 2 +- .../PolicyDeleteDialog.tsx | 2 +- .../app/escalation-policies/PolicyDetails.tsx | 2 +- .../escalation-policies/PolicyEditDialog.tsx | 2 +- .../app/escalation-policies/PolicyForm.tsx | 2 +- .../app/escalation-policies/PolicyList.tsx | 2 +- .../PolicyServicesCard.tsx | 2 +- .../PolicyServicesQuery.tsx | 2 +- .../PolicyStepCreateDialog.tsx | 2 +- .../PolicyStepDeleteDialog.tsx | 2 +- .../escalation-policies/PolicyStepsQuery.tsx | 4 +- web/src/app/links/RotationLink.tsx | 2 +- web/src/app/links/ScheduleLink.tsx | 2 +- web/src/app/links/ServiceLink.tsx | 2 +- web/src/app/links/SlackChannelLink.tsx | 2 +- web/src/app/links/UserLink.tsx | 2 +- web/src/app/lists/ControlledPaginatedList.tsx | 6 ++- web/src/app/lists/CreateFAB.tsx | 2 +- web/src/app/lists/DraggableListItem.tsx | 2 +- web/src/app/lists/FlatList.tsx | 38 +++++++++++-------- web/src/app/lists/FlatListItem.tsx | 4 +- web/src/app/lists/ListHeader.tsx | 4 +- web/src/app/lists/PageControls.tsx | 2 +- web/src/app/lists/PaginatedList.tsx | 4 +- web/src/app/lists/QueryList.tsx | 4 +- .../app/loading/components/LoadingButton.tsx | 2 +- web/src/app/loading/components/Spinner.tsx | 2 +- web/src/app/localdev/LocalDev.tsx | 4 +- web/src/app/main/App.tsx | 2 +- web/src/app/main/AppRoutes.tsx | 4 +- web/src/app/main/NavBar.tsx | 2 +- web/src/app/main/NavBarLink.tsx | 6 +-- web/src/app/main/SnackbarNotification.tsx | 2 +- web/src/app/main/WideSideBar.tsx | 2 +- web/src/app/main/components/AuthLink.tsx | 2 +- web/src/app/main/components/BreadCrumb.tsx | 2 +- web/src/app/main/components/Login.tsx | 8 ++-- web/src/app/main/components/NewUserSetup.tsx | 2 +- web/src/app/main/components/ToolbarAction.tsx | 8 ++-- .../app/main/components/ToolbarPageTitle.tsx | 2 +- .../main/components/UserSettingsPopover.tsx | 2 +- web/src/app/rotations/HandoffSummary.tsx | 6 +-- .../app/rotations/RotationAddUserDialog.tsx | 2 +- .../app/rotations/RotationCreateDialog.tsx | 4 +- .../app/rotations/RotationDeleteDialog.tsx | 2 +- web/src/app/rotations/RotationDetails.tsx | 2 +- web/src/app/rotations/RotationEditDialog.tsx | 2 +- web/src/app/rotations/RotationForm.tsx | 4 +- .../rotations/RotationFormHandoffTimes.tsx | 2 +- web/src/app/rotations/RotationList.tsx | 2 +- .../app/rotations/RotationSetActiveDialog.tsx | 2 +- .../rotations/RotationUserDeleteDialog.tsx | 2 +- web/src/app/rotations/RotationUserList.tsx | 2 +- web/src/app/rotations/UserForm.tsx | 2 +- .../app/schedules/ScheduleAssignedToList.tsx | 2 +- .../app/schedules/ScheduleCalendarQuery.tsx | 2 +- .../app/schedules/ScheduleCreateDialog.tsx | 2 +- .../app/schedules/ScheduleDeleteDialog.tsx | 2 +- web/src/app/schedules/ScheduleDetails.tsx | 2 +- web/src/app/schedules/ScheduleEditDialog.tsx | 2 +- web/src/app/schedules/ScheduleForm.tsx | 4 +- 63 files changed, 114 insertions(+), 96 deletions(-) diff --git a/web/src/app/documentation/Documentation.tsx b/web/src/app/documentation/Documentation.tsx index 1300746ab6..6c6706d1ac 100644 --- 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 index 71f6aa2cfa..74edbed725 100644 --- 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 (
@@ -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 (
@@ -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 index 9732615893..d0a2ee02cd 100644 --- 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 index a000ee396b..957224e17f 100644 --- 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 index 4eb12ed7b4..7f8253abea 100644 --- 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 index 27d3197e75..4ee7fc28b4 100644 --- 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(null) const [{ data, fetching }] = useQuery({ query, diff --git a/web/src/app/escalation-policies/PolicyForm.tsx b/web/src/app/escalation-policies/PolicyForm.tsx index 89a6120402..3c37522b8d 100644 --- 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 ( diff --git a/web/src/app/escalation-policies/PolicyList.tsx b/web/src/app/escalation-policies/PolicyList.tsx index 055369c1fe..d2dfbd36de 100644 --- 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('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 index e9987c9aad..ca028de924 100644 --- 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 index 8663edd3b3..229d05cc1e 100644 --- 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 index 75d638fc57..d55d40e9b7 100644 --- 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({ actions: [], delayMinutes: 15, diff --git a/web/src/app/escalation-policies/PolicyStepDeleteDialog.tsx b/web/src/app/escalation-policies/PolicyStepDeleteDialog.tsx index c7f388db02..a012223d4e 100644 --- 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 index a5cf9db659..d47a7c287e 100644 --- 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 index 24746f4bb9..b916096691 100644 --- 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 {rotation.name} } diff --git a/web/src/app/links/ScheduleLink.tsx b/web/src/app/links/ScheduleLink.tsx index a01eb9a726..deaee66255 100644 --- 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 {schedule.name} } diff --git a/web/src/app/links/ServiceLink.tsx b/web/src/app/links/ServiceLink.tsx index f7f0c4c34d..844ab0d726 100644 --- 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 {service.name} } diff --git a/web/src/app/links/SlackChannelLink.tsx b/web/src/app/links/SlackChannelLink.tsx index 0a0fc57e27..7730dcc34a 100644 --- 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 index fd4392fb4f..1193a5219d 100644 --- 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 {user.name} } diff --git a/web/src/app/lists/ControlledPaginatedList.tsx b/web/src/app/lists/ControlledPaginatedList.tsx index c2d4fec409..fc29abf5aa 100644 --- 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 index 84a5a772ac..5c1f0b7c95 100644 --- a/web/src/app/lists/CreateFAB.tsx +++ b/web/src/app/lists/CreateFAB.tsx @@ -33,7 +33,7 @@ interface CreateFabProps extends Omit { 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 index 39da407773..37e28ae0cd 100644 --- 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 index 141d533f78..fdd74c8c12 100644 --- 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 { 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 { 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 ( { if ('subHeader' in item) { return ( @@ -341,7 +347,7 @@ export default function FlatList({ }) } - function renderTransitions(): JSX.Element { + function renderTransitions(): React.JSX.Element { return {renderTransitionItems()} } @@ -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 index 77929009ec..27b4a15e09 100644 --- 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 index 3075904b99..eba8f2a9f2 100644 --- 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 index be3508b38b..0e3aca71bd 100644 --- 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 index 4881a8a6fd..800ac0348a 100644 --- 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 ( @@ -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, diff --git a/web/src/app/lists/QueryList.tsx b/web/src/app/lists/QueryList.tsx index ad7c0c4e4e..cf707789bc 100644 --- a/web/src/app/lists/QueryList.tsx +++ b/web/src/app/lists/QueryList.tsx @@ -95,7 +95,7 @@ export interface _QueryListProps extends ControlledPaginatedListProps { export type QueryListProps = Omit<_QueryListProps, 'items'> -export default function QueryList(props: QueryListProps): JSX.Element { +export default function QueryList(props: QueryListProps): React.JSX.Element { const { mapDataNode = (n: ObjectMap) => ({ id: n.id, @@ -174,7 +174,7 @@ export default function QueryList(props: QueryListProps): JSX.Element { ) } - function renderList(): JSX.Element { + function renderList(): React.JSX.Element { if ( props.checkboxActions?.length || props.secondaryActions || diff --git a/web/src/app/loading/components/LoadingButton.tsx b/web/src/app/loading/components/LoadingButton.tsx index 6f3061ce07..4e1cd54d54 100644 --- a/web/src/app/loading/components/LoadingButton.tsx +++ b/web/src/app/loading/components/LoadingButton.tsx @@ -10,7 +10,7 @@ interface LoadingButtonProps extends ButtonProps { style?: React.CSSProperties } -const LoadingButton = (props: LoadingButtonProps): JSX.Element => { +const LoadingButton = (props: LoadingButtonProps): React.JSX.Element => { const { attemptCount, buttonText, diff --git a/web/src/app/loading/components/Spinner.tsx b/web/src/app/loading/components/Spinner.tsx index c2aed1c084..c183fa7b20 100644 --- a/web/src/app/loading/components/Spinner.tsx +++ b/web/src/app/loading/components/Spinner.tsx @@ -24,7 +24,7 @@ interface SpinnerProps { /* * Show a loading spinner in the center of the container. */ -export default function Spinner(props: SpinnerProps): JSX.Element | null { +export default function Spinner(props: SpinnerProps): React.JSX.Element | null { const [spin, setSpin] = useState(false) const { delayMs = DEFAULT_SPIN_DELAY_MS, waitMs = DEFAULT_SPIN_WAIT_MS } = props diff --git a/web/src/app/localdev/LocalDev.tsx b/web/src/app/localdev/LocalDev.tsx index fee8e3ffaf..77e49037ce 100644 --- a/web/src/app/localdev/LocalDev.tsx +++ b/web/src/app/localdev/LocalDev.tsx @@ -22,12 +22,12 @@ type DevToolProps = { url?: string } -export default function LocalDev(): JSX.Element { +export default function LocalDev(): React.JSX.Element { const [updateConfig, setUpdateConfig] = useState > | null>(null) - function DevTool(props: DevToolProps): JSX.Element { + function DevTool(props: DevToolProps): React.JSX.Element { return ( diff --git a/web/src/app/main/App.tsx b/web/src/app/main/App.tsx index b2f0e4529f..9a28a6e486 100644 --- a/web/src/app/main/App.tsx +++ b/web/src/app/main/App.tsx @@ -53,7 +53,7 @@ const useStyles = makeStyles((theme: Theme) => ({ }, })) -export default function App(): JSX.Element { +export default function App(): React.JSX.Element { const [analyticsID] = useConfigValue('General.GoogleAnalyticsID') as [string] useEffect(() => { diff --git a/web/src/app/main/AppRoutes.tsx b/web/src/app/main/AppRoutes.tsx index af6a4cd761..8df54e51cb 100644 --- a/web/src/app/main/AppRoutes.tsx +++ b/web/src/app/main/AppRoutes.tsx @@ -46,7 +46,7 @@ import UniversalKeyPage from '../services/UniversalKey/UniversalKeyPage' import { useExpFlag } from '../util/useExpFlag' // ParamRoute will pass route parameters as props to the route's child. -function ParamRoute(props: RouteProps): JSX.Element { +function ParamRoute(props: RouteProps): React.JSX.Element { if (!props.path) { throw new Error('ParamRoute requires a path prop') } @@ -134,7 +134,7 @@ if (process.env.NODE_ENV !== 'production') { routes['/dev'] = LocalDev } -export default function AppRoutes(): JSX.Element { +export default function AppRoutes(): React.JSX.Element { const [path, setPath] = useLocation() const { userID } = useSessionInfo() diff --git a/web/src/app/main/NavBar.tsx b/web/src/app/main/NavBar.tsx index f388f3e28b..b2d5e8131d 100644 --- a/web/src/app/main/NavBar.tsx +++ b/web/src/app/main/NavBar.tsx @@ -38,7 +38,7 @@ const useStyles = makeStyles((theme: Theme) => ({ }, })) -export default function NavBar(): JSX.Element { +export default function NavBar(): React.JSX.Element { const classes = useStyles() const theme = useTheme() diff --git a/web/src/app/main/NavBarLink.tsx b/web/src/app/main/NavBarLink.tsx index 91c00ff10a..ad4e004f7c 100644 --- a/web/src/app/main/NavBarLink.tsx +++ b/web/src/app/main/NavBarLink.tsx @@ -49,7 +49,7 @@ export function NavBarSubLink({ to, title, newTab, -}: NavBarSubLinkProps): JSX.Element { +}: NavBarSubLinkProps): React.JSX.Element { const { navSelected, nav, subMenuLinkText } = useStyles() const [path] = useLocation() return ( @@ -71,7 +71,7 @@ export function NavBarSubLink({ } export type NavBarLinkProps = { - icon: JSX.Element + icon: React.JSX.Element title: string to: string children?: React.ReactNode[] | React.ReactNode @@ -82,7 +82,7 @@ export default function NavBarLink({ title, to, children, -}: NavBarLinkProps): JSX.Element { +}: NavBarLinkProps): React.JSX.Element { const classes = useStyles() const [path] = useLocation() const isRoute = path.startsWith(to) diff --git a/web/src/app/main/SnackbarNotification.tsx b/web/src/app/main/SnackbarNotification.tsx index 760d3a165f..a47ca47467 100644 --- a/web/src/app/main/SnackbarNotification.tsx +++ b/web/src/app/main/SnackbarNotification.tsx @@ -25,7 +25,7 @@ interface NotificationProviderProps { export const NotificationProvider = ( props: NotificationProviderProps, -): JSX.Element => { +): React.JSX.Element => { const [notification, setNotification] = useState() const [open, setOpen] = useState(false) diff --git a/web/src/app/main/WideSideBar.tsx b/web/src/app/main/WideSideBar.tsx index 31f83f774e..f574ba2caf 100644 --- a/web/src/app/main/WideSideBar.tsx +++ b/web/src/app/main/WideSideBar.tsx @@ -20,7 +20,7 @@ interface WideSideBarProps { children: ReactNode } -function WideSideBar(props: WideSideBarProps): JSX.Element { +function WideSideBar(props: WideSideBarProps): React.JSX.Element { const classes = useStyles() return ( diff --git a/web/src/app/main/components/AuthLink.tsx b/web/src/app/main/components/AuthLink.tsx index b665bb029a..bf07db792d 100644 --- a/web/src/app/main/components/AuthLink.tsx +++ b/web/src/app/main/components/AuthLink.tsx @@ -31,7 +31,7 @@ const updateStatusMutation = gql` } ` -export default function AuthLink(): JSX.Element | null { +export default function AuthLink(): React.JSX.Element | null { const [token, setToken] = useURLParam('authLinkToken', '') const [, navigate] = useLocation() diff --git a/web/src/app/main/components/BreadCrumb.tsx b/web/src/app/main/components/BreadCrumb.tsx index 4cd80ab4e2..f9b976dafe 100644 --- a/web/src/app/main/components/BreadCrumb.tsx +++ b/web/src/app/main/components/BreadCrumb.tsx @@ -80,7 +80,7 @@ export function useName(crumb: string, index: number, parts: string[]): string { return toTitleCase(crumb) } -export default function BreadCrumb(props: BreadCrumbProps): JSX.Element { +export default function BreadCrumb(props: BreadCrumbProps): React.JSX.Element { const { index, crumb, link, urlParts } = props const name = useName(crumb, index, urlParts) diff --git a/web/src/app/main/components/Login.tsx b/web/src/app/main/components/Login.tsx index 588b687318..f84511f408 100644 --- a/web/src/app/main/components/Login.tsx +++ b/web/src/app/main/components/Login.tsx @@ -81,7 +81,7 @@ type Provider = { URL: string } -export default function Login(): JSX.Element { +export default function Login(): React.JSX.Element { const classes = useStyles() const theme = useTheme() const [error, setError] = useState(getParameterByName('login_error') || '') @@ -99,7 +99,7 @@ export default function Login(): JSX.Element { * Renders a field from a provider */ - function renderField(field: Field): JSX.Element { + function renderField(field: Field): React.JSX.Element { const { ID: id, // unique name/identifier of the field Label: label, // placeholder text that is displayed to the use in the field @@ -126,7 +126,7 @@ export default function Login(): JSX.Element { function renderHasNextDivider( idx: number, len: number, - ): JSX.Element | undefined { + ): React.JSX.Element | undefined { if (idx + 1 < len) { return ( @@ -146,7 +146,7 @@ export default function Login(): JSX.Element { provider: Provider, idx: number, len: number, - ): JSX.Element | null { + ): React.JSX.Element | null { const { ID: id, // unique identifier of the provider Fields: fields, // holds a list of fields to include with the request diff --git a/web/src/app/main/components/NewUserSetup.tsx b/web/src/app/main/components/NewUserSetup.tsx index d14c027ce7..268379ff5b 100644 --- a/web/src/app/main/components/NewUserSetup.tsx +++ b/web/src/app/main/components/NewUserSetup.tsx @@ -4,7 +4,7 @@ import { useSessionInfo } from '../../util/RequireConfig' import { useResetURLParams, useURLParam } from '../../actions' import UserContactMethodCreateDialog from '../../users/UserContactMethodCreateDialog' -export default function NewUserSetup(): JSX.Element { +export default function NewUserSetup(): React.JSX.Element { const [isFirstLogin] = useURLParam('isFirstLogin', '') const clearIsFirstLogin = useResetURLParams('isFirstLogin') const [contactMethodID, setContactMethodID] = useState('') diff --git a/web/src/app/main/components/ToolbarAction.tsx b/web/src/app/main/components/ToolbarAction.tsx index b1a9e26eb9..04a1505323 100644 --- a/web/src/app/main/components/ToolbarAction.tsx +++ b/web/src/app/main/components/ToolbarAction.tsx @@ -18,12 +18,12 @@ function removeLastPartOfPath(path: string): string { return parts.join('/') } -function ToolbarAction(props: ToolbarActionProps): JSX.Element { +function ToolbarAction(props: ToolbarActionProps): React.JSX.Element { const fullScreen = useIsWidthDown('md') const [, navigate] = useLocation() - function renderToolbarAction(): JSX.Element { + function renderToolbarAction(): React.JSX.Element { const route = removeLastPartOfPath(window.location.pathname) // only show back button on mobile @@ -44,7 +44,7 @@ function ToolbarAction(props: ToolbarActionProps): JSX.Element { ) } - function renderToolbarMenu(): JSX.Element { + function renderToolbarMenu(): React.JSX.Element { return ( ( + const getRoute = (route: string, idx: number): React.JSX.Element => ( {renderToolbarAction()} diff --git a/web/src/app/main/components/ToolbarPageTitle.tsx b/web/src/app/main/components/ToolbarPageTitle.tsx index 8a410d0532..04c97c06e3 100644 --- a/web/src/app/main/components/ToolbarPageTitle.tsx +++ b/web/src/app/main/components/ToolbarPageTitle.tsx @@ -18,7 +18,7 @@ export const getContrastColor = (theme: Theme): string => { ) } -export default function ToolbarPageTitle(): JSX.Element { +export default function ToolbarPageTitle(): React.JSX.Element { const isMobile = useIsWidthDown('md') const [path] = useLocation() diff --git a/web/src/app/main/components/UserSettingsPopover.tsx b/web/src/app/main/components/UserSettingsPopover.tsx index cb683e38c0..f6d0210fb4 100644 --- a/web/src/app/main/components/UserSettingsPopover.tsx +++ b/web/src/app/main/components/UserSettingsPopover.tsx @@ -13,7 +13,7 @@ import { CurrentUserAvatar } from '../../util/avatars' import AppLink from '../../util/AppLink' import { useConfigValue, useSessionInfo } from '../../util/RequireConfig' -export default function UserSettingsPopover(): JSX.Element { +export default function UserSettingsPopover(): React.JSX.Element { const [feedbackEnabled, feedbackOverrideURL] = useConfigValue( 'Feedback.Enable', 'Feedback.OverrideURL', diff --git a/web/src/app/rotations/HandoffSummary.tsx b/web/src/app/rotations/HandoffSummary.tsx index 2951142d46..26cd9560bb 100644 --- a/web/src/app/rotations/HandoffSummary.tsx +++ b/web/src/app/rotations/HandoffSummary.tsx @@ -9,7 +9,7 @@ export interface HandoffSummaryProps { timeZone: string } -function dur(p: HandoffSummaryProps): JSX.Element | string { +function dur(p: HandoffSummaryProps): React.JSX.Element | string { if (p.type === 'hourly') return