fix(discover): switch language based on dataset selection (#7924)

* fix(discover): switch language based on dataset selection Signed-off-by: Joshua Li <joshuali925@gmail.com> * keep currently selected language as default option Signed-off-by: Joshua Li <joshuali925@gmail.com> * update supportedLanguages mock Signed-off-by: Joshua Li <joshuali925@gmail.com> --------- Signed-off-by: Joshua Li <joshuali925@gmail.com>
opensearch-project · Sep 3, 2024 · edabe3b · edabe3b
1 parent 5115b1c
commit edabe3b
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 22 deletions.
diff --git a/src/plugins/data/public/query/query_string/dataset_service/dataset_service.mock.ts b/src/plugins/data/public/query/query_string/dataset_service/dataset_service.mock.ts
@@ -18,7 +18,7 @@ const createSetupDatasetServiceMock = (): jest.Mocked<DatasetServiceContract> =>
     toDataset: jest.fn(),
     fetch: jest.fn(),
     fetchFields: jest.fn(),
-    supportedLanguages: jest.fn().mockReturnValue(['DQL', 'Lucene', 'PPL', 'SQL']),
+    supportedLanguages: jest.fn().mockReturnValue(['kuery', 'lucene', 'PPL', 'SQL']),
   };
 
   const defaultDataset: Dataset = {

diff --git a/src/plugins/data/public/query/query_string/dataset_service/lib/index_pattern_type.ts b/src/plugins/data/public/query/query_string/dataset_service/lib/index_pattern_type.ts
@@ -65,9 +65,9 @@ export const indexPatternTypeConfig: DatasetTypeConfig = {
 
   supportedLanguages: (dataset): string[] => {
     if (dataset.dataSource?.type === 'OpenSearch Serverless') {
-      return ['DQL', 'Lucene'];
+      return ['kuery', 'lucene'];
     }
-    return ['DQL', 'Lucene', 'PPL', 'SQL'];
+    return ['kuery', 'lucene', 'PPL', 'SQL'];
   },
 };
 

diff --git a/src/plugins/data/public/query/query_string/dataset_service/types.ts b/src/plugins/data/public/query/query_string/dataset_service/types.ts
@@ -41,7 +41,7 @@ export interface DatasetTypeConfig {
   fetchFields: (dataset: Dataset) => Promise<DatasetField[]>;
   /**
    * Retrieves the supported query languages for this dataset type.
-   * @returns {Promise<string[]>} A promise that resolves to an array of supported language names.
+   * @returns {Promise<string[]>} A promise that resolves to an array of supported language ids.
    */
   supportedLanguages: (dataset: Dataset) => string[];
 }
diff --git a/src/plugins/data/public/query/query_string/language_service/language_service.ts b/src/plugins/data/public/query/query_string/language_service/language_service.ts
@@ -57,8 +57,8 @@ export class LanguageService {
     this.languages.set(config.id, config);
   }
 
-  public getLanguage(language: string): LanguageConfig | undefined {
-    return this.languages.get(language);
+  public getLanguage(languageId: string): LanguageConfig | undefined {
+    return this.languages.get(languageId);
   }
 
   public getLanguages(): LanguageConfig[] {

diff --git a/src/plugins/data/public/query/query_string/query_string_manager.ts b/src/plugins/data/public/query/query_string/query_string_manager.ts
@@ -175,14 +175,14 @@ export class QueryStringManager {
 
   public getInitialQueryByDataset = (newDataset: Dataset) => {
     const curQuery = this.query$.getValue();
-    const languageId = curQuery.language;
+    const languageId = newDataset.language || curQuery.language;
     const language = this.languageService.getLanguage(languageId);
-    const newQuery = { ...curQuery, dataset: newDataset };
-    const input = language?.getQueryString(newQuery) || '';
+    const newQuery = { ...curQuery, language: languageId, dataset: newDataset };
+    const newQueryString = language?.getQueryString(newQuery) || '';
 
     return {
       ...newQuery,
-      query: input,
+      query: newQueryString,
     };
   };
 

diff --git a/src/plugins/data/public/ui/dataset_selector/configurator.tsx b/src/plugins/data/public/ui/dataset_selector/configurator.tsx
@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useState } from 'react';
 import {
   EuiButton,
   EuiButtonEmpty,
@@ -19,8 +18,9 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { FormattedMessage } from '@osd/i18n/react';
+import React, { useEffect, useState } from 'react';
 import { BaseDataset, Dataset, DatasetField } from '../../../common';
-import { getQueryService, getIndexPatterns } from '../../services';
+import { getIndexPatterns, getQueryService } from '../../services';
 
 export const Configurator = ({
   baseDataset,
@@ -35,14 +35,20 @@ export const Configurator = ({
 }) => {
   const queryService = getQueryService();
   const queryString = queryService.queryString;
+  const languageService = queryService.queryString.getLanguageService();
   const indexPatternsService = getIndexPatterns();
   const type = queryString.getDatasetService().getType(baseDataset.type);
   const languages = type?.supportedLanguages(baseDataset) || [];
 
-  const [dataset, setDataset] = useState<Dataset>(baseDataset);
   const [timeFields, setTimeFields] = useState<DatasetField[]>();
-  const [timeField, setTimeField] = useState<string | undefined>(dataset.timeFieldName);
-  const [language, setLanguage] = useState<string>(languages[0]);
+  const [timeFieldName, setTimeFieldName] = useState<string | undefined>();
+  const [language, setLanguage] = useState<string>(() => {
+    const currentLanguage = queryString.getQuery().language;
+    if (languages.includes(currentLanguage)) {
+      return currentLanguage;
+    }
+    return languages[0];
+  });
 
   useEffect(() => {
     const fetchFields = async () => {
@@ -88,7 +94,7 @@ export const Configurator = ({
               }
             )}
           >
-            <EuiFieldText disabled value={dataset.title} />
+            <EuiFieldText disabled value={baseDataset.title} />
           </EuiFormRow>
           {timeFields && timeFields.length > 0 && (
             <EuiFormRow
@@ -108,11 +114,10 @@ export const Configurator = ({
                   { text: '-----', value: '', disabled: true },
                   { text: 'No time field', value: undefined },
                 ]}
-                value={timeField}
+                value={timeFieldName}
                 onChange={(e) => {
                   const value = e.target.value === 'undefined' ? undefined : e.target.value;
-                  setTimeField(value);
-                  setDataset({ ...dataset, timeFieldName: value });
+                  setTimeFieldName(value);
                 }}
               />
             </EuiFormRow>
@@ -127,7 +132,7 @@ export const Configurator = ({
           >
             <EuiSelect
               options={languages.map((languageId) => ({
-                text: languageId,
+                text: languageService.getLanguage(languageId)?.title || languageId,
                 value: languageId,
               }))}
               value={language}
@@ -149,7 +154,7 @@ export const Configurator = ({
             defaultMessage="Previous"
           />
         </EuiButton>
-        <EuiButton onClick={() => onConfirm(dataset)} fill>
+        <EuiButton onClick={() => onConfirm({ ...baseDataset, language, timeFieldName })} fill>
           <FormattedMessage
             id="data.explorer.datasetSelector.advancedSelector.confirm"
             defaultMessage="Select Data"

diff --git a/src/plugins/data/public/ui/query_editor/language_selector.tsx b/src/plugins/data/public/ui/query_editor/language_selector.tsx
@@ -106,7 +106,7 @@ export const QueryLanguageSelector = (props: QueryLanguageSelectorProps) => {
           iconSize="s"
           onClick={onButtonClick}
           className="languageSelector__button"
-          iconType={'arrowDown'}
+          iconType="arrowDown"
         >
           {selectedLanguage.label}
         </EuiButtonEmpty>