Fix: Metadata supports precise time selection (#12785)

### What problem does this PR solve?

Fix: Metadata supports precise time selection

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/dataset/components/metedata/hooks/use-manage-modal.ts

@@ -11,7 +11,11 @@ import { RowSelectionState } from '@tanstack/react-table';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router';
-import { MetadataType, metadataValueTypeEnum } from '../constant';
+import {
+  DEFAULT_VALUE_TYPE,
+  MetadataType,
+  metadataValueTypeEnum,
+} from '../constant';
 import {
   IBuiltInMetadataItem,
   IMetaDataReturnJSONSettings,
@@ -182,7 +186,7 @@ export const useMetadataOperations = () => {
             key,
             match: originalValue,
             value: newValuesRes,
-            type,
+            valueType: type || DEFAULT_VALUE_TYPE,
           };
           return {
             ...prev,
@@ -193,7 +197,7 @@ export const useMetadataOperations = () => {
           ...prev,
           updates: [
             ...prev.updates,
-            { key, match: originalValue, value: newValuesRes, type },
+            { key, match: originalValue, value: newValuesRes, valueType: type },
           ],
         };
       });

web/src/pages/dataset/components/metedata/interface.ts

@@ -107,7 +107,7 @@ interface UpdateOperation {
   key: string;
   match: string;
   value: string | string[];
-  type?: MetadataValueType;
+  valueType?: MetadataValueType;
 }
 
 export interface MetadataOperations {

web/src/pages/dataset/components/metedata/manage-modal-column.tsx

@@ -1,6 +1,8 @@
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Input } from '@/components/ui/input';
+import { DateInput } from '@/components/ui/input-date';
+import { formatDate } from '@/utils/date';
 import { ColumnDef, Row, Table } from '@tanstack/react-table';
 import {
   ListChevronsDownUp,
@@ -14,6 +16,7 @@ import {
   getMetadataValueTypeLabel,
   MetadataDeleteMap,
   MetadataType,
+  metadataValueTypeEnum,
 } from './constant';
 import { IMetaDataTableData } from './interface';
 
@@ -80,7 +83,7 @@ export const useMetadataColumns = ({
       setEditingValue(null);
       setShouldSave(true);
     }
-  }, [editingValue, setTableData]);
+  }, [editingValue, setTableData, setShouldSave]);
 
   const cancelEditValue = () => {
     setEditingValue(null);
@@ -192,14 +195,6 @@ export const useMetadataColumns = ({
         ),
         cell: ({ row }) => {
           const values = row.getValue('values') as Array<string>;
-          //   const supportsEnum = isMetadataValueTypeWithEnum(
-          //     row.original.valueType,
-          //   );
-
-          // if (!supportsEnum || !Array.isArray(values) || values.length === 0) {
-          //   return <div></div>;
-          // }
-
           const displayedValues = expanded ? values : values.slice(0, 2);
           const hasMore = Array.isArray(values) && values.length > 2;
 
@@ -214,26 +209,46 @@ export const useMetadataColumns = ({
 
                   return isEditing ? (
                     <div key={value}>
-                      <Input
-                        type="text"
-                        value={editingValue.newValue}
-                        onChange={(e) =>
-                          setEditingValue({
-                            ...editingValue,
-                            newValue: e.target.value,
-                          })
-                        }
-                        onBlur={saveEditedValue}
-                        onKeyDown={(e) => {
-                          if (e.key === 'Enter') {
-                            saveEditedValue();
-                          } else if (e.key === 'Escape') {
-                            cancelEditValue();
+                      {row.original.valueType ===
+                        metadataValueTypeEnum.time && (
+                        <DateInput
+                          value={new Date(editingValue.newValue)}
+                          onChange={(value) => {
+                            setEditingValue({
+                              ...editingValue,
+                              newValue: formatDate(
+                                value,
+                                'YYYY-MM-DDTHH:mm:ss',
+                              ),
+                            });
+                            // onValueChange(index, formatDate(value), true);
+                          }}
+                          showTimeSelect={true}
+                        />
+                      )}
+                      {row.original.valueType !==
+                        metadataValueTypeEnum.time && (
+                        <Input
+                          type="text"
+                          value={editingValue.newValue}
+                          onChange={(e) =>
+                            setEditingValue({
+                              ...editingValue,
+                              newValue: e.target.value,
+                            })
                           }
-                        }}
-                        autoFocus
-                        // className="text-sm min-w-20 max-w-32 outline-none bg-transparent px-1 py-0.5"
-                      />
+                          onBlur={saveEditedValue}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter') {
+                              saveEditedValue();
+                            } else if (e.key === 'Escape') {
+                              cancelEditValue();
+                            }
+                          }}
+                          autoFocus
+                          // className="text-sm min-w-20 max-w-32 outline-none bg-transparent px-1 py-0.5"
+                        />
+                      )}
                     </div>
                   ) : (
                     <Button

web/src/pages/dataset/components/metedata/manage-values-modal.tsx

@@ -8,7 +8,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { DateInput } from '@/components/ui/input-date';
 import { Modal } from '@/components/ui/modal/modal';
-import { formatPureDate } from '@/utils/date';
+import { formatDate } from '@/utils/date';
 import dayjs from 'dayjs';
 import { Plus, Trash2 } from 'lucide-react';
 import { memo, useMemo, useRef, useState } from 'react';
@@ -46,11 +46,10 @@ const ValueInputItem = memo(
           try {
             // Using dayjs to parse date strings in various formats including DD/MM/YYYY
             const parsedDate = dayjs(item, [
+              'YYYY-MM-DD HH:mm:ss',
+              'DD/MM/YYYY HH:mm:ss',
               'YYYY-MM-DD',
               'DD/MM/YYYY',
-              'MM/DD/YYYY',
-              'DD-MM-YYYY',
-              'MM-DD-YYYY',
             ]);
 
             if (!parsedDate.isValid()) {
@@ -67,6 +66,7 @@ const ValueInputItem = memo(
       }
       return item;
     }, [item, type]);
+
     return (
       <div
         key={`value-item-${index}`}
@@ -77,8 +77,13 @@ const ValueInputItem = memo(
             <DateInput
               value={value as Date}
               onChange={(value) => {
-                onValueChange(index, formatPureDate(value), true);
+                onValueChange(
+                  index,
+                  formatDate(value, 'YYYY-MM-DDTHH:mm:ss'),
+                  true,
+                );
               }}
+              showTimeSelect={true}
             />
           )}
           {type !== 'time' && (