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/WindowLevelPreferences.js

@@ -0,0 +1,94 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import './WindowLevelPreferences.styl';
+
+export class WindowLevelPreferences extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      data: this.props.windowLevelData,
+    };
+  }
+
+  static propTypes = {
+    windowLevelData: PropTypes.object.isRequired,
+    onChange: PropTypes.func,
+  };
+
+  onChange(event, key, field) {
+    const data = this.state.data;
+    const entry = data[key];
+    entry[field] = event.target.value;
+    this.setState({ data });
+
+    if (this.props.onChange) {
+      this.props.onChange(data);
+    }
+  }
+
+  getWLPreferencesRows(key) {
+    const entry = this.state.data[key];
+    return (
+      <tr key={key}>
+        <td className="p-r-1 text-center">{key}</td>
+        <td className="p-r-1">
+          <label className="wrapperLabel">
+            <input
+              value={entry.description}
+              type="text"
+              className="form-control"
+              onChange={event => {
+                this.onChange(event, key, 'description');
+              }}
+            />
+          </label>
+        </td>
+        <td className="p-r-1">
+          <label className="wrapperLabel">
+            <input
+              value={entry.window}
+              type="number"
+              className="form-control"
+              onChange={event => {
+                this.onChange(event, key, 'window');
+              }}
+            />
+          </label>
+        </td>
+        <td className="p-r-1">
+          <label className="wrapperLabel">
+            <input
+              value={entry.level}
+              type="number"
+              className="form-control"
+              onChange={event => {
+                this.onChange(event, key, 'level');
+              }}
+            />
+          </label>
+        </td>
+      </tr>
+    );
+  }
+
+  render() {
+    return (
+      <table className="full-width">
+        <thead>
+          <tr>
+            <th className="p-x-1 text-center presetIndex">Preset</th>
+            <th className="p-x-1">Description</th>
+            <th className="p-x-1">Window</th>
+            <th className="p-x-1">Level</th>
+          </tr>
+        </thead>
+        <tbody>
+          {Object.keys(this.state.data).map(key => {
+            return this.getWLPreferencesRows(key);
+          })}
+        </tbody>
+      </table>
+    );
+  }
+}