ui/alerts: Convert alert step content to typescript

web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertConfirm.js → web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertConfirm.tsx

@@ -14,10 +14,20 @@ const useStyles = makeStyles({
   },
 })
 
-export function CreateAlertConfirm() {
+export function CreateAlertConfirm(): JSX.Element {
   const classes = useStyles()
 
-  const renderItem = ({ name, label, value, children }) => (
+  const renderItem = ({
+    name,
+    label,
+    value,
+    children,
+  }: {
+    name: string
+    label: string
+    value: string
+    children: JSX.Element
+  }): JSX.Element => (
     <Grid item xs={12}>
       <Typography
         variant='subtitle1'
@@ -56,7 +66,7 @@ export function CreateAlertConfirm() {
           renderItem({
             ...otherProps,
             label: `Selected Services (${value.length})`,
-            children: value.map((id) => (
+            children: value.map((id: string) => (
               <ServiceChip
                 key={id}
                 clickable={false}

web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertInfo.js → 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() {
+export function CreateAlertInfo(): JSX.Element {
   return (
     <Grid container spacing={2}>
       <Grid item xs={12}>

web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertListItem.js → web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertListItem.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import p from 'prop-types'
 import { ListItem, ListItemText, Typography } from '@mui/material'
 import makeStyles from '@mui/styles/makeStyles'
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
@@ -21,7 +20,9 @@ const useStyles = makeStyles({
   },
 })
 
-export default function CreateAlertListItem(props) {
+export default function CreateAlertListItem(props: {
+  id: string
+}): JSX.Element {
   const { id } = props
 
   const classes = useStyles()
@@ -49,7 +50,3 @@ export default function CreateAlertListItem(props) {
     </ListItem>
   )
 }
-
-CreateAlertListItem.propTypes = {
-  id: p.string.isRequired,
-}

web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertReview.js → web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertReview.tsx

@@ -1,18 +1,27 @@
 import React from 'react'
-import p from 'prop-types'
 import { Grid, List } from '@mui/material'
 import CreateAlertListItem from './CreateAlertListItem'
 import CreateAlertServiceListItem from './CreateAlertServiceListItem'
 
-export function CreateAlertReview(props) {
+interface FailedService {
+  id: string
+  message: string
+}
+
+interface CreateAlertReviewProps {
+  createdAlertIDs?: string[]
+  failedServices?: FailedService[]
+}
+
+export function CreateAlertReview(props: CreateAlertReviewProps): JSX.Element {
   const { createdAlertIDs = [], failedServices = [] } = props
 
   return (
     <Grid container spacing={2}>
       {createdAlertIDs.length > 0 && (
         <Grid item xs={12}>
           <List aria-label='Successfully created alerts'>
-            {createdAlertIDs.map((id) => (
+            {createdAlertIDs.map((id: string) => (
               <CreateAlertListItem key={id} id={id} />
             ))}
           </List>
@@ -37,13 +46,3 @@ export function CreateAlertReview(props) {
     </Grid>
   )
 }
-
-CreateAlertReview.propTypes = {
-  createdAlertIDs: p.arrayOf(p.string),
-  failedServices: p.arrayOf(
-    p.shape({
-      id: p.string,
-      message: p.string,
-    }),
-  ),
-}

web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertServiceListItem.js → web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertServiceListItem.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { gql, useQuery } from '@apollo/client'
-import p from 'prop-types'
 
 import { ListItem, ListItemText, Typography } from '@mui/material'
 
@@ -26,7 +25,14 @@ const useStyles = makeStyles({
   },
 })
 
-export default function CreateAlertServiceListItem(props) {
+interface CreateAlertServiceListItemProps {
+  id: string
+  err?: string
+}
+
+export default function CreateAlertServiceListItem(
+  props: CreateAlertServiceListItemProps,
+): JSX.Element {
   const { id, err } = props
 
   const classes = useStyles()
@@ -43,8 +49,8 @@ export default function CreateAlertServiceListItem(props) {
 
   const { service } = data || {}
 
-  if (!data && loading) return 'Loading...'
-  if (queryError) return 'Error fetching data.'
+  if (!data && loading) return <div>Loading...</div>
+  if (queryError) return <div>Error fetching data.</div>
 
   const serviceURL = '/services/' + id + '/alerts'
 
@@ -69,8 +75,3 @@ export default function CreateAlertServiceListItem(props) {
     </ListItem>
   )
 }
-
-CreateAlertServiceListItem.propTypes = {
-  id: p.string.isRequired,
-  err: p.string,
-}

web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertServiceSelect.js → web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertServiceSelect.tsx

@@ -1,6 +1,5 @@
-import React, { useRef, useState, useEffect } from 'react'
+import React, { useRef, useState, useEffect, MouseEvent } from 'react'
 import { gql, useQuery } from '@apollo/client'
-import p from 'prop-types'
 import {
   TextField,
   InputAdornment,
@@ -15,6 +14,7 @@ import {
   FormLabel,
   FormControl,
   Box,
+  Theme,
 } from '@mui/material'
 import makeStyles from '@mui/styles/makeStyles'
 import ServiceLabelFilterContainer from '../../../services/ServiceFilterContainer'
@@ -27,6 +27,7 @@ import getServiceFilters from '../../../util/getServiceFilters'
 import { CREATE_ALERT_LIMIT, DEBOUNCE_DELAY } from '../../../config'
 
 import { allErrors } from '../../../util/errutil'
+import { Service } from '../../../../schema'
 
 const query = gql`
   query ($input: ServiceSearchOptions) {
@@ -40,7 +41,7 @@ const query = gql`
   }
 `
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles((theme: Theme) => ({
   addAll: {
     marginRight: '0.25em',
   },
@@ -68,8 +69,17 @@ const useStyles = makeStyles((theme) => ({
   },
 }))
 
-export function CreateAlertServiceSelect(props) {
+interface CreateAlertServiceSelectProps {
+  value: string[]
+  onChange: (val: string[]) => void
+  error?: Error
+}
+
+export function CreateAlertServiceSelect(
+  props: CreateAlertServiceSelectProps,
+): JSX.Element {
   const { value, onChange } = props
+
   const [searchQueryInput, setSearchQueryInput] = useState('')
   const [searchUserInput, setSearchUserInput] = useState('')
 
@@ -88,10 +98,10 @@ export function CreateAlertServiceSelect(props) {
     },
   })
 
-  const fieldRef = useRef()
+  const fieldRef = useRef<HTMLElement>(null)
   const classes = useStyles()
   const searchResults = _.get(data, 'services.nodes', []).filter(
-    ({ id }) => !value.includes(id),
+    ({ id }: { id: string }) => !value.includes(id),
   )
 
   const queryErrorMsg = allErrors(queryError)
@@ -118,10 +128,10 @@ export function CreateAlertServiceSelect(props) {
 
   const { labelKey, labelValue } = getServiceFilters(searchUserInput)
 
-  const addAll = (e) => {
+  const addAll = (e: MouseEvent<HTMLButtonElement>): void => {
     e.stopPropagation()
     e.preventDefault()
-    const resultIDs = searchResults.map((s) => s.id)
+    const resultIDs = searchResults.map((s: { id: string }) => s.id)
 
     props.onChange(
       _.uniq([...value, ...resultIDs]).slice(0, CREATE_ALERT_LIMIT),
@@ -168,7 +178,7 @@ export function CreateAlertServiceSelect(props) {
         </Paper>
         {Boolean(props.error) && (
           <FormHelperText>
-            {props.error.message.replace(/^./, (str) => str.toUpperCase())}
+            {props.error?.message.replace(/^./, (str) => str.toUpperCase())}
           </FormHelperText>
         )}
       </FormControl>
@@ -223,16 +233,15 @@ export function CreateAlertServiceSelect(props) {
                 <Typography color='error'>{queryErrorMsg}</Typography>
               </ListItem>
             )}
-
-            {searchResults.map((service) => (
+            {searchResults.map((service: Service) => (
               <ListItem
                 button
                 data-cy='service-select-item'
                 key={service.id}
                 disabled={value.length >= CREATE_ALERT_LIMIT}
                 onClick={() =>
                   onChange([
-                    ...value.filter((id) => id !== service.id),
+                    ...value.filter((id: string) => id !== service.id),
                     service.id,
                   ])
                 }
@@ -257,8 +266,3 @@ export function CreateAlertServiceSelect(props) {
     </Box>
   )
 }
-
-CreateAlertServiceSelect.propTypes = {
-  onChange: p.func.isRequired,
-  error: p.object,
-}

web/src/app/forms/FormField.js

@@ -246,7 +246,7 @@ FormField.propTypes = {
   disabled: p.bool,
 
   multiline: p.bool,
-  rows: p.string,
+  rows: p.number,
   autoComplete: p.string,
 
   charCount: p.number,

web/src/app/services/ServiceFilterContainer.tsx

@@ -11,7 +11,7 @@ import FilterContainer from '../util/FilterContainer'
 interface Value {
   labelKey: string
   labelValue: string
-  integrationKey: string
+  integrationKey?: string
 }
 
 interface ServiceFilterContainerProps {

web/src/app/services/ServiceForm.tsx

@@ -45,7 +45,7 @@ export default function ServiceForm(props: ServiceFormProps): JSX.Element {
             label='Description'
             name='description'
             multiline
-            rows='4'
+            rows={4}
             component={TextField}
             charCount={MaxDetailsLength}
             hint='Markdown Supported'