Upgrade dev dependencies (eslint, jest, types, playwright) (#40478)

package.json

@@ -146,25 +146,25 @@
     "@actions/github": "^5.0.3",
     "@graphql-inspector/core": "^5.0.0",
     "@graphql-tools/load": "^8.0.0",
-    "@jest/globals": "29.6.1",
+    "@jest/globals": "29.6.2",
     "@octokit/rest": "^19.0.4",
-    "@playwright/test": "1.36.1",
+    "@playwright/test": "1.36.2",
     "@types/imurmurhash": "^0.1.1",
     "@types/js-cookie": "^3.0.2",
     "@types/lodash": "^4.14.182",
-    "@types/react": "17.0.38",
+    "@types/react": "18.2.19",
     "@types/react-dom": "^18.0.5",
     "@types/react-syntax-highlighter": "^15.5.2",
-    "@typescript-eslint/eslint-plugin": "6.0.0",
-    "@typescript-eslint/parser": "6.0.0",
+    "@typescript-eslint/eslint-plugin": "6.3.0",
+    "@typescript-eslint/parser": "6.3.0",
     "chalk": "^5.0.1",
     "change-case": "^4.1.2",
     "commander": "^11.0.0",
     "cross-env": "^7.0.3",
     "csp-parse": "0.0.2",
     "dedent": "^1.0.1",
-    "eslint": "8.45.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint": "8.46.0",
+    "eslint-config-prettier": "9.0.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-import": "^2.27.5",
@@ -175,7 +175,7 @@
     "graphql": "^16.5.0",
     "http-status-code": "^2.1.0",
     "husky": "^8.0.1",
-    "jest": "29.6.1",
+    "jest": "29.6.2",
     "jest-expect-message": "1.1.3",
     "jest-fail-on-console": "^3.0.1",
     "jest-github-actions-reporter": "^1.0.3",

src/automated-pipelines/components/parameter-table/ParameterRow.tsx

@@ -1,7 +1,6 @@
 import cx from 'classnames'
 
 import { useTranslation } from 'components/hooks/useTranslation'
-import { KeyboardEventHandler } from 'react'
 import { ChildBodyParametersRows } from './ChildBodyParametersRows'
 import type { ChildParameter } from './types'
 
@@ -11,7 +10,7 @@ type Props = {
   numPreviews?: number
   isChild?: boolean
   rowIndex?: number
-  bodyParamExpandCallback?: KeyboardEventHandler<HTMLButtonElement> | undefined
+  bodyParamExpandCallback?: (target: HTMLDetailsElement) => void
   clickedBodyParameterName?: string | undefined
 }
 
@@ -41,8 +40,8 @@ export function ParameterRow({
   numPreviews = 0,
   isChild = false,
   rowIndex = 0,
-  bodyParamExpandCallback = undefined,
-  clickedBodyParameterName = undefined,
+  bodyParamExpandCallback,
+  clickedBodyParameterName,
 }: Props) {
   const { t } = useTranslation(['parameter_table', 'products'])
 
@@ -168,7 +167,12 @@ export function ParameterRow({
             <details
               data-nested-param-id={rowParams.name}
               className="box px-3 ml-1 mb-0"
-              onToggle={bodyParamExpandCallback}
+              onToggle={(event) => {
+                if (bodyParamExpandCallback) {
+                  const target = event.target as HTMLDetailsElement
+                  bodyParamExpandCallback(target)
+                }
+              }}
             >
               <summary role="button" aria-expanded="false" className="mb-2 keyboard-focus">
                 {rowParams.oneOfObject ? (

src/automated-pipelines/components/parameter-table/ParameterTable.tsx

@@ -1,6 +1,5 @@
 import cx from 'classnames'
 import { useTranslation } from 'components/hooks/useTranslation'
-import { KeyboardEventHandler } from 'react'
 
 import { ParameterRow } from './ParameterRow'
 import { BodyParameter, ChildParameter, Parameter } from './types'
@@ -14,7 +13,7 @@ type Props = {
   headers?: Array<ChildParameter>
   parameters?: Array<Parameter>
   bodyParameters: Array<BodyParameter>
-  bodyParamExpandCallback?: KeyboardEventHandler<HTMLButtonElement> | undefined
+  bodyParamExpandCallback?: (target: HTMLDetailsElement) => void
   clickedBodyParameterName?: string | undefined
   variant?: 'rest' | 'webhooks'
 }

src/webhooks/components/Webhook.tsx

@@ -1,5 +1,5 @@
 import { ActionList, ActionMenu, Flash } from '@primer/react'
-import { useState, KeyboardEvent, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import useSWR from 'swr'
 import { useRouter } from 'next/router'
 import { slug } from 'github-slugger'
@@ -122,10 +122,7 @@ export function Webhook({ webhook }: Props) {
   }
 
   // callback to trigger useSWR() hook after a nested property is clicked
-  function handleBodyParamExpansion(event: KeyboardEvent<HTMLElement>) {
-    // need to cast it because 'closest' isn't necessarily available on
-    // event.target
-    const target = event.target as HTMLElement
+  function handleBodyParamExpansion(target: HTMLDetailsElement) {
     setClickedBodyParameterName(target.closest('details')?.dataset.nestedParamId)
   }