ui: update @material-ui/lab and convert SpeedDial to hooks

web/src/app/util/SpeedDial.js

@@ -1,74 +1,66 @@
-import React from 'react'
+import React, { useState } from 'react'
 import p from 'prop-types'
-import SpeedDialAction from '@material-ui/lab/SpeedDialAction'
-import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon'
-import SpeedDial from '@material-ui/lab/SpeedDial'
+import { SpeedDial, SpeedDialIcon, SpeedDialAction } from '@material-ui/lab'
+import { makeStyles } from '@material-ui/styles'
 
-export default class ScheduleNewOverrideFAB extends React.PureComponent {
-  static propsTypes = {
-    label: p.string.isRequired,
-    actions: p.arrayOf(
-      p.shape({
-        icon: p.element.isRequired,
-        onClick: p.func.isRequired,
-        label: p.string.isRequired,
-      }),
-    ).isRequired,
-  }
+const useStyles = makeStyles({
+  speedDial: {
+    position: 'fixed',
+    bottom: '2em',
+    right: '2em',
+    zIndex: 9001,
+  },
+  staticTooltipLabel: {
+    whiteSpace: 'nowrap',
+  },
+})
 
-  state = {
-    open: false,
-  }
+export default function CustomSpeedDial(props) {
+  const [open, setOpen] = useState(false)
+  const classes = useStyles()
 
-  shownState = false
-  _shownTimeout = -1
+  return (
+    <SpeedDial
+      ariaLabel={props.label}
+      FabProps={{
+        'data-cy': 'page-fab',
+      }}
+      icon={<SpeedDialIcon />}
+      onClick={() => setOpen(!open)}
+      onClose={() => setOpen(false)}
+      onMouseEnter={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+      open={open}
+      className={classes.speedDial}
+    >
+      {props.actions
+        .slice()
+        .reverse()
+        .map((action, idx) => (
+          <SpeedDialAction
+            key={idx}
+            icon={action.icon}
+            tooltipTitle={action.label}
+            tooltipOpen
+            classes={{ staticTooltipLabel: classes.staticTooltipLabel }}
+            aria-label={action.label}
+            onClick={() => {
+              setOpen(false)
+              action.onClick()
+            }}
+          />
+        ))}
+    </SpeedDial>
+  )
+}
 
-  render() {
-    if (this.state.open !== this.shownState) {
-      clearTimeout(this._shownTimeout)
-      this._shownTimeout = setTimeout(() => {
-        this.shownState = this.state.open
-      }, 350)
-    }
-    const doToggle = () => this.setState({ open: !this.shownState })
-    const doOpen = () => this.setState({ open: true })
-    const doClose = () => this.setState({ open: false })
-    return (
-      <SpeedDial
-        ariaLabel={this.props.label}
-        ButtonProps={{
-          'data-cy': 'page-fab',
-        }}
-        icon={<SpeedDialIcon />}
-        onClick={doToggle}
-        onClose={doClose}
-        onMouseEnter={doOpen}
-        onMouseLeave={doClose}
-        open={this.state.open}
-        style={{
-          position: 'fixed',
-          bottom: '2em',
-          right: '2em',
-          zIndex: 9001,
-        }}
-      >
-        {this.props.actions
-          .slice()
-          .reverse()
-          .map((action, idx) => (
-            <SpeedDialAction
-              key={idx}
-              icon={action.icon}
-              tooltipOpen
-              tooltipTitle={action.label}
-              aria-label={action.label}
-              onClick={() => {
-                this.setState({ open: false })
-                action.onClick()
-              }}
-            />
-          ))}
-      </SpeedDial>
-    )
-  }
+CustomSpeedDial.propsTypes = {
+  label: p.string.isRequired,
+  actions: p.arrayOf(
+    p.shape({
+      icon: p.element.isRequired,
+      onClick: p.func.isRequired,
+      label: p.string.isRequired,
+    }),
+  ).isRequired,
 }

web/src/cypress/support/page-fab.ts

@@ -18,7 +18,9 @@ function pageFab(dialOption?: string): Cypress.Chainable {
 
   return res
     .parent()
-    .find(`button[role=menuitem][aria-label*=${JSON.stringify(dialOption)}]`)
+    .find(
+      `span[aria-label*=${JSON.stringify(dialOption)}] button[role=menuitem]`,
+    )
     .click()
 }
 

web/src/package.json

@@ -69,7 +69,7 @@
     "@date-io/luxon": "1.3.11",
     "@material-ui/core": "4.7.0",
     "@material-ui/icons": "4.5.1",
-    "@material-ui/lab": "4.0.0-alpha.26",
+    "@material-ui/lab": "4.0.0-alpha.33",
     "apollo-cache-inmemory": "1.6.3",
     "apollo-client": "2.6.4",
     "apollo-link": "1.2.13",

web/src/yarn.lock

@@ -1219,13 +1219,20 @@
     core-js "^2.6.5"
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.1.5", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.1.5", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3":
   version "7.7.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.2.tgz#111a78002a5c25fc8e3361bedc9529c696b85a6a"
   integrity sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==
   dependencies:
     regenerator-runtime "^0.13.2"
 
+"@babel/runtime@^7.4.4":
+  version "7.7.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.4.tgz#b23a856751e4bf099262f867767889c0e3fe175b"
+  integrity sha512-r24eVUUr0QqNZa+qrImUk8fn5SPhHq+IfYvIoIMg0do3GdK9sMdiLKP3GYVVaxpPKORgm8KRKaNTEhAjgIpLMw==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/template@^7.1.0", "@babel/template@^7.4.0", "@babel/template@^7.4.4", "@babel/template@^7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.6.0.tgz#7f0159c7f5012230dad64cca42ec9bdb5c9536e6"
@@ -1636,16 +1643,15 @@
   dependencies:
     "@babel/runtime" "^7.4.4"
 
-"@material-ui/[email protected].26":
-  version "4.0.0-alpha.26"
-  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.26.tgz#8db16de1ab46cda5d06afdd97578536989ed3c4e"
-  integrity sha512-23N43d2/DJkQKbJjg3J9DqORgmvxA9ebqpnqrA6JB8zIiDSoSuZmJu1hHUtINgMechxwWGTf73PMy9ihm0AAQA==
+"@material-ui/[email protected].33":
+  version "4.0.0-alpha.33"
+  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.33.tgz#3de96da1e813afcea5a07d56e54ec41cfa636e2c"
+  integrity sha512-+xttHUZLwH4+yfkB7B5A3pNDtQO27tGftuUxMRDMevNXwQtAB7mgYco34JwMr9kmvESYmacoZReOacJ6rxym/Q==
   dependencies:
     "@babel/runtime" "^7.4.4"
-    "@material-ui/utils" "^4.4.0"
+    "@material-ui/utils" "^4.5.2"
     clsx "^1.0.4"
     prop-types "^15.7.2"
-    warning "^4.0.3"
 
 "@material-ui/[email protected]":
   version "3.2.8"
@@ -1696,7 +1702,7 @@
   dependencies:
     "@types/react" "*"
 
-"@material-ui/utils@^4.4.0", "@material-ui/utils@^4.5.2":
+"@material-ui/utils@^4.5.2":
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.5.2.tgz#4c2fb531d357cf0da8cece53b588dff9b0bde934"
   integrity sha512-zhbNfHd1gLa8At6RPDG7uMZubHxbY+LtM6IkSfeWi6Lo4Ax80l62YaN1QmUpO1IvGCkn/j62tQX3yObiQZrJsQ==
@@ -9767,12 +9773,12 @@ react-input-autosize@^2.2.2:
   dependencies:
     prop-types "^15.5.8"
 
-react-is@^16.6.0, react-is@^16.8.4, react-is@^16.8.6:
+react-is@^16.6.0, react-is@^16.8.4:
   version "16.9.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
   integrity sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==
 
-react-is@^16.7.0, react-is@^16.8.1, react-is@^16.9.0:
+react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6, react-is@^16.9.0:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
   integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==