Kiosk: Reuse kiosk module (#44625)

* Reuse kiosk module, centralize kiosk query handling

* update kiosk tests to set correct kiosk value

* fix DashboardPage kiosk test

* remove unused UrlQueryValue, revert import change

public/app/core/components/NavBar/NavBar.test.tsx

@@ -39,10 +39,18 @@ describe('Render', () => {
     expect(sidemenu).toBeInTheDocument();
   });
 
-  it('should not render when in kiosk mode', async () => {
+  it('should not render when in kiosk mode is tv', async () => {
     setup();
 
-    locationService.partial({ kiosk: 'full' });
+    locationService.partial({ kiosk: 'tv' });
+    const sidemenu = screen.queryByTestId('sidemenu');
+    expect(sidemenu).not.toBeInTheDocument();
+  });
+
+  it('should not render when in kiosk mode is full', async () => {
+    setup();
+
+    locationService.partial({ kiosk: '1' });
     const sidemenu = screen.queryByTestId('sidemenu');
     expect(sidemenu).not.toBeInTheDocument();
   });

public/app/core/components/NavBar/NavBar.tsx

@@ -8,7 +8,8 @@ import { Icon, IconName, useTheme2 } from '@grafana/ui';
 import { locationService } from '@grafana/runtime';
 import { Branding } from 'app/core/components/Branding/Branding';
 import config from 'app/core/config';
-import { StoreState, KioskMode } from 'app/types';
+import { getKioskMode } from 'app/core/navigation/kiosk';
+import { KioskMode, StoreState } from 'app/types';
 import { enrichConfigItems, getActiveItem, isMatchOrChildMatch, isSearchActive, SEARCH_ITEM_ID } from './utils';
 import { OrgSwitcher } from '../OrgSwitcher';
 import NavBarItem from './NavBarItem';
@@ -43,8 +44,7 @@ export const NavBarUnconnected = React.memo(({ navBarTree }: Props) => {
   const theme = useTheme2();
   const styles = getStyles(theme);
   const location = useLocation();
-  const query = new URLSearchParams(location.search);
+  const kiosk = getKioskMode();
-  const kiosk = query.get('kiosk') as KioskMode;
   const [showSwitcherModal, setShowSwitcherModal] = useState(false);
   const toggleSwitcherModal = () => {
     setShowSwitcherModal(!showSwitcherModal);
@@ -60,7 +60,7 @@ export const NavBarUnconnected = React.memo(({ navBarTree }: Props) => {
 
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
-  if (kiosk !== null) {
+  if (kiosk !== KioskMode.Off) {
     return null;
   }
 

public/app/core/components/NavBar/NavBarNext.test.tsx

@@ -39,10 +39,18 @@ describe('Render', () => {
     expect(sidemenu).toBeInTheDocument();
   });
 
-  it('should not render when in kiosk mode', async () => {
+  it('should not render when in kiosk mode is tv', async () => {
     setup();
 
-    locationService.partial({ kiosk: 'full' });
+    locationService.partial({ kiosk: 'tv' });
+    const sidemenu = screen.queryByTestId('sidemenu');
+    expect(sidemenu).not.toBeInTheDocument();
+  });
+
+  it('should not render when in kiosk mode is full', async () => {
+    setup();
+
+    locationService.partial({ kiosk: '1' });
     const sidemenu = screen.queryByTestId('sidemenu');
     expect(sidemenu).not.toBeInTheDocument();
   });

public/app/core/components/NavBar/NavBarNext.tsx

@@ -5,6 +5,7 @@ import { cloneDeep } from 'lodash';
 import { GrafanaTheme2, NavModelItem, NavSection } from '@grafana/data';
 import { Icon, IconName, useTheme2 } from '@grafana/ui';
 import { locationService } from '@grafana/runtime';
+import { getKioskMode } from 'app/core/navigation/kiosk';
 import { KioskMode, StoreState } from 'app/types';
 import { enrichConfigItems, getActiveItem, isMatchOrChildMatch, isSearchActive, SEARCH_ITEM_ID } from './utils';
 import { OrgSwitcher } from '../OrgSwitcher';
@@ -40,8 +41,7 @@ export const NavBarNextUnconnected = React.memo(({ navBarTree }: Props) => {
   const theme = useTheme2();
   const styles = getStyles(theme);
   const location = useLocation();
-  const query = new URLSearchParams(location.search);
+  const kiosk = getKioskMode();
-  const kiosk = query.get('kiosk') as KioskMode;
   const [showSwitcherModal, setShowSwitcherModal] = useState(false);
   const toggleSwitcherModal = () => {
     setShowSwitcherModal(!showSwitcherModal);
@@ -57,7 +57,7 @@ export const NavBarNextUnconnected = React.memo(({ navBarTree }: Props) => {
   const activeItem = isSearchActive(location) ? searchItem : getActiveItem(navTree, location.pathname);
   const [menuOpen, setMenuOpen] = useState(false);
 
-  if (kiosk !== null) {
+  if (kiosk !== KioskMode.Off) {
     return null;
   }
 

public/app/core/navigation/kiosk.ts

@@ -1,4 +1,4 @@
-import { AppEvents, UrlQueryValue } from '@grafana/data';
+import { AppEvents } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
 import appEvents from '../app_events';
 import { KioskMode } from '../../types';
@@ -22,8 +22,10 @@ export function toggleKioskMode() {
   locationService.partial({ kiosk });
 }
 
-export function getKioskMode(queryParam?: UrlQueryValue): KioskMode {
+export function getKioskMode(): KioskMode {
-  switch (queryParam) {
+  const kiosk = locationService.getSearchObject().kiosk;
+
+  switch (kiosk) {
     case 'tv':
       return KioskMode.TV;
     //  legacy support

public/app/features/dashboard/containers/DashboardPage.test.tsx

@@ -288,8 +288,9 @@ describe('DashboardPage', () => {
 
   dashboardPageScenario('When in full kiosk mode', (ctx) => {
     ctx.setup(() => {
+      locationService.partial({ kiosk: true });
       ctx.mount({
-        queryParams: { kiosk: true },
+        queryParams: {},
         dashboard: getTestDashboard(),
       });
       ctx.rerender({ dashboard: ctx.dashboard });

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -24,7 +24,7 @@ import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
 import { getTimeSrv } from '../services/TimeSrv';
 import { getKioskMode } from 'app/core/navigation/kiosk';
-import { GrafanaTheme2, TimeRange, UrlQueryValue } from '@grafana/data';
+import { GrafanaTheme2, TimeRange } from '@grafana/data';
 import { DashboardLoading } from '../components/DashboardLoading/DashboardLoading';
 import { DashboardFailed } from '../components/DashboardLoading/DashboardFailed';
 import { DashboardPrompt } from '../components/DashboardPrompt/DashboardPrompt';
@@ -45,7 +45,6 @@ type DashboardPageRouteSearchParams = {
   viewPanel?: string;
   editview?: string;
   inspect?: string;
-  kiosk?: UrlQueryValue;
   from?: string;
   to?: string;
   refresh?: string;
@@ -314,7 +313,7 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
   render() {
     const { dashboard, isInitSlow, initError, queryParams, theme } = this.props;
     const { editPanel, viewPanel, updateScrollTop } = this.state;
-    const kioskMode = getKioskMode(queryParams.kiosk);
+    const kioskMode = getKioskMode();
     const styles = getStyles(theme, kioskMode);
 
     if (!dashboard) {
@@ -380,7 +379,7 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
 /*
  * Styles
  */
-export const getStyles = stylesFactory((theme: GrafanaTheme2, kioskMode) => {
+export const getStyles = stylesFactory((theme: GrafanaTheme2, kioskMode: KioskMode) => {
   const contentPadding = kioskMode !== KioskMode.Full ? theme.spacing(0, 2, 2) : theme.spacing(2);
   return {
     dashboardContainer: css`