[Stateful sidenav] User profile opt in/out by sebelga · Pull Request #179270 · elastic/kibana

sebelga · 2024-03-22T16:19:18Z

As part of the onboarding users to the new "solution" navigation, we want to allow the user to opt out and revert to the current "classic" navigation.

In this PR I've added a toggle in the user profile dropdown to allow reverting to the "classic" navigation.

How to test

Add the following setting in kibana.yml

navigation.solutionNavigation.featureOn: true
navigation.solutionNavigation.enabled: true
navigation.solutionNavigation.optInStatus: visible
navigation.solutionNavigation.defaultSolution: es
xpack.cloud.id: "ftr_fake_cloud_id:aGVsbG8uY29tOjQ0MyRFUzEyM2FiYyRrYm4xMjNhYmM="
xpack.cloud.base_url: "https://cloud.elastic.co"
xpack.cloud.deployment_url: "/deployments/deploymentId"
xpack.cloud.organization_url: "/account/"
xpack.cloud.billing_url: "/billing/"
xpack.cloud.profile_url: "/user/settings/"
xpack.cloud.performance_url: "/performance/"
xpack.cloud.users_and_roles_url: "/users-and-roles/"

Lauch Kibana
There should be a toggle in the user menu to opt out or back in of the new navigation

Screenthot

Note on implementation changes

I've also changed the way the project navigation is initiated by requiring an id to be passed. This simplified the implementation to detect if we try to initiate a navigation tree multiple times.

sebelga · 2024-03-22T17:32:50Z

/ci

sebelga · 2024-03-22T17:58:17Z

/ci

sebelga · 2024-03-24T19:03:42Z

/ci

sebelga · 2024-03-25T10:06:18Z

/ci

sebelga · 2024-03-25T11:58:14Z

/ci

sebelga · 2024-03-25T17:43:52Z

/ci

sebelga · 2024-03-25T22:18:44Z

/ci

sebelga · 2024-03-26T09:19:51Z

/ci

…fix'

kc13greiner

Still reviewing/testing! but wanted to bring up using uiSettingsClient for theme asap

...ore/chrome/core-chrome-browser-internal/src/project_navigation/project_navigation_service.ts

...k/plugins/cloud_integrations/cloud_links/public/maybe_add_cloud_links/theme_darkmode_hook.ts

sebelga · 2024-03-26T14:16:02Z

wanted to bring up using uiSettingsClient for theme asap

Thanks for reviewing @kc13greiner. This PR is not about dark mode toggle. I just slightly refactored the file to make it clearer and fix an issue when interacting with multiple user profile settings.

If you think a different approach should be done for the dark mode toggle it would be better to open a separate issue and address it in a different PR.

kc13greiner

Im not sure how it should default if UserProfiles is not available, but currently it doesn't let the user toggle it/its stuck in "new mode"

...ore/chrome/core-chrome-browser-internal/src/project_navigation/project_navigation_service.ts

kc13greiner · 2024-03-26T16:29:21Z

src/plugins/navigation/public/plugin.tsx

    const chrome = core.chrome as InternalChromeStart;

+    if (security) {
+      this.userProfileOptOut$ = security.userProfiles.userProfileLoaded$.pipe(


UserProfiles isn't guaranteed to be available (not sure exactly where to link this discussion 😅 )

How should this feature behave in this case? I.e. anonymous user

UserProfiles isn't guaranteed to be available (not sure exactly where to link this discussion 😅 )

I tried to outline all cases when user doesn't have a profile (== profile id) here #175431 (comment) (TL;DR: anonymous users, interactive users authenticated via HTTP proxy, non-interactive users or HTTP clients).

Thanks @azasypkin . I think for this use case with user facing UI we can discard non-interactive users or HTTP clients.
As you can see on this change, I disable the user profile (updating a new enabled$ Observable) if we receive a 404 when fetching the profile. This correspond to this logic on the server.

sebelga · 2024-03-26T16:33:36Z

Im not sure how it should default if UserProfiles is not available, but currently it doesn't let the user toggle it/its stuck in "new mode"

Can you provide me the steps to reproduce this config (with security but without user profile)?

kc13greiner · 2024-03-26T16:48:20Z

Im not sure how it should default if UserProfiles is not available, but currently it doesn't let the user toggle it/its stuck in "new mode"

Can you provide me the steps to reproduce this config (with security but without user profile)?

Of course! The following will setup an anonymous user in KB:

in your kibana.yml:

xpack.security.authc.providers:
  basic.basic1:
    order: 0
  anonymous.anonymous1:
    order: 1
    credentials:
      username: "anonymous_user"
      password: "changeme"

Login first as elastic/changeme, navigate to the Users page.

Create a user anonymous_user/changeme (or however you chose to list it in the config above)

Logout, then when at the login page, click the Login as Guest option

More info available here!

…er-profile-toggle

sebelga · 2024-03-27T15:44:28Z

Thanks for the info @kc13greiner, I handled the case for anonymous users with no user profile data in 88f0ee0
Can you have another look? Cheers 👍

…fix'

efegurkan

LGTM!

code review only

kc13greiner · 2024-03-28T12:58:56Z

ACK: will review shortly!

kc13greiner

Thanks for making these changes, just a few remaining questions!

The case for anon user does work now, but I don't know if we'd want to show the toggle in the event of any non-successful retrieval of UserProfile.

Question: Can the observable logic be consolidated to just userProfile$ having data?

x-pack/plugins/security/public/account_management/user_profile/user_profile_api_client.ts

src/plugins/navigation/public/plugin.tsx

Samiul-TheSoccerFan

Code LGTM.
If I turned on classic navigation, currently this is how the Search navigation menu looks like:

Is this expected?

sebelga · 2024-04-01T10:30:30Z

Can the observable logic be consolidated to just userProfile$ having data?

The userProfileLoaded$ Observable that was put in place to inform consumers if the user profile has been loaded was mainly to avoid an annoying flickering of the whole UI when switching between a black header (classic nav) to a white one.
Indeed, until the user profile is loaded we don't know if the user has opted out or not. So undefined is not enough information. But undefined after the user profile is loaded has a different meaning.
Hope that clarifies why I implemented it the way it is.

currently this is how the Search navigation menu looks like

@Samiul-TheSoccerFan I am currently working in a PR that will bring the correct IA for oblt and search. I will also fix the issue you mention here so great catch, fix it's coming in a future PR 👍
As a reminder, all of the changes for the new nav are behind a feature flag and not released to any users.

…er-profile-toggle

kibana-ci · 2024-04-01T16:56:46Z

💚 Build Succeeded

Buildkite Build
Commit: e64f8e7

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`cloudLinks`	43	44	+1
`navigation`	74	87	+13
total			+14

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
`@kbn/user-profile-components`	21	22	+1
`serverless`	23	24	+1
total			+2

Async chunks

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

id	before	after	diff
`navigation`	21.9KB	21.9KB	+1.0B
`security`	579.7KB	579.9KB	+179.0B
total			+180.0B

Page load bundle

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

id	before	after	diff
`cloudLinks`	15.5KB	16.0KB	+499.0B
`core`	405.4KB	405.7KB	+293.0B
`navigation`	16.2KB	21.4KB	+5.3KB
`security`	65.6KB	66.6KB	+1.1KB
`securitySolutionServerless`	36.1KB	36.1KB	+11.0B
`serverless`	11.0KB	11.0KB	+4.0B
`serverlessObservability`	26.7KB	26.7KB	+7.0B
`serverlessSearch`	19.4KB	19.4KB	+9.0B
total			+7.2KB

Unknown metric groups

API count

id	before	after	diff
`@kbn/security-plugin-types-public`	49	53	+4
`@kbn/user-profile-components`	80	81	+1
`serverless`	24	25	+1
total			+6

References to deprecated APIs

id	before	after	diff
`navigation`	0	2	+2

History

💔 Build #200304 failed 8c32650
💔 Build #200289 failed be1f31d
💛 Build #199827 was flaky 59e8b87
💔 Build #199788 failed e59f6c2
💛 Build #199497 was flaky 4a4e8f7

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

cc @sebelga

kc13greiner

Thanks for the explanation 🚀

sebelga self-assigned this Mar 22, 2024

sebelga added release_note:skip Skip the PR/issue when compiling release notes Feature:Chrome Core's Chrome UI (sidenav, header, breadcrumbs) labels Mar 22, 2024

sebelga force-pushed the stateful-sidenav/user-profile-toggle branch from a574e06 to 1105ebf Compare March 24, 2024 19:03

sebelga force-pushed the stateful-sidenav/user-profile-toggle branch from fb6929c to 60cc59a Compare March 25, 2024 17:42

sebelga force-pushed the stateful-sidenav/user-profile-toggle branch from b729482 to a0db6b4 Compare March 25, 2024 22:18

sebelga force-pushed the stateful-sidenav/user-profile-toggle branch from a0db6b4 to 7e94b65 Compare March 26, 2024 09:19

Sébastien Loix and others added 15 commits March 26, 2024 11:56

Require id to be passed when initialising the navigation

b5b02b3

Refactor theme darkmode hook

ae01718

Add toggle in user menu dropdown to opt out of new nav

3312979

Don't update state if not mounted

194dd13

Correctly set the default value for toggle

f6ba75b

Create immutable snapshot before updating user profile

8da3ebd

[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…

8e24a21

…fix'

Fix jest test + refactor

e4879cb

Always return ChromeStyle value

99e7073

Set chromeStyle to classic if feature flag is off

a09dd53

Don't set classic chrome on serverless

38f9fec

Fix toggle dark mode initial state

798f4d0

Expose Observable to indicate if the solution nav is enabled or not

b03e448

Fix TS issue

f0e55d7

Fetch current user profile on plugin start()

5f4c2b2

kc13greiner requested changes Mar 26, 2024

View reviewed changes

Add missing params

3d76ee3

kc13greiner requested changes Mar 26, 2024

View reviewed changes

Remove unused param

4a4e8f7

shahzad31 approved these changes Mar 27, 2024

View reviewed changes

Sébastien Loix added 2 commits March 27, 2024 15:42

Handle anonymous users with no user profile

88f0ee0

Merge remote-tracking branch 'upstream/main' into stateful-sidenav/us…

48545b2

…er-profile-toggle

semd approved these changes Mar 27, 2024

View reviewed changes

kibanamachine and others added 2 commits March 27, 2024 15:58

[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…

e59f6c2

…fix'

Update jest snapshot

59e8b87

efegurkan approved these changes Mar 28, 2024

View reviewed changes

sebelga requested a review from kc13greiner March 28, 2024 10:27

kc13greiner requested changes Mar 28, 2024

View reviewed changes

Samiul-TheSoccerFan reviewed Mar 28, 2024

View reviewed changes

sebelga requested a review from kc13greiner April 1, 2024 10:25

Sébastien Loix added 3 commits April 1, 2024 11:31

Merge remote-tracking branch 'upstream/main' into stateful-sidenav/us…

be1f31d

…er-profile-toggle

Merge branch 'main' into stateful-sidenav/user-profile-toggle

8c32650

Merge branch 'main' into stateful-sidenav/user-profile-toggle

e64f8e7

kc13greiner approved these changes Apr 1, 2024

View reviewed changes

sebelga merged commit b61b944 into elastic:main Apr 2, 2024

sebelga deleted the stateful-sidenav/user-profile-toggle branch April 2, 2024 08:51

kibanamachine added v8.14.0 backport:skip This PR does not require backporting labels Apr 2, 2024

Conversation

sebelga commented Mar 22, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to test

Screenthot

Note on implementation changes

Uh oh!

sebelga commented Mar 22, 2024

Uh oh!

sebelga commented Mar 22, 2024

Uh oh!

sebelga commented Mar 24, 2024

Uh oh!

sebelga commented Mar 25, 2024

Uh oh!

sebelga commented Mar 25, 2024

Uh oh!

sebelga commented Mar 25, 2024

Uh oh!

sebelga commented Mar 25, 2024

Uh oh!

sebelga commented Mar 26, 2024

Uh oh!

kc13greiner left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sebelga commented Mar 26, 2024

Uh oh!

kc13greiner left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kc13greiner Mar 26, 2024

Choose a reason for hiding this comment

Uh oh!

azasypkin Mar 27, 2024

Choose a reason for hiding this comment

Uh oh!

sebelga Mar 27, 2024

Choose a reason for hiding this comment

Uh oh!

sebelga commented Mar 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kc13greiner commented Mar 26, 2024

Uh oh!

sebelga commented Mar 27, 2024

Uh oh!

efegurkan left a comment

Choose a reason for hiding this comment

Uh oh!

kc13greiner commented Mar 28, 2024

Uh oh!

kc13greiner left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Samiul-TheSoccerFan left a comment

Choose a reason for hiding this comment

Uh oh!

sebelga commented Apr 1, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kibana-ci commented Apr 1, 2024

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Page load bundle

API count

References to deprecated APIs

History

Uh oh!

kc13greiner left a comment

sebelga commented Mar 22, 2024 •

edited

Loading

sebelga commented Mar 26, 2024 •

edited

Loading

sebelga commented Apr 1, 2024 •

edited

Loading