Fix No data selected appearance (opensearch-project#8668)

Also:
* Fix some React errors

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

---------

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

* Fix random big number during loading in query editor result

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

* Changeset file for PR opensearch-project#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 (opensearch-project#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 (opensearch-project#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:
opensearch-project#8612

(cherry picked from commit 4808094)

---------

[Discover]Sample Queries and Saved Queries in No Results Page (opensearch-project#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 opensearch-project#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 (opensearch-project#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 (opensearch-project#8651)

* Update Discover appearance

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

(cherry picked from commit 17103ba)

---------

Move DatasetSelector from data plugin queryString comp to DataExplorer (opensearch-project#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)

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/dataset_selector/index.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { useCallback, useEffect } from 'react';
+import { useCallback, useState, useEffect } from 'react';
 import React from 'react';
 import { Dataset, Query, TimeRange } from '../../../common';
 import {
@@ -12,62 +12,59 @@ import {
   DatasetSelectorUsingButtonProps,
   DatasetSelectorAppearance,
 } from './dataset_selector';
-import { AdvancedSelector } from './advanced_selector';
+import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
+import { IDataPluginServices } from '../../types';
 
 interface ConnectedDatasetSelectorProps {
   onSubmit: ((query: Query, dateRange?: TimeRange | undefined) => void) | undefined;
-  selectedDataset?: Dataset;
-  setSelectedDataset: (data: Dataset | undefined) => void;
-  setIndexPattern: (id: string | undefined) => void;
-  services?: any;
 }
 
 const ConnectedDatasetSelector = ({
   onSubmit,
-  selectedDataset,
-  setSelectedDataset,
-  setIndexPattern,
-  services,
   ...datasetSelectorProps
 }: ConnectedDatasetSelectorProps &
   (DatasetSelectorUsingButtonProps | DatasetSelectorUsingButtonEmptyProps)) => {
+  const { services } = useOpenSearchDashboards<IDataPluginServices>();
   const queryString = services.data.query.queryString;
+  const [selectedDataset, setSelectedDataset] = useState<Dataset | undefined>(
+    () => queryString.getQuery().dataset || queryString.getDefaultQuery().dataset
+  );
 
   useEffect(() => {
     const subscription = queryString.getUpdates$().subscribe((query) => {
       setSelectedDataset(query.dataset);
-      setIndexPattern(query.dataset?.id);
     });
 
     return () => {
       subscription.unsubscribe();
     };
-  }, [queryString, setSelectedDataset, setIndexPattern]);
+  }, [queryString]);
 
   const handleDatasetChange = useCallback(
     (dataset?: Dataset) => {
       setSelectedDataset(dataset);
-      setIndexPattern(dataset?.id);
       if (dataset) {
         const query = queryString.getInitialQueryByDataset(dataset);
         queryString.setQuery(query);
         onSubmit!(queryString.getQuery());
         queryString.getDatasetService().addRecentDataset(dataset);
       }
     },
-    [onSubmit, queryString, setSelectedDataset, setIndexPattern]
+    [onSubmit, queryString]
   );
 
   return (
     <DatasetSelector
       {...datasetSelectorProps}
       selectedDataset={selectedDataset}
-      setSelectedDataset={setSelectedDataset}
-      setIndexPattern={setIndexPattern}
-      handleDatasetChange={handleDatasetChange}
+      setSelectedDataset={handleDatasetChange}
       services={services}
     />
   );
 };
 
-export { ConnectedDatasetSelector as DatasetSelector, AdvancedSelector, DatasetSelectorAppearance };
+export {
+  ConnectedDatasetSelector as DatasetSelector,
+  ConnectedDatasetSelectorProps as DatasetSelectorProps,
+  DatasetSelectorAppearance,
+};

src/plugins/data/public/ui/filter_bar/filter_options.tsx

@@ -88,8 +88,7 @@ const FilterOptionsUI = (props: Props) => {
   const uiSettings = opensearchDashboards.services.uiSettings;
   const isPinned = uiSettings!.get(UI_SETTINGS.FILTERS_PINNED_BY_DEFAULT);
   const useNewHeader = Boolean(uiSettings!.get(UI_SETTINGS.NEW_HOME_PAGE));
-  const [indexPattern] = props.indexPatterns;
-  const index = indexPattern && indexPattern.id;
+  const index = Array.isArray(props.indexPatterns) ? props.indexPatterns[0]?.id : undefined;
   const newFilter = buildEmptyFilter(isPinned, index);
 
   const togglePopover = () => {

src/plugins/data/public/ui/index.ts

@@ -28,7 +28,7 @@
  * under the License.
  */
 
-export { UiEnhancements, IUiStart, IUiSetup } from './types';
+export { IUiStart, IUiSetup } from './types';
 export { IndexPatternSelectProps } from './index_pattern_select';
 export { FilterLabel } from './filter_bar';
 export { QueryStringInput, QueryStringInputProps } from './query_string_input';
@@ -51,5 +51,4 @@ export {
   useQueryStringManager,
 } from './search_bar';
 export { SuggestionsComponent } from './typeahead';
-export { DatasetSelector, AdvancedSelector, DatasetSelectorAppearance } from './dataset_selector';
-export { NoIndexPatternsPanel } from './no_index_patterns';
+export { DatasetSelector, DatasetSelectorAppearance } from './dataset_selector';

src/plugins/data/public/ui/query_editor/_query_editor.scss

@@ -150,9 +150,6 @@
   }
 
   .osdQueryEditor__querycontrols {
-    float: right;
-    margin: $euiSizeS $euiSizeS;
-
     .osdQueryEditor__extensionQueryControls {
       display: flex;
       padding: 0 $euiSizeS 0 $euiSizeXS;

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

@@ -77,14 +77,22 @@ export const DefaultInput: React.FC<DefaultInputProps> = ({
             gutterSize="none"
             className="defaultEditor__footerRow"
           >
-            {footerItems.start?.map((item) => (
-              <EuiFlexItem grow={false} className="defaultEditor__footerItem">
+            {footerItems.start?.map((item, idx) => (
+              <EuiFlexItem
+                key={`defaultEditor__footerItem-start-${idx}`}
+                grow={false}
+                className="defaultEditor__footerItem"
+              >
                 {item}
               </EuiFlexItem>
             ))}
             <EuiFlexItem grow />
-            {footerItems.end?.map((item) => (
-              <EuiFlexItem grow={false} className="defaultEditor__footerItem">
+            {footerItems.end?.map((item, idx) => (
+              <EuiFlexItem
+                key={`defaultEditor__footerItem-end-${idx}`}
+                grow={false}
+                className="defaultEditor__footerItem"
+              >
                 {item}
               </EuiFlexItem>
             ))}

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

@@ -111,7 +111,6 @@ export const QueryLanguageSelector = (props: QueryLanguageSelectorProps) => {
       button={
         <EuiSmallButtonEmpty
           iconSide="right"
-          iconSize="s"
           onClick={onButtonClick}
           className="languageSelector__button"
           iconType="arrowDown"

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

@@ -36,7 +36,6 @@ import { SuggestionsListSize } from '../typeahead/suggestions_component';
 import { QueryLanguageSelector } from './language_selector';
 import { QueryEditorExtensions } from './query_editor_extensions';
 import { getQueryService, getIndexPatterns } from '../../services';
-import { DatasetSelector } from '../dataset_selector';
 import { DefaultInputProps } from './editors';
 import { MonacoCompatibleQuerySuggestion } from '../../autocomplete/providers/query_suggestion_provider';
 
@@ -454,7 +453,6 @@ export default class QueryEditorUI extends Component<Props, State> {
           className={classNames('osdQueryEditor__banner', this.props.bannerClassName)}
         />
         <div className="osdQueryEditor__topBar">
-          <DatasetSelector onSubmit={this.props.onSubmit} />
           <div className="osdQueryEditor__input">
             {this.state.isCollapsed
               ? languageEditor.TopBar.Collapsed()