[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).
Report is 35 commits behind head on main.

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.

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

ashwin-pc · 2024-10-01T11:05:40Z

Thanks Ryan for the change, but I'm closing this in favour of #8331 for now since the position of this input will change soon anyways.

… picker (#8255) * initial implementation of cloud watch data set type Signed-off-by: Joshua Li <[email protected]> * wip-- support selecting multiple datasets Signed-off-by: Joshua Li <[email protected]> * Revert "wip-- support selecting multiple datasets" This reverts commit 4977cc9. Signed-off-by: Joshua Li <[email protected]> * add multi-select dataset table Signed-off-by: Joshua Li <[email protected]> * add token based pagination in dataset table Signed-off-by: Joshua Li <[email protected]> * display data connection in dataset title Signed-off-by: Joshua Li <[email protected]> * avoid overlap of dataset title and language selector Signed-off-by: Joshua Li <[email protected]> * Revert "avoid overlap of dataset title and language selector" This reverts commit 87d599d. Wait for #8204 Signed-off-by: Joshua Li <[email protected]> * revert query enhancement changes for cloudwatch Signed-off-by: Joshua Li <[email protected]> * Changeset file for PR #8255 created/updated * Revert "revert query enhancement changes for cloudwatch" This reverts commit 5eb065a. Signed-off-by: Joshua Li <[email protected]> * address comments Signed-off-by: Joshua Li <[email protected]> * revert query enhancement changes for cloudwatch Signed-off-by: Joshua Li <[email protected]> * address comments Signed-off-by: Joshua Li <[email protected]> --------- Signed-off-by: Joshua Li <[email protected]> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

… picker (#8255) * initial implementation of cloud watch data set type Signed-off-by: Joshua Li <[email protected]> * wip-- support selecting multiple datasets Signed-off-by: Joshua Li <[email protected]> * Revert "wip-- support selecting multiple datasets" This reverts commit 4977cc9. Signed-off-by: Joshua Li <[email protected]> * add multi-select dataset table Signed-off-by: Joshua Li <[email protected]> * add token based pagination in dataset table Signed-off-by: Joshua Li <[email protected]> * display data connection in dataset title Signed-off-by: Joshua Li <[email protected]> * avoid overlap of dataset title and language selector Signed-off-by: Joshua Li <[email protected]> * Revert "avoid overlap of dataset title and language selector" This reverts commit 87d599d. Wait for #8204 Signed-off-by: Joshua Li <[email protected]> * revert query enhancement changes for cloudwatch Signed-off-by: Joshua Li <[email protected]> * Changeset file for PR #8255 created/updated * Revert "revert query enhancement changes for cloudwatch" This reverts commit 5eb065a. Signed-off-by: Joshua Li <[email protected]> * address comments Signed-off-by: Joshua Li <[email protected]> * revert query enhancement changes for cloudwatch Signed-off-by: Joshua Li <[email protected]> * address comments Signed-off-by: Joshua Li <[email protected]> --------- Signed-off-by: Joshua Li <[email protected]> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> (cherry picked from commit fd31398) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

… picker (#8255) (#8438) * initial implementation of cloud watch data set type * wip-- support selecting multiple datasets * Revert "wip-- support selecting multiple datasets" This reverts commit 4977cc9. * add multi-select dataset table * add token based pagination in dataset table * display data connection in dataset title * avoid overlap of dataset title and language selector * Revert "avoid overlap of dataset title and language selector" This reverts commit 87d599d. Wait for #8204 * revert query enhancement changes for cloudwatch * Changeset file for PR #8255 created/updated * Revert "revert query enhancement changes for cloudwatch" This reverts commit 5eb065a. * address comments * revert query enhancement changes for cloudwatch * address comments --------- (cherry picked from commit fd31398) Signed-off-by: Joshua Li <[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>

… picker (opensearch-project#8255) (opensearch-project#8438) * initial implementation of cloud watch data set type * wip-- support selecting multiple datasets * Revert "wip-- support selecting multiple datasets" This reverts commit 4977cc9. * add multi-select dataset table * add token based pagination in dataset table * display data connection in dataset title * avoid overlap of dataset title and language selector * Revert "avoid overlap of dataset title and language selector" This reverts commit 87d599d. Wait for opensearch-project#8204 * revert query enhancement changes for cloudwatch * Changeset file for PR opensearch-project#8255 created/updated * Revert "revert query enhancement changes for cloudwatch" This reverts commit 5eb065a. * address comments * revert query enhancement changes for cloudwatch * address comments --------- (cherry picked from commit fd31398) Signed-off-by: Joshua Li <[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>

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

Merged

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

ashwin-pc closed this Oct 1, 2024

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

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

ashwin-pc commented Oct 1, 2024

[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

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

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

ashwin-pc commented Oct 1, 2024

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