[Mnaual backport 2.x] Combined #8598, #8651, #8613, #8616, #8659, #8665, #8650, #8668 (#8670)

* Fix No data selected appearance (#8668)

Also:
* Fix some React errors

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

---------

Fix random big number during loading in query editor result (#8650)

* Fix random big number during loading in query editor result

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

* Changeset file for PR #8650 created/updated

* Fix initial loading number

Signed-off-by: abbyhu2000 <[email protected]>
(cherry picked from commit a7414f0)

---------

[bug] address different issues with dataset selector (#8665)

* [bug] address some issues with dataset selector

Moved the dataset selector back to the search bar and access it by ref in the sidebar.

Avoid out of sync issue.
* update the logic for ensuring index pattern
* dont add ability to open button
* empty state but missing data set selector button
* fix tests
* add back styling

Signed-off-by: Kawika Avilla <[email protected]>
(cherry picked from commit e23f332)

---------

[bug] Discover UI stuck on searching after deleting index pattern (#8659)

* [bug] Discover UI stuck on searching after deleting index pattern

When using Discover with query enhancement enabled, deleting an index pattern from Index Management does not properly update the "Recently selected data" list in Discover. This causes the UI to become stuck in a "Searching" state when attempting to use
Discover after deleting an index pattern.

Handle the error case where the use index patterns hook caught error when
enhancements was enabled.

issue resolved:
#8612

(cherry picked from commit 4808094)

---------

[Discover]Sample Queries and Saved Queries in No Results Page (#8616)

* Sample Queries and Saved Queries in No Results Page

Signed-off-by: Sean Li <[email protected]>
Signed-off-by: Miki <[email protected]>

* Changeset file for PR #8616 created/updated

* Update styling

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

(cherry picked from commit 9da1b77)

---------

Improve Empty State Handling: Add No Index Patterns Panel with Data Selection in Discover View (#8613)

* Improve Empty State Handling: Add No Index Patterns Panel with Data Selection in Discover View

This PR primarily addresses the scenario when no index patterns (general) is available in the Discover view.
Instead of redirecting users to the index management page, it introduces a new "No Index Patterns" panel.
This panel provides users with the option to open a data selector and add index patterns
directly from the Discover view, improving the user experience for new or empty deployments.

To achieve, we move the selectedDataset state from ConnectedDatasetSelector to the app container's
state management. This allows the AdvancedSelector, opened from the AppContainer, to update
the dataset state effectively. Key changes include:

* Implementing NoIndexPatternsPanel and AdvancedSelector components.
* Refactoring dataset state management in AppContainer and Sidebar.
* Modifying DiscoverCanvas to conditionally render NoIndexPatternsPanel.
* Updating ConnectedDatasetSelector to use shared state and dataset change handling.

* Update design of no data selected
* use i18n
* fix comments
* Update design of no data selected
* fix lint error

Signed-off-by: Anan Zhuang <[email protected]>

(cherry picked from commit 6659139)

---------

Update Discover appearance (#8651)

* Update Discover appearance

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

(cherry picked from commit 17103ba)

---------

Move DatasetSelector from data plugin queryString comp to DataExplorer (#8598)

* Move DatasetSelector to DataExplorer
* Style Disover after moving DatasetSelector to DataExplorer
* fix the test by adding the getUpdates$ method to the mock queryString object

Signed-off-by: Anan Zhuang <[email protected]>

(cherry picked from commit 923cce8)

* Resolve merge errors from manual backports

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

---------

Signed-off-by: Miki <[email protected]>
Co-authored-by: Anan Zhuang <[email protected]>

Author: Miki

changelogs/fragments/8650.yml

@@ -0,0 +1,2 @@
+fix:
+- Fix random big number when loading in query result ([#8650](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8650))

src/plugins/data/common/index_patterns/index_patterns/ensure_default_index_pattern.ts

@@ -32,9 +32,7 @@ import { includes } from 'lodash';
 import { IndexPatternsContract } from './index_patterns';
 import { UiSettingsCommon } from '../types';
 
-export type EnsureDefaultIndexPattern = (
-  shouldRedirect?: boolean
-) => Promise<unknown | void> | undefined;
+export type EnsureDefaultIndexPattern = () => Promise<unknown | void> | undefined;
 
 export const createEnsureDefaultIndexPattern = (
   uiSettings: UiSettingsCommon,
@@ -44,10 +42,7 @@ export const createEnsureDefaultIndexPattern = (
    * Checks whether a default index pattern is set and exists and defines
    * one otherwise.
    */
-  return async function ensureDefaultIndexPattern(
-    this: IndexPatternsContract,
-    shouldRedirect: boolean = true
-  ) {
+  return async function ensureDefaultIndexPattern(this: IndexPatternsContract) {
     const patterns = await this.getIds();
     let defaultId = await uiSettings.get('defaultIndex');
     let defined = !!defaultId;
@@ -67,6 +62,8 @@ export const createEnsureDefaultIndexPattern = (
       defaultId = patterns[0];
       await uiSettings.set('defaultIndex', defaultId);
     } else {
+      const isEnhancementsEnabled = await uiSettings.get('query:enhancements:enabled');
+      const shouldRedirect = !isEnhancementsEnabled;
       if (shouldRedirect) return onRedirectNoIndexPattern();
       else return;
     }

src/plugins/data/public/query/query_string/language_service/lib/dql_language.ts

@@ -24,6 +24,12 @@ export const getDQLLanguageConfig = (
       visualizable: true,
     },
     showDocLinks: true,
+    docLink: {
+      title: i18n.translate('data.dqlLanguage.docLink', {
+        defaultMessage: 'DQL documentation',
+      }),
+      url: 'https://opensearch.org/docs/latest/query-dsl/full-text/query-string/',
+    },
     editorSupportedAppNames: ['discover'],
     supportedAppNames: ['discover', 'dashboards', 'visualize', 'data-explorer', 'vis-builder', '*'],
     sampleQueries: [

src/plugins/data/public/query/query_string/language_service/lib/lucene_language.ts

@@ -24,6 +24,12 @@ export const getLuceneLanguageConfig = (
       visualizable: true,
     },
     showDocLinks: true,
+    docLink: {
+      title: i18n.translate('data.luceneLanguage.docLink', {
+        defaultMessage: 'Lucene documentation',
+      }),
+      url: 'https://opensearch.org/docs/latest/query-dsl/full-text/query-string/',
+    },
     editorSupportedAppNames: ['discover'],
     supportedAppNames: ['discover', 'dashboards', 'visualize', 'data-explorer', 'vis-builder', '*'],
     sampleQueries: [

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

@@ -41,40 +41,42 @@ export function QueryResult(props: { queryStatus: QueryStatus }) {
     setPopover(!isPopoverOpen);
   };
 
-  const updateElapsedTime = () => {
-    const time = Date.now() - (props.queryStatus.startTime || 0);
-    if (time > BUFFER_TIME) {
-      setElapsedTime(time);
-    } else {
-      setElapsedTime(0);
-    }
-  };
-
   useEffect(() => {
+    const updateElapsedTime = () => {
+      const currentTime = Date.now();
+      if (!props.queryStatus.startTime) {
+        return;
+      }
+      const elapsed = currentTime - props.queryStatus.startTime;
+      setElapsedTime(elapsed);
+    };
+
     const interval = setInterval(updateElapsedTime, 1000);
 
-    return () => clearInterval(interval);
-  });
+    return () => {
+      clearInterval(interval);
+      setElapsedTime(0);
+    };
+  }, [props.queryStatus.startTime]);
 
-  if (props.queryStatus.status === ResultStatus.LOADING) {
-    if (elapsedTime < BUFFER_TIME) {
-      return null;
+  if (elapsedTime > BUFFER_TIME) {
+    if (props.queryStatus.status === ResultStatus.LOADING) {
+      const time = Math.floor(elapsedTime / 1000);
+      return (
+        <EuiButtonEmpty
+          color="text"
+          size="xs"
+          onClick={() => {}}
+          isLoading
+          data-test-subj="queryResultLoading"
+        >
+          {i18n.translate('data.query.languageService.queryResults.loadTime', {
+            defaultMessage: 'Loading {time} s',
+            values: { time },
+          })}
+        </EuiButtonEmpty>
+      );
     }
-    const time = Math.floor(elapsedTime / 1000);
-    return (
-      <EuiButtonEmpty
-        color="text"
-        size="xs"
-        onClick={() => {}}
-        isLoading
-        data-test-subj="queryResultLoading"
-      >
-        {i18n.translate('data.query.languageService.queryResults.loadTime', {
-          defaultMessage: 'Loading {time} s',
-          values: { time },
-        })}
-      </EuiButtonEmpty>
-    );
   }
 
   if (props.queryStatus.status === ResultStatus.READY) {
@@ -85,7 +87,7 @@ export function QueryResult(props: { queryStatus: QueryStatus }) {
       });
     } else if (props.queryStatus.elapsedMs < 1000) {
       message = i18n.translate(
-        'data.query.languageService.queryResults.completeTimeInMiliseconds',
+        'data.query.languageService.queryResults.completeTimeInMilliseconds',
         {
           defaultMessage: 'Completed in {timeMS} ms',
           values: { timeMS: props.queryStatus.elapsedMs },

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

@@ -55,6 +55,10 @@ export interface LanguageConfig {
     visualizable?: boolean;
   };
   showDocLinks?: boolean;
+  docLink?: {
+    title: string;
+    url: string;
+  };
   editorSupportedAppNames?: string[];
   supportedAppNames?: string[];
   hideDatePicker?: boolean;

src/plugins/data/public/ui/_index.scss

@@ -1,4 +1,3 @@
-@import "./common";
 @import "./filter_bar/index";
 @import "./typeahead/index";
 @import "./saved_query_management/index";

src/plugins/data/public/ui/dataset_selector/advanced_selector.tsx

@@ -13,27 +13,19 @@ import {
 } from '../../../common';
 import { DatasetExplorer } from './dataset_explorer';
 import { Configurator } from './configurator';
+import { getQueryService } from '../../services';
 import { IDataPluginServices } from '../../types';
 
 export const AdvancedSelector = ({
   services,
   onSelect,
   onCancel,
-  selectedDataset,
-  setSelectedDataset,
-  setIndexPattern,
-  direct = false,
 }: {
   services: IDataPluginServices;
   onSelect: (dataset: Dataset) => void;
   onCancel: () => void;
-  selectedDataset?: Dataset;
-  setSelectedDataset: (data: Dataset | undefined) => void;
-  setIndexPattern: (id: string | undefined) => void;
-  direct?: boolean;
 }) => {
-  const queryService = services.data.query;
-  const queryString = queryService.queryString;
+  const queryString = getQueryService().queryString;
 
   const [path, setPath] = useState<DataStructure[]>([
     {
@@ -56,38 +48,22 @@ export const AdvancedSelector = ({
         }),
     },
   ]);
+  const [selectedDataset, setSelectedDataset] = useState<BaseDataset | undefined>();
 
-  const [currentSelectedDataset, setCurrentSelectedDataset] = useState<BaseDataset | undefined>(
-    selectedDataset
-  );
-
-  return currentSelectedDataset ? (
+  return selectedDataset ? (
     <Configurator
-      baseDataset={currentSelectedDataset}
+      baseDataset={selectedDataset}
       onConfirm={onSelect}
       onCancel={onCancel}
-      onPrevious={() => {
-        setSelectedDataset(undefined);
-        setCurrentSelectedDataset(undefined);
-      }}
-      queryService={queryService}
+      onPrevious={() => setSelectedDataset(undefined)}
     />
   ) : (
     <DatasetExplorer
       services={services}
       queryString={queryString}
       path={path}
       setPath={setPath}
-      onNext={(dataset) => {
-        setSelectedDataset(dataset);
-        setIndexPattern(dataset.id);
-        setCurrentSelectedDataset(dataset);
-        if (direct) {
-          const query = queryString.getInitialQueryByDataset(dataset);
-          queryString.setQuery(query);
-          queryString.getDatasetService().addRecentDataset(dataset);
-        }
-      }}
+      onNext={(dataset) => setSelectedDataset(dataset)}
       onCancel={onCancel}
     />
   );

src/plugins/data/public/ui/dataset_selector/configurator.tsx

@@ -20,21 +20,20 @@ import { i18n } from '@osd/i18n';
 import { FormattedMessage } from '@osd/i18n/react';
 import React, { useEffect, useMemo, useState } from 'react';
 import { BaseDataset, DEFAULT_DATA, Dataset, DatasetField } from '../../../common';
-import { getIndexPatterns } from '../../services';
+import { getIndexPatterns, getQueryService } from '../../services';
 
 export const Configurator = ({
   baseDataset,
   onConfirm,
   onCancel,
   onPrevious,
-  queryService,
 }: {
   baseDataset: BaseDataset;
   onConfirm: (dataset: Dataset) => void;
   onCancel: () => void;
   onPrevious: () => void;
-  queryService: any;
 }) => {
+  const queryService = getQueryService();
   const queryString = queryService.queryString;
   const languageService = queryService.queryString.getLanguageService();
   const indexPatternsService = getIndexPatterns();

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

@@ -33,9 +33,7 @@ type EuiSmallButtonEmptyProps = React.ComponentProps<typeof EuiSmallButtonEmpty>
 
 interface DatasetSelectorProps {
   selectedDataset?: Dataset;
-  setSelectedDataset: (data: Dataset | undefined) => void;
-  setIndexPattern: (id: string | undefined) => void;
-  handleDatasetChange: (dataset: Dataset) => void;
+  setSelectedDataset: (dataset: Dataset) => void;
   services: IDataPluginServices;
 }
 
@@ -73,8 +71,6 @@ const RootComponent: React.FC<
 export const DatasetSelector = ({
   selectedDataset,
   setSelectedDataset,
-  setIndexPattern,
-  handleDatasetChange,
   services,
   appearance,
   buttonProps,
@@ -106,7 +102,7 @@ export const DatasetSelector = ({
 
       // If no dataset is selected, select the first one
       if (!selectedDataset && fetchedDatasets.length > 0) {
-        handleDatasetChange(fetchedDatasets[0]);
+        setSelectedDataset(fetchedDatasets[0]);
       }
     };
 
@@ -183,11 +179,11 @@ export const DatasetSelector = ({
           indexPatterns.find((dataset) => dataset.id === selectedOption.key);
         if (foundDataset) {
           closePopover();
-          handleDatasetChange(foundDataset);
+          setSelectedDataset(foundDataset);
         }
       }
     },
-    [recentDatasets, indexPatterns, handleDatasetChange, closePopover]
+    [recentDatasets, indexPatterns, setSelectedDataset, closePopover]
   );
 
   const datasetTitle = useMemo(() => {
@@ -270,14 +266,10 @@ export const DatasetSelector = ({
                   onSelect={(dataset?: Dataset) => {
                     overlay?.close();
                     if (dataset) {
-                      handleDatasetChange(dataset);
+                      setSelectedDataset(dataset);
                     }
                   }}
                   onCancel={() => overlay?.close()}
-                  selectedDataset={undefined}
-                  setSelectedDataset={setSelectedDataset}
-                  setIndexPattern={setIndexPattern}
-                  direct={true}
                 />
               ),
               {