[Discover] Fix the overlap issue of datapicker and query editor input bar for DQL #8204

RyanL1997 · 2024-09-16T00:45:34Z

Description

Fix the overlap issue of datapicker and query editor input bar

Issues Resolved

Screenshot

before:

Screen.Recording.2024-09-15.at.11.24.17.PM.mov

after:

Screen.Recording.2024-09-15.at.11.23.08.PM.mov

Testing the changes

Changelog

fix: Update the graph

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

github-actions · 2024-09-16T00:46:06Z

❌ 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.

github-actions · 2024-09-16T00:57:57Z

❌ 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.

codecov · 2024-09-16T01:00:22Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 64.14%. Comparing base (f6924a7) to head (03e5c62).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #8204   +/-   ##
=======================================
  Coverage   64.14%   64.14%           
=======================================
  Files        3743     3743           
  Lines       88833    88833           
  Branches    13852    13852           
=======================================
+ Hits        56979    56980    +1     
+ Misses      31239    31238    -1     
  Partials      615      615

Flag	Coverage Δ
Linux_1	`30.07% <ø> (ø)`
Linux_2	`58.86% <ø> (ø)`
Linux_3	`40.36% <ø> (?)`
Linux_4	`31.58% <ø> (ø)`
Windows_1	`30.08% <ø> (ø)`
Windows_2	`58.81% <ø> (ø)`
Windows_3	`40.36% <ø> (ø)`
Windows_4	`31.58% <ø> (ø)`

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.

ashwin-pc · 2024-09-16T18:00:00Z

Can we also truncate the name of the dataset if its too long? i.e. we can have it be something like testRemote::some-long-name-data be ...name-data? The Tooltip can still show the whole name

RyanL1997 · 2024-09-16T20:53:32Z

Hi @ashwin-pc, I just updated the truncate limit to 400px:

RyanL1997 · 2024-09-16T22:12:19Z

I think the tests failure are unrelated to this change and we may need a re-run for https://github.com/opensearch-project/OpenSearch-Dashboards/actions/runs/10891950274/job/30223973995?pr=8204

     │1)    doc views
     │       custom doc views with datagrid table
     │         should render react doc view:
     │
     │      Error: expected 'logstash-2015.09.20' to equal 'logstash-2015.09.22'
     │       at Assertion.assert (packages\osd-expect\expect.js:111:11)
     │       at Assertion.be.Assertion.equal (packages\osd-expect\expect.js:238:8)
     │       at Assertion.be (packages\osd-expect\expect.js:80:22)
     │       at Context.<anonymous> (test\plugin_functional\test_suites\doc_views\/doc_views.ts:58:54)
     │       at processTicksAndRejections (node:internal/process/task_queues:95:5)
     │       at Object.apply (packages\osd-test\src\functional_test_runner\lib\mocha\wrap_function.js:95:16)
     │ 
     │ 
     │
     │ info [opensearch-dashboards] exited with null after 7 minutes
     │ info [opensearch] stopped
     │ info [opensearch] cleanup complete

and also found out the same BWC tests failure on the other PRs.

src/plugins/data/public/ui/query_editor/_query_editor.scss

src/plugins/data/public/ui/dataset_selector/_dataset_selector.scss

ashwin-pc · 2024-09-17T01:59:43Z

The rest of the PR looks good, just these two minor comments

AMoo-Miki · 2024-09-18T21:54:11Z

src/plugins/data/public/ui/dataset_selector/_dataset_selector.scss

+  &__button--truncate {
+    display: flex;
+    align-items: center;
+    max-width: 300px;


Is this a magic number? Can't it use any OUI values? Or maybe just a %?

~~I just switched to a predefined EUI value.~~ I also tried the the % but that will always leave a blank space in between the selector and the search bar.

tried the $euiSizeXXL, however, it looks like it is too small

also tried % and it always has a gap

src/plugins/data/public/ui/query_editor/_query_editor.scss

kavilla · 2024-09-19T00:18:37Z

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

            iconType="arrowDown"
            iconSide="right"
            onClick={togglePopover}
          >
            <EuiIcon type={datasetIcon} className="datasetSelector__icon" />
-            {datasetTitle}
+            <span className="datasetSelector__title">{datasetTitle}</span>


could this actually use an EuiText and pass a classname className="eui-textTruncate" from OUI?

I just gave a try, I found that the EuiText works, however, the truncate class seems won't be applied.

actually, I also found out that after applying the EuiText the Icon happens to be at the top of the title.

kavilla · 2024-09-19T00:25:54Z

i think for non-single line input the top row looks too large now

vs the playground

AMoo-Miki · 2024-09-19T17:21:21Z

@ps48 Will this conflict with your PR?

ps48 · 2024-09-19T17:29:27Z

@ps48 Will this conflict with your PR?

Ideally shouldn't. But will rebase and resolve conflict if needed

This reverts commit 87d599d. Wait for opensearch-project#8204 Signed-off-by: Joshua Li <[email protected]>

Signed-off-by: Ryan Liang <[email protected]>

…ngth to 400px Signed-off-by: Ryan Liang <[email protected]>

…ngth to 400px - merged version Signed-off-by: Ryan Liang <[email protected]>

Signed-off-by: Ryan Liang <[email protected]>

github-actions bot added failed changeset valued-contributor labels Sep 16, 2024

RyanL1997 force-pushed the discover-name-length branch from 6223103 to d8b450e Compare September 16, 2024 03:19

ashwin-pc added the v2.18.0 label Sep 16, 2024

ashwin-pc reviewed Sep 17, 2024

View reviewed changes

src/plugins/data/public/ui/query_editor/_query_editor.scss Outdated Show resolved Hide resolved

src/plugins/data/public/ui/dataset_selector/_dataset_selector.scss Outdated Show resolved Hide resolved

ashwin-pc previously approved these changes Sep 17, 2024

View reviewed changes

ashwin-pc added 2.17.1 and removed v2.18.0 labels Sep 17, 2024

AMoo-Miki reviewed Sep 18, 2024

View reviewed changes

src/plugins/data/public/ui/query_editor/_query_editor.scss Outdated Show resolved Hide resolved

kavilla reviewed Sep 19, 2024

View reviewed changes

AMoo-Miki mentioned this pull request Sep 19, 2024

Update data explorer ui to use compressed components #8222

Open

7 tasks

joshuali925 added a commit to joshuali925/OpenSearch-Dashboards that referenced this pull request Sep 19, 2024

Revert "avoid overlap of dataset title and language selector"

c831903

This reverts commit 87d599d. Wait for opensearch-project#8204 Signed-off-by: Joshua Li <[email protected]>

RyanL1997 dismissed ashwin-pc’s stale review via 829c0ff September 20, 2024 16:40

RyanL1997 and others added 9 commits September 20, 2024 23:37

Fix the overlap issue of datapicker and query editor input bar

f7eefce

Signed-off-by: Ryan Liang <[email protected]>

Fix the overlap issue of datapicker and query editor input bar 1

c9f6533

Signed-off-by: Ryan Liang <[email protected]>

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

95cbc01

Add the truncate for the dataset selector title to limit the title le…

93d9e2d

…ngth to 400px Signed-off-by: Ryan Liang <[email protected]>

Add the truncate for the dataset selector title to limit the title le…

358bf30

…ngth to 400px - merged version Signed-off-by: Ryan Liang <[email protected]>

Fix comment - 0

41afe3f

Signed-off-by: Ryan Liang <[email protected]>

Switch to EUI txt for dataset title

b83e43b

Signed-off-by: Ryan Liang <[email protected]>

eui txt size s + z index 1

491917e

Signed-off-by: Ryan Liang <[email protected]>

Change to max-width: euiSizeXXL;

c35b7fb

Signed-off-by: Ryan Liang <[email protected]>

RyanL1997 force-pushed the discover-name-length branch from e0bfef3 to c35b7fb Compare September 21, 2024 03:37

RyanL1997 added 2 commits September 21, 2024 00:34

revert back to use 300px

33b603c

Signed-off-by: Ryan Liang <[email protected]>

Fix the popup issue

03e5c62

Signed-off-by: Ryan Liang <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Discover] Fix the overlap issue of datapicker and query editor input bar for DQL #8204

[Discover] Fix the overlap issue of datapicker and query editor input bar for DQL #8204

RyanL1997 commented Sep 16, 2024 •

edited

Loading

github-actions bot commented Sep 16, 2024

github-actions bot commented Sep 16, 2024

codecov bot commented Sep 16, 2024 •

edited

Loading

ashwin-pc commented Sep 16, 2024

RyanL1997 commented Sep 16, 2024

RyanL1997 commented Sep 16, 2024

ashwin-pc commented Sep 17, 2024

AMoo-Miki Sep 18, 2024 •

edited

Loading

RyanL1997 Sep 20, 2024 •

edited

Loading

RyanL1997 Sep 21, 2024

kavilla Sep 19, 2024

RyanL1997 Sep 20, 2024

RyanL1997 Sep 20, 2024

kavilla commented Sep 19, 2024 •

edited

Loading

AMoo-Miki commented Sep 19, 2024

ps48 commented Sep 19, 2024 •

edited

Loading

[Discover] Fix the overlap issue of datapicker and query editor input bar for DQL #8204

Are you sure you want to change the base?

[Discover] Fix the overlap issue of datapicker and query editor input bar for DQL #8204

Conversation

RyanL1997 commented Sep 16, 2024 • edited Loading

Description

Issues Resolved

Screenshot

Testing the changes

Changelog

Check List

github-actions bot commented Sep 16, 2024

❌ Empty Changelog Section

github-actions bot commented Sep 16, 2024

❌ Empty Changelog Section

codecov bot commented Sep 16, 2024 • edited Loading

Codecov Report

ashwin-pc commented Sep 16, 2024

RyanL1997 commented Sep 16, 2024

RyanL1997 commented Sep 16, 2024

ashwin-pc commented Sep 17, 2024

AMoo-Miki Sep 18, 2024 • edited Loading

Choose a reason for hiding this comment

RyanL1997 Sep 20, 2024 • edited Loading

Choose a reason for hiding this comment

RyanL1997 Sep 21, 2024

Choose a reason for hiding this comment

kavilla Sep 19, 2024

Choose a reason for hiding this comment

RyanL1997 Sep 20, 2024

Choose a reason for hiding this comment

RyanL1997 Sep 20, 2024

Choose a reason for hiding this comment

kavilla commented Sep 19, 2024 • edited Loading

AMoo-Miki commented Sep 19, 2024

ps48 commented Sep 19, 2024 • edited Loading

RyanL1997 commented Sep 16, 2024 •

edited

Loading

codecov bot commented Sep 16, 2024 •

edited

Loading

AMoo-Miki Sep 18, 2024 •

edited

Loading

RyanL1997 Sep 20, 2024 •

edited

Loading

kavilla commented Sep 19, 2024 •

edited

Loading

ps48 commented Sep 19, 2024 •

edited

Loading