TimePicker: Fixes issues with "Recently used absolute ranges" section (#66281)

* TimePicker: Fixes issues with "Recently used absolute ranges" section

Squashed commit of the following:

commit 99d5076ce1fadde1f22ed372f372656b58efa1c4
Author: Joao Silva <joao.silva@grafana.com>
Date:   Tue Apr 11 14:06:27 2023 +0100

    user essentials mob! 🔱

    lastFile:public/app/core/components/TimePicker/TimePickerWithHistory.tsx

commit cad0201df452f956a422b030d5b15e8ba4aed9a9
Author: eledobleefe <laura.fernandez@grafana.com>
Date:   Tue Apr 11 11:44:34 2023 +0200

    user essentials mob! 🔱

    lastFile:public/app/core/components/TimePicker/TimePickerWithHistory.tsx

Co-authored-by: eledobleefe <laura.fernandez@grafana.com>

* TimePicker: Add correct date format

* Add convertRawToRange tests

* Rename test variables

* RTL tests

* Proper RTL tests

* Apply suggestions from code review

Co-authored-by: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>

* Remove commented line

* Fix linting

---------

Co-authored-by: eledobleefe <laura.fernandez@grafana.com>
Co-authored-by: Tobias Skarhed <tobias.skarhed@gmail.com>
Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>

packages/grafana-data/src/datetime/parser.test.ts

@@ -2,6 +2,11 @@ import { systemDateFormats, SystemDateFormatsState } from './formats';
 import { dateTimeParse } from './parser';
 
 describe('dateTimeParse', () => {
+  it('should parse using the systems configured timezone', () => {
+    const date = dateTimeParse('2020-03-02 15:00:22');
+    expect(date.format()).toEqual('2020-03-02T15:00:22-05:00');
+  });
+
   it('should be able to parse using default format', () => {
     const date = dateTimeParse('2020-03-02 15:00:22', { timeZone: 'utc' });
     expect(date.format()).toEqual('2020-03-02T15:00:22Z');

packages/grafana-data/src/datetime/rangeutil.test.ts

@@ -1,10 +1,57 @@
-import { TimeRange } from '../types/time';
+import { RawTimeRange, TimeRange } from '../types/time';
 
 import { timeRangeToRelative } from './rangeutil';
 
 import { dateTime, rangeUtil } from './index';
 
 describe('Range Utils', () => {
+  // These tests probably wrap the dateTimeParser tests to some extent
+  describe('convertRawToRange', () => {
+    const DEFAULT_DATE_VALUE = '1996-07-30 16:00:00'; // Default format YYYY-MM-DD HH:mm:ss
+    const DEFAULT_DATE_VALUE_FORMATTED = '1996-07-30T16:00:00-06:00';
+    const defaultRawTimeRange = {
+      from: DEFAULT_DATE_VALUE,
+      to: '1996-07-30 16:20:00',
+    };
+
+    it('should serialize the default format by default', () => {
+      const deserialized = rangeUtil.convertRawToRange(defaultRawTimeRange);
+      expect(deserialized.from.format()).toBe(DEFAULT_DATE_VALUE_FORMATTED);
+    });
+
+    it('should serialize using custom formats', () => {
+      const NON_DEFAULT_FORMAT = 'DD-MM-YYYY HH:mm:ss';
+      const nonDefaultRawTimeRange: RawTimeRange = {
+        from: '30-07-1996 16:00:00',
+        to: '30-07-1996 16:20:00',
+      };
+
+      const deserializedTimeRange = rangeUtil.convertRawToRange(
+        nonDefaultRawTimeRange,
+        undefined,
+        undefined,
+        NON_DEFAULT_FORMAT
+      );
+      expect(deserializedTimeRange.from.format()).toBe(DEFAULT_DATE_VALUE_FORMATTED);
+    });
+
+    it('should take timezone into account', () => {
+      const deserializedTimeRange = rangeUtil.convertRawToRange(defaultRawTimeRange, 'UTC');
+      expect(deserializedTimeRange.from.format()).toBe('1996-07-30T16:00:00Z');
+    });
+
+    it('should leave the raw part intact if it has calulactions', () => {
+      const timeRange = {
+        from: DEFAULT_DATE_VALUE,
+        to: 'now',
+      };
+
+      const deserialized = rangeUtil.convertRawToRange(timeRange);
+      expect(deserialized.raw).toStrictEqual(timeRange);
+      expect(deserialized.to.toString()).not.toBe(deserialized.raw.to);
+    });
+  });
+
   describe('relative time', () => {
     it('should identify absolute vs relative', () => {
       expect(

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

@@ -198,9 +198,14 @@ export const describeTimeRangeAbbreviation = (range: TimeRange, timeZone?: TimeZ
   return parsed ? timeZoneAbbrevation(parsed, { timeZone }) : '';
 };
 
-export const convertRawToRange = (raw: RawTimeRange, timeZone?: TimeZone, fiscalYearStartMonth?: number): TimeRange => {
-  const from = dateTimeParse(raw.from, { roundUp: false, timeZone, fiscalYearStartMonth });
-  const to = dateTimeParse(raw.to, { roundUp: true, timeZone, fiscalYearStartMonth });
+export const convertRawToRange = (
+  raw: RawTimeRange,
+  timeZone?: TimeZone,
+  fiscalYearStartMonth?: number,
+  format?: string
+): TimeRange => {
+  const from = dateTimeParse(raw.from, { roundUp: false, timeZone, fiscalYearStartMonth, format });
+  const to = dateTimeParse(raw.to, { roundUp: true, timeZone, fiscalYearStartMonth, format });
 
   if (dateMath.isMathString(raw.from) || dateMath.isMathString(raw.to)) {
     return { from, to, raw };