Kibana: [Lens] Add tour component to time filter when there is no data

[rayafratkina]

Describe a specific use case for the feature:
When a new user tries Lens and there is no data in their index in the last 15 min (which is the default time filter), the empty state they see is very confusing.
They do not know that you can change the time filter, so it appears that Lens is broken.

Proposed solution:
Add an EuiTour component that tells the user that the time range should be expanded, as shown in this mock

Other solutions that are not being proposed

• Automatically expand time range to include some data
• Sample more than 500 documents

[elasticmachine]

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

[rayafratkina]

Not the same issue, but related: https://github.com/elastic/kibana/issues/58330

[AlonaNadler]

Ideally, we should do find a way to automatically expand time range to include some data but I know it might be a complex thing to solve.

To me, it seems that creating a dedicated no data empty state leveraging design (@cchaos ). We can make sure users are not stuck in the empty screen and know what they should do. It should be a quick win that can solve this to most users.

[cchaos]

@AlonaNadler And I have come up with an idea that I will mock up and should be able to initiate the implementation of. Part if it will also be changing the callout text #58737 which I should be able to handle as well.

[wylieconlon]

This issue describes the problem well, but I don't think we decided on the solution. I've started a new issue proposing a specific solution: https://github.com/elastic/kibana/issues/67203

[cchaos]

As mentioned in https://github.com/elastic/kibana/issues/67203#issuecomment-634248757

I finally got around to creating a mock as to how we can accomplish pushing them towards the time filter using EuiTour. The implementation part might be a bit tricky being that the time picker is a global component and not specific to Lens.

Figma proto

[wylieconlon]

@cchaos I think this is a good proposal, so I'm going to rename this issue to focus on adding the tour component to the time picker when there is missing data.

[timroes]

As of our planning: this tour popover should be implemented once inside the filter/query/timepicker bar and the app can trigger this, so we can reuse this across different applications (like visualize).

[flash1293]

cc @elastic/kibana-app-arch To let you know as this will need to be implemented in the top nav component which is owned by you. Kibana app can work on this, but there will probably be some discussions around how the functionality should be provided.

[flash1293]

To implement:

• Use local storage to store "Don't show again" decision of the user
• The query bar simply takes an additional object as prop which contains the props of the tour component. Lens manages when and hhow the popover will shown
• Within Lens the datasource controls whether the tour component is shown. Probably introduce callback as part of datasource props which can be called to show the "no data" tour.
• Look into whether we can improve state management while fixing this.