Improve autocomplete (#814)

package.json

@@ -21,7 +21,7 @@
     "@gravity-ui/paranoid": "^1.4.1",
     "@gravity-ui/react-data-table": "^2.0.1",
     "@gravity-ui/uikit": "^6.10.2",
-    "@gravity-ui/websql-autocomplete": "^8.0.2",
+    "@gravity-ui/websql-autocomplete": "^8.1.0",
     "@reduxjs/toolkit": "^2.2.3",
     "axios": "^1.6.8",
     "colord": "^2.9.3",

src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx

@@ -30,6 +30,7 @@ import {
     SAVED_QUERIES_KEY,
 } from '../../../../utils/constants';
 import {useQueryModes, useSetting} from '../../../../utils/hooks';
+import {LANGUAGE_YQL_ID} from '../../../../utils/monaco/yql/constants';
 import {QUERY_ACTIONS} from '../../../../utils/query';
 import {parseJson} from '../../../../utils/utils';
 import type {InitialPaneState} from '../../utils/paneVisibilityToggleHelpers';
@@ -412,7 +413,7 @@ function QueryEditor(props: QueryEditorProps) {
                     <div className={b('monaco-wrapper')}>
                         <div className={b('monaco')}>
                             <MonacoEditor
-                                language="sql"
+                                language={LANGUAGE_YQL_ID}
                                 value={executeQuery.input}
                                 options={editorOptions}
                                 onChange={onChange}

src/containers/Tenant/Query/QueryEditor/helpers.ts

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type Monaco from 'monaco-editor';
 
-import {ENABLE_AUTOCOMPLETE, useSetting} from '../../../../lib';
+import {AUTOCOMPLETE_ON_ENTER, ENABLE_AUTOCOMPLETE, useSetting} from '../../../../lib';
 
 export type EditorOptions = Monaco.editor.IEditorOptions & Monaco.editor.IGlobalEditorOptions;
 
@@ -16,15 +16,17 @@ export const EDITOR_OPTIONS: EditorOptions = {
 
 export function useEditorOptions() {
     const [enableAutocomplete] = useSetting(ENABLE_AUTOCOMPLETE);
+    const [autocompleteOnEnter] = useSetting(AUTOCOMPLETE_ON_ENTER);
 
     const options = React.useMemo<EditorOptions>(() => {
         const useAutocomplete = Boolean(enableAutocomplete);
         return {
             quickSuggestions: useAutocomplete,
             suggestOnTriggerCharacters: useAutocomplete,
+            acceptSuggestionOnEnter: autocompleteOnEnter ? 'on' : 'off',
             ...EDITOR_OPTIONS,
         };
-    }, [enableAutocomplete]);
+    }, [enableAutocomplete, autocompleteOnEnter]);
 
     return options;
 }

src/containers/Tenant/Tenant.tsx

@@ -80,7 +80,7 @@ function Tenant(props: TenantProps) {
         if (tenantName && typeof tenantName === 'string' && previousTenant.current !== tenantName) {
             const register = async () => {
                 const {registerYQLCompletionItemProvider} = await import(
-                    '../../utils/monaco/yqlSuggestions/registerCompletionItemProvider'
+                    '../../utils/monaco/yql/yql.completionItemProvider'
                 );
                 registerYQLCompletionItemProvider(tenantName);
             };

src/containers/UserSettings/i18n/en.json

@@ -11,6 +11,9 @@
   "settings.editor.autocomplete.title": "Enable autocomplete",
   "settings.editor.autocomplete.description": "You’re always able to get suggestions by pressing Ctrl+Space.",
 
+  "settings.editor.autocomplete-on-enter.title": "Accept suggestion on Enter",
+  "settings.editor.autocomplete-on-enter.description": "Controls whether suggestions should be accepted on Enter, in addition to Tab. Helps to avoid ambiguity between inserting new lines or accepting suggestions.",
+
   "settings.theme.title": "Interface theme",
   "settings.theme.option-dark": "Dark",
   "settings.theme.option-light": "Light",

src/containers/UserSettings/settings.tsx

@@ -2,6 +2,7 @@ import {Flask, PencilToSquare, StarFill} from '@gravity-ui/icons';
 import type {IconProps} from '@gravity-ui/uikit';
 
 import {
+    AUTOCOMPLETE_ON_ENTER,
     BINARY_DATA_IN_PLAIN_TEXT_DISPLAY,
     ENABLE_AUTOCOMPLETE,
     INVERTED_DISKS_KEY,
@@ -112,6 +113,12 @@ export const enableAutocompleteSetting: SettingProps = {
     description: i18n('settings.editor.autocomplete.description'),
 };
 
+export const autocompleteOnEnterSetting: SettingProps = {
+    settingKey: AUTOCOMPLETE_ON_ENTER,
+    title: i18n('settings.editor.autocomplete-on-enter.title'),
+    description: i18n('settings.editor.autocomplete-on-enter.description'),
+};
+
 export const appearanceSection: SettingsSection = {
     id: 'appearanceSection',
     title: i18n('section.appearance'),
@@ -125,7 +132,7 @@ export const experimentsSection: SettingsSection = {
 export const devSettingsSection: SettingsSection = {
     id: 'devSettingsSection',
     title: i18n('section.dev-setting'),
-    settings: [enableAutocompleteSetting],
+    settings: [enableAutocompleteSetting, autocompleteOnEnterSetting],
 };
 
 export const generalPage: SettingsPage = {

src/services/api.ts

@@ -5,6 +5,7 @@ import {backend as BACKEND, metaBackend as META_BACKEND} from '../store';
 import type {ComputeApiRequestParams, NodesApiRequestParams} from '../store/reducers/nodes/types';
 import type {StorageApiRequestParams} from '../store/reducers/storage/types';
 import type {TMetaInfo} from '../types/api/acl';
+import type {TQueryAutocomplete} from '../types/api/autocomplete';
 import type {TClusterInfo} from '../types/api/cluster';
 import type {TComputeInfo} from '../types/api/compute';
 import type {DescribeConsumerResult} from '../types/api/consumer';
@@ -587,6 +588,15 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
     whoami() {
         return this.get<TUserToken>(this.getPath('/viewer/json/whoami'), {});
     }
+    autocomplete(params: {database: string; prefix?: string; limit?: number; table?: string[]}) {
+        const {table, ...rest} = params;
+        const tablesParam = table?.join(',');
+        return this.get<TQueryAutocomplete>(
+            this.getPath('/viewer/json/autocomplete'),
+            {...rest, table: tablesParam},
+            {concurrentId: 'sql-autocomplete'},
+        );
+    }
 
     // used if not single cluster mode
     getClustersList(_?: never, {signal}: {signal?: AbortSignal} = {}) {

src/services/settings.ts

@@ -1,6 +1,7 @@
 import {TENANT_PAGES_IDS} from '../store/reducers/tenant/constants';
 import {
     ASIDE_HEADER_COMPACT_KEY,
+    AUTOCOMPLETE_ON_ENTER,
     BINARY_DATA_IN_PLAIN_TEXT_DISPLAY,
     ENABLE_AUTOCOMPLETE,
     INVERTED_DISKS_KEY,
@@ -38,6 +39,7 @@ export const DEFAULT_USER_SETTINGS: SettingsObject = {
     [USE_BACKEND_PARAMS_FOR_TABLES_KEY]: false,
     [USE_CLUSTER_BALANCER_AS_BACKEND_KEY]: true,
     [ENABLE_AUTOCOMPLETE]: false,
+    [AUTOCOMPLETE_ON_ENTER]: true,
 };
 
 class SettingsManager {

src/types/api/autocomplete.ts

@@ -0,0 +1,46 @@
+/**
+ * endpoint: /viewer/json/autocomplete
+ *
+ * source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/protos/viewer.proto
+ */
+export interface TQueryAutocomplete {
+    Success: boolean;
+    Error?: string[];
+    Result: TAutocompleteResult;
+}
+
+interface TAutocompleteResult {
+    Entities: TAutocompleteEntity[];
+    Total?: number;
+}
+
+export interface TAutocompleteEntity {
+    Name: string;
+    Type: AutocompleteEntityType;
+    Parent: string;
+}
+
+export type AutocompleteEntityType =
+    | 'unknown'
+    | 'dir'
+    | 'table'
+    | 'pers_queue_group'
+    | 'sub_domain'
+    | 'rtmr_volume'
+    | 'block_store_volume'
+    | 'kesus'
+    | 'solomon_volume'
+    | 'table_index'
+    | 'ext_sub_domain'
+    | 'file_store'
+    | 'column_store'
+    | 'column_table'
+    | 'cdc_stream'
+    | 'sequence'
+    | 'replication'
+    | 'blob_depot'
+    | 'external_table'
+    | 'external_data_source'
+    | 'view'
+    | 'column'
+    | 'index';

src/utils/constants.ts

@@ -134,3 +134,5 @@ export const QUERY_USE_MULTI_SCHEMA_KEY = 'queryUseMultiSchema';
 export const USE_CLUSTER_BALANCER_AS_BACKEND_KEY = 'useClusterBalancerAsBacked';
 
 export const ENABLE_AUTOCOMPLETE = 'enableAutocomplete';
+
+export const AUTOCOMPLETE_ON_ENTER = 'autocompleteOnEnter';

src/utils/monaco/index.ts

@@ -1,5 +1,7 @@
 import {registerSExpressionLanguage} from './s-expression/registerLanguage';
+import {registerYqlLanguage} from './yql/registerLanguage';
 
 export function registerLanguages() {
     registerSExpressionLanguage();
+    registerYqlLanguage();
 }

src/utils/monaco/yqlSuggestions/constants.ts → src/utils/monaco/yql/constants.ts

@@ -1,3 +1,5 @@
+export const LANGUAGE_YQL_ID = 'yql';
+
 export const SimpleTypes = [
     'String',
     'Bool',