Skip to content

Commit

Permalink
Update Discover appearance (opensearch-project#8651)
Browse files Browse the repository at this point in the history
* Update Discover appearance

Signed-off-by: Miki <[email protected]>

* Changeset file for PR opensearch-project#8651 created/updated

---------

Signed-off-by: Miki <[email protected]>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

(cherry picked from commit 17103ba)
Signed-off-by: Miki <[email protected]>
  • Loading branch information
AMoo-Miki and opensearch-changeset-bot[bot] committed Oct 18, 2024
1 parent c05bdf6 commit c06ef0e
Show file tree
Hide file tree
Showing 27 changed files with 222 additions and 59 deletions.
2 changes: 2 additions & 0 deletions changelogs/fragments/8651.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
feat:
- Update the appearance of Discover ([#8651](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8651))
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
.context-nav-wrapper {
border: none !important;
border-top-right-radius: $euiSizeL;
border-bottom-right-radius: $euiSizeL;
background-color: $euiSideNavBackgroundColor;
overflow: hidden;
box-shadow: 1px 0 0 $euiBorderColor !important;

.nav-link-item {
padding: $euiSizeS;
Expand Down
10 changes: 9 additions & 1 deletion src/plugins/data/public/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,15 @@ import {
} from '../common';

import { FilterLabel } from './ui';
export { createEditor, DefaultInput, DQLBody, SingleLineInput } from './ui';

export {
createEditor,
DefaultInput,
DQLBody,
SingleLineInput,
DatasetSelector,
DatasetSelectorAppearance,
} from './ui';

import {
generateFilters,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,9 @@
&__advancedModal {
width: 1200px;
height: 800px;
max-height: calc(100vh - $euiSizeS);

// euiOverlayMask pushes the modal up due to having padding-bottom: 10vh
max-height: calc(90vh - $euiSizeL);

.euiModal__flex {
max-height: none;
Expand Down
51 changes: 47 additions & 4 deletions src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
EuiSelectable,
EuiSelectableOption,
EuiSmallButtonEmpty,
EuiSmallButton,
EuiToolTip,
} from '@elastic/eui';
import { FormattedMessage } from '@osd/i18n/react';
Expand All @@ -22,12 +23,41 @@ import { getQueryService } from '../../services';
import { IDataPluginServices } from '../../types';
import { AdvancedSelector } from './advanced_selector';

export enum DatasetSelectorAppearance {
Button = 'button',
None = 'none',
}

type EuiSmallButtonProps = React.ComponentProps<typeof EuiSmallButton>;
type EuiSmallButtonEmptyProps = React.ComponentProps<typeof EuiSmallButtonEmpty>;

interface DatasetSelectorProps {
selectedDataset?: Dataset;
setSelectedDataset: (dataset: Dataset) => void;
services: IDataPluginServices;
}

export interface DatasetSelectorUsingButtonProps {
appearance: DatasetSelectorAppearance.Button;
buttonProps?: EuiSmallButtonProps;
}

export interface DatasetSelectorUsingButtonEmptyProps {
appearance?: DatasetSelectorAppearance.None;
buttonProps?: EuiSmallButtonEmptyProps;
}

const RootComponent: React.FC<
(EuiSmallButtonEmptyProps | EuiSmallButtonProps) & { appearance?: DatasetSelectorAppearance }
> = (props) => {
const { appearance, ...rest } = props;
if (appearance === DatasetSelectorAppearance.Button) {
return <EuiSmallButton {...(rest as EuiSmallButtonProps)} />;
} else {
return <EuiSmallButtonEmpty {...(rest as EuiSmallButtonEmptyProps)} />;
}
};

/**
* This component provides a dropdown selector for datasets and an advanced selector modal.
* It fetches datasets once on mount to populate the selector options.
Expand All @@ -42,7 +72,10 @@ export const DatasetSelector = ({
selectedDataset,
setSelectedDataset,
services,
}: DatasetSelectorProps) => {
appearance,
buttonProps,
}: DatasetSelectorProps &
(DatasetSelectorUsingButtonProps | DatasetSelectorUsingButtonEmptyProps)) => {
const isMounted = useRef(false);
const [isOpen, setIsOpen] = useState(false);
const [indexPatterns, setIndexPatterns] = useState<Dataset[]>([]);
Expand Down Expand Up @@ -168,16 +201,26 @@ export const DatasetSelector = ({
return (
<EuiPopover
button={
<EuiToolTip content={`${selectedDataset?.title ?? 'Select data'}`}>
<EuiSmallButtonEmpty
<EuiToolTip
display="block"
content={`${
selectedDataset?.title ??
i18n.translate('data.dataSelector.defaultTitle', {
defaultMessage: 'Select data',
})
}`}
>
<RootComponent
appearance={appearance}
{...buttonProps}
className="datasetSelector__button"
iconType="arrowDown"
iconSide="right"
onClick={togglePopover}
>
<EuiIcon type={datasetIcon} className="datasetSelector__icon" />
{datasetTitle}
</EuiSmallButtonEmpty>
</RootComponent>
</EuiToolTip>
}
isOpen={isOpen}
Expand Down
16 changes: 13 additions & 3 deletions src/plugins/data/public/ui/dataset_selector/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,24 @@
import { useCallback, useState } from 'react';
import React from 'react';
import { Dataset, Query, TimeRange } from '../../../common';
import { DatasetSelector } from './dataset_selector';
import {
DatasetSelector,
DatasetSelectorUsingButtonEmptyProps,
DatasetSelectorUsingButtonProps,
DatasetSelectorAppearance,
} from './dataset_selector';
import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
import { IDataPluginServices } from '../../types';

interface ConnectedDatasetSelectorProps {
onSubmit: ((query: Query, dateRange?: TimeRange | undefined) => void) | undefined;
}

const ConnectedDatasetSelector = ({ onSubmit }: ConnectedDatasetSelectorProps) => {
const ConnectedDatasetSelector = ({
onSubmit,
...datasetSelectorProps
}: ConnectedDatasetSelectorProps &
(DatasetSelectorUsingButtonProps | DatasetSelectorUsingButtonEmptyProps)) => {
const { services } = useOpenSearchDashboards<IDataPluginServices>();
const queryString = services.data.query.queryString;
const [selectedDataset, setSelectedDataset] = useState<Dataset | undefined>(
Expand All @@ -36,11 +45,12 @@ const ConnectedDatasetSelector = ({ onSubmit }: ConnectedDatasetSelectorProps) =

return (
<DatasetSelector
{...datasetSelectorProps}
selectedDataset={selectedDataset}
setSelectedDataset={handleDatasetChange}
services={services}
/>
);
};

export { ConnectedDatasetSelector as DatasetSelector };
export { ConnectedDatasetSelector as DatasetSelector, DatasetSelectorAppearance };
Original file line number Diff line number Diff line change
Expand Up @@ -81,4 +81,8 @@
&--compressed {
margin-top: -$euiSizeS;
}

&__allFiltersPopover {
background-color: $euiFormInputGroupLabelBackground;
}
}
3 changes: 1 addition & 2 deletions src/plugins/data/public/ui/filter_bar/filter_options.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -407,7 +407,6 @@ const FilterOptionsUI = (props: Props) => {
return (
<EuiPopover
id="popoverForAllFilters"
className="globalFilterGroup__allFiltersPopover"
isOpen={isPopoverOpen}
closePopover={closePopover}
button={savedQueryPopoverButton}
Expand All @@ -425,7 +424,7 @@ const FilterOptionsUI = (props: Props) => {
return (
<EuiPopover
id="popoverForAllFilters"
className="globalFilterGroup__allFiltersPopover"
className={useNewHeader ? 'globalFilterGroup__allFiltersPopover' : undefined}
isOpen={isPopoverOpen}
closePopover={closePopover}
button={props.useSaveQueryMenu ? savedQueryPopoverButton : filterPopoverButton}
Expand Down
1 change: 1 addition & 0 deletions src/plugins/data/public/ui/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,3 +51,4 @@ export {
useQueryStringManager,
} from './search_bar';
export { SuggestionsComponent } from './typeahead';
export { DatasetSelector, DatasetSelectorAppearance } from './dataset_selector';
10 changes: 8 additions & 2 deletions src/plugins/data/public/ui/query_editor/_query_editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@
.osdQueryEditor__header {
display: flex;
align-items: center;
padding: 0 $euiSizeXS $euiSizeXS;
padding: 0 $euiSizeXS $euiSizeS;
}

.osdQueryEditor__topBar {
Expand Down Expand Up @@ -187,13 +187,19 @@

.osdQuerEditor__singleLine {
padding: calc($euiSizeXS + 1px);
background-color: $euiColorEmptyShade;
overflow: initial !important; // needed for suggestion window, otherwise will be hidden in child
min-width: 0;

.monaco-editor .view-overlays .current-line {
border: none;
}

&,
& .monaco-editor,
& .monaco-editor .inputarea.ime-input,
& .monaco-editor-background {
background-color: $euiFormBackgroundColor;
}
}

.suggest-widget {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,38 @@
.defaultEditor {
border: $euiBorderThin;
border-radius: $euiSizeXS;
margin: 0 $euiSizeXS $euiSizeXS;

&__footer {
margin-left: $euiSizeXS;
padding-left: $euiSizeXS;
background-color: $euiColorLightestShade;
}

.monaco-editor {
border-radius: $euiSizeXS $euiSizeXS 0 0;

.margin {
border-radius: $euiSizeXS 0 0 0;
background-color: $euiFormBackgroundColor;
padding: 0 $euiSizeXS;
}

.view-lines {
padding: 0 $euiSizeXS;
}

.monaco-scrollable-element {
border-radius: 0 $euiSizeXS 0 0;
}
}

.monaco-editor,
.monaco-editor-background,
.monaco-editor .inputarea.ime-input,
.monaco-editor .decorationsOverviewRuler {
background-color: $euiColorEmptyShade;
}
}

.defaultEditor__footerRow {
gap: $euiSizeM;
}
Original file line number Diff line number Diff line change
Expand Up @@ -43,14 +43,15 @@ export const DefaultInput: React.FC<DefaultInputProps> = ({
options={{
minimap: { enabled: false },
scrollBeyondLastLine: false,
fontSize: 14,
fontFamily: 'Roboto Mono',
fontSize: 12,
lineHeight: 20,
fontFamily: 'var(--font-code)',
lineNumbers: 'on',
folding: true,
wordWrap: 'on',
wrappingIndent: 'same',
lineDecorationsWidth: 0,
lineNumbersMinChars: 2,
lineNumbersMinChars: 1,
wordBasedSuggestions: false,
}}
suggestionProvider={{
Expand All @@ -70,7 +71,12 @@ export const DefaultInput: React.FC<DefaultInputProps> = ({
/>
<div className="defaultEditor__footer">
{footerItems && (
<EuiFlexGroup direction="row" alignItems="center">
<EuiFlexGroup
direction="row"
alignItems="center"
gutterSize="none"
className="defaultEditor__footerRow"
>
{footerItems.start?.map((item) => (
<EuiFlexItem grow={false} className="defaultEditor__footerItem">
{item}
Expand Down
4 changes: 4 additions & 0 deletions src/plugins/data/public/ui/query_string_input/_query_bar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -91,3 +91,7 @@
}
}
}

.osdQueryBar--hideEmpty:empty {
display: none;
}
Original file line number Diff line number Diff line change
Expand Up @@ -402,7 +402,7 @@ export default function QueryBarTopRow(props: QueryBarTopRowProps) {
>
{renderQueryInput()}
{renderSharingMetaFields()}
<EuiFlexItem grow={false}>
<EuiFlexItem grow={false} className="osdQueryBar--hideEmpty">
{shouldUseDatePickerRef
? createPortal(renderUpdateButton(), props.datePickerRef!.current!)
: renderUpdateButton()}
Expand Down
10 changes: 10 additions & 0 deletions src/plugins/data_explorer/public/components/app_container.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ $osdHeaderOffset: $euiHeaderHeightCompensation;

.deLayout {
height: calc(100vh - #{$osdHeaderOffset * 1});
padding: $euiSizeS;

&.dsc--next {
height: calc(100vh - #{$osdHeaderOffset * 2});
Expand All @@ -19,6 +20,15 @@ $osdHeaderOffset: $euiHeaderHeightCompensation;
&__canvas {
height: 100%;
}

// stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
& > .euiResizableContainer {
gap: $euiSizeXS;
}

.globalQueryBar {
padding: 0;
}
}

.headerIsExpanded .deLayout {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,6 @@
&_panel {
border-top: 0;
}

&_dataSource {
border-bottom: $euiBorderThin !important;
}
}

.dataPanelTypeFilterPopover {
Expand Down
Loading

0 comments on commit c06ef0e

Please sign in to comment.