feat: 🎸 Update hotkeys and user preferences modal (#1135)

* feat: 🎸 Update hotkeys and user preferences modal

This feature fix incompatibility with existent hotkeys component and
adds user preferences modal back

Closes: #923

* Update preferences structure in store

* Hide window level section of user preferences

* Update modal to reflect current hotkey value

* Clone object with hotkeys before passing to manager

* CR Update: Extract hotkeys manager format code to manager

* Fix broken cypress test

* Use new modal provider

* Rename hotkeyDefinitions in hotkeyspreferences and use array as representation

* Update study test and remove unused styles

platform/viewer/src/components/Header/Header.css

@@ -4,6 +4,10 @@
   height: var(--top-bar-height);
 }
 
+.dd-item {
+  width: 100%;
+}
+
 /* Home Page */
 .entry-header.header-big {
   background: rgba(21, 25, 30, 0.7);

platform/viewer/src/components/Header/Header.js

@@ -3,13 +3,11 @@ import { Link, withRouter } from 'react-router-dom';
 import { withTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 
-import { Dropdown } from '@ohif/ui';
-import { AboutContent } from '@ohif/ui';
-import { withModal } from '@ohif/ui';
-
+import ConnectedUserPreferencesForm from '../../connectedComponents/ConnectedUserPreferencesForm';
+import { Dropdown, AboutContent, withModal } from '@ohif/ui';
 import OHIFLogo from '../OHIFLogo/OHIFLogo.js';
-import { hotkeysManager } from './../../App.js';
 import './Header.css';
+
 // Context
 import AppContext from './../../context/AppContext';
 
@@ -30,23 +28,9 @@ class Header extends Component {
     children: OHIFLogo(),
   };
 
-  // onSave: data => {
-  //   const contextName = store.getState().commandContext.context;
-  //   const preferences = cloneDeep(store.getState().preferences);
-  //   preferences[contextName] = data;
-  //   dispatch(setUserPreferences(preferences));
-  //   dispatch(setUserPreferencesModalOpen(false));
-  //   OHIF.hotkeysUtil.setHotkeys(data.hotKeysData);
-  // },
-  // onResetToDefaults: () => {
-  //   dispatch(setUserPreferences());
-  //   dispatch(setUserPreferencesModalOpen(false));
-  //   OHIF.hotkeysUtil.setHotkeys();
-  // },
-
   constructor(props) {
     super(props);
-    this.state = { isUserPreferencesOpen: false, isOpen: false };
+    this.state = { isOpen: false };
 
     this.loadOptions();
   }
@@ -68,6 +52,16 @@ class Header extends Component {
             customClassName: 'AboutContent',
           }),
       },
+      {
+        title: 'Preferences ',
+        icon: {
+          name: 'user',
+        },
+        onClick: () =>
+          show(ConnectedUserPreferencesForm, {
+            title: t('User Preferences'),
+          }),
+      },
     ];
 
     if (user && userManager) {
@@ -77,15 +71,6 @@ class Header extends Component {
         onClick: () => userManager.signoutRedirect(),
       });
     }
-
-    this.hotKeysData = hotkeysManager.hotkeyDefinitions;
-  }
-
-  onUserPreferencesSave({ windowLevelData, hotKeysData }) {
-    // console.log(windowLevelData);
-    // console.log(hotKeysData);
-    // TODO: Update hotkeysManager
-    // TODO: reset `this.hotKeysData`
   }
 
   // ANTD -- Hamburger, Drawer, Menu

platform/viewer/src/connectedComponents/ConnectedHeader.js

@@ -1,10 +1,16 @@
 import Header from '../components/Header/Header.js';
 import { connect } from 'react-redux';
+import { hotkeysManager } from '../App.js';
 
 const mapStateToProps = state => {
+  const hotkeyDefinitions =
+    state.preferences.hotkeyDefinitions.length > 0
+      ? state.preferences.hotkeyDefinitions
+      : hotkeysManager.hotkeyDefaults;
+  hotkeysManager.setHotkeys(hotkeyDefinitions);
+
   return {
     user: state.oidc && state.oidc.user,
-    isOpen: state.ui.userPreferencesModalOpen,
   };
 };
 

platform/viewer/src/connectedComponents/ConnectedUserPreferencesForm.js

@@ -0,0 +1,41 @@
+import { connect } from 'react-redux';
+import { UserPreferencesForm } from '@ohif/ui';
+import OHIF from '@ohif/core';
+import { hotkeysManager } from '../App.js';
+
+const { setUserPreferences } = OHIF.redux.actions;
+
+const mapStateToProps = (state, ownProps) => {
+  const hotkeyDefinitions =
+    state.preferences.hotkeyDefinitions.length > 0
+      ? state.preferences.hotkeyDefinitions
+      : hotkeysManager.hotkeyDefaults;
+  hotkeysManager.setHotkeys(hotkeyDefinitions);
+  return {
+    onClose: ownProps.hide,
+    windowLevelData: state.preferences ? state.preferences.windowLevelData : {},
+    hotkeyDefinitions,
+  };
+};
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+  return {
+    onSave: ({ windowLevelData, hotkeyDefinitions }) => {
+      hotkeysManager.setHotkeys(hotkeyDefinitions);
+      ownProps.hide();
+      dispatch(setUserPreferences({ windowLevelData, hotkeyDefinitions }));
+    },
+    onResetToDefaults: () => {
+      hotkeysManager.restoreDefaultBindings();
+      ownProps.hide();
+      dispatch(setUserPreferences());
+    },
+  };
+};
+
+const ConnectedUserPreferencesForm = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(UserPreferencesForm);
+
+export default ConnectedUserPreferencesForm;