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

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

@@ -0,0 +1,37 @@
+/*
+ * 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 {
+  &::before {
+    opacity: 0 !important;
+  }
+}
+
+.menuItem {
+  composes: theme-ripple from global;
+  background: transparent;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  max-width: 200px;
+  padding: 4px 8px;
+  text-align: left;
+  outline: none;
+  color: inherit;
+  cursor: pointer;
+  gap: 8px;
+
+  & .itemTitle {
+    position: relative;
+  }
+
+  & .iconOrImage {
+    width: 16px;
+    height: 16px;
+  }
+}

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

@@ -0,0 +1,104 @@
+/*
+ * 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 { observer } from 'mobx-react-lite';
+import { useEffect, useRef } from 'react';
+import { MenuItem } from 'reakit';
+
+import { IconOrImage } from '../IconOrImage.js';
+import { Menu } from '../Menu/Menu.js';
+import type { IMenuState } from '../Menu/MenuStateContext.js';
+import { s } from '../s.js';
+import { Text } from '../Text.js';
+import { useS } from '../useS.js';
+import style from './InputAutocompletionMenu.module.css';
+import { type InputAutocompleteProposal, type InputAutocompleteStrategy, useInputAutocomplete } from './useInputAutocomplete.js';
+
+interface AutocompletionProps {
+  sourceHints: InputAutocompleteProposal[];
+  inputRef: React.RefObject<HTMLInputElement | HTMLTextAreaElement>;
+  matchStrategy?: InputAutocompleteStrategy;
+  className?: string;
+  onSelect?: (proposal: InputAutocompleteProposal) => void;
+}
+
+export const InputAutocompletionMenu = observer(function InputAutocompletionMenu({
+  sourceHints,
+  className,
+  matchStrategy,
+  inputRef,
+  onSelect,
+}: AutocompletionProps) {
+  const styles = useS(style);
+  const menuRef = useRef<IMenuState>();
+  const autocompleteState = useInputAutocomplete(inputRef, {
+    sourceHints,
+    matchStrategy,
+  });
+
+  function handleSelect(proposal: InputAutocompleteProposal) {
+    hideMenu();
+    autocompleteState.replaceCurrentWord(proposal.replacementString);
+    onSelect?.(proposal);
+  }
+
+  function hideMenu() {
+    menuRef.current?.hide();
+  }
+
+  function handleKeyDown(event: any) {
+    if (!autocompleteState.filteredSuggestions.length) {
+      return;
+    }
+
+    switch (event.key) {
+      case 'Escape':
+        hideMenu();
+        break;
+      default:
+        break;
+    }
+  }
+
+  useEffect(() => {
+    inputRef.current?.addEventListener('keydown', handleKeyDown);
+    return () => {
+      inputRef.current?.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [inputRef.current, menuRef.current]);
+
+  useEffect(() => {
+    if (menuRef.current?.visible && (autocompleteState.filteredSuggestions === null || autocompleteState.filteredSuggestions.length === 0)) {
+      menuRef.current?.hide();
+    }
+    if (!menuRef.current?.visible && autocompleteState.filteredSuggestions !== null && autocompleteState.filteredSuggestions.length !== 0) {
+      menuRef.current?.show();
+    }
+  }, [sourceHints, menuRef, autocompleteState.filteredSuggestions]);
+
+  return (
+    <Menu
+      className={s(styles, { menu: true }, className)}
+      menuRef={menuRef}
+      label="Autocompletion"
+      items={autocompleteState.filteredSuggestions.map(item => (
+        <MenuItem
+          key={item.displayString}
+          id={item.displayString}
+          type="button"
+          title={item.title}
+          className={styles['menuItem']}
+          onClick={event => handleSelect(item)}
+        >
+          {item.icon && <IconOrImage icon={item.icon} className={styles['iconOrImage']} />}
+          <Text truncate>{item.displayString}</Text>
+        </MenuItem>
+      ))}
+      modal
+    />
+  );
+});

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

@@ -0,0 +1,154 @@
+/*
+ * 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 } from 'react';
+
+import { debounce, isFuzzySearchable, isNotNullDefined } from '@cloudbeaver/core-utils';
+
+import { useObservableRef } from '../useObservableRef.js';
+
+export type InputAutocompleteStrategy = 'startsWith' | 'contains' | 'fuzzy';
+
+interface InputAutocompleteOptions {
+  sourceHints: InputAutocompleteProposal[];
+  matchStrategy?: InputAutocompleteStrategy;
+  filter?: (suggestion: InputAutocompleteProposal, lastWord?: string) => boolean;
+}
+
+export interface InputAutocompleteProposal {
+  displayString: string;
+  replacementString: string;
+  icon?: string;
+  title?: string;
+  score?: number;
+}
+
+const INPUT_DELAY = 300;
+
+export const useInputAutocomplete = (
+  inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement>,
+  { sourceHints, matchStrategy = 'startsWith', filter }: InputAutocompleteOptions,
+) => {
+  const state = useObservableRef(
+    () => ({
+      input: inputRef.current?.value as string | undefined,
+      selectionStart: inputRef.current?.selectionStart ?? null,
+      selectionEnd: inputRef.current?.value?.length ?? null,
+      replaceCurrentWord(replacement: string) {
+        const input = this.inputRef.current;
+
+        if (!input) {
+          return;
+        }
+
+        const cursorPosition = this.selectionStart;
+        const words = this.input?.split(' ');
+
+        if (!isNotNullDefined(words) || !isNotNullDefined(cursorPosition) || !isNotNullDefined(this.currentWord)) {
+          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;
+        this.selectionEnd = start + replacement.length;
+
+        input.value = this.input;
+        input.focus();
+      },
+      get currentWord() {
+        const cursorPosition = this.selectionStart;
+
+        if (!cursorPosition) {
+          return '';
+        }
+
+        const substring = this.input?.slice(0, cursorPosition);
+
+        if (!substring) {
+          return '';
+        }
+
+        return (
+          substring
+            .split(' ')
+            .at(-1)
+            ?.replace(/[^\w\s]|_/g, '') ?? ''
+        );
+      },
+      get filteredSuggestions() {
+        if (!this.currentWord) {
+          return [];
+        }
+
+        return this.sourceHints
+          .filter(suggestion => {
+            const values = [suggestion.displayString.toLocaleLowerCase(), suggestion.replacementString.toLocaleLowerCase()];
+            const isEqual = values.some(value => value === this.currentWord?.toLocaleLowerCase());
+
+            if (!this.currentWord || isEqual) {
+              return false;
+            }
+
+            return (
+              (this.matchStrategy === 'startsWith' &&
+                values.some(value => isNotNullDefined(this.currentWord) && value.startsWith(this.currentWord))) ||
+              (this.matchStrategy === 'contains' && values.some(value => isNotNullDefined(this.currentWord) && value.includes(this.currentWord))) ||
+              (this.matchStrategy === 'fuzzy' &&
+                values.some(value => isNotNullDefined(this.currentWord) && isFuzzySearchable(this.currentWord, value)))
+            );
+          })
+          .filter(suggestion => (filter ? filter(suggestion, this.currentWord) : true))
+          .sort((a, b) => {
+            if (isNotNullDefined(a.score) && isNotNullDefined(b.score)) {
+              return b.score - a.score;
+            }
+
+            return 0;
+          });
+      },
+    }),
+    {
+      input: observable.ref,
+      selectionStart: observable.ref,
+      selectionEnd: observable.ref,
+      sourceHints: observable.ref,
+      matchStrategy: observable.ref,
+      inputRef: observable.ref,
+      currentWord: computed,
+      filteredSuggestions: computed,
+      replaceCurrentWord: action.bound,
+    },
+    { sourceHints, matchStrategy, inputRef },
+  );
+
+  const handleInput = debounce((event: Event) => {
+    const target = event.target as HTMLInputElement;
+
+    state.selectionStart = target.selectionStart;
+    state.selectionEnd = target.selectionEnd;
+    state.input = target?.value;
+  }, INPUT_DELAY);
+
+  useEffect(() => {
+    const input = state.inputRef.current;
+
+    if (!input) {
+      return;
+    }
+
+    input.addEventListener('input', handleInput);
+    return () => {
+      input.removeEventListener('input', handleInput);
+    };
+  }, [state.inputRef.current]);
+
+  return state;
+};

webapp/packages/core-blocks/src/index.ts

@@ -253,3 +253,5 @@ export * from './importLazyComponent.js';
 export * from './ClickableLoader.js';
 export * from './FormControls/TagsComboboxLoader.js';
 export * from './Flex/Flex.js';
+export * from './FormControls/useInputAutocomplete.js';
+export * from './FormControls/InputAutocompletionMenu.js';