Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Discover appearance #8651

Merged
merged 2 commits into from
Oct 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ty!

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, DatasetSelector } 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
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
EuiSelectable,
EuiSelectableOption,
EuiSmallButtonEmpty,
EuiSmallButton,
EuiToolTip,
} from '@elastic/eui';
import { FormattedMessage } from '@osd/i18n/react';
Expand All @@ -22,12 +23,41 @@
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)} />;

Check warning on line 55 in src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx

View check run for this annotation

Codecov / codecov/patch

src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx#L55

Added line #L55 was not covered by tests
} 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 @@
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 @@ -177,15 +210,17 @@
})
}`}
>
<EuiSmallButtonEmpty
<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, useEffect } 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 Down Expand Up @@ -46,11 +55,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
2 changes: 1 addition & 1 deletion src/plugins/data/public/ui/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,4 +51,4 @@ export {
useQueryStringManager,
} from './search_bar';
export { SuggestionsComponent } from './typeahead';
export { DatasetSelector } from './dataset_selector';
export { DatasetSelector, DatasetSelectorAppearance } from './dataset_selector';
12 changes: 8 additions & 4 deletions src/plugins/data/public/ui/query_editor/_query_editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -137,14 +137,12 @@
.osdQueryEditor__header {
display: flex;
align-items: center;
padding: 0 $euiSizeXS $euiSizeXS;
padding: 0 $euiSizeXS $euiSizeS;
}

.osdQueryEditor__topBar {
display: flex;
align-items: center;
padding: $euiSizeS;
gap: $euiSizeXS;

> * {
flex: 0 1 auto;
Expand Down Expand Up @@ -186,13 +184,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',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ty

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
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
18 changes: 14 additions & 4 deletions src/plugins/data_explorer/public/components/sidebar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,11 @@ import {
DataSourceSelectable,
UI_SETTINGS,
} from '../../../../data/public';
import { DataSourceOption, DatasetSelector } from '../../../../data/public/';
import {
DataSourceOption,
DatasetSelector,
DatasetSelectorAppearance,
} from '../../../../data/public/';
import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
import { DataExplorerServices } from '../../types';
import { setIndexPattern, useTypedDispatch, useTypedSelector } from '../../utils/state_management';
Expand Down Expand Up @@ -129,8 +133,7 @@ export const Sidebar: FC = ({ children }) => {
<EuiSplitPanel.Outer
className="eui-yScroll deSidebar_panel"
hasBorder={true}
borderRadius="none"
color="transparent"
borderRadius="l"
>
<EuiSplitPanel.Inner
paddingSize="s"
Expand All @@ -139,7 +142,14 @@ export const Sidebar: FC = ({ children }) => {
className="deSidebar_dataSource"
>
{isEnhancementEnabled ? (
<DatasetSelector onSubmit={handleDatasetSubmit} />
<DatasetSelector
onSubmit={handleDatasetSubmit}
appearance={DatasetSelectorAppearance.Button}
buttonProps={{
color: 'text',
fullWidth: true,
}}
/>
) : (
<DataSourceSelectable
dataSources={activeDataSources}
Expand Down
Loading
Loading