OHIF-332: Users should be able to see all available hotkeys and language settings in one place (#1895)

* OHIF-330: Update Modal Styles

* feat/ohif-332: finish raw ui

* feat/ohif-332: update mode configuration strategy

* feat/ohif-332: fix hotkey errors

* feat/ohif-332: update hotkey logic with recent merged changes

* feat/ohif-322: wrap

* feat/ohif-322: add disable state

* ohif-332: cr updates

* ohif-332: disable

* ohif-332: cr updates

* ohif-332: extract header component

* ohif-332: cr update to fix merge conflicts and design issue

Co-authored-by: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>

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

@@ -0,0 +1,144 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Select, Typography, Button, HotkeysPreferences } from '@ohif/ui';
+import i18n from '@ohif/i18n';
+import { useTranslation } from 'react-i18next';
+const { availableLanguages, defaultLanguage, currentLanguage } = i18n;
+
+const UserPreferences = ({ disabled, hotkeyDefinitions, hotkeyDefaults, onCancel, onSubmit, onReset }) => {
+  const { t } = useTranslation('UserPreferencesModal');
+  const [state, setState] = useState({
+    isDisabled: disabled,
+    hotkeyErrors: {},
+    hotkeyDefinitions,
+    language: currentLanguage()
+  });
+
+  const onSubmitHandler = () => {
+    i18n.changeLanguage(state.language.value);
+    onSubmit(state);
+  };
+
+  const onResetHandler = () => {
+    setState(state => ({
+      ...state,
+      language: defaultLanguage,
+      hotkeyDefinitions: hotkeyDefaults,
+      hotkeyErrors: {},
+      isDisabled: disabled,
+    }));
+    onReset();
+  };
+
+  const onCancelHandler = () => {
+    setState({ hotkeyDefinitions });
+    onCancel();
+  };
+
+  const onLanguageChangeHandler = (value) => {
+    setState(state => ({ ...state, language: value }));
+  };
+
+  const onHotkeysChangeHandler = (id, definition, errors) => {
+    setState(state => ({
+      ...state,
+      isDisabled: Object.values(errors).every(e => e !== undefined),
+      hotkeyErrors: errors,
+      hotkeyDefinitions: {
+        ...state.hotkeyDefinitions,
+        [id]: definition,
+      }
+    }));
+  };
+
+  const Section = ({ title, children }) => (
+    <>
+      <div className="border-b-2 border-black mb-2">
+        <Typography
+          variant="h5"
+          className="flex flex-grow text-primary-light font-light pb-2"
+        >
+          {title}
+        </Typography>
+      </div>
+      <div className="mt-4 mb-8">
+        {children}
+      </div>
+    </>
+  );
+
+  return (
+    <div className="p-2">
+      <Section title="General">
+        <div className="flex flex-row justify-center items-center w-72">
+          <Typography variant="subtitle" className="mr-5 text-right h-full">
+            Language
+          </Typography>
+          <Select
+            isClearable={false}
+            onChange={onLanguageChangeHandler}
+            options={availableLanguages}
+            value={state.language}
+          />
+        </div>
+      </Section>
+      <Section title="Hotkeys">
+        <HotkeysPreferences
+          disabled={disabled}
+          hotkeyDefinitions={state.hotkeyDefinitions}
+          onChange={onHotkeysChangeHandler}
+          errors={state.hotkeyErrors}
+        />
+      </Section>
+      <div className="flex flex-row justify-between">
+        <Button variant="outlined" onClick={onResetHandler} disabled={disabled}>
+          {t('Reset to Defaults')}
+        </Button>
+        <div className="flex flex-row">
+          <Button variant="outlined" onClick={onCancelHandler}>
+            {t('Cancel')}
+          </Button>
+          <Button
+            variant="contained"
+            disabled={state.isDisabled}
+            color="light"
+            className="ml-2"
+            onClick={onSubmitHandler}
+          >
+            {t('Save')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const noop = () => { };
+
+UserPreferences.propTypes = {
+  disabled: PropTypes.bool,
+  hotkeyDefaults: PropTypes.object.isRequired,
+  hotkeyDefinitions: PropTypes.object.isRequired,
+  languageOptions: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.any.isRequired,
+    })
+  ),
+  onCancel: PropTypes.func,
+  onSubmit: PropTypes.func,
+  onReset: PropTypes.func,
+};
+
+UserPreferences.defaultProps = {
+  languageOptions: [
+    { value: 'ONE', label: 'ONE' },
+    { value: 'TWO', label: 'TWO' },
+  ],
+  onCancel: noop,
+  onSubmit: noop,
+  onReset: noop,
+  disabled: true
+};
+
+export default UserPreferences;

platform/ui/src/components/UserPreferences/index.js

@@ -0,0 +1,3 @@
+import UserPreferences from './UserPreferences.jsx';
+
+export default UserPreferences;