feat: support date without time (+ refactoring)

zumoshi · zumoshi · commit e54bd84e4be9 · 2025-06-25T17:10:49.000+03:30
diff --git a/ui/src/common/RelativeDateTimeSelector.tsx b/ui/src/common/RelativeDateTimeSelector.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {TextField} from '@material-ui/core';
-import {normalizeDate, parseRelativeTime, userFriendlyDate} from '../utils/time';
+import {parseRelativeTime} from '../utils/time';
 import Typography from '@material-ui/core/Typography';
 import useTimeout from '@rooks/use-timeout';
 
@@ -29,18 +29,16 @@ export const RelativeDateTimeSelector: React.FC<RelativeDateTimeSelectorProps> =
     const [error, setError] = React.useState('');
     const {start, stop} = useTimeout(() => setErrVisible(true), 200);
     const parsed = parseRelativeTime(apiValue, type);
-    const value = userFriendlyDate(apiValue);
 
     return (
         <TextField
             fullWidth
             style={style}
-            value={value}
+            value={parsed.success ? parsed.localized : apiValue}
             disabled={disabled}
             InputProps={{disableUnderline}}
             onChange={(e) => {
-                const newValue = normalizeDate(e.target.value);
-                const result = parseRelativeTime(newValue, type);
+                const result = parseRelativeTime(e.target.value, type);
                 setErrVisible(false);
                 stop();
                 if (!result.success) {
@@ -49,18 +47,16 @@ export const RelativeDateTimeSelector: React.FC<RelativeDateTimeSelectorProps> =
                 } else {
                     setError('');
                 }
-                setValue(newValue, result.success);
+                setValue(result.success ? result.normalized : e.target.value, result.success);
             }}
             error={error !== ''}
             helperText={
-                small ? (
-                    undefined
-                ) : errVisible ? (
+                small ? undefined : errVisible ? (
                     <Typography color={'secondary'} variant={'caption'}>
                         {error}
                     </Typography>
                 ) : (
-                    <Typography variant={'caption'}>{!parsed.success ? '...' : parsed.value.format('llll')}</Typography>
+                    <Typography variant={'caption'}>{!parsed.success ? '...' : parsed.preview.format('llll')}</Typography>
                 )
             }
             label={label}
diff --git a/ui/src/utils/time.test.ts b/ui/src/utils/time.test.ts
@@ -1,4 +1,4 @@
-import {isValidDate, normalizeDate, parseRelativeTime, userFriendlyDate} from './time';
+import {isValidDate, parseRelativeTime} from './time';
 import moment from 'moment';
 
 moment.updateLocale('en', {
@@ -24,43 +24,160 @@ it('should test for valid date', () => {
 // 2019-10-14 Monday
 // 2019-10-21 Monday
 
-it('should parse', () => {
-    expectSuccess(parseRelativeTime('now-1d', 'startOf', moment('2019-10-20T15:55:00'))).toEqual('2019-10-19 15:55:00');
-    expectSuccess(parseRelativeTime('now-120s', 'startOf', moment('2019-10-20T15:55:15'))).toEqual('2019-10-20 15:53:15');
-    expectSuccess(parseRelativeTime('now-1d-1h', 'startOf', moment('2019-10-20T15:55:00'))).toEqual('2019-10-19 14:55:00');
-    expectSuccess(parseRelativeTime('now/w', 'startOf', moment('2019-10-20T15:55:15'))).toEqual('2019-10-14 00:00:00');
-    expectSuccess(parseRelativeTime('now/w', 'endOf', moment('2019-10-20T15:55:15'))).toEqual('2019-10-20 23:59:59');
-    expectSuccess(parseRelativeTime('now-1w/w', 'startOf', moment('2019-10-20T15:55:15'))).toEqual('2019-10-07 00:00:00');
-    expectSuccess(parseRelativeTime('now-1y+1w/w', 'startOf', moment('2019-10-20T15:55:15'))).toEqual('2018-10-22 00:00:00');
-    expectSuccess(parseRelativeTime('now/d+5h', 'startOf', moment('2019-10-20T15:55:00'))).toEqual('2019-10-20 05:00:00');
-    expectSuccess(parseRelativeTime('now/y', 'startOf', moment('2019-10-20T15:55:15'))).toEqual('2019-01-01 00:00:00');
-});
-
-it('should convert to RFC3339 and back', () => {
-    // can't put exact dates since moment doesn't allow overriding `.local()`'s timezone for unit tests
-    const userDate = '2025-01-01 10:10';
-    const rfcDate = moment(userDate).utc().format();
-
-    expect(normalizeDate(userDate)).toBe(rfcDate);
-    expect(userFriendlyDate(rfcDate)).toBe(userDate);
-});
-
-it('should not modify relative ranges', () => {
-    expect(normalizeDate('now-1d')).toBe('now-1d');
-    expect(normalizeDate('now-120s')).toBe('now-120s');
-    expect(normalizeDate('now-1d-1h')).toBe('now-1d-1h');
-    expect(normalizeDate('now/w')).toBe('now/w');
-    expect(normalizeDate('now/w')).toBe('now/w');
-    expect(normalizeDate('now-1w/w')).toBe('now-1w/w');
-    expect(normalizeDate('now-1y+1w/w')).toBe('now-1y+1w/w');
-    expect(normalizeDate('now/d+5h')).toBe('now/d+5h');
-    expect(normalizeDate('now/y')).toBe('now/y');
-});
-
-const expectSuccess = (value: ReturnType<typeof parseRelativeTime>) => {
-    if (value.success) {
-        return expect(value.value.format('YYYY-MM-DD HH:mm:ss'));
+it.each([
+    {
+        value: 'now-1d',
+        divide: 'startOf',
+        now: moment('2019-10-20T15:55:00'),
+        expected: '2019-10-19 15:55:00',
+        localized: 'now-1d',
+        normalized: 'now-1d',
+        shouldParse: true,
+    },
+    {
+        value: 'now-120s',
+        divide: 'startOf',
+        now: moment('2019-10-20T15:55:15'),
+        expected: '2019-10-20 15:53:15',
+        localized: 'now-120s',
+        normalized: 'now-120s',
+        shouldParse: true,
+    },
+    {
+        value: 'now-1d-1h',
+        divide: 'startOf',
+        now: moment('2019-10-20T15:55:00'),
+        expected: '2019-10-19 14:55:00',
+        localized: 'now-1d-1h',
+        normalized: 'now-1d-1h',
+        shouldParse: true,
+    },
+    {
+        value: 'now/w',
+        divide: 'startOf',
+        now: moment('2019-10-20T15:55:15'),
+        expected: '2019-10-14 00:00:00',
+        localized: 'now/w',
+        normalized: 'now/w',
+        shouldParse: true,
+    },
+    {
+        value: 'now/w',
+        divide: 'endOf',
+        now: moment('2019-10-20T15:55:15'),
+        expected: '2019-10-20 23:59:59',
+        localized: 'now/w',
+        normalized: 'now/w',
+        shouldParse: true,
+    },
+    {
+        value: 'now-1w/w',
+        divide: 'startOf',
+        now: moment('2019-10-20T15:55:15'),
+        expected: '2019-10-07 00:00:00',
+        localized: 'now-1w/w',
+        normalized: 'now-1w/w',
+        shouldParse: true,
+    },
+    {
+        value: 'now-1y+1w/w',
+        divide: 'startOf',
+        now: moment('2019-10-20T15:55:15'),
+        expected: '2018-10-22 00:00:00',
+        localized: 'now-1y+1w/w',
+        normalized: 'now-1y+1w/w',
+        shouldParse: true,
+    },
+    {
+        value: 'now/d+5h',
+        divide: 'startOf',
+        now: moment('2019-10-20T15:55:00'),
+        expected: '2019-10-20 05:00:00',
+        localized: 'now/d+5h',
+        normalized: 'now/d+5h',
+        shouldParse: true,
+    },
+    {
+        value: 'now/y',
+        divide: 'startOf',
+        now: moment('2019-10-20T15:55:15'),
+        expected: '2019-01-01 00:00:00',
+        localized: 'now/y',
+        normalized: 'now/y',
+        shouldParse: true,
+    },
+    {
+        value: '2025-01-01 10:10',
+        divide: 'startOf',
+        expected: '2025-01-01 10:10:00',
+        localized: '2025-01-01 10:10',
+        normalized: moment('2025-01-01 10:10').utc().format(),
+        shouldParse: true,
+    },
+    {
+        value: '2025-01-01 10:10',
+        divide: 'endOf',
+        expected: '2025-01-01 10:10:00',
+        localized: '2025-01-01 10:10',
+        normalized: moment('2025-01-01 10:10').utc().format(),
+        shouldParse: true,
+    },
+    {
+        value: '2025-01-02',
+        divide: 'startOf',
+        expected: '2025-01-02 00:00:00',
+        localized: '2025-01-02',
+        normalized: moment('2025-01-02 00:00').utc().format(),
+        shouldParse: true,
+    },
+    {
+        value: '2025-01-02',
+        divide: 'endOf',
+        expected: '2025-01-02 23:59:59',
+        localized: '2025-01-02',
+        normalized: moment('2025-01-02 23:59:59').utc().format(),
+        shouldParse: true,
+    },
+    {
+        value: moment('2025-01-02 10:00:00').format(),
+        divide: 'startOf',
+        expected: '2025-01-02 10:00:00',
+        localized: '2025-01-02 10:00',
+        normalized: moment('2025-01-02 10:00:00').utc().format(),
+        shouldParse: true,
+    },
+    {
+        value: moment('2025-01-02 00:00:00').format(),
+        divide: 'startOf',
+        expected: '2025-01-02 00:00:00',
+        localized: '2025-01-02',
+        normalized: moment('2025-01-02 00:00:00').utc().format(),
+        shouldParse: true,
+    },
+    {
+        value: moment('2025-01-02 23:59:59').utc().format(),
+        divide: 'endOf',
+        expected: '2025-01-02 23:59:59',
+        localized: '2025-01-02',
+        normalized: moment('2025-01-02 23:59:59').utc().format(),
+        shouldParse: true,
+    },
+    {
+        value: 'invalid',
+        divide: 'endOf',
+        expected: "Expected valid date (e.g. 2020-01-01 16:30) or 'now' at index 0",
+        localized: 'invalid',
+        normalized: undefined,
+        shouldParse: false,
+    },
+])('should parse', ({value, divide, now, expected, normalized, localized, shouldParse}) => {
+    const result = parseRelativeTime(value, divide as 'startOf' | 'endOf', now);
+    expect(result.success).toBe(shouldParse);
+    if (result.success) {
+        expect(result.preview.format('YYYY-MM-DD HH:mm:ss')).toEqual(expected);
+        expect(result.normalized).toEqual(normalized);
+        expect(result.localized).toEqual(localized);
+    }else{
+        expect(result.error).toEqual(expected);
     }
-    expect(value.error).toEqual('no error');
-    return expect('');
-};
+});
diff --git a/ui/src/utils/time.ts b/ui/src/utils/time.ts
@@ -2,7 +2,9 @@ import moment from 'moment-timezone';
 
 interface Success {
     success: true;
-    value: moment.Moment;
+    preview: moment.Moment;
+    localized: string;
+    normalized: string;
 }
 
 interface Failure {
@@ -32,9 +34,28 @@ enum Unit {
     Second = 's',
 }
 
+// tslint:disable-next-line:cyclomatic-complexity mccabe-complexity
 export const parseRelativeTime = (value: string, divide: 'endOf' | 'startOf', nowDate = moment()): Success | Failure => {
-    if (isValidDate(value)) {
-        return success(asDate(value));
+    for (const format of ['YYYY-MM-DD HH:mm', 'YYYY-MM-DD', 'YYYY-MM-DD[T]HH:mm:ssZ']) {
+        if (isValidDate(value, format)) {
+            const parsed = asDate(value, format);
+            if (divide === 'endOf' && format === 'YYYY-MM-DD') {
+                parsed.endOf('day');
+            }
+
+            if (format === 'YYYY-MM-DD[T]HH:mm:ssZ') {
+                const localDate = parsed.clone().local();
+                if (
+                    (divide === 'startOf' && parsed.isSame(localDate.startOf('day'), 'second')) ||
+                    (divide === 'endOf' && parsed.isSame(localDate.endOf('day'), 'second'))
+                ) {
+                    value = asDate(value).format('YYYY-MM-DD');
+                } else {
+                    value = asDate(value).format('YYYY-MM-DD HH:mm');
+                }
+            }
+            return success(parsed, value, parsed.clone().utc().format());
+        }
     }
 
     if (value.substr(0, 3) === 'now') {
@@ -71,7 +92,7 @@ export const parseRelativeTime = (value: string, divide: 'endOf' | 'startOf', no
                 case Type.Unit:
                     if (!isUnit(currentChar)) {
                         return failure(
-                            'Expected unit (' + Object.values(Unit) + ') at index ' + currentIndex + ' but was ' + currentChar
+                            'Expected unit (' + Object.values(Unit) + ') at index ' + currentIndex + ' but was ' + currentChar,
                         );
                     }
 
@@ -105,18 +126,18 @@ export const parseRelativeTime = (value: string, divide: 'endOf' | 'startOf', no
         if (expectNext === Type.Value) {
             return failure('Expected number at the end but got nothing');
         }
-        return success(time);
+        return success(time, value, value);
     }
 
     if (value.indexOf('now') !== -1) {
-        return failure("'now' must be at the start");
+        return failure('\'now\' must be at the start');
     }
 
-    return failure("Expected valid date (e.g. 2020-01-01 16:30) or 'now' at index 0");
+    return failure('Expected valid date (e.g. 2020-01-01 16:30) or \'now\' at index 0');
 };
 
-export const success = (value: moment.Moment): Success => {
-    return {success: true, value};
+export const success = (value: moment.Moment, localized: string, normalized: string): Success => {
+    return {success: true, preview: value, normalized, localized};
 };
 export const failure = (error: string): Failure => {
     return {success: false, error};
@@ -140,23 +161,3 @@ export const isSameDate = (from: moment.Moment, to?: moment.Moment): boolean =>
     const fromString = from.format('YYYYMMDD');
     return to === undefined || fromString === to.format('YYYYMMDD');
 };
-
-export function normalizeDate(date: string): string {
-    if (isValidDate(date, 'YYYY-MM-DD HH:mm')) {
-        return moment(date)
-            .utc()
-            .format();
-    } else {
-        return date;
-    }
-}
-
-export function userFriendlyDate(date: string): string {
-    if (isValidDate(date)) {
-        return moment(date)
-            .local()
-            .format('YYYY-MM-DD HH:mm');
-    } else {
-        return date;
-    }
-}
