[Theme] configure appearance color mode

packages/core/user-settings/core-user-settings-server-internal/src/user_settings_service.test.ts

@@ -70,6 +70,23 @@ describe('#setup', () => {
     });
   });
 
+  it('fetches userSettings when client is set and returns `system` when `darkMode` is set to `system`', async () => {
+    startDeps.userProfile.getCurrent.mockResolvedValue(createUserProfile('system'));
+
+    const { getUserSettingDarkMode } = service.setup();
+    service.start(startDeps);
+
+    const kibanaRequest = httpServerMock.createKibanaRequest();
+    const darkMode = await getUserSettingDarkMode(kibanaRequest);
+
+    expect(darkMode).toEqual('system');
+    expect(startDeps.userProfile.getCurrent).toHaveBeenCalledTimes(1);
+    expect(startDeps.userProfile.getCurrent).toHaveBeenCalledWith({
+      request: kibanaRequest,
+      dataPath: 'userSettings',
+    });
+  });
+
   it('fetches userSettings when client is set and returns `undefined` when `darkMode` is set to `` (the default value)', async () => {
     startDeps.userProfile.getCurrent.mockResolvedValue(createUserProfile(''));
 
@@ -87,6 +104,23 @@ describe('#setup', () => {
     });
   });
 
+  it('fetches userSettings when client is set and returns `undefined` when `darkMode` is set to `space_default`', async () => {
+    startDeps.userProfile.getCurrent.mockResolvedValue(createUserProfile('space_default'));
+
+    const { getUserSettingDarkMode } = service.setup();
+    service.start(startDeps);
+
+    const kibanaRequest = httpServerMock.createKibanaRequest();
+    const darkMode = await getUserSettingDarkMode(kibanaRequest);
+
+    expect(darkMode).toEqual(undefined);
+    expect(startDeps.userProfile.getCurrent).toHaveBeenCalledTimes(1);
+    expect(startDeps.userProfile.getCurrent).toHaveBeenCalledWith({
+      request: kibanaRequest,
+      dataPath: 'userSettings',
+    });
+  });
+
   it('does not fetch userSettings when client is not set, returns `undefined`, and logs a debug statement', async () => {
     const { getUserSettingDarkMode } = service.setup();
 

packages/core/user-settings/core-user-settings-server-internal/src/user_settings_service.ts

@@ -64,11 +64,18 @@ export class UserSettingsService {
   }
 }
 
+/**
+ * Extracts the dark mode setting from the user settings.
+ * Returning "undefined" means that we will use the space default settings.
+ */
 const getUserSettingDarkMode = (
   userSettings: Record<string, string>
 ): DarkModeValue | undefined => {
-  if (userSettings?.darkMode) {
-    return userSettings.darkMode.toUpperCase() === 'DARK';
+  if (userSettings.darkMode) {
+    const { darkMode } = userSettings;
+    if (darkMode === 'space_default') return undefined;
+
+    return darkMode.toUpperCase() === 'SYSTEM' ? 'system' : darkMode.toUpperCase() === 'DARK';
   }
   return undefined;
 };

packages/kbn-user-profile-components/src/hooks/use_update_user_profile.tsx

@@ -125,9 +125,10 @@ export const useUpdateUserProfile = ({
     <D extends Partial<UserProfileData>>(updatedData: D) => {
       userProfileSnapshot.current = merge({}, userProfileData);
       setIsLoading(true);
-      return userProfileApiClient
-        .partialUpdate(updatedData)
-        .then(() => onUserProfileUpdate(updatedData));
+      return userProfileApiClient.partialUpdate(updatedData).then(() => {
+        onUserProfileUpdate(updatedData);
+        return updatedData;
+      });
     },
     [userProfileApiClient, onUserProfileUpdate, userProfileData]
   );

packages/kbn-user-profile-components/src/types.ts

@@ -27,7 +27,7 @@ export interface UserProfileAvatarData {
   imageUrl?: string | null;
 }
 
-export type DarkModeValue = '' | 'dark' | 'light';
+export type DarkModeValue = 'system' | 'dark' | 'light' | 'space_default';
 
 /**
  * User settings stored in the data object of the User Profile

x-pack/packages/security/plugin_types_public/src/nav_control/nav_control_service.ts

@@ -16,7 +16,7 @@ export interface UserMenuLink {
   order?: number;
   setAsProfile?: boolean;
   /** Render a custom ReactNode instead of the default <EuiContextMenuItem /> */
-  content?: ReactNode;
+  content?: ReactNode | ((args: { closePopover: () => void }) => ReactNode);
 }
 
 export interface SecurityNavControlServiceStart {

x-pack/platform/plugins/private/translations/translations/fr-FR.json

@@ -14179,11 +14179,6 @@
     "xpack.cloudLinks.helpMenuLinks.support": "Support technique",
     "xpack.cloudLinks.setupGuide": "Guides de configuration",
     "xpack.cloudLinks.userMenuLinks.billingLinkText": "Facturation",
-    "xpack.cloudLinks.userMenuLinks.darkMode.successNotificationText": "Recharger la page pour afficher les modifications",
-    "xpack.cloudLinks.userMenuLinks.darkMode.successNotificationTitle": "Thème de couleurs actualisé",
-    "xpack.cloudLinks.userMenuLinks.darkModeOffLabel": "désactivé",
-    "xpack.cloudLinks.userMenuLinks.darkModeOnLabel": "le",
-    "xpack.cloudLinks.userMenuLinks.darkModeToggle": "Mode sombre",
     "xpack.cloudLinks.userMenuLinks.organizationLinkText": "Organisation",
     "xpack.cloudLinks.userMenuLinks.profileLinkText": "Profil",
     "xpack.crossClusterReplication.addAutoFollowPatternButtonLabel": "Créer un modèle de suivi automatique",

x-pack/platform/plugins/private/translations/translations/ja-JP.json

@@ -14049,11 +14049,6 @@
     "xpack.cloudLinks.helpMenuLinks.support": "サポート",
     "xpack.cloudLinks.setupGuide": "セットアップガイド",
     "xpack.cloudLinks.userMenuLinks.billingLinkText": "請求",
-    "xpack.cloudLinks.userMenuLinks.darkMode.successNotificationText": "変更を確認するには、ページを再読み込みしてください",
-    "xpack.cloudLinks.userMenuLinks.darkMode.successNotificationTitle": "カラーテーマが更新されました",
-    "xpack.cloudLinks.userMenuLinks.darkModeOffLabel": "オフ",
-    "xpack.cloudLinks.userMenuLinks.darkModeOnLabel": "日付",
-    "xpack.cloudLinks.userMenuLinks.darkModeToggle": "ダークモード",
     "xpack.cloudLinks.userMenuLinks.organizationLinkText": "組織別",
     "xpack.cloudLinks.userMenuLinks.profileLinkText": "プロフィール",
     "xpack.crossClusterReplication.addAutoFollowPatternButtonLabel": "自動フォローパターンを作成",

x-pack/platform/plugins/private/translations/translations/zh-CN.json

@@ -13804,11 +13804,6 @@
     "xpack.cloudLinks.helpMenuLinks.support": "支持",
     "xpack.cloudLinks.setupGuide": "设置指南",
     "xpack.cloudLinks.userMenuLinks.billingLinkText": "帐单",
-    "xpack.cloudLinks.userMenuLinks.darkMode.successNotificationText": "重新加载页面以查看更改",
-    "xpack.cloudLinks.userMenuLinks.darkMode.successNotificationTitle": "已更新颜色主题",
-    "xpack.cloudLinks.userMenuLinks.darkModeOffLabel": "关闭",
-    "xpack.cloudLinks.userMenuLinks.darkModeOnLabel": "在",
-    "xpack.cloudLinks.userMenuLinks.darkModeToggle": "深色模式",
     "xpack.cloudLinks.userMenuLinks.organizationLinkText": "组织",
     "xpack.cloudLinks.userMenuLinks.profileLinkText": "配置文件",
     "xpack.crossClusterReplication.addAutoFollowPatternButtonLabel": "创建自动跟随模式",

x-pack/plugins/cloud_integrations/cloud_links/public/index.ts

@@ -5,8 +5,9 @@
  * 2.0.
  */
 
+import type { PluginInitializerContext } from '@kbn/core/public';
 import { CloudLinksPlugin } from './plugin';
 
-export function plugin() {
-  return new CloudLinksPlugin();
+export function plugin(context: PluginInitializerContext) {
+  return new CloudLinksPlugin(context);
 }

x-pack/plugins/cloud_integrations/cloud_links/public/maybe_add_cloud_links/appearance_selector/appearance_modal.tsx

@@ -0,0 +1,178 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React, { type FC } from 'react';
+import {
+  EuiButton,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiSpacer,
+  useGeneratedHtmlId,
+  EuiButtonEmpty,
+  EuiCallOut,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import type { IUiSettingsClient } from '@kbn/core-ui-settings-browser';
+import type { DarkModeValue as ColorMode } from '@kbn/user-profile-components';
+import { type Value, ValuesGroup } from './values_group';
+import { useAppearance } from './use_appearance_hook';
+
+const systemLabel = i18n.translate('xpack.cloudLinks.userMenuLinks.appearanceModalSystemLabel', {
+  defaultMessage: 'System',
+});
+
+const colorModeOptions: Array<Value<ColorMode>> = [
+  {
+    id: 'system',
+    label: systemLabel,
+    icon: 'desktop',
+  },
+  {
+    id: 'light',
+    label: i18n.translate('xpack.cloudLinks.userMenuLinks.appearanceModalLightLabel', {
+      defaultMessage: 'Light',
+    }),
+    icon: 'sun',
+  },
+  {
+    id: 'dark',
+    label: i18n.translate('xpack.cloudLinks.userMenuLinks.appearanceModalDarkLabel', {
+      defaultMessage: 'Dark',
+    }),
+    icon: 'moon',
+  },
+  {
+    id: 'space_default',
+    label: i18n.translate('xpack.cloudLinks.userMenuLinks.appearanceModalSpaceDefaultLabel', {
+      defaultMessage: 'Space default',
+    }),
+    icon: 'spaces',
+    betaBadgeLabel: i18n.translate('xpack.cloudLinks.userMenuLinks.appearanceModalBetaBadgeLabel', {
+      defaultMessage: 'Deprecated',
+    }),
+    betaBadgeTooltipContent: i18n.translate(
+      'xpack.cloudLinks.userMenuLinks.appearanceModalBetaBadgeTooltip',
+      {
+        defaultMessage: 'Space default settings will be deprecated in 10.0.',
+      }
+    ),
+    betaBadgeIconType: 'warning',
+  },
+];
+
+interface Props {
+  closeModal: () => void;
+  uiSettingsClient: IUiSettingsClient;
+  isServerless: boolean;
+}
+
+export const AppearanceModal: FC<Props> = ({ closeModal, uiSettingsClient, isServerless }) => {
+  const modalTitleId = useGeneratedHtmlId();
+
+  const { onChange, colorMode, isLoading } = useAppearance({
+    uiSettingsClient,
+    defaultColorMode: isServerless ? 'system' : 'space_default',
+  });
+
+  return (
+    <EuiModal
+      aria-labelledby={modalTitleId}
+      onClose={closeModal}
+      style={
+        isServerless
+          ? undefined
+          : // When not in serverless, we have the "Space default" as an option.
+            // which renders a warning callout. We don't want the modal to scale up when
+            // the callout is rendered, so we set a fixed width.
+            { width: 600 }
+      }
+    >
+      <EuiModalHeader>
+        <EuiModalHeaderTitle size="m" id={modalTitleId}>
+          {i18n.translate('xpack.cloudLinks.userMenuLinks.appearanceModalTitle', {
+            defaultMessage: 'Appearance',
+          })}
+        </EuiModalHeaderTitle>
+      </EuiModalHeader>
+
+      <EuiModalBody>
+        <ValuesGroup<ColorMode>
+          title={i18n.translate('xpack.cloudLinks.userMenuLinks.appearanceModalColorModeTitle', {
+            defaultMessage: 'Color mode',
+          })}
+          values={
+            isServerless
+              ? colorModeOptions.filter(({ id }) => id !== 'space_default')
+              : colorModeOptions
+          }
+          selectedValue={colorMode}
+          onChange={(id) => {
+            onChange({ colorMode: id }, false);
+          }}
+          ariaLabel={i18n.translate(
+            'xpack.cloudLinks.userMenuLinks.appearanceModalColorModeAriaLabel',
+            {
+              defaultMessage: 'Appearance color mode',
+            }
+          )}
+        />
+
+        {colorMode === 'space_default' && (
+          <>
+            <EuiSpacer />
+            <EuiCallOut
+              title={i18n.translate(
+                'xpack.cloudLinks.userMenuLinks.appearanceModalDeprecatedSpaceDefaultTitle',
+                {
+                  defaultMessage: 'Space default settings will be removed in a future version',
+                }
+              )}
+              color="warning"
+              iconType="warning"
+            >
+              <p>
+                {i18n.translate(
+                  'xpack.cloudLinks.userMenuLinks.appearanceModalDeprecatedSpaceDefaultDescr',
+                  {
+                    defaultMessage:
+                      'All users with the Space default color mode enabled will be automatically transitioned to the System color mode.',
+                  }
+                )}
+              </p>
+            </EuiCallOut>
+            <EuiSpacer />
+          </>
+        )}
+      </EuiModalBody>
+
+      <EuiModalFooter>
+        <EuiButtonEmpty data-test-subj="appearanceModalDiscardButton" onClick={closeModal}>
+          {i18n.translate('xpack.cloudLinks.userMenuLinks.appearanceModalDiscardBtnLabel', {
+            defaultMessage: 'Discard',
+          })}
+        </EuiButtonEmpty>
+
+        <EuiButton
+          data-test-subj="appearanceModalSaveButton"
+          onClick={async () => {
+            await onChange({ colorMode }, true);
+            closeModal();
+          }}
+          fill
+          isLoading={isLoading}
+        >
+          {i18n.translate('xpack.cloudLinks.userMenuLinks.appearanceModalSaveBtnLabel', {
+            defaultMessage: 'Save changes',
+          })}
+        </EuiButton>
+      </EuiModalFooter>
+    </EuiModal>
+  );
+};

x-pack/plugins/cloud_integrations/cloud_links/public/maybe_add_cloud_links/appearance_selector/appearance_selector.test.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { coreMock } from '@kbn/core/public/mocks';
+import { securityMock } from '@kbn/security-plugin/public/mocks';
+
+import { AppearanceSelector } from './appearance_selector';
+
+describe('AppearanceSelector', () => {
+  const closePopover = jest.fn();
+
+  it('renders correctly and toggles dark mode', () => {
+    const security = securityMock.createStart();
+    const core = coreMock.createStart();
+
+    const { getByTestId } = render(
+      <AppearanceSelector
+        core={core}
+        security={security}
+        closePopover={closePopover}
+        isServerless={false}
+      />
+    );
+
+    const appearanceSelector = getByTestId('appearanceSelector');
+    fireEvent.click(appearanceSelector);
+
+    expect(core.overlays.openModal).toHaveBeenCalled();
+  });
+});