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/viewer/src/routes/Mode/Mode.jsx

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 // TODO: DicomMetadataStore should be injected?
 import { DicomMetadataStore, utils } from '@ohif/core';
 import { DragAndDropProvider, ImageViewerProvider } from '@ohif/ui';
-//
 import { useQuery } from '@hooks';
 import ViewportGrid from '@components/ViewportGrid';
 import Compose from './Compose';
@@ -88,12 +87,10 @@ export default function ModeRoute({
       return;
     }
 
-    console.debug('[hotkeys] Setting up hotkeys...');
     hotkeysManager.setDefaultHotKeys(hotkeys);
     hotkeysManager.setHotkeys(hotkeys);
 
     return () => {
-      console.debug('[hotkeys] Removing hotkeys...');
       hotkeysManager.destroy();
     };
   }, []);
@@ -282,4 +279,5 @@ ModeRoute.propTypes = {
   dataSourceName: PropTypes.string,
   extensionManager: PropTypes.object,
   servicesManager: PropTypes.object,
+  hotkeysManager: PropTypes.object,
 };

platform/viewer/src/routes/WorkList/WorkList.jsx

@@ -5,25 +5,26 @@ import { Link } from 'react-router-dom';
 import moment from 'moment';
 import qs from 'query-string';
 import isEqual from 'lodash.isequal';
-
+import { useTranslation } from 'react-i18next';
+//
 import filtersMeta from './filtersMeta.js';
 import { useAppConfig } from '@state';
 import { useDebounce, useQuery } from '@hooks';
 import { utils } from '@ohif/core';
 
-import PreferencesDropdown from '../../components/PreferencesDropdown';
-
 import {
   Icon,
   StudyListExpandedRow,
   Button,
-  NavBar,
-  Svg,
   EmptyStudies,
   StudyListTable,
   StudyListPagination,
   StudyListFilter,
   TooltipClipboard,
+  Header,
+  useModal,
+  AboutModal,
+  UserPreferences
 } from '@ohif/ui';
 
 const seriesInStudiesMap = new Map();
@@ -32,7 +33,11 @@ const seriesInStudiesMap = new Map();
  * TODO:
  * - debounce `setFilterValues` (150ms?)
  */
-function WorkList({ history, data: studies, isLoadingData, dataSource }) {
+function WorkList({ history, data: studies, isLoadingData, dataSource, hotkeysManager }) {
+  const { hotkeyDefinitions, hotkeyDefaults } = hotkeysManager;
+  const { show, hide } = useModal();
+  const { t } = useTranslation();
+
   // ~ Modes
   const [appConfig] = useAppConfig();
   // ~ Filters
@@ -340,25 +345,39 @@ function WorkList({ history, data: studies, isLoadingData, dataSource }) {
 
   const hasStudies = numOfStudies > 0;
 
+  const menuOptions = [
+    {
+      title: t('Header:About'),
+      icon: 'info',
+      onClick: () => show({ content: AboutModal, title: 'About OHIF Viewer' })
+    },
+    {
+      title: t('Header:Preferences'),
+      icon: 'settings',
+      onClick: () => show({
+        title: t('UserPreferencesModal:User Preferences'),
+        content: UserPreferences,
+        contentProps: {
+          hotkeyDefaults: hotkeysManager.getValidHotkeyDefinitions(hotkeyDefaults),
+          hotkeyDefinitions,
+          onCancel: hide,
+          onSubmit: ({ hotkeyDefinitions }) => {
+            hotkeysManager.setHotkeys(hotkeyDefinitions);
+            hide();
+          },
+          onReset: () => hotkeysManager.restoreDefaultBindings()
+        }
+      })
+    },
+  ];
+
   return (
     <div
       className={classnames('bg-black h-full', {
         'h-screen': !hasStudies,
       })}
     >
-      <NavBar className="justify-between border-b-4 border-black" isSticky>
-        <div className="flex items-center">
-          <div className="mx-3">
-            <Svg name="logo-ohif" />
-          </div>
-        </div>
-        <div className="flex items-center">
-          <span className="mr-3 text-lg text-common-light">
-            FOR INVESTIGATIONAL USE ONLY
-          </span>
-          <PreferencesDropdown />
-        </div>
-      </NavBar>
+      <Header menuOptions={menuOptions} isReturnEnabled={false} />
       <StudyListFilter
         numOfStudies={numOfStudies}
         filtersMeta={filtersMeta}

platform/viewer/src/routes/index.js

@@ -51,7 +51,13 @@ const createRoutes = ({
             render={props => (
               // eslint-disable-next-line react/jsx-props-no-spreading
               <ErrorBoundary context={`Route ${route.path}`} fallbackRoute="/">
-                <route.component {...props} {...route.props} route={route} />
+                <route.component
+                  {...props}
+                  {...route.props}
+                  route={route}
+                  servicesManager={servicesManager}
+                  hotkeysManager={hotkeysManager}
+                />
               </ErrorBoundary>
             )}
           />