Skip to content

Commit

Permalink
[Discover 2.0] UI Fixes (opensearch-project#7885) (opensearch-project…
Browse files Browse the repository at this point in the history
…#7893)

* [Discover 2.0] UI Fixes



* minor fixes



* fix test failures



* fix test



* fix bootstrap



---------


(cherry picked from commit eefbdfd)

Signed-off-by: Ashwin P Chandran <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
  • Loading branch information
1 parent e8683ca commit 4ea3746
Show file tree
Hide file tree
Showing 12 changed files with 86 additions and 65 deletions.
7 changes: 6 additions & 1 deletion docs/openapi/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
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
4 changes: 2 additions & 2 deletions src/core/public/overlays/modal/modal_service.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -111,7 +111,7 @@ export interface OverlayModalStart {
/**
* @public
*/
export interface OverlayModalOpenOptions {
export interface OverlayModalOpenOptions extends Pick<EuiModalProps, 'maxWidth'> {
className?: string;
closeButtonAriaLabel?: string;
'data-test-subj'?: string;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.datasetConfigurator {
height: 600px;
}
13 changes: 13 additions & 0 deletions src/plugins/data/public/ui/dataset_selector/_dataset_selector.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,17 @@
width: 365px;
padding: $euiSizeXS;
}

&__footer {
padding: $euiSizeXS;
}

&__advancedModal {
width: 1200px;
}

&__checkbox {
flex: 1;
align-self: center;
}
}
1 change: 1 addition & 0 deletions src/plugins/data/public/ui/dataset_selector/_index.scss
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
@import "./dataset_explorer";
@import "./dataset_selector";
@import "./dataset_configurator";
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export const Configurator = ({
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiForm>
<EuiForm className="datasetConfigurator">
<EuiFormRow
label={i18n.translate(
'data.explorer.datasetSelector.advancedSelector.configurator.datasetLabel',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,7 @@ export const DatasetExplorer = ({
},
searchable: true,
})}
height="full"
className="datasetExplorer__selectable"
>
{(list, search) => (
Expand Down Expand Up @@ -182,7 +183,7 @@ const LoadingEmptyColumn = ({ isLoading }: { isLoading: boolean }) =>
<EuiTitle size="xxs" className="datasetExplorer__columnTitle">
<h3>...</h3>
</EuiTitle>
<EuiSelectable options={[]} singleSelection className="datasetSelector__selectable" isLoading>
<EuiSelectable options={[]} singleSelection className="datasetExplorer__selectable" isLoading>
{(list) => <>{list}</>}
</EuiSelectable>
</div>
Expand Down
71 changes: 43 additions & 28 deletions src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -35,6 +36,14 @@ export const DatasetSelector = ({
const [datasets, setDatasets] = useState<Dataset[]>([]);
const { overlays, savedObjects } = services;

const isMounted = useRef(true);

useEffect(() => {
return () => {
isMounted.current = false;
};
}, []);

const datasetService = getQueryService().queryString.getDatasetService();

const datasetIcon =
Expand All @@ -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])
Expand Down Expand Up @@ -139,13 +150,33 @@ export const DatasetSelector = ({
display="block"
panelPaddingSize="none"
>
<EuiPopoverTitle paddingSize="s">
<EuiButtonEmpty
<EuiSelectable
className="datasetSelector__selectable"
options={options}
singleSelection="always"
searchable={true}
onChange={handleOptionChange}
listProps={{
showIcons: false,
}}
searchProps={{
compressed: true,
}}
>
{(list, search) => (
<>
{search}
{list}
</>
)}
</EuiSelectable>
<EuiPopoverFooter paddingSize="none" className="datasetSelector__footer">
<EuiButton
className="datasetSelector__advancedButton"
iconType="gear"
iconSide="right"
iconSize="s"
size="xs"
size="s"
isSelected={false}
onClick={() => {
closePopover();
Expand All @@ -161,36 +192,20 @@ export const DatasetSelector = ({
}}
onCancel={() => overlay?.close()}
/>
)
),
{
maxWidth: false,
className: 'datasetSelector__advancedModal',
}
);
}}
>
<FormattedMessage
id="data.datasetSelector.advancedButton"
defaultMessage="View all available data"
/>
</EuiButtonEmpty>
</EuiPopoverTitle>
<EuiSelectable
className="datasetSelector__selectable"
options={options}
singleSelection="always"
searchable={true}
onChange={handleOptionChange}
listProps={{
showIcons: false,
}}
searchProps={{
compressed: true,
}}
>
{(list, search) => (
<>
{search}
{list}
</>
)}
</EuiSelectable>
</EuiButton>
</EuiPopoverFooter>
</EuiPopover>
);
};
1 change: 0 additions & 1 deletion src/plugins/data/public/ui/query_editor/_query_editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,6 @@
.osdQuerEditor__singleLine {
padding: $euiSizeS;
background-color: $euiColorEmptyShade;
border: $euiBorderThin;

.monaco-editor .view-overlays .current-line {
border: none;
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -66,22 +66,23 @@ export const DefaultInput: React.FC<DefaultInputProps> = ({
],
}}
/>
{footerItems && (
<EuiFlexGroup direction="row" className="defaultEditor__footer">
<EuiFlexGroup direction="row">
<div className="defaultEditor__footer">
{footerItems && (
<EuiFlexGroup direction="row" alignItems="center">
{footerItems.start?.map((item) => (
<EuiFlexItem grow={false} color="red" className="defaultEditor__footerItem">
<EuiFlexItem grow={false} className="defaultEditor__footerItem">
{item}
</EuiFlexItem>
))}
</EuiFlexGroup>
<EuiFlexGroup direction="row" className="defaultEditor__footerItem__end">
<EuiFlexItem grow />
{footerItems.end?.map((item) => (
<EuiFlexItem grow={false}>{item}</EuiFlexItem>
<EuiFlexItem grow={false} className="defaultEditor__footerItem">
{item}
</EuiFlexItem>
))}
</EuiFlexGroup>
</EuiFlexGroup>
)}
)}
</div>
</div>
);
};
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/data/public/ui/query_editor/editors/shared.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export const SingleLineInput: React.FC<SingleLineInputProps> = ({
provideCompletionItems,
prepend,
}) => (
<div className="euiFormControlLayout euiFormControlLayout--group euiFormControlLayout--compressed osdQueryBar__wrap">
<div className="euiFormControlLayout euiFormControlLayout--group osdQueryBar__wrap">
{prepend}
<div className="osdQuerEditor__singleLine euiFormControlLayout__childrenWrapper">
<CodeEditor
Expand Down

0 comments on commit 4ea3746

Please sign in to comment.