Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve autocomplete #814

Merged
merged 5 commits into from
May 14, 2024
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
3 changes: 2 additions & 1 deletion src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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}
Expand Down
6 changes: 4 additions & 2 deletions src/containers/Tenant/Query/QueryEditor/helpers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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;
}
2 changes: 1 addition & 1 deletion src/containers/Tenant/Tenant.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};
Expand Down
3 changes: 3 additions & 0 deletions src/containers/UserSettings/i18n/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
9 changes: 8 additions & 1 deletion src/containers/UserSettings/settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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'),
Expand All @@ -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 = {
Expand Down
10 changes: 10 additions & 0 deletions src/services/api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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} = {}) {
Expand Down
2 changes: 2 additions & 0 deletions src/services/settings.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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 {
Expand Down
46 changes: 46 additions & 0 deletions src/types/api/autocomplete.ts
Original file line number Diff line number Diff line change
@@ -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';
2 changes: 2 additions & 0 deletions src/utils/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
2 changes: 2 additions & 0 deletions src/utils/monaco/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import {registerSExpressionLanguage} from './s-expression/registerLanguage';
import {registerYqlLanguage} from './yql/registerLanguage';

export function registerLanguages() {
registerSExpressionLanguage();
registerYqlLanguage();
}
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
export const LANGUAGE_YQL_ID = 'yql';

export const SimpleTypes = [
'String',
'Bool',
Expand Down
Loading
Loading