[Discover] Adds an Options menu for switching between the two table modes #97120

stratoula · 2021-04-14T14:30:44Z

Summary

Adds a new menu item Options which appears only to the users that have permissions to edit the advanced settings.

The link redirects to the advanced settings section with the use legacy table query in order only the setting we want to be displayed.

Link text depends on the switch status

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

stratoula · 2021-04-15T08:47:44Z

@ryankeairns I will need your valuable feedback for the UI and the texts. Right now, I am changing only the text of the link, but I could also change the explanatory text too.

kertal · 2021-04-15T12:32:01Z

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

+          <FormattedMessage
+            id="discover.topNav.openOptionsPopover.description"
+            defaultMessage="The new data grid layout includes better data sorting, drag-and-drop columns, and a full
+                screen view. Enable this option if you prefer to fall back to the legacy table."
+          />


thx a lot for taking care of this 🙇 , so here's my first thought while playing with this: I think also the link description should be different depending on which state is selected, FYI @gchaps & @shaunmcgough for finding the right words here

Perhaps: "The new data grid features faster loading, better comparison, a flyout window, enhanced options, and is going to replace the legacy table soon. Enable this option if you prefer to fall back to the legacy table."

@gchaps what say you?

ryankeairns · 2021-04-15T16:30:52Z

Having tried this out, I have a few new thoughts:

The link is not very discernible alongside the helper text. That said, I think noting the pros is worthwhile, so let's try raising the visual weight of the link relative to that text (see below).
The 'Switch to...' wording feels like a mismatch of expectations since it really just takes you to the Advanced Settings page and doesn't actually switch anything. I'm thinking we need something more general/precise like 'Go to Advanced Settings' , etc. Curious what @gchaps thinks here. I've also updated the description text to better align with the button action and am suggesting we show the current mode, distinctly (this is akin to how current values are displayed under Advanced Settings).

~~I'll push up a rough design PR of my local changes.~~

👉 Incomplete design/reference PR: stratoula#3

stratoula · 2021-04-19T05:35:18Z

@elasticmachine merge upstream

Layout and copy tweaks

stratoula · 2021-04-19T07:24:25Z

Thank you @ryankeairns, I really like it! I merged your PR and adjusted the unit test. We should decide now about the text, if we want this to be different and what exactly will be

elasticmachine · 2021-04-19T07:29:41Z

Pinging @elastic/kibana-app (Team:KibanaApp)

ryankeairns · 2021-04-19T21:47:56Z

My last attempt at the wording :)

The new data grid layout includes enhanced data sorting, drag-and-drop columns, multi-document selection, and a full screen view. Toggle the 'Use legacy table' option in Advanced Settings to switch modes.

ryankeairns

This looks great Stratoula! Thanks for stepping in to help and for addressing the feedback.

gchaps · 2021-04-19T22:32:13Z

A minor edit:

The new data grid layout includes enhanced data sorting, drag-and-drop columns, multi-document selection, and a full screen view. Toggle 'Use legacy table' in Advanced Settings to switch modes.

stratoula · 2021-04-20T05:34:05Z

Text was changed :)

kertal · 2021-04-20T08:34:50Z

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

+  const mode = isLegacy
+    ? i18n.translate('discover.openOptionsPopover.dataGridText', {
+        defaultMessage: 'Data grid',
+      })
+    : i18n.translate('discover.openOptionsPopover.legacyTableText', {
+        defaultMessage: 'Legacy table',
+      });


this should be inverted to like (same with tests then)

isLegacy ? 'Legacy table' : 'Data grid'

You are so right Matthias 😱

kertal

Code LGTM, tested locally in Chrome Firefox Safari, Mac OS. Works as expected. Thx a lot for taking care of this! This new Options would have saved me a few hours or days of navigating to switch the grid! 👍

kibanamachine · 2021-04-20T11:06:29Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`discover`	347	357	+10

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`discover`	407.2KB	412.6KB	+5.3KB

History

💚 Build #120841 succeeded 7e0e83e
💛 Build #120438 was flaky 9db48b6
💚 Build #120422 succeeded b5242bf
💚 Build #119880 succeeded 1d5ecc7
💔 Build #119625 failed ad39f75

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

…odes (elastic#97120) * [Discover] Adds an Options menu for enabling the Legacy table * Add unit test * Layout and copy tweaks * Update UI and fix unit test * Change description text * Revert legacy text mode functionality Co-authored-by: Ryan Keairns <[email protected]> Co-authored-by: Kibana Machine <[email protected]>

…odes (#97120) (#97611) * [Discover] Adds an Options menu for enabling the Legacy table * Add unit test * Layout and copy tweaks * Update UI and fix unit test * Change description text * Revert legacy text mode functionality Co-authored-by: Ryan Keairns <[email protected]> Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Ryan Keairns <[email protected]> Co-authored-by: Kibana Machine <[email protected]>

stratoula added 2 commits April 14, 2021 17:30

[Discover] Adds an Options menu for enabling the Legacy table

ad39f75

Add unit test

1d5ecc7

stratoula requested review from kertal and ryankeairns April 15, 2021 08:45

stratoula added Feature:Discover Discover Application v7.13.0 v8.0.0 release_note:enhancement labels Apr 15, 2021

kertal reviewed Apr 15, 2021

View reviewed changes

Layout and copy tweaks

d7516aa

kibanamachine and others added 3 commits April 19, 2021 01:35

Merge branch 'master' into discover-datagrid-popover

b5242bf

Merge pull request #3 from ryankeairns/discover-datagrid-popover

32bdf60

Layout and copy tweaks

Update UI and fix unit test

9db48b6

stratoula marked this pull request as ready for review April 19, 2021 07:29

stratoula requested a review from a team April 19, 2021 07:29

stratoula requested a review from a team as a code owner April 19, 2021 07:29

stratoula added the Team:Visualizations Visualization editors, elastic-charts and infrastructure label Apr 19, 2021

stratoula changed the title ~~[Discover] Adds an Options menu for enabling the Legacy table~~ [Discover] Adds an Options menu for switching between the two table modes Apr 19, 2021

pheyos mentioned this pull request Apr 19, 2021

[ML] Functional tests - stabilize anomaly charts embeddables test #97452

Merged

ryankeairns approved these changes Apr 19, 2021

View reviewed changes

Change description text

7e0e83e

kertal reviewed Apr 20, 2021

View reviewed changes

Revert legacy text mode functionality

53488ab

kertal approved these changes Apr 20, 2021

View reviewed changes

stratoula merged commit 0cec343 into elastic:master Apr 20, 2021

stratoula mentioned this pull request Apr 20, 2021

[7.x] [Discover] Adds an Options menu for switching between the two table modes (#97120) #97611

Merged

kertal mentioned this pull request Apr 27, 2021

[Discover] UI toggle to switch back to legacy table implementation #92618

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Discover] Adds an Options menu for switching between the two table modes #97120

[Discover] Adds an Options menu for switching between the two table modes #97120

stratoula commented Apr 14, 2021 •

edited

Loading

stratoula commented Apr 15, 2021

kertal Apr 15, 2021 •

edited

Loading

shaunmcgough Apr 15, 2021

ryankeairns commented Apr 15, 2021 •

edited

Loading

stratoula commented Apr 19, 2021

stratoula commented Apr 19, 2021

elasticmachine commented Apr 19, 2021

ryankeairns commented Apr 19, 2021

ryankeairns left a comment

gchaps commented Apr 19, 2021

stratoula commented Apr 20, 2021

kertal Apr 20, 2021 •

edited

Loading

stratoula Apr 20, 2021

stratoula Apr 20, 2021

kertal left a comment

kibanamachine commented Apr 20, 2021

[Discover] Adds an Options menu for switching between the two table modes #97120

[Discover] Adds an Options menu for switching between the two table modes #97120

Conversation

stratoula commented Apr 14, 2021 • edited Loading

Summary

Checklist

stratoula commented Apr 15, 2021

kertal Apr 15, 2021 • edited Loading

Choose a reason for hiding this comment

shaunmcgough Apr 15, 2021

Choose a reason for hiding this comment

ryankeairns commented Apr 15, 2021 • edited Loading

stratoula commented Apr 19, 2021

stratoula commented Apr 19, 2021

elasticmachine commented Apr 19, 2021

ryankeairns commented Apr 19, 2021

ryankeairns left a comment

Choose a reason for hiding this comment

gchaps commented Apr 19, 2021

stratoula commented Apr 20, 2021

kertal Apr 20, 2021 • edited Loading

Choose a reason for hiding this comment

stratoula Apr 20, 2021

Choose a reason for hiding this comment

stratoula Apr 20, 2021

Choose a reason for hiding this comment

kertal left a comment

Choose a reason for hiding this comment

kibanamachine commented Apr 20, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

History

stratoula commented Apr 14, 2021 •

edited

Loading

kertal Apr 15, 2021 •

edited

Loading

ryankeairns commented Apr 15, 2021 •

edited

Loading

kertal Apr 20, 2021 •

edited

Loading