Merge pull request #3769 from RedisInsight/fe/bugfix/RI-6066-time-format-fixes

RI-6066 fixes in datetime formatter

Author: vlad-dargel

redisinsight/ui/src/constants/datetime.ts

@@ -1,5 +1,7 @@
+import { DATETIME_FORMATTER_DEFAULT } from './keys'
+
 export const dateTimeOptions = [
-  { inputDisplay: 'HH:mm:ss.SSS d MMM yyyy', value: 'HH:mm:ss.SSS d MMM yyyy' },
+  { inputDisplay: DATETIME_FORMATTER_DEFAULT, value: DATETIME_FORMATTER_DEFAULT },
   { inputDisplay: 'yyyy-MM-dd HH:mm:ss.sss', value: 'yyyy-MM-dd HH:mm:ss.sss' },
   { inputDisplay: 'dd-MMM-yyyy HH:mm:ss.SSS', value: 'dd-MMM-yyyy HH:mm:ss.SSS' },
   { inputDisplay: 'dd.MM.yyyy HH:mm:ss', value: 'dd.MM.yyyy HH:mm:ss' }

redisinsight/ui/src/constants/keys.ts

@@ -151,7 +151,7 @@ export enum KeyValueFormat {
   DateTime = 'DateTime',
 }
 
-export const DATETIME_FORMATTER_DEFAULT = 'HH:mm:ss.SSS d MMM yyyy'
+export const DATETIME_FORMATTER_DEFAULT = 'HH:mm:ss d MMM yyyy'
 
 export enum KeyValueCompressor {
   GZIP = 'GZIP',

redisinsight/ui/src/pages/settings/components/general-settings/datetime-formatter/components/datetime-form/DatetimeForm.tsx

@@ -84,7 +84,9 @@ const DatetimeForm = ({ onFormatChange }: Props) => {
 
   const handleFormatCheck = (format = formik.values.format) => {
     const { valid, error: errorMsg } = checkDateTimeFormat(format)
-    if (!valid) {
+    if (format.length > 50) {
+      setError('Format should not exceed 50 characters')
+    } else if (!valid) {
       setError(errorMsg || 'This format is not supported')
       onFormatChange?.('Invalid Format')
     } else {

redisinsight/ui/src/pages/settings/components/general-settings/datetime-formatter/styles.module.scss

@@ -20,4 +20,7 @@
   background-color: var(--euiPageBackgroundColor);
   padding: 4px;
   margin-left: 4px;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  max-width: 330px;
 }