fix(web/ui): Fix hotkeys support in React 18

This change fixes an issue where the library for hotkeys that we
previously used does not (yet) support React 18. Instead, we switch to a
simpler solution based on React Hooks which is compatible with React 18.

1 files changed, 10 insertions, 17 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js b/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js
index 2f27749f..47235c7e 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js
@@ -20,7 +20,7 @@
  * SOFTWARE.
  */
 
-import React, { useState } from 'react'
+import React, { useState, useRef } from 'react'
 import {
     Bullseye,
     Drawer,
@@ -31,8 +31,6 @@ import {
     Spinner,
     Title,
 } from '@patternfly/react-core'
-import { configure, HotKeys } from 'react-hotkeys'
-import { KeymapConfiguration } from '../../hotkeys'
 import MapStage from './map/MapStage'
 import Collapse from './map/controls/Collapse'
 import { useSelector } from 'react-redux'
@@ -45,10 +43,7 @@ function TopologyMap() {
     const [isExpanded, setExpanded] = useState(true)
     const panelContent = <TopologySidebar interactionLevel={interactionLevel} onClose={() => setExpanded(false)} />
 
-    // Make sure that holding down a key will generate repeated events
-    configure({
-        ignoreRepeatedEventsWhenKeyHeldDown: false,
-    })
+    const hotkeysRef = useRef()
 
     return topologyIsLoading ? (
         <Bullseye>
@@ -60,16 +55,14 @@ function TopologyMap() {
             </EmptyState>
         </Bullseye>
     ) : (
-        <HotKeys keyMap={KeymapConfiguration} allowChanges={true} className="full-height">
-            <Drawer isExpanded={isExpanded}>
-                <DrawerContent panelContent={panelContent}>
-                    <DrawerContentBody>
-                        <MapStage />
-                        <Collapse onClick={() => setExpanded(true)} />
-                    </DrawerContentBody>
-                </DrawerContent>
-            </Drawer>
-        </HotKeys>
+        <Drawer isExpanded={isExpanded} className="full-height">
+            <DrawerContent panelContent={panelContent}>
+                <DrawerContentBody>
+                    <MapStage hotkeysRef={hotkeysRef} />
+                    <Collapse onClick={() => setExpanded(true)} />
+                </DrawerContentBody>
+            </DrawerContent>
+        </Drawer>
     )
 }