From 4ea3746ee1a4a21b0b9a70c29cbdc123651a1cf7 Mon Sep 17 00:00:00 2001 From: "opensearch-trigger-bot[bot]" <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com> Date: Wed, 28 Aug 2024 15:19:22 -0700 Subject: [PATCH] [Discover 2.0] UI Fixes (#7885) (#7893) * [Discover 2.0] UI Fixes * minor fixes * fix test failures * fix test * fix bootstrap --------- (cherry picked from commit eefbdfd26f45a247cd85f3c4bc39d4ca1ea1a190) Signed-off-by: Ashwin P Chandran Signed-off-by: github-actions[bot] Co-authored-by: github-actions[bot] --- docs/openapi/README.md | 7 +- .../public/overlays/modal/modal_service.tsx | 4 +- .../_dataset_configurator.scss | 3 + .../dataset_selector/_dataset_selector.scss | 13 ++++ .../public/ui/dataset_selector/_index.scss | 1 + .../ui/dataset_selector/configurator.tsx | 2 +- .../ui/dataset_selector/dataset_explorer.tsx | 3 +- .../ui/dataset_selector/dataset_selector.tsx | 71 +++++++++++-------- .../public/ui/query_editor/_query_editor.scss | 1 - .../default_editor/_default_editor.scss | 25 ++----- .../editors/default_editor/index.tsx | 19 ++--- .../public/ui/query_editor/editors/shared.tsx | 2 +- 12 files changed, 86 insertions(+), 65 deletions(-) create mode 100644 src/plugins/data/public/ui/dataset_selector/_dataset_configurator.scss diff --git a/docs/openapi/README.md b/docs/openapi/README.md index a19b2a9a830a..92779f2220b1 100644 --- a/docs/openapi/README.md +++ b/docs/openapi/README.md @@ -6,4 +6,9 @@ The OpenAPI (https://swagger.io/specification/) Specification defines a standard When generated, OpenAPI definition can then be used by documentation generation tools to display the API such as swagger UI, code generation tools to generate servers and clients in various programming languages, testing tools, and many other use cases. ### Starting Up the Swagger UI Locally -To start up the swagger UI locally for development or validation purposes, you can simply start a server in the directory where the index.html file is located. `npx serve` is a simple way to start a server. \ No newline at end of file +To start up the swagger UI locally for development or validation purposes, you can simply start a server in the directory where the index.html file is located. `npx serve` is a simple way to start a server. + +### API Docs + +- [Saved Objects](https://opensearch-project.github.io/OpenSearch-Dashboards/docs/openapi/saved_objects/) +- [Index Patterns](https://opensearch-project.github.io/OpenSearch-Dashboards/docs/openapi/index_patterns/)https://github.com/ashwin-pc/OpenSearch-Dashboards/blob/26b8c38cf4b9f6cf9a809dad370d26cf37b72571/docs/openapi/README.md \ No newline at end of file diff --git a/src/core/public/overlays/modal/modal_service.tsx b/src/core/public/overlays/modal/modal_service.tsx index a1f7a7e59cdb..e14f09eac2db 100644 --- a/src/core/public/overlays/modal/modal_service.tsx +++ b/src/core/public/overlays/modal/modal_service.tsx @@ -31,7 +31,7 @@ /* eslint-disable max-classes-per-file */ import { i18n as t } from '@osd/i18n'; -import { EuiModal, EuiConfirmModal, EuiConfirmModalProps } from '@elastic/eui'; +import { EuiModal, EuiConfirmModal, EuiConfirmModalProps, EuiModalProps } from '@elastic/eui'; import React from 'react'; import { render, unmountComponentAtNode } from 'react-dom'; import { Subject } from 'rxjs'; @@ -111,7 +111,7 @@ export interface OverlayModalStart { /** * @public */ -export interface OverlayModalOpenOptions { +export interface OverlayModalOpenOptions extends Pick { className?: string; closeButtonAriaLabel?: string; 'data-test-subj'?: string; diff --git a/src/plugins/data/public/ui/dataset_selector/_dataset_configurator.scss b/src/plugins/data/public/ui/dataset_selector/_dataset_configurator.scss new file mode 100644 index 000000000000..44e89b19ffb3 --- /dev/null +++ b/src/plugins/data/public/ui/dataset_selector/_dataset_configurator.scss @@ -0,0 +1,3 @@ +.datasetConfigurator { + height: 600px; +} diff --git a/src/plugins/data/public/ui/dataset_selector/_dataset_selector.scss b/src/plugins/data/public/ui/dataset_selector/_dataset_selector.scss index 9ec6ca531cf8..ea780f1c22e8 100644 --- a/src/plugins/data/public/ui/dataset_selector/_dataset_selector.scss +++ b/src/plugins/data/public/ui/dataset_selector/_dataset_selector.scss @@ -11,4 +11,17 @@ width: 365px; padding: $euiSizeXS; } + + &__footer { + padding: $euiSizeXS; + } + + &__advancedModal { + width: 1200px; + } + + &__checkbox { + flex: 1; + align-self: center; + } } diff --git a/src/plugins/data/public/ui/dataset_selector/_index.scss b/src/plugins/data/public/ui/dataset_selector/_index.scss index b1d4dbe34c68..a16a39a501c7 100644 --- a/src/plugins/data/public/ui/dataset_selector/_index.scss +++ b/src/plugins/data/public/ui/dataset_selector/_index.scss @@ -1,2 +1,3 @@ @import "./dataset_explorer"; @import "./dataset_selector"; +@import "./dataset_configurator"; diff --git a/src/plugins/data/public/ui/dataset_selector/configurator.tsx b/src/plugins/data/public/ui/dataset_selector/configurator.tsx index 32e48691aa87..e59683dffa28 100644 --- a/src/plugins/data/public/ui/dataset_selector/configurator.tsx +++ b/src/plugins/data/public/ui/dataset_selector/configurator.tsx @@ -79,7 +79,7 @@ export const Configurator = ({ - + {(list, search) => ( @@ -182,7 +183,7 @@ const LoadingEmptyColumn = ({ isLoading }: { isLoading: boolean }) =>

...

 - + {(list) => <>{list}} 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 ed0bd76fdaf1..0a251a8dfe3e 100644 --- a/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx +++ b/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx @@ -3,12 +3,13 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useEffect, useMemo, useState, useCallback } from 'react'; +import React, { useEffect, useMemo, useState, useCallback, useRef } from 'react'; import { + EuiButton, EuiButtonEmpty, EuiIcon, EuiPopover, - EuiPopoverTitle, + EuiPopoverFooter, EuiSelectable, EuiSelectableOption, EuiToolTip, @@ -35,6 +36,14 @@ export const DatasetSelector = ({ const [datasets, setDatasets] = useState([]); const { overlays, savedObjects } = services; + const isMounted = useRef(true); + + useEffect(() => { + return () => { + isMounted.current = false; + }; + }, []); + const datasetService = getQueryService().queryString.getDatasetService(); const datasetIcon = @@ -46,6 +55,8 @@ export const DatasetSelector = ({ const fetchedIndexPatternDataStructures = await typeConfig.fetch(savedObjects.client, []); + if (!isMounted.current) return; + const fetchedDatasets = fetchedIndexPatternDataStructures.children?.map((pattern) => typeConfig.toDataset([pattern]) @@ -139,13 +150,33 @@ export const DatasetSelector = ({ display="block" panelPaddingSize="none" > - - + {(list, search) => ( + <> + {search} + {list} + + )} + + + { closePopover(); @@ -161,7 +192,11 @@ export const DatasetSelector = ({ }} onCancel={() => overlay?.close()} /> - ) + ), + { + maxWidth: false, + className: 'datasetSelector__advancedModal', + } ); }} > @@ -169,28 +204,8 @@ export const DatasetSelector = ({ id="data.datasetSelector.advancedButton" defaultMessage="View all available data" /> - - - - {(list, search) => ( - <> - {search} - {list} - - )} - + + ); }; 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 626cc4a3d2b4..7edfebfed938 100644 --- a/src/plugins/data/public/ui/query_editor/_query_editor.scss +++ b/src/plugins/data/public/ui/query_editor/_query_editor.scss @@ -193,7 +193,6 @@ .osdQuerEditor__singleLine { padding: $euiSizeS; background-color: $euiColorEmptyShade; - border: $euiBorderThin; .monaco-editor .view-overlays .current-line { border: none; diff --git a/src/plugins/data/public/ui/query_editor/editors/default_editor/_default_editor.scss b/src/plugins/data/public/ui/query_editor/editors/default_editor/_default_editor.scss index a5897c0b6fb9..ccebd35c4ead 100644 --- a/src/plugins/data/public/ui/query_editor/editors/default_editor/_default_editor.scss +++ b/src/plugins/data/public/ui/query_editor/editors/default_editor/_default_editor.scss @@ -1,26 +1,9 @@ -.defaultEditor__footer { - display: flex; - align-items: center; - flex-wrap: nowrap; - background-color: $euiColorLightestShade; - gap: $euiSizeS; - margin-top: 1px; - margin-left: $euiSizeS; - margin-right: $euiSizeS; - - .defaultEditor__footerItem { - padding: 0 $euiSizeXS; - display: flex; - align-items: center; - } - - .defaultEditor__footerItem__end { - justify-content: flex-end; - } -} - .defaultEditor { border: $euiBorderThin; border-radius: $euiSizeXS; margin: 0 $euiSizeXS $euiSizeXS; + + &__footer { + margin-left: $euiSizeXS; + } } diff --git a/src/plugins/data/public/ui/query_editor/editors/default_editor/index.tsx b/src/plugins/data/public/ui/query_editor/editors/default_editor/index.tsx index 7d52dd55607e..b7bb11c18a8d 100644 --- a/src/plugins/data/public/ui/query_editor/editors/default_editor/index.tsx +++ b/src/plugins/data/public/ui/query_editor/editors/default_editor/index.tsx @@ -66,22 +66,23 @@ export const DefaultInput: React.FC = ({ ], }} /> - {footerItems && ( - - +
+ {footerItems && ( + {footerItems.start?.map((item) => ( - + {item} ))} - - + {footerItems.end?.map((item) => ( - {item} + + {item} + ))} - - )} + )} +
); }; 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 ad9af1e87e19..1da3b2c880c3 100644 --- a/src/plugins/data/public/ui/query_editor/editors/shared.tsx +++ b/src/plugins/data/public/ui/query_editor/editors/shared.tsx @@ -67,7 +67,7 @@ export const SingleLineInput: React.FC = ({ provideCompletionItems, prepend, }) => ( -
+
{prepend}