[Discover] notify user about field_type_tolerance for SQL/PPL in query footer

changelogs/fragments/8702.yml

@@ -0,0 +1,2 @@
+feat:
+- Notify user about field_type_tolerance for SQL/PPL in discover query footer ([#8702](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8702))

src/core/public/doc_links/doc_links_service.ts

@@ -631,6 +631,7 @@ export class DocLinksService {
           sql: {
             // https://opensearch.org/docs/latest/search-plugins/sql/sql/basic/
             base: `${OPENSEARCH_WEBSITE_DOCS}/search-plugins/sql/sql/basic/`,
+            limitation: `${OPENSEARCH_WEBSITE_DOCS}/search-plugins/sql/limitation/`,
           },
         },
       },
@@ -979,6 +980,7 @@ export interface DocLinksStart {
       };
       readonly sql: {
         readonly base: string;
+        readonly limitation: string;
       };
       readonly ppl: {
         readonly base: string;

src/plugins/data/public/query/query_string/language_service/lib/query_result.tsx

@@ -82,6 +82,7 @@ export function QueryResult(props: { queryStatus: QueryStatus }) {
         color="text"
         size="xs"
         onClick={() => {}}
+        iconGap="m"
         isLoading
         data-test-subj="queryResultLoading"
         className="editor__footerItem"
@@ -118,8 +119,9 @@ export function QueryResult(props: { queryStatus: QueryStatus }) {
     return (
       <EuiButtonEmpty
         iconSide="left"
-        iconType={'checkInCircleEmpty'}
-        iconGap="s"
+        iconType="checkInCircleEmpty"
+        color="text"
+        iconGap="m"
         size="xs"
         onClick={() => {}}
       >

src/plugins/data/public/query/query_string/language_service/types.ts

@@ -10,7 +10,7 @@ import {
   QueryStringContract,
   TimeRange,
 } from '../../../../public';
-import { EditorInstance } from '../../../ui/query_editor/editors';
+import { DefaultInputProps, EditorInstance } from '../../../ui/query_editor/editors';
 
 export interface RecentQueryItem {
   id: number;
@@ -63,4 +63,5 @@ export interface LanguageConfig {
   supportedAppNames?: string[];
   hideDatePicker?: boolean;
   sampleQueries?: SampleQuery[];
+  inputFooterItems?: DefaultInputProps['footerItems'];
 }

src/plugins/data/public/ui/query_editor/editors/default_editor/index.tsx

@@ -15,8 +15,8 @@ export interface DefaultInputProps extends React.JSX.IntrinsicAttributes {
   onChange: (value: string) => void;
   editorDidMount: (editor: any) => void;
   footerItems?: {
-    start?: any[];
-    end?: any[];
+    start?: React.ReactNode[];
+    end?: React.ReactNode[];
   };
   headerRef?: React.RefObject<HTMLDivElement>;
   provideCompletionItems: monaco.languages.CompletionItemProvider['provideCompletionItems'];

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

@@ -358,6 +358,9 @@ export default class QueryEditorUI extends Component<Props, State> {
       value: this.getQueryString(),
     };
 
+    const languageFooterItems = this.languageManager.getLanguage(this.props.query.language)
+      ?.inputFooterItems;
+
     const defaultInputProps: DefaultInputProps = {
       ...baseInputProps,
       onChange: this.onInputChange,
@@ -387,12 +390,16 @@ export default class QueryEditorUI extends Component<Props, State> {
           >
             {this.props.query.dataset?.timeFieldName || ''}
           </EuiText>,
+          ...(languageFooterItems?.start || []),
           <QueryResult queryStatus={this.props.queryStatus!} />,
         ],
         end: [
+          ...(languageFooterItems?.end || []),
           <EuiButtonEmpty
             iconSide="left"
             iconType="clock"
+            iconGap="s"
+            color="text"
             size="xs"
             onClick={this.toggleRecentQueries}
             className="queryEditor__footerItem"
@@ -445,13 +452,16 @@ export default class QueryEditorUI extends Component<Props, State> {
           <EuiText size="xs" color="subdued" className="queryEditor__footerItem">
             {this.props.query.dataset?.timeFieldName || ''}
           </EuiText>,
+          ...(languageFooterItems?.start || []),
           <QueryResult queryStatus={this.props.queryStatus!} />,
         ],
         end: [
+          ...(languageFooterItems?.end || []),
           <EuiButtonEmpty
             iconSide="left"
             iconType="clock"
-            iconGap="s"
+            iconGap="m"
+            color="text"
             size="xs"
             onClick={this.toggleRecentQueries}
             className="queryEditor__footerItem"

src/plugins/query_enhancements/public/index.scss

@@ -4,3 +4,4 @@
  */
 
 @import "./query_assist";
+@import "./query_editor_extensions";

src/plugins/query_enhancements/public/plugin.tsx

@@ -4,6 +4,7 @@
  */
 
 import { i18n } from '@osd/i18n';
+import React from 'react';
 import { CoreSetup, CoreStart, Plugin, PluginInitializerContext } from '../../../core/public';
 import { ConfigSchema } from '../common/config';
 import { setData, setStorage } from './services';
@@ -19,7 +20,11 @@ import { LanguageConfig, Query } from '../../data/public';
 import { s3TypeConfig } from './datasets';
 import { createEditor, DefaultInput, SingleLineInput } from '../../data/public';
 import { DataStorage } from '../../data/common';
-import { pplLanguageReference, sqlLanguageReference } from './query_editor_extensions';
+import {
+  FieldTypeToleranceInfoIcon,
+  pplLanguageReference,
+  sqlLanguageReference,
+} from './query_editor_extensions';
 
 export class QueryEnhancementsPlugin
   implements
@@ -87,13 +92,16 @@ export class QueryEnhancementsPlugin
       editor: enhancedPPLQueryEditor,
       editorSupportedAppNames: ['discover'],
       supportedAppNames: ['discover', 'data-explorer'],
+      inputFooterItems: {
+        start: [<FieldTypeToleranceInfoIcon core={core} data={data} />],
+      },
     };
     queryString.getLanguageService().registerLanguage(pplLanguageConfig);
 
     // Register SQL language
     const sqlLanguageConfig: LanguageConfig = {
       id: 'SQL',
-      title: 'SQL',
+      title: 'OpenSearch SQL',
       search: sqlSearchInterceptor,
       getQueryString: (query: Query) => {
         return `SELECT * FROM ${query.dataset?.title} LIMIT 10`;
@@ -167,6 +175,9 @@ export class QueryEnhancementsPlugin
           query: `SELECT * FROM your_table WHERE description IS NOT NULL AND description != '';`,
         },
       ],
+      inputFooterItems: {
+        start: [<FieldTypeToleranceInfoIcon core={core} data={data} />],
+      },
     };
     queryString.getLanguageService().registerLanguage(sqlLanguageConfig);
 

src/plugins/query_enhancements/public/query_assist/utils/create_extension.tsx

@@ -74,9 +74,9 @@ const getAvailableLanguages$ = (http: HttpSetup, data: DataPublicPluginSetup) =>
       // currently query assist tool relies on opensearch API to get index
       // mappings, external data source types (e.g. s3) are not supported
       if (
-        query.dataset?.dataSource?.type !== DEFAULT_DATA.SOURCE_TYPES.OPENSEARCH && // datasource is MDS OpenSearch
-        query.dataset?.dataSource?.type !== 'DATA_SOURCE' && // datasource is MDS OpenSearch when using indexes
-        query.dataset?.type !== DEFAULT_DATA.SET_TYPES.INDEX_PATTERN // dataset is index pattern
+        query.dataset?.dataSource?.type !== DEFAULT_DATA.SOURCE_TYPES.OPENSEARCH && // datasource is not MDS OpenSearch
+        query.dataset?.dataSource?.type !== 'DATA_SOURCE' && // datasource is not MDS OpenSearch when using indexes
+        query.dataset?.type !== DEFAULT_DATA.SET_TYPES.INDEX_PATTERN // dataset is not index pattern
       )
         return [];
 

src/plugins/query_enhancements/public/query_editor_extensions/_index.scss

@@ -0,0 +1,15 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.queryEnhancements {
+  .sqlArrayInfoPopoverText {
+    width: 280px;
+
+    p {
+      // align with text after icon + gutter
+      margin-left: calc($euiSizeM + $euiSizeM);
+    }
+  }
+}

src/plugins/query_enhancements/public/query_editor_extensions/field_type_tolerance_info_icon.test.tsx

@@ -0,0 +1,81 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import '@testing-library/jest-dom';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { coreMock } from '../../../../core/public/mocks';
+import { DEFAULT_DATA } from '../../../data/common';
+import { dataPluginMock } from '../../../data/public/mocks';
+import { useOpenSearchDashboards } from '../../../opensearch_dashboards_react/public';
+import { FieldTypeToleranceInfoIcon } from './field_type_tolerance_info_icon';
+
+jest.mock('../../../opensearch_dashboards_react/public', () => ({
+  useOpenSearchDashboards: jest.fn(),
+}));
+
+const coreSetupMock = coreMock.createSetup();
+const dataMock = dataPluginMock.createSetupContract();
+const getQueryMock = dataMock.query.queryString.getQuery as jest.Mock;
+const startMock = coreMock.createStart();
+
+describe('FieldTypeToleranceInfoIcon', () => {
+  const renderComponent = () =>
+    render(
+      <IntlProvider locale="en">
+        <FieldTypeToleranceInfoIcon core={coreSetupMock} data={dataMock} />
+      </IntlProvider>
+    );
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    localStorage.clear();
+    jest.useFakeTimers();
+    (useOpenSearchDashboards as jest.Mock).mockReturnValue({ services: startMock });
+  });
+
+  it('should render null when datasource is not OpenSearch', async () => {
+    getQueryMock.mockReturnValueOnce({ dataset: { dataSource: { type: 'S3' } } });
+    const { container } = renderComponent();
+    jest.runAllTimers();
+
+    await waitFor(() => expect(coreSetupMock.http.post).not.toHaveBeenCalled());
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('should render null when field type tolerance is enabled', async () => {
+    coreSetupMock.http.post.mockResolvedValueOnce({
+      persistent: { 'plugins.query.field_type_tolerance': 'true' },
+      transient: {},
+    });
+    getQueryMock.mockReturnValueOnce({
+      dataset: { dataSource: { type: DEFAULT_DATA.SOURCE_TYPES.OPENSEARCH } },
+    });
+
+    const { container } = renderComponent();
+    jest.runAllTimers();
+
+    await waitFor(() => expect(coreSetupMock.http.post).toHaveBeenCalled());
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('should show popover if field type tolerance is disabled', async () => {
+    coreSetupMock.http.post.mockResolvedValueOnce({
+      persistent: { 'plugins.query.field_type_tolerance': 'false' },
+      transient: {},
+    });
+    getQueryMock.mockReturnValueOnce({
+      dataset: { dataSource: { type: DEFAULT_DATA.SOURCE_TYPES.OPENSEARCH } },
+    });
+
+    const { getByRole, queryByText } = renderComponent();
+    jest.runAllTimers();
+
+    await waitFor(() => expect(getByRole('button')).toBeInTheDocument());
+    fireEvent.click(getByRole('button'));
+    expect(queryByText('No array datatype support')).toBeInTheDocument();
+  });
+});