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/core/src/classes/HotkeysManager.js

@@ -1,3 +1,4 @@
+import cloneDeep from 'lodash.clonedeep';
 import hotkeys from './hotkeys';
 import log from './../log.js';
 
@@ -51,10 +52,11 @@ export class HotkeysManager {
    * @param {Boolean} [isDefaultDefinitions]
    */
   setHotkeys(hotkeyDefinitions, isDefaultDefinitions = false) {
-    hotkeyDefinitions.forEach(definition => this.registerHotkeys(definition));
+    const definitions = cloneDeep(hotkeyDefinitions);
+    definitions.forEach(definition => this.registerHotkeys(definition));
 
     if (isDefaultDefinitions) {
-      this.hotkeyDefaults = hotkeyDefinitions;
+      this.hotkeyDefaults = definitions;
     }
   }
 

platform/core/src/redux/reducers/preferences.js

@@ -1,18 +1,15 @@
 import cloneDeep from 'lodash.clonedeep';
 
 const defaultState = {
-  // Top level key
-  viewer: {
-    // First tab
-    hotKeysData: {
-      // hotkeyName, label, keys, column
-      // zoom: { label: 'Zoom', command: 'Z', column: 0 },
-    },
-    // Second tab
-    windowLevelData: {
-      // order, description, window (int), level (int)
-      // 0: { description: 'Soft tissue', window: '', level: '' },
-    },
+  // First tab
+  hotkeyDefinitions: [
+    // commandName, label, keys
+    // [{ zoom: { label: 'Zoom', keys: ['z'] }}]
+  ],
+  // Second tab
+  windowLevelData: {
+    // order, description, window (int), level (int)
+    // 0: { description: 'Soft tissue', window: '', level: '' },
   },
 };