Merge pull request #2360 from target/typescript-conversion-AlertsList

ui/alerts: convert AlertsList file to typescript
target · Jun 6, 2022 · 1a7339e · 1a7339e
2 parents 7cd0ce1 + 06af193
commit 1a7339e
Showing 1 changed file with 44 additions and 33 deletions.
diff --git a/web/src/app/alerts/AlertsList.js → web/src/app/alerts/AlertsList.tsx b/web/src/app/alerts/AlertsList.js → web/src/app/alerts/AlertsList.tsx
@@ -1,7 +1,6 @@
-import React, { useState } from 'react'
+import React, { ReactElement, useState } from 'react'
 import { useMutation } from '@apollo/client'
 import { useQuery, gql } from 'urql'
-import { PropTypes as p } from 'prop-types'
 import { Alert, Hidden, ListItemText } from '@mui/material'
 import Snackbar from '@mui/material/Snackbar'
 import makeStyles from '@mui/styles/makeStyles'
@@ -20,6 +19,25 @@ import { useIsWidthDown } from '../util/useWidth'
 import CreateFAB from '../lists/CreateFAB'
 import CreateAlertDialog from './CreateAlertDialog/CreateAlertDialog'
 import { useURLParam } from '../actions'
+import { ControlledPaginatedListAction } from '../lists/ControlledPaginatedList'
+
+interface AlertsListProps {
+  serviceID: string
+  secondaryActions?: ReactElement
+}
+
+interface MutationVariables {
+  input: MutationVariablesInput
+}
+
+interface StatusUnacknowledgedVariables {
+  input: (string | number)[]
+}
+
+interface MutationVariablesInput {
+  newStatus: string
+  alertIDs: (string | number)[]
+}
 
 export const alertsListQuery = gql`
   query alertsList($input: AlertSearchOptions) {
@@ -69,7 +87,7 @@ const useStyles = makeStyles({
   },
 })
 
-function getStatusFilter(s) {
+function getStatusFilter(s: string): string[] {
   switch (s) {
     case 'acknowledged':
       return ['StatusAcknowledged']
@@ -85,7 +103,7 @@ function getStatusFilter(s) {
   }
 }
 
-export default function AlertsList(props) {
+export default function AlertsList(props: AlertsListProps): JSX.Element {
   const classes = useStyles()
   // transition fab above snackbar when snackbar width overlaps fab placement
   const isXs = useIsWidthDown('sm')
@@ -98,7 +116,7 @@ export default function AlertsList(props) {
 
   const [allServices] = useURLParam('allServices', false)
   const [fullTime] = useURLParam('fullTime', false)
-  const [filter] = useURLParam('filter', 'active')
+  const [filter] = useURLParam<string>('filter', 'active')
 
   // query for current service name if props.serviceID is provided
   const [serviceNameQuery] = useQuery({
@@ -121,30 +139,30 @@ export default function AlertsList(props) {
       first: 25,
       // default to favorites only, unless viewing alerts from a service's page
       favoritesOnly: !props.serviceID && !allServices,
-      includeNotified: !props.serviceID, // keep service list alerts specific to that service
+      includeNotified: !props.serviceID, // keep service list alerts specific to that service,
+      filterByServiceID: props.serviceID ? [props.serviceID] : null,
     },
   }
 
-  if (props.serviceID) {
-    variables.input.filterByServiceID = [props.serviceID]
-  }
-
   const [mutate, status] = useMutation(updateMutation)
 
-  const makeUpdateAlerts = (newStatus) => (alertIDs) => {
-    setCheckedCount(alertIDs.length)
-    setActionCompleteDismissed(false)
+  const makeUpdateAlerts =
+    (newStatus: string) => (alertIDs: (string | number)[]) => {
+      setCheckedCount(alertIDs.length)
+      setActionCompleteDismissed(false)
 
-    let mutation = updateMutation
-    let variables = { input: { newStatus, alertIDs } }
+      let mutation = updateMutation
+      let variables: MutationVariables | StatusUnacknowledgedVariables = {
+        input: { newStatus, alertIDs },
+      }
 
-    if (newStatus === 'StatusUnacknowledged') {
-      mutation = escalateMutation
-      variables = { input: alertIDs }
-    }
+      if (newStatus === 'StatusUnacknowledged') {
+        mutation = escalateMutation
+        variables = { input: alertIDs }
+      }
 
-    mutate({ mutation, variables })
-  }
+      mutate({ mutation, variables })
+    }
 
   let updateMessage, errorMessage
   if (status.error && !status.loading) {
@@ -170,7 +188,7 @@ export default function AlertsList(props) {
    * Adds border of color depending on each alert's status
    * on left side of each list item
    */
-  function getListItemStatus(s) {
+  function getListItemStatus(s: string): 'ok' | 'warn' | 'err' | undefined {
     switch (s) {
       case 'StatusAcknowledged':
         return 'warn'
@@ -191,7 +209,7 @@ export default function AlertsList(props) {
    *   - Home page, showing alerts for any favorited services and notified alerts
    *   - Services page, alerts for that service
    */
-  function getHeaderNote() {
+  function getHeaderNote(): string | undefined {
     const { favoritesOnly, includeNotified } = variables.input
 
     if (includeNotified && favoritesOnly) {
@@ -205,18 +223,16 @@ export default function AlertsList(props) {
     if (props.serviceID && serviceNameQuery.data?.service?.name) {
       return `Showing ${filter} alerts for the service ${serviceNameQuery.data.service.name}.`
     }
-
-    return null
   }
 
   /*
    * Passes the proper actions to ListControls depending
    * on which tab is currently filtering the alerts list
    */
-  function getActions() {
-    const actions = []
+  function getActions(): ControlledPaginatedListAction[] {
+    const actions: ControlledPaginatedListAction[] = []
 
-    if (filter !== 'closed' && filter !== 'acknowledged') {
+    if (filter === 'unacknowledged' || filter === 'active') {
       actions.push({
         icon: <AcknowledgeIcon />,
         label: 'Acknowledge',
@@ -314,8 +330,3 @@ export default function AlertsList(props) {
     </React.Fragment>
   )
 }
-
-AlertsList.propTypes = {
-  serviceID: p.string,
-  secondaryActions: p.node,
-}