Introduce appearance user controls

[KrooshalUX]

UX guidance

To support the upcoming introduction of Next theme, I would like to introduce controls outside of Advanced Settings that empower end users to control theme and screen mode custom to their experience.

Current experience
Today, administrators can set theme and screen mode defaults for the entire application through controls within Advanced Settings. However, individual users may want to switch between Light and Dark modes to suit their needs, but lack permissions to save changes within Advanced Settings.

User Controls North Star
Currently the security plugin provides list items within EuiPopover. The recommended component to utilize would be EuiContextMenu. Below you can see a proposal that 1) Shows the current User menu in the style of EuiContextMenu 2) Introduces the Appearance category 3) eliminates the need for EuiModal, as EuiContextMenu allows nested custom children, including composed forms.

Design

Description

-User sees EuiCallOut set to warning with message that these settings are user specific. Link user to Advanced Settings and documentation - User can set v7 (current) or next as the theme - User can set dark, light or automatic as the mode - Both of these settings are saved in a user object. This allows these settings to be retained across devices, and do not impact the defaults set by the administrator. - When a user saves these settings, no page refresh should be required -Link user to theme feedback mechanism

Alternative UI options

• Introduce EuiContextMenu and Appearance category, but continue to surface up setting controls in EuiModal as they are today
• Add Appearance category to existing EuiPopover and provide Appearance controls in EuiModal style
• In the event a page refresh is required, button copy should read "Save and refresh", and EuiCallOut should be presented within the EuiModal explaining that work will be lost on refresh.

Tech Design notes

There are a couple ways we can break this down into smaller tasks that allow us to develop this feature iteratively.

• [User Appearance] Create appearance controls UI component in the chrome service
• [User Appearance] Add getter/setter APIs for user/session-specific appearance preferences
• [User Appearance] Update theme/mode selection logic to combine and resolve user/vs stack appearance settings
• [User Appearance] Refactor existing code paths to use a single source of truth for theme info, including SASS, js, and json dependencies
• [User Appearance] Design user prefs storage system based on security plugin user model
• [User Appearance] Integrate appearance controls into security-dashboards plugin
• [User Appearance] Migrate user menu from security-dashboards to OpenSearch Dashboards core, with extensibility
• [User Appearance] Build live-theme application system to avoid page refresh/reload on mode changes