chore: batch js updates (#3298)

* use createRoot * upgrade yarn * add missing type * prettier * refactor CreateAlertConfirm for ts update * remove duplicate react types def. * fix callback types * upgrade remark, urql, wonka * remove duplicate package * regen lockfile * update timer type * revert remark-gfm update * set yarn version to makefile version
target · Sep 27, 2023 · f5e81d7 · f5e81d7
1 parent 0e78abf
commit f5e81d7
Show file tree

Hide file tree

Showing 11 changed files with 1,716 additions and 2,503 deletions.
diff --git a/.yarn/releases/yarn-3.5.0.cjs → .yarn/releases/yarn-3.6.3.cjs b/.yarn/releases/yarn-3.5.0.cjs → .yarn/releases/yarn-3.6.3.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -1,2 +1,3 @@
-yarnPath: .yarn/releases/yarn-3.5.0.cjs
 defaultSemverRangePrefix: ''
+
+yarnPath: .yarn/releases/yarn-3.6.3.cjs
diff --git a/Makefile b/Makefile
@@ -21,7 +21,7 @@ SWO_DB_URL_NEXT = $(shell go run ./devtools/scripts/db-url "$(DB_URL)" "$(SWO_DB
 
 LOG_DIR=
 GOPATH:=$(shell go env GOPATH)
-YARN_VERSION=3.5.0
+YARN_VERSION=3.6.3
 PG_VERSION=13
 
 NODE_DEPS=.pnp.cjs .yarnrc.yml
@@ -190,7 +190,7 @@ check: check-go check-js ## Run all lint checks
 	$(MAKE) yarn
 
 .yarn/releases/yarn-$(YARN_VERSION).cjs:
-	yarn set version stable || $(MAKE) yarn
+	yarn set version $(YARN_VERSION) || $(MAKE) yarn
 
 ensure-yarn: # Yarn ensures the correct version of yarn is installed
 	@echo "Checking yarn version..."

diff --git a/package.json b/package.json
@@ -30,45 +30,45 @@
     ]
   },
   "devDependencies": {
-    "@apollo/client": "3.8.1",
-    "@babel/core": "7.22.17",
+    "@apollo/client": "3.8.4",
+    "@babel/core": "7.22.20",
     "@babel/plugin-transform-modules-commonjs": "7.22.15",
     "@dnd-kit/core": "6.0.8",
     "@dnd-kit/sortable": "7.0.2",
     "@dnd-kit/utilities": "3.2.1",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@material/material-color-utilities": "0.2.7",
-    "@mui/icons-material": "5.14.7",
-    "@mui/lab": "5.0.0-alpha.134",
-    "@mui/material": "5.14.7",
-    "@mui/styles": "5.14.7",
-    "@mui/system": "5.14.7",
-    "@mui/x-data-grid": "6.9.1",
-    "@playwright/test": "1.35.1",
-    "@types/chance": "1.1.3",
-    "@types/diff": "5.0.3",
+    "@mui/icons-material": "5.14.9",
+    "@mui/lab": "5.0.0-alpha.145",
+    "@mui/material": "5.14.10",
+    "@mui/styles": "5.14.10",
+    "@mui/system": "5.14.10",
+    "@mui/x-data-grid": "6.14.0",
+    "@playwright/test": "1.38.0",
+    "@types/chance": "1.1.4",
+    "@types/diff": "5.0.4",
     "@types/glob": "8.1.0",
     "@types/jest": "29.5.5",
-    "@types/lodash": "4.14.195",
-    "@types/luxon": "3.3.0",
-    "@types/prop-types": "15.7.5",
-    "@types/react": "18.2.15",
+    "@types/lodash": "4.14.198",
+    "@types/luxon": "3.3.2",
+    "@types/prop-types": "15.7.6",
+    "@types/react": "18.2.22",
     "@types/react-big-calendar": "1.6.4",
-    "@types/react-dom": "18.2.6",
+    "@types/react-dom": "18.2.7",
     "@types/react-transition-group": "4.4.6",
     "@types/react-virtualized-auto-sizer": "1.0.1",
-    "@typescript-eslint/eslint-plugin": "5.60.1",
-    "@typescript-eslint/parser": "6.4.0",
+    "@typescript-eslint/eslint-plugin": "6.7.2",
+    "@typescript-eslint/parser": "6.7.2",
     "@urql/exchange-retry": "1.2.0",
     "bowser": "2.11.0",
     "chance": "1.1.11",
     "classnames": "2.3.2",
     "cypress": "12.16.0",
     "diff": "5.1.0",
-    "esbuild": "0.18.11",
+    "esbuild": "0.19.3",
     "esbuild-jest": "0.5.0",
-    "eslint": "8.44.0",
+    "eslint": "8.49.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-config-standard": "17.1.0",
     "eslint-config-standard-jsx": "11.0.0",
@@ -79,21 +79,21 @@
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-prettier": "5.0.0",
     "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "fuse.js": "6.6.2",
-    "glob": "10.3.4",
+    "glob": "10.3.5",
     "graphiql": "2.4.7",
-    "graphql": "16.7.1",
+    "graphql": "16.8.1",
     "jest": "29.7.0",
     "lodash": "4.17.21",
-    "luxon": "3.3.0",
+    "luxon": "3.4.3",
     "mdi-material-ui": "7.7.0",
     "prettier": "3.0.3",
     "prettier-plugin-go-template": "0.0.15",
     "prop-types": "15.8.1",
     "react": "18.2.0",
-    "react-big-calendar": "1.8.2",
+    "react-big-calendar": "1.8.4",
     "react-colorful": "5.6.1",
     "react-countdown": "2.3.5",
     "react-dom": "18.2.0",
@@ -110,10 +110,10 @@
     "remark-gfm": "3.0.1",
     "stylelint": "15.10.3",
     "stylelint-config-standard": "34.0.0",
-    "typescript": "5.0.4",
-    "urql": "4.0.4",
-    "wonka": "6.3.2",
+    "typescript": "5.2.2",
+    "urql": "4.0.5",
+    "wonka": "6.3.4",
     "wouter": "2.11.0"
   },
-  "packageManager": "yarn@3.5.0"
+  "packageManager": "yarn@3.6.3"
 }
diff --git a/web/index.html b/web/index.html
@@ -40,8 +40,8 @@
     <div id="app"></div>
     <div id="graceful-unmount"></div>
     <script>
-      pathPrefix = '{{.PathPrefix}}';
-      applicationName = '{{.ApplicationName}}';
+      pathPrefix = "{{.PathPrefix}}";
+      applicationName = "{{.ApplicationName}}";
     </script>
     <script src="{{ .Prefix }}/static/app.js"></script>
     {{- if .ExtraJS }}

diff --git a/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertConfirm.tsx b/web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertConfirm.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactNode } from 'react'
 import { Typography, Grid, Divider } from '@mui/material'
 import makeStyles from '@mui/styles/makeStyles'
 import { ServiceChip } from '../../../util/Chips'
@@ -14,69 +14,69 @@ const useStyles = makeStyles({
   },
 })
 
-export function CreateAlertConfirm(): JSX.Element {
-  const classes = useStyles()
+type FieldProps = {
+  children: ReactNode
+  label: string
+}
 
-  const renderItem = ({
-    name,
-    label,
-    value,
-    children,
-  }: {
-    name: string
-    label: string
-    value: string
-    children: JSX.Element
-  }): JSX.Element => (
+function Field(props: FieldProps): JSX.Element {
+  const classes = useStyles()
+  return (
     <Grid item xs={12}>
       <Typography
         variant='subtitle1'
         component='h3'
         className={classes.itemTitle}
       >
-        {label}
+        {props.label}
       </Typography>
 
       <Divider />
 
-      <div className={classes.itemContent}>
-        {children ||
-          (name === 'details' ? (
-            <Typography variant='body1' component='div'>
-              <Markdown value={value} />
-            </Typography>
-          ) : (
-            <Typography variant='body1' component='p'>
-              {value}
-            </Typography>
-          ))}
-      </div>
+      <div className={classes.itemContent}>{props.children}</div>
     </Grid>
   )
+}
 
+export function CreateAlertConfirm(): JSX.Element {
   return (
     <Grid container spacing={2}>
-      <FormField name='summary' label='Summary' required render={renderItem} />
-      <FormField name='details' label='Details' render={renderItem} />
-
       <FormField
-        label='Selected Services'
+        name='summary'
+        required
+        render={(p: { value: string }) => (
+          <Field label='Summary'>
+            <Typography variant='body1' component='p'>
+              {p.value}
+            </Typography>
+          </Field>
+        )}
+      />
+      <FormField
+        name='details'
+        render={(p: { value: string }) => (
+          <Field label='Details'>
+            <Typography variant='body1' component='div'>
+              <Markdown value={p.value} />
+            </Typography>
+          </Field>
+        )}
+      />
+      <FormField
         name='serviceIDs'
-        render={({ value, ...otherProps }) =>
-          renderItem({
-            ...otherProps,
-            label: `Selected Services (${value.length})`,
-            children: value.map((id: string) => (
+        render={(p: { value: string[] }) => (
+          <Field label={`Selected Services (${p.value.length})`}>
+            {p.value.map((id: string) => (
               <ServiceChip
                 key={id}
                 clickable={false}
                 id={id}
                 style={{ margin: 3 }}
                 onClick={(e) => e.preventDefault()}
               />
-            )),
-          })
-        }
+            ))}
+          </Field>
+        )}
       />
     </Grid>
   )

diff --git a/web/src/app/selection/MaterialSelect.tsx b/web/src/app/selection/MaterialSelect.tsx
@@ -170,7 +170,9 @@ export default function MaterialSelect(
       disableClearable={required}
       disabled={disabled}
       filterOptions={(o) => o}
-      isOptionEqualToValue={(opt, val) => opt.value === val.value}
+      isOptionEqualToValue={(opt: SelectOption, val: SelectOption) =>
+        opt.value === val.value
+      }
       noOptionsText={
         noOptionsError ? (
           <Alert severity='error'>{noOptionsError.message}</Alert>

diff --git a/web/src/app/services/HeartbeatMonitorForm.tsx b/web/src/app/services/HeartbeatMonitorForm.tsx
@@ -51,7 +51,7 @@ export default function HeartbeatMonitorForm(
             name='timeoutMinutes'
             min={5}
             max={540000}
-            mapValue={(minutes) =>
+            mapValue={(minutes: number) =>
               Duration.fromObject({
                 minutes,
               }).toISO()

diff --git a/web/src/app/urql.ts b/web/src/app/urql.ts
@@ -67,7 +67,7 @@ const refetchExchange = (): Exchange => {
 }
 
 // refetch every 15 sec or on refocus, every 10 sec for Cypress
-let poll: NodeJS.Timer
+let poll: NodeJS.Timeout
 function resetPoll(): void {
   if (new URLSearchParams(location.search).get('poll') === '0' || isCypress)
     return

diff --git a/web/src/explore/explore.tsx b/web/src/explore/explore.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { GraphiQL } from 'graphiql'
 import { Provider as ReduxProvider } from 'react-redux'
 import { StyledEngineProvider } from '@mui/material/styles'
@@ -55,7 +55,9 @@ const App = (): JSX.Element => {
   )
 }
 
-render(
+const container = createRoot(document.getElementById('root') as HTMLElement)
+
+container.render(
   <div style={{ height: '100vh' }}>
     <StyledEngineProvider injectFirst>
       <ThemeProvider>
@@ -65,5 +67,4 @@ render(
       </ThemeProvider>
     </StyledEngineProvider>
   </div>,
-  document.getElementById('root'),
 )