Changes the theme override tip from EuiIconTip to EuiToolTip (#161703)

## Summary Removes the lock tip icon in favor of a standard tool tip for the theme mode keypad menu. Previous render: <img width="1051" alt="Screenshot 2023-06-30 at 12 24 12 PM" src="https://github.com/elastic/kibana/assets/103939324/5968e1e4-88ae-43a6-8fea-0df7cf2db25b"> New Render: <img width="1051" alt="Screenshot 2023-07-11 at 2 41 28 PM" src="https://github.com/elastic/kibana/assets/103939324/b45d5df6-4f04-446f-8d5c-f2c4dda2fa06"> ### Tests - `x-pack/plugins/security/public/account_management/user_profile/user_profile.test.tsx` ### Manual Testing - Start Elasricsearch, and start Kibana with an empty kibana.yml/kibana.dev.yml - Navigate to the _Edit profile_ screen via the profile/avatar button in the top right portion of the uI <img width="269" alt="Screenshot 2023-06-29 at 11 47 42 AM" src="https://github.com/elastic/kibana/assets/103939324/52f5288f-0623-4658-a7a2-2ef85164cadc"> - Verify the theme settings appear as a KeyPadMenu and function as expected <img width="1079" alt="Screenshot 2023-06-28 at 2 38 44 PM" src="https://github.com/elastic/kibana/assets/103939324/a3745b8b-f908-4cd0-bcf6-2bf878578499"> - Modify the kibana.yml (or kibana.dev.yml) with the line `uiSettings.overrides.theme:darkMode: true` - Refresh Kibana and verify that the dark theme is rendered and the theme settings are disabled and includes a tooltip explaining why the mode setting is locked <img width="1051" alt="Screenshot 2023-07-11 at 2 41 28 PM" src="https://github.com/elastic/kibana/assets/103939324/b45d5df6-4f04-446f-8d5c-f2c4dda2fa06">
elastic · Jul 14, 2023 · c526b3c · c526b3c
1 parent dcf1e76
commit c526b3c
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 80 deletions.
diff --git 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
@@ -257,7 +257,7 @@ describe('useUserProfileForm', () => {
         </Providers>
       );
 
-      const overrideMsg = testWrapper.find('EuiText[data-test-subj="themeOverrideMessage"]');
+      const overrideMsg = testWrapper.find('EuiToolTip[data-test-subj="themeOverrideTooltip"]');
       expect(overrideMsg).toHaveLength(0);
 
       const themeMenu = testWrapper.find('EuiKeyPadMenu[data-test-subj="themeMenu"]');
@@ -343,8 +343,9 @@ describe('useUserProfileForm', () => {
         </Providers>
       );
 
-      const overrideMsg = testWrapper.find('EuiIconTip[data-test-subj="themeOverrideTooltip"]');
+      const overrideMsg = testWrapper.find('EuiToolTip[data-test-subj="themeOverrideTooltip"]');
       expect(overrideMsg).toHaveLength(1);
+      expect(overrideMsg.getElement().props.content).not.toEqual('');
 
       const themeMenu = testWrapper.find('EuiKeyPadMenu[data-test-subj="themeMenu"]');
       expect(themeMenu).toHaveLength(1);
@@ -380,8 +381,9 @@ describe('useUserProfileForm', () => {
         </Providers>
       );
 
-      const overrideMsg = testWrapper.find('EuiIconTip[data-test-subj="themeOverrideTooltip"]');
+      const overrideMsg = testWrapper.find('EuiToolTip[data-test-subj="themeOverrideTooltip"]');
       expect(overrideMsg).toHaveLength(1);
+      expect(overrideMsg.getElement().props.content).not.toEqual('');
 
       const themeMenu = testWrapper.find('EuiKeyPadMenu[data-test-subj="themeMenu"]');
       expect(themeMenu).toHaveLength(1);

diff --git 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
@@ -26,6 +26,7 @@ import {
   EuiPopover,
   EuiSpacer,
   EuiText,
+  EuiToolTip,
   useEuiTheme,
   useGeneratedHtmlId,
 } from '@elastic/eui';
@@ -194,7 +195,7 @@ const UserSettingsEditor: FunctionComponent<UserSettingsEditorProps> = ({
     icon: string;
   }
 
-  const themeKeyPadMenuItem = ({ id, label, icon }: ThemeKeyPadItem) => {
+  const themeItem = ({ id, label, icon }: ThemeKeyPadItem) => {
     return (
       <EuiKeyPadMenuItem
         name={id}
@@ -209,6 +210,67 @@ const UserSettingsEditor: FunctionComponent<UserSettingsEditorProps> = ({
     );
   };
 
+  const themeMenu = (themeOverridden: boolean) => {
+    const themeKeyPadMenu = (
+      <EuiKeyPadMenu
+        aria-label={i18n.translate(
+          'xpack.security.accountManagement.userProfile.userSettings.themeGroupDescription',
+          {
+            defaultMessage: 'Elastic theme',
+          }
+        )}
+        data-test-subj="themeMenu"
+        checkable={{
+          legend: (
+            <FormLabel for="data.userSettings.darkMode">
+              <FormattedMessage
+                id="xpack.security.accountManagement.userProfile.userSettings.theme"
+                defaultMessage="Mode"
+              />
+            </FormLabel>
+          ),
+        }}
+      >
+        {themeItem({
+          id: '',
+          label: i18n.translate('xpack.security.accountManagement.userProfile.defaultModeButton', {
+            defaultMessage: 'Space default',
+          }),
+          icon: 'spaces',
+        })}
+        {themeItem({
+          id: 'light',
+          label: i18n.translate('xpack.security.accountManagement.userProfile.lightModeButton', {
+            defaultMessage: 'Light',
+          }),
+          icon: 'sun',
+        })}
+        {themeItem({
+          id: 'dark',
+          label: i18n.translate('xpack.security.accountManagement.userProfile.darkModeButton', {
+            defaultMessage: 'Dark',
+          }),
+          icon: 'moon',
+        })}
+      </EuiKeyPadMenu>
+    );
+    return themeOverridden ? (
+      <EuiToolTip
+        data-test-subj="themeOverrideTooltip"
+        content={
+          <FormattedMessage
+            id="xpack.security.accountManagement.userProfile.overriddenMessage"
+            defaultMessage="This setting is overridden by the Kibana server and can not be changed."
+          />
+        }
+      >
+        {themeKeyPadMenu}
+      </EuiToolTip>
+    ) : (
+      themeKeyPadMenu
+    );
+  };
+
   return (
     <EuiDescribedFormGroup
       fullWidth
@@ -228,58 +290,8 @@ const UserSettingsEditor: FunctionComponent<UserSettingsEditorProps> = ({
         />
       }
     >
-      <FormRow
-        name="data.userSettings.darkMode"
-        label={
-          <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
-            <EuiFlexItem grow={false}>
-              <FormLabel for="data.userSettings.darkMode">
-                <FormattedMessage
-                  id="xpack.security.accountManagement.userProfile.userSettings.theme"
-                  defaultMessage="Mode"
-                />
-              </FormLabel>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>{renderHelpText(isThemeOverridden)}</EuiFlexItem>
-          </EuiFlexGroup>
-        }
-        fullWidth
-      >
-        <EuiKeyPadMenu
-          aria-label={i18n.translate(
-            'xpack.security.accountManagement.userProfile.userSettings.themeGroupDescription',
-            {
-              defaultMessage: 'Elastic theme',
-            }
-          )}
-          data-test-subj="themeMenu"
-          checkable={true}
-        >
-          {themeKeyPadMenuItem({
-            id: '',
-            label: i18n.translate(
-              'xpack.security.accountManagement.userProfile.defaultModeButton',
-              {
-                defaultMessage: 'Space default',
-              }
-            ),
-            icon: 'spaces',
-          })}
-          {themeKeyPadMenuItem({
-            id: 'light',
-            label: i18n.translate('xpack.security.accountManagement.userProfile.lightModeButton', {
-              defaultMessage: 'Light',
-            }),
-            icon: 'sun',
-          })}
-          {themeKeyPadMenuItem({
-            id: 'dark',
-            label: i18n.translate('xpack.security.accountManagement.userProfile.darkModeButton', {
-              defaultMessage: 'Dark',
-            }),
-            icon: 'moon',
-          })}
-        </EuiKeyPadMenu>
+      <FormRow name="data.userSettings.darkMode" fullWidth>
+        {themeMenu(isThemeOverridden)}
       </FormRow>
     </EuiDescribedFormGroup>
   );
@@ -989,30 +1001,6 @@ export const SaveChangesBottomBar: FunctionComponent = () => {
   );
 };
 
-function renderHelpText(isOverridden: boolean) {
-  if (isOverridden) {
-    return (
-      <EuiIconTip
-        data-test-subj="themeOverrideTooltip"
-        aria-label={i18n.translate(
-          'xpack.security.accountManagement.userProfile.themeModeLockedLabel',
-          {
-            defaultMessage: 'Theme mode locked',
-          }
-        )}
-        size="s"
-        type="lock"
-        content={
-          <FormattedMessage
-            id="xpack.security.accountManagement.userProfile.overriddenMessage"
-            defaultMessage="This setting is overridden by the Kibana server and can not be changed."
-          />
-        }
-      />
-    );
-  }
-}
-
 function determineIfThemeOverridden(settingsClient: IUiSettingsClient): {
   isThemeOverridden: boolean;
   isOverriddenThemeDarkMode: boolean;