[Console][Multiple Datasource]Fine tuned dev tool datasource selector UI #3806

zhongnansu · 2023-04-07T20:07:22Z

Description

[Console][Multiple Datasource]Fine tuned dev tool datasource selector UI

Coming from @KrooshalUX 's feedback #3754 (comment). Tuned the UI to make it look nicer, while not breaking the pattern of other dev tool registered plugins

Issues Resolved

Check List

Signed-off-by: Su <szhongna@amazon.com>

codecov-commenter · 2023-04-07T21:51:45Z

Codecov Report

Merging #3806 (0b4f5aa) into main (a6af77d) will decrease coverage by 0.01%.
The diff coverage is n/a.

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

@@            Coverage Diff             @@
##             main    #3806      +/-   ##
==========================================
- Coverage   66.42%   66.41%   -0.01%     
==========================================
  Files        3209     3209              
  Lines       61730    61732       +2     
  Branches     9533     9533              
==========================================
- Hits        41004    41002       -2     
- Misses      18439    18442       +3     
- Partials     2287     2288       +1

Flag	Coverage Δ
Linux	`66.36% <ø> (-0.01%)`	⬇️
Windows	`66.37% <ø> (+<0.01%)`	⬆️

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

see 3 files with indirect coverage changes

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

joshuarrrr

A couple of clarifying questions, but this definitely looks better than the previous version.

joshuarrrr · 2023-04-13T20:27:24Z

src/plugins/dev_tools/public/index.scss

+.devAppTabs {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+}


Can you explain more about why this wasn't achievable with EuiFlexGroup and EuiFlexItem as in the previous code? Because it likely means we need to open an issue in OUI to figure out how to address the need here.

I don't think it's an issue with EuiFlexGroup or EuiFlexItem. Previously when we use FlexGroup to have 2 flex item, one is EuiTabs, one is datasourcePicker, then there's this ugly line cut-off(comes with EuiTab). We want the line to stretch all the way to be under the DataSourcePicker.

Reason for the cut-off is that we have 2 flexItem. But we want it to look better to avoid the cut-off, and the solution in this PR is by making DataSourePicker within EuiTab component, while removing the FlexGroup and FlexItem. But since EuiTabs itself is not inherently a flex component, I need to achieve that in CSS.

I looked into this a bit - I think that the fundamental issue is that the current usage or EuiTabs here is not really the best component for the way we want the top of the page to work (EuiPageHeader with tabs and rightSideItems is more of what we want. But I think it makes the most sense to go forward with this hack for now, and then refactor it a part of a larger effort to convert the dev_tools and console plugins to be fully built with OUI components.

src/plugins/dev_tools/public/application.tsx

…d on the dataSourceEnabled prop Signed-off-by: Su <szhongna@amazon.com>

manasvinibs

Screenshot with the new changes is looking good. There is a link check failure which is not related to this change.

joshuarrrr

This looks a lot better for now. Will refactor as part of OUI-ification of dev_tools and console.

joshuarrrr · 2023-04-14T20:20:03Z

src/plugins/dev_tools/public/index.scss

+.devAppTabs {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+}


I looked into this a bit - I think that the fundamental issue is that the current usage or EuiTabs here is not really the best component for the way we want the top of the page to work (EuiPageHeader with tabs and rightSideItems is more of what we want. But I think it makes the most sense to go forward with this hack for now, and then refactor it a part of a larger effort to convert the dev_tools and console plugins to be fully built with OUI components.

joshuarrrr · 2023-04-14T20:27:55Z

link checker failure can be ignored. Awaiting cypress re-run.

… UI (#3806) * Fine tuned dev tool datasource selector UI * Refactor DevToolsWrapper to conditionally render the EuiComboBox based on the dataSourceEnabled prop Signed-off-by: Su <szhongna@amazon.com> --------- Signed-off-by: Su <szhongna@amazon.com> (cherry picked from commit 971165f) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

… UI (#3806) (#3850) * Fine tuned dev tool datasource selector UI * Refactor DevToolsWrapper to conditionally render the EuiComboBox based on the dataSourceEnabled prop --------- (cherry picked from commit 971165f) Signed-off-by: Su <szhongna@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>

… UI (opensearch-project#3806) * Fine tuned dev tool datasource selector UI * Refactor DevToolsWrapper to conditionally render the EuiComboBox based on the dataSourceEnabled prop Signed-off-by: Su <szhongna@amazon.com> --------- Signed-off-by: Su <szhongna@amazon.com> Signed-off-by: David Sinclair <david@sinclair.tech>

zhongnansu added ux / ui Improvements or additions to user experience, flows, components, UI elements backport 2.x multiple datasource multiple datasource project v2.7.0 console labels Apr 7, 2023

zhongnansu requested review from ashwin-pc, abbyhu2000, kristenTian and KrooshalUX April 7, 2023 20:07

zhongnansu requested a review from a team as a code owner April 7, 2023 20:07

zhongnansu added the Skip-Changelog PRs that are too trivial to warrant a changelog or release notes entry label Apr 7, 2023

github-actions bot added the all-star-contributor label Apr 7, 2023

Fine tuned dev tool datasource selector UI

af54dfa

Signed-off-by: Su <szhongna@amazon.com>

zhongnansu force-pushed the md-dev-tool-ui-tune branch from 147cc7b to af54dfa Compare April 7, 2023 20:21

zhongnansu mentioned this pull request Apr 7, 2023

2.7.0 Platform Upgrades for Plugins (O11y, MDS, Geospatial,+) #3674

Closed

23 tasks

zhongnansu assigned ashwin-pc Apr 10, 2023

joshuarrrr assigned joshuarrrr and unassigned ashwin-pc Apr 12, 2023

joshuarrrr mentioned this pull request Apr 12, 2023

[Multiple Datasource][Meta] Feature GA in 2.7 release #3577

Closed

9 tasks

joshuarrrr assigned manasvinibs Apr 13, 2023

joshuarrrr reviewed Apr 13, 2023

View reviewed changes

Refactor DevToolsWrapper to conditionally render the EuiComboBox base…

0b4f5aa

…d on the dataSourceEnabled prop Signed-off-by: Su <szhongna@amazon.com>

zhongnansu requested review from ananzh, kavilla, seanneumann, AMoo-Miki, zengyan-amazon and manasvinibs as code owners April 13, 2023 23:17

manasvinibs approved these changes Apr 13, 2023

View reviewed changes

zhongnansu requested a review from joshuarrrr April 13, 2023 23:30

joshuarrrr approved these changes Apr 14, 2023

View reviewed changes

joshuarrrr merged commit 971165f into opensearch-project:main Apr 14, 2023

opensearch-trigger-bot bot mentioned this pull request Apr 14, 2023

[Backport 2.x] [Console][Multiple Datasource]Fine tuned dev tool datasource selector UI #3850

Merged

yujin-emma mentioned this pull request Jan 19, 2024

[Feature] Support Multiple Data Source when Import saved objects from uploading files #5712

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Console][Multiple Datasource]Fine tuned dev tool datasource selector UI #3806

[Console][Multiple Datasource]Fine tuned dev tool datasource selector UI #3806

zhongnansu commented Apr 7, 2023 •

edited

Loading

codecov-commenter commented Apr 7, 2023 •

edited

Loading

joshuarrrr left a comment

joshuarrrr Apr 13, 2023

zhongnansu Apr 13, 2023

joshuarrrr Apr 14, 2023

manasvinibs left a comment

joshuarrrr left a comment

joshuarrrr Apr 14, 2023

joshuarrrr commented Apr 14, 2023

[Console][Multiple Datasource]Fine tuned dev tool datasource selector UI #3806

[Console][Multiple Datasource]Fine tuned dev tool datasource selector UI #3806

Conversation

zhongnansu commented Apr 7, 2023 • edited Loading

Description

Issues Resolved

Check List

codecov-commenter commented Apr 7, 2023 • edited Loading

Codecov Report

joshuarrrr left a comment

Choose a reason for hiding this comment

joshuarrrr Apr 13, 2023

Choose a reason for hiding this comment

zhongnansu Apr 13, 2023

Choose a reason for hiding this comment

joshuarrrr Apr 14, 2023

Choose a reason for hiding this comment

manasvinibs left a comment

Choose a reason for hiding this comment

joshuarrrr left a comment

Choose a reason for hiding this comment

joshuarrrr Apr 14, 2023

Choose a reason for hiding this comment

joshuarrrr commented Apr 14, 2023

zhongnansu commented Apr 7, 2023 •

edited

Loading

codecov-commenter commented Apr 7, 2023 •

edited

Loading