Add hotkey for opening search dialog (#2633)

4 files changed, 39 insertions, 7 deletions

diff --git a/plugins/base/frontend/src/main/components/search/dokkaSearchAnchor.tsx b/plugins/base/frontend/src/main/components/search/dokkaSearchAnchor.tsx
index a502f589..a22dc77d 100644
--- a/plugins/base/frontend/src/main/components/search/dokkaSearchAnchor.tsx
+++ b/plugins/base/frontend/src/main/components/search/dokkaSearchAnchor.tsx
@@ -1,12 +1,27 @@
 import React from "react";
+import Tooltip from '@jetbrains/ring-ui/components/tooltip/tooltip';
 import SearchIcon from 'react-svg-loader!../assets/searchIcon.svg';
+import {CustomAnchorProps} from "./types";
+import {Hotkey} from "../utils/hotkey";
+
+const HOTKEY_LETTER = 'k'
+const HOTKEY_TOOLTIP_DISPLAY_DELAY = 0.5 * 1000 // seconds
+
+export const DokkaSearchAnchor = ({wrapperProps, buttonProps, popup}: CustomAnchorProps) => {
+    const hotkeys = new Hotkey()
+    hotkeys.registerHotkeyWithAccel(buttonProps.onClick, HOTKEY_LETTER)
 
-export const DokkaSearchAnchor = ({wrapperProps, buttonProps, popup}: any) => {
     return (
         <span {...wrapperProps}>
-            <button type="button" {...buttonProps}>
-                <SearchIcon />
-            </button>
+            <Tooltip
+                title={`${hotkeys.getOsAccelKeyName()} + ${HOTKEY_LETTER.toUpperCase()}`}
+                delay={HOTKEY_TOOLTIP_DISPLAY_DELAY}
+                popupProps={{className: "search-hotkey-popup"}}
+            >
+                <button type="button" {...buttonProps}>
+                    <SearchIcon/>
+                </button>
+            </Tooltip>
             {popup}
         </span>
     )
diff --git a/plugins/base/frontend/src/main/components/search/search.scss b/plugins/base/frontend/src/main/components/search/search.scss
index 24ad509f..780ea6b3 100644
--- a/plugins/base/frontend/src/main/components/search/search.scss
+++ b/plugins/base/frontend/src/main/components/search/search.scss
@@ -18,6 +18,11 @@ $secondary-font-color: hsla(0, 0%, 100%, 0.6);
   }
 }
 
+.search-hotkey-popup{
+  background-color: var(--background-color) !important;
+  padding: 4px;
+}
+
 .popup-wrapper {
   min-width: calc(100% - 322px) !important;
 
diff --git a/plugins/base/frontend/src/main/components/search/search.tsx b/plugins/base/frontend/src/main/components/search/search.tsx
index dfdcd462..d4e406bf 100644
--- a/plugins/base/frontend/src/main/components/search/search.tsx
+++ b/plugins/base/frontend/src/main/components/search/search.tsx
@@ -3,7 +3,7 @@ import List from '@jetbrains/ring-ui/components/list/list';
 import Select from '@jetbrains/ring-ui/components/select/select';
 import '@jetbrains/ring-ui/components/input-size/input-size.css';
 import './search.scss';
-import { IWindow, Option, Props } from "./types";
+import {CustomAnchorProps, IWindow, Option, Props} from "./types";
 import { DokkaSearchAnchor } from "./dokkaSearchAnchor";
 import { DokkaFuzzyFilterComponent } from "./dokkaFuzzyFilter";
 import { relativizeUrlForRequest } from '../utils/requests';
@@ -34,7 +34,7 @@ const WithFuzzySearchFilterComponent: React.FC<Props> = ({ data }: Props) => {
                     data={data}
                     popupClassName={"popup-wrapper"}
                     onSelect={onChangeSelected}
-                    customAnchor={({ wrapperProps, buttonProps, popup }) =>
+                    customAnchor={({ wrapperProps, buttonProps, popup }: CustomAnchorProps) =>
                         <DokkaSearchAnchor wrapperProps={wrapperProps} buttonProps={buttonProps} popup={popup} />
                     }
                 />
diff --git a/plugins/base/frontend/src/main/components/search/types.ts b/plugins/base/frontend/src/main/components/search/types.ts
index 84e55399..57e7e169 100644
--- a/plugins/base/frontend/src/main/components/search/types.ts
+++ b/plugins/base/frontend/src/main/components/search/types.ts
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {ButtonHTMLAttributes, HTMLAttributes, ReactNode, RefCallback} from "react";
 
 export type Page = {
     name: string;
@@ -37,3 +37,15 @@ export type OptionWithHighlightComponent = Option & {
 export type SearchProps = {
     searchResult: OptionWithSearchResult,
 }
+
+export interface DataTestProps {
+    'data-test'?: string | null | undefined
+}
+
+export interface CustomAnchorProps {
+    wrapperProps: HTMLAttributes<HTMLElement> & DataTestProps & {ref: RefCallback<HTMLElement>}
+    buttonProps: Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'children'> &
+        {onClick: () => void} &
+        DataTestProps,
+    popup: ReactNode
+}
\ No newline at end of file