"Keyboard shortcuts" settings page (#9071)

- Close enso-org/cloud-v2#896
- Add new settings page for viewing and editing keyboard shortcuts
- Refactor shortcut manager to resemble GUI2's shortcuts module
- Minor refactor moving `dashboard/layouts/dashboard` to `dashboard/layouts`; and moving all moals to `dashboard/modals`

# Important Notes
- The modal for capturing keyboard shortcuts has not been tested on macOS.

Author: somebody1234

app/ide-desktop/lib/assets/cross.svg

@@ -25,6 +25,8 @@ module.exports = {
           '^#[/]App',
           '^#[/]appUtils',
           '',
+          '^#[/]configurations[/]',
+          '',
           '^#[/]data[/]',
           '',
           '^#[/]hooks[/]',
@@ -39,6 +41,8 @@ module.exports = {
           '',
           '^#[/]components[/]',
           '',
+          '^#[/]modals[/]',
+          '',
           '^#[/]services[/]',
           '',
           '^#[/]utilities[/]',

app/ide-desktop/lib/assets/keyboard_shortcuts.svg

@@ -32,13 +32,7 @@ test.test('upload file', async ({ page }) => {
   const fileChooser = await fileChooserPromise
   const name = 'foo.txt'
   const content = 'hello world'
-  await fileChooser.setFiles([
-    {
-      name,
-      buffer: Buffer.from(content),
-      mimeType: 'text/plain',
-    },
-  ])
+  await fileChooser.setFiles([{ name, buffer: Buffer.from(content), mimeType: 'text/plain' }])
 
   await test.expect(assetRows).toHaveCount(1)
   await test.expect(assetRows.nth(0)).toBeVisible()

app/ide-desktop/lib/assets/reload_in_circle.svg

@@ -42,16 +42,18 @@ import * as detect from 'enso-common/src/detect'
 
 import * as appUtils from '#/appUtils'
 
+import * as inputBindingsModule from '#/configurations/inputBindings'
+
 import * as navigateHooks from '#/hooks/navigateHooks'
 
 import AuthProvider, * as authProvider from '#/providers/AuthProvider'
 import BackendProvider from '#/providers/BackendProvider'
-import LocalStorageProvider from '#/providers/LocalStorageProvider'
+import InputBindingsProvider from '#/providers/InputBindingsProvider'
+import LocalStorageProvider, * as localStorageProvider from '#/providers/LocalStorageProvider'
 import LoggerProvider from '#/providers/LoggerProvider'
 import type * as loggerProvider from '#/providers/LoggerProvider'
 import ModalProvider from '#/providers/ModalProvider'
 import SessionProvider from '#/providers/SessionProvider'
-import ShortcutManagerProvider from '#/providers/ShortcutManagerProvider'
 
 import ConfirmRegistration from '#/pages/authentication/ConfirmRegistration'
 import EnterOfflineMode from '#/pages/authentication/EnterOfflineMode'
@@ -66,10 +68,39 @@ import Subscribe from '#/pages/subscribe/Subscribe'
 import type Backend from '#/services/Backend'
 import LocalBackend from '#/services/LocalBackend'
 
-import ShortcutManager, * as shortcutManagerModule from '#/utilities/ShortcutManager'
+import LocalStorage from '#/utilities/LocalStorage'
 
 import * as authServiceModule from '#/authentication/service'
 
+// ============================
+// === Global configuration ===
+// ============================
+
+declare module '#/utilities/LocalStorage' {
+  /** */
+  interface LocalStorageData {
+    readonly inputBindings: Partial<
+      Readonly<Record<inputBindingsModule.DashboardBindingKey, string[]>>
+    >
+  }
+}
+
+LocalStorage.registerKey('inputBindings', {
+  tryParse: value =>
+    typeof value !== 'object' || value == null
+      ? null
+      : Object.fromEntries(
+          // This is SAFE, as it is a readonly upcast.
+          // eslint-disable-next-line no-restricted-syntax
+          Object.entries(value as Readonly<Record<string, unknown>>).flatMap(kv => {
+            const [k, v] = kv
+            return Array.isArray(v) && v.every((item): item is string => typeof item === 'string')
+              ? [[k, v]]
+              : []
+          })
+        ),
+})
+
 // ======================
 // === getMainPageUrl ===
 // ======================
@@ -113,8 +144,9 @@ export default function App(props: AppProps) {
   // This is a React component even though it does not contain JSX.
   // eslint-disable-next-line no-restricted-syntax
   const Router = detect.isOnElectron() ? router.MemoryRouter : router.BrowserRouter
-  /** Note that the `Router` must be the parent of the `AuthProvider`, because the `AuthProvider`
-   * will redirect the user between the login/register pages and the dashboard. */
+  // Both `BackendProvider` and `InputBindingsProvider` depend on `LocalStorageProvider`.
+  // Note that the `Router` must be the parent of the `AuthProvider`, because the `AuthProvider`
+  // will redirect the user between the login/register pages and the dashboard.
   return (
     <>
       <toastify.ToastContainer
@@ -127,7 +159,9 @@ export default function App(props: AppProps) {
         limit={3}
       />
       <Router basename={getMainPageUrl().pathname}>
-        <AppRouter {...props} />
+        <LocalStorageProvider>
+          <AppRouter {...props} />
+        </LocalStorageProvider>
       </Router>
     </>
   )
@@ -145,32 +179,67 @@ export default function App(props: AppProps) {
 function AppRouter(props: AppProps) {
   const { logger, supportsLocalBackend, isAuthenticationDisabled, shouldShowDashboard } = props
   const { onAuthenticated, projectManagerUrl } = props
+  const { localStorage } = localStorageProvider.useLocalStorage()
   const navigate = navigateHooks.useNavigate()
   if (detect.IS_DEV_MODE) {
     // @ts-expect-error This is used exclusively for debugging.
     window.navigate = navigate
   }
-  const [shortcutManager] = React.useState(() => ShortcutManager.createWithDefaults())
+  const [inputBindingsRaw] = React.useState(() => inputBindingsModule.createBindings())
   React.useEffect(() => {
-    const onKeyDown = (event: KeyboardEvent) => {
-      const isTargetEditable =
-        event.target instanceof HTMLInputElement ||
-        (event.target instanceof HTMLElement && event.target.isContentEditable)
-      const shouldHandleEvent = isTargetEditable
-        ? !shortcutManagerModule.isTextInputEvent(event)
-        : true
-      if (shouldHandleEvent && shortcutManager.handleKeyboardEvent(event)) {
-        event.preventDefault()
-        // This is required to prevent the event from propagating to the event handler
-        // that focuses the search input.
-        event.stopImmediatePropagation()
+    const savedInputBindings = localStorage.get('inputBindings')
+    for (const k in savedInputBindings) {
+      // This is UNSAFE, hence the `?? []` below.
+      // eslint-disable-next-line no-restricted-syntax
+      const bindingKey = k as inputBindingsModule.DashboardBindingKey
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      for (const oldBinding of inputBindingsRaw.metadata[bindingKey].bindings ?? []) {
+        inputBindingsRaw.delete(bindingKey, oldBinding)
+      }
+      for (const newBinding of savedInputBindings[bindingKey] ?? []) {
+        inputBindingsRaw.add(bindingKey, newBinding)
       }
     }
-    document.body.addEventListener('keydown', onKeyDown)
-    return () => {
-      document.body.removeEventListener('keydown', onKeyDown)
+  }, [/* should never change */ localStorage, /* should never change */ inputBindingsRaw])
+  const inputBindings = React.useMemo(() => {
+    const updateLocalStorage = () => {
+      localStorage.set(
+        'inputBindings',
+        Object.fromEntries(
+          Object.entries(inputBindingsRaw.metadata).map(kv => {
+            const [k, v] = kv
+            return [k, v.bindings]
+          })
+        )
+      )
     }
-  }, [shortcutManager])
+    return {
+      /** Transparently pass through `handler()`. */
+      get handler() {
+        return inputBindingsRaw.handler
+      },
+      /** Transparently pass through `attach()`. */
+      get attach() {
+        return inputBindingsRaw.attach
+      },
+      reset: (bindingKey: inputBindingsModule.DashboardBindingKey) => {
+        inputBindingsRaw.reset(bindingKey)
+        updateLocalStorage()
+      },
+      add: (bindingKey: inputBindingsModule.DashboardBindingKey, binding: string) => {
+        inputBindingsRaw.add(bindingKey, binding)
+        updateLocalStorage()
+      },
+      delete: (bindingKey: inputBindingsModule.DashboardBindingKey, binding: string) => {
+        inputBindingsRaw.delete(bindingKey, binding)
+        updateLocalStorage()
+      },
+      /** Transparently pass through `metadata`. */
+      get metadata() {
+        return inputBindingsRaw.metadata
+      },
+    }
+  }, [/* should never change */ localStorage, /* should never change */ inputBindingsRaw])
   const mainPageUrl = getMainPageUrl()
   const authService = React.useMemo(() => {
     const authConfig = { navigate, ...props }
@@ -253,9 +322,7 @@ function AppRouter(props: AppProps) {
     </router.Routes>
   )
   let result = routes
-  result = (
-    <ShortcutManagerProvider shortcutManager={shortcutManager}>{result}</ShortcutManagerProvider>
-  )
+  result = <InputBindingsProvider inputBindings={inputBindings}>{result}</InputBindingsProvider>
   result = <ModalProvider>{result}</ModalProvider>
   result = (
     <AuthProvider
@@ -269,8 +336,6 @@ function AppRouter(props: AppProps) {
     </AuthProvider>
   )
   result = <BackendProvider initialBackend={initialBackend}>{result}</BackendProvider>
-  /** {@link BackendProvider} depends on {@link LocalStorageProvider}. */
-  result = <LocalStorageProvider>{result}</LocalStorageProvider>
   result = (
     <SessionProvider
       mainPageUrl={mainPageUrl}

app/ide-desktop/lib/assets/tick.svg

@@ -4,9 +4,9 @@ import * as React from 'react'
 import CrossIcon from 'enso-assets/cross.svg'
 import TickIcon from 'enso-assets/tick.svg'
 
-import * as shortcutManagerProvider from '#/providers/ShortcutManagerProvider'
+import * as inputBindingsProvider from '#/providers/InputBindingsProvider'
 
-import * as shortcutManagerModule from '#/utilities/ShortcutManager'
+import * as sanitizedEventTargets from '#/utilities/sanitizedEventTargets'
 
 // ====================
 // === EditableSpan ===
@@ -31,7 +31,7 @@ export interface EditableSpanProps {
 export default function EditableSpan(props: EditableSpanProps) {
   const { 'data-testid': dataTestId, className, editable = false, children } = props
   const { checkSubmittable, onSubmit, onCancel, inputPattern, inputTitle } = props
-  const { shortcutManager } = shortcutManagerProvider.useShortcutManager()
+  const inputBindings = inputBindingsProvider.useInputBindings()
   const [isSubmittable, setIsSubmittable] = React.useState(true)
   const inputRef = React.useRef<HTMLInputElement>(null)
   const cancelled = React.useRef(false)
@@ -44,8 +44,8 @@ export default function EditableSpan(props: EditableSpanProps) {
 
   React.useEffect(() => {
     if (editable) {
-      return shortcutManager.registerKeyboardHandlers({
-        [shortcutManagerModule.KeyboardAction.cancelEditName]: () => {
+      return inputBindings.attach(sanitizedEventTargets.document.body, 'keydown', {
+        cancelEditName: () => {
           onCancel()
           cancelled.current = true
           inputRef.current?.blur()
@@ -54,7 +54,7 @@ export default function EditableSpan(props: EditableSpanProps) {
     } else {
       return
     }
-  }, [editable, shortcutManager, onCancel])
+  }, [editable, onCancel, /* should never change */ inputBindings])
 
   React.useEffect(() => {
     cancelled.current = false
@@ -86,21 +86,12 @@ export default function EditableSpan(props: EditableSpanProps) {
               event.currentTarget.form?.requestSubmit()
             }
           }}
+          onContextMenu={event => {
+            event.stopPropagation()
+          }}
           onKeyDown={event => {
-            if (
-              !event.isPropagationStopped() &&
-              ((event.ctrlKey &&
-                !event.shiftKey &&
-                !event.altKey &&
-                !event.metaKey &&
-                /^[xcvzy]$/.test(event.key)) ||
-                (event.ctrlKey &&
-                  event.shiftKey &&
-                  !event.altKey &&
-                  !event.metaKey &&
-                  /[Z]/.test(event.key)))
-            ) {
-              // This is an event that will be handled by the input.
+            if (event.key !== 'Escape') {
+              // The input may handle the event.
               event.stopPropagation()
             }
           }}