Skip to content

Commit

Permalink
[Discover Next] Fixes Discover styles (#7546)
Browse files Browse the repository at this point in the history
* fixes the query bar UI

Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com>

* incorporates Abby's page styling

Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com>

* fixes tests

Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com>

* Changeset file for PR #7546 created/updated

---------

Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
  • Loading branch information
ashwin-pc and opensearch-changeset-bot[bot] committed Jul 29, 2024
1 parent 3880036 commit 2d8c743
Show file tree
Hide file tree
Showing 34 changed files with 1,017 additions and 412 deletions.
2 changes: 2 additions & 0 deletions changelogs/fragments/7546.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
fix:
- Fixes Discover next styling ([#7546](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7546))
4 changes: 3 additions & 1 deletion packages/osd-stylelint-config/config/global_selectors.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@
"packages/osd-ui-framework/src/components/button/button_group/_button_group.scss",
"src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.scss",
"src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss",
"src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss"
"src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss",
"src/plugins/data/public/ui/query_string_input/_query_bar.scss",
"src/plugins/data/public/ui/query_editor/_query_editor.scss"
]
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,14 @@
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/
.datasetNavigator {
min-width: 350px;
border-bottom: $euiBorderThin !important;

.dataSetNavigator {
padding: $euiSizeXS;
color: $euiColorPrimaryText;

&__icon {
margin-right: 4px;
}
}

.dataSetNavigatorFormWrapper {
Expand Down
36 changes: 22 additions & 14 deletions src/plugins/data/public/ui/dataset_navigator/dataset_navigator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,12 @@ import {
EuiContextMenu,
EuiForm,
EuiFormRow,
EuiIcon,
EuiLoadingSpinner,
EuiPanel,
EuiPopover,
EuiSelect,
EuiToolTip,
} from '@elastic/eui';
import { HttpStart, SavedObjectsClientContract } from 'opensearch-dashboards/public';
import _ from 'lodash';
Expand Down Expand Up @@ -568,23 +570,29 @@ export const DataSetNavigator = (props: DataSetNavigatorProps) => {
content: <div>{isCatalogCacheFetching(databasesLoadStatus) && createLoadingSpinner()}</div>,
});

const datasetTitle =
selectedDataSetState &&
selectedDataSetState?.dataSourceRef &&
selectedDataSetState?.dataSourceRef.name
? `${selectedDataSetState.dataSourceRef?.name}::${selectedDataSetState?.title}`
: selectedDataSetState?.title;

return (
<EuiPopover
button={
<EuiButtonEmpty
className="dataExplorerDSSelect"
color="text"
iconType="arrowDown"
iconSide="right"
flush="left"
onClick={onClick}
>
{selectedDataSetState &&
selectedDataSetState?.dataSourceRef &&
selectedDataSetState?.dataSourceRef.name
? `${selectedDataSetState.dataSourceRef?.name}::${selectedDataSetState?.title}`
: selectedDataSetState?.title}
</EuiButtonEmpty>
<EuiToolTip content={datasetTitle}>
<EuiButtonEmpty
className="dataSetNavigator"
color="text"
iconType="arrowDown"
iconSide="right"
flush="left"
onClick={onClick}
>
<EuiIcon type="database" className="dataSetNavigator__icon" />
{datasetTitle}
</EuiButtonEmpty>
</EuiToolTip>
}
isOpen={navigatorState.isOpen}
closePopover={closePopover}
Expand Down
12 changes: 0 additions & 12 deletions src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,6 @@
padding-bottom: $euiSizeS;
}

.globalQueryEditor {
padding: 0 $euiSizeXS $euiSizeXS $euiSizeXS;
}

.globalQueryEditor:first-child {
padding-top: $euiSizeXS;
}

.globalQueryEditor:not(:empty) {
padding-bottom: $euiSizeXS;
}

.globalFilterGroup__filterBar {
margin-top: $euiSizeXS;
}
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions src/plugins/data/public/ui/query_editor/_index.scss
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
@import "./editors/default_editor/default_editor";
@import "./language_selector";
@import "./query_editor";
61 changes: 60 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 @@ -9,7 +9,7 @@

.osdQueryEditor__editorAndSelectorWrapper {
z-index: $euiZContentMenu;
max-width: 1000px;
max-width: 1200px;
}

.osdQueryEditorHeader {
Expand Down Expand Up @@ -135,3 +135,62 @@
}
}
}

// ------------

.osdQueryEditor {
display: flex;
flex-direction: column;
margin-bottom: -3px; // TODO: Hack to handle the renderSharingMetaFields adding a new empty div to the UI

&.expanded.emptyExpanded {
.osdQueryEditor__datasetPicker {
width: auto;
}
}
}

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

.osdQueryEditor__collapseBtn {
padding-right: $euiSizeXS;
border-right: $euiBorderThin;
}

.osdQueryEditor__datasetPicker {
width: 155px;
padding-left: 4px;

// To prevent overflow due to Oui styles
.euiToolTipAnchor {
display: block;
}
}

.osdQueryEditor__input {
flex-grow: 1;
}

#savedQueryPopover {
padding-left: $euiSizeXS;
border-left: $euiBorderThin;
}
}

// TODO: improve how this is styled. Styling just for the DQL editor.
.osdQueryEditor__body .globalFilterGroup__wrapper {
margin-top: -$euiSizeS;
}

.osdQuerEditor__singleLine {
padding: $euiSizeS;
background-color: $euiColorEmptyShade;
border: $euiBorderThin;

.monaco-editor .view-overlays .current-line {
border: none;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
.defaultEditor__footer {
display: flex;
flex-wrap: nowrap;
background-color: $euiColorLightestShade;
padding: $euiSizeXS;
gap: $euiSizeS;

.defaultEditor__footerSpacer {
flex-grow: 1;
}

.defaultEditor__footerItem {
padding: 0 $euiSizeXS;
}
}

.defaultEditor {
border: $euiBorderThin;
border-radius: $euiSizeXS;
margin: 0 $euiSizeXS $euiSizeXS;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import React from 'react';
import { EuiText, EuiTextColorProps } from '@elastic/eui';
// import { monaco } from '@osd/monaco';
import { CodeEditor } from '../../../../../../opensearch_dashboards_react/public';
import { createEditor, SingleLineInput } from '../shared';

interface FooterItem {
text: string;
color?: EuiTextColorProps['color'];
}

interface DefaultInputProps extends React.JSX.IntrinsicAttributes {
languageId: string;
value: string;
onChange: (value: string) => void;
editorDidMount: (editor: any) => void;
footerItems?: {
start?: Array<FooterItem | string>;
end?: Array<FooterItem | string>;
};
headerRef?: React.RefObject<HTMLDivElement>;
// provideCompletionItems: monaco.languages.CompletionItemProvider['provideCompletionItems'];
}

const DefaultInput: React.FC<DefaultInputProps> = ({
languageId,
value,
onChange,
footerItems,
editorDidMount,
headerRef,
// provideCompletionItems,
}) => {
return (
<div className="defaultEditor">
<div ref={headerRef} className="defaultEditor__header" />
<CodeEditor
height={200}
languageId={languageId}
value={value}
onChange={onChange}
editorDidMount={editorDidMount}
options={{
minimap: { enabled: false },
scrollBeyondLastLine: false,
fontSize: 14,
fontFamily: 'Roboto Mono',
lineNumbers: 'on',
folding: true,
wordWrap: 'on',
wrappingIndent: 'same',
lineDecorationsWidth: 0,
lineNumbersMinChars: 2,
}}
// suggestionProvider={{
// provideCompletionItems,
// }}
// languageConfiguration={{
// language: ,
// autoClosingPairs: [
// { open: '(', close: ')' },
// { open: '[', close: ']' },
// { open: '{', close: '}' },
// { open: '"', close: '"' },
// { open: "'", close: "'" },
// ],
// }}
/>
{footerItems && (
<div className="defaultEditor__footer">
{footerItems.start?.map((item, index) => (
<FooterItem key={index} item={item} />
))}
<div className="defaultEditor__footerSpacer" />
{footerItems.end?.map((item, index) => (
<FooterItem key={index} item={item} />
))}
</div>
)}
</div>
);
};

const FooterItem: React.FC<{ item: FooterItem | string }> = ({ item }) => {
const color = typeof item === 'string' ? ('subdued' as const) : item.color;
const text = typeof item === 'string' ? item : item.text;
return (
<EuiText size="xs" className="defaultEditor__footerItem" color={color}>
{text}
</EuiText>
);
};

export const createDefaultEditor = createEditor(SingleLineInput, null, DefaultInput);
Loading

0 comments on commit 2d8c743

Please sign in to comment.