Per User Dark Mode Preference #151507

kc13greiner · 2023-02-16T20:13:57Z

Summary

Allow user's to set their desired theme on their User Profile

How to test

Login as a non-cloud user, navigate to User Profile:

Release Note

Users can now select their theme preference for Kibana in their User Profile

…fix'

…-ref HEAD~1..HEAD --fix'

…ular dep

…-ref HEAD~1..HEAD --fix'

…fix'

… to extract UserSettings

…fix'

kc13greiner · 2023-02-28T18:21:01Z

...ges/core/ui-settings/core-ui-settings-server-internal/src/clients/ui_settings_user_client.ts

+
+    return result;
+  }
+


The following methods are left stubbed to complete the interface. While not used currently, the savedObjectsClient is available here for a future iteration of User Settings that may be stored/migrated to SO

Is the intention to create one SO per user to hold other User Settings? What's the benefit we'd get from doing so instead of storing every User Setting in the user's profile? Any known limitations?

I don't think there are any limitations for for simple settings, like Dark Mode, being stored in the User Profile, but Im sure there could arise a scenario that wouldn't work.

In my initial meeting with the core team and discussions on my brainstorming doc, the team expressed that there might be a need to store User Settings in SO eventually, or at least, be able to migrate the settings from User Profiles to SO in the future.

I wanted the client to behave like the regular/global client so I included the methods stubbed so they would fulfill the interface and be available if we do need to move that direction

kc13greiner · 2023-02-28T18:22:26Z

packages/core/ui-settings/core-ui-settings-server-internal/src/ui_settings_service.ts

      return UiSettingsClientFactory.create(options) as ClientType<T>;
    };
  }

+  private getUserClientFactory<T extends UiSettingsScope>(): (
+    savedObjectsClient: SavedObjectsClientContract,


See comment here

kc13greiner · 2023-02-28T18:36:49Z

x-pack/plugins/security/server/user_profile/index.ts

+  userSettingsServiceStart,
+  uiSettingServiceStart,
+}: SetupUiSettingsServiceParams) {
+  uiSettingServiceStart.setUserProfileSettingsClientFactoryProvider(() => () => {


I was following the ClientFactoryProvider patter I saw utilized with the SO client, but this could probably be simplified.

ryankeairns · 2023-03-01T19:00:18Z

Awesome start! I have added the design team as reviewers once you are ready. @MichaelMarcialis in particular worked on the profile screen design.

…/user_profile.tsx Co-authored-by: Michael Marcialis <michael.l.marcialis@gmail.com>

gchaps · 2023-04-24T23:03:56Z

x-pack/plugins/security/public/account_management/user_profile/user_profile.tsx

+      description={
+        <FormattedMessage
+          id="xpack.security.accountManagement.userProfile.themeFormGroupDescription"
+          defaultMessage="Select the interface theme that you wish to apply across the platform."


I suggest cutting this down a bit. Here are some suggestions:

Select the appearance of your interface.
Select the theme to apply across the interface.
Select the them to apply across the platform.
Choose between a light or dark theme, or use the default system setting. (ok this is longer, but it is more specific)

I've switched it to the first option! Thanks for the suggestions.

gchaps · 2023-04-24T23:04:19Z

x-pack/plugins/security/public/account_management/user_profile/user_profile.tsx

+            <FormLabel for="data.userSettings.darkMode">
+              <FormattedMessage
+                id="xpack.security.accountManagement.userProfile.userSettings.theme"
+                defaultMessage="Theme mode"


Can this just say "Mode"

Fixed in latest commit!

gchaps · 2023-04-24T23:06:09Z

x-pack/plugins/security/public/account_management/user_profile/user_profile.tsx

+            legend={i18n.translate(
+              'xpack.security.accountManagement.userProfile.userSettings.themeGroupDescription',
+              {
+                defaultMessage: 'Kibana Theme',


I don't know where this appears, but can we eliminate the word "Kibana"? Maybe "Elastic theme"? We typically use sentence case.

Changed to Elastic theme

…roper themeTags will be set

MichaelMarcialis

Thanks for making those changes, @kc13greiner! I'm leaving two last comments below for your re-review, but nothing that appears to be a show-stopper. Approving now so I don't hold you up, assuming you're able to address them.

I had an open question/comment in my previous review regarding the space-level advanced setting for theme mode and the "Default" button wording. Any thoughts there? Per User Dark Mode Preference #151507 (comment)

MichaelMarcialis · 2023-04-25T14:02:10Z

x-pack/plugins/security/public/account_management/user_profile/user_profile.tsx

+        />
+      }
+    >
+      <EuiFlexItem>


I believe this EuiFlexItem can be removed (now that the parent EuiFlexGroup was removed).

Fixed in latest commit!

kibana-ci · 2023-04-25T19:17:04Z

💚 Build Succeeded

Buildkite Build
Commit: f035146

Metrics [docs]

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/core-user-settings-server`	-	6	+6
`@kbn/core-user-settings-server-internal`	-	4	+4
`@kbn/core-user-settings-server-mocks`	-	3	+3
total			+13

Async chunks

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

id	before	after	diff
`security`	563.4KB	565.8KB	+2.5KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
`@kbn/core-user-settings-server-internal`	-	1	+1

Unknown metric groups

API count

id	before	after	diff
`@kbn/core-lifecycle-server`	33	34	+1
`@kbn/core-user-settings-server`	-	6	+6
`@kbn/core-user-settings-server-internal`	-	4	+4
`@kbn/core-user-settings-server-mocks`	-	3	+3
total			+14

ESLint disabled line counts

id	before	after	diff
`enterpriseSearch`	17	19	+2
`securitySolution`	397	400	+3
total			+5

Total ESLint disabled count

id	before	after	diff
`enterpriseSearch`	18	20	+2
`securitySolution`	477	480	+3
total			+5

History

💔 Build #123124 failed 0a4cb6d
💔 Build #123098 failed 0aa3a56
💔 Build #123052 failed 084ed22
💚 Build #122991 succeeded ca952f3
💚 Build #122909 succeeded 026d562

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

EricPSU · 2023-04-25T21:28:52Z

@kc13greiner ::thumbs-up::

formgeist · 2023-05-02T11:59:12Z

Just for reference; I noticed there were some inconsistencies in the how dark mode was handled if it had been set in the Space vs. the user profile. #156362

kc13greiner and others added 23 commits February 13, 2023 15:36

v1 tracer

de37d80

Adding comments and clean-up

105cb80

Removing unused console log

fccecf4

Merge branch 'main' into feature/darkmode_discovery

b8bdc52

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

d64e703

…fix'

Merge branch 'main' into feature/darkmode_discovery

3f9a94e

Circular reference?

93dc347

[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…

9917e06

…-ref HEAD~1..HEAD --fix'

Comment updates and remove interface implementation in search of circ…

f77fe84

…ular dep

[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…

859a52c

…-ref HEAD~1..HEAD --fix'

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

223b044

…fix'

Moving types around and renaming

21d57b8

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

f6e5bc0

…fix'

Unnecessary code removal and using import type notation

00a2487

Reverting unnecessary comment/spacing fixes. Fixing own commments

46f328c

Adding logging, changing how request is added, and pushing down logic…

5debac8

… to extract UserSettings

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

3ff44ba

…fix'

Removing sec plugin references from files

641ae67

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

50dd1a5

…fix'

Adding form components for theme on UserProfile

f13157b

Fixing form field

c420176

Adding reload toast when Theme is changed

6e2db48

Cleaning up comments

871bfb8

kc13greiner commented Feb 28, 2023

View reviewed changes

Reverting unnecessary change

ad9c51f

kc13greiner commented Feb 28, 2023

View reviewed changes

One last comment update

2dd9bf9

ryankeairns requested a review from a team March 1, 2023 18:58

kc13greiner and others added 4 commits April 24, 2023 13:38

Update x-pack/plugins/security/public/account_management/user_profile…

32b04fc

…/user_profile.tsx Co-authored-by: Michael Marcialis <michael.l.marcialis@gmail.com>

Update x-pack/plugins/security/public/account_management/user_profile…

498c9c0

…/user_profile.tsx Co-authored-by: Michael Marcialis <michael.l.marcialis@gmail.com>

Changing button order and form control order based on PR feedback

3b5ed27

Merge branch 'main' into feature/darkmode_discovery

ff0a571

kc13greiner requested a review from MichaelMarcialis April 24, 2023 18:00

gchaps reviewed Apr 24, 2023

View reviewed changes

kc13greiner added 3 commits April 25, 2023 07:30

PR feedback on messaging

026d562

Providing UserSettingsServiceSetup to the bootstrap_renderer so the p…

0b9c993

…roper themeTags will be set

Merge branch 'main' into feature/darkmode_discovery

ca952f3

MichaelMarcialis approved these changes Apr 25, 2023

View reviewed changes

kc13greiner added 5 commits April 25, 2023 11:02

PR feedback

c076fcd

Merge branch 'main' into feature/darkmode_discovery

084ed22

Merge branch 'main' into feature/darkmode_discovery

0aa3a56

Merge branch 'main' into feature/darkmode_discovery

0a4cb6d

Merge branch 'main' into feature/darkmode_discovery

f035146

kc13greiner merged commit b66df87 into elastic:main Apr 25, 2023

kibanamachine added the backport:skip This commit does not require backporting label Apr 25, 2023

legrego mentioned this pull request Apr 25, 2023

Dark Mode per User #48687

Closed

gchaps mentioned this pull request Apr 25, 2023

[DOCS] Add documentation for 8.8 #155793

Closed

19 tasks

kc13greiner mentioned this pull request Apr 26, 2023

UserSettingsService setup() method should not be called after start() has been initiated #155949

Closed

formgeist mentioned this pull request May 2, 2023

[APM] Bug: Dark mode set by user profile is not using correct dark styles #156362

Open

sebelga mentioned this pull request Aug 3, 2023

[ColorScheme] Update from avatar menu #161214

Merged

sebelga mentioned this pull request Dec 7, 2023

Set Default Kibana Theme to Dark Mode #172521

Closed

5 tasks

pgayvallet mentioned this pull request Dec 22, 2023

[User profile] Add support for system theme #173895

Closed

kc13greiner deleted the feature/darkmode_discovery branch January 26, 2024 20:53

legrego mentioned this pull request Mar 8, 2024

Per-user profiles, settings in Kibana #17888

Open

ThomThomson mentioned this pull request Jun 11, 2024

Allow dark mode to be set on a user basis #185949

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Per User Dark Mode Preference #151507

Per User Dark Mode Preference #151507

kc13greiner commented Feb 16, 2023 •

edited

Loading

kc13greiner Feb 28, 2023

afharo Mar 2, 2023

kc13greiner Mar 6, 2023

kc13greiner Feb 28, 2023

kc13greiner Feb 28, 2023

ryankeairns commented Mar 1, 2023

gchaps Apr 24, 2023

kc13greiner Apr 25, 2023

gchaps Apr 24, 2023

kc13greiner Apr 25, 2023

gchaps Apr 24, 2023

kc13greiner Apr 25, 2023

MichaelMarcialis left a comment

MichaelMarcialis Apr 25, 2023

kc13greiner Apr 25, 2023

kibana-ci commented Apr 25, 2023

API count

ESLint disabled line counts

Total ESLint disabled count

EricPSU commented Apr 25, 2023

formgeist commented May 2, 2023

Per User Dark Mode Preference #151507

Per User Dark Mode Preference #151507

Conversation

kc13greiner commented Feb 16, 2023 • edited Loading

Summary

How to test

Release Note

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ryankeairns commented Mar 1, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MichaelMarcialis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kibana-ci commented Apr 25, 2023

💚 Build Succeeded

Metrics [docs]

Public APIs missing comments

Async chunks

Public APIs missing exports

API count

ESLint disabled line counts

Total ESLint disabled count

History

EricPSU commented Apr 25, 2023

formgeist commented May 2, 2023

kc13greiner commented Feb 16, 2023 •

edited

Loading