Fix: Optimize the metadata code structure to implement metadata list structure functionality. (#12741)

### What problem does this PR solve?

Fix: Optimize the metadata code structure to implement metadata list
structure functionality.

#11564

### Type of change

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

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

@@ -13,7 +13,11 @@ import dayjs from 'dayjs';
 import { Plus, Trash2 } from 'lucide-react';
 import { memo, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { metadataValueTypeOptions } from './hooks/use-manage-modal';
+import {
+  MetadataType,
+  metadataValueTypeEnum,
+  metadataValueTypeOptions,
+} from './constant';
 import { useManageValues } from './hooks/use-manage-values-modal';
 import { IManageValuesProps, MetadataValueType } from './interface';
 
@@ -26,6 +30,7 @@ const ValueInputItem = memo(
     onValueChange,
     onDelete,
     onBlur,
+    isCanDelete = true,
   }: {
     item: string;
     index: number;
@@ -33,6 +38,7 @@ const ValueInputItem = memo(
     onValueChange: (index: number, value: string, isUpdate?: boolean) => void;
     onDelete: (index: number) => void;
     onBlur: (index: number) => void;
+    isCanDelete?: boolean;
   }) => {
     const value = useMemo(() => {
       if (type === 'time') {
@@ -84,14 +90,16 @@ const ValueInputItem = memo(
             />
           )}
         </div>
-        <Button
-          type="button"
-          variant="delete"
-          className="border border-border-button px-1 h-6 w-6 rounded-sm"
-          onClick={() => onDelete(index)}
-        >
-          <Trash2 size={14} className="w-4 h-4" />
-        </Button>
+        {isCanDelete && (
+          <Button
+            type="button"
+            variant="delete"
+            className="border border-border-button px-1 h-6 w-6 rounded-sm"
+            onClick={() => onDelete(index)}
+          >
+            <Trash2 size={14} className="w-4 h-4" />
+          </Button>
+        )}
       </div>
     );
   },
@@ -109,6 +117,7 @@ export const ManageValuesModal = (props: IManageValuesProps) => {
     isShowDescription,
     isVerticalShowValue,
     isShowType,
+    type: metadataType,
   } = props;
   const {
     metaData,
@@ -158,11 +167,33 @@ export const ManageValuesModal = (props: IManageValuesProps) => {
             label: 'Type',
             type: FormFieldType.Select,
             options: metadataValueTypeOptions,
-            defaultValue: metaData.valueType || 'string',
+            defaultValue: metaData.valueType || metadataValueTypeEnum.string,
             onChange: (value: string) => {
               setValueType(value as MetadataValueType);
               handleChange('valueType', value);
-              handleClearValues();
+              if (
+                metadataType === MetadataType.Manage ||
+                metadataType === MetadataType.UpdateSingle
+              ) {
+                handleClearValues();
+              }
+
+              if (
+                metadataType === MetadataType.Setting ||
+                metadataType === MetadataType.SingleFileSetting
+              ) {
+                if (
+                  value !== metadataValueTypeEnum.list &&
+                  value !== metadataValueTypeEnum.string
+                ) {
+                  handleChange('restrictDefinedValues', false);
+                  handleClearValues(true);
+                  formRef.current?.form.setValue(
+                    'restrictDefinedValues',
+                    false,
+                  );
+                }
+              }
             },
           },
         ]
@@ -188,6 +219,11 @@ export const ManageValuesModal = (props: IManageValuesProps) => {
             tooltip: t('knowledgeDetails.metadata.restrictDefinedValuesTip'),
             type: FormFieldType.Switch,
             defaultValue: metaData.restrictDefinedValues || false,
+            shouldRender: (formData: any) => {
+              return (
+                formData.valueType === 'list' || formData.valueType === 'string'
+              );
+            },
             onChange: (value: boolean) =>
               handleChange('restrictDefinedValues', value),
           },
@@ -232,17 +268,19 @@ export const ManageValuesModal = (props: IManageValuesProps) => {
           <div className="flex flex-col gap-2">
             <div className="flex justify-between items-center">
               <div>{t('knowledgeDetails.metadata.values')}</div>
-              {isAddValue && isVerticalShowValue && (
-                <div>
-                  <Button
-                    variant={'ghost'}
-                    className="border border-border-button"
-                    onClick={handleAddValue}
-                  >
-                    <Plus />
-                  </Button>
-                </div>
-              )}
+              {isAddValue &&
+                isVerticalShowValue &&
+                metaData.valueType === metadataValueTypeEnum['list'] && (
+                  <div>
+                    <Button
+                      variant={'ghost'}
+                      className="border border-border-button"
+                      onClick={handleAddValue}
+                    >
+                      <Plus />
+                    </Button>
+                  </div>
+                )}
             </div>
             {isVerticalShowValue && (
               <div className="flex flex-col gap-2 w-full">
@@ -259,7 +297,8 @@ export const ManageValuesModal = (props: IManageValuesProps) => {
                           handleDelete(idx);
                         });
                       }}
-                      onBlur={handleValueBlur}
+                      isCanDelete={tempValues.length > 1}
+                      onBlur={() => handleValueBlur()}
                     />
                   );
                 })}