TimePicker: Fixes hidden time picker shown in kiosk TV mode (#32062)

* TimePicker: Fixes hidden time picker shown in kiosk TV mode

* Use kioskmode passed via props

* Update snaps

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

public/app/features/dashboard/components/DashNav/DashNav.tsx

@@ -12,7 +12,7 @@ import { textUtil } from '@grafana/data';
 import { updateTimeZoneForSession } from 'app/features/profile/state/reducers';
 // Types
 import { DashboardModel } from '../../state';
-import { StoreState } from 'app/types';
+import { KioskMode, StoreState } from 'app/types';
 import { ShareModal } from 'app/features/dashboard/components/ShareModal';
 import { SaveDashboardModalProxy } from 'app/features/dashboard/components/SaveDashboard/SaveDashboardModalProxy';
 import { locationService } from '@grafana/runtime';
@@ -22,6 +22,8 @@ import { getDashboardSrv } from '../../services/DashboardSrv';
 export interface OwnProps {
   dashboard: DashboardModel;
   isFullscreen: boolean;
+  kioskMode: KioskMode;
+  hideTimePicker: boolean;
   onAddPanel: () => void;
 }
 
@@ -104,21 +106,16 @@ class DashNav extends PureComponent<Props> {
     });
   }
 
-  isInKioskMode() {
-    // TODO fix this
-    return false;
-  }
-
   isPlaylistRunning() {
     return playlistSrv.isPlaying;
   }
 
   renderLeftActionsButton() {
-    const { dashboard } = this.props;
+    const { dashboard, kioskMode } = this.props;
     const { canStar, canShare, isStarred } = dashboard.meta;
     const buttons: ReactNode[] = [];
 
-    if (this.isInKioskMode() || this.isPlaylistRunning()) {
+    if (kioskMode !== KioskMode.Off || this.isPlaylistRunning()) {
       return [];
     }
 
@@ -169,8 +166,20 @@ class DashNav extends PureComponent<Props> {
     );
   }
 
+  renderTimeControls() {
+    const { dashboard, updateTimeZoneForSession, hideTimePicker } = this.props;
+
+    if (hideTimePicker) {
+      return null;
+    }
+
+    return (
+      <DashNavTimeControls dashboard={dashboard} onChangeTimeZone={updateTimeZoneForSession} key="time-controls" />
+    );
+  }
+
   renderRightActionsButton() {
-    const { dashboard, onAddPanel, updateTimeZoneForSession, isFullscreen } = this.props;
+    const { dashboard, onAddPanel, isFullscreen, kioskMode } = this.props;
     const { canEdit, showSettings } = dashboard.meta;
     const { snapshot } = dashboard;
     const snapshotUrl = snapshot && snapshot.originalUrl;
@@ -178,16 +187,13 @@ class DashNav extends PureComponent<Props> {
     const tvButton = (
       <ToolbarButton tooltip="Cycle view mode" icon="monitor" onClick={this.onToggleTVMode} key="tv-button" />
     );
-    const timeControls = (
-      <DashNavTimeControls dashboard={dashboard} onChangeTimeZone={updateTimeZoneForSession} key="time-controls" />
-    );
 
     if (this.isPlaylistRunning()) {
-      return [this.renderPlaylistControls(), timeControls];
+      return [this.renderPlaylistControls(), this.renderTimeControls()];
     }
 
-    if (this.isInKioskMode()) {
-      return [timeControls, tvButton];
+    if (kioskMode === KioskMode.TV) {
+      return [this.renderTimeControls(), tvButton];
     }
 
     if (canEdit && !isFullscreen) {
@@ -229,10 +235,7 @@ class DashNav extends PureComponent<Props> {
 
     this.addCustomContent(customRightActions, buttons);
 
-    if (!dashboard.timepicker.hidden) {
-      buttons.push(timeControls);
-    }
-
+    buttons.push(this.renderTimeControls());
     buttons.push(tvButton);
     return buttons;
   }

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

@@ -344,7 +344,13 @@ export class DashboardPage extends PureComponent<Props, State> {
       <div className="dashboard-container">
         {kioskMode !== KioskMode.Full && (
           <div aria-label={selectors.pages.Dashboard.DashNav.nav}>
-            <DashNav dashboard={dashboard} isFullscreen={!!viewPanel} onAddPanel={this.onAddPanel} />
+            <DashNav
+              dashboard={dashboard}
+              isFullscreen={!!viewPanel}
+              onAddPanel={this.onAddPanel}
+              kioskMode={kioskMode}
+              hideTimePicker={dashboard.timepicker.hidden}
+            />
           </div>
         )}
 

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

@@ -103,6 +103,7 @@ exports[`DashboardPage Dashboard init completed  Should render dashboard grid 1`
         }
       }
       isFullscreen={false}
+      kioskMode="off"
       onAddPanel={[Function]}
     />
   </div>
@@ -482,6 +483,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti
         }
       }
       isFullscreen={false}
+      kioskMode="off"
       onAddPanel={[Function]}
     />
   </div>