[Discover] Add a tour for Document Explorer by jughosta · Pull Request #131125 · elastic/kibana

jughosta · 2022-04-28T08:52:25Z

Related to #80514

Summary

This PR adds a tour for Document Explorer grid and its controls. If the blue callout is not visible on Discover page when testing, please delete discover:docExplorerUpdateCalloutClosed from Local Storage and refresh the page.

Checklist

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
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

elasticmachine · 2022-05-10T12:10:42Z

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

gchaps

The line spacing of the text in this tour element is a little different than the line spacing of the text in other tours. Providing more line space would make the text easier to read.

ryankeairns · 2022-05-10T21:35:34Z

@gchaps as requested, I took another peek and had a just few minor considerations:

This feels like the strongest tip, overall. The subtitle is a nice expansion of the title that precedes it.
Following the patter in step 1, should we also call out the exact action here like... "Drag columns to change the order"
We are likely using the word sort too frequently. Could those two sentences be combined somehow? (e.g. "Use the column heading to sort on a single field or the popover for multiple fields."). Popover or Menu is my preference vs pop-up.
No suggestions
This one is a bit hard for me to read through... Could it be more succinct like "...to view, compare, and filter documents."

In general, the titles could be a little more consistent. There are two styles currently at play:
Direct: verb + noun
Sentence like: verb the _noun

This is looking great!

gchaps · 2022-05-10T23:22:02Z

Ryan, thanks for your input. Based on the feedback, here is an update to the text.

Step 1. no change

Add fields to the table
Click + to add the fields that interest you.

Step 2

Order the table columns
Drag columns to the order you want.

Step 3

Sort on one or more fields
Use the column heading to sort on a single field, or the popover for multiple fields.

Step 4

Change the row height
Adjust the number of lines to fit the contents. (no change to description)

Step 4

Expand documents
Click <-> to view, compare, and filter documents.

where <-> is the expand icon.

…tour_provider.tsx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com>

jughosta · 2022-05-12T08:09:25Z

@ryankeairns There is already inconsistency in the project with EuiTourStep font styles. In some files step description is wrapped with <EuiText size="s" .../> in others with a larger <EuiText .../> (as in our case).

jughosta · 2022-05-12T08:11:10Z

@gchaps @Heenawter @andreadelrio Thank you for your feedback and suggestions! Very helpful! ❤️

I addressed the latest comments.

jughosta · 2022-05-12T09:16:28Z

@elasticmachine merge upstream

jughosta · 2022-05-12T12:56:15Z

@elasticmachine merge upstream

jughosta · 2022-05-16T07:09:06Z

@elasticmachine merge upstream

kertal · 2022-05-16T11:56:22Z

ACK @jughosta , thx have been already playing with it, so it's time for the final review :)

kertal

Looking pretty good, before I finish the review, I've a question to @ghudgins about data-test-subj, I think there might more needed for our analysis tool, could you have a look? many thx

ghudgins · 2022-05-16T17:52:33Z

with discoverTourButtonNext and discoverTourButtonEnd we can isolate for the metrics to measure the health for this feature. LGTM!

kertal

Code LGTM, added some tiny suggestions 🎨 . Tested in Chrome, Firefox, Safari, works as expected. Great work! 🥳

...c/application/main/components/document_explorer_callout/document_explorer_update_callout.tsx

src/plugins/discover/public/application/main/components/sidebar/discover_sidebar.tsx

jughosta · 2022-05-17T09:02:28Z

@elasticmachine merge upstream

kibana-ci · 2022-05-17T10:08:34Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`discover`	444	448	+4

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`discover`	61	62	+1

Async chunks

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

id	before	after	diff
`discover`	405.5KB	410.8KB	+5.3KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`discover`	40.5KB	40.5KB	+46.0B

Unknown metric groups

API count

id	before	after	diff
`discover`	77	78	+1

History

💚 Build #44772 succeeded 7614081
💚 Build #44647 succeeded ce7d6d5
💚 Build #44436 succeeded 5edd1c2
💔 Build #44346 failed a1ab85e
💛 Build #44317 was flaky f91034c
💚 Build #43950 succeeded 7ad9033

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

cc @jughosta @andreadelrio @gchaps

* [Discover] Add "Take a tour" button to the Document Explorer callout * [Discover] Tmp * [Discover] Add a first Document Explorer tour step * [Discover] Add other Document Explorer tour steps * [Discover] Update tour steps positioning * [Discover] Add gifs to tour steps * [Discover] Refactor how tour steps are registered * [Discover] Add new step to the tour. Update tour steps text. * [Discover] Improve steps positioning * [Discover] Fix positioning for Add field step * [Discover] Add icons to tour steps * [Discover] Reorganize components * [Discover] Skip Columns step when it's not available * [Discover] Rename components * [Discover] Add some tests * [Discover] Fix positioning * [Discover] Fix props * [Discover] Render steps only if the tour is active * [Discover] Update gifs * [Discover] Add image alt text for gifs * [Discover] Tag the Take tour button * [Discover] Update text and tests * [Discover] Add more tests * [Discover] Rename assets directory * [Discover] Fix tour in mobile view. Improve steps positioning and animation. * [Discover] Update text in tour steps * [Discover] Update sort.gif * [Discover] Update image width * Update src/plugins/discover/public/components/discover_tour/discover_tour_provider.tsx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update src/plugins/discover/public/components/discover_tour/discover_tour_provider.tsx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * [Discover] Update sort.gif * [Discover] Fix code style Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

* wip I * add alert table state in case * [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' * add new API to get FeatureID form registrationContext and update UI to use this new API * rm dead code * [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' * remove unnecessary memo * adds tests for case view helpers * Move http call to API and add tests for getFeatureIds * fix type + unit test * add unit tests + cleanup * add new api integration test for _feature_ids * [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' * Fix small type creating typescript slowness * remove console log * use import type for validfeatureId * force any to improve typescript performance * Update APM (#132270) Co-authored-by: Renovate Bot <bot@renovateapp.com> * [ResponseOps][Docs] Updating ServiceNow docs with OAuth setup instructions (#131344) * Updating ServiceNow docs. Need screenshots * Adding screenshots * Fix nested screenshots and lists * Tweaks and screenshots * Updates * blergh * Apply suggestions from code review Co-authored-by: Lisa Cawley <lcawley@elastic.co> * Apply suggestions from code review Co-authored-by: Mike Côté <mikecote@users.noreply.github.com> Co-authored-by: lcawl <lcawley@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Mike Côté <mikecote@users.noreply.github.com> * Show polling options when 'Data streams' option is selected in the Console Settings modal. (#132277) * [Osquery] Make Osquery All with All base privillege (#130523) * [XY] Add normalizeTable function to correct works with esdocs (#131917) * Add normalizeTable function to correct works with esdocs * Fix types * Fix types * Fix CI * Fix CI * Some fixes * Remove fallback with min/max value for domain * Added tests * Some refactoring Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Yaroslav Kuznietsov <kuznetsov.yaroslav.yk@gmail.com> * [Osquery] Add default osquery_saved_query objects (#129461) * [Unified Search] Show error message for invalid date filter value (#131290) * feat: added show error message for invalid date * refact: move logic in HOC * feat: refactoring code and added translation * refact show error * refact: show error message * refact: remove translation * refactor: changed menu for show FilterEdit * fix: open/close popover * feat: field.type => KBN_FIELD_TYPES * feat: remove extra code with with input check and refactored filter item * feat: added tests and refactoring code * refact: getFieldValidityAndErrorMessage * feat: return isInvalid checking in valur input type for string, ip * Update navigation landing pages to use appLinks config (#132027) * Update navigation landing pages to use appLinks config * Please code review * align app links changes * Update links descriptions * Rollback title changes * Fix wrong links descriptions * Fix unit tests * Fix description Co-authored-by: semd <sergi.massaneda@elastic.co> * [Cloud Posture] add resource findings page flyout (#132243) * [Discover] Add a tour for Document Explorer (#131125) * [Discover] Add "Take a tour" button to the Document Explorer callout * [Discover] Tmp * [Discover] Add a first Document Explorer tour step * [Discover] Add other Document Explorer tour steps * [Discover] Update tour steps positioning * [Discover] Add gifs to tour steps * [Discover] Refactor how tour steps are registered * [Discover] Add new step to the tour. Update tour steps text. * [Discover] Improve steps positioning * [Discover] Fix positioning for Add field step * [Discover] Add icons to tour steps * [Discover] Reorganize components * [Discover] Skip Columns step when it's not available * [Discover] Rename components * [Discover] Add some tests * [Discover] Fix positioning * [Discover] Fix props * [Discover] Render steps only if the tour is active * [Discover] Update gifs * [Discover] Add image alt text for gifs * [Discover] Tag the Take tour button * [Discover] Update text and tests * [Discover] Add more tests * [Discover] Rename assets directory * [Discover] Fix tour in mobile view. Improve steps positioning and animation. * [Discover] Update text in tour steps * [Discover] Update sort.gif * [Discover] Update image width * Update src/plugins/discover/public/components/discover_tour/discover_tour_provider.tsx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * Update src/plugins/discover/public/components/discover_tour/discover_tour_provider.tsx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * [Discover] Update sort.gif * [Discover] Fix code style Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> * [XY] Add `minTimeBarInterval` arg (#128726) * Added `xAxisInterval` arg * Add validation * Add tests * Rename xAxisInterval to minTimeBarInterval and add validation * Fix imports * Add tests to validation * Fix conflicts * [CI] Auto-commit changed files from 'node scripts/precommit_hook.js --ref HEAD~1..HEAD --fix' * Fix tests Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> * do not use barrel imports * do not use barrel import * do not use barrel import * do not use barrel imports * do not use barrel import * import types * Add tests * Fix cases bundle size * Add more tests * [Fleet] Add new API to get current upgrades (#132276) * Add support of Data View switching for Agg-Based visualizations (#132184) * Add support of Data View switching for Agg-Based visualizations * fix CI * add use_date_view_updates * implement sync with state * cleanup * cleanup * cleanup * Update index.ts * fix PR comments * Update use_data_view_updates.ts * Update use_data_view_updates.ts Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> * [Security Solution] Responsive styling fixes (#131951) * [Discover] Add Analytics No Data Page (#131965) * [Discover] Add Analytics No Data Page * Make showEmptyPrompt parameter optional * Remove unused import * Remove unnecessary test * Fix test * Update failing test? * Update failing test * Changing the order of functional tests * Fix error handling * Addressing PR comments Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> * Remove barrel export from public index file * remove barrel export * Re-export missing exports * Turn off feature flag Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Esteban Beltran <esteban.beltran@elastic.co> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: Ying Mao <ying.mao@elastic.co> Co-authored-by: lcawl <lcawley@elastic.co> Co-authored-by: Mike Côté <mikecote@users.noreply.github.com> Co-authored-by: CJ Cenizal <cj.cenizal@elastic.co> Co-authored-by: Tomasz Ciecierski <ciecierskitomek@gmail.com> Co-authored-by: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com> Co-authored-by: Yaroslav Kuznietsov <kuznetsov.yaroslav.yk@gmail.com> Co-authored-by: Nodir Latipov <nodir.latypov@gmail.com> Co-authored-by: Pablo Machado <pablo.nevesmachado@elastic.co> Co-authored-by: semd <sergi.massaneda@elastic.co> Co-authored-by: Or Ouziel <or.ouziel@elastic.co> Co-authored-by: Julia Rechkunova <julia.rechkunova@elastic.co> Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> Co-authored-by: Christos Nasikas <christos.nasikas@elastic.co> Co-authored-by: Nicolas Chaulet <nicolas.chaulet@elastic.co> Co-authored-by: Alexey Antonov <alexwizp@gmail.com> Co-authored-by: Steph Milovic <stephanie.milovic@elastic.co> Co-authored-by: Maja Grubic <maja.grubic@elastic.co>

jughosta added release_note:enhancement Feature:Discover Discover Application backport:skip This PR does not require backporting Team:DataDiscovery Discover, search (data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL. t// v8.3.0 labels Apr 28, 2022

jughosta self-assigned this Apr 28, 2022

jughosta force-pushed the document-explorer-take-tour branch from 8f401ef to 548378c Compare April 28, 2022 13:28

gchaps assigned gchaps and unassigned jughosta May 2, 2022

jughosta self-assigned this May 3, 2022

jughosta force-pushed the document-explorer-take-tour branch 11 times, most recently from c95a56e to 38ee1c3 Compare May 10, 2022 12:03

jughosta marked this pull request as ready for review May 10, 2022 12:10

jughosta requested a review from a team as a code owner May 10, 2022 12:10

jughosta requested review from andreadelrio and gchaps May 10, 2022 12:11

gchaps reviewed May 10, 2022

View reviewed changes

[Discover] Add "Take a tour" button to the Document Explorer callout

0de46ce

Heenawter mentioned this pull request May 11, 2022

[Spacetime] [Discover] Add demo of possible in-product help to Discover #123888

Closed

jughosta and others added 4 commits May 12, 2022 09:57

[Discover] Update sort.gif

1b5b36f

[Discover] Update image width

d6cd452

Update src/plugins/discover/public/components/discover_tour/discover_…

24389ea

…tour_provider.tsx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com>

Update src/plugins/discover/public/components/discover_tour/discover_…

f91034c

…tour_provider.tsx Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com>

Merge branch 'main' into document-explorer-take-tour

a1ab85e

kibanamachine and others added 2 commits May 12, 2022 07:56

Merge branch 'main' into document-explorer-take-tour

5edd1c2

[Discover] Update sort.gif

ce7d6d5

Merge branch 'main' into document-explorer-take-tour

7614081

jughosta requested a review from kertal May 16, 2022 08:13

kertal reviewed May 16, 2022

View reviewed changes

kertal self-requested a review May 17, 2022 05:35

kertal approved these changes May 17, 2022

View reviewed changes

kibanamachine and others added 2 commits May 17, 2022 04:02

Merge branch 'main' into document-explorer-take-tour

85729fb

[Discover] Fix code style

a8eec09

jughosta merged commit ca5398a into elastic:main May 17, 2022

jughosta deleted the document-explorer-take-tour branch May 17, 2022 11:00

Heenawter mentioned this pull request Jun 2, 2022

[Dashboard] Add tour to Dashboard #131960

Closed

6 tasks

kertal mentioned this pull request Jun 7, 2022

[Discover] Add links to documentation for Document Explorer #126604

Closed

6 tasks

Conversation

jughosta commented Apr 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checklist

Uh oh!

elasticmachine commented May 10, 2022

Uh oh!

gchaps left a comment

Choose a reason for hiding this comment

Uh oh!

ryankeairns commented May 10, 2022

Uh oh!

gchaps commented May 10, 2022

Uh oh!

jughosta commented May 12, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jughosta commented May 12, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jughosta commented May 12, 2022

Uh oh!

jughosta commented May 12, 2022

Uh oh!

jughosta commented May 16, 2022

Uh oh!

kertal commented May 16, 2022

Uh oh!

kertal left a comment

Choose a reason for hiding this comment

Uh oh!

ghudgins commented May 16, 2022

Uh oh!

kertal left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jughosta commented May 17, 2022

Uh oh!

kibana-ci commented May 17, 2022

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Page load bundle

API count

History

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

10 participants

jughosta commented Apr 28, 2022 •

edited

Loading

jughosta commented May 12, 2022 •

edited

Loading

jughosta commented May 12, 2022 •

edited

Loading