CB-3753-1809-fr-add-field-hints-in-the-filter-field

webapp/packages/core-blocks/package.json

@@ -31,12 +31,14 @@
     "@cloudbeaver/core-theming": "^0",
     "@cloudbeaver/core-utils": "^0",
     "go-split": "^3",
+    "minisearch": "^7",
     "mobx": "^6",
     "mobx-react-lite": "^4",
     "react": "^18",
     "react-hotkeys-hook": "^4",
     "reakit": "^1",
-    "reakit-utils": "^0"
+    "reakit-utils": "^0",
+    "react-minisearch": "^7"
   },
   "peerDependencies": {},
   "devDependencies": {

webapp/packages/core-blocks/src/FormControls/BaseDropdown.module.css

@@ -5,10 +5,6 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-.menuItem {
-  composes: theme-ripple from global;
-}
-
 .menu {
   composes: theme-text-on-surface theme-background-surface theme-typography--caption theme-elevation-z3 from global;
   display: flex;
@@ -18,34 +14,35 @@
   outline: none;
   z-index: 999;
   border-radius: var(--theme-form-element-radius);
+}
 
-  & .menuItem {
-    background: transparent;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 8px 12px;
-    text-align: left;
-    outline: none;
-    color: inherit;
-    cursor: pointer;
-    gap: 8px;
+.menuItem {
+  composes: theme-ripple from global;
+  background: transparent;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 8px 12px;
+  text-align: left;
+  outline: none;
+  color: inherit;
+  cursor: pointer;
+  gap: 8px;
 
-    & .itemIcon,
-    & .itemTitle {
-      position: relative;
-    }
+  & .itemIcon,
+  & .itemTitle {
+    position: relative;
+  }
 
-    & .itemIcon {
-      width: 16px;
-      height: 16px;
-      overflow: hidden;
-      flex-shrink: 0;
+  & .itemIcon {
+    width: 16px;
+    height: 16px;
+    overflow: hidden;
+    flex-shrink: 0;
 
-      & .iconOrImage {
-        width: 100%;
-        height: 100%;
-      }
+    & .iconOrImage {
+      width: 100%;
+      height: 100%;
     }
   }
 }

webapp/packages/core-blocks/src/FormControls/InputAutocompletionMenu.module.css

@@ -0,0 +1,11 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+.menu {
+  display: none !important;
+}

webapp/packages/core-blocks/src/FormControls/InputAutocompletionMenu.tsx

@@ -0,0 +1,156 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+import { observable } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+
+import { debounce } from '@cloudbeaver/core-utils';
+
+import BaseDropdownStyles from '../FormControls/BaseDropdown.module.css';
+import { getComputed } from '../getComputed.js';
+import { IconOrImage } from '../IconOrImage.js';
+import { Menu } from '../Menu/Menu.js';
+import { MenuItem } from '../Menu/MenuItem.js';
+import type { IMenuState } from '../Menu/MenuStateContext.js';
+import { s } from '../s.js';
+import { Text } from '../Text.js';
+import { useObservableRef } from '../useObservableRef.js';
+import { useS } from '../useS.js';
+import style from './InputAutocompletionMenu.module.css';
+import { type InputAutocompleteProposal } from './useInputAutocomplete.js';
+
+interface AutocompletionProps {
+  proposals: InputAutocompleteProposal[];
+  inputRef: React.RefObject<HTMLInputElement | HTMLTextAreaElement>;
+  className?: string;
+  onSelect?: (proposal: InputAutocompleteProposal) => void;
+}
+
+const CONTEXT_INPUT_OFFSET_Y = 3;
+const DEBOUNCE_DELAY = 300;
+
+export const InputAutocompletionMenu = observer(function InputAutocompletionMenu({ className, proposals, inputRef, onSelect }: AutocompletionProps) {
+  const styles = useS(style, BaseDropdownStyles);
+  const menuRef = useRef<IMenuState>();
+  const state = useObservableRef(
+    () => ({
+      x: 0,
+      y: 0,
+      inputValue: '',
+    }),
+    {
+      x: observable.ref,
+      y: observable.ref,
+      inputValue: observable.ref,
+    },
+    false,
+  );
+  const contextMenuPosition = getComputed(() => ({
+    position: { x: state.x, y: state.y },
+    handleContextMenuOpen: () => {},
+  }));
+
+  function handleSelect(proposal: InputAutocompleteProposal) {
+    menuRef.current?.hide();
+    onSelect?.(proposal);
+  }
+
+  function handleKeyDown(event: any) {
+    switch (event.key) {
+      case 'Escape':
+        menuRef.current?.hide();
+        break;
+      case 'ArrowDown':
+      case 'ArrowUp':
+        menuRef.current?.first();
+        break;
+      default:
+        break;
+    }
+  }
+
+  const handleInput = useMemo(
+    () =>
+      debounce((event: any) => {
+        state.inputValue = event.target.value;
+      }, DEBOUNCE_DELAY),
+    [state],
+  );
+
+  useLayoutEffect(() => {
+    if (!inputRef.current) {
+      return;
+    }
+
+    const inputElement = inputRef.current;
+    const caretPosition = inputElement.selectionStart || 0;
+    const inputStyle = window.getComputedStyle(inputElement);
+
+    const span = document.createElement('span');
+    span.style.position = 'absolute';
+    span.style.visibility = 'hidden';
+    span.style.whiteSpace = 'pre';
+    span.style.fontFamily = inputStyle.fontFamily;
+    span.style.fontSize = inputStyle.fontSize;
+    span.style.fontWeight = inputStyle.fontWeight;
+    span.style.letterSpacing = inputStyle.letterSpacing;
+    span.style.lineHeight = inputStyle.lineHeight;
+    span.textContent = inputElement.value.slice(0, caretPosition);
+
+    document.body.appendChild(span);
+    const spanRect = span.getBoundingClientRect();
+    const letterWidth = spanRect.width / span.textContent.length;
+    document.body.removeChild(span);
+
+    state.x = spanRect.width + letterWidth;
+    state.y = spanRect.height + CONTEXT_INPUT_OFFSET_Y;
+  }, [state.inputValue, inputRef.current]);
+
+  useEffect(() => {
+    inputRef.current?.addEventListener('keydown', handleKeyDown);
+    inputRef.current?.addEventListener('input', handleInput);
+
+    return () => {
+      inputRef.current?.removeEventListener('keydown', handleKeyDown);
+      inputRef.current?.removeEventListener('input', handleInput);
+    };
+  }, [inputRef.current]);
+
+  if (!proposals.length) {
+    return;
+  }
+
+  return (
+    <Menu
+      contextMenuPosition={contextMenuPosition}
+      visible={proposals.length > 0}
+      panelAvailable={proposals.length > 0}
+      className={s(styles, { menu: true }, className)}
+      menuRef={menuRef}
+      label="Autocompletion"
+      items={proposals.map(proposal => (
+        <MenuItem
+          key={proposal.displayString}
+          id={proposal.displayString}
+          type="button"
+          title={proposal.title}
+          className={s(styles, { menuItem: true })}
+          onClick={event => handleSelect(proposal)}
+        >
+          {proposal.icon && (
+            <div className={s(styles, { itemIcon: true })}>
+              <IconOrImage icon={proposal.icon} className={s(styles, { iconOrImage: true })} />
+            </div>
+          )}
+          <Text truncate>{proposal.displayString}</Text>
+        </MenuItem>
+      ))}
+      modal
+    />
+  );
+});

webapp/packages/core-blocks/src/FormControls/useInputAutocomplete.ts

@@ -0,0 +1,139 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+import { action, computed, observable } from 'mobx';
+import { type RefObject, useEffect, useMemo } from 'react';
+
+import { debounce, isNotNullDefined } from '@cloudbeaver/core-utils';
+
+import { useObservableRef } from '../useObservableRef.js';
+import { type SearchStrategy, useSearch } from '../useSearch.js';
+
+export type InputAutocompleteStrategy = 'startsWith' | 'contains' | 'fuzzy';
+
+interface InputAutocompleteOptions {
+  sourceHints: InputAutocompleteProposal[];
+  matchStrategy?: SearchStrategy;
+  predicate?: (suggestion: InputAutocompleteProposal, lastWord?: string) => boolean;
+}
+
+export interface InputAutocompleteProposal {
+  displayString: string;
+  replacementString: string;
+  icon?: string;
+  title?: string;
+}
+
+interface State {
+  replaceCurrentWord: (replacement: string) => void;
+  currentWord: string;
+  proposals: InputAutocompleteProposal[];
+}
+
+const INPUT_DELAY = 300;
+const SEARCH_FIELDS: Array<keyof InputAutocompleteProposal> = ['displayString', 'replacementString'];
+
+export const useInputAutocomplete = (
+  inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement>,
+  { sourceHints, matchStrategy = 'contains', predicate }: InputAutocompleteOptions,
+): Readonly<State> => {
+  const search = useSearch({
+    sourceHints,
+    searchFields: SEARCH_FIELDS,
+    matchStrategy,
+    predicate,
+  });
+
+  const state = useObservableRef(
+    () => ({
+      isFound: false,
+      input: inputRef.current?.value as string | undefined,
+      selectionStart: inputRef.current?.selectionStart ?? null,
+      replaceCurrentWord(replacement: string) {
+        const cursorPosition = this.selectionStart;
+        const words = this.input?.split(' ');
+
+        if (!this.currentWord || !isNotNullDefined(words) || !isNotNullDefined(cursorPosition)) {
+          return;
+        }
+
+        const start = cursorPosition - this.currentWord.length;
+        const end = cursorPosition;
+
+        this.input = this.input?.slice(0, start) + replacement + this.input?.slice(end);
+        this.selectionStart = start + replacement.length;
+
+        if (this.inputRef.current) {
+          this.inputRef.current.value = this.input;
+          this.inputRef.current.focus();
+          this.inputRef.current.setSelectionRange(this.selectionStart, this.selectionStart);
+        }
+
+        this.isFound = true;
+      },
+      get currentWord(): string {
+        const cursorPosition = this.selectionStart;
+
+        if (!cursorPosition) {
+          return '';
+        }
+
+        const substring = this.input?.slice(0, cursorPosition);
+
+        if (!substring) {
+          return '';
+        }
+
+        return substring.split(' ').at(-1) ?? '';
+      },
+      get proposals() {
+        if (this.isFound || !this.currentWord) {
+          return [];
+        }
+
+        return this.search.searchResult ?? [];
+      },
+    }),
+    {
+      proposals: computed,
+      input: observable.ref,
+      selectionStart: observable.ref,
+      isFound: observable.ref,
+      currentWord: computed,
+      replaceCurrentWord: action.bound,
+    },
+    { sourceHints, matchStrategy, inputRef, search },
+  );
+
+  const handleInput = useMemo(
+    () =>
+      debounce((event: Event) => {
+        const target = event.target as HTMLInputElement;
+
+        state.selectionStart = target.selectionStart;
+        state.input = target.value;
+        state.isFound = false;
+        state.search.setSearch(state.currentWord);
+      }, INPUT_DELAY),
+    [state],
+  );
+
+  useEffect(() => {
+    const input = state.inputRef.current;
+
+    if (!input) {
+      return;
+    }
+
+    input.addEventListener('input', handleInput);
+    return () => {
+      input.removeEventListener('input', handleInput);
+    };
+  }, [state.inputRef.current]);
+
+  return state as Readonly<State>;
+};