From 6f0daae0d8450878791d72ca4575d22941b5cd74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 8 Apr 2025 14:50:24 +0200
Subject: [PATCH] AppChrome: Move kiosk button into profile menu (#103600)

* Move kiosk button to profile menu

* translation key
---
 .../core/components/AppChrome/TopBar/ProfileButton.tsx    | 8 +++++++-
 .../app/core/components/AppChrome/TopBar/SingleTopBar.tsx | 8 +-------
 public/locales/en-US/grafana.json                         | 2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/public/app/core/components/AppChrome/TopBar/ProfileButton.tsx b/public/app/core/components/AppChrome/TopBar/ProfileButton.tsx
index f5c0bd854d4..250d43f7271 100644
--- a/public/app/core/components/AppChrome/TopBar/ProfileButton.tsx
+++ b/public/app/core/components/AppChrome/TopBar/ProfileButton.tsx
@@ -16,9 +16,10 @@ import { TopNavBarMenu } from './TopNavBarMenu';
 
 export interface Props {
   profileNode: NavModelItem;
+  onToggleKioskMode: () => void;
 }
 
-export function ProfileButton({ profileNode }: Props) {
+export function ProfileButton({ profileNode, onToggleKioskMode }: Props) {
   const styles = useStyles2(getStyles);
   const node = enrichWithInteractionTracking(cloneDeep(profileNode), false);
   const [showNewsDrawer, onToggleShowNewsDrawer] = useToggle(false);
@@ -34,6 +35,11 @@ export function ProfileButton({ profileNode }: Props) {
         {config.featureToggles.grafanaconThemes && (
           <MenuItem icon="palette" onClick={onToggleThemeDrawer} label={t('profile.change-theme', 'Change theme')} />
         )}
+        <Menu.Item
+          icon="monitor"
+          onClick={onToggleKioskMode}
+          label={t('profile.enable-kiosk-mode', 'Enable kiosk mode')}
+        />
         {config.newsFeedEnabled && (
           <MenuItem
             icon="rss"
diff --git a/public/app/core/components/AppChrome/TopBar/SingleTopBar.tsx b/public/app/core/components/AppChrome/TopBar/SingleTopBar.tsx
index b5fe288ac1a..7a3b05b946e 100644
--- a/public/app/core/components/AppChrome/TopBar/SingleTopBar.tsx
+++ b/public/app/core/components/AppChrome/TopBar/SingleTopBar.tsx
@@ -81,16 +81,10 @@ export const SingleTopBar = memo(function SingleTopBar({
             <ToolbarButton iconOnly icon="question-circle" aria-label={t('navigation.help.aria-label', 'Help')} />
           </Dropdown>
         )}
-        <ToolbarButton
-          icon="monitor"
-          className={styles.kioskToggle}
-          onClick={onToggleKioskMode}
-          tooltip={t('navigation.kiosk.tooltip', 'Enable kiosk mode')}
-        />
         {!contextSrv.user.isSignedIn && <SignInLink />}
         {config.featureToggles.inviteUserExperimental && <InviteUserButton />}
         {config.featureToggles.extensionSidebar && <ExtensionToolbarItem />}
-        {profileNode && <ProfileButton profileNode={profileNode} />}
+        {profileNode && <ProfileButton profileNode={profileNode} onToggleKioskMode={onToggleKioskMode} />}
       </Stack>
     </div>
   );
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index b04d5b40e5e..5841d2beeb6 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -5829,7 +5829,6 @@
       "remove-bookmark": "Remove from Bookmarks"
     },
     "kiosk": {
-      "tooltip": "Enable kiosk mode",
       "tv-alert": "Press ESC to exit kiosk mode"
     },
     "megamenu": {
@@ -6227,6 +6226,7 @@
       "strong-password-validation-register": "Password does not comply with the strong password policy"
     },
     "change-theme": "Change theme",
+    "enable-kiosk-mode": "Enable kiosk mode",
     "user-organizations": {
       "text-loading-organizations": "Loading organizations..."
     },