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/ui/src/components/userPreferencesForm/UserPreferences.js

@@ -0,0 +1,122 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import { HotKeysPreferences } from './HotKeysPreferences';
+import { WindowLevelPreferences } from './WindowLevelPreferences';
+import { GeneralPreferences } from './GeneralPreferences';
+import './UserPreferences.styl';
+
+export class UserPreferences extends Component {
+  static defaultProps = {
+    hotkeyDefinitions: [],
+    windowLevelData: {},
+    generalData: {},
+  };
+
+  // TODO: Make this more generic. Tabs should not be restricted to these entries
+  static propTypes = {
+    hotkeyDefinitions: PropTypes.array.isRequired,
+    windowLevelData: PropTypes.object.isRequired,
+    generalData: PropTypes.object.isRequired,
+  };
+
+  state = {
+    tabIndex: 0,
+  };
+
+  tabClick(tabIndex) {
+    this.setState({ tabIndex });
+  }
+
+  renderHotkeysTab() {
+    return (
+      <form className="form-themed themed">
+        <div className="form-content">
+          <HotKeysPreferences
+            hotkeyDefinitions={this.props.hotkeyDefinitions}
+          />
+        </div>
+      </form>
+    );
+  }
+
+  renderWindowLevelTab() {
+    if (this.props.windowLevelData) {
+      return (
+        <form className="form-themed themed">
+          <div className="form-content">
+            <WindowLevelPreferences
+              windowLevelData={this.props.windowLevelData}
+            />
+          </div>
+        </form>
+      );
+    }
+  }
+
+  renderGeneralTab() {
+    return (
+      <form className="form-themed themed">
+        <div className="form-content">
+          <GeneralPreferences generalData={this.props.generalData} />
+        </div>
+      </form>
+    );
+  }
+
+  renderTabs(tabIndex) {
+    switch (tabIndex) {
+      case 0:
+        return this.renderHotkeysTab();
+      /* case 1:
+        return this.renderWindowLevelTab(); */
+      case 2:
+        return this.renderGeneralTab();
+
+      default:
+        break;
+    }
+  }
+
+  getTabClass(tabIndex) {
+    return tabIndex === this.state.tabIndex ? 'nav-link active' : 'nav-link';
+  }
+
+  render() {
+    return (
+      <div>
+        <div className="dialog-separator-after">
+          <ul className="nav nav-tabs">
+            <li
+              onClick={() => {
+                this.tabClick(0);
+              }}
+              className={this.getTabClass(0)}
+            >
+              <button>Hotkeys</button>
+            </li>
+            {false && (
+              <li
+                onClick={() => {
+                  this.tabClick(1);
+                }}
+                className={this.getTabClass(1)}
+              >
+                <button>Window Level</button>
+              </li>
+            )}
+            <li
+              onClick={() => {
+                this.tabClick(2);
+              }}
+              className={this.getTabClass(2)}
+            >
+              <button>General</button>
+            </li>
+          </ul>
+        </div>
+        {this.renderTabs(this.state.tabIndex)}
+      </div>
+    );
+  }
+}