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.

Sign up for GitHub

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

refactor: density and consistency changes for discover and query bar #7299

Merged
merged 7 commits into from
Jul 19, 2024
Merged

refactor: density and consistency changes for discover and query bar #7299

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1223107
refactor: density and consistency changes for discover and query bar
virajsanghvi Jul 18, 2024
8e99c6a
Merge branch 'main' into lnf-discover
virajsanghvi Jul 18, 2024
6ece9d9
Changeset file for PR #7299 created/updated
opensearch-changeset-bot[bot] Jul 18, 2024
f3c483c
Fit lint failure
virajsanghvi Jul 18, 2024
05e07a7
fix tests + update comments
virajsanghvi Jul 18, 2024
bb3ec62
fix doc links implementation
virajsanghvi Jul 18, 2024
a41007b
Merge branch 'main' into lnf-discover
virajsanghvi Jul 18, 2024
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/7299.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
refactor:
- Density and consistency changes for discover and query bar ([#7299](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7299))
6 changes: 2 additions & 4 deletions src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,8 @@
}

.globalFilterGroup__branch {
padding: $euiSizeS $euiSizeM 0 0;
background-repeat: no-repeat;
background-position: $euiSizeM ($euiSizeS * -1);
background-image: url("data:image/svg+xml,%0A%3Csvg width='28px' height='28px' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='#{hexToRGB($euiColorLightShade)}'%3E%3Crect x='14' y='27' width='14' height='1'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E");
// matches inline #GlobalFilterGroup height and same size as add filter button + padding to vertically center
line-height: 40px;
}

.globalFilterGroup__wrapper {
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/data/public/ui/filter_bar/_global_filter_item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@
}

.globalFilterItem__editorForm {
padding: $euiSizeM;
padding: $euiSizeS;
}

.globalFilterItem__popover,
Expand Down
4 changes: 2 additions & 2 deletions src/plugins/data/public/ui/filter_bar/filter_bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,15 +110,15 @@ function FilterBarUI(props: Props) {

const button = (
<EuiButtonEmpty
size="xs"
size="s"
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

callout: increasing as it needs to match neighbor

onClick={() => setIsAddFilterPopoverOpen(true)}
data-test-subj="addFilter"
aria-label={i18n.translate('data.filter.filterBar.addFilterButtonLabel', {
defaultMessage: 'Add filter',
})}
className="globalFilterBar__addButton"
iconType="plusInCircle"
>
+{' '}
<FormattedMessage
id="data.filter.filterBar.addFilterButtonLabel"
defaultMessage="Add filter"
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/data/public/ui/filter_bar/filter_editor/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ class FilterEditorUI extends Component<Props, State> {
public render() {
return (
<div>
<EuiPopoverTitle>
<EuiPopoverTitle paddingSize="s">
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

callout: placing padding on popovertitle because there isn't a popover to place this on (css change handles the body)

<EuiFlexGroup alignItems="baseline" responsive={false}>
<EuiFlexItem>
<FormattedMessage
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/data/public/ui/query_string_input/_query_bar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
// Unlike most inputs within layout control groups, the text area still needs a border.
// These adjusts help it sit above the control groups shadow to line up correctly.
padding: ($euiSizeS + 2px) $euiSizeS $euiSizeS;
transform: translateY(-2px) translateX(-1px);
transform: translateY(-1px) translateX(-1px);
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

callout: this makes the focus state align properly like other inputs


&:not(:focus):not(:invalid) {
@include euiYScrollWithShadows;
Expand Down
4 changes: 3 additions & 1 deletion src/plugins/discover/public/application/components/data_grid/data_grid_table_flyout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,9 @@ export function DataGridFlyout({
<EuiFlyoutBody>
<EuiFlexGroup direction="column">
<EuiFlexItem>
<DocViewerLinks hit={hit} indexPattern={indexPattern} columns={columns} />
<EuiText size="s">
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

callout: placing here instead of inside component to avoid changing font size in expanded view

<DocViewerLinks hit={hit} indexPattern={indexPattern} columns={columns} />
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<DocViewer
Expand Down
13 changes: 11 additions & 2 deletions src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
$osdDocTableCellPadding: calc($ouiSizeM / 2); // corresponds to DataGrid medium cellPadding (6px)

.osdDocTable__detailsParent {
border-top: none !important;
}
Expand All @@ -8,7 +10,7 @@
}

.osd-table td.osdDocTableCell__toggleDetails {
padding: 5px 0 0 4px;
padding: 4px 0 0 4px;
}

/**
Expand All @@ -27,7 +29,7 @@

// Vertically align the button group with the first line of text
// 8px is set by .table and 2em is the line-height
top: calc(2em / 2 + 8px);
top: calc(2em / 2 + $osdDocTableCellPadding);
transform: translateY(-50%);

// Stick it to the right but use the padding of the container to distance it from the edge (below)
Expand Down Expand Up @@ -83,6 +85,13 @@
}
}

// nested for specificity
.osd-table {
.osdDocTableCell {
padding: $osdDocTableCellPadding;
}
}

.osdDocTableCell__source {
.truncate-by-height {
margin-top: -1.5px;
Expand Down
5 changes: 5 additions & 0 deletions src/plugins/discover/public/application/components/default_discover_table/_table_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
.osdDocTableHeader {
white-space: nowrap;
text-align: left;

// nested for specificity
.docTableHeaderField {
padding: calc($ouiSizeM / 2); // corresponds to DataGrid medium cellPadding
}
}

.osdDocTableHeader button {
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/discover/public/application/components/default_discover_table/table_row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ const TableRowUI = ({
</EuiFlexItem>
<EuiFlexItem>
<h4
className="euiTitle euiTitle--xsmall"
className="euiTitle euiTitle--xxsmall"
i18n-id="discover.docTable.tableRow.detailHeading"
i18n-default-message="Expanded document"
>
Expand Down
1 change: 1 addition & 0 deletions ...public/application/components/json_code_block/__snapshots__/json_code_block.test.tsx.snap
View file
Open in desktop

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

2 changes: 1 addition & 1 deletion src/plugins/discover/public/application/components/json_code_block/json_code_block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export function JsonCodeBlock({ hit }: DocViewRenderProps) {
defaultMessage: 'Read only JSON view of an opensearch document',
});
return (
<EuiCodeBlock aria-label={label} language="json" isCopyable paddingSize="s">
<EuiCodeBlock aria-label={label} language="json" isCopyable paddingSize="s" fontSize="s">
{stringify(hit, null, 2)}
</EuiCodeBlock>
);
Expand Down
2 changes: 2 additions & 0 deletions src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
width: 100%;

.euiButtonEmpty__content {
font-size: $euiFontSizeXS;
font-weight: $euiFontWeightSemiBold;
justify-content: flex-end;
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,7 @@ export const getTopNavLinks = (
}),
run() {
inspector.open(inspectorAdapters, {
title: savedSearch?.title,
title: savedSearch?.title || undefined,
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

callout: defaulting to undefined just makes sure a title shows up in Inspector panel worst case

});
},
};
Expand Down
13 changes: 8 additions & 5 deletions src/plugins/inspector/public/ui/inspector_view_chooser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import {
EuiContextMenuItem,
EuiContextMenuPanel,
EuiPopover,
EuiText,
EuiToolTip,
} from '@elastic/eui';
import { InspectorViewDescription } from '../types';
Expand Down Expand Up @@ -111,11 +112,13 @@ export class InspectorViewChooser extends Component<Props, State> {
renderSingleView() {
return (
<EuiToolTip position="bottom" content={this.props.selectedView.help}>
<FormattedMessage
id="inspector.view"
defaultMessage="View: {viewName}"
values={{ viewName: this.props.selectedView.title }}
/>
<EuiText size="s">
<FormattedMessage
id="inspector.view"
defaultMessage="View: {viewName}"
values={{ viewName: this.props.selectedView.title }}
/>
</EuiText>
</EuiToolTip>
);
}
Expand Down
Loading