feat: use monaco snippets for query templates (#1626)

Author: Raubzeug

src/containers/Tenant/Query/NewSQL/NewSQL.tsx

@@ -3,22 +3,16 @@ import React from 'react';
 import {ChevronDown} from '@gravity-ui/icons';
 import {Button, DropdownMenu} from '@gravity-ui/uikit';
 
-import {changeUserInput} from '../../../../store/reducers/executeQuery';
-import {useTypedDispatch} from '../../../../utils/hooks';
 import {useChangeInputWithConfirmation} from '../../../../utils/hooks/withConfirmation/useChangeInputWithConfirmation';
+import {insertSnippetToEditor} from '../../../../utils/monaco/insertSnippet';
 import {bindActions} from '../../utils/newSQLQueryActions';
 
 import i18n from './i18n';
 
 export function NewSQL() {
-    const dispatch = useTypedDispatch();
-
-    const insertTemplate = React.useCallback(
-        (input: string) => {
-            dispatch(changeUserInput({input}));
-        },
-        [dispatch],
-    );
+    const insertTemplate = React.useCallback((input: string) => {
+        insertSnippetToEditor(input);
+    }, []);
 
     const onTemplateClick = useChangeInputWithConfirmation(insertTemplate);
 
@@ -56,10 +50,6 @@ export function NewSQL() {
                     text: i18n('action.select-rows'),
                     action: actions.selectQuery,
                 },
-                {
-                    text: i18n('action.select-from-external-table'),
-                    action: actions.selectQueryFromExternalTable,
-                },
                 {
                     text: i18n('action.delete-rows'),
                     action: actions.deleteRows,

src/containers/Tenant/Query/NewSQL/i18n/en.json

@@ -1,13 +1,12 @@
 {
-  "button.new-sql": "New SQL",
+  "button.new-sql": "New query",
   "action.create-row-table": "Create row table",
   "action.create-column-table": "Create column table",
   "action.create-external-table": "Create external table",
   "action.upsert-to-table": "Upsert into table",
   "action.update-table": "Update table",
   "action.alter-table": "Alter table",
   "action.select-rows": "Select from a table",
-  "action.select-from-external-table": "Select from external table",
   "action.delete-rows": "Delete rows",
   "action.drop-table": "Drop table",
   "action.add-index": "Add index",

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

@@ -200,8 +200,22 @@ export default function QueryEditor(props: QueryEditorProps) {
         }
     });
 
+    const editorWillUnmount = () => {
+        window.ydbEditor = undefined;
+    };
+
     const editorDidMount = (editor: Monaco.editor.IStandaloneCodeEditor, monaco: typeof Monaco) => {
+        window.ydbEditor = editor;
         const keybindings = getKeyBindings(monaco);
+        monaco.editor.registerCommand('insertSnippetToEditor', (_asessor, input: string) => {
+            //suggestController is not properly typed yet in monaco-editor package
+            const contribution = editor.getContribution<any>('snippetController2');
+            if (contribution) {
+                editor.focus();
+                editor.setValue('');
+                contribution.insert(input);
+            }
+        });
         initResizeHandler(editor);
         initUserPrompt(editor, getLastQueryText);
         editor.focus();
@@ -333,6 +347,7 @@ export default function QueryEditor(props: QueryEditorProps) {
                                 onChange={onChange}
                                 editorDidMount={editorDidMount}
                                 theme={`vs-${theme}`}
+                                editorWillUnmount={editorWillUnmount}
                             />
                         </div>
                     </div>

src/containers/Tenant/utils/newSQLQueryActions.ts

@@ -43,7 +43,6 @@ export const bindActions = (changeUserInput: (input: string) => void) => {
         upsertQuery: inputQuery(upsertQueryTemplate),
         createExternalTable: inputQuery(createExternalTableTemplate),
         dropExternalTable: inputQuery(dropExternalTableTemplate),
-        selectQueryFromExternalTable: inputQuery(selectQueryTemplate),
         createTopic: inputQuery(createTopicTemplate),
         alterTopic: inputQuery(alterTopicTemplate),
         dropTopic: inputQuery(dropTopicTemplate),

src/containers/Tenant/utils/schemaActions.ts

@@ -2,12 +2,12 @@ import copy from 'copy-to-clipboard';
 import type {NavigationTreeNodeType, NavigationTreeProps} from 'ydb-ui-components';
 
 import type {AppDispatch} from '../../../store';
-import {changeUserInput} from '../../../store/reducers/executeQuery';
 import type {GetTableSchemaDataParams} from '../../../store/reducers/tableSchemaData';
 import {TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants';
 import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
 import type {QuerySettings} from '../../../types/store/query';
 import createToast from '../../../utils/createToast';
+import {insertSnippetToEditor} from '../../../utils/monaco/insertSnippet';
 import {transformPath} from '../ObjectSummary/transformPath';
 import type {SchemaData} from '../Schema/SchemaViewer/types';
 import i18n from '../i18n';
@@ -75,13 +75,13 @@ const bindActions = (
                       })
                     : Promise.resolve(undefined);
 
-            userInputDataPromise.then((tableData) => {
-                dispatch(changeUserInput({input: tmpl({...params, tableData})}));
-            });
-
+            //order is important here: firstly we should open query tab and initialize editor (it will be set to window.ydbEditor), after that it is possible to insert snippet
             dispatch(setTenantPage(TENANT_PAGES_IDS.query));
             dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
             setActivePath(params.path);
+            userInputDataPromise.then((tableData) => {
+                insertSnippetToEditor(tmpl({...params, tableData}));
+            });
         };
         if (getConfirmation) {
             const confirmedPromise = getConfirmation();