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

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

Merged
merged 7 commits into from
Jul 19, 2024

Conversation

virajsanghvi
Copy link
Collaborator

@virajsanghvi virajsanghvi commented Jul 18, 2024

Description

This does a number of things in Discover and Query Bar (let me know if I should split this up):

  • Updates filter context menu (to be correct size) and add filter button (with correct icon in button) in filter bar and makes sure they're aligned and removes the weird background divider (this will be changing with nav changes, but component is still used elsewhere)
  • fixes the padding on the add/edit filter popovers (not correctly using oui)
  • fixes query bar input translation so that it's correctly positioned
  • makes data table denser (using 6px padding to match Data Grid medium cell spacing), and updates positioning of some elements to accomodate
  • in discover left bar, makes field section headers match field font size
  • on doc details expanded in place (legacy), lowers header "Expanded document" font size to match paragraph size while still being a header
  • on doc details flyout (new experience), fixes doc links to be normal paragraph size)
  • on doc details flyout, makes the json in json tab use smaller font size
  • Makes sure the inspector flyout title shows up (current an empty saved search is an empty string so it renders as empty when not defined)
  • On inspector flyout, makes size of "selected view" in inspector normal paragraph size

Note: most up to date OUI changes aren't present in mocks as OSD main doesn't use them yet.

Issues Resolved

N/A

Screenshot

Item Before After
Filter buttons (v7) image image
Filter buttons (v8) image image
Filter buttons in Maps image image
Add filter popover padding image image
Edit filter popover padding image image
Query bar unfocused (no change) image image
Query bar focused image image
Result table (large multiline image image
Result table (single line) image image
Field list section header size image image
Expanded Document header image image
Expanded doc links (no change) image image
Doc flyout doc links image image
Doc flyout json size (can't see change without oui change) (v8) image image
Inspector flyout title image image
Inspector flyout selected view size image image

Testing the changes

  • updated snapshot tests
  • validated updated elements in areas they're used elsewhere in app
  • manually validated css changes

Changelog

  • refactor: density and consistency changes for discover and query bar

Check List

  • All tests pass
    • yarn test:jest
    • yarn test:jest_integration
  • New functionality includes testing.
  • New functionality has been documented.
  • Update CHANGELOG.md
  • Commits are signed per the DCO using --signoff

Signed-off-by: Viraj Sanghvi <virajs@amazon.com>
Copy link
Contributor

❌ Empty Changelog Section

The Changelog section in your PR description is empty. Please add a valid changelog entry or entries. If you did add a changelog entry, check to make sure that it was not accidentally included inside the comment block in the Changelog section.

Signed-off-by: Viraj Sanghvi <virajs@amazon.com>
Copy link

codecov bot commented Jul 18, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 67.50%. Comparing base (2c6e78e) to head (a41007b).
Report is 311 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #7299   +/-   ##
=======================================
  Coverage   67.50%   67.50%           
=======================================
  Files        3501     3501           
  Lines       69343    69343           
  Branches    11305    11305           
=======================================
+ Hits        46808    46810    +2     
+ Misses      19779    19777    -2     
  Partials     2756     2756           
Flag Coverage Δ
Linux_1 33.11% <ø> (ø)
Linux_2 55.46% <ø> (ø)
Linux_3 43.04% <ø> (-0.02%) ⬇️
Linux_4 34.71% <ø> (ø)
Windows_1 33.13% <ø> (ø)
Windows_2 55.41% <ø> (ø)
Windows_3 43.06% <ø> (ø)
Windows_4 34.71% <ø> (+<0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Signed-off-by: Viraj Sanghvi <virajs@amazon.com>
Signed-off-by: Viraj Sanghvi <virajs@amazon.com>
@@ -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

@@ -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)

@@ -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

@@ -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

@@ -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

Copy link
Member

@zhongnansu zhongnansu left a comment

Choose a reason for hiding this comment

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

lgtm

@virajsanghvi virajsanghvi added backport 2.x v2.16.0 look & feel Look and Feel Improvements labels Jul 18, 2024
@kavilla
Copy link
Member

kavilla commented Jul 19, 2024

i think for this to be all in one. ty so much

@virajsanghvi virajsanghvi merged commit 54cdf23 into opensearch-project:main Jul 19, 2024
72 of 73 checks passed
opensearch-trigger-bot bot pushed a commit that referenced this pull request Jul 19, 2024
…7299)

* refactor: density and consistency changes for discover and query ba

---------

Signed-off-by: Viraj Sanghvi <virajs@amazon.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
(cherry picked from commit 54cdf23)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
virajsanghvi pushed a commit that referenced this pull request Jul 19, 2024
…7299) (#7321)

* refactor: density and consistency changes for discover and query ba

---------

(cherry picked from commit 54cdf23)

Signed-off-by: Viraj Sanghvi <virajs@amazon.com>
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>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants