feat: add YQL autocomplete (#755)

Author: Raubzeug

package-lock.json

@@ -20,6 +20,7 @@
     "@gravity-ui/paranoid": "^1.4.0",
     "@gravity-ui/react-data-table": "^1.2.0",
     "@gravity-ui/uikit": "^5.30.1",
+    "@gravity-ui/websql-autocomplete": "^8.0.2",
     "@reduxjs/toolkit": "^2.2.1",
     "axios": "^1.6.7",
     "bem-cn-lite": "^4.1.0",

package.json

@@ -19,6 +19,7 @@ const b = cn('object-general');
 
 interface ObjectGeneralProps {
     type: EPathType;
+    tenantName: string;
     additionalTenantProps?: AdditionalTenantsProps;
     additionalNodesProps?: AdditionalNodesProps;
 }
@@ -30,13 +31,13 @@ function ObjectGeneral(props: ObjectGeneralProps) {
     const [initialPage] = useSetting<string>(TENANT_INITIAL_PAGE_KEY);
 
     const queryParams = parseQuery(location);
-    const {name: tenantName, tenantPage = initialPage} = queryParams;
+    const {tenantPage = initialPage} = queryParams;
 
     const renderTabContent = () => {
-        const {type, additionalTenantProps, additionalNodesProps} = props;
+        const {type, additionalTenantProps, additionalNodesProps, tenantName} = props;
         switch (tenantPage) {
             case TENANT_PAGES_IDS.query: {
-                return <Query path={tenantName as string} theme={theme} type={type} />;
+                return <Query path={tenantName} theme={theme} type={type} />;
             }
             default: {
                 return (
@@ -51,6 +52,7 @@ function ObjectGeneral(props: ObjectGeneralProps) {
     };
 
     const renderContent = () => {
+        const {tenantName} = props;
         if (!tenantName) {
             return null;
         }

src/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useReducer} from 'react';
+import {useEffect, useReducer, useRef} from 'react';
 import cn from 'bem-cn-lite';
 import {useLocation} from 'react-router';
 import qs from 'qs';
@@ -11,6 +11,7 @@ import {DEFAULT_IS_TENANT_SUMMARY_COLLAPSED, DEFAULT_SIZE_TENANT_KEY} from '../.
 import {useTypedSelector, useTypedDispatch} from '../../utils/hooks';
 import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {disableAutorefresh, getSchema} from '../../store/reducers/schema/schema';
+import {registerYQLCompletionItemProvider} from '../../utils/monaco';
 
 import SplitPane from '../../components/SplitPane';
 import {AccessDenied} from '../../components/Errors/403';
@@ -49,6 +50,7 @@ function Tenant(props: TenantProps) {
         undefined,
         getTenantSummaryState,
     );
+    const previousTenant = useRef<string>();
 
     const {currentSchemaPath, currentSchema: currentItem = {}} = useTypedSelector(
         (state) => state.schema,
@@ -77,6 +79,11 @@ function Tenant(props: TenantProps) {
     const {name} = queryParams;
     const tenantName = name as string;
 
+    if (tenantName && typeof tenantName === 'string' && previousTenant.current !== tenantName) {
+        registerYQLCompletionItemProvider(tenantName);
+        previousTenant.current = tenantName;
+    }
+
     useEffect(() => {
         dispatch(getSchema({path: tenantName}));
     }, [tenantName, dispatch]);
@@ -140,6 +147,7 @@ function Tenant(props: TenantProps) {
                         type={preloadedPathType || currentPathType}
                         additionalTenantProps={props.additionalTenantProps}
                         additionalNodesProps={props.additionalNodesProps}
+                        tenantName={tenantName}
                     />
                 </SplitPane>
             )}

src/containers/Tenant/Tenant.tsx

@@ -1,4 +1,5 @@
 import * as monaco from 'monaco-editor';
+import {createProvideSuggestionsFunction} from './yqlSuggestions/yqlSuggestions';
 
 export const LANGUAGE_S_EXPRESSION_ID = 's-expression';
 
@@ -64,6 +65,22 @@ function registerSExpressionLanguage() {
     });
 }
 
+let completionProvider: monaco.IDisposable | undefined;
+
+function disableCodeSuggestions(): void {
+    if (completionProvider) {
+        completionProvider.dispose();
+    }
+}
+
+export function registerYQLCompletionItemProvider(database: string) {
+    disableCodeSuggestions();
+    completionProvider = monaco.languages.registerCompletionItemProvider('sql', {
+        triggerCharacters: [' ', '\n', '', ',', '.', '`', '('],
+        provideCompletionItems: createProvideSuggestionsFunction(database),
+    });
+}
+
 export function registerLanguages() {
     registerSExpressionLanguage();
 }