[8.8] Disable User Profile theme button group when DarkMode config is set (#158030) (#158080)

# Backport This will backport the following commits from `main` to `8.8`: - [Disable User Profile theme button group when DarkMode config is set (#158030)](https://github.com/elastic/kibana/pull/158030)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Kurt <kc13greiner@users.noreply.github.com>
2025-04-24 01:38:56 -04:00 · 2023-05-18 11:16:20 -04:00 · 2023-05-18 11:16:20 -04:00 · 7dd245e35a
commit 7dd245e35a
parent e0cc912c80
2 changed files with 75 additions and 7 deletions
--- a/x-pack/plugins/security/public/account_management/user_profile/user_profile.test.tsx
+++ b/x-pack/plugins/security/public/account_management/user_profile/user_profile.test.tsx
@ -58,6 +58,8 @@ describe('useUserProfileForm', () => {
    coreStart.http.post.mockReset().mockResolvedValue(undefined);
    coreStart.notifications.toasts.addDanger.mockReset();
    coreStart.notifications.toasts.addSuccess.mockReset();
+    coreStart.settings.client.get.mockReset();
+    coreStart.settings.client.isOverridden.mockReset();
  });

  it('should initialise form with values from user profile', () => {
@ -254,8 +256,9 @@ describe('useUserProfileForm', () => {
          <UserProfile user={nonCloudUser} data={data} />
        </Providers>
      );
-
-      expect(testWrapper.exists('[data-test-subj="darkModeButton"]')).toBeTruthy();
+      const darkModeButton = testWrapper.find('EuiButtonGroup[data-test-subj="darkModeButton"]');
+      expect(darkModeButton).toBeTruthy();
+      expect(darkModeButton.getDOMNode()).not.toBeDisabled();
    });

    it('should not display if the User is a cloud user', () => {
@ -278,7 +281,7 @@ describe('useUserProfileForm', () => {
        </Providers>
      );

-      expect(testWrapper.exists('[data-test-subj="darkModeButton"]')).toBeFalsy();
+      expect(testWrapper.exists('EuiButtonGroup[data-test-subj="darkModeButton"]')).toBeFalsy();
    });

    it('should add special toast after submitting form successfully since darkMode requires a refresh', async () => {
@ -306,5 +309,32 @@ describe('useUserProfileForm', () => {
        expect.objectContaining({ toastLifeTimeMs: 300000 })
      );
    });
+
+    it('should be disabled if the theme has been set in the config', () => {
+      const data: UserProfileData = {};
+
+      const nonCloudUser = mockAuthenticatedUser({ elastic_cloud_user: false });
+      coreStart.settings.client.get.mockReturnValueOnce(true);
+      coreStart.settings.client.isOverridden.mockReturnValueOnce(true);
+
+      const testWrapper = mount(
+        <Providers
+          services={coreStart}
+          theme$={theme$}
+          history={history}
+          authc={authc}
+          securityApiClients={{
+            userProfiles: new UserProfileAPIClient(coreStart.http),
+            users: new UserAPIClient(coreStart.http),
+          }}
+        >
+          <UserProfile user={nonCloudUser} data={data} />
+        </Providers>
+      );
+
+      const darkModeButton = testWrapper.find('EuiButtonGroup[data-test-subj="darkModeButton"]');
+      expect(darkModeButton).toBeTruthy();
+      expect(darkModeButton.getDOMNode()).toHaveProperty('disabled');
+    });
  });
 });
--- a/x-pack/plugins/security/public/account_management/user_profile/user_profile.tsx
+++ b/x-pack/plugins/security/public/account_management/user_profile/user_profile.tsx
@ -29,7 +29,7 @@ import type { FunctionComponent } from 'react';
 import React, { useRef, useState } from 'react';
 import useUpdateEffect from 'react-use/lib/useUpdateEffect';

-import type { CoreStart, ToastInput, ToastOptions } from '@kbn/core/public';
+import type { CoreStart, IUiSettingsClient, ToastInput, ToastOptions } from '@kbn/core/public';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { toMountPoint, useKibana } from '@kbn/kibana-react-plugin/public';
@ -142,11 +142,23 @@ function UserDetailsEditor({ user }: { user: AuthenticatedUser }) {
  );
 }

-function UserSettingsEditor({ formik }: { formik: ReturnType<typeof useUserProfileForm> }) {
+function UserSettingsEditor({
+  formik,
+  isDarkModeOverride,
+}: {
+  formik: ReturnType<typeof useUserProfileForm>;
+  isDarkModeOverride: boolean;
+}) {
  if (!formik.values.data) {
    return null;
  }

+  let idSelected = formik.values.data.userSettings.darkMode;
+
+  if (isDarkModeOverride) {
+    idSelected = 'dark';
+  }
+
  return (
    <EuiDescribedFormGroup
      fullWidth
@ -168,6 +180,7 @@ function UserSettingsEditor({ formik }: { formik: ReturnType<typeof useUserProfi
    >
      <FormRow
        name="data.userSettings.darkMode"
+        helpText={renderHelpText(isDarkModeOverride)}
        label={
          <FormLabel for="data.userSettings.darkMode">
            <FormattedMessage
@ -187,7 +200,8 @@ function UserSettingsEditor({ formik }: { formik: ReturnType<typeof useUserProfi
          )}
          buttonSize="m"
          data-test-subj="darkModeButton"
-          idSelected={formik.values.data.userSettings.darkMode}
+          idSelected={idSelected}
+          isDisabled={isDarkModeOverride}
          options={[
            {
              id: '',
@ -532,6 +546,8 @@ export const UserProfile: FunctionComponent<UserProfileProps> = ({ user, data })

  const isCloudUser = user.elastic_cloud_user;

+  const isDarkModeOverride = determineIfDarkModeOverride(services.settings.client);
+
  const rightSideItems = [
    {
      title: (
@ -658,7 +674,9 @@ export const UserProfile: FunctionComponent<UserProfileProps> = ({ user, data })
                  user={user}
                  onShowPasswordForm={() => setShowChangePasswordForm(true)}
                />
-                {isCloudUser ? null : <UserSettingsEditor formik={formik} />}
+                {isCloudUser ? null : (
+                  <UserSettingsEditor formik={formik} isDarkModeOverride={isDarkModeOverride} />
+                )}
              </Form>
            </EuiPageTemplate>
          </Breadcrumb>
@ -878,3 +896,23 @@ export const SaveChangesBottomBar: FunctionComponent = () => {
    </EuiFlexGroup>
  );
 };
+
+function renderHelpText(isOverridden: boolean) {
+  if (isOverridden) {
+    return (
+      <EuiText size="xs">
+        <FormattedMessage
+          id="xpack.security.accountManagement.userProfile.overriddenMessage"
+          defaultMessage="This setting is overridden by the Kibana server and can not be changed."
+        />
+      </EuiText>
+    );
+  }
+}
+
+function determineIfDarkModeOverride(settingsClient: IUiSettingsClient) {
+  const isThemeOverridden = settingsClient.isOverridden('theme:darkMode');
+  const isOverriddenThemeDarkMode = settingsClient.get<boolean>('theme:darkMode');
+
+  return isThemeOverridden && isOverriddenThemeDarkMode;
+}