From 54d2cde6da0880c9d5c132cd7806d35d777b9b7c Mon Sep 17 00:00:00 2001
From: Igor Octaviano <igoroctaviano@gmail.com>
Date: Thu, 14 Nov 2019 00:42:49 -0300
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20Improve=20hotkeyPref?=
 =?UTF-8?q?erences=20proptypes=20/=20add=20lowercase=20(#1165)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 💡 Improve hotkeyPreferences proptypes / add lowercase

Improve hotkeyPreferences proptypes and lowercase event keys to guard
against different browsers casings

* Add isRequired to proptypes and empty hotkeys message
---
 .../userPreferencesForm/HotKeysPreferences.js | 19 ++++++++++++++-----
 .../userPreferencesForm/UserPreferences.js    |  8 +++++++-
 .../UserPreferencesForm.js                    |  8 +++++++-
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/platform/ui/src/components/userPreferencesForm/HotKeysPreferences.js b/platform/ui/src/components/userPreferencesForm/HotKeysPreferences.js
index 1acf00a39..b14cf945e 100644
--- a/platform/ui/src/components/userPreferencesForm/HotKeysPreferences.js
+++ b/platform/ui/src/components/userPreferencesForm/HotKeysPreferences.js
@@ -10,7 +10,13 @@ import PropTypes from 'prop-types';
 
 export class HotKeysPreferences extends Component {
   static propTypes = {
-    hotkeyDefinitions: PropTypes.array.isRequired,
+    hotkeyDefinitions: PropTypes.arrayOf(
+      PropTypes.shape({
+        commandName: PropTypes.string,
+        keys: PropTypes.arrayOf(PropTypes.string),
+        label: PropTypes.string,
+      })
+    ).isRequired,
   };
 
   constructor(props) {
@@ -76,7 +82,7 @@ export class HotKeysPreferences extends Component {
         specialKeyName ||
         keyDownEvent.key ||
         String.fromCharCode(keyDownEvent.keyCode);
-      pressedKeys.push(keyName);
+      pressedKeys.push(keyName.toLowerCase());
     }
 
     this.updateHotKeysState(commandName, pressedKeys.join('+'));
@@ -123,7 +129,7 @@ export class HotKeysPreferences extends Component {
     const hotKey = this.state.hotKeys[hotKeyIndex];
     const keys = hotKey.keys[0];
     const pressedKeys = keys.split('+');
-    const lastPressedKey = pressedKeys[pressedKeys.length - 1];
+    const lastPressedKey = pressedKeys[pressedKeys.length - 1].toLowerCase();
 
     // clear the prior errors
     this.setState({ errorMessages: {} }, () => {
@@ -156,7 +162,8 @@ export class HotKeysPreferences extends Component {
        */
       const modifierCommand = pressedKeys
         .slice(0, pressedKeys.length - 1)
-        .join('+');
+        .join('+')
+        .toLowerCase();
 
       const disallowedCombination = disallowedCombinations[modifierCommand];
       const hasDisallowedCombinations = disallowedCombination
@@ -215,7 +222,7 @@ export class HotKeysPreferences extends Component {
       this.state.hotKeys.length
     );
 
-    return (
+    return this.state.hotKeys.length > 0 ? (
       <div className="HotKeysPreferences">
         {/* <!-- Column 1 --> */}
         <div className="column">
@@ -250,6 +257,8 @@ export class HotKeysPreferences extends Component {
           </table>
         </div>
       </div>
+    ) : (
+      <p>{`No hotkeys are configured for this application. Hotkeys can be configured in the application's app-config.js file.`}</p>
     );
   }
 }
diff --git a/platform/ui/src/components/userPreferencesForm/UserPreferences.js b/platform/ui/src/components/userPreferencesForm/UserPreferences.js
index 9bcebe617..7e8d462a5 100644
--- a/platform/ui/src/components/userPreferencesForm/UserPreferences.js
+++ b/platform/ui/src/components/userPreferencesForm/UserPreferences.js
@@ -15,7 +15,13 @@ export class UserPreferences extends Component {
 
   // TODO: Make this more generic. Tabs should not be restricted to these entries
   static propTypes = {
-    hotkeyDefinitions: PropTypes.array.isRequired,
+    hotkeyDefinitions: PropTypes.arrayOf(
+      PropTypes.shape({
+        commandName: PropTypes.string,
+        keys: PropTypes.arrayOf(PropTypes.string),
+        label: PropTypes.string,
+      })
+    ).isRequired,
     windowLevelData: PropTypes.object.isRequired,
     generalData: PropTypes.object.isRequired,
   };
diff --git a/platform/ui/src/components/userPreferencesForm/UserPreferencesForm.js b/platform/ui/src/components/userPreferencesForm/UserPreferencesForm.js
index d33626991..12044c50d 100644
--- a/platform/ui/src/components/userPreferencesForm/UserPreferencesForm.js
+++ b/platform/ui/src/components/userPreferencesForm/UserPreferencesForm.js
@@ -15,7 +15,13 @@ class UserPreferencesForm extends Component {
     onSave: PropTypes.func,
     onResetToDefaults: PropTypes.func,
     windowLevelData: PropTypes.object,
-    hotkeyDefinitions: PropTypes.array,
+    hotkeyDefinitions: PropTypes.arrayOf(
+      PropTypes.shape({
+        commandName: PropTypes.string,
+        keys: PropTypes.arrayOf(PropTypes.string),
+        label: PropTypes.string,
+      })
+    ).isRequired,
     t: PropTypes.func,
   };