From b829e148632f762c40e5883372c713421d4b5d6b Mon Sep 17 00:00:00 2001 From: Ashwin P Chandran Date: Wed, 28 Aug 2024 10:35:09 +0000 Subject: [PATCH 1/5] [Discover 2.0] UI Fixes Signed-off-by: Ashwin P Chandran --- src/core/public/overlays/modal/index.ts | 2 +- .../public/overlays/modal/modal_service.tsx | 8 +-- .../dataset_selector/_dataset_selector.scss | 13 ++++ .../ui/dataset_selector/dataset_explorer.tsx | 3 +- .../ui/dataset_selector/dataset_selector.tsx | 65 +++++++++++-------- .../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 +- 9 files changed, 71 insertions(+), 67 deletions(-) diff --git a/src/core/public/overlays/modal/index.ts b/src/core/public/overlays/modal/index.ts index e4d23ede8dff..4702ce2a4d99 100644 --- a/src/core/public/overlays/modal/index.ts +++ b/src/core/public/overlays/modal/index.ts @@ -28,4 +28,4 @@ * under the License. */ -export { ModalService, OverlayModalStart, OverlayModalOpenOptions } from './modal_service'; +export { ModalService, OverlayModalStart } from './modal_service'; diff --git a/src/core/public/overlays/modal/modal_service.tsx b/src/core/public/overlays/modal/modal_service.tsx index a1f7a7e59cdb..3dbcb766485f 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,11 +111,7 @@ export interface OverlayModalStart { /** * @public */ -export interface OverlayModalOpenOptions { - className?: string; - closeButtonAriaLabel?: string; - 'data-test-subj'?: string; -} +export type OverlayModalOpenOptions = Omit; interface StartDeps { i18n: I18nStart; 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/dataset_explorer.tsx b/src/plugins/data/public/ui/dataset_selector/dataset_explorer.tsx index dd35ce8065b2..0ad36dc2d009 100644 --- a/src/plugins/data/public/ui/dataset_selector/dataset_explorer.tsx +++ b/src/plugins/data/public/ui/dataset_selector/dataset_explorer.tsx @@ -133,6 +133,7 @@ export const DatasetExplorer = ({ }, searchable: true, })} + height="full" className="datasetExplorer__selectable" > {(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..c56f208b539f 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(); @@ -169,28 +200,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}
Date: Wed, 28 Aug 2024 11:00:23 +0000 Subject: [PATCH 2/5] minor fixes Signed-off-by: Ashwin P Chandran --- docs/openapi/README.md | 7 ++++++- .../public/ui/dataset_selector/_dataset_configurator.scss | 3 +++ src/plugins/data/public/ui/dataset_selector/_index.scss | 1 + .../data/public/ui/dataset_selector/configurator.tsx | 2 +- .../data/public/ui/dataset_selector/dataset_selector.tsx | 6 +++++- 5 files changed, 16 insertions(+), 3 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/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/_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 = ({ - + overlay?.close()} /> - ) + ), + { + maxWidth: false, + className: 'datasetSelector__advancedModal', + } ); }} > From bb5360e9bfb16176e483cfa0cd5ac25271d46b9f Mon Sep 17 00:00:00 2001 From: Ashwin P Chandran Date: Wed, 28 Aug 2024 17:29:24 +0000 Subject: [PATCH 3/5] fix test failures Signed-off-by: Ashwin P Chandran --- src/core/public/overlays/modal/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/public/overlays/modal/index.ts b/src/core/public/overlays/modal/index.ts index 4702ce2a4d99..e4d23ede8dff 100644 --- a/src/core/public/overlays/modal/index.ts +++ b/src/core/public/overlays/modal/index.ts @@ -28,4 +28,4 @@ * under the License. */ -export { ModalService, OverlayModalStart } from './modal_service'; +export { ModalService, OverlayModalStart, OverlayModalOpenOptions } from './modal_service'; From 6768169f4130645b0e9c964db26af19c5529f3e8 Mon Sep 17 00:00:00 2001 From: Ashwin P Chandran Date: Wed, 28 Aug 2024 18:02:27 +0000 Subject: [PATCH 4/5] fix test Signed-off-by: Ashwin P Chandran --- src/core/public/overlays/modal/modal_service.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/core/public/overlays/modal/modal_service.tsx b/src/core/public/overlays/modal/modal_service.tsx index 3dbcb766485f..2587197ff0f2 100644 --- a/src/core/public/overlays/modal/modal_service.tsx +++ b/src/core/public/overlays/modal/modal_service.tsx @@ -111,7 +111,9 @@ export interface OverlayModalStart { /** * @public */ -export type OverlayModalOpenOptions = Omit; +export interface OverlayModalOpenOptions extends Omit { + 'data-test-subj'?: string; +} interface StartDeps { i18n: I18nStart; From 022083c4d69998db4e168c1368344a4759174856 Mon Sep 17 00:00:00 2001 From: Ashwin P Chandran Date: Wed, 28 Aug 2024 18:05:26 +0000 Subject: [PATCH 5/5] fix bootstrap Signed-off-by: Ashwin P Chandran --- src/core/public/overlays/modal/modal_service.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/core/public/overlays/modal/modal_service.tsx b/src/core/public/overlays/modal/modal_service.tsx index 2587197ff0f2..e14f09eac2db 100644 --- a/src/core/public/overlays/modal/modal_service.tsx +++ b/src/core/public/overlays/modal/modal_service.tsx @@ -111,7 +111,9 @@ export interface OverlayModalStart { /** * @public */ -export interface OverlayModalOpenOptions extends Omit { +export interface OverlayModalOpenOptions extends Pick { + className?: string; + closeButtonAriaLabel?: string; 'data-test-subj'?: string; }