From cfc4c01bd537221b85c69f995b8e936b9232bfda Mon Sep 17 00:00:00 2001 From: Shenoy Pratik Date: Wed, 18 Sep 2024 09:04:43 -0700 Subject: [PATCH 1/5] update discover ui to use compressed components Signed-off-by: Shenoy Pratik --- .../data_selector_refresher.tsx | 48 ++++++++----------- .../datasource_selectable.tsx | 8 ++-- .../ui/dataset_selector/dataset_selector.tsx | 10 ++-- .../public/ui/query_editor/_query_editor.scss | 27 ++--------- .../public/ui/query_editor/editors/shared.tsx | 5 +- .../ui/query_editor/language_selector.tsx | 16 +++---- .../public/ui/query_editor/query_editor.tsx | 17 ++++--- .../sidebar/discover_field_search.tsx | 28 +++++------ .../components/sidebar/discover_sidebar.scss | 5 ++ 9 files changed, 72 insertions(+), 92 deletions(-) diff --git a/src/plugins/data/public/data_sources/datasource_selector/data_selector_refresher.tsx b/src/plugins/data/public/data_sources/datasource_selector/data_selector_refresher.tsx index bab5f152458..e066d65bd8a 100644 --- a/src/plugins/data/public/data_sources/datasource_selector/data_selector_refresher.tsx +++ b/src/plugins/data/public/data_sources/datasource_selector/data_selector_refresher.tsx @@ -3,15 +3,9 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React from 'react'; +import { EuiButtonIconProps, EuiSmallButtonIcon, EuiToolTip, EuiToolTipProps } from '@elastic/eui'; import { i18n } from '@osd/i18n'; -import { - EuiSmallButtonIcon, - EuiButtonIconProps, - EuiText, - EuiToolTip, - EuiToolTipProps, -} from '@elastic/eui'; +import React from 'react'; interface IDataSelectorRefresherProps { tooltipText: string; @@ -23,26 +17,24 @@ interface IDataSelectorRefresherProps { export const DataSelectorRefresher: React.FC = React.memo( ({ tooltipText, onRefresh, buttonProps, toolTipProps }) => { return ( - - - - - + + + ); } ); diff --git a/src/plugins/data/public/data_sources/datasource_selector/datasource_selectable.tsx b/src/plugins/data/public/data_sources/datasource_selector/datasource_selectable.tsx index e826cbe18af..8e59ac91009 100644 --- a/src/plugins/data/public/data_sources/datasource_selector/datasource_selectable.tsx +++ b/src/plugins/data/public/data_sources/datasource_selector/datasource_selectable.tsx @@ -3,17 +3,17 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useEffect, useCallback, useMemo } from 'react'; import { EuiCompressedComboBox } from '@elastic/eui'; import { i18n } from '@osd/i18n'; -import { DataSource, DataSetWithDataSource, IndexPatternOption } from '../datasource'; -import { DataSourceGroup, DataSourceOption, DataSourceSelectableProps } from './types'; -import { DataSelectorRefresher } from './data_selector_refresher'; +import React, { useCallback, useEffect, useMemo } from 'react'; import { DATA_SELECTOR_DEFAULT_PLACEHOLDER, DATA_SELECTOR_REFRESHER_POPOVER_TEXT, DATA_SELECTOR_S3_DATA_SOURCE_GROUP_HINT_LABEL, } from '../constants'; +import { DataSetWithDataSource, DataSource, IndexPatternOption } from '../datasource'; +import { DataSelectorRefresher } from './data_selector_refresher'; +import { DataSourceGroup, DataSourceOption, DataSourceSelectableProps } from './types'; // Asynchronously retrieves and formats dataset from a given data source. const getAndFormatDataSetFromDataSource = async ( diff --git a/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx b/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx index d442360e4d5..817d0734c4d 100644 --- a/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx +++ b/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx @@ -3,23 +3,23 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useEffect, useMemo, useState, useCallback, useRef } from 'react'; import { EuiButton, - EuiButtonEmpty, EuiIcon, EuiPopover, EuiPopoverFooter, EuiSelectable, EuiSelectableOption, + EuiSmallButtonEmpty, EuiToolTip, } from '@elastic/eui'; import { FormattedMessage } from '@osd/i18n/react'; +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { toMountPoint } from '../../../../opensearch_dashboards_react/public'; import { Dataset, DEFAULT_DATA } from '../../../common'; +import { getQueryService } from '../../services'; import { IDataPluginServices } from '../../types'; import { AdvancedSelector } from './advanced_selector'; -import { getQueryService } from '../../services'; interface DatasetSelectorProps { selectedDataset?: Dataset; @@ -133,7 +133,7 @@ export const DatasetSelector = ({ - {datasetTitle} - + } isOpen={isOpen} diff --git a/src/plugins/data/public/ui/query_editor/_query_editor.scss b/src/plugins/data/public/ui/query_editor/_query_editor.scss index e9655d245fd..b884788861c 100644 --- a/src/plugins/data/public/ui/query_editor/_query_editor.scss +++ b/src/plugins/data/public/ui/query_editor/_query_editor.scss @@ -64,26 +64,10 @@ } } -.osdQueryEditor__dataSetWrapper { - max-width: 350px; - - .dataExplorerDSSelect { - border-bottom: $euiBorderThin !important; - min-width: 300px; - - span:is([class$="__text"]) { - width: 350px; - text-align: left; - } - - div:is([class$="--group"]) { - padding: 0 !important; - } - - .sourceRefreshText { - max-height: 40px; - } - } +// TODO: ths is a temporary fix to make sure the height is set to auto +// Can remove this once, height issue is fixed for combo box append in Oui +.dataExplorerDSSelect .euiFormControlLayout.euiFormControlLayout--group > .euiToolTipAnchor { + height: auto; } .osdQueryEditor__prependWrapper { @@ -159,7 +143,6 @@ .osdQueryEditor__topBar { display: flex; align-items: center; - padding: $euiSizeXS; > * { flex: 0 1 auto; @@ -197,7 +180,7 @@ } .osdQuerEditor__singleLine { - padding: $euiSizeS; + padding: calc($euiSizeXS + 1px); background-color: $euiColorEmptyShade; overflow: initial !important; // needed for suggestion window, otherwise will be hidden in child diff --git a/src/plugins/data/public/ui/query_editor/editors/shared.tsx b/src/plugins/data/public/ui/query_editor/editors/shared.tsx index 32cb0aa18a5..125b63e21dd 100644 --- a/src/plugins/data/public/ui/query_editor/editors/shared.tsx +++ b/src/plugins/data/public/ui/query_editor/editors/shared.tsx @@ -3,9 +3,9 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React from 'react'; import { EuiCompressedFieldText } from '@elastic/eui'; import { monaco } from '@osd/monaco'; +import React from 'react'; import { CodeEditor } from '../../../../../opensearch_dashboards_react/public'; interface SingleLineInputProps extends React.JSX.IntrinsicAttributes { @@ -62,7 +62,7 @@ export const SingleLineInput: React.FC = ({ provideCompletionItems, prepend, }) => ( -
+
{prepend}
= ({ onChange={onChange} editorDidMount={editorDidMount} options={{ + fixedOverflowWidgets: true, lineNumbers: 'off', // Disabled line numbers // lineHeight: 40, fontSize: 14, diff --git a/src/plugins/data/public/ui/query_editor/language_selector.tsx b/src/plugins/data/public/ui/query_editor/language_selector.tsx index 2cdac637bc0..ed7598fea56 100644 --- a/src/plugins/data/public/ui/query_editor/language_selector.tsx +++ b/src/plugins/data/public/ui/query_editor/language_selector.tsx @@ -3,17 +3,17 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useState, useEffect } from 'react'; import { - PopoverAnchorPosition, + EuiContextMenuItem, EuiContextMenuPanel, EuiPopover, - EuiButtonEmpty, - EuiContextMenuItem, + EuiSmallButtonEmpty, + PopoverAnchorPosition, } from '@elastic/eui'; -import { getQueryService } from '../../services'; -import { LanguageConfig } from '../../query'; +import React, { useEffect, useState } from 'react'; import { Query } from '../..'; +import { LanguageConfig } from '../../query'; +import { getQueryService } from '../../services'; export interface QueryLanguageSelectorProps { query: Query; @@ -109,7 +109,7 @@ export const QueryLanguageSelector = (props: QueryLanguageSelectorProps) => { { iconType="arrowDown" > {selectedLanguage.label} - + } isOpen={isPopoverOpen} closePopover={() => setPopover(false)} diff --git a/src/plugins/data/public/ui/query_editor/query_editor.tsx b/src/plugins/data/public/ui/query_editor/query_editor.tsx index f68c601db18..739edd6173f 100644 --- a/src/plugins/data/public/ui/query_editor/query_editor.tsx +++ b/src/plugins/data/public/ui/query_editor/query_editor.tsx @@ -14,32 +14,31 @@ import { EuiText, PopoverAnchorPosition, } from '@elastic/eui'; -import { BehaviorSubject } from 'rxjs'; +import { monaco } from '@osd/monaco'; import classNames from 'classnames'; import { isEqual } from 'lodash'; import React, { Component, createRef, RefObject } from 'react'; -import { monaco } from '@osd/monaco'; import { IDataPluginServices, IFieldType, IIndexPattern, Query, - QuerySuggestion, - TimeRange, QueryControls, - RecentQueriesTable, QueryResult, QueryStatus, + QuerySuggestion, + RecentQueriesTable, + TimeRange, } from '../..'; import { OpenSearchDashboardsReactContextValue } from '../../../../opensearch_dashboards_react/public'; +import { MonacoCompatibleQuerySuggestion } from '../../autocomplete/providers/query_suggestion_provider'; import { fromUser, getQueryLog, PersistedLog, toUser } from '../../query'; +import { getIndexPatterns, getQueryService } from '../../services'; +import { DatasetSelector } from '../dataset_selector'; import { SuggestionsListSize } from '../typeahead/suggestions_component'; +import { DefaultInputProps } from './editors'; 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'; export interface QueryEditorProps { query: Query; diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx index 2e726eb0e96..70a15b87db0 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx +++ b/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx @@ -28,29 +28,28 @@ * under the License. */ -import React, { OptionHTMLAttributes, ReactNode, useState } from 'react'; -import { i18n } from '@osd/i18n'; import { + EuiButtonGroup, EuiCompressedFieldSearch, + EuiCompressedSwitch, + EuiFieldSearch, + EuiFilterGroup, EuiFlexGroup, EuiFlexItem, - EuiPopover, - EuiPopoverFooter, - EuiPopoverTitle, - EuiSelect, - EuiCompressedSwitch, - EuiSwitchEvent, EuiForm, EuiFormRow, - EuiButtonGroup, EuiOutsideClickDetector, EuiPanel, + EuiPopover, + EuiPopoverFooter, + EuiPopoverTitle, + EuiSelect, EuiSmallFilterButton, - EuiFilterGroup, - EuiFieldSearch, + EuiSwitchEvent, } from '@elastic/eui'; +import { i18n } from '@osd/i18n'; import { FormattedMessage } from '@osd/i18n/react'; -import { UI_SETTINGS } from 'src/plugins/data/common'; +import React, { OptionHTMLAttributes, ReactNode, useState } from 'react'; export const NUM_FILTERS = 3; @@ -257,6 +256,7 @@ export function DiscoverFieldSearch({ onChange={(event) => onChange('name', event.currentTarget.value)} placeholder={searchPlaceholder} value={value} + className="dscSideBar_searchInput" /> ); @@ -329,8 +329,8 @@ export function DiscoverFieldSearch({ if (isEnhancementsEnabledOverride) { return ( -
- {fieldSearch} +
+ {compressedFieldSearch} {fieldPopover}
); diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss index 201debc9553..aaba1c5a42a 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss +++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss @@ -1,3 +1,8 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + .deSidebar_panel { border-left: 0; From 334d7bf4cc64b6a7b72fad791c76b367783dcb90 Mon Sep 17 00:00:00 2001 From: Shenoy Pratik Date: Wed, 18 Sep 2024 09:17:58 -0700 Subject: [PATCH 2/5] revert query editor changes Signed-off-by: Shenoy Pratik --- .../public/ui/query_editor/query_editor.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/plugins/data/public/ui/query_editor/query_editor.tsx b/src/plugins/data/public/ui/query_editor/query_editor.tsx index 739edd6173f..f68c601db18 100644 --- a/src/plugins/data/public/ui/query_editor/query_editor.tsx +++ b/src/plugins/data/public/ui/query_editor/query_editor.tsx @@ -14,31 +14,32 @@ import { EuiText, PopoverAnchorPosition, } from '@elastic/eui'; -import { monaco } from '@osd/monaco'; +import { BehaviorSubject } from 'rxjs'; import classNames from 'classnames'; import { isEqual } from 'lodash'; import React, { Component, createRef, RefObject } from 'react'; +import { monaco } from '@osd/monaco'; import { IDataPluginServices, IFieldType, IIndexPattern, Query, + QuerySuggestion, + TimeRange, QueryControls, + RecentQueriesTable, QueryResult, QueryStatus, - QuerySuggestion, - RecentQueriesTable, - TimeRange, } from '../..'; import { OpenSearchDashboardsReactContextValue } from '../../../../opensearch_dashboards_react/public'; -import { MonacoCompatibleQuerySuggestion } from '../../autocomplete/providers/query_suggestion_provider'; import { fromUser, getQueryLog, PersistedLog, toUser } from '../../query'; -import { getIndexPatterns, getQueryService } from '../../services'; -import { DatasetSelector } from '../dataset_selector'; import { SuggestionsListSize } from '../typeahead/suggestions_component'; -import { DefaultInputProps } from './editors'; 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'; export interface QueryEditorProps { query: Query; From eb15d03320b07fc3d8d1d665483fa873c7150a7d Mon Sep 17 00:00:00 2001 From: "opensearch-changeset-bot[bot]" <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> Date: Wed, 18 Sep 2024 16:18:54 +0000 Subject: [PATCH 3/5] Changeset file for PR #8222 created/updated --- changelogs/fragments/8222.yml | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 changelogs/fragments/8222.yml diff --git a/changelogs/fragments/8222.yml b/changelogs/fragments/8222.yml new file mode 100644 index 00000000000..e617e598355 --- /dev/null +++ b/changelogs/fragments/8222.yml @@ -0,0 +1,2 @@ +fix: +- Update data explorer ui to use compressed components ([#8222](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8222)) \ No newline at end of file From 6c2521b022fb539f8e6064183c8db2048d2eba61 Mon Sep 17 00:00:00 2001 From: Shenoy Pratik Date: Wed, 18 Sep 2024 10:19:15 -0700 Subject: [PATCH 4/5] update overflow prop for query editor Signed-off-by: Shenoy Pratik --- .../public/ui/query_editor/editors/shared.tsx | 1 - .../public/ui/query_string_input/_query_bar.scss | 4 ++++ .../components/sidebar/discover_field_search.tsx | 15 --------------- 3 files changed, 4 insertions(+), 16 deletions(-) diff --git a/src/plugins/data/public/ui/query_editor/editors/shared.tsx b/src/plugins/data/public/ui/query_editor/editors/shared.tsx index 125b63e21dd..ab7ad44bbf7 100644 --- a/src/plugins/data/public/ui/query_editor/editors/shared.tsx +++ b/src/plugins/data/public/ui/query_editor/editors/shared.tsx @@ -72,7 +72,6 @@ export const SingleLineInput: React.FC = ({ onChange={onChange} editorDidMount={editorDidMount} options={{ - fixedOverflowWidgets: true, lineNumbers: 'off', // Disabled line numbers // lineHeight: 40, fontSize: 14, diff --git a/src/plugins/data/public/ui/query_string_input/_query_bar.scss b/src/plugins/data/public/ui/query_string_input/_query_bar.scss index f9849063f07..0e0ae47a22b 100644 --- a/src/plugins/data/public/ui/query_string_input/_query_bar.scss +++ b/src/plugins/data/public/ui/query_string_input/_query_bar.scss @@ -16,6 +16,10 @@ .euiToolTipAnchor { height: 100%; } + + &.euiFormControlLayout--group.euiFormControlLayout--compressed { + overflow: initial; + } } // Uses the append style, but no bordering diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx index 70a15b87db0..3469fd1d34d 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx +++ b/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx @@ -32,7 +32,6 @@ import { EuiButtonGroup, EuiCompressedFieldSearch, EuiCompressedSwitch, - EuiFieldSearch, EuiFilterGroup, EuiFlexGroup, EuiFlexItem, @@ -261,20 +260,6 @@ export function DiscoverFieldSearch({ ); - const fieldSearch = ( - {}} isDisabled={!isPopoverOpen}> - onChange('name', event.currentTarget.value)} - placeholder={searchPlaceholder} - value={value} - className="dscSideBar_searchInput" - /> - - ); - const fieldPopover = ( Date: Wed, 18 Sep 2024 13:19:59 -0700 Subject: [PATCH 5/5] update language selector snapshots Signed-off-by: Shenoy Pratik --- .../language_selector.test.tsx.snap | 166 ++++++++++-------- 1 file changed, 92 insertions(+), 74 deletions(-) diff --git a/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap b/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap index fd8aa75f734..a677567d113 100644 --- a/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap +++ b/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap @@ -492,7 +492,7 @@ exports[`LanguageSelector should select DQL if language is kuery 1`] = ` DQL - + } className="languageSelector" closePopover={[Function]} @@ -516,57 +516,66 @@ exports[`LanguageSelector should select DQL if language is kuery 1`] = `
- - - + + + +
@@ -1066,7 +1075,7 @@ exports[`LanguageSelector should select lucene if language is lucene 1`] = ` Lucene - + } className="languageSelector" closePopover={[Function]} @@ -1090,57 +1099,66 @@ exports[`LanguageSelector should select lucene if language is lucene 1`] = `
- - - + + + +