TimePicker: some fixes and polish after testing feedback (#24585)

* make sure we render the delaynow value from dashboard to the time picker settings.

* Added the time zone in the tooltip.

packages/grafana-data/src/datetime/timezones.ts

@@ -1,5 +1,18 @@
-// List taken from https://stackoverflow.com/questions/38399465/how-to-get-list-of-all-timezones-in-javascript
+import { TimeZone } from '../types';
+import { getTimeZone } from './common';
 
+export const timeZoneFormatUserFriendly = (timeZone: TimeZone | undefined) => {
+  switch (getTimeZone({ timeZone })) {
+    case 'browser':
+      return 'Local browser time';
+    case 'utc':
+      return 'UTC';
+    default:
+      return timeZone;
+  }
+};
+
+// List taken from https://stackoverflow.com/questions/38399465/how-to-get-list-of-all-timezones-in-javascript
 export const getTimeZoneGroups = () => {
   const europeZones = [
     'Europe/Amsterdam',

packages/grafana-ui/src/components/TimePicker/TimeRangePicker.tsx

@@ -13,7 +13,7 @@ import { stylesFactory } from '../../themes/stylesFactory';
 import { withTheme, useTheme } from '../../themes/ThemeContext';
 
 // Types
-import { isDateTime, rangeUtil, GrafanaTheme, dateTimeFormatWithAbbrevation } from '@grafana/data';
+import { isDateTime, rangeUtil, GrafanaTheme, dateTimeFormat, timeZoneFormatUserFriendly } from '@grafana/data';
 import { TimeRange, TimeOption, TimeZone, dateMath } from '@grafana/data';
 import { Themeable } from '../../types';
 
@@ -206,13 +206,21 @@ const ZoomOutTooltip = () => (
   </>
 );
 
-const TimePickerTooltip = ({ timeRange, timeZone }: { timeRange: TimeRange; timeZone?: TimeZone }) => (
-  <>
-    {dateTimeFormatWithAbbrevation(timeRange.from, { timeZone })}
-    <div className="text-center">to</div>
-    {dateTimeFormatWithAbbrevation(timeRange.to, { timeZone })}
-  </>
-);
+const TimePickerTooltip = ({ timeRange, timeZone }: { timeRange: TimeRange; timeZone?: TimeZone }) => {
+  const theme = useTheme();
+  const styles = getLabelStyles(theme);
+
+  return (
+    <>
+      {dateTimeFormat(timeRange.from, { timeZone })}
+      <div className="text-center">to</div>
+      {dateTimeFormat(timeRange.to, { timeZone })}
+      <div className="text-center">
+        <span className={styles.utc}>{timeZoneFormatUserFriendly(timeZone)}</span>
+      </div>
+    </>
+  );
+};
 
 const TimePickerButtonLabel = memo<Props>(({ hideText, value, timeZone }) => {
   const theme = useTheme();

public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx

@@ -133,6 +133,7 @@ export class TimePickerSettings extends PureComponent<Props, State> {
                 invalid={!this.state.isNowDelayValid}
                 placeholder="0m"
                 onChange={this.onNowDelayChange}
+                defaultValue={dashboard.timepicker.nowDelay}
               />
             </Tooltip>
           </div>