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

virajsanghvi · 2024-07-18T06:38:40Z

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)
Filter buttons (v8)
Filter buttons in Maps
Add filter popover padding
Edit filter popover padding
Query bar unfocused (no change)
Query bar focused
Result table (large multiline
Result table (single line)
Field list section header size
Expanded Document header
Expanded doc links (no change)
Doc flyout doc links
Doc flyout json size (can't see change without oui change) (v8)
Inspector flyout title
Inspector flyout selected view size

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 <[email protected]>

github-actions · 2024-07-18T06:39:16Z

❌ 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 <[email protected]>

codecov · 2024-07-18T06:56:54Z

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 <[email protected]>

virajsanghvi · 2024-07-18T19:36:40Z

src/plugins/data/public/ui/filter_bar/filter_bar.tsx

@@ -110,15 +110,15 @@ function FilterBarUI(props: Props) {

    const button = (
      <EuiButtonEmpty
-        size="xs"
+        size="s"


callout: increasing as it needs to match neighbor

virajsanghvi · 2024-07-18T19:37:29Z

src/plugins/data/public/ui/filter_bar/filter_editor/index.tsx

@@ -108,7 +108,7 @@ class FilterEditorUI extends Component<Props, State> {
  public render() {
    return (
      <div>
-        <EuiPopoverTitle>
+        <EuiPopoverTitle paddingSize="s">


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

virajsanghvi · 2024-07-18T19:37:48Z

src/plugins/data/public/ui/query_string_input/_query_bar.scss

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


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

virajsanghvi · 2024-07-18T19:38:13Z

src/plugins/discover/public/application/components/data_grid/data_grid_table_flyout.tsx

@@ -52,7 +52,9 @@ export function DataGridFlyout({
      <EuiFlyoutBody>
        <EuiFlexGroup direction="column">
          <EuiFlexItem>
-            <DocViewerLinks hit={hit} indexPattern={indexPattern} columns={columns} />
+            <EuiText size="s">


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

virajsanghvi · 2024-07-18T19:38:54Z

src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx

@@ -241,7 +241,7 @@ export const getTopNavLinks = (
    }),
    run() {
      inspector.open(inspectorAdapters, {
-        title: savedSearch?.title,
+        title: savedSearch?.title || undefined,


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

zhongnansu

lgtm

kavilla · 2024-07-19T07:52:37Z

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

…7299) * refactor: density and consistency changes for discover and query ba --------- Signed-off-by: Viraj Sanghvi <[email protected]> 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>

…7299) (#7321) * refactor: density and consistency changes for discover and query ba --------- (cherry picked from commit 54cdf23) Signed-off-by: Viraj Sanghvi <[email protected]> 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>

refactor: density and consistency changes for discover and query bar

1223107

Signed-off-by: Viraj Sanghvi <[email protected]>

github-actions bot added the repeat-contributor label Jul 18, 2024

github-actions bot added the failed changeset label Jul 18, 2024

virajsanghvi and others added 2 commits July 17, 2024 23:41

Merge branch 'main' into lnf-discover

8e99c6a

Changeset file for PR opensearch-project#7299 created/updated

6ece9d9

github-actions bot removed the failed changeset label Jul 18, 2024

Fit lint failure

f3c483c

Signed-off-by: Viraj Sanghvi <[email protected]>

virajsanghvi added 2 commits July 18, 2024 18:42

fix tests + update comments

05e07a7

Signed-off-by: Viraj Sanghvi <[email protected]>

fix doc links implementation

bb3ec62

Signed-off-by: Viraj Sanghvi <[email protected]>

virajsanghvi commented Jul 18, 2024

View reviewed changes

virajsanghvi marked this pull request as ready for review July 18, 2024 21:19

virajsanghvi requested review from ananzh, kavilla, AMoo-Miki, ashwin-pc, joshuarrrr, abbyhu2000, zengyan-amazon, zhongnansu, manasvinibs, ZilongX, Flyingliuhub, curq, bandinib-amzn, SuZhou-Joe, ruanyl, BionIT and xinruiba as code owners July 18, 2024 21:19

virajsanghvi requested review from zhyuanqi, mengweieric and LDrago27 as code owners July 18, 2024 21:19

zhongnansu approved these changes Jul 18, 2024

View reviewed changes

Merge branch 'main' into lnf-discover

a41007b

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

kavilla approved these changes Jul 19, 2024

View reviewed changes

virajsanghvi merged commit 54cdf23 into opensearch-project:main Jul 19, 2024
72 of 73 checks passed

opensearch-trigger-bot bot mentioned this pull request Jul 19, 2024

[Backport 2.x] refactor: density and consistency changes for discover and query bar #7321

Merged

AMoo-Miki added the in-next label Sep 27, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

virajsanghvi commented Jul 18, 2024 •

edited

Loading

github-actions bot commented Jul 18, 2024

codecov bot commented Jul 18, 2024 •

edited

Loading

virajsanghvi Jul 18, 2024

virajsanghvi Jul 18, 2024

virajsanghvi Jul 18, 2024

virajsanghvi Jul 18, 2024

virajsanghvi Jul 18, 2024

zhongnansu left a comment

kavilla commented Jul 19, 2024

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

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

Conversation

virajsanghvi commented Jul 18, 2024 • edited Loading

Description

Issues Resolved

Screenshot

Testing the changes

Changelog

Check List

github-actions bot commented Jul 18, 2024

❌ Empty Changelog Section

codecov bot commented Jul 18, 2024 • edited Loading

Codecov Report

virajsanghvi Jul 18, 2024

Choose a reason for hiding this comment

virajsanghvi Jul 18, 2024

Choose a reason for hiding this comment

virajsanghvi Jul 18, 2024

Choose a reason for hiding this comment

virajsanghvi Jul 18, 2024

Choose a reason for hiding this comment

virajsanghvi Jul 18, 2024

Choose a reason for hiding this comment

zhongnansu left a comment

Choose a reason for hiding this comment

kavilla commented Jul 19, 2024

virajsanghvi commented Jul 18, 2024 •

edited

Loading

codecov bot commented Jul 18, 2024 •

edited

Loading