Clear language bug

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))

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/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,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { BehaviorSubject } from 'rxjs';
 import { SettingsMock } from './settings/mocks';
 import { IUiSetup, IUiStart } from './types';
 
@@ -32,11 +33,15 @@ function createSetupContract(): jest.Mocked<IUiSetup> {
 function createStartContract(isEnhancementsEnabled: boolean = false): 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'] },
+ createMockStorage(),
+ queryEnhancements
+ ),
+ containerRef: document.createElement('div'),
+ container$: new BehaviorSubject<HTMLDivElement | null>(null),
  };
 }
 

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 };