[desk-tool] Fix lint error and improve readability

packages/@sanity/desk-tool/src/panes/documentPane/keyboardShortcuts/documentActionShortcuts.tsx

@@ -1,9 +1,4 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable react/no-multi-comp */
-
-import React from 'react'
+import React, {useCallback, useState} from 'react'
 import {RenderActionCollectionState} from 'part:@sanity/base/actions/utils'
 import {useEditState} from '@sanity/react-hooks'
 import resolveDocumentActions from 'part:@sanity/base/document-actions/resolver'
@@ -28,70 +23,77 @@ function KeyboardShortcutResponder({
 }: ResponderProps) {
   const active = states[activeIndex]
 
-  const handleKeyDown = React.useCallback(
+  const handleKeyDown = useCallback(
     event => {
       const matchingStates = states.filter(
         state => state.shortcut && isHotkey(state.shortcut, event)
       )
+
       const matchingState = matchingStates[0]
+
       if (matchingState) {
         event.preventDefault()
       }
+
       if (matchingStates.length > 1) {
         // eslint-disable-next-line no-console
         console.warn(
           `Keyboard shortcut conflict: More than one document action matches the shortcut "${matchingState.shortcut}"`
         )
       }
+
       if (matchingState && !matchingState.disabled) {
         matchingState.onHandle()
         onActionStart(states.indexOf(matchingState))
       }
+
       if (onKeyDown) {
         onKeyDown(event)
       }
     },
-    [states]
+    [onActionStart, onKeyDown, states]
   )
+
   return (
     <div onKeyDown={handleKeyDown} tabIndex={-1} {...rest} ref={rootRef}>
       {children}
-      {active && active.dialog && <ActionStateDialog dialog={active.dialog} />}
+      {active && active.dialog && (
+        <ActionStateDialog dialog={active.dialog} referenceElement={null} />
+      )}
     </div>
   )
 }
 
-interface Props extends React.ComponentProps<'div'> {
+interface Props {
   id: string
   type: string
   rootRef: React.MutableRefObject<HTMLDivElement | null>
 }
 
-export const DocumentActionShortcuts = React.memo((props: Props) => {
-  const {id, type, children, ...rest} = props
-
-  const editState = useEditState(props.id, props.type)
-
-  const [activeIndex, setActiveIndex] = React.useState(-1)
+export const DocumentActionShortcuts = React.memo(
+  (props: Props & React.HTMLProps<HTMLDivElement>) => {
+    const {id, type, children, ...rest} = props
+    const editState = useEditState(id, type)
+    const [activeIndex, setActiveIndex] = useState(-1)
+    const actions = editState ? resolveDocumentActions(editState) : null
 
-  const onActionStart = React.useCallback(idx => {
-    setActiveIndex(idx)
-  }, [])
+    const onActionStart = useCallback(idx => {
+      setActiveIndex(idx)
+    }, [])
 
-  const actions = editState ? resolveDocumentActions(editState) : null
-
-  return actions ? (
-    <RenderActionCollectionState
-      actions={actions}
-      actionProps={editState}
-      component={KeyboardShortcutResponder}
-      onActionStart={onActionStart}
-      activeIndex={activeIndex}
-      {...rest}
-    >
-      {children}
-    </RenderActionCollectionState>
-  ) : null
-})
+    return actions ? (
+      <RenderActionCollectionState
+        actions={actions}
+        actionProps={editState}
+        component={KeyboardShortcutResponder}
+        onActionStart={onActionStart}
+        activeIndex={activeIndex}
+        {...rest}
+      >
+        {children}
+      </RenderActionCollectionState>
+    ) : null
+  }
+)
 
 DocumentActionShortcuts.displayName = 'DocumentActionShortcuts'

packages/@sanity/desk-tool/src/panes/documentPane/keyboardShortcuts/helpers.ts

@@ -1,10 +1,9 @@
-const KEY_I = 73
-const KEY_O = 79
-
+// ctrl + alt + i
 export function isInspectHotkey(event: KeyboardEvent): boolean {
-  return event.ctrlKey && event.keyCode === KEY_I && event.altKey && !event.shiftKey
+  return !event.shiftKey && event.ctrlKey && event.altKey && event.key === 'i'
 }
 
+// ctrl + alt + o
 export function isPreviewHotkey(event: KeyboardEvent): boolean {
-  return event.ctrlKey && event.keyCode === KEY_O && event.altKey && !event.shiftKey
+  return !event.shiftKey && event.ctrlKey && event.altKey && event.key === 'o'
 }

packages/@sanity/desk-tool/src/panes/documentPane/statusBar/syncState.tsx

@@ -1,23 +1,20 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-
-import * as React from 'react'
 import {useSyncState, useConnectionState} from '@sanity/react-hooks'
 import CheckIcon from 'part:@sanity/base/check-icon'
 import SyncIcon from 'part:@sanity/base/sync-icon'
+import React from 'react'
 
 import styles from './syncState.css'
 
-interface Props {
+interface SyncStateProps {
   id: string
   type: string
 }
 
-export function SyncState(props: Props) {
-  const {isSyncing} = useSyncState(props.id)
-  const connectionState = useConnectionState(props.id, props.type)
-
+export function SyncState(props: SyncStateProps) {
+  const {id, type} = props
+  const {isSyncing} = useSyncState(id)
+  const connectionState = useConnectionState(id, type)
   const isConnected = connectionState === 'connected'
-
   const icon = isSyncing || !isConnected ? <SyncIcon /> : <CheckIcon />
 
   // eslint-disable-next-line no-nested-ternary