AppChrome: Move kiosk button into profile menu (#103600)

* Move kiosk button to profile menu

* translation key

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"

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>
   );

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..."
     },