fix: Merge pull request #167 from UniversalDataTool/feat/keyboard-shortcut-manager

Shortcut Manager

Author: seveibar

.github/workflows/test.yml

@@ -16,12 +16,10 @@ jobs:
         run: npx prettier --check "src/**/*.js"
       - name: Run Lint Test
         run: |
-          rm package.json
-          rm package-lock.json
-          npm init -y
-          npm install react-scripts
-          echo '{"extends": "react-app"}' > .eslintrc
-          npx eslint src
+          # TODO this takes 1-2 mins to install, run eslint w/o installing
+          # everything
+          npm install
+          npm run test:lint
   cypress-run:
     needs: iscodeclean
     runs-on: ubuntu-16.04

cypress/integration/keyboard-shortcuts.spec.js

@@ -0,0 +1,22 @@
+describe("Test default keyboard shortcuts", () => {
+  it.skip("should be able to navigate to label tab with default shortcut", () => {
+    cy.visit("http://localhost:6001")
+
+    cy.contains("New File").click()
+
+    cy.wait(500)
+
+    // TODO this doesn't trigger hot keys for some reason, I'm not sure how
+    // good the support for testing keyboard shortcuts in cypress is
+    cy.get("body").trigger("keydown", {
+      keyCode: 51,
+      release: false,
+      location: 0,
+      which: 51,
+      key: "3",
+      code: "Digit3",
+    })
+
+    cy.contains("Percent Complete")
+  })
+})

package-lock.json

@@ -12,8 +12,8 @@
     "build:babel": "cross-env NODE_ENV=production babel ./src --out-dir=./lib && cp ./package.json ./lib/package.json && node ./lib/lib/fix-deps.js",
     "build:vanilla": "parcel build -d ./lib -o vanilla.js ./src/vanilla/index.js",
     "build:vanilla:dev": "parcel ./src/vanilla/index.js",
-    "build:web": "CI=false react-scripts build",
-    "build:desktop": "cross-env CI=false REACT_APP_DESKTOP=true PUBLIC_URL=./ react-scripts build && electron-builder build && cp ./desktop/entitlements.mac.plist ./build/entitlements.mac.plist",
+    "build:web": "react-scripts build",
+    "build:desktop": "cross-env REACT_APP_DESKTOP=true PUBLIC_URL=./ react-scripts build && electron-builder build && cp ./desktop/entitlements.mac.plist ./build/entitlements.mac.plist",
     "start:desktop:dev": "USE_DEV_SERVER=yes electron ./desktop",
     "start:desktop": "electron ./desktop",
     "release:lib": "npm run build && cd lib && npm publish",
@@ -97,6 +97,7 @@
     "react-ace": "^7.0.4",
     "react-data-table-component": "^6.2.2",
     "react-dropzone": "^10.1.8",
+    "react-hotkeys": "^2.0.0",
     "react-icons": "^3.9.0",
     "react-image-annotate": "^1.0.6",
     "react-scripts": "^3.4.1",

package.json

@@ -7,6 +7,7 @@ import useElectron from "./utils/use-electron.js"
 import { AppConfigProvider } from "./components/AppConfig"
 import { AuthProvider } from "./utils/auth-handlers/use-auth.js"
 import { LabelHelpProvider } from "./components/LabelHelpView"
+import { HotkeyStorageProvider } from "./components/HotkeyStorage"
 import "./App.css"
 
 export const App = () => {
@@ -17,7 +18,9 @@ export const App = () => {
         <AuthProvider>
           <LabelHelpProvider>
             <ToastProvider>
-              {Boolean(electron) ? <DesktopApp /> : <LocalStorageApp />}
+              <HotkeyStorageProvider>
+                {Boolean(electron) ? <DesktopApp /> : <LocalStorageApp />}
+              </HotkeyStorageProvider>
             </ToastProvider>
           </LabelHelpProvider>
         </AuthProvider>

src/App.js

@@ -9,7 +9,7 @@ import isEmpty from "lodash/isEmpty"
 import Survey from "material-survey/components/Survey"
 import ErrorToasts from "../ErrorToasts"
 import useErrors from "../../utils/use-errors.js"
-import Amplify, { Auth as AWSAmplifyAuth } from "aws-amplify"
+import Amplify from "aws-amplify"
 import { useAppConfig } from "../AppConfig"
 import * as colors from "@material-ui/core/colors"
 

src/components/AddAuthFromTemplateDialog/index.js

@@ -1,10 +1,12 @@
-import React from "react"
+import React, { useState } from "react"
 import Box from "@material-ui/core/Box"
 import MuiButton from "@material-ui/core/Button"
 import { useUpdate } from "react-use"
 import { styled } from "@material-ui/core/styles"
 import usePosthog from "../../utils/use-posthog"
 import { useAppConfig } from "../AppConfig"
+import { useHotkeyStorage } from "../HotkeyStorage"
+import KeyboardShortcutManagerDialog from "../KeyboardShortcutManagerDialog"
 
 const Button = styled(MuiButton)({
   margin: 8,
@@ -14,6 +16,8 @@ export const AdvancedOptionsView = ({ onClickEditJSON, onClearLabelData }) => {
   const forceUpdate = useUpdate()
   const posthog = usePosthog()
   const { fromConfig, setInConfig } = useAppConfig()
+  const { hotkeys, changeHotkey } = useHotkeyStorage()
+  const [hotkeyDialogOpen, setHotkeyDialogOpen] = useState(false)
 
   return (
     <Box padding={2}>
@@ -89,6 +93,22 @@ export const AdvancedOptionsView = ({ onClickEditJSON, onClearLabelData }) => {
           Label Help API Key
         </Button>
       )}
+      <Button
+        variant="outlined"
+        onClick={() => {
+          setHotkeyDialogOpen(true)
+        }}
+      >
+        Change/View Hotkeys
+      </Button>
+      <KeyboardShortcutManagerDialog
+        open={hotkeyDialogOpen}
+        hotkeyList={hotkeys}
+        onClose={() => setHotkeyDialogOpen(false)}
+        onChangeHotkey={(hotkey, newBinding) =>
+          changeHotkey(hotkey.id, newBinding)
+        }
+      />
     </Box>
   )
 }

src/components/AdvancedOptionsView/index.js

@@ -1,5 +1,6 @@
 import React, { useMemo, useContext, createContext } from "react"
 import { useLocalStorage } from "react-use"
+import { defaultHotkeys } from "../HotkeyStorage"
 
 const configKeyNames = [
   "auth.provider",
@@ -13,6 +14,7 @@ const configKeyNames = [
   "auth.cognito.storage.aws_s3.region",
   "labelhelp.disabled",
   "labelhelp.apikey",
+  ...defaultHotkeys.map(({ id }) => `hotkeys.${id}`),
 ]
 
 // NOTE: appConfig should not allow any nested values

src/components/AppConfig/index.js

@@ -22,7 +22,39 @@ import useEventCallback from "use-event-callback"
 
 const noop = () => {}
 
-const Container = styled("div")({ padding: 24 })
+const Container = styled("div")({
+  padding: 24,
+  "&.emptyState": {
+    textAlign: "center",
+    backgroundColor: colors.blue[800],
+    minHeight: "70vh",
+    padding: 64,
+    "& .bigText": {
+      textAlign: "left",
+      fontSize: 48,
+      color: "#fff",
+      fontWeight: "bold",
+      marginBottom: 48,
+    },
+  },
+})
+
+const BigButton = styled(Button)({
+  padding: 10,
+  width: 200,
+  height: 150,
+  boxShadow: "0px 3px 5px rgba(0,0,0,0.3)",
+  margin: 12,
+  backgroundColor: "#fff",
+  "& .bigIcon": {
+    marginTop: 16,
+    width: 64,
+    height: 64,
+  },
+  "&:hover": {
+    backgroundColor: "#fff",
+  },
+})
 
 const NoOptions = styled("div")({
   fontSize: 18,
@@ -114,6 +146,30 @@ export const ConfigureInterface = ({
       clearTimeout(timeout)
     }
   }, [previewChangedTime])
+
+  if (!iface.type || iface.type === "empty") {
+    return (
+      <Container className="emptyState">
+        <div className="bigText">Choose an Interface:</div>
+        {templates
+          .filter((t) => t.name !== "Empty")
+          .map((template) => (
+            <BigButton
+              key={template.name}
+              onClick={() => onChange(template.dataset.interface)}
+            >
+              <div>
+                <div>{template.name}</div>
+                <div>
+                  <template.Icon className="bigIcon" />
+                </div>
+              </div>
+            </BigButton>
+          ))}
+      </Container>
+    )
+  }
+
   return (
     <Container>
       <Heading>Interface Type</Heading>