[Discover-next] query editor and UI settings toggle

Adds new query editor in replacement of query string input.

Utilizing:
```
data.enhancements.enabled: true
```

And enabling the Advanced Setting: `query:enhancements:enabled`

Also, cleans up the toggling since it is now two different components.

Related issue:
opensearch-project#6067

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>

changelogs/fragments/7001.yml

@@ -0,0 +1,2 @@
+feat:
+- Query editor and UI settings toggle ([#7001](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7001))

docs/_sidebar.md

@@ -162,6 +162,7 @@
     - [Opensearch dashboards.release notes 2.12.0](../release-notes/opensearch-dashboards.release-notes-2.12.0.md)
     - [Opensearch dashboards.release notes 2.13.0](../release-notes/opensearch-dashboards.release-notes-2.13.0.md)
     - [Opensearch dashboards.release notes 2.14.0](../release-notes/opensearch-dashboards.release-notes-2.14.0.md)
+    - [Opensearch dashboards.release notes 2.15.0](../release-notes/opensearch-dashboards.release-notes-2.15.0.md)
     - [Opensearch dashboards.release notes 2.2.0](../release-notes/opensearch-dashboards.release-notes-2.2.0.md)
     - [Opensearch dashboards.release notes 2.2.1](../release-notes/opensearch-dashboards.release-notes-2.2.1.md)
     - [Opensearch dashboards.release notes 2.3.0](../release-notes/opensearch-dashboards.release-notes-2.3.0.md)

src/plugins/data/common/constants.ts

@@ -35,7 +35,6 @@ export const UI_SETTINGS = {
   DOC_HIGHLIGHT: 'doc_table:highlight',
   QUERY_STRING_OPTIONS: 'query:queryString:options',
   QUERY_ALLOW_LEADING_WILDCARDS: 'query:allowLeadingWildcards',
-  QUERY_DATA_SOURCE_READONLY: 'query:dataSourceReadOnly',
   SEARCH_QUERY_LANGUAGE: 'search:queryLanguage',
   SORT_OPTIONS: 'sort:options',
   COURIER_IGNORE_FILTER_IF_FIELD_NOT_IN_INDEX: 'courier:ignoreFilterIfFieldNotInIndex',
@@ -61,5 +60,8 @@ export const UI_SETTINGS = {
   INDEXPATTERN_PLACEHOLDER: 'indexPattern:placeholder',
   FILTERS_PINNED_BY_DEFAULT: 'filters:pinnedByDefault',
   FILTERS_EDITOR_SUGGEST_VALUES: 'filterEditor:suggestValues',
-  DATAFRAME_HYDRATION_STRATEGY: 'dataframe:hydrationStrategy',
+  QUERY_ENHANCEMENTS_ENABLED: 'query:enhancements:enabled',
+  QUERY_DATAFRAME_HYDRATION_STRATEGY: 'query:dataframe:hydrationStrategy',
+  QUERY_DATA_SOURCE_READONLY: 'query:dataSource:readOnly',
+  SEARCH_QUERY_LANGUAGE_BLOCKLIST: 'search:queryLanguageBlocklist',
 } as const;

src/plugins/data/config.ts

@@ -33,6 +33,9 @@ import { schema, TypeOf } from '@osd/config-schema';
 export const configSchema = schema.object({
   enhancements: schema.object({
     enabled: schema.boolean({ defaultValue: false }),
+    supportedAppNames: schema.arrayOf(schema.string(), {
+      defaultValue: ['discover'],
+    }),
   }),
   autocomplete: schema.object({
     querySuggestions: schema.object({

src/plugins/data/public/mocks.ts

@@ -72,7 +72,10 @@ const createStartContract = (isEnhancementsEnabled: boolean = false): Start => {
     search: searchServiceMock.createStartContract(),
     fieldFormats: fieldFormatsServiceMock.createStartContract(),
     query: queryStartMock,
-    ui: uiServiceMock.createStartContract(isEnhancementsEnabled),
+    ui: uiServiceMock.createStartContract(
+      isEnhancementsEnabled,
+      searchServiceMock.createStartContract()
+    ),
     indexPatterns: ({
       find: jest.fn((search) => [{ id: search, title: search }]),
       createField: jest.fn(() => {}),

src/plugins/data/public/plugin.ts

@@ -234,7 +234,7 @@ export class DataPublicPlugin
       },
     ]);
 
-    const dataServices = {
+    const dataServices: Omit<DataPublicPluginStart, 'ui'> = {
       actions: {
         createFiltersFromValueClickAction,
         createFiltersFromRangeSelectAction,

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

@@ -2,4 +2,5 @@
 @import "./typeahead/index";
 @import "./saved_query_management/index";
 @import "./query_string_input/index";
+@import "./query_editor/index";
 @import "./shard_failure_modal/shard_failure_modal";

src/plugins/data/public/ui/filter_bar/_global_filter_group.scss

@@ -11,6 +11,18 @@
   padding-bottom: $euiSizeS;
 }
 
+.globalQueryEditor {
+  padding: 0 $euiSizeXS $euiSizeXS $euiSizeXS;
+}
+
+.globalQueryEditor:first-child {
+  padding-top: $euiSizeXS;
+}
+
+.globalQueryEditor:not(:empty) {
+  padding-bottom: $euiSizeXS;
+}
+
 .globalFilterGroup__filterBar {
   margin-top: $euiSizeXS;
 }

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

@@ -28,7 +28,14 @@
  * under the License.
  */
 
-export { UiEnhancements, IUiStart, createSettings, Settings, DataSettings } from './types';
+export {
+  UiEnhancements,
+  IUiStart,
+  IUiSetup,
+  createSettings,
+  Settings,
+  DataSettings,
+} from './types';
 export { IndexPatternSelectProps } from './index_pattern_select';
 export { FilterLabel } from './filter_bar';
 export { QueryStringInput, QueryStringInputProps } from './query_string_input';

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

@@ -3,8 +3,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { BehaviorSubject, Observable, of } from 'rxjs';
 import { SettingsMock } from './settings/mocks';
 import { IUiSetup, IUiStart } from './types';
+import { ISearchStart } from '../search/types';
 
 const createMockWebStorage = () => ({
   clear: jest.fn(),
@@ -23,20 +25,31 @@ const createMockStorage = () => ({
   clear: jest.fn(),
 });
 
+export const createObservable = (data: any) => {
+  return of(data);
+};
+
 function createSetupContract(): jest.Mocked<IUiSetup> {
   return {
     __enhance: jest.fn(),
   };
 }
 
-function createStartContract(isEnhancementsEnabled: boolean = false): jest.Mocked<IUiStart> {
+function createStartContract(
+  isEnhancementsEnabled: boolean = false,
+  searchServiceMock: jest.Mocked<ISearchStart>
+): jest.Mocked<IUiStart> {
   const queryEnhancements = new Map();
   return {
-    isEnhancementsEnabled,
-    queryEnhancements,
     IndexPatternSelect: jest.fn(),
     SearchBar: jest.fn(),
-    Settings: new SettingsMock(createMockStorage(), queryEnhancements),
+    Settings: new SettingsMock(
+      { enabled: isEnhancementsEnabled, supportedAppNames: ['discover'] },
+      searchServiceMock,
+      createMockStorage(),
+      queryEnhancements
+    ),
+    container$: new Observable(),
   };
 }
 

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

@@ -0,0 +1,2 @@
+@import "./language_selector";
+@import "./query_editor";

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

@@ -0,0 +1,14 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+.languageSelector {
+  max-width: 140px;
+  height: 100%;
+
+  &:first-child {
+    div:first-child {
+      height: 100%;
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.osdQueryEditor__wrap {
+  height: 200px;
+  width: 500px;
+}
+
+.osdQueryEditorHeader {
+  max-height: 400px;
+
+  // TODO fix styling: with "overflow: auto" the scroll bar appears although the content is below max-height
+  // overflow: auto;
+}
+
+@include euiBreakpoint("xs", "s") {
+  .osdQueryEditor--withDatePicker {
+    > :first-child {
+      // Change the order of the query bar and date picker so that the date picker is top
+      // and the query bar still aligns with filters
+      order: 1;
+
+      // EUI Flexbox adds too much margin between responded items, this just moves it up
+      margin-top: $euiSizeS * -1;
+    }
+  }
+}
+
+// IE specific fix for the datepicker to not collapse
+@include euiBreakpoint("m", "l", "xl") {
+  .osdQueryEditor__datePickerWrapper {
+    max-width: 40vw;
+    flex-grow: 0 !important;
+    flex-basis: auto !important;
+
+    &.osdQueryEditor__datePickerWrapper-isHidden {
+      width: 0;
+      overflow: hidden;
+      max-width: 0;
+    }
+  }
+}

src/plugins/data/public/ui/query_editor/fetch_index_patterns.ts

@@ -0,0 +1,42 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { isEmpty } from 'lodash';
+import { IUiSettingsClient, SavedObjectsClientContract } from 'src/core/public';
+import { indexPatterns, IndexPatternAttributes } from '../..';
+
+export async function fetchIndexPatterns(
+  savedObjectsClient: SavedObjectsClientContract,
+  indexPatternStrings: string[],
+  uiSettings: IUiSettingsClient
+) {
+  if (!indexPatternStrings || isEmpty(indexPatternStrings)) {
+    return [];
+  }
+
+  const searchString = indexPatternStrings.map((string) => `"${string}"`).join(' | ');
+  const indexPatternsFromSavedObjects = await savedObjectsClient.find<IndexPatternAttributes>({
+    type: 'index-pattern',
+    fields: ['title', 'fields'],
+    search: searchString,
+    searchFields: ['title'],
+  });
+
+  const exactMatches = indexPatternsFromSavedObjects.savedObjects.filter((savedObject) => {
+    return indexPatternStrings.includes(savedObject.attributes.title);
+  });
+
+  const defaultIndex = uiSettings.get('defaultIndex');
+
+  const allMatches =
+    exactMatches.length === indexPatternStrings.length
+      ? exactMatches
+      : [
+          ...exactMatches,
+          await savedObjectsClient.get<IndexPatternAttributes>('index-pattern', defaultIndex),
+        ];
+
+  return allMatches.map(indexPatterns.getFromSavedObject);
+}

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

@@ -0,0 +1,26 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { withOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
+import type { QueryEditorTopRowProps } from './query_editor_top_row';
+import type { QueryEditorProps } from './query_editor';
+
+const Fallback = () => <div />;
+
+const LazyQueryEditorTopRow = React.lazy(() => import('./query_editor_top_row'));
+export const QueryEditorTopRow = (props: QueryEditorTopRowProps) => (
+  <React.Suspense fallback={<Fallback />}>
+    <LazyQueryEditorTopRow {...props} />
+  </React.Suspense>
+);
+
+const LazyQueryEditorUI = withOpenSearchDashboards(React.lazy(() => import('./query_editor')));
+export const QueryEditor = (props: QueryEditorProps) => (
+  <React.Suspense fallback={<Fallback />}>
+    <LazyQueryEditorUI {...props} />
+  </React.Suspense>
+);
+export type { QueryEditorProps };