language hint for with query assist, no longer needed

Signed-off-by: Joshua Li <joshuali925@gmail.com>
joshuali925 · Jul 8, 2024 · 9b694ba · 9b694ba
1 parent a43fcdc
commit 9b694ba
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 21 deletions.
diff --git a/public/plugin.tsx b/public/plugin.tsx
@@ -4,11 +4,13 @@
  */
 
 import moment from 'moment';
+import React from 'react';
 import { CoreSetup, CoreStart, Plugin, PluginInitializerContext } from '../../../src/core/public';
 import { IStorageWrapper, Storage } from '../../../src/plugins/opensearch_dashboards_utils/public';
 import { ConfigSchema } from '../common/config';
 import { ConnectionsService, createDataSourceConnectionExtension } from './data_source_connection';
 import { createQueryAssistExtension } from './query_assist';
+import { QueryAssistLanguageHint } from './query_assist/utils';
 import { PPLSearchInterceptor, SQLAsyncSearchInterceptor, SQLSearchInterceptor } from './search';
 import { setData, setStorage } from './services';
 import {
@@ -81,6 +83,13 @@ export class QueryEnhancementsPlugin
  ui: {
  query: {
  language: 'PPL',
+ languageHint: (
+ <QueryAssistLanguageHint
+ language="PPL"
+ http={core.http}
+ connectionsService={this.connectionsService}
+ />
+ ),
  search: pplSearchInterceptor,
  searchBar: {
  queryStringInput: { initialValue: 'source=<data_source>' },

diff --git a/public/query_assist/utils/create_extension.test.tsx b/public/query_assist/utils/create_extension.test.tsx
@@ -11,7 +11,7 @@ import { IIndexPattern } from '../../../../../src/plugins/data/public';
 import { ConfigSchema } from '../../../common/config';
 import { ConnectionsService } from '../../data_source_connection';
 import { Connection } from '../../types';
-import { createQueryAssistExtension } from './create_extension';
+import { availableLanguagesByDataSource, createQueryAssistExtension } from './create_extension';
 
 const coreSetupMock = coreMock.createSetup({
  pluginStartDeps: {
@@ -33,6 +33,7 @@ jest.mock('../components/query_assist_banner', () => ({
 describe('CreateExtension', () => {
  afterEach(() => {
  jest.clearAllMocks();
+ availableLanguagesByDataSource.clear();
  });
 
  const config: ConfigSchema['queryAssist'] = {

diff --git a/public/query_assist/utils/create_extension.tsx b/public/query_assist/utils/create_extension.tsx
@@ -3,10 +3,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { EuiText } from '@elastic/eui';
 import { HttpSetup } from 'opensearch-dashboards/public';
 import React, { useEffect, useState } from 'react';
 import { of } from 'rxjs';
-import { distinctUntilChanged, switchMap, map } from 'rxjs/operators';
+import { distinctUntilChanged, map, switchMap } from 'rxjs/operators';
 import { QueryEditorExtensionConfig } from '../../../../../src/plugins/data/public/ui/query_editor';
 import { QueryEditorExtensionDependencies } from '../../../../../src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extension';
 import { API } from '../../../common';
@@ -15,15 +16,14 @@ import { ConnectionsService } from '../../data_source_connection';
 import { QueryAssistBar } from '../components';
 import { QueryAssistBanner } from '../components/query_assist_banner';
 
+// visible for testing
+export const availableLanguagesByDataSource: Map<string | undefined, string[]> = new Map();
+
 /**
  * @returns observable list of query assist agent configured languages in the
  * selected data source.
  */
-const getAvailableLanguages$ = (
- availableLanguagesByDataSource: Map<string | undefined, string[]>,
- connectionsService: ConnectionsService,
- http: HttpSetup
-) =>
+const getAvailableLanguages$ = (connectionsService: ConnectionsService, http: HttpSetup) =>
  connectionsService.getSelectedConnection$().pipe(
  distinctUntilChanged(),
  switchMap(async (connection) => {
@@ -46,8 +46,6 @@ export const createQueryAssistExtension = (
  connectionsService: ConnectionsService,
  config: ConfigSchema['queryAssist']
 ): QueryEditorExtensionConfig => {
- const availableLanguagesByDataSource: Map<string | undefined, string[]> = new Map();
-
  return {
  id: 'query-assist',
  order: 1000,
@@ -57,15 +55,14 @@ export const createQueryAssistExtension = (
  if (dependencies.dataSource && dependencies.dataSource?.getType() !== 'default')
  return of(false);
 
- return getAvailableLanguages$(availableLanguagesByDataSource, connectionsService, http).pipe(
+ return getAvailableLanguages$(connectionsService, http).pipe(
  map((languages) => languages.length > 0)
  );
  },
  getComponent: (dependencies) => {
  // only show the component if user is on a supported language.
  return (
  <QueryAssistWrapper
- availableLanguagesByDataSource={availableLanguagesByDataSource}
  dependencies={dependencies}
  connectionsService={connectionsService}
  http={http}
@@ -78,7 +75,6 @@ export const createQueryAssistExtension = (
  // advertise query assist if user is not on a supported language.
  return (
  <QueryAssistWrapper
- availableLanguagesByDataSource={availableLanguagesByDataSource}
  dependencies={dependencies}
  connectionsService={connectionsService}
  http={http}
@@ -92,7 +88,6 @@ export const createQueryAssistExtension = (
 };
 
 interface QueryAssistWrapperProps {
- availableLanguagesByDataSource: Map<string | undefined, string[]>;
  dependencies: QueryEditorExtensionDependencies;
  connectionsService: ConnectionsService;
  http: HttpSetup;
@@ -105,14 +100,12 @@ const QueryAssistWrapper: React.FC<QueryAssistWrapperProps> = (props) => {
  useEffect(() => {
  let mounted = true;
 
- const subscription = getAvailableLanguages$(
- props.availableLanguagesByDataSource,
- props.connectionsService,
- props.http
- ).subscribe((languages) => {
- const available = languages.includes(props.dependencies.language);
- if (mounted) setVisible(props.invert ? !available : available);
- });
+ const subscription = getAvailableLanguages$(props.connectionsService, props.http).subscribe(
+ (languages) => {
+ const available = languages.includes(props.dependencies.language);
+ if (mounted) setVisible(props.invert ? !available : available);
+ }
+ );
 
  return () => {
  mounted = false;
@@ -123,3 +116,32 @@ const QueryAssistWrapper: React.FC<QueryAssistWrapperProps> = (props) => {
  if (!visible) return null;
  return <>{props.children}</>;
 };
+
+interface QueryAssistLanguageDisplayProps {
+ language: string;
+ connectionsService: ConnectionsService;
+ http: HttpSetup;
+}
+
+export const QueryAssistLanguageHint: React.FC<QueryAssistLanguageDisplayProps> = (props) => {
+ const [supported, setSupported] = useState(false);
+
+ useEffect(() => {
+ let mounted = true;
+
+ const subscription = getAvailableLanguages$(props.connectionsService, props.http).subscribe(
+ (languages) => {
+ const available = languages.includes(props.language);
+ if (mounted) setSupported(available);
+ }
+ );
+
+ return () => {
+ mounted = false;
+ subscription.unsubscribe();
+ };
+ }, [props]);
+
+ if (!supported) return null;
+ return <> with Query Assist</>;
+};