[Autocomplete - SQL] Minor interface change to add suggestion type an…

…d move suggestion provider registration location (opensearch-project#7758)

* add table/source as prefix to suggested fields

Signed-off-by: Eric <[email protected]>

* add type to column

Signed-off-by: Eric <[email protected]>

* move registeration to osd/monaco

Signed-off-by: Eric <[email protected]>

* add detail

Signed-off-by: Eric <[email protected]>

* Changeset file for PR opensearch-project#7758 created/updated

---------

Signed-off-by: Eric <[email protected]>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

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 { SQL_SYMBOLS } from './constants';
 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 @@ export const getSuggestions = async ({
       (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 @@ export const getSuggestions = async ({
         ...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 @@ export const getSuggestions = async ({
         ...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

@@ -0,0 +1,10 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// suggestion item details tags
+export const enum SuggestionItemDetailsTags {
+  Keyword = 'Keyword',
+  AggregateFunction = 'Aggregate Function',
+}

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

@@ -59,7 +59,7 @@ export interface QuerySuggestionGetFnArgs {
 
 /** @public **/
 export interface QuerySuggestionBasic {
-  type: QuerySuggestionTypes | monaco.languages.CompletionItemKind;
+  type: QuerySuggestionTypes;
   description?: string | JSX.Element;
   end: number;
   start: number;
@@ -74,5 +74,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

@@ -19,9 +19,6 @@ import { QueryEditorBtnCollapse } from './query_editor_btn_collapse';
 import { getQueryService, getIndexPatterns } from '../../services';
 import { DatasetSelector } from '../dataset_selector';
 
-const LANGUAGE_ID_SQL = 'SQL';
-monaco.languages.register({ id: LANGUAGE_ID_SQL });
-
 const LANGUAGE_ID_KUERY = 'kuery';
 monaco.languages.register({ id: LANGUAGE_ID_KUERY });
 
@@ -279,6 +276,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,