[Autocomplete - SQL] Minor interface change to add suggestion type and move suggestion provider registration location

changelogs/fragments/7758.yml

@@ -0,0 +1,2 @@
+feat:
+- Minor interface change and move suggestion provider registration location ([#7758](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7758))

packages/osd-monaco/src/xjson/lexer_rules/opensearchsql.ts

@@ -155,3 +155,7 @@ export const lexerRules = {
     ],
   },
 } as monaco.languages.IMonarchLanguage;
+
+monaco.languages.register({
+  id: ID,
+});

src/plugins/data/public/antlr/opensearch_sql/code_completion.ts

@@ -25,6 +25,7 @@
 import { QuerySuggestion, QuerySuggestionGetFnArgs } from '../../autocomplete';
 import { fetchTableSchemas } from '../shared/utils';
 import { IDataFrameResponse, IFieldType } from '../../../common';
+import { SuggestionItemDetailsTags } from '../shared/constants';
 
 export interface SuggestionParams {
   position: monaco.Position;
@@ -65,13 +66,17 @@
       (schemas as IDataFrameResponse[]).forEach((schema: IDataFrameResponse) => {
         if ('body' in schema && schema.body && 'fields' in schema.body) {
           const columns = schema.body.fields.find((col: IFieldType) => col.name === 'COLUMN_NAME');
-          const fieldTypes = schema.body.fields.find((col: IFieldType) => col.name === 'DATA_TYPE');
+          const fieldTypes = schema.body.fields.find((col: IFieldType) => col.name === 'TYPE_NAME');
 
           if (columns && fieldTypes) {
             finalSuggestions.push(
-              ...columns.values.map((col: string) => ({
+              ...columns.values.map((col: string, index: number) => ({
                 text: col,
                 type: monaco.languages.CompletionItemKind.Field,
+                insertText: col,
+                detail: fieldTypes.values[index],
+                start: 0,
+                end: 0,
               }))
             );
           }
@@ -85,6 +90,10 @@
         ...SQL_SYMBOLS.AGREGATE_FUNCTIONS.map((af) => ({
           text: af,
           type: monaco.languages.CompletionItemKind.Function,
+          insertText: af,
+          detail: SuggestionItemDetailsTags.AggregateFunction,
+          start: 0,
+          end: 0,
         }))
       );
     }
@@ -95,6 +104,10 @@
         ...suggestions.suggestKeywords.map((sk) => ({
           text: sk.value,
           type: monaco.languages.CompletionItemKind.Keyword,
+          insertText: sk.value,
+          detail: SuggestionItemDetailsTags.Keyword,
+          start: 0,
+          end: 0,
         }))
       );
     }

src/plugins/data/public/antlr/shared/constants.ts

@@ -190,3 +190,9 @@ export const fieldNameSuggestions: Array<{ text: string; type: number; insertTex
 ];
 
 export const fieldNameWithNotSuggestions = fieldNameSuggestions.concat(notOperatorSuggestion);
+
+// suggestion item details tags
+export const enum SuggestionItemDetailsTags {
+  Keyword = 'Keyword',
+  AggregateFunction = 'Aggregate Function',
+}

src/plugins/data/public/autocomplete/providers/query_suggestion_provider.ts

@@ -61,7 +61,7 @@ export interface QuerySuggestionGetFnArgs {
 
 /** @public **/
 export interface QuerySuggestionBasic {
-  type: QuerySuggestionTypes | monaco.languages.CompletionItemKind;
+  type: QuerySuggestionTypes;
   description?: string | JSX.Element;
   end: number;
   start: number;
@@ -76,5 +76,15 @@ export interface QuerySuggestionField extends QuerySuggestionBasic {
   field: IFieldType;
 }
 
+export interface SqlMonacoCompatibleQuerySuggestion
+  extends Pick<QuerySuggestionBasic, 'description' | 'insertText' | 'cursorIndex'> {
+  type: monaco.languages.CompletionItemKind;
+  text: string;
+  detail: string;
+}
+
 /** @public **/
-export type QuerySuggestion = QuerySuggestionBasic | QuerySuggestionField;
+export type QuerySuggestion =
+  | QuerySuggestionBasic
+  | QuerySuggestionField
+  | SqlMonacoCompatibleQuerySuggestion;

src/plugins/data/public/ui/query_editor/query_editor.tsx

@@ -22,9 +22,6 @@ import { SimpleDataSet } from '../../../common';
 import { createDQLEditor, createDefaultEditor } from './editors';
 import { getQueryService, getIndexPatterns } from '../../services';
 
-const LANGUAGE_ID_SQL = 'SQL';
-monaco.languages.register({ id: LANGUAGE_ID_SQL });
-
 const LANGUAGE_ID_KUERY = 'kuery';
 monaco.languages.register({ id: LANGUAGE_ID_KUERY });
 
@@ -295,6 +292,7 @@ export default class QueryEditorUI extends Component<Props, State> {
               kind: s.type as monaco.languages.CompletionItemKind,
               insertText: s.insertText ?? s.text,
               range,
+              detail: 'detail' in s ? s.detail : '',
             }))
           : [],
       incomplete: false,