-
Notifications
You must be signed in to change notification settings - Fork 8.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Search Session] Revamp search session indicator UI and tour. #89703
Conversation
because removed debounce when switching to NONE state
Pinging @elastic/kibana-app-services (Team:AppServices) |
@elasticmachine merge upstream |
@elasticmachine merge upstream |
After discussing with @gchaps , here is where we ended up with the copy.
Session saved that is in progress:
Session saved that was complete:
I am introducing 2 new icons that are slight variants to current icons. My hope is that these help introduce these new concepts, but aren't using icons that are potentially known for other things in Kibana. In regards to the loading / clock icon, this will make more sense when we introduce the time stamp. However, I think they still work without it. I know I'm suggesting a departure from the restored state icon, but I still think it's important to have that continuity from management with a green checkmark, so the dashboard with a green checkmark. This is why I did a slight variation on this to suggest the subtle difference between this view, compared to the view if I stay on the page and it completes. If we think the restored state does not provide enough indication that the time range is set to absolute, I would suggest using the tour component for this and highlighting the date picker. Example below: This is not final copy |
}: SearchSessionIndicatorDeps): React.FC => { | ||
const isAutoRefreshEnabled = () => !timeFilter.getRefreshInterval().pause; | ||
const isAutoRefreshEnabled$ = timeFilter | ||
.getRefreshIntervalUpdate$() | ||
.pipe(map(isAutoRefreshEnabled), distinctUntilChanged()); | ||
|
||
const debouncedSessionServiceState$ = sessionService.state$.pipe( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Couldn't you listen to the appId$
change instead?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No, for example: navigating from a dashboard page to a dashboard listing page
Done!
Created an issue, will prioritize and work in separate pr: #90028 |
@elasticmachine merge upstream |
@gchaps and I were trying to finalize the copy for the tour component, but we had a few questions.
Gail, let me know if I missed any of our questions. And let me know if this is not the right issue for this discussion. |
…i-revamp # Conflicts: # x-pack/test/send_search_to_background_integration/services/search_sessions.ts # x-pack/test/send_search_to_background_integration/tests/apps/management/search_sessions/sessions_management.ts
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
kibana-qa changes LGTM
@elasticmachine merge upstream |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good! Thanks for working through all the last minute design edits!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tiny Dashboard change LGTM. Code only review.
The new designs are looking awesome, can't wait to see them in master!
ACK, code LGTM, will test tomorrow morning |
@elasticmachine merge upstream |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
KibanaApp owned code LGTM, tested locally in Chrome, works and looks as beautiful as expected 👍
💚 Build SucceededMetrics [docs]Module Count
Async chunks
Page load bundle
History
To update your PR or re-run it, just comment with: |
Summary
Part of #61738
Doing a small search session indicator UI closer to recent figma + adding a Tour like functionality when can auto-opens in the first run.
Please note, out of scope in this PR comparing to Figma:
To enable feature in kibana and to kibana.yml:
To play in the storybook:
Tour
As per figma we agreed instead of a separate tour just-auto open the popover in the following cases:
Popover is auto-opened once and info about whether it was opened is persisted in local storage.
Checklist
Delete any items that are not applicable to this PR.
For maintainers