TimePicker: Show new shortcut for zoom out when experimental flag toggled on (#114506)

* fix(time-picker): show new shortcut for zoom out when flag toggled on

* chore(i18n): extract translations

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { dateTime, makeTimeRange, TimeRange } from '@grafana/data';
+import { dateTime, makeTimeRange, TimeRange, BootData } from '@grafana/data';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
 
 import { TimeRangeProvider } from './TimeRangeContext';
@@ -152,6 +152,58 @@ it('does not submit wrapping forms', async () => {
   expect(onSubmit).not.toHaveBeenCalled();
 });
 
+it('shows CTRL+Z in zoom out tooltip when feature flag is disabled', async () => {
+  window.grafanaBootData = {
+    settings: {
+      featureToggles: {
+        newTimeRangeZoomShortcuts: false,
+      },
+    },
+  } as BootData;
+
+  render(
+    <TimeRangePicker
+      onChangeTimeZone={() => {}}
+      onChange={(value) => {}}
+      value={value}
+      onMoveBackward={() => {}}
+      onMoveForward={() => {}}
+      onZoom={() => {}}
+    />
+  );
+
+  const zoomButton = screen.getByLabelText('Zoom out time range');
+  await userEvent.hover(zoomButton);
+
+  expect(await screen.findByText(/CTRL\+Z/)).toBeInTheDocument();
+});
+
+it('shows t - in zoom out tooltip when feature flag is enabled', async () => {
+  window.grafanaBootData = {
+    settings: {
+      featureToggles: {
+        newTimeRangeZoomShortcuts: true,
+      },
+    },
+  } as BootData;
+
+  render(
+    <TimeRangePicker
+      onChangeTimeZone={() => {}}
+      onChange={(value) => {}}
+      value={value}
+      onMoveBackward={() => {}}
+      onMoveForward={() => {}}
+      onZoom={() => {}}
+    />
+  );
+
+  const zoomButton = screen.getByLabelText('Zoom out time range');
+  await userEvent.hover(zoomButton);
+
+  expect(await screen.findByText(/t -/)).toBeInTheDocument();
+});
+
 describe('TimePickerTooltip', () => {
   beforeAll(() => {
     const mockIntl = {

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

@@ -19,6 +19,7 @@ import { selectors } from '@grafana/e2e-selectors';
 import { t, Trans } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
+import { getFeatureToggle } from '../../utils/featureToggle';
 import { ButtonGroup } from '../Button/ButtonGroup';
 import { getModalStyles } from '../Modal/getModalStyles';
 import { getPortalContainer } from '../Portal/Portal';
@@ -243,13 +244,22 @@ export function TimeRangePicker(props: TimeRangePickerProps) {
 
 TimeRangePicker.displayName = 'TimeRangePicker';
 
-const ZoomOutTooltip = () => (
-  <>
-    <Trans i18nKey="time-picker.range-picker.zoom-out-tooltip">
-      Time range zoom out <br /> CTRL+Z
-    </Trans>
-  </>
-);
+const ZoomOutTooltip = () => {
+  const newShortcuts = getFeatureToggle('newTimeRangeZoomShortcuts');
+  return (
+    <>
+      {newShortcuts ? (
+        <Trans i18nKey="time-picker.range-picker.zoom-out-tooltip-new">
+          Time range zoom out <br /> t -
+        </Trans>
+      ) : (
+        <Trans i18nKey="time-picker.range-picker.zoom-out-tooltip">
+          Time range zoom out <br /> CTRL+Z
+        </Trans>
+      )}
+    </>
+  );
+};
 
 export const TimePickerTooltip = ({ timeRange, timeZone }: { timeRange: TimeRange; timeZone?: TimeZone }) => {
   const styles = useStyles2(getLabelStyles);

public/locales/en-US/grafana.json

@@ -13411,7 +13411,8 @@
       "forwards-time-aria-label": "Move time range forwards",
       "to": "to",
       "zoom-out-button": "Zoom out time range",
-      "zoom-out-tooltip": "Time range zoom out <br /> CTRL+Z"
+      "zoom-out-tooltip": "Time range zoom out <br /> CTRL+Z",
+      "zoom-out-tooltip-new": "Time range zoom out <br /> t -"
     },
     "time-range": {
       "apply": "Apply time range",