fixes for hotkeys usage in docusaurus

platform/ui/src/components/AboutModal/AboutModal.jsx

@@ -72,7 +72,7 @@ const AboutModal = ({buildNumber, versionNumber}) => {
           </Link>
         </span>
         <span className="ml-4">
-          <Link href="http://ohif.org/" showIcon={true}>
+          <Link href="https://ohif.org/" showIcon={true}>
             More details
           </Link>
         </span>

platform/ui/src/components/HotkeyField/HotkeyField.jsx

@@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 
 import Input from '../Input';
-import { hotkeys } from '../../utils/'
 import { getKeys, formatKeysForInput } from './utils';
 
 /**
@@ -16,7 +15,7 @@ import { getKeys, formatKeysForInput } from './utils';
  * @param {string} props.className input classes
  * @param {Array[]} props.modifierKeys
  */
-const HotkeyField = ({ disabled, keys, onChange, className, modifierKeys }) => {
+const HotkeyField = ({ disabled, keys, onChange, className, modifierKeys, hotkeys }) => {
   const inputValue = formatKeysForInput(keys);
 
   useEffect(() => {
@@ -57,6 +56,13 @@ HotkeyField.propTypes = {
   className: PropTypes.string,
   modifierKeys: PropTypes.array,
   disabled: PropTypes.bool,
+  hotkeys: PropTypes.object({
+    initialize: PropTypes.func.isRequired,
+    pause: PropTypes.func.isRequired,
+    unpause: PropTypes.func.isRequired,
+    startRecording: PropTypes.func.isRequired,
+    record: PropTypes.func.isRequired,
+  }).isRequired
 };
 
 HotkeyField.defaultProps = {

platform/ui/src/components/HotkeysPreferences/HotkeysPreferences.jsx

@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next';
 import { MODIFIER_KEYS } from './hotkeysConfig';
 import { validate, splitHotkeyDefinitionsAndCreateTuples } from './utils';
 
-const HotkeysPreferences = ({ disabled, hotkeyDefinitions, errors: controlledErrors, onChange }) => {
+const HotkeysPreferences = ({ disabled, hotkeyDefinitions, errors: controlledErrors, onChange, hotkeysModule }) => {
   const { t } = useTranslation('UserPreferencesModal');
 
   const visibleHotkeys = Object.keys(hotkeyDefinitions)
@@ -83,6 +83,7 @@ const HotkeysPreferences = ({ disabled, hotkeyDefinitions, errors: controlledErr
                             keys={definition.keys}
                             modifierKeys={MODIFIER_KEYS}
                             onChange={onChangeHandler}
+                            hotkeys={hotkeysModule}
                             className='text-lg h-8'
                           />
                           {error && <span className='p-2 text-left text-red-600 text-sm'>{error}</span>}
@@ -106,6 +107,13 @@ HotkeysPreferences.propTypes = {
   onChange: PropTypes.func,
   disabled: PropTypes.bool,
   hotkeyDefinitions: PropTypes.object.isRequired,
+  hotkeysModule: PropTypes.object({
+    initialize: PropTypes.func.isRequired,
+    pause: PropTypes.func.isRequired,
+    unpause: PropTypes.func.isRequired,
+    startRecording: PropTypes.func.isRequired,
+    record: PropTypes.func.isRequired,
+  }).isRequired
 };
 
 HotkeysPreferences.defaultProps = {

platform/ui/src/components/HotkeysPreferences/utils.js

@@ -46,7 +46,4 @@ const validate = ({ commandName, pressedKeys, hotkeys }) => {
   return { error: undefined };
 };
 
-export {
-  validate,
-  splitHotkeyDefinitionsAndCreateTuples
-};
+export { validate, splitHotkeyDefinitionsAndCreateTuples };

platform/ui/src/components/UserPreferences/UserPreferences.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Select, Typography, Button, HotkeysPreferences } from '../';
 import { useTranslation } from 'react-i18next';
 
-const UserPreferences = ({ availableLanguages, defaultLanguage, currentLanguage, disabled, hotkeyDefinitions, hotkeyDefaults, onCancel, onSubmit, onReset }) => {
+const UserPreferences = ({ availableLanguages, defaultLanguage, currentLanguage, disabled, hotkeyDefinitions, hotkeyDefaults, onCancel, onSubmit, onReset, hotkeysModule }) => {
   const { t } = useTranslation('UserPreferencesModal');
   const [state, setState] = useState({
     isDisabled: disabled,
@@ -85,6 +85,7 @@ const UserPreferences = ({ availableLanguages, defaultLanguage, currentLanguage,
           hotkeyDefinitions={state.hotkeyDefinitions}
           onChange={onHotkeysChangeHandler}
           errors={state.hotkeyErrors}
+          hotkeysModule={hotkeysModule}
         />
       </Section>
       <div className="flex flex-row justify-between">
@@ -125,6 +126,13 @@ UserPreferences.propTypes = {
   onCancel: PropTypes.func,
   onSubmit: PropTypes.func,
   onReset: PropTypes.func,
+  hotkeysModule: PropTypes.object({
+    initialize: PropTypes.func.isRequired,
+    pause: PropTypes.func.isRequired,
+    unpause: PropTypes.func.isRequired,
+    startRecording: PropTypes.func.isRequired,
+    record: PropTypes.func.isRequired,
+  }).isRequired
 };
 
 UserPreferences.defaultProps = {